From b81f1f5a9d81ddefd987d51738c32f4882b18915 Mon Sep 17 00:00:00 2001 From: Jimmy Huang Date: Fri, 13 Sep 2013 17:02:41 -0700 Subject: [PATCH] Added wifi settings and dummy data Change-Id: I64b7fd7e68986d74310bf73baf81cc3e64a37e74 Signed-off-by: Jimmy Huang --- css/style.css | 5 +- index.html | 82 ++++++++++- js/api-wifi.js | 119 ++++++++++++++++ js/main.js | 4 +- js/panel-wifi.js | 427 +++++++++++++++++++++++++++++++++++++++++++++++++++++++ js/websocket.js | 49 ++++++- 6 files changed, 682 insertions(+), 4 deletions(-) create mode 100644 js/api-wifi.js create mode 100644 js/panel-wifi.js diff --git a/css/style.css b/css/style.css index 8f140f1..1792026 100644 --- a/css/style.css +++ b/css/style.css @@ -18,6 +18,9 @@ right: 10px; } /* WiFi */ +#wifi_networks { + display: none; +} .network-connected .network-status { color: green; } @@ -42,7 +45,7 @@ text-overflow: initial; } /* make room for bottom for bottom of the screen due to weston compositor */ -#button_wifi_refresh { +#button_wifi_add { margin-bottom: 100px; } /* Bluetooth */ diff --git a/index.html b/index.html index 4bd605a..a423c61 100644 --- a/index.html +++ b/index.html @@ -20,7 +20,9 @@ + + @@ -39,6 +41,9 @@
@@ -46,6 +51,81 @@
+ + +
+
+ Back +

Wi-Fi

+
+ +
+
+
+
+
+
+
    +
  • + + +
    • +
+
+

Available Networks

+
    +
      +
      Refresh
      +
      Add
      +
      +
      +
      + + +
      +
      + Back +

      Network Info

      +
      + +
      +
      +
      + + +
      +
      + Back +

      Add Network

      + Add +
      + +
      + + + + +
        +
      • + +
        • +
      • + + +
        • +
      +
      +
      @@ -90,4 +170,4 @@
      - \ No newline at end of file + diff --git a/js/api-wifi.js b/js/api-wifi.js new file mode 100644 index 0000000..d5ca2b9 --- /dev/null +++ b/js/api-wifi.js @@ -0,0 +1,119 @@ +/* + * Copyright (c) 2013, Intel Corporation. + * + * This program is licensed under the terms and conditions of the + * Apache License, version 2.0. The full text of the Apache License is at + * http://www.apache.org/licenses/LICENSE-2.0 + * + */ + +/* Namespace */ +var settings = settings || {}; +settings.wifi = settings.wifi || {}; + +var WIFI_SECURITY_TYPE = { + NONE: 0, + WEP: 1, + WPA: 2, + WPA2: 3, + WPA_ENTERPRISE: 4, + WPA2_ENTERPRISE: 5 +}; + +/* Module */ +settings.wifi = (function() { + + var default_adapter = null; + + /* Adapter class */ + var WiFiAdapter = function(adapter) { + this.wifi_adapter = adapter; + this.name = 'Connman-WiFi'; + this.powered = false; + }; + + WiFiAdapter.prototype.setPowered = function(powered, success_cb, error_cb) { + if (wsAPI === undefined) return; + wsAPI.sendRequest(WS_REQUEST_TYPE.WIFI, 'enable', powered, success_cb, error_cb); + }; + + WiFiAdapter.prototype.getPowered = function(success_cb, error_cb) { + if (wsAPI === undefined) return; + var me = this; + wsAPI.sendRequest(WS_REQUEST_TYPE.WIFI, 'isEnabled', null, function(json_msg) { + var result = JSON.parse(json_msg); + if (result.isEnabled === undefined) { + console.log('Badly form json message: ' + json_msg); + } + me.powered = result.isEnabled; + success_cb(me.powered); + }, error_cb); + }; + + WiFiAdapter.prototype.scan = function(success_cb, error_cb) { + if (wsAPI === undefined) return; + wsAPI.sendRequest(WS_REQUEST_TYPE.WIFI, 'scan', null, function(json_msg) { + var network_list = JSON.parse(json_msg); + if (network_list.access_points === undefined) { + console.log('Badly form json message: ' + json_msg); + } + + var results = []; + for (var i = 0; i < network_list.access_points.length; i++) { + var network = new settings.wifi.WiFiNetwork(network_list.access_points[i].ssid); + network.connected = network_list.access_points[i].connected; + results.push(network); + } + success_cb(results); + }, error_cb); + }; + + WiFiAdapter.prototype.connectNetwork = function(network, security, passcode, success_cb, error_cb) { + if (wsAPI === undefined) return; + var connectionInfo = { + 'ssid': network, + 'security': security, + 'passcode': passcode + }; + wsAPI.sendRequest(WS_REQUEST_TYPE.WIFI, 'connect', connectionInfo, success_cb, error_cb); + }; + + WiFiAdapter.prototype.disconnectNetwork = function(network, success_cb, error_cb) { + if (wsAPI === undefined) return; + wsAPI.sendRequest(WS_REQUEST_TYPE.WIFI, 'disconnect', network, success_cb, error_cb); + }; + + /* Network class */ + WiFiNetwork = function(ssid) { + this.ssid = ssid; + this.security = WIFI_SECURITY_TYPE.NONE; + }; + + WiFiNetwork.prototype.getSecurity = function() { + return this.security; + } + + function subscribeEvents(callback) { + wsAPI.subscribeEvents(callback); + } + + function unsubscribeEvents(callback) { + wsAPI.unsubscribeEvents(callback); + } + + function getDefaultAdapter() { + if (default_adapter === null) { + default_adapter = new WiFiAdapter(wsAPI); + } + + return default_adapter; + }; + + return { + WiFiAdapter: WiFiAdapter, + WiFiNetwork: WiFiNetwork, + subscribeEvents: subscribeEvents, + unsubscribeEvents: unsubscribeEvents, + getDefaultAdapter: getDefaultAdapter + }; +})(); \ No newline at end of file diff --git a/js/main.js b/js/main.js index bc4c58c..8641ed9 100644 --- a/js/main.js +++ b/js/main.js @@ -31,10 +31,12 @@ /* Settings Panel */ $('#main').on('pageshow', function(event, data) { /* TODO: unsubscribe events if neccessary */ - if (data.prevPage.attr('id') === 'page_bluetooth') console.log('Bluetooth settings exited'); + if (data.prevPage.attr('id') === 'page_wifi') console.log('Wi-Fi settings exited'); + else if (data.prevPage.attr('id') === 'page_bluetooth') console.log('Bluetooth settings exited'); }); /* Different sub panels */ + wifiPanelInit(); bluetoothPanelInit(); } catch (e) { showMsg('Error', 'Javascript Exception Caught: ' + e); diff --git a/js/panel-wifi.js b/js/panel-wifi.js new file mode 100644 index 0000000..2e327f5 --- /dev/null +++ b/js/panel-wifi.js @@ -0,0 +1,427 @@ +/* + * Copyright (c) 2013, Intel Corporation. + * + * This program is licensed under the terms and conditions of the + * Apache License, version 2.0. The full text of the Apache License is at + * http://www.apache.org/licenses/LICENSE-2.0 + * + */ + +function wifiPanelInit() { + + settings.wifi.subscribeEvents(wifiEventReceived); + + /* WiFi Settings Panel */ + $('#page_wifi').on('pageshow', function(event, data) { + if (data.prevPage.attr('id') === 'page_wifi_detail') return; + + var adapter = settings.wifi.getDefaultAdapter(); + if (adapter === null) { + showMsg('Error', 'WiFi adapter not found'); + return; + } + console.log('Default WiFi adapter: ', adapter.name); + + if (adapter.name != undefined) { + $('#label_wifi_adapter').html(adapter.name); + } else { + $('#label_wifi_adapter').html('WiFi adapter not found'); + } + + adapter.getPowered(function(is_powered) { + if (adapter.powered) { + wifiToggleOn(); + wifiScan(adapter); + } else { + wifiToggleOff(); + } + }, function(e) { + showMsg('Error', 'Cannot get WiFi state: ' + e); + }); + }); + + $('#toggle_wifi').change(function() { + var wifi_switch = $(this); + var adapter = settings.wifi.getDefaultAdapter(); + if (adapter === null) { + showMsg('Error', 'WiFi adapter not found'); + wifiToggleOff(); + return; + } + + if (wifi_switch[0].selectedIndex === 0) { + adapter.setPowered(false, function() { + /* success */ + console.log('Successfully disable wifi subsystem'); + }, function(e) { + /* error */ + $('#toggle_wifi').val('on').slider('refresh'); + showMsg('Error', 'Cannot disable WiFi subsystem: ' + e); + }); + } else { + adapter.setPowered(true, function() { + /* success */ + console.log('Successfully enable WiFi subsystem'); + wifiScan(adapter); + }, function(e) { + /* error */ + $('#toggle_wifi').val('off').slider('refresh'); + showMsg('Error', 'Cannot enable WiFi subsystem: ' + e); + }); + } + }); + + $('#button_wifi_refresh').on('click', function() { + var adapter = settings.wifi.getDefaultAdapter(); + if (adapter === null) { + showErr('Error', 'WiFi adapter not found'); + } + + wifiScan(adapter); + }); + + $('#button_wifi_add').on('click', function() { + var adapter = settings.wifi.getDefaultAdapter(); + if (adapter === null) { + showMsg('Error', 'WiFi adapter not found'); + } + + $.mobile.changePage('#page_wifi_add'); + }); + + /* WiFi network detail page */ + $('#page_wifi_detail').on('pageshow', function(event, data) { + console.log('Entering WiFi detail info page'); + var network_id = localStorage.getItem('wifi_network_id'); + if (network_id == undefined) return; + var network = $(jqId(network_id)).data('network-object'); + wifiConstructDetailPanel(network); + }); + + /* WiFi add new network page */ + $('#page_wifi_add').on('pagebeforeshow', function(event, data) { + console.log('Entering wifi add network page'); + $('#input_wifi_ssid').val(''); + $('#input_wifi_password').val(''); + $('#select_wifi_security').val('None').change(); + $('#input_wifi_password').textinput('disable'); + }); + + $('#page_wifi_button_add').on('click', function() { + var adapter = settings.wifi.getDefaultAdapter(); + var ssid = $('#input_wifi_ssid').val(); + var security_option = $('#select_wifi_security').val(); + var passcode = $('#input_wifi_password').val(); + + console.log(ssid); + if (ssid === '') { + showMsg('Error', 'Enter SSID'); + return; + } + if (security_option !== 'None') { + showMsg('Error', 'Not supported'); + return; + } + + showSpinner(false, 'Connecting...'); + adapter.connectNetwork(ssid, security_option, passcode, function() { + /* success */ + hideSpinner(); + $.mobile.changePage('#page_wifi'); + + }, function(e) { + /* error */ + hideSpinner(); + showMsg('Error', 'WiFi connect failed: ' + e); + }); + }); + + $('#select_wifi_security').on('change', function(event, data) { + var security = this.value; + console.log('selected WiFi security: ' + security); + + if (security === 'None') { + $('#input_wifi_password').textinput('disable'); + $('#input_wifi_password').val(''); + } else { + $('#input_wifi_password').textinput('enable'); + } + }); +} + +function wifiEventReceived(event) { + if (event.type !== WS_EVENT_TYPE.WIFI) return; + console.log('WiFi event received: [' + event.name + ', ' + event.value + ']'); + if (event.name === 'enabled' && event.value === true) { + wifiToggleOn(); + } else if (event.name === 'enabled' && event.value === false) { + wifiToggleOff(); + } +} + +function wifiClearKnownList() { + console.log('Clear known WiFi network list'); + $('#listview_network_known').html(''); +} + +function wifiClearAvailableList() { + console.log('Clear available WiFi network list'); + $('#listview_network_available').html(''); +} + +function wifiScan(adapter) { + console.log('Start wifi scan'); + /* clear the network list with new scan */ + wifiClearKnownList(); + wifiClearAvailableList(); + + adapter.scan(function(networks) { + console.log('found ' + networks.length + ' networks'); + for (var i = 0; i < networks.length; i++) { + var network = networks[i]; + console.log('network ssid: ' + network.ssid); + console.log('network connected: ' + network.connected); + wifiUpdateNetwork(network); + } + }, function(e) { + showMsg('Error', 'Cannot scan: ' + e); + }) +} + +function wifiRefreshList() { + $('#listview_network_known').listview('refresh'); + $('#listview_network_available').listview('refresh'); +} + +function wifiAppendToKnownList(network) { + console.log('Append to known network list - ' + network.ssid); + if ($('#listview_network_known').find(jqId(network.ssid)).length != 0) return; + + var parent = '#listview_network_known'; + wifiConstructNetworkElement(parent, network); + wifiUpdateNetworkButton(network); + wifiRefreshList(); +} + +function wifiRemoveFromKnownList(network_ssid) { + var removeThis = $('#listview_network_known li').filter(function() { + return $(this).find(jqId(network_ssid)).length === 1; + }); + + if (removeThis.length !== 0) { + console.log('Remove from known network list - ' + network_ssid); + removeThis.remove(); + wifiRefreshList(); + } +} + +function wifiAppendToAvailableList(network) { + console.log('Append to available list - ' + network.ssid); + if ($('#listview_network_available').find(jqId(network.ssid)).length != 0) return; + + var parent = '#listview_network_available'; + wifiConstructNetworkElement(parent, network); + wifiUpdateNetworkButton(network); + wifiRefreshList(); +} + +function wifiRemoveFromAvailableList(network_ssid) { + var removeThis = $('#listview_network_available li').filter(function() { + return $(this).find(jqId(network_ssid)).length === 1; + }); + + if (removeThis.length !== 0) { + console.log('Remove from available list: ' + network_ssid); + removeThis.remove(); + wifiRefreshList(); + } +} + +function wifiConstructNetworkElement(parent, network) { + var html = '
    • '; + html += '
      ' + network.ssid + '
      '; + html += '
      '; + html += '
      '; + html += '
      • '; + $(parent).append(html).trigger('create'); + + /* store network object in the element so we can reference it later */ + $(jqId(network.ssid)).data('network-object', network); + + $(jqId(network.ssid)).on('click', function() { + localStorage.setItem('wifi_network_id', network.ssid); + $.mobile.changePage('#page_wifi_detail'); + }); + + $(jqId(network.ssid)).find('div.network-action-button').on('click', function(e) { + var parent = $(this).parent().attr('id'); + console.log('network action button clicked'); + + /* + * prevent the click event to propagate up + */ + e.stopImmediatePropagation(); + e.preventDefault(); + + var adapter = settings.wifi.getDefaultAdapter(); + if (adapter === null) return; + + /* retrieve the network object from element */ + var network = $(jqId(parent)).data('network-object'); + if (network == undefined) { + console.error('Wifi network not found'); + return; + } + + if (!network.connected) { + createPopupDialog(false, false, 'Connect to network', network.ssid, 'Connect', 'Cancel', function() { + console.log('WiFi connect to network: ' + network.ssid); + showSpinner(false, 'Connecting...'); + adapter.connectNetwork(network.ssid, null, null, function() { + /* success */ + hideSpinner(); + network.connected = true; + + /* changing from disconnected to connected */ + wifiUpdateNetwork(network); + }, function(e) { + /* error */ + hideSpinner(); + showMsg('Error', 'WiFi connect failed: ' + e); + }); + }); + } else { + console.log('Wifi disconnect from network: ' + network.ssid); + showSpinner(false, 'Disconnecting...'); + adapter.disconnectNetwork(network.ssid, function() { + /* success */ + hideSpinner(); + network.connected = false; + $('#button_wifi_disconnect').remove(); + + /* changing from connected to disconnected */ + wifiUpdateNetwork(network); + }, function(e) { + /* error */ + hideSpinner(); + showMsg('Error', 'Network disconnect failed: ' + e); + + /* Something is wrong, remove from connected list */ + wifiRemoveFromKnownList(network.ssid); + }); + } + }); +} + +function wifiUpdateNetwork(network) { + console.log('Constructing or updating WiFi network'); + + /* reposition device if it's connected or disconnected */ + if (network.connected) { + wifiRemoveFromAvailableList(network.ssid); + wifiAppendToKnownList(network); + } else { + wifiRemoveFromKnownList(network.ssid); + wifiAppendToAvailableList(network); + } + + /* update network button for allowed action */ + wifiUpdateNetworkButton(network); + + /* update network connection status */ + wifiUpdateConnectionStatus(network); +} + +function wifiUpdateNetworkButton(network) { + if (network.connected) { + $(jqId(network.ssid)).find('div.network-action-button').find('span').text('Disconnect'); + } else { + $(jqId(network.ssid)).find('div.network-action-button').find('span').text('Connect'); + } +} + +function wifiUpdateConnectionStatus(network) { + var status = 'disconnected'; + if (network.connected) { + $(jqId(network.ssid)).addClass('network-connected'); + status = 'connected'; + } else { + status = 'disconnected'; + $(jqId(network.ssid)).removeClass('network-connected'); + } + + wifiUpdateConnectionStatusText(network, status); +} + +function wifiUpdateConnectionStatusText(network, status) { + $(jqId(network.ssid)).find('div.network-status').text(status); +} + +function wifiConstructDetailPanel(network) { + var status_connected = 'No'; + + if (network == null) return; + if (network.connected) status_connected = 'Yes'; + + $('#page_wifi_detail_content').html(''); + var html = ''; + $('#page_wifi_detail_content').append(html).trigger('create'); + + if (network.connected) { + html = '
      Disconnect
      '; + $('#page_wifi_detail_content').append(html).trigger('create'); + + $('#button_wifi_disconnect').on('click', function(e) { + console.log('WiFi disconnect from network: ' + network.ssid); + /* retrieve the network object from element */ + var adapter = settings.wifi.getDefaultAdapter(); + if (adapter === null) return; + + createPopupDialog(false, false, 'Disconnect from network', network.ssid, 'Disconnect', 'Cancel', function() { + showSpinner(false, 'Disconnecting...'); + adapter.disconnectNetwork(network.ssid, function() { + /* success */ + hideSpinner(); + network.connected = false; + $('#button_wifi_disconnect').remove(); + + /* changing from connected to disconnected */ + wifiUpdateNetwork(network); + setTimeout(function() { + $.mobile.changePage('#page_wifi'); + }, 1000); + }, function(e) { + /* error */ + hideSpinner(); + showMsg('Error', 'Network disconnect failed: ' + e); + + /* Something is wrong, remove from connected list */ + wifiRemoveFromKnownList(network.ssid); + }); + }); + }); + } + $('#listview_wifi_detail').listview('refresh'); +} + +function wifiUpdateDetailPanel(network) { + var status_connected = 'No'; + + if (network == null) return; + if (network.connected) status_connected = 'Yes'; + $('#wifi_detail_connected').text(status_connected); + $('#listview_wifi_detail').listview('refresh'); +} + +function wifiToggleOn() { + $('#wifi_networks').show(); + $('#toggle_wifi').val('on').slider('refresh'); +} + +function wifiToggleOff() { + $('#wifi_networks').hide(); + $('#toggle_wifi').val('off').slider('refresh'); +} \ No newline at end of file diff --git a/js/websocket.js b/js/websocket.js index 098dea4..bd4aa12 100644 --- a/js/websocket.js +++ b/js/websocket.js @@ -245,6 +245,54 @@ var wsAPI = (function() { switch (msg.type) { case WS_REQUEST_TYPE.WIFI: + if (msg.name === 'isEnabled') { + /* default to enabled */ + var results = { + 'isEnabled': true + }; + replyMsg = JSON.stringify(results); + } else if (msg.name === 'enable') { + if (msg.data === true) { + fireEvent(WS_EVENT_TYPE.WIFI, 'enabled', true); + } else { + fireEvent(WS_EVENT_TYPE.WIFI, 'enabled', false); + } + } else if (msg.name === 'scan') { + var results = { + 'access_points': [{ + 'ssid': 'Access Point 1', + 'connected': true + }, { + 'ssid': 'Access Point 2', + 'connected': false + }, { + 'ssid': 'Access Point 3', + 'connected': false + }, { + 'ssid': 'Access Point 4', + 'connected': false + }] + } + replyMsg = JSON.stringify(results); + /* simulate scan behavior */ + replyDelay = 2000; + } else if (msg.name === 'connect') { + replyMsg = msg.data; + fireEvent(WS_EVENT_TYPE.WIFI, 'connecting', replyMsg); + setTimeout(function() { + fireEvent(WS_EVENT_TYPE.WIFI, 'connected', replyMsg); + }, 1000); + } else if (msg.name === 'disconnect') { + replyMsg = msg.data; + fireEvent(WS_EVENT_TYPE.WIFI, 'disconnecting', replyMsg); + setTimeout(function() { + fireEvent(WS_EVENT_TYPE.WIFI, 'disconnected', replyMsg); + }, 1000); + } else { + call.errorCB('Unsupported request name: ' + msg.name); + return; + } + break; case WS_REQUEST_TYPE.BLUETOOTH: if (msg.name === 'enable') { fireEvent(WS_EVENT_TYPE.BLUETOOTH, 'enabled', true); @@ -255,7 +303,6 @@ var wsAPI = (function() { return; } break; - case WS_REQUEST_TYPE.WIFI: case WS_REQUEST_TYPE.DISPLAY: case WS_REQUEST_TYPE.SOUND: case WS_REQUEST_TYPE.DATETIME: -- 2.7.4