From 33702aea7ce42c8240e4bed7b424cc8ac4a33826 Mon Sep 17 00:00:00 2001 From: Humberto Alfonso Díaz Date: Wed, 23 Oct 2019 09:44:29 +0200 Subject: FUNCT Implement bluetooth screen --- src/index.html | 111 +++++++++++++--------- src/index.js | 12 ++- src/js/AFB.js | 215 ------------------------------------------ src/js/app.js | 8 ++ src/js/bluetooth.js | 50 ++++++++++ src/styles/fonts/icomoon.eot | Bin 1976 -> 2300 bytes src/styles/fonts/icomoon.svg | 5 + src/styles/fonts/icomoon.ttf | Bin 1812 -> 2136 bytes src/styles/fonts/icomoon.woff | Bin 1888 -> 2212 bytes src/styles/main.scss | 90 ++++++++++++------ src/styles/style.css | 25 ++++- 11 files changed, 218 insertions(+), 298 deletions(-) delete mode 100644 src/js/AFB.js create mode 100644 src/js/app.js create mode 100644 src/js/bluetooth.js (limited to 'src') diff --git a/src/index.html b/src/index.html index 65d316c..6f16a23 100644 --- a/src/index.html +++ b/src/index.html @@ -25,52 +25,55 @@

Settings

- -
- -
-
- Date & Time -
- - -
- -
-
- Bluetooth -
-
- -
- - -
- -
-
- Wifi -
-
- -
- - -
- -
-
- Wired -
- - -
- -
-
- Version info -
- +
+ +
+ +
+
+ Date & Time +
+ + +
+ +
+
+ Bluetooth +
+
+ + +
+ + +
+ +
+
+ Wifi +
+
+ +
+ + +
+ +
+
+ Wired +
+ + +
+ +
+
+ Version info +
+ +
@@ -94,8 +97,22 @@

- Bluetotth + Bluetooth

+
+ Confirm diff --git a/src/index.js b/src/index.js index ded8fe7..efdafaa 100644 --- a/src/index.js +++ b/src/index.js @@ -13,9 +13,9 @@ * See the License for the specific language governing permissions and * limitations under the License. */ - /* JS */ -import './js/AFB.js'; +import { init } from './js/app'; +import { toggle as toggle_bluetooth } from './js/bluetooth'; /* CSS */ import './styles/app.scss'; @@ -28,4 +28,10 @@ window.show = function(page){ window.hide = function(page) { document.getElementById('main').classList.remove('hide'); document.getElementById(page).classList.add('hide'); -} \ No newline at end of file +} + +window.toggle_bluetooth = function() { + toggle_bluetooth(); +} + +init(); \ No newline at end of file diff --git a/src/js/AFB.js b/src/js/AFB.js deleted file mode 100644 index d6e6bfa..0000000 --- a/src/js/AFB.js +++ /dev/null @@ -1,215 +0,0 @@ -/* - * Copyright (C) 2017, 2018 "IoT.bzh" - * Author: José Bollo - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ -AFB = function(base, initialtoken){ - -if (typeof base != "object") - base = { base: base, token: initialtoken }; - -var initial = { - base: base.base || "api", - token: base.token || initialtoken || "HELLO", - host: base.host || window.location.host, - url: base.url || undefined -}; - -var urlws = initial.url || "ws://"+initial.host+"/"+initial.base; - -/*********************************************/ -/**** ****/ -/**** AFB_context ****/ -/**** ****/ -/*********************************************/ -var AFB_context; -{ - var UUID = undefined; - var TOKEN = initial.token; - - var context = function(token, uuid) { - this.token = token; - this.uuid = uuid; - } - - context.prototype = { - get token() {return TOKEN;}, - set token(tok) {if(tok) TOKEN=tok;}, - get uuid() {return UUID;}, - set uuid(id) {if(id) UUID=id;} - }; - - AFB_context = new context(); -} -/*********************************************/ -/**** ****/ -/**** AFB_websocket ****/ -/**** ****/ -/*********************************************/ -var AFB_websocket; -{ - var CALL = 2; - var RETOK = 3; - var RETERR = 4; - var EVENT = 5; - - var PROTO1 = "x-afb-ws-json1"; - - AFB_websocket = function(on_open, on_abort) { - var u = urlws, p = '?'; - if (AFB_context.token) { - u = u + '?x-afb-token=' + AFB_context.token; - p = '&'; - } - if (AFB_context.uuid) - u = u + p + 'x-afb-uuid=' + AFB_context.uuid; - this.ws = new WebSocket(u, [ PROTO1 ]); - this.url = u; - this.pendings = {}; - this.awaitens = {}; - this.counter = 0; - this.ws.onopen = onopen.bind(this); - this.ws.onerror = onerror.bind(this); - this.ws.onclose = onclose.bind(this); - this.ws.onmessage = onmessage.bind(this); - this.onopen = on_open; - this.onabort = on_abort; - } - - function onerror(event) { - var f = this.onabort; - if (f) { - delete this.onopen; - delete this.onabort; - f && f(this); - } - this.onerror && this.onerror(this); - } - - function onopen(event) { - var f = this.onopen; - delete this.onopen; - delete this.onabort; - f && f(this); - } - - function onclose(event) { - var err = { - jtype: 'afb-reply', - request: { - status: 'disconnected', - info: 'server hung up' - } - }; - for (var id in this.pendings) { - try { this.pendings[id][1](err); } catch (x) {/*NOTHING*/} - } - this.pendings = {}; - this.onclose && this.onclose(); - } - - function fire(awaitens, name, data) { - var a = awaitens[name]; - if (a) - a.forEach(function(handler){handler(data);}); - var i = name.indexOf("/"); - if (i >= 0) { - a = awaitens[name.substring(0,i)]; - if (a) - a.forEach(function(handler){handler(data);}); - } - a = awaitens["*"]; - if (a) - a.forEach(function(handler){handler(data);}); - } - - function reply(pendings, id, ans, offset) { - if (id in pendings) { - var p = pendings[id]; - delete pendings[id]; - try { p[offset](ans); } catch (x) {/*TODO?*/} - } - } - - function onmessage(event) { - var obj = JSON.parse(event.data); - var code = obj[0]; - var id = obj[1]; - var ans = obj[2]; - AFB_context.token = obj[3]; - switch (code) { - case RETOK: - reply(this.pendings, id, ans, 0); - break; - case RETERR: - reply(this.pendings, id, ans, 1); - break; - case EVENT: - default: - fire(this.awaitens, id, ans); - break; - } - } - - function close() { - this.ws.close(); - this.ws.onopen = - this.ws.onerror = - this.ws.onclose = - this.ws.onmessage = - this.onopen = - this.onabort = function(){}; - } - - function call(method, request, callid) { - return new Promise((function(resolve, reject){ - var id, arr; - if (callid) { - id = String(callid); - if (id in this.pendings) - throw new Error("pending callid("+id+") exists"); - } else { - do { - id = String(this.counter = 4095 & (this.counter + 1)); - } while (id in this.pendings); - } - this.pendings[id] = [ resolve, reject ]; - arr = [CALL, id, method, request ]; - if (AFB_context.token) arr.push(AFB_context.token); - this.ws.send(JSON.stringify(arr)); - }).bind(this)); - } - - function onevent(name, handler) { - var id = name; - var list = this.awaitens[id] || (this.awaitens[id] = []); - list.push(handler); - } - - AFB_websocket.prototype = { - close: close, - call: call, - onevent: onevent - }; -} -/*********************************************/ -/**** ****/ -/**** ****/ -/**** ****/ -/*********************************************/ -return { - context: AFB_context, - ws: AFB_websocket -}; -}; diff --git a/src/js/app.js b/src/js/app.js new file mode 100644 index 0000000..8e80039 --- /dev/null +++ b/src/js/app.js @@ -0,0 +1,8 @@ +import { init as init_bluetooth } from './bluetooth'; + +import { api } from 'agl-js-api'; + +export function init() { + api.init(); + init_bluetooth(); +} \ No newline at end of file diff --git a/src/js/bluetooth.js b/src/js/bluetooth.js new file mode 100644 index 0000000..679ef0b --- /dev/null +++ b/src/js/bluetooth.js @@ -0,0 +1,50 @@ +import { bluetooth } from 'agl-js-api'; +import Mustache from 'mustache'; + +var isPowered = false; +var template; + +function update_state(state) { + var control = document.getElementById('BluetoothControl'); + if( state.powered ) { + control.classList.add('enabled'); + } else { + control.classList.remove('enabled'); + } +} + +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); + }); +} + +export function toggle() { + bluetooth.adapter_state().then(function(result) { + bluetooth.adapter_state({ + powered: !result.powered + }).then(update_state); + }); +} + +export function init() { + template = document.getElementById('bluetooth-device-template').innerHTML; + Mustache.parse(template); + bluetooth.adapter_state().then(update_state); + + bluetooth.managed_objects().then(function(result){ + update_devices(result.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'); + }); +} \ No newline at end of file diff --git a/src/styles/fonts/icomoon.eot b/src/styles/fonts/icomoon.eot index 060e952..fb55d1c 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 ee686b7..6fedeea 100755 --- a/src/styles/fonts/icomoon.svg +++ b/src/styles/fonts/icomoon.svg @@ -14,4 +14,9 @@ + + + + + \ No newline at end of file diff --git a/src/styles/fonts/icomoon.ttf b/src/styles/fonts/icomoon.ttf index 1c80635..ec51acb 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 035641c..ca1195e 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 518bdc2..6b917d1 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -53,9 +53,10 @@ body { .page { display: flex; flex-direction: column; - flex-wrap: wrap; + flex-wrap: nowrap; justify-content: center; height: 100%; + overflow: hidden; &.hide { display: none; @@ -66,42 +67,75 @@ body { margin: 0; } - .entry { - height: 120px; - line-height: 120px; - border-bottom: 1px solid map-get($colors, grey); + .container { + display: flex; + flex-direction: column; + flex-wrap: nowrap; + justify-content: center; + flex-grow: 2; - &:last-child { - border-bottom: none2; - } + .entry { + height: 120px; + line-height: 120px; + border-bottom: 1px solid map-get($colors, grey); - .icon { - width: 10%; - position: relative; - float: left; - text-align: center; - } + &:last-child { + border-bottom: none; + } - .label { - position: relative; - float: left; - text-align: left; - width: 80%; - } + .icon { + width: 10%; + position: relative; + float: left; + text-align: center; + } - .control { - width: 10%; - position: relative; - float: left; - text-align: right; - font-size: 5rem; + .label { + position: relative; + float: left; + text-align: left; + width: 75%; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } - .icon-toggle_on { - color: map-get($colors, primary); + .control { + width: 15%; + position: relative; + float: left; + text-align: right; + font-size: 5rem; + + & > * { + height: 120px; + line-height: 120px; + } + + &.enabled { + .icon-toggle_on { + display: block; + color: map-get($colors, primary); + } + + .icon-toggle_off { + display: none; + } + } + + .icon-toggle_on { + display: none; + } + + .icon-toggle_off { + display: block; + } } } } + + .confirm { position: absolute; bottom: 5%; diff --git a/src/styles/style.css b/src/styles/style.css index 0bd7eb9..e656a4e 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?h6r2e7'); - src: url('fonts/icomoon.eot?h6r2e7#iefix') format('embedded-opentype'), - url('fonts/icomoon.ttf?h6r2e7') format('truetype'), - url('fonts/icomoon.woff?h6r2e7') format('woff'), - url('fonts/icomoon.svg?h6r2e7#icomoon') format('svg'); + 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'); font-weight: normal; font-style: normal; font-display: block; @@ -25,12 +25,27 @@ -moz-osx-font-smoothing: grayscale; } +.icon-clear:before { + content: "\e909"; +} .icon-time:before { content: "\e900"; } .icon-bluetooth:before { content: "\e901"; } +.icon-keyboard_arrow_down:before { + content: "\e907"; +} +.icon-keyboard_arrow_up:before { + content: "\e908"; +} +.icon-computer:before { + content: "\e90a"; +} +.icon-phone:before { + content: "\e90b"; +} .icon-wifi:before { content: "\e902"; } -- cgit 1.2.3-korg