asaril/McLighting
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Adopt changes to HTML source

Browse source
This commit is contained in:
Tobias Blum 2017-09-29 23:48:29 +02:00
parent 950ac31e1a
commit 47e5afd1dd
4 changed files with 46 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
Arduino/McLighting/definitions.h
View file

@ -12,7 +12,8 @@ const char HOSTNAME[] = "ESP8266_01"; // Friedly hostname
uint32_t autoParams[][4] = { // color, speed, mode, duration (seconds)
{0xff0000, 200, 1, 5.0}, // blink red for 5 seconds
{0x00ff00, 200, 3, 10.0}, // wipe green for 10 seconds
{0x0000ff, 200, 11, 5.0} // dual scan blue for 5 seconds
{0x0000ff, 200, 11, 5.0}, // dual scan blue for 5 seconds
{0x0000ff, 200, 42, 15.0} // fireworks for 15 seconds
};
#ifdef ENABLE_MQTT

30
clients/web/build/index.htm
View file

@ -16,6 +16,7 @@
<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>
<ul class="right hide-on-med-and-down">
<li><a href="#" class="mc-navlink" data-pane="pane1">Wheel</a></li>
<li><a href="#" class="mc-navlink" data-pane="pane2">Modes</a></li>
@ -37,10 +38,12 @@
<div class="spinner-layer spinner-blue-only">
<div class="circle-clipper left">
<div class="circle"></div>
</div><div class="gap-patch">
</div>
<div class="gap-patch">
<div class="circle"></div>
</div>
<div class="circle-clipper right">
<div class="circle"></div>
</div><div class="circle-clipper right">
<div class="circle"></div>
</div>
</div>
</div>
@ -67,9 +70,11 @@
<div id="status_pos">pick a color</div>
<div id="status_color"></div>
</div>
</div>
<div class="col s12 m6">
<div class="right switch">Auto:<br>
<label>Off
<input id="autoSwitch" type="checkbox"><span class="lever"></span>On
<label>Off
<input id="autoSwitch" type="checkbox"><span class="lever"></span>On
</label>
</div>
</div>
@ -198,9 +203,8 @@ $(function(){
var modes_html = "";
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;
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;
modes_html += '<i class="material-icons right">send</i>';
modes_html += '</a>';
modes_html += '</div>';
@ -268,14 +272,14 @@ $(function(){
wsSendCommand("%" + brightness);
});
$("#autoSwitch").on("change",function() {
if($(this).prop('checked')) {
$("#autoSwitch").on("change", function () {
if ($(this).prop('checked')) {
wsSendCommand("start");
} else {
wsSendCommand("stop");
}
});
});
function setMode(mode, finish_funtion) {
console.log("Mode: ", mode);
@ -415,7 +419,7 @@ $(function(){
$('#status').css("backgroundColor", hexColor);
$('#status_color').text(hexColor + " - R=" + color[0] + ", G=" + color[1] + ", B=" + color[2]);
$('#status_pos').text("x: " + pos.x + " - y: " + pos.y);
$("#rng_red").val(color[0]);
$("#rng_green").val(color[1]);
$("#rng_blue").val(color[2]);

24
clients/web/src/index.htm
View file

@ -14,7 +14,9 @@
<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>
<div class="nav-wrapper container">
<a id="logo-container" href="#" class="brand-logo">Mc Lighting v2</a>
<ul class="right hide-on-med-and-down">
<li><a href="#" class="mc-navlink" data-pane="pane1">Wheel</a></li>
<li><a href="#" class="mc-navlink" data-pane="pane2">Modes</a></li>
@ -23,7 +25,6 @@
<ul id="nav-mobile" class="side-nav">
<li><a href="#" class="mc-navlink" data-pane="pane1">Wheel</a></li>
<li><a href="#" class="mc-navlink" data-pane="pane2">Modes</a></li>
</ul>
<a href="#" data-activates="nav-mobile" class="button-collapse"><i class="material-icons">menu</i></a>
</div>
@ -37,10 +38,12 @@
<div class="spinner-layer spinner-blue-only">
<div class="circle-clipper left">
<div class="circle"></div>
</div><div class="gap-patch">
</div>
<div class="gap-patch">
<div class="circle"></div>
</div>
<div class="circle-clipper right">
<div class="circle"></div>
</div><div class="circle-clipper right">
<div class="circle"></div>
</div>
</div>
</div>
@ -68,6 +71,13 @@
<div id="status_color"></div>
</div>
</div>
<div class="col s12 m6">
<div class="right switch">Auto:<br>
<label>Off
<input id="autoSwitch" type="checkbox"><span class="lever"></span>On
</label>
</div>
</div>
</div>
</div>
</div>
@ -108,13 +118,13 @@
</div>
<div class="row">
<div class="col s12 m6 l4 btn_grid">
<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 l4 btn_grid">
<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>

12
clients/web/src/js/script.js
View file

@ -45,8 +45,8 @@ $(function(){
var modes_html = "";
data.forEach(function(current_mode){
if (current_mode.mode !== undefined) {
modes_html += '<div class="col s12 m6 l4 btn_grid">';
modes_html += '<a class="btn waves-effect waves-light btn_mode blue" name="action" data-mode="' + current_mode.mode + '">' + current_mode.name + '';
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;
modes_html += '<i class="material-icons right">send</i>';
modes_html += '</a>';
modes_html += '</div>';
@ -113,6 +113,14 @@ $(function(){
wsSendCommand("%" + brightness);
});
$("#autoSwitch").on("change", function () {
if ($(this).prop('checked')) {
wsSendCommand("start");
} else {
wsSendCommand("stop");
}
});
function setMode(mode, finish_funtion) {
console.log("Mode: ", mode);