Fixed minor bugs, updated gulp script.
This commit is contained in:
Tobias Blum
parent
c83a560d30
commit
526872e8ff
7 changed files with 76 additions and 81 deletions
|
|
@ -114,8 +114,8 @@ void setup() {
|
|||
// ***************************************************************************
|
||||
strip.init();
|
||||
strip.setBrightness(brightness);
|
||||
strip.setSpeed(200);
|
||||
strip.setMode(FX_MODE_RAINBOW_CYCLE);
|
||||
strip.setSpeed(ws2812fx_speed);
|
||||
//strip.setMode(FX_MODE_RAINBOW_CYCLE);
|
||||
strip.start();
|
||||
|
||||
// ***************************************************************************
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
// Neopixel
|
||||
#define PIN 5 // PIN where neopixel / WS2811 strip is attached
|
||||
#define NUMLEDS 24 // Number of leds in the strip
|
||||
#define NUMLEDS 60 // Number of leds in the strip
|
||||
|
||||
|
||||
#define HOSTNAME "ESP8266_02" // Friedly hostname
|
||||
|
|
@ -16,7 +16,7 @@ enum MODE { SET_MODE, HOLD, OFF, ALL, WIPE, RAINBOW, RAINBOWCYCLE, THEATERCHASE,
|
|||
|
||||
MODE mode = RAINBOW; // Standard mode that is active when software starts
|
||||
|
||||
int ws2812fx_speed = 128; // Global variable for storing the delay between color changes --> smaller == faster
|
||||
int ws2812fx_speed = 10; // Global variable for storing the delay between color changes --> smaller == faster
|
||||
int brightness = 192; // Global variable for storing the brightness (255 == 100%)
|
||||
|
||||
int ws2812fx_mode = 0; // Helper variable to set WS2812FX modes
|
||||
|
|
|
|||
|
|
@ -4,16 +4,17 @@
|
|||
<!--Import Google Icon Font-->
|
||||
<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
|
||||
<!--Import materialize.css-->
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css" media="screen,projection" />
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/css/materialize.min.css" media="screen,projection" />
|
||||
|
||||
<!--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>
|
||||
</head>
|
||||
|
||||
<body class="">
|
||||
<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</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>
|
||||
|
|
@ -150,7 +151,7 @@ $(function(){
|
|||
|
||||
// Settings
|
||||
var host = window.location.hostname;
|
||||
host = "esp8266_02.local";
|
||||
//host = "esp8266_02.local";
|
||||
|
||||
var ws_url = 'ws://' + host + ':81';
|
||||
var connection;
|
||||
|
|
|
|||
|
|
@ -33,7 +33,7 @@ gulp.task('watch', function() {
|
|||
|
||||
|
||||
gulp.task('upload', ['html'], function() {
|
||||
var url = 'http://192.168.0.24/edit';
|
||||
var url = 'http://192.168.0.40/edit';
|
||||
var options = {
|
||||
url: url,
|
||||
headers: {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "mc_lighting",
|
||||
"version": "1.0.0",
|
||||
"version": "2.0.0",
|
||||
"description": "Web client for Mc Lighting",
|
||||
"main": "index.html",
|
||||
"scripts": {
|
||||
|
|
@ -11,9 +11,8 @@
|
|||
"dependencies": {
|
||||
"fs": "0.0.2",
|
||||
"gulp": "^3.9.1",
|
||||
"gulp-connect": "^4.0.0",
|
||||
"gulp-file-include": "^0.13.7",
|
||||
"materialize-css": "^0.97.6",
|
||||
"gulp-connect": "^5.0.0",
|
||||
"gulp-file-include": "^1.0.0",
|
||||
"request": "^2.72.0"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,16 +4,17 @@
|
|||
<!--Import Google Icon Font-->
|
||||
<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
|
||||
<!--Import materialize.css-->
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css" media="screen,projection" />
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/css/materialize.min.css" media="screen,projection" />
|
||||
|
||||
<!--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>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<nav class="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>
|
||||
<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>
|
||||
|
|
@ -33,7 +34,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 +74,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 +93,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 +106,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,7 +145,7 @@
|
|||
|
||||
<!--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">@@include('js/script.js')</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -3,7 +3,7 @@ $(function(){
|
|||
|
||||
// Settings
|
||||
var host = window.location.hostname;
|
||||
//host = "192.168.0.24";
|
||||
//host = "esp8266_02.local";
|
||||
|
||||
var ws_url = 'ws://' + host + ':81';
|
||||
var connection;
|
||||
|
|
@ -37,6 +37,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 () {
|
||||
|
|
@ -58,13 +76,8 @@ $(function(){
|
|||
ws_waiting = 0;
|
||||
};
|
||||
}
|
||||
|
||||
// ******************************************************************
|
||||
// Helper
|
||||
// ******************************************************************
|
||||
|
||||
|
||||
|
||||
// ******************************************************************
|
||||
// Modes
|
||||
// ******************************************************************
|
||||
|
|
@ -73,10 +86,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);
|
||||
|
|
@ -94,10 +115,9 @@ $(function(){
|
|||
});
|
||||
|
||||
function setMode(mode, finish_funtion) {
|
||||
var url = "http://" + host + "/" + mode;
|
||||
console.log("Mode: ", mode);
|
||||
|
||||
wsSendCommand("=" + mode);
|
||||
wsSendCommand("/" + mode);
|
||||
finish_funtion();
|
||||
}
|
||||
|
||||
|
|
@ -233,6 +253,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
|
||||
|
|
|
|||
Loading…
Reference in a new issue