From d2b7bcc94f01644c4bdf540f5518b105e64a2f8a Mon Sep 17 00:00:00 2001 From: Tobias Blum Date: Tue, 17 May 2016 00:29:50 +0200 Subject: [PATCH] Updates Webclient, several bugfixes, updated Buildsystem for automatic update on ESP8266 --- .gitignore | 1 + clients/web/gulpfile.js | 47 +++- clients/web/index.html | 180 --------------- clients/web/js/script.js | 211 ------------------ clients/web/package.json | 6 +- .../web/{build/index.html => src/index.htm} | 20 +- clients/web/{build => src}/js/script.js | 166 +++++++++----- 7 files changed, 167 insertions(+), 464 deletions(-) delete mode 100644 clients/web/index.html delete mode 100644 clients/web/js/script.js rename clients/web/{build/index.html => src/index.htm} (91%) rename clients/web/{build => src}/js/script.js (59%) diff --git a/.gitignore b/.gitignore index 685006f..a6fd38b 100644 --- a/.gitignore +++ b/.gitignore @@ -1 +1,2 @@ clients/web/node_modules/ +clients/web/build/ diff --git a/clients/web/gulpfile.js b/clients/web/gulpfile.js index fe4d475..8da94cb 100644 --- a/clients/web/gulpfile.js +++ b/clients/web/gulpfile.js @@ -1,17 +1,23 @@ var gulp = require('gulp'), - connect = require('gulp-connect'); + request = require('request'), + fs = require('fs'), + connect = require('gulp-connect'), + fileinclude = require('gulp-file-include'); + +var src_dir = "src/"; +var build_dir = "build/"; + gulp.task('html', function() { - gulp.src('*.html') + gulp.src(src_dir + '*.htm') + .pipe(fileinclude({ + prefix: '@@', + basepath: '@file' + })) .pipe(gulp.dest('build')) .pipe(connect.reload()); }); -gulp.task('js', function() { - gulp.src('js/*.js') - .pipe(gulp.dest('build/js')) - .pipe(connect.reload()); -}); gulp.task('connect', function() { connect.server({ @@ -21,8 +27,29 @@ gulp.task('connect', function() { }); gulp.task('watch', function() { - gulp.watch('*.html', ['html']); - gulp.watch('js/*.js', ['js']); + gulp.watch(src_dir + '*.htm', ['html']); + gulp.watch(src_dir + 'js/*.js', ['html']); }); -gulp.task('default', ['watch', 'connect']); \ No newline at end of file + +gulp.task('upload', ['html'], function() { + var url = 'http://192.168.0.24/edit'; + var options = { + url: url, + headers: { + 'Content-Type': 'multipart/form-data' + } + }; + + var r = request.post(options, function optionalCallback(err, httpResponse, body) { + if (err) { + return console.error('upload failed:', err); + } + console.log('Upload successful! Server responded with:', body); + }); + var form = r.form(); + form.append('data', fs.createReadStream(__dirname + "/" + build_dir + '/index.htm'), {filename: '/index.htm', contentType: "application/octet-stream"}); +}); + +gulp.task('default', ['html']); +gulp.task('serve', ['watch', 'connect']); \ No newline at end of file diff --git a/clients/web/index.html b/clients/web/index.html deleted file mode 100644 index a374a35..0000000 --- a/clients/web/index.html +++ /dev/null @@ -1,180 +0,0 @@ - - - - - - - - - - - - - - - -
-
-
-
-
- -
-
-
-
-
-
Fehler beim Herstellen der WebSocket-Verbindung.
-
-
-
-
- -
-
-
-
-
- -
-
-
-
-
pick a color
-
-
-
-
-
-
- -
-
-
-
- -
- -
- All - send - -
- -
- Wipe - send - -
- -
- Rainbow - send - -
- -
- Rainbow cycle - send - -
- -
- Theaterchase - send - -
- -
- Theaterchase rainbow - send - -
- -
- TV - send - -
-
- -
-
-
-
-
-

-
-
-
-

-
-
-
-

-
-
- -
-
-
-

-
-
- -
-
-
-

-
-
-
-
-
-
- - - - - - - - - - - \ No newline at end of file diff --git a/clients/web/js/script.js b/clients/web/js/script.js deleted file mode 100644 index 25fc4fc..0000000 --- a/clients/web/js/script.js +++ /dev/null @@ -1,211 +0,0 @@ -(function($){ - $(function(){ - - var host = "192.168.0.24"; - - $('.button-collapse').sideNav(); - - - // Navlinks - $('#mc-nav').on('click', '.mc-navlink', function(){ - console.log("Nav to: ", $(this).data("pane")); - showPane($(this).data("pane")); - }); - - function showPane(pane) { - $('.mc_pane').addClass('hide'); - $('#' + pane).removeClass('hide'); - $('.button-collapse').sideNav('hide'); - } - - - // ****************************************************************** - // init() - // ****************************************************************** - var connection = new WebSocket('ws://' + host + ':81', ['arduino']); - - // When the connection is open, send some data to the server - connection.onopen = function () { - //connection.send('Ping'); // Send the message 'Ping' to the server - console.log('WebSocket Open'); - showPane('pane1'); - }; - - // Log errors - connection.onerror = function (error) { - console.log('WebSocket Error ' + error); - $('#mc-wsloader').addClass('hide'); - $('#mc-wserror').removeClass('hide'); - }; - - // Log messages from the server - connection.onmessage = function (e) { - console.log('Server: ' + e.data); - }; - - - // ****************************************************************** - // Modes - // ****************************************************************** - $("#pane2").on("click", ".btn_mode", function() { - var mode = $(this).attr("data-mode"); - last_mode = mode; - var btn = $(this); - setMode(mode, function() { - $(".btn_mode").removeClass("blue"); - btn.addClass("blue"); - }); - }); - - function setMode(mode, finish_funtion) { - var url = "http://" + host + "/" + mode; - console.log("Mode: ", mode); - - var red = $("#rng_red").val(); - var green = $("#rng_green").val(); - var blue = $("#rng_blue").val(); - var delay = $("#rng_delay").val(); - - var params = {"r":red, "g":green, "b":blue, "d":delay}; - connection.send("=" + mode); - - /* - $.getJSON(url, params, function(data) { - updateStatus(data); - finish_funtion(); - }); - */ - } - - function updateStatus(data) { - console.log("Returned: ", data); - $("#result").val("Mode: " + data.mode + "\nColor: "+ data.color[0] + "," + data.color[1] + "," + data.color[2] + "\nDelay:" + data.delay_ms + "\nBrightness:" + data.brightness); - $('#result').trigger('autoresize'); - } - - - // ****************************************************************** - // Colorwheel - // ****************************************************************** - // this is supposed to work on mobiles (touch) as well as on a desktop (click) - // since we couldn't find a decent one .. this try of writing one by myself - // + google. swiping would be really nice - I will possibly implement it with - // jquery later - or never. - - var canvas = document.getElementById("myCanvas"); - // FIX: Cancel touch end event and handle click via touchstart - // canvas.addEventListener("touchend", function(e) { e.preventDefault(); }, false); - canvas.addEventListener("touchmove", doTouch, false); - canvas.addEventListener("click", doClick, false); - - var context = canvas.getContext('2d'); - var centerX = canvas.width / 2; - var centerY = canvas.height / 2; - var innerRadius = canvas.width / 4.5; - var outerRadius = (canvas.width - 10) / 2 - - //outer border - context.beginPath(); - //outer circle - context.arc(centerX, centerY, outerRadius, 0, 2 * Math.PI, false); - //draw the outer border: (gets drawn around the circle!) - context.lineWidth = 4; - context.strokeStyle = '#000000'; - context.stroke(); - context.closePath(); - - //fill with beautiful colors - //taken from here: http://stackoverflow.com/questions/18265804/building-a-color-wheel-in-html5 - for(var angle=0; angle<=360; angle+=1) { - var startAngle = (angle-2)*Math.PI/180; - var endAngle = angle * Math.PI/180; - context.beginPath(); - context.moveTo(centerX, centerY); - context.arc(centerX, centerY, outerRadius, startAngle, endAngle, false); - context.closePath(); - context.fillStyle = 'hsl('+angle+', 100%, 50%)'; - context.fill(); - context.closePath(); - } - - //inner border - context.beginPath(); - //context.arc(centerX, centerY, radius, startAngle, endAngle, counterClockwise); - context.arc(centerX, centerY, innerRadius, 0, 2 * Math.PI, false); - //fill the center - var my_gradient=context.createLinearGradient(0,0,170,0); - my_gradient.addColorStop(0,"black"); - my_gradient.addColorStop(1,"white"); - - context.fillStyle = my_gradient; - context.fillStyle = "white"; - context.fill(); - - //draw the inner line - context.lineWidth = 2; - context.strokeStyle = '#000000'; - context.stroke(); - context.closePath(); - - //get Mouse x/y canvas position - function getMousePos(canvas, evt) { - var rect = canvas.getBoundingClientRect(); - return { - x: evt.clientX - rect.left, - y: evt.clientY - rect.top - }; - } - - //comp to Hex - function componentToHex(c) { - var hex = c.toString(16); - return hex.length == 1 ? "0" + hex : hex; - } - - //rgb/rgba to Hex - function rgbToHex(rgb) { - return "#" + componentToHex(rgb[0]) + componentToHex(rgb[1]) + componentToHex(rgb[2]); - } - - //display the touch/click position and color info - function showStatus(pos, color) { - var hexColor = rgbToHex(color); - - connection.send("*" + componentToHex(color[0]) + componentToHex(color[1]) + componentToHex(color[2])); - - $('#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); - document.getElementById('status').style.backgroundColor=hexColor; - } - - //handle the touch event - function doTouch(event) { - //to not also fire on click - event.preventDefault(); - var el = event.target; - - //touch position - var pos = {x: Math.round(event.targetTouches[0].pageX - el.offsetLeft), - y: Math.round(event.targetTouches[0].pageY - el.offsetTop)}; - //color - var color = context.getImageData(pos.x, pos.y, 1, 1).data; - - showStatus(pos, color); - } - - function doClick(event) { - //click position - var pos = getMousePos(canvas, event); - //color - var color = context.getImageData(pos.x, pos.y, 1, 1).data; - - console.log("click", pos.x, pos.y, color); - showStatus(pos, color); - - //now do sth with the color rgbToHex(color); - //don't do stuff when #000000 (outside circle and lines - } - - }); // end of document ready -})(jQuery); // end of jQuery name space \ No newline at end of file diff --git a/clients/web/package.json b/clients/web/package.json index d811855..f58f0c5 100644 --- a/clients/web/package.json +++ b/clients/web/package.json @@ -9,7 +9,11 @@ "author": "Tobias Blum", "license": "MIT", "dependencies": { + "fs": "0.0.2", + "gulp": "^3.9.1", "gulp-connect": "^4.0.0", - "materialize-css": "^0.97.6" + "gulp-file-include": "^0.13.7", + "materialize-css": "^0.97.6", + "request": "^2.72.0" } } diff --git a/clients/web/build/index.html b/clients/web/src/index.htm similarity index 91% rename from clients/web/build/index.html rename to clients/web/src/index.htm index a374a35..9c91a2e 100644 --- a/clients/web/build/index.html +++ b/clients/web/src/index.htm @@ -8,6 +8,7 @@ + @@ -46,7 +47,7 @@
-
Fehler beim Herstellen der WebSocket-Verbindung.
+
Error on websocket connect.
@@ -127,29 +128,29 @@

-

+


-

+


-

+


-

+


-

+

@@ -159,9 +160,8 @@ @@ -175,6 +175,6 @@ - + \ No newline at end of file diff --git a/clients/web/build/js/script.js b/clients/web/src/js/script.js similarity index 59% rename from clients/web/build/js/script.js rename to clients/web/src/js/script.js index 25fc4fc..880b175 100644 --- a/clients/web/build/js/script.js +++ b/clients/web/src/js/script.js @@ -1,14 +1,22 @@ (function($){ - $(function(){ +$(function(){ - var host = "192.168.0.24"; + // Settings + var host = window.location.hostname; + //host = "192.168.0.24"; + var ws_url = 'ws://' + host + ':81'; + var connection; + var ws_waiting = 0; + + // ****************************************************************** + // Side navigation + // ****************************************************************** $('.button-collapse').sideNav(); - // Navlinks $('#mc-nav').on('click', '.mc-navlink', function(){ - console.log("Nav to: ", $(this).data("pane")); + console.log("Navigate to pane: ", $(this).data("pane")); showPane($(this).data("pane")); }); @@ -16,32 +24,45 @@ $('.mc_pane').addClass('hide'); $('#' + pane).removeClass('hide'); $('.button-collapse').sideNav('hide'); + + if (pane == "pane2") { + setMainColor(); + } } // ****************************************************************** // init() // ****************************************************************** - var connection = new WebSocket('ws://' + host + ':81', ['arduino']); - - // When the connection is open, send some data to the server - connection.onopen = function () { - //connection.send('Ping'); // Send the message 'Ping' to the server - console.log('WebSocket Open'); - showPane('pane1'); - }; + function init() { + console.log("Connection websockets to:", ws_url); + connection = new WebSocket(ws_url, ['arduino']); + + // When the connection is open, send some data to the server + connection.onopen = function () { + //connection.send('Ping'); // Send the message 'Ping' to the server + console.log('WebSocket Open'); + showPane('pane1'); + }; - // Log errors - connection.onerror = function (error) { - console.log('WebSocket Error ' + error); - $('#mc-wsloader').addClass('hide'); - $('#mc-wserror').removeClass('hide'); - }; + // Log errors + connection.onerror = function (error) { + console.log('WebSocket Error ' + error); + $('#mc-wsloader').addClass('hide'); + $('#mc-wserror').removeClass('hide'); + }; + + // Log messages from the server + connection.onmessage = function (e) { + console.log('WebSocket from server: ' + e.data); + ws_waiting = 0; + }; + } + + // ****************************************************************** + // Helper + // ****************************************************************** - // Log messages from the server - connection.onmessage = function (e) { - console.log('Server: ' + e.data); - }; // ****************************************************************** @@ -55,35 +76,67 @@ $(".btn_mode").removeClass("blue"); btn.addClass("blue"); }); + + }); + + $("#pane2").on("change", ".update_colors", setMainColor); + + $("#pane2").on("change", ".update_delay", function() { + var delay = $("#rng_delay").val(); + + wsSendCommand("?" + delay); + }); + + $("#pane2").on("change", ".update_brightness", function() { + var brightness = $("#rng_brightness").val(); + + wsSendCommand("%" + brightness); }); function setMode(mode, finish_funtion) { var url = "http://" + host + "/" + mode; console.log("Mode: ", mode); - - var red = $("#rng_red").val(); - var green = $("#rng_green").val(); - var blue = $("#rng_blue").val(); - var delay = $("#rng_delay").val(); - - var params = {"r":red, "g":green, "b":blue, "d":delay}; - connection.send("=" + mode); - - /* - $.getJSON(url, params, function(data) { - updateStatus(data); - finish_funtion(); - }); - */ + + wsSendCommand("=" + mode); + finish_funtion(); } - function updateStatus(data) { - console.log("Returned: ", data); - $("#result").val("Mode: " + data.mode + "\nColor: "+ data.color[0] + "," + data.color[1] + "," + data.color[2] + "\nDelay:" + data.delay_ms + "\nBrightness:" + data.brightness); - $('#result').trigger('autoresize'); + function setMainColor() { + var red = $("#rng_red").val(); + var green = $("#rng_green").val(); + var blue = $("#rng_blue").val(); + + var mainColorHex = componentToHex(red) + componentToHex(green) + componentToHex(blue); + wsSetMainColor(mainColorHex); } + // ****************************************************************** + // WebSocket commands + // ****************************************************************** + function wsSendCommand(cmd) { + console.log("Send WebSocket command:", cmd); + if (ws_waiting == 0) { + connection.send(cmd); + ws_waiting++; + } else { + console.log("++++++++ WS call waiting, skip") + } + } + + + function wsSetAll(hexColor) { + console.log("wsSetAll() Set all colors to:", hexColor); + wsSendCommand("*" + hexColor); + } + + function wsSetMainColor(hexColor) { + console.log("wsSetMainColor() Set main colors to:", hexColor); + wsSendCommand("#" + hexColor); + } + + + // ****************************************************************** // Colorwheel // ****************************************************************** @@ -97,6 +150,8 @@ // canvas.addEventListener("touchend", function(e) { e.preventDefault(); }, false); canvas.addEventListener("touchmove", doTouch, false); canvas.addEventListener("click", doClick, false); + //canvas.addEventListener("mousemove", doClick, false); + var context = canvas.getContext('2d'); var centerX = canvas.width / 2; @@ -158,25 +213,26 @@ //comp to Hex function componentToHex(c) { - var hex = c.toString(16); - return hex.length == 1 ? "0" + hex : hex; + //var hex = c.toString(16); + //return hex.length == 1 ? "0" + hex : hex; + return ("0"+(Number(c).toString(16))).slice(-2).toUpperCase(); } //rgb/rgba to Hex function rgbToHex(rgb) { - return "#" + componentToHex(rgb[0]) + componentToHex(rgb[1]) + componentToHex(rgb[2]); + return componentToHex(rgb[0]) + componentToHex(rgb[1]) + componentToHex(rgb[2]); } //display the touch/click position and color info - function showStatus(pos, color) { + function updateStatus(pos, color) { var hexColor = rgbToHex(color); + wsSetAll(hexColor); + + hexColor = "#" + hexColor; - connection.send("*" + componentToHex(color[0]) + componentToHex(color[1]) + componentToHex(color[2])); - $('#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); - document.getElementById('status').style.backgroundColor=hexColor; } //handle the touch event @@ -191,7 +247,7 @@ //color var color = context.getImageData(pos.x, pos.y, 1, 1).data; - showStatus(pos, color); + updateStatus(pos, color); } function doClick(event) { @@ -200,12 +256,18 @@ //color var color = context.getImageData(pos.x, pos.y, 1, 1).data; - console.log("click", pos.x, pos.y, color); - showStatus(pos, color); + //console.log("click", pos.x, pos.y, color); + updateStatus(pos, color); //now do sth with the color rgbToHex(color); //don't do stuff when #000000 (outside circle and lines } + + + // ****************************************************************** + // main + // ****************************************************************** + init(); - }); // end of document ready +}); // end of document ready })(jQuery); // end of jQuery name space \ No newline at end of file