diff options
| -rw-r--r-- | package.json | 1 | ||||
| -rw-r--r-- | src/index.html | 96 | ||||
| -rw-r--r-- | src/index.js | 34 | ||||
| -rw-r--r-- | src/js/app.js | 6 | ||||
| -rw-r--r-- | src/js/bluetooth.js | 74 | ||||
| -rw-r--r-- | src/js/wifi.js | 34 | ||||
| -rw-r--r-- | src/styles/app.scss | 4 | ||||
| -rwxr-xr-x | src/styles/fonts/icomoon.eot | bin | 2300 -> 2348 bytes | |||
| -rwxr-xr-x | src/styles/fonts/icomoon.svg | 5 | ||||
| -rwxr-xr-x | src/styles/fonts/icomoon.ttf | bin | 2136 -> 2184 bytes | |||
| -rwxr-xr-x | src/styles/fonts/icomoon.woff | bin | 2212 -> 2260 bytes | |||
| -rw-r--r-- | src/styles/main.scss | 88 | ||||
| -rw-r--r-- | src/styles/portrait.scss | 4 | ||||
| -rwxr-xr-x | src/styles/style.css | 17 | ||||
| -rw-r--r-- | webpack.config.js | 10 |
15 files changed, 287 insertions, 86 deletions
diff --git a/package.json b/package.json index 1109399..6fd6ffa 100644 --- a/package.json +++ b/package.json @@ -18,6 +18,7 @@ "automotivegradelinux" ], "devDependencies": { + "@fortawesome/fontawesome-free": "^5.11.2", "clean-webpack-plugin": "^1.0.1", "copy-webpack-plugin": "^4.6.0", "css-loader": "^2.1.0", 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 @@ <div class="container"> <a href="#" class="entry" onclick="window.show('datetime');"> <div class="icon"> - <span class="icon-time"></span> + <i class="fa fa-clock"></i> </div> <div class="label"> Date & Time </div> + <div class="control"> + </div> </a> <a href="#" class="entry"> <div class="icon"> - <span class="icon-bluetooth"></span> + <i class="fab fa-bluetooth-b"></i> </div> <div class="label" onclick="window.show('bluetooth');"> Bluetooth </div> <div id="BluetoothControl" class="control enabled" onclick="window.toggle_bluetooth();"> - <span class="icon-toggle_on"></span> - <span class="icon-toggle_off"></span> + <span class="fa fa-toggle-on on"></span> + <span class="fa fa-toggle-off off"></span> </div> </a> <a href="#" class="entry" onclick="window.show('wifi');"> <div class="icon"> - <span class="icon-wifi"></span> + <i class="fas fa-wifi"></i> </div> <div class="label"> Wifi </div> <div class="control"> - <span class="icon-toggle_off"></span> + <!-- <span class="fa fa-toggle-on on"></span> --> + <span class="fa fa-toggle-off off"></span> </div> </a> <a href="#" class="entry" onclick="window.show('wired');"> <div class="icon"> - <span class="icon-ethernet"></span> + <i class="fas fa-network-wired"></i> </div> <div class="label"> Wired </div> </a> <a href="#" class="entry" onclick="window.show('version');"> + <div class="icon"></div> <div class="icon"> - <span class="icon-speed"></span> + <i class="fas fa-tachometer-alt"></i> </div> <div class="label"> Version info @@ -78,7 +82,10 @@ <div class="secondary page hide" id="datetime"> <h1 class="header"> - Date & Time + <a href="#" class="backButton" onclick="window.hide('datetime')"> + <i class="fas fa-chevron-left"></i> + </a> + Date & Time </h1> <div class="entry"> <h2> @@ -90,59 +97,86 @@ Time </h2> </div> - <a href="#" class="confirm button" onclick="window.hide('datetime')"> - Confirm - </a> </div> <div class="secondary page hide" id="bluetooth"> <h1 class="header"> + <a href="#" class="backButton" onclick="window.hide('bluetooth')"> + <i class="fas fa-chevron-left"></i> + </a> Bluetooth </h1> <div id="BluetoothContainer" class="container"></div> + <div class="footer"> + <a href="#" filter="available" class="button active" onclick="window.setFilter_bluetooth(this)"> + Available + </a> + <a href="#" filter="paired" class="button" onclick="window.setFilter_bluetooth(this)"> + Paired + </a> + <a href="#" filter="connected" class="button" onclick="window.setFilter_bluetooth(this)"> + Connected + </a> + </div> <script id="bluetooth-device-template" type="x-tmpl-mustache"> - <a href="#" class="entry"> + <div class="entry" deviceId="{{device}}"> <div class="icon"> - <span class="icon-{{ properties.icon }}"></span> + <span class="fab fa-bluetooth"></span> </div> - <div class="label"> - {{ properties.name }} + <div class="label" onclick="window.manage_bluetooth('{{device}}', {{properties.paired}}, {{ properties.connected }})"> + <div class="title"> + {{ properties.name }} + </div> + <div class="subtitle"> + {{ properties.address }} + </div> </div> - <div class="control"> - <span class="icon-clear"></span> + <div class="control" onclick="window.remove_device_bluetooth('{{device}}')"> + <span class="fa fa-trash"></span> </div> - </a> + </div> </script> - <a href="#" class="confirm button" onclick="window.hide('bluetooth')"> - Confirm - </a> </div> <div class="secondary page hide" id="wifi"> <h1 class="header"> + <a href="#" class="backButton" onclick="window.hide('wifi')"> + <i class="fas fa-chevron-left"></i> + </a> Wifi </h1> - <a href="#" class="confirm button" onclick="window.hide('wifi')"> - Confirm - </a> + <div id="WifiContainer" class="container"></div> + <script id="wifi-device-template" type="x-tmpl-mustache"> + <a href="#" class="entry"> + <div class="icon"> + <span class="icon-wifi"></span> + </div> + <div class="label"> + {{ properties.name }} + </div> + <div class="control"> + <span class="icon-clear"></span> + </div> + </a> + </script> </div> <div class="secondary page hide" id="wired"> <h1 class="header"> + <a href="#" class="backButton" onclick="window.hide('wired')"> + <i class="fas fa-chevron-left"></i> + </a> Wired </h1> - <a href="#" class="confirm button" onclick="window.hide('wired')"> - Confirm - </a> </div> <div class="secondary page hide" id="version"> <h1 class="header"> + <a href="#" class="backButton" onclick="window.hide('version')"> + <i class="fas fa-chevron-left"></i> + </a> Version info </h1> - <a href="#" class="confirm button" onclick="window.hide('version')"> - Confirm - </a> </div> <div class="log" id="log"> 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 Binary files differindex fb55d1c..ba1208c 100755 --- a/src/styles/fonts/icomoon.eot +++ b/src/styles/fonts/icomoon.eot 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 @@ <glyph unicode="" glyph-name="speed" d="M512 256.667q-34 0-60 25t-26 59q0 36 26 62l362 240-242-362q-24-24-60-24zM870 572.667q28-44 48-112t20-120q0-118-56-212-26-44-74-44h-592q-48 0-74 44-56 94-56 212 0 176 125 301t303 125q52 0 119-20t111-48l-80-52q-72 36-152 36-140 0-241-100t-101-242q0-92 46-170h592q46 78 46 170 0 82-36 154z" /> <glyph unicode="" glyph-name="toggle_off" d="M298 298.667q52 0 90 38t38 90-38 90-90 38-90-38-38-90 38-90 90-38zM726 640.667q88 0 150-63t62-151-62-151-150-63h-428q-88 0-150 63t-62 151 62 151 150 63h428z" /> <glyph unicode="" glyph-name="toggle_on" d="M726 298.667q52 0 90 38t38 90-38 90-90 38-90-38-38-90 38-90 90-38zM726 640.667q88 0 150-63t62-151-62-151-150-63h-428q-88 0-150 63t-62 151 62 151 150 63h428z" /> -<glyph unicode="" glyph-name="keyboard_arrow_down" d="M316 572.667l196-196 196 196 60-60-256-256-256 256z" /> -<glyph unicode="" glyph-name="keyboard_arrow_up" d="M316 280.667l-60 60 256 256 256-256-60-60-196 196z" /> +<glyph unicode="" glyph-name="arrow_down" d="M316 572.667l196-196 196 196 60-60-256-256-256 256z" /> +<glyph unicode="" glyph-name="arrow_up" d="M316 280.667l-60 60 256 256 256-256-60-60-196 196z" /> <glyph unicode="" glyph-name="clear" d="M810 664.667l-238-238 238-238-60-60-238 238-238-238-60 60 238 238-238 238 60 60 238-238 238 238z" /> <glyph unicode="" glyph-name="computer" d="M854 298.667v426h-684v-426h684zM598 170.667v42h-172v-42h172zM938 170.667h86v-86h-1024v86h86v640h852v-640z" /> <glyph unicode="" glyph-name="phone" d="M736 170.667v598h-448v-598h448zM598 42.667v42h-172v-42h172zM682 896.667q52 0 90-38t38-90v-684q0-52-38-90t-90-38h-340q-52 0-90 38t-38 90v684q0 52 38 90t90 38h340z" /> +<glyph unicode="" glyph-name="arrow_back" d="M498 772.667l-346-346 346-346-76-76-422 422 422 422z" /> </font></defs></svg>
\ No newline at end of file diff --git a/src/styles/fonts/icomoon.ttf b/src/styles/fonts/icomoon.ttf Binary files differindex ec51acb..f79ee84 100755 --- a/src/styles/fonts/icomoon.ttf +++ b/src/styles/fonts/icomoon.ttf diff --git a/src/styles/fonts/icomoon.woff b/src/styles/fonts/icomoon.woff Binary files differindex ca1195e..f21dee2 100755 --- a/src/styles/fonts/icomoon.woff +++ b/src/styles/fonts/icomoon.woff 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"; } diff --git a/webpack.config.js b/webpack.config.js index 6ea609a..d64373c 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -74,7 +74,15 @@ module.exports = { use: [ MiniCSSExtractPlugin.loader, "css-loader", - "sass-loader" + { + loader: 'sass-loader', + options: { + sassOptions: { + indentWidth: 4, + includePaths: ['./src', './node_modules'], + }, + }, + }, ] }, { |
