websocket frontend

Author: zebrajaeger

.gitignore

@@ -1,3 +1,4 @@
+.idea
 .pio
 .vscode
 

README.md

@@ -91,8 +91,10 @@ This thing is to connect a LED-Lamp (with up to 16 channels and 4096 steps resol
 - [ ] Add new Images.
 - 'Homepage' and logo for embedded server, Diode and Poti or something like that.
   - [ ] Logo.
-  - [ ] Webapp backend.
-  - [ ] Webapp frontend.
+  - [X] Webapp backend.
+  - [X] Webapp frontend.
+  - [ ] Connection indicator.
+  - [ ] Documentation (screenshots).
 - Smart Config [Expressiv doc](https://docs.espressif.com/projects/esp-idf/en/latest/api-reference/network/esp_smartconfig.html), [Google](https://lmgtfy.com/?q=esp32+smartconfig), [Other](https://www.switchdoc.com/2018/06/tutorial-esp32-bc24-provisioning-for-wifi/)
 - Art-Net (<https://en.wikipedia.org/wiki/Art-Net>).
   - [X] Implementation.
@@ -102,13 +104,13 @@ This thing is to connect a LED-Lamp (with up to 16 channels and 4096 steps resol
   - [ ] Port configuration.
   - [ ] Send username, password and port on mqtt connection.
 - Timer.
-  - [X] Implement
+  - [X] Implementation.
   - [X] for periodic status updates.
   - [ ] Configuration of Status Update period.
 - [X] ~~~SSL Connections~~~ (possible?) Not possible.
 - Dimming between different light-values with given time.
   - [ ] Linear (simple).
-  - [ ] S-curve or log or something like that what looks nice and smooth.
+  - [ ] S-curve or log or something like that - what looks nice and smooth.
 
 #### 1.5.1.2. Bugs
 
@@ -120,7 +122,7 @@ This thing is to connect a LED-Lamp (with up to 16 channels and 4096 steps resol
   - [X] Analyze.
   - [X] Fix. Hack -> see https://github.com/espressif/arduino-esp32/issues/2501
 - [X] ~~~CSS tuning~~~. No access to the page generators CSS.
-- [ ] Image from an undestroyed ESP Node....
+- [ ] Picture from an undestroyed ESP Node....
 
 ### 1.5.2. Hardware
 

frontend/gulpfile.js

@@ -2,6 +2,7 @@ const {src, dest, series, parallel, watch} = require('gulp');
 
 const fs = require('fs');
 const path = require('path');
+const httpProxy = require('http-proxy');
 
 const g = {
     gzip: require('gulp-gzip'),
@@ -14,7 +15,8 @@ const g = {
     clean: require('gulp-clean'),
     concat: require('gulp-concat'),
     mergeStream: require('merge-stream'),
-    manifest: require('gulp-manifest3')
+    manifest: require('gulp-manifest3'),
+    plumber: require('gulp-plumber')
 // const htmlreplace = require('gulp-html-replace');
 };
 g.sass.compiler = require('node-sass');
@@ -45,6 +47,7 @@ const config = {
 function jsTask() {
     return g.pipeline(
         src(path.posix.join(config.srcDir, '*.js')),
+        g.plumber(),
         g.concat('app.js'),
         dest(config.distDir),
         g.sourcemaps.init(),
@@ -57,6 +60,7 @@ function jsTask() {
 function cssTask() {
     return g.pipeline(
         src(path.posix.join(config.srcDir, '*.scss')),
+        g.plumber(),
         g.sourcemaps.init(),
         g.sass().on('error', g.sass.logError),
         g.concat('app.css'),
@@ -70,6 +74,7 @@ function cssTask() {
 function htmlTask() {
     return g.pipeline(
         src(path.posix.join(config.srcDir, '*.html')),
+        g.plumber(),
         dest(config.distDir),
         g.htmlmin({collapseWhitespace: true}),
         g.gzip({gzipOptions: {level: 9}}),
@@ -80,6 +85,7 @@ function htmlTask() {
 function vendorJsTask() {
     return g.pipeline(
         src(path.posix.join(config.vendorDir, '*.js')),
+        g.plumber(),
         g.sourcemaps.init(),
         g.concat('vendor.js'),
         dest(config.distDir),
@@ -93,6 +99,7 @@ function vendorJsTask() {
 function vendorCssTask() {
     return g.pipeline(
         src(path.posix.join(config.vendorDir, '*.css')),
+        g.plumber(),
         g.sourcemaps.init(),
         g.concat('vendor.css'),
         dest(config.distDir),
@@ -109,18 +116,21 @@ function copyTask() {
             path.posix.join(config.distDir, '*.js.gz'),
             path.posix.join(config.distDir, 'appcache.manifest')
         ]),
+        g.plumber(),
         dest(config.targetDir));
 }
 
 function cleanDistTask() {
     return g.pipeline(
         src(path.posix.join(config.distDir, '**/*'), {read: false, allowEmpty: true}),
+        g.plumber(),
         g.clean());
 }
 
 function cleanTargetTask() {
     return g.pipeline(
         src(config.targetDir, {read: false, allowEmpty: true}),
+        g.plumber(),
         g.clean({force: true}));
 }
 
@@ -157,7 +167,7 @@ function fileListTask(cb) {
             const symbol = relativePath.replace(/\.|\/|\\|-/g, '_');
             const startSymbol = symbol + '_start';
             const endSymbol = symbol + '_end';
-            const mime = util.mimeTypes.lookup(ext);
+            const mime = util.mimeTypes.lookup(rawName);
 
             // file.h
             fileHContent += '// ' + relativePath + '\n';
@@ -167,7 +177,7 @@ function fileListTask(cb) {
             // webserver.h
             webserverHContent += 'webServer_.on("/' + (rawName === 'index.html' ? '' : rawName) + '", [this]() {\n';
             webserverHContent += '  webServer_.sendHeader("Content-Encoding", "gzip");\n';
-            webserverHContent += '  webServer_.send_P(200, "' + mime + '", ' + startSymbol + ', ' + endSymbol + ' - ' + startSymbol + ' - 1);\n';
+            webserverHContent += '  webServer_.send_P(200, "' + mime + '", ' + startSymbol + ', ' + endSymbol + ' - ' + startSymbol + ');\n';
             webserverHContent += '});\n\n';
 
             // plaformio.ini
@@ -195,11 +205,24 @@ function reloadTask(cb) {
 }
 
 function watchTask() {
-    server.init({
+    let options = {
         server: {
             baseDir: config.distDir,
         }
-    });
+    };
+
+    let arguments = require('commander').option('-p --proxy <target>', 'backend').parse(process.argv);
+    console.log("args", arguments.opts());
+
+    if (arguments.proxy) {
+        console.log("Start WS proxy @ ", arguments.proxy);
+        httpProxy.createServer({
+            target: arguments.proxy,
+            ws: true
+        }).listen(81);
+    }
+
+    server.init(options);
     watch(path.posix.join(config.srcDir, '*.html'), series(htmlTask, pwaTask, copyTask, reloadTask));
     watch(path.posix.join(config.srcDir, '*.js'), series(jsTask, pwaTask, copyTask, reloadTask));
     watch(path.posix.join(config.srcDir, '*.scss'), series(cssTask, pwaTask, copyTask, reloadTask));
@@ -219,6 +242,7 @@ exports.vjsc = vendorJsTask;
 exports.copy = copyTask;
 exports.files = fileListTask;
 exports.pwa = pwaTask;
+exports.watch = watchTask;
 exports.build = series(parallel(cleanDistTask, cleanTargetTask), parallel(jsTask, htmlTask, cssTask, vendorCssTask, vendorJsTask), pwaTask, copyTask, fileListTask);
 
 exports.default = exports.build;

frontend/package.json

@@ -5,15 +5,15 @@
   "main": "index.js",
   "scripts": {
     "build": "gulp",
-    "start": "gulp develop"
+    "develop": "gulp develop"
   },
   "author": "Lars Brandt",
   "license": "LGPL-3.0-or-later",
   "dependencies": {
-    "jquery.rsSliderLens": "^1.0.5"
   },
   "devDependencies": {
     "browser-sync": "^2.26.7",
+    "commander": "^4.0.1",
     "del": "^5.1.0",
     "gulp": "4.0.2",
     "gulp-clean": "^0.4.0",
@@ -24,9 +24,11 @@
     "gulp-htmlmin": "^5.0.1",
     "gulp-livereload": "^4.0.2",
     "gulp-manifest3": "^0.1.2",
+    "gulp-plumber": "^1.2.1",
     "gulp-sass": "^4.0.2",
     "gulp-sourcemaps": "^2.6.5",
     "gulp-terser": "^1.2.0",
+    "http-proxy": "^1.18.0",
     "merge-stream": "^2.0.0",
     "mime-types": "^2.1.25",
     "node-sass": "^4.13.0",

frontend/src/0050_utils.js

@@ -0,0 +1,45 @@
+const utils = {};
+
+utils.init = () => {
+    // nothing to do
+};
+
+// thx to https://gist.github.com/jed/982883
+utils.hex = function () {
+    let hex = [];
+
+    for (let i = 0; i < 256; i++) {
+        hex[i] = (i < 16 ? '0' : '') + (i).toString(16);
+    }
+    return hex;
+}();
+
+utils.uuid = () => {
+    let r = crypto.getRandomValues(new Uint8Array(16));
+
+    r[6] = r[6] & 0x0f | 0x40;
+    r[8] = r[8] & 0x3f | 0x80;
+
+    return (
+        utils.hex[r[0]] +
+        utils.hex[r[1]] +
+        utils.hex[r[2]] +
+        utils.hex[r[3]] +
+        "-" +
+        utils.hex[r[4]] +
+        utils.hex[r[5]] +
+        "-" +
+        utils.hex[r[6]] +
+        utils.hex[r[7]] +
+        "-" +
+        utils.hex[r[8]] +
+        utils.hex[r[9]] +
+        "-" +
+        utils.hex[r[10]] +
+        utils.hex[r[11]] +
+        utils.hex[r[12]] +
+        utils.hex[r[13]] +
+        utils.hex[r[14]] +
+        utils.hex[r[15]]
+    );
+};