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 {
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;
}

15
RpiLedBars/web/index.html
View File

@ -16,10 +16,19 @@
</head>
<body>
<div>
<h1> Tropicananass Leds </h1>
<div id="reconnect" class="page">
<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 id="picker"></div>
</body>
</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) {
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);