From afc9272aae393078f6cf836f8ccefb0d6e1be98a Mon Sep 17 00:00:00 2001 From: BPoH_Voodoo Date: Sun, 29 Apr 2018 11:50:38 +0200 Subject: [PATCH] code cleanup moved rgbw webclient to web(RGBW) folder further code cleanup --- Arduino/McLighting/WS2812FX.h | 4 +- Arduino/McLighting/definitions.h | 4 +- Arduino/McLighting/request_handlers.h | 89 ++--- clients/web(RGBW)/build/index.htm | 506 ++++++++++++++++++++++++++ clients/web(RGBW)/gulpfile.js | 55 +++ clients/web(RGBW)/package.json | 18 + clients/web(RGBW)/src/index.htm | 159 ++++++++ clients/web(RGBW)/src/js/script.js | 350 ++++++++++++++++++ clients/web/build/index.htm | 42 +-- clients/web/src/index.htm | 12 +- clients/web/src/js/script.js | 32 +- 11 files changed, 1140 insertions(+), 131 deletions(-) create mode 100644 clients/web(RGBW)/build/index.htm create mode 100644 clients/web(RGBW)/gulpfile.js create mode 100644 clients/web(RGBW)/package.json create mode 100644 clients/web(RGBW)/src/index.htm create mode 100644 clients/web(RGBW)/src/js/script.js diff --git a/Arduino/McLighting/WS2812FX.h b/Arduino/McLighting/WS2812FX.h index 6b0a8fd..76cf1b8 100644 --- a/Arduino/McLighting/WS2812FX.h +++ b/Arduino/McLighting/WS2812FX.h @@ -42,7 +42,7 @@ #define DEFAULT_BRIGHTNESS 50 #define DEFAULT_MODE 0 #define DEFAULT_SPEED 1000 -#define DEFAULT_COLOR 0xFF0000 +#define DEFAULT_COLOR 0x00FF0000 #define SPEED_MIN 10 #define SPEED_MAX 65535 @@ -53,7 +53,7 @@ /* each segment uses 36 bytes of SRAM memory, so if you're application fails because of insufficient memory, decreasing MAX_NUM_SEGMENTS may help */ #define MAX_NUM_SEGMENTS 10 -#define NUM_COLORS 4 /* number of colors per segment */ +#define NUM_COLORS 3 /* number of colors per segment */ #define SEGMENT _segments[_segment_index] #define SEGMENT_RUNTIME _segment_runtimes[_segment_index] #define SEGMENT_LENGTH (SEGMENT.stop - SEGMENT.start + 1) diff --git a/Arduino/McLighting/definitions.h b/Arduino/McLighting/definitions.h index 08609fc..d223c9d 100644 --- a/Arduino/McLighting/definitions.h +++ b/Arduino/McLighting/definitions.h @@ -6,7 +6,7 @@ #define NUMLEDS 194 // Number of leds in the strip #define BUILTIN_LED 2 // ESP-12F has the built in LED on GPIO2, see https://github.com/esp8266/Arduino/issues/2192 #define BUTTON 14 // Input pin (14 / D5) for switching the LED strip on / off, connect this PIN to ground to trigger button. -//#define BUTTON_GY33 12 // Input pin (12 / D6) for read color data with RGB sensor, connect this PIN to ground to trigger button. +#define BUTTON_GY33 12 // Input pin (12 / D6) for read color data with RGB sensor, connect this PIN to ground to trigger button. #define RGBW // If defined, use RGBW Strips const char HOSTNAME[] = "McLightingRGBW01"; // Friedly hostname @@ -15,7 +15,7 @@ const char HOSTNAME[] = "McLightingRGBW01"; // Friedly hostname //#define ENABLE_OTA // If defined, enable Arduino OTA code. #define ENABLE_AMQTT // If defined, enable Async MQTT code, see: https://github.com/marvinroger/async-mqtt-client //#define ENABLE_MQTT // If defined, enable MQTT client code, see: https://github.com/toblum/McLighting/wiki/MQTT-API -#define ENABLE_HOMEASSISTANT // If defined, enable Homeassistant integration, ENABLE_MQTT must be active +//#define ENABLE_HOMEASSISTANT // If defined, enable Homeassistant integration, ENABLE_MQTT must be active #define ENABLE_BUTTON // If defined, enable button handling code, see: https://github.com/toblum/McLighting/wiki/Button-control //#define ENABLE_BUTTON_GY33 // If defined, enable button handling code for GY-33 color sensor to scan color //#define MQTT_HOME_ASSISTANT_SUPPORT // If defined, use AMQTT and select Tools -> IwIP Variant -> Higher Bandwidth diff --git a/Arduino/McLighting/request_handlers.h b/Arduino/McLighting/request_handlers.h index 6466e47..7591f69 100644 --- a/Arduino/McLighting/request_handlers.h +++ b/Arduino/McLighting/request_handlers.h @@ -391,17 +391,20 @@ void handleAutoStop() { autoTicker.detach(); strip.stop(); } +void Dbg_Prefix(bool mqtt, uint8_t num) { + if (mqtt == true) { + DBG_OUTPUT_PORT.print("MQTT: "); + } else { + DBG_OUTPUT_PORT.print("WS: "); + webSocket.sendTXT(num, "OK"); + } +} void checkpayload(uint8_t * payload, bool mqtt = false, uint8_t num = 0) { // # ==> Set main color if (payload[0] == '#') { handleSetMainColor(payload); - if (mqtt == true) { - DBG_OUTPUT_PORT.print("MQTT: "); - } else { - DBG_OUTPUT_PORT.print("WS: "); - webSocket.sendTXT(num, "OK"); - } + Dbg_Prefix(mqtt, num); DBG_OUTPUT_PORT.printf("Set main color to: W: [%u] R: [%u] G: [%u] B: [%u]\n", main_color.white, main_color.red, main_color.green, main_color.blue); #ifdef ENABLE_MQTT mqtt_client.publish(mqtt_outtopic, String(String("OK ") + String((char *)payload)).c_str()); @@ -423,12 +426,7 @@ void checkpayload(uint8_t * payload, bool mqtt = false, uint8_t num = 0) { uint8_t d = (uint8_t) strtol((const char *) &payload[1], NULL, 10); ws2812fx_speed = constrain(d, 0, 255); strip.setSpeed(convertSpeed(ws2812fx_speed)); - if (mqtt == true) { - DBG_OUTPUT_PORT.print("MQTT: "); - } else { - DBG_OUTPUT_PORT.print("WS: "); - webSocket.sendTXT(num, "OK"); - } + Dbg_Prefix(mqtt, num); DBG_OUTPUT_PORT.printf("Set speed to: [%u]\n", ws2812fx_speed); #ifdef ENABLE_HOMEASSISTANT if(!ha_send_data.active()) ha_send_data.once(5, tickerSendState); @@ -446,12 +444,7 @@ void checkpayload(uint8_t * payload, bool mqtt = false, uint8_t num = 0) { uint8_t b = (uint8_t) strtol((const char *) &payload[1], NULL, 10); brightness = constrain(b, 0, 255); strip.setBrightness(brightness); - if (mqtt == true) { - DBG_OUTPUT_PORT.print("MQTT: "); - } else { - DBG_OUTPUT_PORT.print("WS: "); - webSocket.sendTXT(num, "OK"); - } + Dbg_Prefix(mqtt, num); DBG_OUTPUT_PORT.printf("WS: Set brightness to: [%u]\n", brightness); #ifdef ENABLE_MQTT mqtt_client.publish(mqtt_outtopic, String(String("OK ") + String((char *)payload)).c_str()); @@ -471,12 +464,7 @@ void checkpayload(uint8_t * payload, bool mqtt = false, uint8_t num = 0) { // * ==> Set main color and light all LEDs (Shortcut) if (payload[0] == '*') { handleSetAllMode(payload); - if (mqtt == true) { - DBG_OUTPUT_PORT.print("MQTT: "); - } else { - DBG_OUTPUT_PORT.print("WS: "); - webSocket.sendTXT(num, "OK"); - } + Dbg_Prefix(mqtt, num); DBG_OUTPUT_PORT.printf("Set main color and light all LEDs [%s]\n", payload); #ifdef ENABLE_MQTT mqtt_client.publish(mqtt_outtopic, String(String("OK ") + String((char *)payload)).c_str()); @@ -496,12 +484,7 @@ void checkpayload(uint8_t * payload, bool mqtt = false, uint8_t num = 0) { // ! ==> Set single LED in given color if (payload[0] == '!') { handleSetSingleLED(payload, 1); - if (mqtt == true) { - DBG_OUTPUT_PORT.print("MQTT: "); - } else { - DBG_OUTPUT_PORT.print("WS: "); - webSocket.sendTXT(num, "OK"); - } + Dbg_Prefix(mqtt, num); DBG_OUTPUT_PORT.printf("Set single LED in given color [%s]\n", payload); #ifdef ENABLE_MQTT mqtt_client.publish(mqtt_outtopic, String(String("OK ") + String((char *)payload)).c_str()); @@ -514,12 +497,7 @@ void checkpayload(uint8_t * payload, bool mqtt = false, uint8_t num = 0) { // + ==> Set multiple LED in the given colors if (payload[0] == '+') { handleSetDifferentColors(payload); - if (mqtt == true) { - DBG_OUTPUT_PORT.print("MQTT: "); - } else { - DBG_OUTPUT_PORT.print("WS: "); - webSocket.sendTXT(num, "OK"); - } + Dbg_Prefix(mqtt, num); DBG_OUTPUT_PORT.printf("Set multiple LEDs in given color [%s]\n", payload); #ifdef ENABLE_MQTT mqtt_client.publish(mqtt_outtopic, String(String("OK ") + String((char *)payload)).c_str()); @@ -532,12 +510,7 @@ void checkpayload(uint8_t * payload, bool mqtt = false, uint8_t num = 0) { // + ==> Set range of LEDs in the given color if (payload[0] == 'R') { handleRangeDifferentColors(payload); - if (mqtt == true) { - DBG_OUTPUT_PORT.print("MQTT: "); - } else { - DBG_OUTPUT_PORT.print("WS: "); - webSocket.sendTXT(num, "OK"); - } + Dbg_Prefix(mqtt, num); DBG_OUTPUT_PORT.printf("Set range of LEDs in given color [%s]\n", payload); webSocket.sendTXT(num, "OK"); #ifdef ENABLE_MQTT @@ -555,12 +528,7 @@ void checkpayload(uint8_t * payload, bool mqtt = false, uint8_t num = 0) { String str_mode = String((char *) &payload[0]); handleSetNamedMode(str_mode); - if (mqtt == true) { - DBG_OUTPUT_PORT.print("MQTT: "); - } else { - DBG_OUTPUT_PORT.print("WS: "); - webSocket.sendTXT(num, "OK"); - } + Dbg_Prefix(mqtt, num); DBG_OUTPUT_PORT.printf("Activated mode [%u]!\n", mode); #ifdef ENABLE_MQTT mqtt_client.publish(mqtt_outtopic, String(String("OK ") + String((char *)payload)).c_str()); @@ -580,12 +548,7 @@ void checkpayload(uint8_t * payload, bool mqtt = false, uint8_t num = 0) { // $ ==> Get status Info. if (payload[0] == '$') { String json = listStatusJSON(); - if (mqtt == true) { - DBG_OUTPUT_PORT.print("MQTT: "); - } else { - DBG_OUTPUT_PORT.print("WS: "); - webSocket.sendTXT(num, "OK"); - } + Dbg_Prefix(mqtt, num); DBG_OUTPUT_PORT.println("Get status info: " + json); webSocket.sendTXT(num, json); #ifdef ENABLE_MQTT @@ -600,12 +563,7 @@ void checkpayload(uint8_t * payload, bool mqtt = false, uint8_t num = 0) { // ~ ==> Get WS2812 modes. if (payload[0] == '~') { String json = listModesJSON(); - if (mqtt == true) { - DBG_OUTPUT_PORT.print("MQTT: "); - } else { - DBG_OUTPUT_PORT.print("WS: "); - webSocket.sendTXT(num, "OK"); - } + Dbg_Prefix(mqtt, num); DBG_OUTPUT_PORT.println("Get WS2812 modes."); DBG_OUTPUT_PORT.println(json); #ifdef ENABLE_MQTT @@ -618,7 +576,7 @@ void checkpayload(uint8_t * payload, bool mqtt = false, uint8_t num = 0) { //DBG_OUTPUT_PORT.printf("Result: %d / %d", res, json_modes.length()); #endif #ifdef ENABLE_AMQTT - amqttClient.publish(mqtt_outtopic.c_str(), qospub, false, String("ERROR: Not implemented. Message too large for AsyncMQTT.").c_str()); + amqttClient.publish(mqtt_outtopic.c_str(), qospub, false, json.c_str()); #endif } @@ -627,12 +585,7 @@ void checkpayload(uint8_t * payload, bool mqtt = false, uint8_t num = 0) { // Hint: https://github.com/knolleary/pubsubclient/issues/110 if (payload[0] == '/') { handleSetWS2812FXMode(payload); - if (mqtt == true) { - DBG_OUTPUT_PORT.print("MQTT: "); - } else { - DBG_OUTPUT_PORT.print("WS: "); - webSocket.sendTXT(num, "OK"); - } + Dbg_Prefix(mqtt, num); DBG_OUTPUT_PORT.printf("Set WS2812 mode: [%s]\n", payload); #ifdef ENABLE_MQTT mqtt_client.publish(mqtt_outtopic, String(String("OK ") + String((char *)payload)).c_str()); @@ -1212,7 +1165,7 @@ void webSocketEvent(uint8_t num, WStype_t type, uint8_t * payload, size_t lenght // called when button is kept pressed for less than 2 seconds void mediumKeyPress_gy33() { - tcs.setConfig(MCU_LED_07, MCU_WHITE_ON); + tcs.setConfig(MCU_LED_06, MCU_WHITE_ON); } // called when button is kept pressed for 2 seconds or more diff --git a/clients/web(RGBW)/build/index.htm b/clients/web(RGBW)/build/index.htm new file mode 100644 index 0000000..d176d47 --- /dev/null +++ b/clients/web(RGBW)/build/index.htm @@ -0,0 +1,506 @@ + + + + + + + + + + + + + + McLighting (RGBW) v2 + + + + + +
+
+
+
+
+ +
+
+
+
+
+
Error on websocket connect.
+
+
+
+
+ +
+
+
+
+
+ +
+
+
+
+
pick a color
+
+
+
+
+
Auto:
+ +
+
+
+
+
+ +
+
+
+
+
+
+
+

+
+
+
+

+
+
+
+

+
+
+ +
+
+
+

+
+
+ +
+
+
+

+
+
+ +
+
+
+

+
+
+
+
+ +
+
+
+ Loading animations... +
+
+
+
+
+ + + + + + + + + + + \ No newline at end of file diff --git a/clients/web(RGBW)/gulpfile.js b/clients/web(RGBW)/gulpfile.js new file mode 100644 index 0000000..cb2773a --- /dev/null +++ b/clients/web(RGBW)/gulpfile.js @@ -0,0 +1,55 @@ +var gulp = require('gulp'), + 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(src_dir + '*.htm') + .pipe(fileinclude({ + prefix: '@@', + basepath: '@file' + })) + .pipe(gulp.dest('build')) + .pipe(connect.reload()); +}); + + +gulp.task('connect', function() { + connect.server({ + root: 'build', + livereload: true + }); +}); + +gulp.task('watch', function() { + gulp.watch(src_dir + '*.htm', ['html']); + gulp.watch(src_dir + 'js/*.js', ['html']); +}); + + +gulp.task('upload', ['html'], function() { + var url = 'http://192.168.0.49/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(RGBW)/package.json b/clients/web(RGBW)/package.json new file mode 100644 index 0000000..98632aa --- /dev/null +++ b/clients/web(RGBW)/package.json @@ -0,0 +1,18 @@ +{ + "name": "mc_lighting", + "version": "2.0.0", + "description": "Web client for Mc Lighting", + "main": "index.html", + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1" + }, + "author": "Tobias Blum", + "license": "MIT", + "dependencies": { + "fs": "0.0.2", + "gulp": "^3.9.1", + "gulp-connect": "^5.0.0", + "gulp-file-include": "^1.0.0", + "request": "^2.72.0" + } +} diff --git a/clients/web(RGBW)/src/index.htm b/clients/web(RGBW)/src/index.htm new file mode 100644 index 0000000..b5e1645 --- /dev/null +++ b/clients/web(RGBW)/src/index.htm @@ -0,0 +1,159 @@ + + + + + + + + + + + + + + McLighting (RGBW) v2 + + + + + +
+
+
+
+
+ +
+
+
+
+
+
Error on websocket connect.
+
+
+
+
+ +
+
+
+
+
+ +
+
+
+
+
pick a color
+
+
+
+
+
Auto:
+ +
+
+
+
+
+ +
+
+
+
+
+
+
+

+
+
+
+

+
+
+
+

+
+
+ +
+
+
+

+
+
+ +
+
+
+

+
+
+ +
+
+
+

+
+
+
+
+ +
+
+
+ Loading animations... +
+
+
+
+
+ + + + + + + + + + + \ No newline at end of file + \ No newline at end of file diff --git a/clients/web(RGBW)/src/js/script.js b/clients/web(RGBW)/src/js/script.js new file mode 100644 index 0000000..23e6651 --- /dev/null +++ b/clients/web(RGBW)/src/js/script.js @@ -0,0 +1,350 @@ +(function($){ +$(function(){ + + // Settings + var host = window.location.hostname; + //host = "esp8266_02.local"; + + 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("Navigate to pane: ", $(this).data("pane")); + showPane($(this).data("pane")); + }); + + function showPane(pane) { + $('.mc_pane').addClass('hide'); + $('#' + pane).removeClass('hide'); + $('.button-collapse').sideNav('hide'); + + //if (pane == "pane2") { + // setMainColor(); + //} + } + + + // ****************************************************************** + // init() + // ****************************************************************** + 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_delay").val(data.speed); + $("#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]); + 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); + var modes_html = ""; + modes_html += '
'; + if (mode == "3") { + modes_html += 'OFF'; + } else { + modes_html += 'OFF'; + } + modes_html += 'send'; + modes_html += ''; + modes_html += '
' + modes_html += '
'; + if (mode == "4") { + modes_html += 'TV'; + } else { + modes_html += 'TV'; + } + modes_html += 'send'; + modes_html += ''; + modes_html += '
'; + data.forEach(function(current_mode){ + if (current_mode.mode !== undefined) { + modes_html += '
'; + if (mode == "1" && current_mode.mode == ws2812fx_mode) { + modes_html += '(' + current_mode.mode +') '+ current_mode.name; + + } else { + modes_html += '(' + current_mode.mode +') '+ current_mode.name; + } + modes_html += 'send'; + modes_html += ''; + modes_html += '
'; + } + }); + + $('#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 + 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('WebSocket from server: ' + e.data); + ws_waiting = 0; + }; + } + + + // ****************************************************************** + // Modes + // ****************************************************************** + $("#pane2").on("click", ".btn_mode", function() { + var mode = $(this).attr("data-mode"); + last_mode = mode; + var btn = $(this); + setMode(mode, function() { + $(".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); + + $("#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); + }); + + $("#autoSwitch").on("change", function () { + if ($(this).prop('checked')) { + wsSendCommand("start"); + } else { + wsSendCommand("stop"); + } + }); + + function setMode(mode, finish_funtion) { + console.log("Mode: ", mode); + + wsSendCommand("/" + mode); + finish_funtion(); + } + + function setMainColor() { + var white = $("#rng_white").val(); + var red = $("#rng_red").val(); + var green = $("#rng_green").val(); + var blue = $("#rng_blue").val(); + + 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); + } + + + // ****************************************************************** + // 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 + // ****************************************************************** + // 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); + //canvas.addEventListener("mousemove", 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; + 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]); + } + + //display the touch/click position and color info + function updateStatus(pos, color) { + //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_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]); + } + + //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; + + updateStatus(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); + 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 +})(jQuery); // end of jQuery name space \ No newline at end of file diff --git a/clients/web/build/index.htm b/clients/web/build/index.htm index 5cd4d26..675efdb 100644 --- a/clients/web/build/index.htm +++ b/clients/web/build/index.htm @@ -8,15 +8,16 @@ + - McLighting (RGBW) v2 + McLighting v2