diff --git a/RpiLedBars/web/index.css b/RpiLedBars/web/index.css index 00734a4..3bfe7a4 100644 --- a/RpiLedBars/web/index.css +++ b/RpiLedBars/web/index.css @@ -1,13 +1,36 @@ -@import url(https://fonts.googleapis.com/css?family=Roboto:100,300,600); +html, +body, +.page { + width: 100%; + height: 100%; + margin: 0; + padding: 0; +} + body { background: #434d5a; font-family: "Roboto"; } +.page { + top: 0px; + left: 0px; +} + +.window { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + background: rgba(0, 0, 0, 1); + padding: 1em; +} + h1 { color: #7e8c9f; - padding: 0; - margin: 0; + font-size: 50px; + margin: 2em 0px; + padding: 0px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; @@ -16,6 +39,15 @@ h1 { text-align: center; } +h1 { + text-align: center; +} + +h1 #enc { + font-size: 80px; + font-weight: bold; +} + #picker { display: flex; justify-content: space-around; @@ -27,4 +59,22 @@ h1 { flex-wrap: wrap; align-content: center; justify-content: space-around; +} + +#reconnect { + position: fixed; + visibility: hidden; + background: rgba(0, 0, 0, .5); + z-index: 2; + display: flex; + justify-content: center; + align-items: center; +} + +#reconnect .window div { + color: rgb(165, 165, 165); + font-family: monospace; + font-size: 2em; + font-weight: bold; + margin-bottom: .5em; } \ No newline at end of file diff --git a/RpiLedBars/web/index.html b/RpiLedBars/web/index.html index 1ea02f0..b0c9f3b 100644 --- a/RpiLedBars/web/index.html +++ b/RpiLedBars/web/index.html @@ -16,10 +16,19 @@ -
-

Tropicananass Leds

+
+
+
Disconnected from server
+ +
+
+ +
+
+

Tropicananass Leds

+
+
-
\ No newline at end of file diff --git a/RpiLedBars/web/index.js b/RpiLedBars/web/index.js index 7e83363..7c451a8 100644 --- a/RpiLedBars/web/index.js +++ b/RpiLedBars/web/index.js @@ -1,26 +1,32 @@ -let socket = new WebSocket("ws://192.168.1.130:8080"); +let socket; -socket.onopen = function(e) { - alert("[open] Connection established"); -}; +function reconnect() { + socket = new WebSocket("ws://192.168.1.130:8080"); -socket.onmessage = function(event) { - alert(`[message] Data received from server: ${event.data}`); -}; + socket.onopen = function(e) { + console.log("[open] ws: Connection established"); + document.getElementById("reconnect").style.visibility = 'hidden'; + }; -socket.onclose = function(event) { - if (event.wasClean) { - alert(`[close] Connection closed cleanly, code=${event.code} reason=${event.reason}`); - } else { - // e.g. server process killed or network down - // event.code is usually 1006 in this case - alert('[close] Connection died'); - } -}; + socket.onmessage = function(event) { + console.log(`[message] ws: Data received from server: ${event.data}`); + }; -socket.onerror = function(error) { - alert(`[error] ${error.message}`); -}; + socket.onclose = function(event) { + if (event.wasClean) { + console.log(`[close] ws: Connection closed cleanly, code=${event.code} reason=${event.reason}`); + } else { + // e.g. server process killed or network down + // event.code is usually 1006 in this case + console.log('[close] ws: Connection died'); + document.getElementById("reconnect").style.visibility = 'visible'; + } + }; + + socket.onerror = function(error) { + console.log(`[error] ws: ${error.message}`); + }; +} var colorPicker = new iro.ColorPicker('#picker', { colors: [ @@ -28,12 +34,20 @@ var colorPicker = new iro.ColorPicker('#picker', { 'hsl(180, 50, 100)' // pure green ], layout: [{ - component: iro.ui.Wheel, - options: {} - }, { - component: iro.ui.Box, - options: {} - }], + component: iro.ui.Wheel, + options: {} + }, { + component: iro.ui.Box, + options: {} + }, + { + component: iro.ui.Slider, + options: { + // can also be 'saturation', 'value', 'red', 'green', 'blue', 'alpha' or 'kelvin' + sliderType: 'value' + } + } + ], display: "flex", handleRadius: 14, }); @@ -44,6 +58,5 @@ function colorChangeCallback(color) { socket.send("{" + color.index + "," + color.hsl.h + "," + color.hsl.s + "," + color.hsl.l + "}"); } -// start listening to the color change event -// colorChangeCallback will be called whenever the color changes +reconnect(); colorPicker.on("color:change", colorChangeCallback); \ No newline at end of file