simongehrig/McLighting
1
0
Fork 0
Code Issues 3 Pull Requests Projects Releases Wiki Activity

Changes to Support RGBW SK6812 / Status Updates for WebInterface after reload

Browse Source 
Implemented white support for SK6812 and other RGBW Stripes
Implemented reload of values in the web interface, after closing or
reload.
This commit is contained in:
BPoH_Voodoo
2018-02-08 08:27:43 +01:00
parent 51ea2b9b36
commit e1857746f8
7 changed files with 1932 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files
clients/web/build/index.htm
+74 -28
View File
@@ -9,13 +9,13 @@
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/>
<meta charset="utf-8"/>
<title>McLighting v2</title>
<title>McLighting (RGBW) v2</title>
</head>
<body>
<nav class="blue light-blueXXX lighten-1XXX" role="navigation" id="mc-nav">
<div class="nav-wrapper container">
<a id="logo-container" href="#" class="brand-logo">Mc Lighting v2</a>
<a id="logo-container" href="#" class="brand-logo">McLighting (RGBW) v2</a>
<ul class="right hide-on-med-and-down">
<li><a href="#" class="mc-navlink" data-pane="pane1">Wheel</a></li>
@@ -101,6 +101,13 @@
</div>
</div>
<div class="row">
<div class="input-field col s12">
<label for="txt_white">White</label><br/>
<p class="range-field"><input type="range" id="rng_white" min="0" max="255" class="update_colors" /></p>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<label for="txt_delay">Speed</label><br/>
@@ -118,18 +125,6 @@
</div>
<div class="row">
<div class="col s12 m6 l6 btn_grid">
<a class="btn waves-effect waves-light btn_mode_static blue" name="action" data-mode="off">OFF
<i class="material-icons right">send</i>
</a>
</div>
<div class="col s12 m6 l6 btn_grid">
<a class="btn waves-effect waves-light btn_mode_static blue" name="action" data-mode="tv">TV
<i class="material-icons right">send</i>
</a>
</div>
<div id="modes">
<div class="input-field col s12">
Loading animations...
@@ -183,9 +178,9 @@ $(function(){
$('#' + pane).removeClass('hide');
$('.button-collapse').sideNav('hide');
if (pane == "pane2") {
setMainColor();
}
//if (pane == "pane2") {
// setMainColor();
//}
}
@@ -195,16 +190,60 @@ $(function(){
function init() {
console.log("Connection websockets to:", ws_url);
connection = new WebSocket(ws_url, ['arduino']);
var mode = 0;
var ws2812fx_mode = 0;
$.getJSON("http://" + host + "/status", function(data) {
console.log("status", data);
mode = data.mode;
ws2812fx_mode = data.ws2812fx_mode;
$("#rng_brightness").val(data.brightness);
$("#rng_white").val(data.color[0]);
$("#rng_red").val(data.color[1]);
$("#rng_green").val(data.color[2]);
$("#rng_blue").val(data.color[3]);
$("#rng_delay").val(data.speed);
var statusColor = "#" + componentToHex(data.color[1]) + componentToHex(data.color[2]) + componentToHex(data.color[3]);
$('#status').css("backgroundColor", statusColor);
$('#status_color').text(statusColor + "- R=" + data.color[1] + ", G=" + data.color[2] + ", B=" + data.color[3]);
});
// Load modes async
// List of all color modes
// enum MODE { SET_MODE, HOLD, OFF, ALL, WIPE, RAINBOW, RAINBOWCYCLE, THEATERCHASE, TWINKLERANDOM, THEATERCHASERAINBOW, TV, CUSTOM, AUTO };
$.getJSON("http://" + host + "/get_modes", function(data) {
//console.log("modes", data);
console.log("modes", data);
var modes_html = "";
modes_html += '<div class="col s12 m6 l6 btn_grid">';
if (mode == 2) {
modes_html += '<a class="btn waves-effect waves-light btn_mode_static red" name="action" data-mode="off">OFF';
} else {
modes_html += '<a class="btn waves-effect waves-light btn_mode_static blue" name="action" data-mode="off">OFF';
}
modes_html += '<i class="material-icons right">send</i>';
modes_html += '</a>';
modes_html += '</div>'
modes_html += '<div class="col s12 m6 l6 btn_grid">';
if (mode == 10) {
modes_html += '<a class="btn waves-effect waves-light btn_mode_static red" name="action" data-mode="tv">TV';
} else {
modes_html += '<a class="btn waves-effect waves-light btn_mode_static blue" name="action" data-mode="tv">TV';
}
modes_html += '<i class="material-icons right">send</i>';
modes_html += '</a>';
modes_html += '</div>';
data.forEach(function(current_mode){
if (current_mode.mode !== undefined) {
modes_html += '<div class="col s12 m6 l6 btn_grid">';
modes_html += '<a class="btn waves-effect waves-light btn_mode blue" name="action" data-mode="' + current_mode.mode + '">(' + current_mode.mode +') '+ current_mode.name;
if (mode == 1 && current_mode.mode == ws2812fx_mode) {
modes_html += '<a class="btn waves-effect waves-light btn_mode red" name="action" data-mode="' + current_mode.mode + '">(' + current_mode.mode +') '+ current_mode.name;
} else {
modes_html += '<a class="btn waves-effect waves-light btn_mode blue" name="action" data-mode="' + current_mode.mode + '">(' + current_mode.mode +') '+ current_mode.name;
}
modes_html += '<i class="material-icons right">send</i>';
modes_html += '</a>';
modes_html += '</div>';
@@ -213,7 +252,7 @@ $(function(){
$('#modes').html(modes_html);
});
// When the connection is open, send some data to the server
connection.onopen = function () {
//connection.send('Ping'); // Send the message 'Ping' to the server
@@ -288,12 +327,16 @@ $(function(){
}
function setMainColor() {
var white = $("#rng_white").val();
var red = $("#rng_red").val();
var green = $("#rng_green").val();
var blue = $("#rng_blue").val();
var blue = $("#rng_blue").val();
var mainColorHex = componentToHex(red) + componentToHex(green) + componentToHex(blue);
wsSetMainColor(mainColorHex);
var hexColor = componentToHex(white) + componentToHex(red) + componentToHex(green) + componentToHex(blue);
var statusColor = "#" + componentToHex(red) + componentToHex(green) + componentToHex(blue);
wsSetMainColor(hexColor);
$('#status').css("backgroundColor", statusColor);
$('#status_color').text(statusColor + "- R=" + red + ", G=" + green + ", B=" + blue);
}
@@ -411,15 +454,18 @@ $(function(){
//display the touch/click position and color info
function updateStatus(pos, color) {
var hexColor = rgbToHex(color);
wsSetAll(hexColor);
//var hexColor = rgbToHex(color);
//wsSetAll(hexColor);
var hexColor = componentToHex(color[0]) + componentToHex(color[1]) + componentToHex(color[2]);
wsSetMainColor(hexColor);
hexColor = "#" + hexColor;
$('#status').css("backgroundColor", hexColor);
$('#status_color').text(hexColor + " - R=" + color[0] + ", G=" + color[1] + ", B=" + color[2]);
$('#status_color').text(hexColor + "- R=" + color[0] + ", G=" + color[1] + ", B=" + color[2]);
$('#status_pos').text("x: " + pos.x + " - y: " + pos.y);
$("#rng_white").val(0);
$("#rng_red").val(color[0]);
$("#rng_green").val(color[1]);
$("#rng_blue").val(color[2]);