Tobias Blum
GitHub
commit
2bb2943083
10 changed files with 604 additions and 137 deletions
6
.gitmodules
vendored
Normal file
6
.gitmodules
vendored
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
[submodule "Arduino/McLighting/data/McLightingUI"]
|
||||
path = Arduino/McLighting/data/McLightingUI
|
||||
url = https://github.com/toblum/McLightingUI
|
||||
[submodule "clients/web/McLightingUI"]
|
||||
path = clients/web/McLightingUI
|
||||
url = https://github.com/toblum/McLightingUI
|
||||
|
|
@ -64,32 +64,6 @@ WebSocketsServer webSocket = WebSocketsServer(81);
|
|||
ESP8266HTTPUpdateServer httpUpdater;
|
||||
#endif
|
||||
|
||||
#ifdef USE_NEOANIMATIONFX
|
||||
// ***************************************************************************
|
||||
// Load libraries / Instanciate NeoAnimationFX library
|
||||
// ***************************************************************************
|
||||
// https://github.com/debsahu/NeoAnimationFX
|
||||
#include <NeoAnimationFX.h>
|
||||
#define NEOMETHOD NeoPBBGRB800
|
||||
|
||||
NEOMETHOD neoStrip(NUMLEDS);
|
||||
NeoAnimationFX<NEOMETHOD> strip(neoStrip);
|
||||
|
||||
// Uses Pin RX / GPIO3 (Only pin that is supported, due to hardware limitations)
|
||||
// NEOMETHOD NeoPBBGRB800 uses GRB config 800 KHz bitstream (most NeoPixel products w/WS2812 LEDs)
|
||||
// NEOMETHOD NeoPBBGRB400 uses GRB config 400 KHz (classic 'v1' (not v2) FLORA pixels, WS2811 drivers)
|
||||
// NEOMETHOD NeoPBBRGB800 uses RGB config 800 KHz bitstream (most NeoPixel products w/WS2812 LEDs)
|
||||
// NEOMETHOD NeoPBBRGB400 uses RGB config 400 KHz (classic 'v1' (not v2) FLORA pixels, WS2811 drivers)
|
||||
|
||||
// Uses Pin D4 / GPIO2 (Only pin that is supported, due to hardware limitations)
|
||||
// NEOMETHOD NeoPBBGRBU800 uses GRB config 800 KHz bitstream (most NeoPixel products w/WS2812 LEDs)
|
||||
// NEOMETHOD NeoPBBGRBU400 uses GRB config 400 KHz (classic 'v1' (not v2) FLORA pixels, WS2811 drivers)
|
||||
// NEOMETHOD NeoPBBRGBU800 uses RGB config 800 KHz bitstream (most NeoPixel products w/WS2812 LEDs)
|
||||
// NEOMETHOD NeoPBBRGBU400 uses RGB config 400 KHz (classic 'v1' (not v2) FLORA pixels, WS2811 drivers)
|
||||
|
||||
#endif
|
||||
|
||||
#ifdef USE_WS2812FX
|
||||
// ***************************************************************************
|
||||
// Load libraries / Instanciate WS2812FX library
|
||||
// ***************************************************************************
|
||||
|
|
@ -109,6 +83,23 @@ WS2812FX strip = WS2812FX(NUMLEDS, PIN, NEO_GRB + NEO_KHZ800);
|
|||
// pixel power leads, add 300 - 500 Ohm resistor on first pixel's data input
|
||||
// and minimize distance between Arduino and first pixel. Avoid connecting
|
||||
// on a live circuit...if you must, connect GND first.
|
||||
|
||||
#ifdef USE_WS2812FX_DMA
|
||||
#include <NeoPixelBus.h>
|
||||
NeoEsp8266Dma800KbpsMethod dma = NeoEsp8266Dma800KbpsMethod(NUMLEDS, 3); //800 KHz bitstream (most NeoPixel products w/WS2812 LEDs)
|
||||
//NeoEsp8266Dma400KbpsMethod dma = NeoEsp8266Dma400KbpsMethod(NUMLEDS, 3); //400 KHz (classic 'v1' (not v2) FLORA pixels, WS2811 drivers)
|
||||
#endif
|
||||
#ifdef USE_WS2812FX_UART
|
||||
#include <NeoPixelBus.h>
|
||||
NeoEsp8266Uart800KbpsMethod dma = NeoEsp8266Uart800KbpsMethod(NUMLEDS, 3);
|
||||
#endif
|
||||
#if defined(USE_WS2812FX_DMA) or defined(USE_WS2812FX_UART)
|
||||
void DMA_Show(void) {
|
||||
if(dma.IsReadyToUpdate()) {
|
||||
memcpy(dma.getPixels(), strip.getPixels(), dma.getPixelsSize());
|
||||
dma.Update();
|
||||
}
|
||||
}
|
||||
#endif
|
||||
|
||||
// ***************************************************************************
|
||||
|
|
@ -265,6 +256,10 @@ void setup() {
|
|||
// Setup: Neopixel
|
||||
// ***************************************************************************
|
||||
strip.init();
|
||||
#if defined(USE_WS2812FX_DMA) or defined(USE_WS2812FX_UART)
|
||||
dma.Initialize();
|
||||
strip.setCustomShow(DMA_Show);
|
||||
#endif
|
||||
strip.setBrightness(brightness);
|
||||
strip.setSpeed(convertSpeed(ws2812fx_speed));
|
||||
//strip.setMode(FX_MODE_RAINBOW_CYCLE);
|
||||
|
|
@ -511,12 +506,15 @@ void setup() {
|
|||
json["core_version"] = ESP.getCoreVersion();
|
||||
json["cpu_freq"] = ESP.getCpuFreqMHz();
|
||||
json["chip_id"] = ESP.getFlashChipId();
|
||||
#ifndef USE_NEOANIMATIONFX
|
||||
json["animation_lib"] = "WS2812FX";
|
||||
json["pin"] = PIN;
|
||||
#if defined(USE_WS2812FX_DMA)
|
||||
json["animation_lib"] = "WS2812FX_DMA";
|
||||
json["pin"] = 3;
|
||||
#elif defined(USE_WS2812FX_UART)
|
||||
json["animation_lib"] = "WS2812FX_UART";
|
||||
json["pin"] = 2;
|
||||
#else
|
||||
json["animation_lib"] = "NeoAnimationFX";
|
||||
json["pin"] = "Ignored, check NEOMETHOD";
|
||||
json["animation_lib"] = "WS2812FX";
|
||||
json["pin"] = PIN;
|
||||
#endif
|
||||
json["number_leds"] = NUMLEDS;
|
||||
#ifdef ENABLE_BUTTON
|
||||
|
|
|
|||
|
|
@ -1,97 +1,466 @@
|
|||
<!--
|
||||
FSWebServer - Example Index Page
|
||||
Copyright (c) 2015 Hristo Gochkov. All rights reserved.
|
||||
This file is part of the ESP8266WebServer library for Arduino environment.
|
||||
|
||||
This library is free software; you can redistribute it and/or
|
||||
modify it under the terms of the GNU Lesser General Public
|
||||
License as published by the Free Software Foundation; either
|
||||
version 2.1 of the License, or (at your option) any later version.
|
||||
This library is distributed in the hope that it will be useful,
|
||||
but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
|
||||
Lesser General Public License for more details.
|
||||
You should have received a copy of the GNU Lesser General Public
|
||||
License along with this library; if not, write to the Free Software
|
||||
Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110-1301 USA
|
||||
-->
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
|
||||
<title>ESP Monitor</title>
|
||||
<script type="text/javascript" src="graphs.js"></script>
|
||||
<script type="text/javascript">
|
||||
var heap,temp,digi;
|
||||
var reloadPeriod = 1000;
|
||||
var running = false;
|
||||
<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" />
|
||||
|
||||
function loadValues(){
|
||||
if(!running) return;
|
||||
var xh = new XMLHttpRequest();
|
||||
xh.onreadystatechange = function(){
|
||||
if (xh.readyState == 4){
|
||||
if(xh.status == 200) {
|
||||
var res = JSON.parse(xh.responseText);
|
||||
heap.add(res.heap);
|
||||
temp.add(res.analog);
|
||||
digi.add(res.gpio);
|
||||
if(running) setTimeout(loadValues, reloadPeriod);
|
||||
} else running = false;
|
||||
}
|
||||
};
|
||||
xh.open("GET", "/status", true);
|
||||
xh.send(null);
|
||||
};
|
||||
<!--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"/>
|
||||
<title>McLighting v2</title>
|
||||
</head>
|
||||
|
||||
function run(){
|
||||
if(!running){
|
||||
running = true;
|
||||
loadValues();
|
||||
}
|
||||
}
|
||||
<body>
|
||||
<nav class="blue light-blueXXX lighten-1XXX" role="navigation" id="mc-nav">
|
||||
<div class="nav-wrapper container">
|
||||
<a id="logo-container" href="#" class="brand-logo">Mc Lighting v2</a>
|
||||
|
||||
function onBodyLoad(){
|
||||
var refreshInput = document.getElementById("refresh-rate");
|
||||
refreshInput.value = reloadPeriod;
|
||||
refreshInput.onchange = function(e){
|
||||
var value = parseInt(e.target.value);
|
||||
reloadPeriod = (value > 0)?value:0;
|
||||
e.target.value = reloadPeriod;
|
||||
}
|
||||
var stopButton = document.getElementById("stop-button");
|
||||
stopButton.onclick = function(e){
|
||||
running = false;
|
||||
}
|
||||
var startButton = document.getElementById("start-button");
|
||||
startButton.onclick = function(e){
|
||||
run();
|
||||
}
|
||||
<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>
|
||||
|
||||
// Example with 10K thermistor
|
||||
//function calcThermistor(v) {
|
||||
// var t = Math.log(((10230000 / v) - 10000));
|
||||
// t = (1/(0.001129148+(0.000234125*t)+(0.0000000876741*t*t*t)))-273.15;
|
||||
// return (t>120)?0:Math.round(t*10)/10;
|
||||
//}
|
||||
//temp = createGraph(document.getElementById("analog"), "Temperature", 100, 128, 10, 40, false, "cyan", calcThermistor);
|
||||
<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>
|
||||
|
||||
temp = createGraph(document.getElementById("analog"), "Analog Input", 100, 128, 0, 1023, false, "cyan");
|
||||
heap = createGraph(document.getElementById("heap"), "Current Heap", 100, 125, 0, 30000, true, "orange");
|
||||
digi = createDigiGraph(document.getElementById("digital"), "GPIO", 100, 146, [0, 4, 5, 16], "gold");
|
||||
run();
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body id="index" style="margin:0; padding:0;" onload="onBodyLoad()">
|
||||
<div id="controls" style="display: block; border: 1px solid rgb(68, 68, 68); padding: 5px; margin: 5px; width: 362px; background-color: rgb(238, 238, 238);">
|
||||
<label>Period (ms):</label>
|
||||
<input type="number" id="refresh-rate"/>
|
||||
<input type="button" id="start-button" value="Start"/>
|
||||
<input type="button" id="stop-button" value="Stop"/>
|
||||
</div>
|
||||
<div id="heap"></div>
|
||||
<div id="analog"></div>
|
||||
<div id="digital"></div>
|
||||
</body>
|
||||
<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_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 class="col s12 m6 l6 btn_grid">
|
||||
<a class="btn waves-effect waves-light btn_mode_static blue" name="action" data-mode="off">OFF
|
||||
<i class="material-icons right">send</i>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="col s12 m6 l6 btn_grid">
|
||||
<a class="btn waves-effect waves-light btn_mode_static blue" name="action" data-mode="tv">TV
|
||||
<i class="material-icons right">send</i>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div id="modes">
|
||||
<div class="input-field col s12">
|
||||
Loading animations...
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<footer class="page-footer 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']);
|
||||
|
||||
// Load modes async
|
||||
$.getJSON("http://" + host + "/get_modes", function(data) {
|
||||
//console.log("modes", data);
|
||||
|
||||
var modes_html = "";
|
||||
data.forEach(function(current_mode){
|
||||
if (current_mode.mode !== undefined) {
|
||||
modes_html += '<div class="col s12 m6 l6 btn_grid">';
|
||||
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 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
|
||||
// ******************************************************************
|
||||
// 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);
|
||||
|
||||
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_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>
|
||||
90
Arduino/McLighting/data/index2.htm
Normal file
90
Arduino/McLighting/data/index2.htm
Normal file
File diff suppressed because one or more lines are too long
|
|
@ -1,5 +1,5 @@
|
|||
//#define USE_NEOANIMATIONFX // Uses NeoAnimationFX, PIN is ignored & set to RX/GPIO3 or UART method: D4/GPIO2, see: https://github.com/debsahu/NeoAnimationFX
|
||||
#define USE_WS2812FX // Uses WS2812FX, see: https://github.com/kitesurfer1404/WS2812FX
|
||||
//#define USE_WS2812FX_DMA // Uses PIN is ignored & set to RX/GPIO3 Uses WS2812FX, see: https://github.com/kitesurfer1404/WS2812FX
|
||||
//#define USE_WS2812FX_UART // Uses PIN is ignored & set to D4/GPIO2 Uses WS2812FX, see: https://github.com/kitesurfer1404/WS2812FX
|
||||
|
||||
// Neopixel
|
||||
#define PIN D1 // PIN (14 / D5) where neopixel / WS2811 strip is attached
|
||||
|
|
@ -13,16 +13,13 @@ const char HOSTNAME[] = "McLighting01"; // 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 or ENABLE_AMQTT must be active
|
||||
#define ENABLE_BUTTON // If defined, enable button handling code, see: https://github.com/toblum/McLighting/wiki/Button-control
|
||||
//#define MQTT_HOME_ASSISTANT_SUPPORT // If defined, use AMQTT and select Tools -> IwIP Variant -> Higher Bandwidth
|
||||
#define ENABLE_LEGACY_ANIMATIONS
|
||||
|
||||
#if defined(USE_NEOANIMATIONFX) and defined(USE_WS2812FX)
|
||||
#error "Cant have both NeoAnimationFX and WS2812FX enabled. Choose either one."
|
||||
#endif
|
||||
#if !defined(USE_NEOANIMATIONFX) and !defined(USE_WS2812FX)
|
||||
#error "Need to either use NeoAnimationFX and WS2812FX mode."
|
||||
#if defined(USE_WS2812FX_DMA) and defined(USE_WS2812FX_UART)
|
||||
#error "Cant have both DMA and UART method."
|
||||
#endif
|
||||
#if defined(ENABLE_MQTT) and defined(ENABLE_AMQTT)
|
||||
#error "Cant have both PubSubClient and AsyncMQTT enabled. Choose either one."
|
||||
|
|
|
|||
|
|
@ -411,7 +411,7 @@ void checkpayload(uint8_t * payload, bool mqtt = false, uint8_t num = 0) {
|
|||
#endif
|
||||
#ifdef ENABLE_HOMEASSISTANT
|
||||
stateOn = true;
|
||||
if(!ha_send_data.active()) ha_send_data.once(5, tickerSendState);
|
||||
if(!ha_send_data.active()) ha_send_data.once(5, tickerSendState);
|
||||
#endif
|
||||
#ifdef ENABLE_STATE_SAVE_SPIFFS
|
||||
if(!spiffs_save_state.active()) spiffs_save_state.once(3, tickerSpiffsSaveState);
|
||||
|
|
@ -431,6 +431,7 @@ void checkpayload(uint8_t * payload, bool mqtt = false, uint8_t num = 0) {
|
|||
}
|
||||
DBG_OUTPUT_PORT.printf("Set speed to: [%u]\n", ws2812fx_speed);
|
||||
#ifdef ENABLE_HOMEASSISTANT
|
||||
stateOn = true;
|
||||
if(!ha_send_data.active()) ha_send_data.once(5, tickerSendState);
|
||||
#endif
|
||||
#ifdef ENABLE_MQTT
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
#define SKETCH_VERSION "2.1.5"
|
||||
#define SKETCH_VERSION "2.1.6"
|
||||
|
|
|
|||
|
|
@ -20,4 +20,9 @@
|
|||
*
|
||||
* 2 Oct 2018 v 2.1.5
|
||||
* - Try fixing #224 HA brightness causes reboot
|
||||
*
|
||||
* 5 Nov 2018 v 2.1.6
|
||||
* - Retire NeoAnimationFX
|
||||
* - Use DMA or UART method along with WS2812FX instead
|
||||
* - fix #248
|
||||
*/
|
||||
|
|
|
|||
1
clients/web/McLightingUI
Submodule
1
clients/web/McLightingUI
Submodule
|
|
@ -0,0 +1 @@
|
|||
Subproject commit 20933f32b3bb38fd1262baf113e793b26527c30a
|
||||
|
|
@ -10,6 +10,7 @@
|
|||
|
||||
[platformio]
|
||||
src_dir = ./Arduino/McLighting/
|
||||
data_dir = ./Arduino/McLighting/data/
|
||||
env_default = nodemcuv2
|
||||
description = The ESP8266 based multi-client lighting gadget
|
||||
|
||||
|
|
@ -46,8 +47,7 @@ upload_resetmethod = ${common.upload_resetmethod}
|
|||
lib_deps =
|
||||
WiFiManager@0.14
|
||||
AsyncMqttClient
|
||||
https://github.com/bblanchon/ArduinoJson.git#v6.4.0-beta
|
||||
https://github.com/bblanchon/ArduinoJson.git#v6.5.0-beta
|
||||
WS2812FX
|
||||
https://github.com/debsahu/NeoAnimationFX
|
||||
NeoPixelBus
|
||||
WebSockets
|
||||
|
|
|
|||
Loading…
Reference in a new issue