From 56514d2337ab5b1d2d8f3666c211e2e04f73bd68 Mon Sep 17 00:00:00 2001 From: Humberto Alfonso Díaz Date: Wed, 27 Nov 2019 14:00:37 +0100 Subject: FUNCT Added bluetooth screen --- src/index.html | 96 ++++++++++++++++++++++++++++-------------- src/index.js | 34 +++++++++++++-- src/js/app.js | 6 ++- src/js/bluetooth.js | 74 ++++++++++++++++++++++++++------ src/js/wifi.js | 34 +++++++++++++++ src/styles/app.scss | 4 +- src/styles/fonts/icomoon.eot | Bin 2300 -> 2348 bytes src/styles/fonts/icomoon.svg | 5 ++- src/styles/fonts/icomoon.ttf | Bin 2136 -> 2184 bytes src/styles/fonts/icomoon.woff | Bin 2212 -> 2260 bytes src/styles/main.scss | 88 ++++++++++++++++++++++++++------------ src/styles/portrait.scss | 4 ++ src/styles/style.css | 17 +++++--- 13 files changed, 277 insertions(+), 85 deletions(-) create mode 100644 src/js/wifi.js (limited to 'src') diff --git a/src/index.html b/src/index.html index 6f16a23..6ec2e60 100644 --- a/src/index.html +++ b/src/index.html @@ -28,46 +28,50 @@
- +
Date & Time
+
+
- +
Bluetooth
- - + +
- +
Wifi
- + +
- +
Wired
+
- +
Version info @@ -78,7 +82,10 @@

- Date & Time + + + + Date & Time

@@ -90,59 +97,86 @@ Time

- - Confirm -

+ + + Bluetooth

+
+ + Available + + + Paired + + + Connected + +
- - Confirm -

+ + + Wifi

- - Confirm - +
+

+ + + Wired

- - Confirm -

+ + + Version info

- - Confirm -
diff --git a/src/index.js b/src/index.js index efdafaa..6080b75 100644 --- a/src/index.js +++ b/src/index.js @@ -15,7 +15,13 @@ */ /* JS */ import { init } from './js/app'; -import { toggle as toggle_bluetooth } from './js/bluetooth'; +import { toggle as toggle_bluetooth, + pair as pair_bluetooth, + connect as connect_bluetooth, + disconnect as disconnect_bluetooth, + filter as setFilter_bluetooth, + remove as remove_device_bluetooth +} from './js/bluetooth'; /* CSS */ import './styles/app.scss'; @@ -30,8 +36,30 @@ window.hide = function(page) { document.getElementById(page).classList.add('hide'); } -window.toggle_bluetooth = function() { - toggle_bluetooth(); +window.toggle_bluetooth = toggle_bluetooth; +window.remove_device_bluetooth = remove_device_bluetooth; +window.manage_remove_bluetooth = function(deviceId, isPaired, isConnected) { + if ( !isConnected ) { + remove_device_bluetooth(deviceId); + } else if ( isConnected ) { + disconnect_bluetooth(deviceId); + } } +window.manage_bluetooth = function(deviceId, isPaired, isConnected) { + if ( !isPaired && !isConnected ) { + pair_bluetooth(deviceId); + } else if ( isPaired && !isConnected ) { + connect_bluetooth(deviceId); + } +}; +window.setFilter_bluetooth = function(entry){ + setFilter_bluetooth(entry.getAttribute('filter')); + var buttons = document.getElementById('bluetooth').getElementsByClassName('footer')[0].getElementsByClassName('button'); + for( var i = 0; i < buttons.length; i++ ) { + buttons[i].classList.remove('active'); + } + + entry.classList.add('active'); +} init(); \ No newline at end of file diff --git a/src/js/app.js b/src/js/app.js index 8e80039..ed7b028 100644 --- a/src/js/app.js +++ b/src/js/app.js @@ -1,8 +1,12 @@ import { init as init_bluetooth } from './bluetooth'; +import { init as init_wifi } from './wifi'; import { api } from 'agl-js-api'; export function init() { api.init(); init_bluetooth(); -} \ No newline at end of file + // init_wifi(); +} + +window.api = api; \ No newline at end of file diff --git a/src/js/bluetooth.js b/src/js/bluetooth.js index 679ef0b..30c2d82 100644 --- a/src/js/bluetooth.js +++ b/src/js/bluetooth.js @@ -1,8 +1,10 @@ import { bluetooth } from 'agl-js-api'; import Mustache from 'mustache'; -var isPowered = false; +window.bluetooth = bluetooth; + var template; +var filterBy = 'available'; function update_state(state) { var control = document.getElementById('BluetoothControl'); @@ -14,12 +16,27 @@ function update_state(state) { } function update_devices(devices) { - console.log('update_devices', devices); var deviceList = document.getElementById('BluetoothContainer'); deviceList.innerHTML = ''; devices.forEach(function(device) { - deviceList.innerHTML += Mustache.render(template, device); + if ( filterBy === 'connected' && device.properties.connected ) { + deviceList.innerHTML += Mustache.render(template, device); + } else if ( filterBy === 'paired' && + device.properties.paired && + !device.properties.connected ) { + deviceList.innerHTML += Mustache.render(template, device); + } else if ( filterBy === 'available' & + !device.properties.connected && + !device.properties.paired) { + deviceList.innerHTML += Mustache.render(template, device); + } + }); +} + +function refresh_devices() { + bluetooth.managed_objects().then(function(result){ + update_devices(result.devices); }); } @@ -34,17 +51,50 @@ export function toggle() { export function init() { template = document.getElementById('bluetooth-device-template').innerHTML; Mustache.parse(template); - bluetooth.adapter_state().then(update_state); + bluetooth.adapter_state({ + discovery: true + }).then(update_state); + refresh_devices(); - bluetooth.managed_objects().then(function(result){ - update_devices(result.devices); + // This code has been commented to improve performance + // bluetooth.on_device_changes(function(data) { + // bluetooth.managed_objects().then(function(result){ + // update_devices(result.devices); + // }); + // }).then(function(result) { + // console.log('SUBSCRIBED TO DEVICE CHANGES'); + // }); +} + +export function filter(filter) { + filterBy = filter; + refresh_devices(); +} + +export function getFilter() { + return filterBy; +} + +export function remove(deviceId) { + bluetooth.remove_device(deviceId).then(function() { + refresh_devices(); + }); +} + +export function pair(deviceId) { + bluetooth.pair(deviceId).then(function() { + refresh_devices(); }); +} + +export function connect(deviceId) { + bluetooth.connect(deviceId).then(function() { + refresh_devices(); + }); +} - bluetooth.on_device_changes(function(data) { - bluetooth.managed_objects().then(function(result){ - update_devices(result.devices); - }); - }).then(function(result) { - console.log('SUBSCRIBED TO DEVICE CHANGES'); +export function disconnect(deviceId) { + bluetooth.disconnect(deviceId).then(function() { + refresh_devices(); }); } \ No newline at end of file diff --git a/src/js/wifi.js b/src/js/wifi.js new file mode 100644 index 0000000..35e7235 --- /dev/null +++ b/src/js/wifi.js @@ -0,0 +1,34 @@ +import { network } from 'agl-js-api'; +import Mustache from 'mustache'; + +var template; + + +function update_devices(devices) { + console.log('update_devices', devices); + var deviceList = document.getElementById('WifiContainer'); + deviceList.innerHTML = ''; + + devices.forEach(function(device) { + if( device.properties.type === 'wifi' ) { + deviceList.innerHTML += Mustache.render(template, device); + } + }); +} + +export function init() { + template = document.getElementById('wifi-device-template').innerHTML; + Mustache.parse(template); + + setInterval(function() { + network.services().then(function(result) { + update_devices(result.values); + }) + }, 10000); + + network.on_global_state(function(result) { + console.log('on_global_state', result); + }).then(function(){ + console.log('SUBSCRIBED', 'on_global_state'); + }); +} \ No newline at end of file diff --git a/src/styles/app.scss b/src/styles/app.scss index d97030b..c69ad19 100644 --- a/src/styles/app.scss +++ b/src/styles/app.scss @@ -1,5 +1,6 @@ $colors: ( primary: #00ADDC, + secondary: #223340, font: #FFFFFF, grey: #848286 ); @@ -7,4 +8,5 @@ $colors: ( @import "style.css"; @import "main.scss"; @import "portrait.scss"; -@import "landscape.scss"; \ No newline at end of file +@import "landscape.scss"; +@import "~@fortawesome/fontawesome-free/css/all.min.css"; \ No newline at end of file diff --git a/src/styles/fonts/icomoon.eot b/src/styles/fonts/icomoon.eot index fb55d1c..ba1208c 100755 Binary files a/src/styles/fonts/icomoon.eot and b/src/styles/fonts/icomoon.eot differ diff --git a/src/styles/fonts/icomoon.svg b/src/styles/fonts/icomoon.svg index 6fedeea..809d2c2 100755 --- a/src/styles/fonts/icomoon.svg +++ b/src/styles/fonts/icomoon.svg @@ -14,9 +14,10 @@ - - + + + \ No newline at end of file diff --git a/src/styles/fonts/icomoon.ttf b/src/styles/fonts/icomoon.ttf index ec51acb..f79ee84 100755 Binary files a/src/styles/fonts/icomoon.ttf and b/src/styles/fonts/icomoon.ttf differ diff --git a/src/styles/fonts/icomoon.woff b/src/styles/fonts/icomoon.woff index ca1195e..f21dee2 100755 Binary files a/src/styles/fonts/icomoon.woff and b/src/styles/fonts/icomoon.woff differ diff --git a/src/styles/main.scss b/src/styles/main.scss index 6b917d1..84d877c 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -26,7 +26,6 @@ body { a { color: map-get($colors, font); text-decoration: none; - font-size: 2.5rem; } .button { @@ -51,33 +50,44 @@ body { } .page { - display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: center; height: 100%; overflow: hidden; + position: relative; &.hide { display: none; } .header { - text-align: center; - margin: 0; + text-align: left; + margin: 50px 0; + + .backButton { + padding-right: 20px; + font-size: 1em; + } } .container { - display: flex; - flex-direction: column; - flex-wrap: nowrap; - justify-content: center; - flex-grow: 2; + overflow-y: scroll; + height: 1040px; .entry { - height: 120px; - line-height: 120px; - border-bottom: 1px solid map-get($colors, grey); + $entryHeight: 120px; + height: $entryHeight; + line-height: $entryHeight; + border-bottom: 9 solid map-get($colors, grey); + + &:nth-last-child(1) { + margin-bottom: 90px; + } + + &.secondary { + $entryHeight: 90px; + } &:last-child { border-bottom: none; @@ -85,6 +95,7 @@ body { .icon { width: 10%; + height: $entryHeight; position: relative; float: left; text-align: center; @@ -95,9 +106,20 @@ body { float: left; text-align: left; width: 75%; + height: $entryHeight; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; + + .title { + height: 2*$entryHeight/3; + line-height: 2*$entryHeight/3; + } + .subtitle { + height: $entryHeight/3; + line-height: $entryHeight/3; + font-size: 0.75em; + } } .control { @@ -105,46 +127,56 @@ body { position: relative; float: left; text-align: right; - font-size: 5rem; + height: $entryHeight; & > * { - height: 120px; - line-height: 120px; + height: $entryHeight; + line-height: $entryHeight; } &.enabled { - .icon-toggle_on { + .on { display: block; color: map-get($colors, primary); } - .icon-toggle_off { + .off { display: none; } } - .icon-toggle_on { + .on { display: none; } - .icon-toggle_off { + .off { display: block; } } } } - - - .confirm { + .footer { position: absolute; - bottom: 5%; + bottom: 0; text-align: center; - height: 120px; - line-height: 120px; - width: 90%; - background: map-get($colors, primary); - border-radius: 20px; + height: 80px; + line-height: 80px; + width: 100%; + display: flex; + flex-direction: row; + flex-wrap: nowrap; + justify-content: space-evenly; + align-content: stretch; + + .button { + flex-grow: 1; + background: map-get($colors, secondary); + + &.active { + background: map-get($colors, primary); + } + } } } diff --git a/src/styles/portrait.scss b/src/styles/portrait.scss index eff553c..4016600 100644 --- a/src/styles/portrait.scss +++ b/src/styles/portrait.scss @@ -2,6 +2,10 @@ html { background-image: url('../images/vertical_background.png'); + background-position: top center; + background-repeat: no-repeat; + background-color: transparent; + height: 992px; } body { diff --git a/src/styles/style.css b/src/styles/style.css index e656a4e..d947765 100755 --- a/src/styles/style.css +++ b/src/styles/style.css @@ -1,10 +1,10 @@ @font-face { font-family: 'icomoon'; - src: url('fonts/icomoon.eot?6brftk'); - src: url('fonts/icomoon.eot?6brftk#iefix') format('embedded-opentype'), - url('fonts/icomoon.ttf?6brftk') format('truetype'), - url('fonts/icomoon.woff?6brftk') format('woff'), - url('fonts/icomoon.svg?6brftk#icomoon') format('svg'); + src: url('fonts/icomoon.eot?wt3pj6'); + src: url('fonts/icomoon.eot?wt3pj6#iefix') format('embedded-opentype'), + url('fonts/icomoon.ttf?wt3pj6') format('truetype'), + url('fonts/icomoon.woff?wt3pj6') format('woff'), + url('fonts/icomoon.svg?wt3pj6#icomoon') format('svg'); font-weight: normal; font-style: normal; font-display: block; @@ -34,10 +34,10 @@ .icon-bluetooth:before { content: "\e901"; } -.icon-keyboard_arrow_down:before { +.icon-arrow_down:before { content: "\e907"; } -.icon-keyboard_arrow_up:before { +.icon-arrow_up:before { content: "\e908"; } .icon-computer:before { @@ -46,6 +46,9 @@ .icon-phone:before { content: "\e90b"; } +.icon-arrow_back:before { + content: "\e90c"; +} .icon-wifi:before { content: "\e902"; } -- cgit 1.2.3-korg