mirror of
https://github.com/s00500/ESPUI.git
synced 2025-07-02 23:30:17 +00:00
Compare commits
14 Commits
Author | SHA1 | Date | |
---|---|---|---|
5ba42e3361 | |||
11422a3b43 | |||
ec0b519fe3 | |||
74d984128b | |||
82adb0f1e1 | |||
6219d4302b | |||
5b2cec59db | |||
c437b11409 | |||
33daac87f1 | |||
3b3dee7e9a | |||
5fb64d4e73 | |||
30a91bdb85 | |||
600e46c457 | |||
2b4f0fde90 |
BIN
docs/Memory ESP32.png
Normal file
BIN
docs/Memory ESP32.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 46 KiB |
BIN
docs/Memory ESP8266.png
Normal file
BIN
docs/Memory ESP8266.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 39 KiB |
BIN
docs/SPIFFS ESP32.png
Normal file
BIN
docs/SPIFFS ESP32.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 47 KiB |
BIN
docs/SPIFFS ESP8266.png
Normal file
BIN
docs/SPIFFS ESP8266.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 46 KiB |
@ -582,9 +582,16 @@
|
||||
display: block;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 4px;
|
||||
height: 27px;
|
||||
border-radius: 13px;
|
||||
background-color: #bebebe;
|
||||
}
|
||||
@media (pointer: fine) {
|
||||
.rkmd-slider input[type="range"] + .slider {
|
||||
height: 4px;
|
||||
border-radius: 0px;
|
||||
}
|
||||
}
|
||||
.rkmd-slider input[type="range"] + .slider .slider-fill {
|
||||
display: block;
|
||||
position: absolute;
|
||||
@ -596,7 +603,7 @@
|
||||
.rkmd-slider input[type="range"] + .slider .slider-handle {
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
top: -5.5px;
|
||||
top: 12px;
|
||||
left: 0%;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
@ -606,6 +613,11 @@
|
||||
user-select: none;
|
||||
z-index: 2;
|
||||
}
|
||||
@media (pointer:fine) {
|
||||
.rkmd-slider input[type="range"] + .slider .slider-handle {
|
||||
top: -5.5px;
|
||||
}
|
||||
}
|
||||
.rkmd-slider input[type="range"]:disabled + .slider {
|
||||
background-color: #b0b0b0 !important;
|
||||
}
|
||||
@ -648,17 +660,24 @@
|
||||
.rkmd-slider.slider-discrete .slider .slider-handle .slider-label {
|
||||
position: absolute;
|
||||
top: -17.5px;
|
||||
left: -2px;
|
||||
left: 4px;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
-webkit-transform-origin: 50% 100%;
|
||||
transform-origin: 50% 100%;
|
||||
border-radius: 50%;
|
||||
-webkit-transform: scale(0.5) rotate(-45deg);
|
||||
transform: scale(0.5) rotate(-45deg);
|
||||
-webkit-transform: scale(1.0) rotate(-45deg);
|
||||
transform: scale(1.0) rotate(-45deg);
|
||||
-webkit-transition: all .2s ease;
|
||||
transition: all .2s ease;
|
||||
}
|
||||
@media (pointer: fine) {
|
||||
.rkmd-slider.slider-discrete .slider .slider-handle .slider-label {
|
||||
left: -2px;
|
||||
-webkit-transform: scale(0.5) rotate(-45deg);
|
||||
transform: scale(0.5) rotate(-45deg);
|
||||
}
|
||||
}
|
||||
|
||||
.rkmd-slider.slider-discrete .slider .slider-handle .slider-label span {
|
||||
position: absolute;
|
||||
@ -666,7 +685,7 @@
|
||||
left: 0px;
|
||||
width: 100%;
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
font-size: 16px;
|
||||
text-align: center;
|
||||
-webkit-transform: rotate(45deg);
|
||||
transform: rotate(45deg);
|
||||
@ -676,7 +695,11 @@
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
@media (pointer:fine) {
|
||||
.rkmd-slider.slider-discrete .slider .slider-handle .slider-label span {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
.rkmd-slider.slider-discrete .slider .slider-handle.is-active {
|
||||
top: 0px;
|
||||
margin-left: -2px;
|
||||
|
2
examples/gui/data/css/style.min.css
vendored
2
examples/gui/data/css/style.min.css
vendored
File diff suppressed because one or more lines are too long
25
examples/gui/data/js/controls.js
vendored
25
examples/gui/data/js/controls.js
vendored
@ -84,6 +84,23 @@ function colorClass(colorId) {
|
||||
|
||||
var websock;
|
||||
|
||||
function restart() {
|
||||
$(document).add('*').off();
|
||||
$("#row").html("");
|
||||
websock.close();
|
||||
start();
|
||||
}
|
||||
|
||||
function conStatusError() {
|
||||
$("#conStatus").removeClass("color-green");
|
||||
$("#conStatus").addClass("color-red");
|
||||
$("#conStatus").text("Error / No Connection (click me to retry)");
|
||||
$("#conStatus").off();
|
||||
$("#conStatus").on({
|
||||
'click': restart
|
||||
});
|
||||
}
|
||||
|
||||
function start() {
|
||||
websock = new WebSocket('ws://' + window.location.hostname + '/ws');
|
||||
websock.onopen = function(evt) {
|
||||
@ -93,15 +110,11 @@ function start() {
|
||||
};
|
||||
websock.onclose = function(evt) {
|
||||
console.log('websock close');
|
||||
$("#conStatus").removeClass("color-green");
|
||||
$("#conStatus").addClass("color-red");
|
||||
$("#conStatus").text("Error / No Connection");
|
||||
conStatusError();
|
||||
};
|
||||
websock.onerror = function(evt) {
|
||||
console.log(evt);
|
||||
$("#conStatus").removeClass("color-green");
|
||||
$("#conStatus").addClass("color-red");
|
||||
$("#conStatus").text("Error / No Connection");
|
||||
conStatusError();
|
||||
};
|
||||
websock.onmessage = function(evt) {
|
||||
console.log(evt);
|
||||
|
41
examples/gui/data/js/controls.min.js
vendored
41
examples/gui/data/js/controls.min.js
vendored
File diff suppressed because one or more lines are too long
@ -39,8 +39,8 @@ function rkmd_rangeSlider(selector) {
|
||||
$(this).addClass('is-active');
|
||||
var moveFu =
|
||||
function(e) {
|
||||
var slider_new_width = e.pageX - slider_offset;
|
||||
|
||||
var pageX = e.pageX || e.changedTouches[0].pageX;
|
||||
var slider_new_width = pageX - slider_offset;
|
||||
if (slider_new_width <= slider_width && !(slider_new_width < '0')) {
|
||||
slider_move(parents, slider_new_width, slider_width, true);
|
||||
}
|
||||
|
11
examples/gui/data/js/slider.min.js
vendored
11
examples/gui/data/js/slider.min.js
vendored
@ -1 +1,10 @@
|
||||
function rkmd_rangeSlider(b){var f,e,c,a,g,d,h;f=$(b);e=f.width();c=f.offset().left;g=f;g.each(function(k,j){a=$(this);a.append(sliderDiscrete_tmplt());d=a.find('input[type="range"]');h=a.find(".slider");slider_fill=h.find(".slider-fill");slider_handle=h.find(".slider-handle");slider_label=h.find(".slider-label");var l=parseInt(d.val());slider_fill.css("width",l+"%");slider_handle.css("left",l+"%");slider_label.find("span").text(l)});f.on("mousedown touchstart",".slider-handle",function(o){if(o.button===2){return false}var m=$(this).parents(".rkmd-slider");var l=m.width();var i=m.offset().left;var k=m.find('input[type="range"]').is(":disabled");if(k===true){return false}$(this).addClass("is-active");var p=function(r){var q=r.pageX-i;if(q<=l&&!(q<"0")){slider_move(m,q,l,true)}};var n=function(q){$(this).off(j);m.find(".is-active").removeClass("is-active")};var j={mousemove:p,touchmove:p,mouseup:n,touchend:n};$(document).on(j)});f.on("mousedown touchstart",".slider",function(p){if(p.button===2){return false}var m=$(this).parents(".rkmd-slider");var l=m.width();var i=m.offset().left;var k=m.find('input[type="range"]').is(":disabled");if(k===true){return false}var o=p.pageX-i;if(o<=l&&!(o<"0")){slider_move(m,o,l,true)}var n=function(q){$(this).off(j)};var j={mouseup:n,touchend:n};$(document).on(j)})}function sliderDiscrete_tmplt(){var a='<div class="slider"><div class="slider-fill"></div><div class="slider-handle"><div class="slider-label"><span>0</span></div></div></div>';return a}function slider_move(g,a,h,e){var i=parseInt(Math.round(a/h*100));var b=g.find(".slider-fill");var c=g.find(".slider-handle");var f=g.find('input[type="range"]');b.css("width",i+"%");c.css({left:i+"%",transition:"none","-webkit-transition":"none","-moz-transition":"none"});f.val(i);if(g.find(".slider-handle span").text()!=i){g.find(".slider-handle span").text(i);var d=g.attr("id").substring(2);if(e){websock.send("slvalue:"+i+":"+d)}}};
|
||||
function rkmd_rangeSlider(selector){var self,slider_width,slider_offset,curnt,sliderDiscrete,range,slider;self=$(selector);slider_width=self.width();slider_offset=self.offset().left;sliderDiscrete=self;sliderDiscrete.each(function(i,v){curnt=$(this);curnt.append(sliderDiscrete_tmplt());range=curnt.find('input[type="range"]');slider=curnt.find('.slider');slider_fill=slider.find('.slider-fill');slider_handle=slider.find('.slider-handle');slider_label=slider.find('.slider-label');var range_val=parseInt(range.val());slider_fill.css('width',range_val+'%');slider_handle.css('left',range_val+'%');slider_label.find('span').text(range_val);});self.on('mousedown touchstart','.slider-handle',function(e){if(e.button===2){return false;}
|
||||
var parents=$(this).parents('.rkmd-slider');var slider_width=parents.width();var slider_offset=parents.offset().left;var check_range=parents.find('input[type="range"]').is(':disabled');if(check_range===true){return false;}
|
||||
$(this).addClass('is-active');var moveFu=function(e){var pageX=e.pageX||e.changedTouches[0].pageX;var slider_new_width=pageX-slider_offset;if(slider_new_width<=slider_width&&!(slider_new_width<'0')){slider_move(parents,slider_new_width,slider_width,true);}};var upFu=function(e){$(this).off(handlers);parents.find('.is-active').removeClass('is-active');};var handlers={mousemove:moveFu,touchmove:moveFu,mouseup:upFu,touchend:upFu};$(document).on(handlers);});self.on('mousedown touchstart','.slider',function(e){if(e.button===2){return false;}
|
||||
var parents=$(this).parents('.rkmd-slider');var slider_width=parents.width();var slider_offset=parents.offset().left;var check_range=parents.find('input[type="range"]').is(':disabled');if(check_range===true){return false;}
|
||||
var slider_new_width=e.pageX-slider_offset;if(slider_new_width<=slider_width&&!(slider_new_width<'0')){slider_move(parents,slider_new_width,slider_width,true);}
|
||||
var upFu=function(e){$(this).off(handlers);};var handlers={mouseup:upFu,touchend:upFu};$(document).on(handlers);});};function sliderDiscrete_tmplt(){var tmplt='<div class="slider">'+
|
||||
'<div class="slider-fill"></div>'+
|
||||
'<div class="slider-handle"><div class="slider-label"><span>0</span></div></div>'+
|
||||
'</div>';return tmplt;}
|
||||
function slider_move(parents,newW,sliderW,send){var slider_new_val=parseInt(Math.round(newW/sliderW*100));var slider_fill=parents.find('.slider-fill');var slider_handle=parents.find('.slider-handle');var range=parents.find('input[type="range"]');slider_fill.css('width',slider_new_val+'%');slider_handle.css({'left':slider_new_val+'%','transition':'none','-webkit-transition':'none','-moz-transition':'none'});range.val(slider_new_val);if(parents.find('.slider-handle span').text()!=slider_new_val){parents.find('.slider-handle span').text(slider_new_val);var number=parents.attr('id').substring(2);if(send)websock.send('slvalue:'+slider_new_val+':'+number);}}
|
@ -22,7 +22,7 @@
|
||||
"authors": "Hristo Gochkov",
|
||||
"frameworks": "arduino"
|
||||
},
|
||||
"version": "1.5.1å",
|
||||
"version": "1.5.4",
|
||||
"frameworks": "arduino",
|
||||
"platforms": "*"
|
||||
}
|
@ -1,5 +1,5 @@
|
||||
name=ESPUI
|
||||
version=1.5.1
|
||||
version=1.5.4
|
||||
author=Lukas Bachschwell
|
||||
maintainer=Lukas Bachschwell <lukas@lbsfilm.at>
|
||||
sentence=ESP32 and ESP8266 Web Interface Library
|
||||
|
@ -85,7 +85,7 @@ void ESPUIClass::list() {
|
||||
}
|
||||
|
||||
void deleteFile(const char *path) {
|
||||
if (debug) Serial.print(SPIFFS.exists(path));
|
||||
if (DEBUG_ESPUI) Serial.print(SPIFFS.exists(path));
|
||||
if (!SPIFFS.exists(path)) {
|
||||
Serial.printf("File: %s does not exist, not deleting\n", path);
|
||||
return;
|
||||
@ -169,7 +169,7 @@ void ESPUIClass::prepareFileSystem() {
|
||||
Serial.println("Done Initializing filesystem :-)");
|
||||
|
||||
#if defined(ESP32)
|
||||
if(debug) listDir("/", 1);
|
||||
if(DEBUG_ESPUI) listDir("/", 1);
|
||||
#endif
|
||||
|
||||
SPIFFS.end();
|
||||
@ -180,28 +180,28 @@ void onWsEvent(AsyncWebSocket *server, AsyncWebSocketClient *client,
|
||||
AwsEventType type, void *arg, uint8_t *data, size_t len) {
|
||||
switch (type) {
|
||||
case WS_EVT_DISCONNECT: {
|
||||
if (debug)
|
||||
if (DEBUG_ESPUI)
|
||||
Serial.printf("Disconnected!\n");
|
||||
break;
|
||||
}
|
||||
case WS_EVT_PONG: {
|
||||
if (debug)
|
||||
if (DEBUG_ESPUI)
|
||||
Serial.printf("Received PONG!\n");
|
||||
break;
|
||||
}
|
||||
case WS_EVT_ERROR: {
|
||||
if (debug)
|
||||
if (DEBUG_ESPUI)
|
||||
Serial.printf("WebSocket Error!\n");
|
||||
break;
|
||||
}
|
||||
case WS_EVT_CONNECT: {
|
||||
if (debug) {
|
||||
if (DEBUG_ESPUI) {
|
||||
Serial.print("Connected: ");
|
||||
Serial.println(client->id());
|
||||
}
|
||||
|
||||
ESPUI.jsonDom(client);
|
||||
if (debug) {
|
||||
if (DEBUG_ESPUI) {
|
||||
Serial.println("JSON Data Sent to Client!");
|
||||
}
|
||||
} break;
|
||||
@ -213,7 +213,7 @@ void onWsEvent(AsyncWebSocket *server, AsyncWebSocketClient *client,
|
||||
|
||||
int id = msg.substring(msg.lastIndexOf(':') + 1).toInt();
|
||||
if (id >= ESPUI.cIndex) {
|
||||
if (debug)
|
||||
if (DEBUG_ESPUI)
|
||||
Serial.println("Maleformated id in websocket message");
|
||||
return;
|
||||
}
|
||||
@ -268,7 +268,7 @@ void onWsEvent(AsyncWebSocket *server, AsyncWebSocketClient *client,
|
||||
|
||||
int ESPUIClass::label(const char *label, int color, String value) {
|
||||
if (labelExists(label)) {
|
||||
if (debug) Serial.println("UI ERROR: Element " + String(label) + " exists, skipping creating element!");
|
||||
if (DEBUG_ESPUI) Serial.println("UI ERROR: Element " + String(label) + " exists, skipping creating element!");
|
||||
return -1;
|
||||
}
|
||||
|
||||
@ -289,7 +289,7 @@ int ESPUIClass::label(const char *label, int color, String value) {
|
||||
|
||||
int ESPUIClass::graph(const char *label, int color) {
|
||||
if (labelExists(label)) {
|
||||
if (debug) Serial.println("UI ERROR: Element " + String(label) + " exists, skipping creating element!");
|
||||
if (DEBUG_ESPUI) Serial.println("UI ERROR: Element " + String(label) + " exists, skipping creating element!");
|
||||
return -1;
|
||||
}
|
||||
|
||||
@ -306,7 +306,7 @@ int ESPUIClass::graph(const char *label, int color) {
|
||||
// TODO: this still needs a range setting
|
||||
int ESPUIClass::slider(const char *label, void (*callBack)(Control, int), int color, String value) {
|
||||
if (labelExists(label)) {
|
||||
if (debug)
|
||||
if (DEBUG_ESPUI)
|
||||
Serial.println("UI ERROR: Element " + String(label) +
|
||||
" exists, skipping creating element!");
|
||||
return -1;
|
||||
@ -330,7 +330,7 @@ int ESPUIClass::slider(const char *label, void (*callBack)(Control, int), int co
|
||||
int ESPUIClass::button(const char *label, void (*callBack)(Control, int),
|
||||
int color, String value) {
|
||||
if (labelExists(label)) {
|
||||
if (debug)
|
||||
if (DEBUG_ESPUI)
|
||||
Serial.println("UI ERROR: Element " + String(label) +
|
||||
" exists, skipping creating element!");
|
||||
return -1;
|
||||
@ -355,7 +355,7 @@ int ESPUIClass::button(const char *label, void (*callBack)(Control, int),
|
||||
|
||||
int ESPUIClass::switcher(const char *label, bool startState, void (*callBack)(Control, int), int color) {
|
||||
if (labelExists(label)) {
|
||||
if (debug)
|
||||
if (DEBUG_ESPUI)
|
||||
Serial.println("UI ERROR: Element " + String(label) +
|
||||
" exists, skipping creating element!");
|
||||
return -1;
|
||||
@ -376,7 +376,7 @@ int ESPUIClass::switcher(const char *label, bool startState, void (*callBack)(Co
|
||||
int ESPUIClass::pad(const char *label, bool center,
|
||||
void (*callBack)(Control, int), int color) {
|
||||
if (labelExists(label)) {
|
||||
if (debug)
|
||||
if (DEBUG_ESPUI)
|
||||
Serial.println("UI ERROR: Element " + String(label) +
|
||||
" exists, skipping creating element!");
|
||||
return -1;
|
||||
@ -399,7 +399,7 @@ int ESPUIClass::pad(const char *label, bool center,
|
||||
// TODO: min and max need to be saved, they also need to be sent to the frontend
|
||||
int ESPUIClass::number(const char *label, void (*callBack)(Control, int), int color, int number, int min, int max) {
|
||||
if (labelExists(label)) {
|
||||
if (debug)
|
||||
if (DEBUG_ESPUI)
|
||||
Serial.println("UI ERROR: Element " + String(label) + " exists, skipping creating element!");
|
||||
return -1;
|
||||
}
|
||||
@ -428,14 +428,14 @@ void ESPUIClass::print(int id, String value) {
|
||||
root.printTo(json);
|
||||
this->ws->textAll(json);
|
||||
} else {
|
||||
if (debug)
|
||||
if (DEBUG_ESPUI)
|
||||
Serial.println(String("Error: ") + String(id) + String(" is no label"));
|
||||
}
|
||||
}
|
||||
|
||||
void ESPUIClass::print(String label, String value) {
|
||||
if (!labelExists(label)) {
|
||||
if (debug)
|
||||
if (DEBUG_ESPUI)
|
||||
Serial.println("UI ERROR: Element does not " + String(label) +
|
||||
" exist, cannot update!");
|
||||
return;
|
||||
@ -455,7 +455,7 @@ void ESPUIClass::updateSlider(int id, int nValue, int clientId) {
|
||||
root.printTo(json);
|
||||
textThem(json, clientId);
|
||||
} else {
|
||||
if (debug)
|
||||
if (DEBUG_ESPUI)
|
||||
Serial.println(String("Error: ") + String(id) + String(" is no slider"));
|
||||
}
|
||||
}
|
||||
@ -472,13 +472,13 @@ void ESPUIClass::updateSwitcher(int id, bool nValue, int clientId) {
|
||||
root.printTo(json);
|
||||
textThem(json, clientId);
|
||||
} else {
|
||||
if (debug) Serial.println(String("Error: ") + String(id) + String(" is no switcher"));
|
||||
if (DEBUG_ESPUI) Serial.println(String("Error: ") + String(id) + String(" is no switcher"));
|
||||
}
|
||||
}
|
||||
|
||||
void ESPUIClass::updateSwitcher(String label, bool nValue, int clientId) {
|
||||
if (!labelExists(label)) {
|
||||
if (debug)
|
||||
if (DEBUG_ESPUI)
|
||||
Serial.println("UI ERROR: Element does not " + String(label) + " exist, cannot update!");
|
||||
return;
|
||||
}
|
||||
@ -497,13 +497,13 @@ void ESPUIClass::updateNumber(int id, int number, int clientId) {
|
||||
root.printTo(json);
|
||||
textThem(json, clientId);
|
||||
} else {
|
||||
if (debug) Serial.println(String("Error: ") + String(id) + String(" is no number"));
|
||||
if (DEBUG_ESPUI) Serial.println(String("Error: ") + String(id) + String(" is no number"));
|
||||
}
|
||||
}
|
||||
|
||||
void ESPUIClass::updateNumber(String label, int number, int clientId) {
|
||||
if (!labelExists(label)) {
|
||||
if (debug) Serial.println("UI ERROR: Element does not " + String(label) + " exist, cannot update!");
|
||||
if (DEBUG_ESPUI) Serial.println("UI ERROR: Element does not " + String(label) + " exist, cannot update!");
|
||||
return;
|
||||
}
|
||||
updateNumber(getIdByLabel(label), number, clientId);
|
||||
@ -601,7 +601,7 @@ void ESPUIClass::beginSPIFFS(const char *_title) {
|
||||
});
|
||||
|
||||
server->begin();
|
||||
if (debug)
|
||||
if (DEBUG_ESPUI)
|
||||
Serial.println("UI Initialized");
|
||||
}
|
||||
|
||||
@ -664,7 +664,7 @@ void ESPUIClass::begin(const char *_title) {
|
||||
});
|
||||
|
||||
server->begin();
|
||||
if (debug)
|
||||
if (DEBUG_ESPUI)
|
||||
Serial.println("UI Initialized");
|
||||
}
|
||||
|
||||
|
@ -1,7 +1,7 @@
|
||||
#ifndef ESPUI_h
|
||||
#define ESPUI_h
|
||||
|
||||
#define debug true
|
||||
#define DEBUG_ESPUI true
|
||||
|
||||
#include "Arduino.h"
|
||||
#include "ArduinoJson.h"
|
||||
|
File diff suppressed because one or more lines are too long
@ -1,6 +1,14 @@
|
||||
const char JS_SLIDER[] PROGMEM = R"=====(
|
||||
function rkmd_rangeSlider(b){var f,e,c,a,g,d,h;f=$(b);e=f.width();c=f.offset().left;g=f;g.each(function(k,j){a=$(this);a.append(sliderDiscrete_tmplt());d=a.find('input[type="range"]');h=a.find(".slider");slider_fill=h.find(".slider-fill");slider_handle=h.find(".slider-handle");slider_label=h.find(".slider-label");var l=parseInt(d.val());slider_fill.css("width",l+"%");slider_handle.css("left",l+"%");slider_label.find("span").text(l)});f.on("mousedown touchstart",".slider-handle",function(o){if(o.button===2){return false}var m=$(this).parents(".rkmd-slider");var l=m.width();var i=m.offset().left;var k=m.find('input[type="range"]').is(":disabled");if(k===true){return false}$(this).addClass("is-active");var p=function(r){var q=r.pageX-i;if(q<=l&&!(q<"0")){slider_move(m,q,l,true)}};var n=function(q){$(this).off(j);m.find(".is-active").removeClass("is-active")};var j={mousemove:p,touchmove:p,mouseup:n,touchend:n};$(document).on(j)});f.on("mousedown touchstart",".slider",function(p){if(p.button===2){return false}var m=$(this).parents(".rkmd-slider");var l=m.width();var i=m.offset().left;var k=m.find('input[type="range"]').is(":disabled");if(k===true){return false}var o=p.pageX-i;if(o<=l&&!(o<"0")){slider_move(m,o,l,true)}var n=function(q){$(this).off(j)};var j={mouseup:n,touchend:n};$(document).on(j)})}function sliderDiscrete_tmplt(){var a='<div class="slider"><div class="slider-fill"></div><div class="slider-handle"><div class="slider-label"><span>0</span></div></div></div>';return a}function slider_move(g,a,h,e){var i=parseInt(Math.round(a/h*100));var b=g.find(".slider-fill");var c=g.find(".slider-handle");var f=g.find('input[type="range"]');b.css("width",i+"%");c.css({left:i+"%",transition:"none","-webkit-transition":"none","-moz-transition":"none"});f.val(i);if(g.find(".slider-handle span").text()!=i){g.find(".slider-handle span").text(i);var d=g.attr("id").substring(2);if(e){websock.send("slvalue:"+i+":"+d)}}};
|
||||
function rkmd_rangeSlider(selector){var self,slider_width,slider_offset,curnt,sliderDiscrete,range,slider;self=$(selector);slider_width=self.width();slider_offset=self.offset().left;sliderDiscrete=self;sliderDiscrete.each(function(i,v){curnt=$(this);curnt.append(sliderDiscrete_tmplt());range=curnt.find('input[type="range"]');slider=curnt.find('.slider');slider_fill=slider.find('.slider-fill');slider_handle=slider.find('.slider-handle');slider_label=slider.find('.slider-label');var range_val=parseInt(range.val());slider_fill.css('width',range_val+'%');slider_handle.css('left',range_val+'%');slider_label.find('span').text(range_val);});self.on('mousedown touchstart','.slider-handle',function(e){if(e.button===2){return false;}
|
||||
var parents=$(this).parents('.rkmd-slider');var slider_width=parents.width();var slider_offset=parents.offset().left;var check_range=parents.find('input[type="range"]').is(':disabled');if(check_range===true){return false;}
|
||||
$(this).addClass('is-active');var moveFu=function(e){var pageX=e.pageX||e.changedTouches[0].pageX;var slider_new_width=pageX-slider_offset;if(slider_new_width<=slider_width&&!(slider_new_width<'0')){slider_move(parents,slider_new_width,slider_width,true);}};var upFu=function(e){$(this).off(handlers);parents.find('.is-active').removeClass('is-active');};var handlers={mousemove:moveFu,touchmove:moveFu,mouseup:upFu,touchend:upFu};$(document).on(handlers);});self.on('mousedown touchstart','.slider',function(e){if(e.button===2){return false;}
|
||||
var parents=$(this).parents('.rkmd-slider');var slider_width=parents.width();var slider_offset=parents.offset().left;var check_range=parents.find('input[type="range"]').is(':disabled');if(check_range===true){return false;}
|
||||
var slider_new_width=e.pageX-slider_offset;if(slider_new_width<=slider_width&&!(slider_new_width<'0')){slider_move(parents,slider_new_width,slider_width,true);}
|
||||
var upFu=function(e){$(this).off(handlers);};var handlers={mouseup:upFu,touchend:upFu};$(document).on(handlers);});};function sliderDiscrete_tmplt(){var tmplt='<div class="slider">'+
|
||||
'<div class="slider-fill"></div>'+
|
||||
'<div class="slider-handle"><div class="slider-label"><span>0</span></div></div>'+
|
||||
'</div>';return tmplt;}
|
||||
function slider_move(parents,newW,sliderW,send){var slider_new_val=parseInt(Math.round(newW/sliderW*100));var slider_fill=parents.find('.slider-fill');var slider_handle=parents.find('.slider-handle');var range=parents.find('input[type="range"]');slider_fill.css('width',slider_new_val+'%');slider_handle.css({'left':slider_new_val+'%','transition':'none','-webkit-transition':'none','-moz-transition':'none'});range.val(slider_new_val);if(parents.find('.slider-handle span').text()!=slider_new_val){parents.find('.slider-handle span').text(slider_new_val);var number=parents.attr('id').substring(2);if(send)websock.send('slvalue:'+slider_new_val+':'+number);}}
|
||||
)=====";
|
||||
|
||||
|
||||
const uint8_t JS_SLIDER_GZIP[] PROGMEM = { 31,139,8,0,0,0,0,0,0,3,213,85,203,146,211,48,16,252,149,172,106,33,22,235,104,195,30,227,40,23,184,112,224,196,133,42,138,218,146,45,217,86,34,75,142,37,103,1,87,254,157,145,108,231,13,236,149,139,31,51,147,86,207,244,184,147,183,58,115,210,232,73,179,169,248,115,195,116,33,190,40,201,69,19,165,184,219,177,102,146,199,34,206,98,22,23,49,143,203,36,167,247,144,72,4,205,201,139,228,174,140,112,146,193,179,201,115,43,92,132,137,18,185,75,10,154,39,5,17,44,43,163,124,128,143,54,241,26,119,12,126,237,74,105,113,194,8,171,107,161,121,100,195,97,31,165,205,26,225,196,179,171,106,5,56,56,225,148,145,92,66,193,84,234,186,117,223,220,207,90,80,20,248,161,239,83,156,148,99,30,145,30,2,225,164,127,120,206,165,82,180,60,207,206,124,240,88,82,50,205,149,184,42,234,195,199,50,197,82,113,13,21,162,80,228,167,163,104,205,26,43,62,105,23,113,178,99,202,83,63,161,65,50,107,35,20,38,133,98,245,128,222,92,82,232,11,252,212,46,243,225,148,225,100,91,51,141,48,113,226,135,139,20,222,227,4,38,174,35,84,153,214,10,110,94,244,196,153,54,43,173,99,13,192,92,118,19,31,52,48,184,147,121,100,72,218,58,103,52,165,244,9,119,48,245,182,209,147,156,41,43,246,190,163,106,212,136,64,103,66,59,160,71,252,110,204,14,99,238,251,174,14,11,224,223,37,188,159,47,129,143,110,32,250,23,17,137,4,240,5,151,150,165,74,112,64,6,118,27,160,229,154,86,92,48,27,57,49,206,63,40,230,103,38,237,140,65,91,59,49,48,170,233,161,207,166,223,220,45,109,160,135,66,124,157,73,143,188,93,82,245,246,237,29,220,209,28,97,220,13,115,174,204,78,68,85,188,141,85,28,206,221,239,3,156,62,194,109,113,55,30,15,45,70,107,156,84,227,70,156,144,32,141,240,80,215,236,122,188,53,237,130,92,190,102,81,199,65,176,225,57,196,219,122,161,251,40,124,21,11,189,79,238,35,110,178,182,2,5,176,23,123,253,90,217,79,244,174,131,222,245,255,168,183,71,51,180,62,213,207,12,250,153,155,250,153,131,126,255,82,239,92,143,215,204,125,63,130,77,110,187,85,216,54,70,167,75,46,119,147,204,47,0,69,195,244,86,215,177,222,138,86,203,71,200,220,74,15,159,237,173,84,239,60,171,165,247,131,213,124,249,24,238,3,208,201,117,154,12,179,100,151,204,251,105,21,96,231,101,44,122,222,242,232,96,159,153,43,73,99,90,16,144,61,150,239,222,207,231,184,87,59,165,197,109,59,245,201,236,42,121,176,209,240,255,49,166,255,96,228,233,153,71,202,222,3,179,16,236,252,98,45,66,8,180,101,218,74,223,202,2,105,163,193,214,208,236,69,164,27,233,102,199,20,58,230,42,243,235,70,34,124,67,222,166,101,88,190,219,196,39,167,118,139,239,168,196,221,43,10,101,223,46,135,118,153,115,13,88,0,108,56,177,109,106,93,35,117,17,61,133,19,97,232,192,218,154,108,67,172,8,214,174,128,78,43,22,232,1,250,132,43,7,3,218,39,191,1,31,225,29,112,150,7,0,0 };
|
||||
const uint8_t JS_SLIDER_GZIP[865] PROGMEM = { 31,139,8,0,79,67,211,91,2,255,237,86,207,111,155,48,20,190,247,175,72,163,174,134,149,184,89,143,33,238,101,211,164,29,118,218,164,77,170,170,200,1,83,172,16,131,176,73,182,209,252,239,123,254,1,1,66,170,110,167,29,118,194,246,251,252,252,222,247,62,243,156,84,34,82,60,23,147,114,179,141,87,37,21,79,236,75,198,99,86,122,146,101,44,82,121,233,215,59,90,78,96,150,4,210,88,86,123,30,171,180,153,228,73,34,153,10,162,170,20,202,173,125,224,50,42,153,98,129,113,231,22,67,237,129,92,29,221,134,93,111,68,91,177,25,122,173,197,186,182,38,59,246,124,156,177,68,133,253,115,12,98,176,134,25,141,82,47,113,217,121,60,216,249,181,137,17,66,80,41,151,126,104,102,152,22,5,19,177,215,223,188,82,219,34,131,195,252,208,100,64,44,52,225,0,68,92,20,149,122,80,63,11,70,166,198,58,125,68,77,196,61,32,182,107,173,113,149,240,44,35,118,220,135,204,180,229,136,75,169,136,51,54,142,180,182,35,54,163,107,118,198,169,49,1,82,87,207,4,186,218,209,140,20,180,148,236,147,80,158,89,194,176,164,211,236,68,136,35,41,61,100,42,129,130,118,223,13,122,51,12,208,2,117,57,206,225,76,4,46,42,89,80,129,124,172,216,15,119,180,70,251,225,193,15,109,121,133,135,182,121,37,89,156,239,197,68,229,85,148,74,69,75,112,61,76,61,104,107,202,252,154,39,30,195,235,74,169,92,16,66,238,252,26,170,7,37,152,36,52,147,44,60,92,232,220,33,99,38,148,108,234,142,221,28,136,210,146,159,181,85,50,42,239,74,210,1,91,85,118,0,78,153,13,162,47,78,141,139,82,22,109,236,117,106,81,47,232,7,115,136,103,17,115,73,215,25,139,33,24,72,172,235,130,16,85,86,236,36,189,38,37,26,199,239,51,170,203,193,229,140,2,59,59,230,18,218,230,59,246,177,34,93,206,44,39,79,236,59,97,216,124,159,159,161,150,169,62,39,254,170,137,103,242,97,254,104,77,221,156,5,219,183,196,128,105,214,163,66,7,60,196,45,73,151,206,235,235,203,83,4,154,35,223,175,221,178,142,213,115,100,5,67,104,255,223,99,216,8,15,7,19,95,85,12,50,108,104,129,208,60,171,154,18,238,123,191,12,184,195,20,46,153,62,123,132,66,123,64,227,131,212,70,162,26,187,176,196,6,70,169,221,5,131,168,138,133,14,202,90,225,247,98,102,135,240,202,139,243,168,218,66,20,190,22,252,49,180,215,223,130,255,242,31,164,119,34,78,39,234,127,65,158,23,127,160,206,81,165,253,133,142,14,97,115,214,100,188,167,153,251,111,198,4,45,99,190,155,68,90,246,100,106,209,211,123,116,115,49,178,110,90,212,244,126,121,11,150,115,16,27,7,128,78,77,166,19,128,69,119,129,251,249,242,214,124,173,179,142,75,59,10,93,149,77,140,64,226,32,159,126,29,160,0,223,28,247,240,5,138,220,107,229,88,158,94,211,251,76,85,138,203,188,2,37,234,157,183,110,231,219,119,243,185,223,83,184,233,213,131,63,70,191,89,119,192,174,97,143,195,219,142,221,246,225,215,220,136,179,29,185,159,217,185,182,92,219,190,188,56,69,7,72,193,33,146,107,70,209,2,137,92,64,75,69,179,61,91,111,184,154,141,218,182,249,175,17,195,193,61,142,204,19,162,127,142,185,191,47,177,49,233,190,6,252,75,50,216,94,191,122,239,240,92,205,177,168,182,107,120,138,53,62,168,82,37,144,12,127,21,44,171,181,84,37,23,79,222,157,9,209,232,5,50,151,121,180,193,122,2,207,148,12,252,84,108,129,110,134,212,193,146,245,172,251,206,111,101,146,232,206,54,11,0,0 };
|
||||
|
File diff suppressed because one or more lines are too long
107
tools/prepare_static_ui_sources.py
Executable file
107
tools/prepare_static_ui_sources.py
Executable file
@ -0,0 +1,107 @@
|
||||
#!/usr/bin/env python3
|
||||
|
||||
from jsmin import jsmin as jsminify
|
||||
from htmlmin import minify as htmlminify
|
||||
from csscompressor import compress as cssminify
|
||||
import gzip
|
||||
import sys
|
||||
import os.path
|
||||
import argparse
|
||||
import re
|
||||
from glob import glob
|
||||
|
||||
TARGET_TEMPLATE = '''const char {constant}[] PROGMEM = R"=====(
|
||||
{minidata}
|
||||
)=====";
|
||||
|
||||
const uint8_t {constant}_GZIP[{gziplen}] PROGMEM = {{ {gzipdata} }};
|
||||
'''
|
||||
|
||||
def parse_arguments(args=None):
|
||||
parser = argparse.ArgumentParser(
|
||||
description="Prepares ESPUI header files by minifying and gzipping JS and CSS source files.")
|
||||
parser.add_argument("--sources", "-s", dest="sources", default="../examples/gui/data",
|
||||
help="Sources directory containing CSS or JS files")
|
||||
parser.add_argument("--target", "-t", dest="target", default="../src",
|
||||
help="Target directory containing header files")
|
||||
parser.add_argument("--nostoremini", "-m", action="store_false", dest="storemini",
|
||||
help="Store intermediate minified files")
|
||||
args = parser.parse_args(args)
|
||||
return args
|
||||
|
||||
def get_context(infile, outfile):
|
||||
infile = os.path.realpath(infile)
|
||||
dir, name, type = (os.path.basename(os.path.dirname(infile)), os.path.basename(infile).split(os.path.extsep)[0], os.path.basename(infile).split(os.path.extsep)[-1] )
|
||||
type = type.strip(".")
|
||||
if dir == type:
|
||||
dir = os.path.basename(os.path.dirname(os.path.dirname(infile)))
|
||||
if type == "htm":
|
||||
type = 'html'
|
||||
name = os.path.basename(name)
|
||||
indir = os.path.dirname(infile)
|
||||
if os.path.isdir(outfile):
|
||||
outdir = os.path.realpath(outfile)
|
||||
outfilename = "%s%s%s.h" % (dir, name.capitalize(), type.upper())
|
||||
outfile = os.path.realpath(os.path.sep.join([outdir, outfilename]))
|
||||
else:
|
||||
outfile = os.path.realpath(outfile)
|
||||
outdir = os.path.dirname(outfile)
|
||||
outfilename = os.path.basename(outfile)
|
||||
minifile = re.sub('\.([^.]+)$', '.min.\\1', infile) if not ".min." in infile else infile
|
||||
constant = '%s_%s' % (type.upper(), name.upper())
|
||||
return locals()
|
||||
|
||||
def perform_gzip(c):
|
||||
compressed = gzip.compress(bytes(c['minidata'], 'utf-8'))
|
||||
c['gzipdata'] = ','.join([ str(b) for b in compressed ])
|
||||
c['gziplen'] = len(compressed)
|
||||
print(" GZIP data length: %s" % c['gziplen'])
|
||||
return c
|
||||
|
||||
def perform_minify(c):
|
||||
with open(c['infile']) as infile:
|
||||
minifier = cssminify if c['type'] == 'css' else jsminify if c['type'] == 'js' else htmlminify
|
||||
print(" Using %s minifier" % c['type'])
|
||||
c['minidata'] = minifier(infile.read())
|
||||
return perform_gzip(c)
|
||||
|
||||
def process_file(infile, outdir, storemini=True):
|
||||
print("Processing file %s" % infile)
|
||||
c = get_context(infile, outdir)
|
||||
c = perform_minify(c)
|
||||
if storemini:
|
||||
if c['infile'] == c['minifile']:
|
||||
print(" Original file is already minified, refusing to overwrite it")
|
||||
else:
|
||||
print(" Writing minified file %s" % c['minifile'])
|
||||
with open(c['minifile'], 'w+') as minifile:
|
||||
minifile.write(c['minidata'])
|
||||
with open(c['outfile'], 'w+') as outfile:
|
||||
print(" Using C constant names %s and %s_GZIP" % (c['constant'], c['constant']))
|
||||
print(" Writing C header file %s" % c['outfile'])
|
||||
outfile.write(TARGET_TEMPLATE.format(**c))
|
||||
|
||||
def filenamefilter(pattern, strings):
|
||||
return filter(re.compile(pattern).search, strings)
|
||||
|
||||
def process_dir(sourcedir, outdir, recursive=True, storemini=True):
|
||||
pattern = r'/*\.(css|js|htm|html)$'
|
||||
files = glob(sourcedir + "/**/*", recursive=True)+glob(sourcedir + "/*") if recursive else glob(sourcedir + "/*")
|
||||
files = filenamefilter(pattern, files)
|
||||
for f in set(files):
|
||||
if not '.min.' in f:
|
||||
process_file(f, outdir, storemini)
|
||||
elif not os.path.isfile(f.replace(".min.", ".")):
|
||||
process_file(f, outdir, storemini)
|
||||
|
||||
def main(args):
|
||||
if not args.sources is None:
|
||||
if os.path.isfile(args.sources):
|
||||
print("Source %s is a file, will process one file only." % args.sources)
|
||||
process_file(args.sources, args.target, storemini = args.storemini)
|
||||
elif os.path.isdir(args.sources):
|
||||
print("Source %s is a directory, searching for files recursively..." % args.sources)
|
||||
process_dir(args.sources, args.target, recursive = True, storemini = args.storemini)
|
||||
|
||||
if __name__ == "__main__" and "get_ipython" not in dir():
|
||||
main(parse_arguments())
|
Reference in New Issue
Block a user