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

code cleanup

Browse Source 
moved rgbw webclient to web(RGBW) folder
further code cleanup
This commit is contained in:
BPoH_Voodoo
2018-04-29 11:50:38 +02:00
parent c486066c1c
commit afc9272aae
11 changed files with 1140 additions and 131 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Arduino/McLighting/WS2812FX.h
+2 -2
View File
@@ -42,7 +42,7 @@
#define DEFAULT_BRIGHTNESS 50 #define DEFAULT_BRIGHTNESS 50
#define DEFAULT_MODE 0 #define DEFAULT_MODE 0
#define DEFAULT_SPEED 1000 #define DEFAULT_SPEED 1000
#define DEFAULT_COLOR 0xFF0000 #define DEFAULT_COLOR 0x00FF0000
#define SPEED_MIN 10 #define SPEED_MIN 10
#define SPEED_MAX 65535 #define SPEED_MAX 65535
@@ -53,7 +53,7 @@
/* each segment uses 36 bytes of SRAM memory, so if you're application fails because of /* each segment uses 36 bytes of SRAM memory, so if you're application fails because of
insufficient memory, decreasing MAX_NUM_SEGMENTS may help */ insufficient memory, decreasing MAX_NUM_SEGMENTS may help */
#define MAX_NUM_SEGMENTS 10 #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 _segments[_segment_index]
#define SEGMENT_RUNTIME _segment_runtimes[_segment_index] #define SEGMENT_RUNTIME _segment_runtimes[_segment_index]
#define SEGMENT_LENGTH (SEGMENT.stop - SEGMENT.start + 1) #define SEGMENT_LENGTH (SEGMENT.stop - SEGMENT.start + 1)
Arduino/McLighting/definitions.h
+2 -2
View File
@@ -6,7 +6,7 @@
#define NUMLEDS 194 // Number of leds in the strip #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 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 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 #define RGBW // If defined, use RGBW Strips
const char HOSTNAME[] = "McLightingRGBW01"; // Friedly hostname 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_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_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_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 // 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 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 //#define MQTT_HOME_ASSISTANT_SUPPORT // If defined, use AMQTT and select Tools -> IwIP Variant -> Higher Bandwidth
Arduino/McLighting/request_handlers.h
+20 -67
View File
@@ -391,17 +391,20 @@ void handleAutoStop() {
autoTicker.detach(); autoTicker.detach();
strip.stop(); strip.stop();
} }
void Dbg_Prefix(bool mqtt, uint8_t num) {
void checkpayload(uint8_t * payload, bool mqtt = false, uint8_t num = 0) {
// # ==> Set main color
if (payload[0] == '#') {
handleSetMainColor(payload);
if (mqtt == true) { if (mqtt == true) {
DBG_OUTPUT_PORT.print("MQTT: "); DBG_OUTPUT_PORT.print("MQTT: ");
} else { } else {
DBG_OUTPUT_PORT.print("WS: "); DBG_OUTPUT_PORT.print("WS: ");
webSocket.sendTXT(num, "OK"); webSocket.sendTXT(num, "OK");
} }
}
void checkpayload(uint8_t * payload, bool mqtt = false, uint8_t num = 0) {
// # ==> Set main color
if (payload[0] == '#') {
handleSetMainColor(payload);
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); 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 #ifdef ENABLE_MQTT
mqtt_client.publish(mqtt_outtopic, String(String("OK ") + String((char *)payload)).c_str()); 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); uint8_t d = (uint8_t) strtol((const char *) &payload[1], NULL, 10);
ws2812fx_speed = constrain(d, 0, 255); ws2812fx_speed = constrain(d, 0, 255);
strip.setSpeed(convertSpeed(ws2812fx_speed)); strip.setSpeed(convertSpeed(ws2812fx_speed));
if (mqtt == true) { Dbg_Prefix(mqtt, num);
DBG_OUTPUT_PORT.print("MQTT: ");
} else {
DBG_OUTPUT_PORT.print("WS: ");
webSocket.sendTXT(num, "OK");
}
DBG_OUTPUT_PORT.printf("Set speed to: [%u]\n", ws2812fx_speed); DBG_OUTPUT_PORT.printf("Set speed to: [%u]\n", ws2812fx_speed);
#ifdef ENABLE_HOMEASSISTANT #ifdef ENABLE_HOMEASSISTANT
if(!ha_send_data.active()) ha_send_data.once(5, tickerSendState); 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); uint8_t b = (uint8_t) strtol((const char *) &payload[1], NULL, 10);
brightness = constrain(b, 0, 255); brightness = constrain(b, 0, 255);
strip.setBrightness(brightness); strip.setBrightness(brightness);
if (mqtt == true) { Dbg_Prefix(mqtt, num);
DBG_OUTPUT_PORT.print("MQTT: ");
} else {
DBG_OUTPUT_PORT.print("WS: ");
webSocket.sendTXT(num, "OK");
}
DBG_OUTPUT_PORT.printf("WS: Set brightness to: [%u]\n", brightness); DBG_OUTPUT_PORT.printf("WS: Set brightness to: [%u]\n", brightness);
#ifdef ENABLE_MQTT #ifdef ENABLE_MQTT
mqtt_client.publish(mqtt_outtopic, String(String("OK ") + String((char *)payload)).c_str()); 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) // * ==> Set main color and light all LEDs (Shortcut)
if (payload[0] == '*') { if (payload[0] == '*') {
handleSetAllMode(payload); handleSetAllMode(payload);
if (mqtt == true) { Dbg_Prefix(mqtt, num);
DBG_OUTPUT_PORT.print("MQTT: ");
} else {
DBG_OUTPUT_PORT.print("WS: ");
webSocket.sendTXT(num, "OK");
}
DBG_OUTPUT_PORT.printf("Set main color and light all LEDs [%s]\n", payload); DBG_OUTPUT_PORT.printf("Set main color and light all LEDs [%s]\n", payload);
#ifdef ENABLE_MQTT #ifdef ENABLE_MQTT
mqtt_client.publish(mqtt_outtopic, String(String("OK ") + String((char *)payload)).c_str()); 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 // ! ==> Set single LED in given color
if (payload[0] == '!') { if (payload[0] == '!') {
handleSetSingleLED(payload, 1); handleSetSingleLED(payload, 1);
if (mqtt == true) { Dbg_Prefix(mqtt, num);
DBG_OUTPUT_PORT.print("MQTT: ");
} else {
DBG_OUTPUT_PORT.print("WS: ");
webSocket.sendTXT(num, "OK");
}
DBG_OUTPUT_PORT.printf("Set single LED in given color [%s]\n", payload); DBG_OUTPUT_PORT.printf("Set single LED in given color [%s]\n", payload);
#ifdef ENABLE_MQTT #ifdef ENABLE_MQTT
mqtt_client.publish(mqtt_outtopic, String(String("OK ") + String((char *)payload)).c_str()); 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 // + ==> Set multiple LED in the given colors
if (payload[0] == '+') { if (payload[0] == '+') {
handleSetDifferentColors(payload); handleSetDifferentColors(payload);
if (mqtt == true) { Dbg_Prefix(mqtt, num);
DBG_OUTPUT_PORT.print("MQTT: ");
} else {
DBG_OUTPUT_PORT.print("WS: ");
webSocket.sendTXT(num, "OK");
}
DBG_OUTPUT_PORT.printf("Set multiple LEDs in given color [%s]\n", payload); DBG_OUTPUT_PORT.printf("Set multiple LEDs in given color [%s]\n", payload);
#ifdef ENABLE_MQTT #ifdef ENABLE_MQTT
mqtt_client.publish(mqtt_outtopic, String(String("OK ") + String((char *)payload)).c_str()); 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 // + ==> Set range of LEDs in the given color
if (payload[0] == 'R') { if (payload[0] == 'R') {
handleRangeDifferentColors(payload); handleRangeDifferentColors(payload);
if (mqtt == true) { Dbg_Prefix(mqtt, num);
DBG_OUTPUT_PORT.print("MQTT: ");
} else {
DBG_OUTPUT_PORT.print("WS: ");
webSocket.sendTXT(num, "OK");
}
DBG_OUTPUT_PORT.printf("Set range of LEDs in given color [%s]\n", payload); DBG_OUTPUT_PORT.printf("Set range of LEDs in given color [%s]\n", payload);
webSocket.sendTXT(num, "OK"); webSocket.sendTXT(num, "OK");
#ifdef ENABLE_MQTT #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]); String str_mode = String((char *) &payload[0]);
handleSetNamedMode(str_mode); handleSetNamedMode(str_mode);
if (mqtt == true) { Dbg_Prefix(mqtt, num);
DBG_OUTPUT_PORT.print("MQTT: ");
} else {
DBG_OUTPUT_PORT.print("WS: ");
webSocket.sendTXT(num, "OK");
}
DBG_OUTPUT_PORT.printf("Activated mode [%u]!\n", mode); DBG_OUTPUT_PORT.printf("Activated mode [%u]!\n", mode);
#ifdef ENABLE_MQTT #ifdef ENABLE_MQTT
mqtt_client.publish(mqtt_outtopic, String(String("OK ") + String((char *)payload)).c_str()); 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. // $ ==> Get status Info.
if (payload[0] == '$') { if (payload[0] == '$') {
String json = listStatusJSON(); String json = listStatusJSON();
if (mqtt == true) { Dbg_Prefix(mqtt, num);
DBG_OUTPUT_PORT.print("MQTT: ");
} else {
DBG_OUTPUT_PORT.print("WS: ");
webSocket.sendTXT(num, "OK");
}
DBG_OUTPUT_PORT.println("Get status info: " + json); DBG_OUTPUT_PORT.println("Get status info: " + json);
webSocket.sendTXT(num, json); webSocket.sendTXT(num, json);
#ifdef ENABLE_MQTT #ifdef ENABLE_MQTT
@@ -600,12 +563,7 @@ void checkpayload(uint8_t * payload, bool mqtt = false, uint8_t num = 0) {
// ~ ==> Get WS2812 modes. // ~ ==> Get WS2812 modes.
if (payload[0] == '~') { if (payload[0] == '~') {
String json = listModesJSON(); String json = listModesJSON();
if (mqtt == true) { Dbg_Prefix(mqtt, num);
DBG_OUTPUT_PORT.print("MQTT: ");
} else {
DBG_OUTPUT_PORT.print("WS: ");
webSocket.sendTXT(num, "OK");
}
DBG_OUTPUT_PORT.println("Get WS2812 modes."); DBG_OUTPUT_PORT.println("Get WS2812 modes.");
DBG_OUTPUT_PORT.println(json); DBG_OUTPUT_PORT.println(json);
#ifdef ENABLE_MQTT #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()); //DBG_OUTPUT_PORT.printf("Result: %d / %d", res, json_modes.length());
#endif #endif
#ifdef ENABLE_AMQTT #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 #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 // Hint: https://github.com/knolleary/pubsubclient/issues/110
if (payload[0] == '/') { if (payload[0] == '/') {
handleSetWS2812FXMode(payload); handleSetWS2812FXMode(payload);
if (mqtt == true) { Dbg_Prefix(mqtt, num);
DBG_OUTPUT_PORT.print("MQTT: ");
} else {
DBG_OUTPUT_PORT.print("WS: ");
webSocket.sendTXT(num, "OK");
}
DBG_OUTPUT_PORT.printf("Set WS2812 mode: [%s]\n", payload); DBG_OUTPUT_PORT.printf("Set WS2812 mode: [%s]\n", payload);
#ifdef ENABLE_MQTT #ifdef ENABLE_MQTT
mqtt_client.publish(mqtt_outtopic, String(String("OK ") + String((char *)payload)).c_str()); 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 // called when button is kept pressed for less than 2 seconds
void mediumKeyPress_gy33() { 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 // called when button is kept pressed for 2 seconds or more
clients/web(RGBW)/build/index.htm
+506
View File
@@ -0,0 +1,506 @@
<!DOCTYPE html>
<html>
<head>
<!--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.100.2/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 name="mobile-web-app-capable" content="yes">
<meta charset="utf-8"/>
<meta name="mobile-web-app-capable" content="yes">
<title>McLighting (RGBW) v2</title>
</head>
<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">McLighting (RGBW) 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>
</ul>
<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>
</nav>
<div class="container mc_pane" id="pane0">
<div class="section">
<div class="row" id="mc-wsloader">
<div class="col">
<div class="preloader-wrapper active">
<div class="spinner-layer spinner-blue-only">
<div class="circle-clipper left">
<div class="circle"></div>
</div>
<div class="gap-patch">
<div class="circle"></div>
</div>
<div class="circle-clipper right">
<div class="circle"></div>
</div>
</div>
</div>
</div>
</div>
<div class="row hide" id="mc-wserror">
<div class="col">
<div>Error on websocket connect.</div>
</div>
</div>
</div>
</div>
<div class="container mc_pane hide" id="pane1">
<div class="section">
<div class="row">
<div class="col s12 m6">
<div style="height: 330px; width: 330px;">
<canvas id="myCanvas" width="330" height="330" style="-webkit-user-select: none;-webkit-tap-highlight-color: rgba(0,0,0,0);-moz-user-select:none;"></canvas>
</div>
</div>
<div class="col s12 m6">
<div class="card-panel" id="status">
<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>
</div>
</div>
</div>
</div>
</div>
<div class="container mc_pane hide" id="pane2">
<div class="section">
<div class="row">
<form class="col s12">
<div class="row">
<div class="input-field col s12 l4">
<label for="txt_red">Red</label><br/>
<p class="range-field"><input type="range" id="rng_red" min="0" max="255" class="update_colors" /></p>
</div>
<div class="input-field col s12 l4">
<label for="txt_green">Green</label><br/>
<p class="range-field"><input type="range" id="rng_green" min="0" max="255" class="update_colors" /></p>
</div>
<div class="input-field col s12 l4">
<label for="txt_blue">Blue</label><br/>
<p class="range-field"><input type="range" id="rng_blue" min="0" max="255" class="update_colors" /></p>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<label for="txt_white">White</label><br/>
<p class="range-field"><input type="range" id="rng_white" min="0" max="255" class="update_colors" /></p>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<label for="txt_delay">Speed</label><br/>
<p class="range-field"><input type="range" id="rng_delay" min="0" max="255" value="196" class="update_delay" /></p>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<label for="txt_delay">Brightness</label><br/>
<p class="range-field"><input type="range" id="rng_brightness" min="0" max="255" value="196" class="update_brightness" /></p>
</div>
</div>
</form>
</div>
<div class="row">
<div id="modes">
<div class="input-field col s12">
Loading animations...
</div>
</div>
</div>
</div>
</div>
<footer class="page-footer blue">
<div class="footer-copyright">
<div class="container">© 2017
<a class="grey-text text-lighten-4 right" href="https://github.com/toblum/McLighting">Project home</a>
</div>
</div>
</footer>
<style type="text/css">
.btn_grid {
margin: 7px 0;
}
</style>
<!--Import jQuery before materialize.js-->
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
<script type="text/javascript">(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, AUTO, OFF, TV, CUSTOM, SETCOLOR, SETSPEED, BRIGHTNESS, WIPE, RAINBOW, RAINBOWCYCLE, THEATERCHASE, TWINKLERANDOM, THEATERCHASERAINBOW};
$.getJSON("http://" + host + "/get_modes", function(data) {
console.log("modes", data);
var modes_html = "";
modes_html += '<div class="col s12 m6 l6 btn_grid">';
if (mode == "3") {
modes_html += '<a class="btn waves-effect waves-light btn_mode_static red" name="action" data-mode="off">OFF';
} else {
modes_html += '<a class="btn waves-effect waves-light btn_mode_static blue" name="action" data-mode="off">OFF';
}
modes_html += '<i class="material-icons right">send</i>';
modes_html += '</a>';
modes_html += '</div>'
modes_html += '<div class="col s12 m6 l6 btn_grid">';
if (mode == "4") {
modes_html += '<a class="btn waves-effect waves-light btn_mode_static red" name="action" data-mode="tv">TV';
} else {
modes_html += '<a class="btn waves-effect waves-light btn_mode_static blue" name="action" data-mode="tv">TV';
}
modes_html += '<i class="material-icons right">send</i>';
modes_html += '</a>';
modes_html += '</div>';
data.forEach(function(current_mode){
if (current_mode.mode !== undefined) {
modes_html += '<div class="col s12 m6 l6 btn_grid">';
if (mode == "1" && current_mode.mode == ws2812fx_mode) {
modes_html += '<a class="btn waves-effect waves-light btn_mode red" name="action" data-mode="' + current_mode.mode + '">(' + current_mode.mode +') '+ current_mode.name;
} else {
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>';
}
});
$('#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</script>
</body>
</html>
clients/web(RGBW)/gulpfile.js
+55
View File
@@ -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']);
clients/web(RGBW)/package.json
+18
View File
@@ -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"
}
}
clients/web(RGBW)/src/index.htm
+159
View File
@@ -0,0 +1,159 @@
<!DOCTYPE html>
<html>
<head>
<!--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.100.2/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 name="mobile-web-app-capable" content="yes">
<meta charset="utf-8"/>
<meta name="mobile-web-app-capable" content="yes">
<title>McLighting (RGBW) v2</title>
</head>
<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">McLighting (RGBW) 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>
</ul>
<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>
</nav>
<div class="container mc_pane" id="pane0">
<div class="section">
<div class="row" id="mc-wsloader">
<div class="col">
<div class="preloader-wrapper active">
<div class="spinner-layer spinner-blue-only">
<div class="circle-clipper left">
<div class="circle"></div>
</div>
<div class="gap-patch">
<div class="circle"></div>
</div>
<div class="circle-clipper right">
<div class="circle"></div>
</div>
</div>
</div>
</div>
</div>
<div class="row hide" id="mc-wserror">
<div class="col">
<div>Error on websocket connect.</div>
</div>
</div>
</div>
</div>
<div class="container mc_pane hide" id="pane1">
<div class="section">
<div class="row">
<div class="col s12 m6">
<div style="height: 330px; width: 330px;">
<canvas id="myCanvas" width="330" height="330" style="-webkit-user-select: none;-webkit-tap-highlight-color: rgba(0,0,0,0);-moz-user-select:none;"></canvas>
</div>
</div>
<div class="col s12 m6">
<div class="card-panel" id="status">
<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>
</div>
</div>
</div>
</div>
</div>
<div class="container mc_pane hide" id="pane2">
<div class="section">
<div class="row">
<form class="col s12">
<div class="row">
<div class="input-field col s12 l4">
<label for="txt_red">Red</label><br/>
<p class="range-field"><input type="range" id="rng_red" min="0" max="255" class="update_colors" /></p>
</div>
<div class="input-field col s12 l4">
<label for="txt_green">Green</label><br/>
<p class="range-field"><input type="range" id="rng_green" min="0" max="255" class="update_colors" /></p>
</div>
<div class="input-field col s12 l4">
<label for="txt_blue">Blue</label><br/>
<p class="range-field"><input type="range" id="rng_blue" min="0" max="255" class="update_colors" /></p>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<label for="txt_white">White</label><br/>
<p class="range-field"><input type="range" id="rng_white" min="0" max="255" class="update_colors" /></p>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<label for="txt_delay">Speed</label><br/>
<p class="range-field"><input type="range" id="rng_delay" min="0" max="255" value="196" class="update_delay" /></p>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<label for="txt_delay">Brightness</label><br/>
<p class="range-field"><input type="range" id="rng_brightness" min="0" max="255" value="196" class="update_brightness" /></p>
</div>
</div>
</form>
</div>
<div class="row">
<div id="modes">
<div class="input-field col s12">
Loading animations...
</div>
</div>
</div>
</div>
</div>
<footer class="page-footer blue">
<div class="footer-copyright">
<div class="container">© 2017
<a class="grey-text text-lighten-4 right" href="https://github.com/toblum/McLighting">Project home</a>
</div>
</div>
</footer>
<style type="text/css">
.btn_grid {
margin: 7px 0;
}
</style>
<!--Import jQuery before materialize.js-->
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
<script type="text/javascript">@@include('js/script.js')</script>
</body>
\ No newline at end of file
</html>
clients/web(RGBW)/src/js/script.js
+350
View File
@@ -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 += '<div class="col s12 m6 l6 btn_grid">';
if (mode == "3") {
modes_html += '<a class="btn waves-effect waves-light btn_mode_static red" name="action" data-mode="off">OFF';
} else {
modes_html += '<a class="btn waves-effect waves-light btn_mode_static blue" name="action" data-mode="off">OFF';
}
modes_html += '<i class="material-icons right">send</i>';
modes_html += '</a>';
modes_html += '</div>'
modes_html += '<div class="col s12 m6 l6 btn_grid">';
if (mode == "4") {
modes_html += '<a class="btn waves-effect waves-light btn_mode_static red" name="action" data-mode="tv">TV';
} else {
modes_html += '<a class="btn waves-effect waves-light btn_mode_static blue" name="action" data-mode="tv">TV';
}
modes_html += '<i class="material-icons right">send</i>';
modes_html += '</a>';
modes_html += '</div>';
data.forEach(function(current_mode){
if (current_mode.mode !== undefined) {
modes_html += '<div class="col s12 m6 l6 btn_grid">';
if (mode == "1" && current_mode.mode == ws2812fx_mode) {
modes_html += '<a class="btn waves-effect waves-light btn_mode red" name="action" data-mode="' + current_mode.mode + '">(' + current_mode.mode +') '+ current_mode.name;
} else {
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>';
}
});
$('#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
clients/web/build/index.htm
+10 -26
View File
@@ -8,15 +8,16 @@
<!--Let browser know website is optimized for mobile--> <!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/>
<meta name="mobile-web-app-capable" content="yes">
<meta charset="utf-8"/> <meta charset="utf-8"/>
<meta name="mobile-web-app-capable" content="yes"> <meta name="mobile-web-app-capable" content="yes">
<title>McLighting (RGBW) v2</title> <title>McLighting v2</title>
</head> </head>
<body> <body>
<nav class="blue light-blueXXX lighten-1XXX" role="navigation" id="mc-nav"> <nav class="blue light-blueXXX lighten-1XXX" role="navigation" id="mc-nav">
<div class="nav-wrapper container"> <div class="nav-wrapper container">
<a id="logo-container" href="#" class="brand-logo">McLighting (RGBW) v2</a> <a id="logo-container" href="#" class="brand-logo">McLighting v2</a>
<ul class="right hide-on-med-and-down"> <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="pane1">Wheel</a></li>
@@ -102,13 +103,6 @@
</div> </div>
</div> </div>
<div class="row">
<div class="input-field col s12">
<label for="txt_white">White</label><br/>
<p class="range-field"><input type="range" id="rng_white" min="0" max="255" class="update_colors" /></p>
</div>
</div>
<div class="row"> <div class="row">
<div class="input-field col s12"> <div class="input-field col s12">
<label for="txt_delay">Speed</label><br/> <label for="txt_delay">Speed</label><br/>
@@ -199,18 +193,16 @@ $(function(){
ws2812fx_mode = data.ws2812fx_mode; ws2812fx_mode = data.ws2812fx_mode;
$("#rng_delay").val(data.speed); $("#rng_delay").val(data.speed);
$("#rng_brightness").val(data.brightness); $("#rng_brightness").val(data.brightness);
$("#rng_white").val(data.color[0]); $("#rng_red").val(data.color[0]);
$("#rng_red").val(data.color[1]); $("#rng_green").val(data.color[1]);
$("#rng_green").val(data.color[2]); $("#rng_blue").val(data.color[2]);
$("#rng_blue").val(data.color[3]); var statusColor = "#" + componentToHex(data.color[0]) + componentToHex(data.color[1]) + componentToHex(data.color[2]);
var statusColor = "#" + componentToHex(data.color[1]) + componentToHex(data.color[2]) + componentToHex(data.color[3]);
$('#status').css("backgroundColor", statusColor); $('#status').css("backgroundColor", statusColor);
$('#status_color').text(statusColor + "- R=" + data.color[1] + ", G=" + data.color[2] + ", B=" + data.color[3]); $('#status_color').text(statusColor + "- R=" + data.color[0] + ", G=" + data.color[1] + ", B=" + data.color[2]);
}); });
// Load modes async // Load modes async
// List of all color modes // List of all color modes
// enum MODE { SET_MODE, HOLD, AUTO, OFF, TV, SETCOLOR, SETSPEED, BRIGHTNESS, WIPE, RAINBOW, RAINBOWCYCLE, THEATERCHASE, TWINKLERANDOM, THEATERCHASERAINBOW, CUSTOM}; // enum MODE { SET_MODE, HOLD, AUTO, OFF, TV, CUSTOM, SETCOLOR, SETSPEED, BRIGHTNESS, WIPE, RAINBOW, RAINBOWCYCLE, THEATERCHASE, TWINKLERANDOM, THEATERCHASERAINBOW};
$.getJSON("http://" + host + "/get_modes", function(data) { $.getJSON("http://" + host + "/get_modes", function(data) {
console.log("modes", data); console.log("modes", data);
var modes_html = ""; var modes_html = "";
@@ -232,10 +224,6 @@ $(function(){
modes_html += '<i class="material-icons right">send</i>'; modes_html += '<i class="material-icons right">send</i>';
modes_html += '</a>'; modes_html += '</a>';
modes_html += '</div>'; modes_html += '</div>';
data.forEach(function(current_mode){ data.forEach(function(current_mode){
if (current_mode.mode !== undefined) { if (current_mode.mode !== undefined) {
modes_html += '<div class="col s12 m6 l6 btn_grid">'; modes_html += '<div class="col s12 m6 l6 btn_grid">';
@@ -253,7 +241,6 @@ $(function(){
$('#modes').html(modes_html); $('#modes').html(modes_html);
}); });
// When the connection is open, send some data to the server // When the connection is open, send some data to the server
connection.onopen = function () { connection.onopen = function () {
//connection.send('Ping'); // Send the message 'Ping' to the server //connection.send('Ping'); // Send the message 'Ping' to the server
@@ -328,12 +315,11 @@ $(function(){
} }
function setMainColor() { function setMainColor() {
var white = $("#rng_white").val();
var red = $("#rng_red").val(); var red = $("#rng_red").val();
var green = $("#rng_green").val(); var green = $("#rng_green").val();
var blue = $("#rng_blue").val(); var blue = $("#rng_blue").val();
var hexColor = componentToHex(white) + componentToHex(red) + componentToHex(green) + componentToHex(blue); var hexColor = componentToHex(red) + componentToHex(green) + componentToHex(blue);
var statusColor = "#" + componentToHex(red) + componentToHex(green) + componentToHex(blue); var statusColor = "#" + componentToHex(red) + componentToHex(green) + componentToHex(blue);
wsSetMainColor(hexColor); wsSetMainColor(hexColor);
$('#status').css("backgroundColor", statusColor); $('#status').css("backgroundColor", statusColor);
@@ -459,14 +445,12 @@ $(function(){
//wsSetAll(hexColor); //wsSetAll(hexColor);
var hexColor = componentToHex(color[0]) + componentToHex(color[1]) + componentToHex(color[2]); var hexColor = componentToHex(color[0]) + componentToHex(color[1]) + componentToHex(color[2]);
wsSetMainColor(hexColor); wsSetMainColor(hexColor);
hexColor = "#" + hexColor; hexColor = "#" + hexColor;
$('#status').css("backgroundColor", hexColor); $('#status').css("backgroundColor", hexColor);
$('#status_color').text(hexColor + " - R=" + color[0] + ", G=" + color[1] + ", B=" + color[2]); $('#status_color').text(hexColor + " - R=" + color[0] + ", G=" + color[1] + ", B=" + color[2]);
$('#status_pos').text("x: " + pos.x + " - y: " + pos.y); $('#status_pos').text("x: " + pos.x + " - y: " + pos.y);
$("#rng_white").val(0);
$("#rng_red").val(color[0]); $("#rng_red").val(color[0]);
$("#rng_green").val(color[1]); $("#rng_green").val(color[1]);
$("#rng_blue").val(color[2]); $("#rng_blue").val(color[2]);
clients/web/src/index.htm
+3 -9
View File
@@ -8,15 +8,16 @@
<!--Let browser know website is optimized for mobile--> <!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/>
<meta name="mobile-web-app-capable" content="yes">
<meta charset="utf-8"/> <meta charset="utf-8"/>
<meta name="mobile-web-app-capable" content="yes"> <meta name="mobile-web-app-capable" content="yes">
<title>McLighting (RGBW) v2</title> <title>McLighting v2</title>
</head> </head>
<body> <body>
<nav class="blue light-blueXXX lighten-1XXX" role="navigation" id="mc-nav"> <nav class="blue light-blueXXX lighten-1XXX" role="navigation" id="mc-nav">
<div class="nav-wrapper container"> <div class="nav-wrapper container">
<a id="logo-container" href="#" class="brand-logo">McLighting (RGBW) v2</a> <a id="logo-container" href="#" class="brand-logo">McLighting v2</a>
<ul class="right hide-on-med-and-down"> <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="pane1">Wheel</a></li>
@@ -102,13 +103,6 @@
</div> </div>
</div> </div>
<div class="row">
<div class="input-field col s12">
<label for="txt_white">White</label><br/>
<p class="range-field"><input type="range" id="rng_white" min="0" max="255" class="update_colors" /></p>
</div>
</div>
<div class="row"> <div class="row">
<div class="input-field col s12"> <div class="input-field col s12">
<label for="txt_delay">Speed</label><br/> <label for="txt_delay">Speed</label><br/>
clients/web/src/js/script.js
+8 -18
View File
@@ -42,21 +42,19 @@ $(function(){
$.getJSON("http://" + host + "/status", function(data) { $.getJSON("http://" + host + "/status", function(data) {
console.log("status", data); console.log("status", data);
mode = data.mode; mode = data.mode;
ws2812fx_mode = data.ws2812fx_mode_name; ws2812fx_mode = data.ws2812fx_mode;
$("#rng_delay").val(data.speed); $("#rng_delay").val(data.speed);
$("#rng_brightness").val(data.brightness); $("#rng_brightness").val(data.brightness);
$("#rng_white").val(data.color[0]); $("#rng_red").val(data.color[0]);
$("#rng_red").val(data.color[1]); $("#rng_green").val(data.color[1]);
$("#rng_green").val(data.color[2]); $("#rng_blue").val(data.color[2]);
$("#rng_blue").val(data.color[3]); var statusColor = "#" + componentToHex(data.color[0]) + componentToHex(data.color[1]) + componentToHex(data.color[2]);
var statusColor = "#" + componentToHex(data.color[1]) + componentToHex(data.color[2]) + componentToHex(data.color[3]);
$('#status').css("backgroundColor", statusColor); $('#status').css("backgroundColor", statusColor);
$('#status_color').text(statusColor + "- R=" + data.color[1] + ", G=" + data.color[2] + ", B=" + data.color[3]); $('#status_color').text(statusColor + "- R=" + data.color[0] + ", G=" + data.color[1] + ", B=" + data.color[2]);
}); });
// Load modes async // Load modes async
// List of all color modes // List of all color modes
// enum MODE { SET_MODE, HOLD, OFF, ALL, WIPE, RAINBOW, RAINBOWCYCLE, THEATERCHASE, TWINKLERANDOM, THEATERCHASERAINBOW, TV, CUSTOM, AUTO }; // enum MODE { SET_MODE, HOLD, AUTO, OFF, TV, CUSTOM, SETCOLOR, SETSPEED, BRIGHTNESS, WIPE, RAINBOW, RAINBOWCYCLE, THEATERCHASE, TWINKLERANDOM, THEATERCHASERAINBOW};
$.getJSON("http://" + host + "/get_modes", function(data) { $.getJSON("http://" + host + "/get_modes", function(data) {
console.log("modes", data); console.log("modes", data);
var modes_html = ""; var modes_html = "";
@@ -78,10 +76,6 @@ $(function(){
modes_html += '<i class="material-icons right">send</i>'; modes_html += '<i class="material-icons right">send</i>';
modes_html += '</a>'; modes_html += '</a>';
modes_html += '</div>'; modes_html += '</div>';
data.forEach(function(current_mode){ data.forEach(function(current_mode){
if (current_mode.mode !== undefined) { if (current_mode.mode !== undefined) {
modes_html += '<div class="col s12 m6 l6 btn_grid">'; modes_html += '<div class="col s12 m6 l6 btn_grid">';
@@ -99,7 +93,6 @@ $(function(){
$('#modes').html(modes_html); $('#modes').html(modes_html);
}); });
// When the connection is open, send some data to the server // When the connection is open, send some data to the server
connection.onopen = function () { connection.onopen = function () {
//connection.send('Ping'); // Send the message 'Ping' to the server //connection.send('Ping'); // Send the message 'Ping' to the server
@@ -174,12 +167,11 @@ $(function(){
} }
function setMainColor() { function setMainColor() {
var white = $("#rng_white").val();
var red = $("#rng_red").val(); var red = $("#rng_red").val();
var green = $("#rng_green").val(); var green = $("#rng_green").val();
var blue = $("#rng_blue").val(); var blue = $("#rng_blue").val();
var hexColor = componentToHex(white) + componentToHex(red) + componentToHex(green) + componentToHex(blue); var hexColor = componentToHex(red) + componentToHex(green) + componentToHex(blue);
var statusColor = "#" + componentToHex(red) + componentToHex(green) + componentToHex(blue); var statusColor = "#" + componentToHex(red) + componentToHex(green) + componentToHex(blue);
wsSetMainColor(hexColor); wsSetMainColor(hexColor);
$('#status').css("backgroundColor", statusColor); $('#status').css("backgroundColor", statusColor);
@@ -305,14 +297,12 @@ $(function(){
//wsSetAll(hexColor); //wsSetAll(hexColor);
var hexColor = componentToHex(color[0]) + componentToHex(color[1]) + componentToHex(color[2]); var hexColor = componentToHex(color[0]) + componentToHex(color[1]) + componentToHex(color[2]);
wsSetMainColor(hexColor); wsSetMainColor(hexColor);
hexColor = "#" + hexColor; hexColor = "#" + hexColor;
$('#status').css("backgroundColor", hexColor); $('#status').css("backgroundColor", hexColor);
$('#status_color').text(hexColor + " - R=" + color[0] + ", G=" + color[1] + ", B=" + color[2]); $('#status_color').text(hexColor + " - R=" + color[0] + ", G=" + color[1] + ", B=" + color[2]);
$('#status_pos').text("x: " + pos.x + " - y: " + pos.y); $('#status_pos').text("x: " + pos.x + " - y: " + pos.y);
$("#rng_white").val(0);
$("#rng_red").val(color[0]); $("#rng_red").val(color[0]);
$("#rng_green").val(color[1]); $("#rng_green").val(color[1]);
$("#rng_blue").val(color[2]); $("#rng_blue").val(color[2]);