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

Integrated Changes from Original repository

Browse Source
This commit is contained in:
BPoH_Voodoo
2018-04-24 10:24:44 +02:00
parent 78d7037d1f
commit ecaa8d605f
17 changed files with 2625 additions and 465 deletions
Download Patch File Download Diff File Expand all files Collapse all files
clients/web/src/index.htm
+11 -14
View File
@@ -9,13 +9,14 @@
<!--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>
<meta name="mobile-web-app-capable" content="yes">
<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 +102,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 +126,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...
@@ -158,4 +154,5 @@
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
<script type="text/javascript">@@include('js/script.js')</script>
</body>
\ No newline at end of file
</html>
clients/web/src/js/script.js
+65 -14
View File
@@ -25,9 +25,9 @@ $(function(){
$('#' + pane).removeClass('hide');
$('.button-collapse').sideNav('hide');
if (pane == "pane2") {
setMainColor();
}
//if (pane == "pane2") {
// setMainColor();
//}
}
@@ -37,16 +37,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>';
@@ -55,7 +99,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
@@ -130,12 +174,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);
}
@@ -253,15 +301,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]);