Projets/LedBars
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

reconnect window

Browse Source
This commit is contained in:
Tropicananass 2021-09-30 15:58:56 +01:00
parent ec081018c2
commit aff6d66622
3 changed files with 105 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
RpiLedBars/web/index.css
View File

@ -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 { body {
background: #434d5a; background: #434d5a;
font-family: "Roboto"; 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 { h1 {
color: #7e8c9f; color: #7e8c9f;
padding: 0; font-size: 50px;
margin: 0; margin: 2em 0px;
padding: 0px;
-webkit-user-select: none; -webkit-user-select: none;
-moz-user-select: none; -moz-user-select: none;
-ms-user-select: none; -ms-user-select: none;
@ -16,6 +39,15 @@ h1 {
text-align: center; text-align: center;
} }
h1 {
text-align: center;
}
h1 #enc {
font-size: 80px;
font-weight: bold;
}
#picker { #picker {
display: flex; display: flex;
justify-content: space-around; justify-content: space-around;
@ -27,4 +59,22 @@ h1 {
flex-wrap: wrap; flex-wrap: wrap;
align-content: center; align-content: center;
justify-content: space-around; 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;
} }

15
RpiLedBars/web/index.html
View File

@ -16,10 +16,19 @@
</head> </head>
<body> <body>
<div> <div id="reconnect" class="page">
<h1> Tropicananass Leds </h1> <div class="window">
<div>Disconnected from server</div>
<button type="button" onclick="reconnect(this)">Reconnect</button>
</div>
</div>
<div class="page">
<div>
<h1> Tropicananass Leds </h1>
</div>
<div id="picker"></div>
</div> </div>
<div id="picker"></div>
</body> </body>
</html> </html>

67
RpiLedBars/web/index.js
View File

@ -1,26 +1,32 @@
let socket = new WebSocket("ws://192.168.1.130:8080"); let socket;
socket.onopen = function(e) { function reconnect() {
alert("[open] Connection established"); socket = new WebSocket("ws://192.168.1.130:8080");
};
socket.onmessage = function(event) { socket.onopen = function(e) {
alert(`[message] Data received from server: ${event.data}`); console.log("[open] ws: Connection established");
}; document.getElementById("reconnect").style.visibility = 'hidden';
};
socket.onclose = function(event) { socket.onmessage = function(event) {
if (event.wasClean) { console.log(`[message] ws: Data received from server: ${event.data}`);
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.onerror = function(error) { socket.onclose = function(event) {
alert(`[error] ${error.message}`); 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', { var colorPicker = new iro.ColorPicker('#picker', {
colors: [ colors: [
@ -28,12 +34,20 @@ var colorPicker = new iro.ColorPicker('#picker', {
'hsl(180, 50, 100)' // pure green 'hsl(180, 50, 100)' // pure green
], ],
layout: [{ layout: [{
component: iro.ui.Wheel, component: iro.ui.Wheel,
options: {} options: {}
}, { }, {
component: iro.ui.Box, component: iro.ui.Box,
options: {} options: {}
}], },
{
component: iro.ui.Slider,
options: {
// can also be 'saturation', 'value', 'red', 'green', 'blue', 'alpha' or 'kelvin'
sliderType: 'value'
}
}
],
display: "flex", display: "flex",
handleRadius: 14, handleRadius: 14,
}); });
@ -44,6 +58,5 @@ function colorChangeCallback(color) {
socket.send("{" + color.index + "," + color.hsl.h + "," + color.hsl.s + "," + color.hsl.l + "}"); socket.send("{" + color.index + "," + color.hsl.h + "," + color.hsl.s + "," + color.hsl.l + "}");
} }
// start listening to the color change event reconnect();
// colorChangeCallback will be called whenever the color changes
colorPicker.on("color:change", colorChangeCallback); colorPicker.on("color:change", colorChangeCallback);