mirror of
https://github.com/s00500/ESPUI.git
synced 2024-11-21 22:50:55 +00:00
remove color dark, version bump
This commit is contained in:
parent
4f421c84d5
commit
2fae44f387
273
examples/gui/data/js/controls.js
vendored
273
examples/gui/data/js/controls.js
vendored
@ -67,10 +67,7 @@ function colorClass(colorId) {
|
|||||||
return "alizarin";
|
return "alizarin";
|
||||||
|
|
||||||
case C_NONE:
|
case C_NONE:
|
||||||
return "";
|
|
||||||
case C_DARK:
|
|
||||||
return "dark";
|
return "dark";
|
||||||
|
|
||||||
default:
|
default:
|
||||||
return "";
|
return "";
|
||||||
}
|
}
|
||||||
@ -108,24 +105,24 @@ function handleVisibilityChange() {
|
|||||||
function start() {
|
function start() {
|
||||||
document.addEventListener("visibilitychange", handleVisibilityChange, false);
|
document.addEventListener("visibilitychange", handleVisibilityChange, false);
|
||||||
websock = new WebSocket("ws://" + window.location.hostname + "/ws");
|
websock = new WebSocket("ws://" + window.location.hostname + "/ws");
|
||||||
websock.onopen = function (evt) {
|
websock.onopen = function(evt) {
|
||||||
console.log("websock open");
|
console.log("websock open");
|
||||||
$("#conStatus").addClass("color-green");
|
$("#conStatus").addClass("color-green");
|
||||||
$("#conStatus").text("Connected");
|
$("#conStatus").text("Connected");
|
||||||
websockConnected = true;
|
websockConnected = true;
|
||||||
};
|
};
|
||||||
|
|
||||||
websock.onclose = function (evt) {
|
websock.onclose = function(evt) {
|
||||||
console.log("websock close");
|
console.log("websock close");
|
||||||
conStatusError();
|
conStatusError();
|
||||||
};
|
};
|
||||||
|
|
||||||
websock.onerror = function (evt) {
|
websock.onerror = function(evt) {
|
||||||
console.log(evt);
|
console.log(evt);
|
||||||
conStatusError();
|
conStatusError();
|
||||||
};
|
};
|
||||||
|
|
||||||
var handleEvent = function (evt) {
|
var handleEvent = function(evt) {
|
||||||
//console.log(evt);
|
//console.log(evt);
|
||||||
var data = JSON.parse(evt.data);
|
var data = JSON.parse(evt.data);
|
||||||
var e = document.body;
|
var e = document.body;
|
||||||
@ -146,42 +143,42 @@ function start() {
|
|||||||
case UI_LABEL:
|
case UI_LABEL:
|
||||||
$("#row").append(
|
$("#row").append(
|
||||||
"<div class='two columns card tcenter " +
|
"<div class='two columns card tcenter " +
|
||||||
colorClass(data.color) +
|
colorClass(data.color) +
|
||||||
"'><h5 id='" +
|
"'><h5 id='" +
|
||||||
data.id +
|
data.id +
|
||||||
"'>" +
|
"'>" +
|
||||||
data.label +
|
data.label +
|
||||||
"</h5><hr /><span id='l" +
|
"</h5><hr /><span id='l" +
|
||||||
data.id +
|
data.id +
|
||||||
"' class='label label-wrap'>" +
|
"' class='label label-wrap'>" +
|
||||||
data.value +
|
data.value +
|
||||||
"</span></div>"
|
"</span></div>"
|
||||||
);
|
);
|
||||||
break;
|
break;
|
||||||
case UI_BUTTON:
|
case UI_BUTTON:
|
||||||
$("#row").append(
|
$("#row").append(
|
||||||
"<div class='one columns card tcenter " +
|
"<div class='one columns card tcenter " +
|
||||||
colorClass(data.color) +
|
colorClass(data.color) +
|
||||||
"'><h5>" +
|
"'><h5>" +
|
||||||
data.label +
|
data.label +
|
||||||
"</h5><hr/><button onmousedown='buttonclick(" +
|
"</h5><hr/><button onmousedown='buttonclick(" +
|
||||||
data.id +
|
data.id +
|
||||||
", true)' onmouseup='buttonclick(" +
|
", true)' onmouseup='buttonclick(" +
|
||||||
data.id +
|
data.id +
|
||||||
", false)' id='" +
|
", false)' id='" +
|
||||||
data.id +
|
data.id +
|
||||||
"'>" +
|
"'>" +
|
||||||
data.value +
|
data.value +
|
||||||
"</button></div>"
|
"</button></div>"
|
||||||
);
|
);
|
||||||
$("#" + data.id).on({
|
$("#" + data.id).on({
|
||||||
touchstart: function (e) {
|
touchstart: function(e) {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
buttonclick(data.id, true);
|
buttonclick(data.id, true);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
$("#" + data.id).on({
|
$("#" + data.id).on({
|
||||||
touchend: function (e) {
|
touchend: function(e) {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
buttonclick(data.id, false);
|
buttonclick(data.id, false);
|
||||||
}
|
}
|
||||||
@ -206,16 +203,16 @@ function start() {
|
|||||||
}
|
}
|
||||||
$("#row").append(
|
$("#row").append(
|
||||||
"<div id='" +
|
"<div id='" +
|
||||||
data.id +
|
data.id +
|
||||||
"' class='one columns card tcenter " +
|
"' class='one columns card tcenter " +
|
||||||
colorClass(data.color) +
|
colorClass(data.color) +
|
||||||
"'><h5>" +
|
"'><h5>" +
|
||||||
data.label +
|
data.label +
|
||||||
"</h5><hr/>" +
|
"</h5><hr/>" +
|
||||||
label +
|
label +
|
||||||
input +
|
input +
|
||||||
"</label>" +
|
"</label>" +
|
||||||
"</div>"
|
"</div>"
|
||||||
);
|
);
|
||||||
break;
|
break;
|
||||||
case UI_CPAD:
|
case UI_CPAD:
|
||||||
@ -227,106 +224,106 @@ function start() {
|
|||||||
", false)' href='#' id='pc" +
|
", false)' href='#' id='pc" +
|
||||||
data.id +
|
data.id +
|
||||||
"'>OK</a>";
|
"'>OK</a>";
|
||||||
//NO BREAK
|
//NO BREAK
|
||||||
case UI_PAD:
|
case UI_PAD:
|
||||||
$("#row").append(
|
$("#row").append(
|
||||||
"<div class='two columns card tcenter " +
|
"<div class='two columns card tcenter " +
|
||||||
colorClass(data.color) +
|
colorClass(data.color) +
|
||||||
"'><h5>" +
|
"'><h5>" +
|
||||||
data.label +
|
data.label +
|
||||||
"</h5><hr/>" +
|
"</h5><hr/>" +
|
||||||
"<nav class='control'>" +
|
"<nav class='control'>" +
|
||||||
"<ul>" +
|
"<ul>" +
|
||||||
"<li><a onmousedown='padclick(FOR, " +
|
"<li><a onmousedown='padclick(FOR, " +
|
||||||
data.id +
|
data.id +
|
||||||
", true)' onmouseup='padclick(FOR, " +
|
", true)' onmouseup='padclick(FOR, " +
|
||||||
data.id +
|
data.id +
|
||||||
", false)' href='#' id='pf" +
|
", false)' href='#' id='pf" +
|
||||||
data.id +
|
data.id +
|
||||||
"'>▲</a></li>" +
|
"'>▲</a></li>" +
|
||||||
"<li><a onmousedown='padclick(RIGHT, " +
|
"<li><a onmousedown='padclick(RIGHT, " +
|
||||||
data.id +
|
data.id +
|
||||||
", true)' onmouseup='padclick(RIGHT, " +
|
", true)' onmouseup='padclick(RIGHT, " +
|
||||||
data.id +
|
data.id +
|
||||||
", false)' href='#' id='pr" +
|
", false)' href='#' id='pr" +
|
||||||
data.id +
|
data.id +
|
||||||
"'>▲</a></li>" +
|
"'>▲</a></li>" +
|
||||||
"<li><a onmousedown='padclick(LEFT, " +
|
"<li><a onmousedown='padclick(LEFT, " +
|
||||||
data.id +
|
data.id +
|
||||||
", true)' onmouseup='padclick(LEFT, " +
|
", true)' onmouseup='padclick(LEFT, " +
|
||||||
data.id +
|
data.id +
|
||||||
", false)' href='#' id='pl" +
|
", false)' href='#' id='pl" +
|
||||||
data.id +
|
data.id +
|
||||||
"'>▲</a></li>" +
|
"'>▲</a></li>" +
|
||||||
"<li><a onmousedown='padclick(BACK, " +
|
"<li><a onmousedown='padclick(BACK, " +
|
||||||
data.id +
|
data.id +
|
||||||
", true)' onmouseup='padclick(BACK, " +
|
", true)' onmouseup='padclick(BACK, " +
|
||||||
data.id +
|
data.id +
|
||||||
", false)' href='#' id='pb" +
|
", false)' href='#' id='pb" +
|
||||||
data.id +
|
data.id +
|
||||||
"'>▲</a></li>" +
|
"'>▲</a></li>" +
|
||||||
"</ul>" +
|
"</ul>" +
|
||||||
center +
|
center +
|
||||||
"</nav>" +
|
"</nav>" +
|
||||||
"</div>"
|
"</div>"
|
||||||
);
|
);
|
||||||
|
|
||||||
$("#pf" + data.id).on({
|
$("#pf" + data.id).on({
|
||||||
touchstart: function (e) {
|
touchstart: function(e) {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
padclick(FOR, data.id, true);
|
padclick(FOR, data.id, true);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
$("#pf" + data.id).on({
|
$("#pf" + data.id).on({
|
||||||
touchend: function (e) {
|
touchend: function(e) {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
padclick(FOR, data.id, false);
|
padclick(FOR, data.id, false);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
$("#pl" + data.id).on({
|
$("#pl" + data.id).on({
|
||||||
touchstart: function (e) {
|
touchstart: function(e) {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
padclick(LEFT, data.id, true);
|
padclick(LEFT, data.id, true);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
$("#pl" + data.id).on({
|
$("#pl" + data.id).on({
|
||||||
touchend: function (e) {
|
touchend: function(e) {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
padclick(LEFT, data.id, false);
|
padclick(LEFT, data.id, false);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
$("#pr" + data.id).on({
|
$("#pr" + data.id).on({
|
||||||
touchstart: function (e) {
|
touchstart: function(e) {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
padclick(RIGHT, data.id, true);
|
padclick(RIGHT, data.id, true);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
$("#pr" + data.id).on({
|
$("#pr" + data.id).on({
|
||||||
touchend: function (e) {
|
touchend: function(e) {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
padclick(RIGHT, data.id, false);
|
padclick(RIGHT, data.id, false);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
$("#pb" + data.id).on({
|
$("#pb" + data.id).on({
|
||||||
touchstart: function (e) {
|
touchstart: function(e) {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
padclick(BACK, data.id, true);
|
padclick(BACK, data.id, true);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
$("#pb" + data.id).on({
|
$("#pb" + data.id).on({
|
||||||
touchend: function (e) {
|
touchend: function(e) {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
padclick(BACK, data.id, false);
|
padclick(BACK, data.id, false);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
$("#pc" + data.id).on({
|
$("#pc" + data.id).on({
|
||||||
touchstart: function (e) {
|
touchstart: function(e) {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
padclick(CENTER, data.id, true);
|
padclick(CENTER, data.id, true);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
$("#pc" + data.id).on({
|
$("#pc" + data.id).on({
|
||||||
touchend: function (e) {
|
touchend: function(e) {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
padclick(CENTER, data.id, false);
|
padclick(CENTER, data.id, false);
|
||||||
}
|
}
|
||||||
@ -343,23 +340,23 @@ function start() {
|
|||||||
case UI_SLIDER:
|
case UI_SLIDER:
|
||||||
$("#row").append(
|
$("#row").append(
|
||||||
"<div class='two columns card tcenter card-slider " +
|
"<div class='two columns card tcenter card-slider " +
|
||||||
colorClass(data.color) +
|
colorClass(data.color) +
|
||||||
"'>" +
|
"'>" +
|
||||||
"<h5 id='" +
|
"<h5 id='" +
|
||||||
data.id +
|
data.id +
|
||||||
"'>" +
|
"'>" +
|
||||||
data.label +
|
data.label +
|
||||||
"</h5><hr />" +
|
"</h5><hr />" +
|
||||||
"<div id='sl" +
|
"<div id='sl" +
|
||||||
data.id +
|
data.id +
|
||||||
"' class='rkmd-slider slider-discrete slider-" +
|
"' class='rkmd-slider slider-discrete slider-" +
|
||||||
colorClass(data.color) +
|
colorClass(data.color) +
|
||||||
"'>" +
|
"'>" +
|
||||||
"<input type='range' min='0' max='100' value='" +
|
"<input type='range' min='0' max='100' value='" +
|
||||||
data.value +
|
data.value +
|
||||||
"'>" +
|
"'>" +
|
||||||
"</div>" +
|
"</div>" +
|
||||||
"</div>"
|
"</div>"
|
||||||
);
|
);
|
||||||
$("#row").append(
|
$("#row").append(
|
||||||
"<script>" + "rkmd_rangeSlider('#sl" + data.id + "');" + "</script>"
|
"<script>" + "rkmd_rangeSlider('#sl" + data.id + "');" + "</script>"
|
||||||
@ -373,21 +370,21 @@ function start() {
|
|||||||
case UI_NUMBER:
|
case UI_NUMBER:
|
||||||
$("#row").append(
|
$("#row").append(
|
||||||
"<div class='two columns card tcenter " +
|
"<div class='two columns card tcenter " +
|
||||||
colorClass(data.color) +
|
colorClass(data.color) +
|
||||||
"'>" +
|
"'>" +
|
||||||
"<h5 id='" +
|
"<h5 id='" +
|
||||||
data.id +
|
data.id +
|
||||||
"'>" +
|
"'>" +
|
||||||
data.label +
|
data.label +
|
||||||
"</h5><hr />" +
|
"</h5><hr />" +
|
||||||
"<input style='color:black;' id='num" +
|
"<input style='color:black;' id='num" +
|
||||||
data.id +
|
data.id +
|
||||||
"' type='number' value='" +
|
"' type='number' value='" +
|
||||||
data.value +
|
data.value +
|
||||||
"' onchange='numberchange(" +
|
"' onchange='numberchange(" +
|
||||||
data.id +
|
data.id +
|
||||||
")' />" +
|
")' />" +
|
||||||
"</div>"
|
"</div>"
|
||||||
);
|
);
|
||||||
break;
|
break;
|
||||||
|
|
||||||
@ -398,21 +395,21 @@ function start() {
|
|||||||
case UI_TEXT_INPUT:
|
case UI_TEXT_INPUT:
|
||||||
$("#row").append(
|
$("#row").append(
|
||||||
"<div class='two columns card tcenter " +
|
"<div class='two columns card tcenter " +
|
||||||
colorClass(data.color) +
|
colorClass(data.color) +
|
||||||
"'>" +
|
"'>" +
|
||||||
"<h5 id='" +
|
"<h5 id='" +
|
||||||
data.id +
|
data.id +
|
||||||
"'>" +
|
"'>" +
|
||||||
data.label +
|
data.label +
|
||||||
"</h5><hr />" +
|
"</h5><hr />" +
|
||||||
"<input style='color:black;' id='text" +
|
"<input style='color:black;' id='text" +
|
||||||
data.id +
|
data.id +
|
||||||
"' value='" +
|
"' value='" +
|
||||||
data.value +
|
data.value +
|
||||||
"' onchange='textchange(" +
|
"' onchange='textchange(" +
|
||||||
data.id +
|
data.id +
|
||||||
")' />" +
|
")' />" +
|
||||||
"</div>"
|
"</div>"
|
||||||
);
|
);
|
||||||
break;
|
break;
|
||||||
|
|
||||||
@ -487,4 +484,4 @@ function switcher(number, state) {
|
|||||||
$("#sl" + number).removeClass("checked");
|
$("#sl" + number).removeClass("checked");
|
||||||
$("#sl" + number).prop("checked", false);
|
$("#sl" + number).prop("checked", false);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
2
examples/gui/data/js/controls.min.js
vendored
2
examples/gui/data/js/controls.min.js
vendored
@ -1,4 +1,4 @@
|
|||||||
const UI_INITIAL_GUI=100;const UI_TITEL=0;const UI_LABEL=1;const UPDATE_LABEL=6;const UI_BUTTON=2;const UI_SWITCHER=3;const UPDATE_SWITCHER=7;const UI_PAD=4;const UI_CPAD=5;const UI_SLIDER=8;const UPDATE_SLIDER=9;const UI_NUMBER=10;const UPDATE_NUMBER=11;const UI_TEXT_INPUT=12;const UPDATE_TEXT_INPUT=13;const UI_GRAPH=14;const CLEAR_GRAPH=15;const ADD_GRAPH_POINT=16;const FOR=0;const BACK=1;const LEFT=2;const RIGHT=3;const CENTER=4;const C_TURQUOISE=0;const C_EMERALD=1;const C_PETERRIVER=2;const C_WETASPHALT=3;const C_SUNFLOWER=4;const C_CARROT=5;const C_ALIZARIN=6;const C_NONE=7;const C_DARK=8;function colorClass(colorId){colorId=Number(colorId);switch(colorId){case C_TURQUOISE:return"turquoise";case C_EMERALD:return"emerald";case C_PETERRIVER:return"peterriver";case C_WETASPHALT:return"wetasphalt";case C_SUNFLOWER:return"sunflower";case C_CARROT:return"carrot";case C_ALIZARIN:return"alizarin";case C_NONE:return"";case C_DARK:return"dark";default:return"";}}
|
const UI_INITIAL_GUI=100;const UI_TITEL=0;const UI_LABEL=1;const UPDATE_LABEL=6;const UI_BUTTON=2;const UI_SWITCHER=3;const UPDATE_SWITCHER=7;const UI_PAD=4;const UI_CPAD=5;const UI_SLIDER=8;const UPDATE_SLIDER=9;const UI_NUMBER=10;const UPDATE_NUMBER=11;const UI_TEXT_INPUT=12;const UPDATE_TEXT_INPUT=13;const UI_GRAPH=14;const CLEAR_GRAPH=15;const ADD_GRAPH_POINT=16;const FOR=0;const BACK=1;const LEFT=2;const RIGHT=3;const CENTER=4;const C_TURQUOISE=0;const C_EMERALD=1;const C_PETERRIVER=2;const C_WETASPHALT=3;const C_SUNFLOWER=4;const C_CARROT=5;const C_ALIZARIN=6;const C_NONE=7;const C_DARK=8;function colorClass(colorId){colorId=Number(colorId);switch(colorId){case C_TURQUOISE:return"turquoise";case C_EMERALD:return"emerald";case C_PETERRIVER:return"peterriver";case C_WETASPHALT:return"wetasphalt";case C_SUNFLOWER:return"sunflower";case C_CARROT:return"carrot";case C_ALIZARIN:return"alizarin";case C_NONE:return"dark";default:return"";}}
|
||||||
var websock;var websockConnected=false;function restart(){$(document).add("*").off();$("#row").html("");websock.close();start();}
|
var websock;var websockConnected=false;function restart(){$(document).add("*").off();$("#row").html("");websock.close();start();}
|
||||||
function conStatusError(){websockConnected=false;$("#conStatus").removeClass("color-green");$("#conStatus").addClass("color-red");$("#conStatus").html("Error / No Connection ↻");$("#conStatus").off();$("#conStatus").on({click:restart});}
|
function conStatusError(){websockConnected=false;$("#conStatus").removeClass("color-green");$("#conStatus").addClass("color-red");$("#conStatus").html("Error / No Connection ↻");$("#conStatus").off();$("#conStatus").on({click:restart});}
|
||||||
function handleVisibilityChange(){if(!websockConnected&&!document.hidden){restart();}}
|
function handleVisibilityChange(){if(!websockConnected&&!document.hidden){restart();}}
|
||||||
|
|||||||
21
library.json
21
library.json
@ -6,13 +6,16 @@
|
|||||||
"type": "git",
|
"type": "git",
|
||||||
"url": "https://github.com/s00500/ESPUI.git"
|
"url": "https://github.com/s00500/ESPUI.git"
|
||||||
},
|
},
|
||||||
"authors": [{
|
"authors": [
|
||||||
"name": "Lukas Bachschwell",
|
{
|
||||||
"email": "lukas@lbsfilm.at",
|
"name": "Lukas Bachschwell",
|
||||||
"url": "https://lbsfilm.at",
|
"email": "lukas@lbsfilm.at",
|
||||||
"maintainer": true
|
"url": "https://lbsfilm.at",
|
||||||
}],
|
"maintainer": true
|
||||||
"dependencies": [{
|
}
|
||||||
|
],
|
||||||
|
"dependencies": [
|
||||||
|
{
|
||||||
"name": "ESP Async WebServer",
|
"name": "ESP Async WebServer",
|
||||||
"authors": "Hristo Gochkov",
|
"authors": "Hristo Gochkov",
|
||||||
"frameworks": "arduino"
|
"frameworks": "arduino"
|
||||||
@ -23,7 +26,7 @@
|
|||||||
"frameworks": "arduino"
|
"frameworks": "arduino"
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
"version": "1.6.1",
|
"version": "1.6.2",
|
||||||
"frameworks": "arduino",
|
"frameworks": "arduino",
|
||||||
"platforms": "*"
|
"platforms": "*"
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,5 +1,5 @@
|
|||||||
name=ESPUI
|
name=ESPUI
|
||||||
version=1.6.1
|
version=1.6.2
|
||||||
author=Lukas Bachschwell
|
author=Lukas Bachschwell
|
||||||
maintainer=Lukas Bachschwell <lukas@lbsfilm.at>
|
maintainer=Lukas Bachschwell <lukas@lbsfilm.at>
|
||||||
sentence=ESP32 and ESP8266 Web Interface Library
|
sentence=ESP32 and ESP8266 Web Interface Library
|
||||||
|
|||||||
@ -99,7 +99,6 @@ typedef struct Control {
|
|||||||
#define COLOR_CARROT 5
|
#define COLOR_CARROT 5
|
||||||
#define COLOR_ALIZARIN 6
|
#define COLOR_ALIZARIN 6
|
||||||
#define COLOR_NONE 7
|
#define COLOR_NONE 7
|
||||||
#define COLOR_DARK 8
|
|
||||||
|
|
||||||
class ESPUIClass {
|
class ESPUIClass {
|
||||||
public:
|
public:
|
||||||
|
|||||||
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue
Block a user