Merge branch 'master' of https://github.com/NimmLor/esp8266-fastled-webserver
14
README.md
@ -3,7 +3,7 @@ Nanoleaf Web Server
|
|||||||
|
|
||||||
This is a fork of [jasoncoon's esp8266 fastled webserver](https://github.com/jasoncoon/esp8266-fastled-webserver) that was adapted to control the colors of my [DIY-Nanoleaf Replica](https://www.thingiverse.com/thing:3354082).
|
This is a fork of [jasoncoon's esp8266 fastled webserver](https://github.com/jasoncoon/esp8266-fastled-webserver) that was adapted to control the colors of my [DIY-Nanoleaf Replica](https://www.thingiverse.com/thing:3354082).
|
||||||
|
|
||||||
[![Nanoleafs](https://github.com/NimmLor/esp8266-fastled-webserver/blob/master/gallery/rgb_preview2.gif?raw=true)](https://www.thingiverse.com/thing:3354082)
|
[![Nanoleafs](https://github.com/NimmLor/esp8266-nanoleaf-webserver/blob/master/gallery/rgb_preview2.gif?raw=true)](https://www.thingiverse.com/thing:3354082)
|
||||||
|
|
||||||
Hardware
|
Hardware
|
||||||
--------
|
--------
|
||||||
@ -46,18 +46,18 @@ Features
|
|||||||
### Upcoming Features
|
### Upcoming Features
|
||||||
|
|
||||||
- **Node-RED** integration
|
- **Node-RED** integration
|
||||||
- Custom-Alexa skill
|
- Simple Amazon **Alexa** integration
|
||||||
- Nanoleaf voice control
|
- Nanoleaf voice control
|
||||||
- Custom color pattern designer
|
- Custom color pattern designer
|
||||||
- **Node-RED** webinterface to store special patterns persistant
|
- **Node-RED** webinterface to store special patterns persistant
|
||||||
- Controlling multiple nanoleafs at once
|
- Controlling multiple nanoleafs at once
|
||||||
|
- Advanced Amazon **Alexa** integration with custom skill (AWS account required, free)
|
||||||
> these features will be optional and require additional hardware (any linux/windows device that is in the same network)
|
> these features will be optional and require additional hardware (any linux/windows device that is in the same network)
|
||||||
|
|
||||||
Webinterface
|
Webinterface
|
||||||
--------
|
--------
|
||||||
|
|
||||||
![Webinterface](https://github.com/NimmLor/esp8266-fastled-webserver/blob/master/gallery/interface.jpg?raw=true)
|
![Webinterface](https://github.com/NimmLor/esp8266-nanoleaf-webserver/blob/master/gallery/interface.jpg?raw=true)
|
||||||
|
|
||||||
The web app is stored in SPIFFS (on-board flash memory).
|
The web app is stored in SPIFFS (on-board flash memory).
|
||||||
|
|
||||||
@ -70,7 +70,7 @@ The app depends on the following libraries. They must either be downloaded from
|
|||||||
* [FastLED](https://github.com/FastLED/FastLED)
|
* [FastLED](https://github.com/FastLED/FastLED)
|
||||||
* [Arduino WebSockets](https://github.com/Links2004/arduinoWebSockets)
|
* [Arduino WebSockets](https://github.com/Links2004/arduinoWebSockets)
|
||||||
|
|
||||||
Download the app code from GitHub using the green Clone or Download button from [GitHub](https://github.com/NimmLor/esp8266-fastled-webserver) and click Download ZIP. Decompress the ZIP file in your Arduino sketch folder.
|
Download the app code from GitHub using the green Clone or Download button from [GitHub](https://github.com/NimmLor/esp8266-nanoleaf-webserver) and click Download ZIP. Decompress the ZIP file in your Arduino sketch folder. Rename the folder from *esp8266-nanoleaf-webserver-master* to *esp8266-nanoleaf-webserver*
|
||||||
|
|
||||||
The web app needs to be uploaded to the ESP8266's SPIFFS. You can do this within the Arduino IDE after installing the [Arduino ESP8266FS tool](http://esp8266.github.io/Arduino/versions/2.3.0/doc/filesystem.html#uploading-files-to-file-system). An alternative would be to install the [Visual Micro](https://www.visualmicro.com/) plugin for Visual Studio.
|
The web app needs to be uploaded to the ESP8266's SPIFFS. You can do this within the Arduino IDE after installing the [Arduino ESP8266FS tool](http://esp8266.github.io/Arduino/versions/2.3.0/doc/filesystem.html#uploading-files-to-file-system). An alternative would be to install the [Visual Micro](https://www.visualmicro.com/) plugin for Visual Studio.
|
||||||
|
|
||||||
@ -114,13 +114,13 @@ You should also set the milli-amps of your power supply to prevent power overloa
|
|||||||
|
|
||||||
### Without Logic-Level Converter
|
### Without Logic-Level Converter
|
||||||
|
|
||||||
![circuit without Logic level converter](https://github.com/NimmLor/esp8266-fastled-webserver/blob/master/gallery/circuit.jpg?raw=true)
|
![circuit without Logic level converter](https://github.com/NimmLor/esp8266-nanoleaf-webserver/blob/master/gallery/circuit.jpg?raw=true)
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
### With Logic-Level-Converter (required if leds 'glitch')
|
### With Logic-Level-Converter (required if leds 'glitch')
|
||||||
|
|
||||||
![circuit with logic level converter](https://github.com/NimmLor/esp8266-fastled-webserver/blob/master/gallery/circuit_logic_level_Steckplatine.jpg?raw=true)
|
![circuit with logic level converter](https://github.com/NimmLor/esp8266-nanoleaf-webserver/blob/master/gallery/circuit_logic_level_Steckplatine.jpg?raw=true)
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
@ -1,20 +1,27 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html>
|
||||||
|
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
<title>ESP8266 + FastLED by Evil Genius Labs</title>
|
<title>ESP8266 + FastLED by Evil Genius Labs</title>
|
||||||
|
|
||||||
<!-- request CSS from internet CDN -->
|
<!-- request CSS from internet CDN -->
|
||||||
<!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> -->
|
<!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> -->
|
||||||
<!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-minicolors/2.2.4/jquery.minicolors.min.css" integrity="sha256-4wnSkPYU5B4yngAlx/rEb8LdfMah4teUth4AfhGEuaY=" crossorigin="anonymous" /> -->
|
<!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-minicolors/2.2.4/jquery.minicolors.min.css" integrity="sha256-4wnSkPYU5B4yngAlx/rEb8LdfMah4teUth4AfhGEuaY=" crossorigin="anonymous" /> -->
|
||||||
|
|
||||||
<!-- request CSS from the ESP8266 web server -->
|
<!-- request CSS from the ESP8266 web server -->
|
||||||
<link rel="stylesheet" href="css/bootstrap.min.css">
|
<link rel="stylesheet" href="css/bootstrap.min.css">
|
||||||
<link rel="stylesheet" href="css/minicolors.min.css">
|
<link rel="stylesheet" href="css/minicolors.min.css">
|
||||||
|
|
||||||
<link rel="stylesheet" href="css/styles.css">
|
<link rel="stylesheet" href="css/styles.css">
|
||||||
|
|
||||||
<link rel="icon" href="images/atom196.png">
|
<link rel="icon" href="images/atom196.png">
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<nav class="navbar navbar-default navbar-static-top" id="top" role="banner">
|
<nav class="navbar navbar-default navbar-static-top" id="top" role="banner">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="navbar-header">
|
<div class="navbar-header">
|
||||||
@ -29,7 +36,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="collapse navbar-collapse" id="navbar-collapse-1">
|
<div class="collapse navbar-collapse" id="navbar-collapse-1">
|
||||||
<ul class="nav navbar-nav">
|
<ul class="nav navbar-nav">
|
||||||
<li class="active"><a href="/">DIY Nanoleaf control <span class="sr-only">(current)</span></a></li>
|
<li class="active"><a href="/">ESP8266 + FastLED <span class="sr-only">(current)</span></a></li>
|
||||||
<li><a href="/simple.htm" target="_blank" title="Simple Mode">Simple</a></li>
|
<li><a href="/simple.htm" target="_blank" title="Simple Mode">Simple</a></li>
|
||||||
<li><a href="/edit.htm" target="_blank" title="Edit Files">Files</a></li>
|
<li><a href="/edit.htm" target="_blank" title="Edit Files">Files</a></li>
|
||||||
<li><a href="/update" target="_blank" title="Update Firmware">Firmware</a></li>
|
<li><a href="/update" target="_blank" title="Update Firmware">Firmware</a></li>
|
||||||
@ -45,15 +52,22 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
<div id="container" class="container">
|
<div id="container" class="container">
|
||||||
<form class="form-horizontal" id="form"></form>
|
|
||||||
|
<form class="form-horizontal" id="form">
|
||||||
|
</form>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="templates" style="display: none">
|
<div id="templates" style="display: none">
|
||||||
|
|
||||||
<div id="sectionTemplate" class="form-group">
|
<div id="sectionTemplate" class="form-group">
|
||||||
<div class="col-sm-12">
|
<div class="col-sm-12">
|
||||||
<hr style="margin-bottom: 5px;margin-top: 5px;" />
|
<hr style="margin-bottom: 5px;margin-top: 5px;" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="numberTemplate" class="form-group">
|
<div id="numberTemplate" class="form-group">
|
||||||
<label class="col-sm-2 control-label"></label>
|
<label class="col-sm-2 control-label"></label>
|
||||||
<div class="col-sm-2">
|
<div class="col-sm-2">
|
||||||
@ -63,6 +77,7 @@
|
|||||||
<input class="form-control slider" type="range" step="1" min="0" max="255" />
|
<input class="form-control slider" type="range" step="1" min="0" max="255" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="booleanTemplate" class="form-group">
|
<div id="booleanTemplate" class="form-group">
|
||||||
<label class="col-sm-2 control-label"></label>
|
<label class="col-sm-2 control-label"></label>
|
||||||
<div class="col-sm-10">
|
<div class="col-sm-10">
|
||||||
@ -72,6 +87,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="selectTemplate" class="form-group">
|
<div id="selectTemplate" class="form-group">
|
||||||
<label class="col-sm-2 control-label"></label>
|
<label class="col-sm-2 control-label"></label>
|
||||||
<div class="col-sm-8">
|
<div class="col-sm-8">
|
||||||
@ -100,6 +116,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="selectTemplate" class="form-group">
|
<div id="selectTemplate" class="form-group">
|
||||||
<label class="col-sm-2 control-label"></label>
|
<label class="col-sm-2 control-label"></label>
|
||||||
<div class="col-sm-8">
|
<div class="col-sm-8">
|
||||||
@ -118,6 +135,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="colorPaletteTemplate" class="form-group">
|
<div id="colorPaletteTemplate" class="form-group">
|
||||||
<label class="col-sm-2 control-label color-label"></label>
|
<label class="col-sm-2 control-label color-label"></label>
|
||||||
|
|
||||||
@ -165,6 +183,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="colorTemplate">
|
<div id="colorTemplate">
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<!-- <label class="col-sm-2 control-label color-label"></label> -->
|
<!-- <label class="col-sm-2 control-label color-label"></label> -->
|
||||||
@ -200,7 +219,9 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<nav class="navbar navbar-default navbar-fixed-bottom">
|
<nav class="navbar navbar-default navbar-fixed-bottom">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="navbar-header">
|
<div class="navbar-header">
|
||||||
@ -223,16 +244,21 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
<!-- request js from internet CDN -->
|
<!-- request js from internet CDN -->
|
||||||
<!-- <script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script> -->
|
<!-- <script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script> -->
|
||||||
<!-- <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> -->
|
<!-- <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> -->
|
||||||
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-minicolors/2.2.4/jquery.minicolors.min.js" integrity="sha256-XAFQ9dZ6hy8p/GRhU8h/8pMvM1etymiJLZW1CiHV3bQ=" crossorigin="anonymous"></script> -->
|
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-minicolors/2.2.4/jquery.minicolors.min.js" integrity="sha256-XAFQ9dZ6hy8p/GRhU8h/8pMvM1etymiJLZW1CiHV3bQ=" crossorigin="anonymous"></script> -->
|
||||||
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/reconnecting-websocket/1.0.0/reconnecting-websocket.min.js" integrity="sha256-A4JwlcDvqO4JXpvEtvWY1RH8JAEMu5W21wP8GUXLUNs=" crossorigin="anonymous"></script> -->
|
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/reconnecting-websocket/1.0.0/reconnecting-websocket.min.js" integrity="sha256-A4JwlcDvqO4JXpvEtvWY1RH8JAEMu5W21wP8GUXLUNs=" crossorigin="anonymous"></script> -->
|
||||||
|
|
||||||
<!-- request js from the ESP8266 web server -->
|
<!-- request js from the ESP8266 web server -->
|
||||||
<script src="js/jquery-3.1.1.min.js"></script>
|
<script src="js/jquery-3.1.1.min.js"></script>
|
||||||
<script src="js/bootstrap.min.js"></script>
|
<script src="js/bootstrap.min.js"></script>
|
||||||
<script src="js/minicolors.min.js"></script>
|
<script src="js/minicolors.min.js"></script>
|
||||||
<script src="js/r-websocket.min.js"></script>
|
<script src="js/r-websocket.min.js"></script>
|
||||||
|
|
||||||
<script src="js/app.js"></script>
|
<script src="js/app.js"></script>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
|
Before Width: | Height: | Size: 5.8 MiB |
Before Width: | Height: | Size: 5.7 MiB |
Before Width: | Height: | Size: 6.4 MiB |
Before Width: | Height: | Size: 5.5 MiB |
BIN
gallery/electronics_box.jpg
Normal file
After Width: | Height: | Size: 2.9 MiB |
BIN
gallery/electronics_box_level_shift.jpg
Normal file
After Width: | Height: | Size: 3.1 MiB |
Before Width: | Height: | Size: 9.7 MiB |
Before Width: | Height: | Size: 34 KiB |
Before Width: | Height: | Size: 70 KiB |
Before Width: | Height: | Size: 31 KiB |
BIN
web-app.png
Before Width: | Height: | Size: 83 KiB |
BIN
webapp.png
Before Width: | Height: | Size: 65 KiB |