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

First try on WS2812FX library integration

Browse Source
This commit is contained in:
Tobias Blum
2017-02-05 01:48:28 +01:00
parent ff878f8ef6
commit c83a560d30
5 changed files with 169 additions and 253 deletions
Download Patch File Download Diff File Expand all files Collapse all files
clients/web/build/index.htm
+61 -67
View File
@@ -11,8 +11,8 @@
<meta charset="utf-8"/>
</head>
<body>
<nav class="light-blueXXX lighten-1XXX" role="navigation" id="mc-nav">
<body class="">
<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</a>
<ul class="right hide-on-med-and-down">
<li><a href="#" class="mc-navlink" data-pane="pane1">Wheel</a></li>
@@ -33,7 +33,7 @@
<div class="row" id="mc-wsloader">
<div class="col">
<div class="preloader-wrapper active">
<div class="spinner-layer spinner-red-only">
<div class="spinner-layer spinner-blue-only">
<div class="circle-clipper left">
<div class="circle"></div>
</div><div class="gap-patch">
@@ -73,56 +73,6 @@
<div class="container mc_pane hide" id="pane2">
<div class="section">
<div class="row">
<div class="col s12 m6 l3 btn_grid">
<button class="btn waves-effect waves-light btn_mode" name="action" data-mode="off">Off
<i class="material-icons right">send</i>
</button>
</div>
<div class="col s12 m6 l3 btn_grid">
<a class="btn waves-effect waves-light btn_mode" name="action" data-mode="all">All
<i class="material-icons right">send</i>
</a>
</div>
<div class="col s12 m6 l3 btn_grid">
<a class="btn waves-effect waves-light btn_mode" name="action" data-mode="wipe">Wipe
<i class="material-icons right">send</i>
</a>
</div>
<div class="col s12 m6 l3 btn_grid">
<a class="btn waves-effect waves-light btn_mode" name="action" data-mode="rainbow">Rainbow
<i class="material-icons right">send</i>
</a>
</div>
<div class="col s12 m6 l3 btn_grid">
<a class="btn waves-effect waves-light btn_mode" name="action" data-mode="rainbowCycle">Rainbow cycle
<i class="material-icons right">send</i>
</a>
</div>
<div class="col s12 m6 l3 btn_grid">
<a class="btn waves-effect waves-light btn_mode" name="action" data-mode="theaterchase">Theaterchase
<i class="material-icons right">send</i>
</a>
</div>
<div class="col s12 m6 l3 btn_grid">
<a class="btn waves-effect waves-light btn_mode" name="action" data-mode="theaterchaseRainbow">Theaterchase rainbow
<i class="material-icons right">send</i>
</a>
</div>
<div class="col s12 m6 l3 btn_grid">
<a class="btn waves-effect waves-light btn_mode" name="action" data-mode="tv">TV
<i class="material-icons right">send</i>
</a>
</div>
</div>
<div class="row">
<form class="col s12">
<div class="row">
@@ -142,7 +92,7 @@
<div class="row">
<div class="input-field col s12">
<label for="txt_delay">Delay</label><br/>
<label for="txt_delay">Speed</label><br/>
<p class="range-field"><input type="range" id="rng_delay" min="0" max="255" value="50" class="update_delay" /></p>
</div>
</div>
@@ -155,12 +105,32 @@
</div>
</form>
</div>
<div class="row">
<div class="col s12 m6 l4 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">
<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...
</div>
</div>
</div>
</div>
</div>
<footer class="page-footer">
<footer class="page-footer blue">
<div class="footer-copyright">
<div class="container">© 2016
<div class="container">© 2017
<a class="grey-text text-lighten-4 right" href="https://github.com/toblum/McLighting">Project home</a>
</div>
</div>
@@ -174,13 +144,13 @@
<!--Import jQuery before materialize.js-->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/js/materialize.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/js/materialize.min.js"></script>
<script type="text/javascript">(function($){
$(function(){
// Settings
var host = window.location.hostname;
//host = "192.168.0.24";
host = "esp8266_02.local";
var ws_url = 'ws://' + host + ':81';
var connection;
@@ -214,6 +184,24 @@ $(function(){
function init() {
console.log("Connection websockets to:", ws_url);
connection = new WebSocket(ws_url, ['arduino']);
// Load modes async
$.getJSON("http://" + host + "/get_modes", function(data) {
//console.log("modes", data);
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 += '<i class="material-icons right">send</i>';
modes_html += '</a>';
modes_html += '</div>';
}
});
$('#modes').html(modes_html);
});
// When the connection is open, send some data to the server
connection.onopen = function () {
@@ -235,13 +223,8 @@ $(function(){
ws_waiting = 0;
};
}
// ******************************************************************
// Helper
// ******************************************************************
// ******************************************************************
// Modes
// ******************************************************************
@@ -250,10 +233,18 @@ $(function(){
last_mode = mode;
var btn = $(this);
setMode(mode, function() {
$(".btn_mode").removeClass("blue");
btn.addClass("blue");
$(".btn_mode, .btn_mode_static").removeClass("red").addClass("blue");
btn.removeClass("blue").addClass("red");
});
});
$("#pane2").on("click", ".btn_mode_static", function() {
var mode = $(this).attr("data-mode");
var btn = $(this);
wsSendCommand("=" + mode);
$(".btn_mode, .btn_mode_static").removeClass("red").addClass("blue");
btn.removeClass("blue").addClass("red");
});
$("#pane2").on("change", ".update_colors", setMainColor);
@@ -271,10 +262,9 @@ $(function(){
});
function setMode(mode, finish_funtion) {
var url = "http://" + host + "/" + mode;
console.log("Mode: ", mode);
wsSendCommand("=" + mode);
wsSendCommand("/" + mode);
finish_funtion();
}
@@ -410,6 +400,10 @@ $(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]);
}
//handle the touch event