Skip to content

Commit

Permalink
Theme and view through websockets, ws: split model in modules + more
Browse files Browse the repository at this point in the history 
index.css
- changes in themes
- set color in textarea, body, input, select
- remove hover blue
- add .selected

index.htm
- rename showHideModules to changeHTMLView
- add setTheme

index.js
- model as array (added per module)
- replace htmlgenerated by check on module.id
- onLoad: add getView
- rename showHideModules to changeHTMLView
- genHTML: add help/? in module
- receiveHTML: Process view and theme (send from server)
- changeHTML comment: not for td nodes
- changeHTMLView: view buttons: add/remove selected
- add changeHTMLTheme, set/get view/theme

platformio: increase queuelength to 64

SysModFiles: remove deleteFiles
SysModModel: remove deleteModel, increase queuesize for lossy updates

SysModUI:
- increase queuesize for varloop updates
- processjson: view, canvasdata and theme broadcast update to clients

SysModWeb
- replace wsSendDataWsCounter by xSemaphoreCreateMutex
wsEvent: send model per Module !!
sendDataWs: use mutex, report on websocket size limit
  • Loading branch information
@ewowi
ewowi committed Jan 17, 2024
1 parent 919b485 commit 57d0066
Show file tree
Hide file tree
Showing 11 changed files with 1,443 additions and 1,393 deletions.
36 changes: 28 additions & 8 deletions data/index.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,16 +15,27 @@
--th-color: #b60f6281;
--h-color: #b60f62;
--border-color: #666;
--text-color: #030303;
--select-color: #FFFFFF; /*used for view buttons*/
}
:root.wled {
--bg-color: #121212;
--th-color: rgb(255, 160, 0);
--h-color: rgb(255, 160, 0);
--border-color: rgb(255, 160, 0);
--text-color: #fff;
--select-color: rgb(255, 160, 0);
}
:root.light {
--bg-color: #fff;
--h-color: #000000;
--th-color: #6d686a81;
--text-color: #123;
--bg-color: #fff;
--h-color: #000000;
--th-color: #6d686a81;
--text-color: #123;
--select-color: #6d686a81;
}
:root.dark {
--bg-color: #121212;
--text-color: #696d7d;
--bg-color: #121212;
--text-color: #696d7d;
}
:root.blue {
--bg-color: #05396B;
Expand Down Expand Up @@ -102,6 +113,7 @@ textarea {
height: 100%;
border-radius: 12px;
background: transparent;
color: var(--text-color);
}

canvas {
Expand All @@ -115,14 +127,17 @@ canvas {
body {
font-family: Arial, Helvetica, sans-serif;
background: black;
color: var(--text-color);
}

input {
background: transparent;
color: var(--text-color);
}

select {
background: transparent;
color: var(--text-color);
}

h1,h2 {
Expand Down Expand Up @@ -199,9 +214,9 @@ div {
cursor: move;
}

.module:hover {
/* .module:hover {
background-color: #00BFFF;
}
} */

.mdlColumn {
border: 3px solid var(--border-color);
Expand Down Expand Up @@ -273,4 +288,9 @@ div {
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}

/*used for view buttons*/
.selected {
background: var(--select-color);
}
12 changes: 6 additions & 6 deletions data/index.htm
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,15 +35,15 @@
<body onload="onLoad()">
<div class="module">
<h1>StarMod by MoonModules 💫 <div id="instanceName"></div></h1>
<input type="button" value="App" id="vApp" onclick="showHideModules(this)">
<input type="button" value="Stage" id="vStage" onclick="showHideModules(this)">
<!-- <input type="button" value="User" id="vUser" onclick="showHideModules(this)"> -->
<input type="button" value="System" id="vSys" onclick="showHideModules(this)">
<input type="button" value="All" id="vAll" onclick="showHideModules(this)">
<input type="button" value="App" id="vApp" onclick="setView(this)">
<input type="button" value="Stage" id="vStage" onclick="setView(this)">
<!-- <input type="button" value="User" id="vUser" onclick="setView(this)"> -->
<input type="button" value="System" id="vSys" onclick="setView(this)">
<input type="button" value="All" id="vAll" onclick="setView(this)">
<span> | </span>
<input type="button" value="Save" id="bSave" onclick="saveModel(this)">
<span> | </span>
Theme <select name="theme-select" id="theme-select" onchange="setTheme(this.value)">
Theme <select name="theme-select" id="theme-select" onchange="setTheme(this)">
<option value="starmod">StarMod</option>
<option value="wled">WLED</option>
<option value="alt1">Alternative1</option>
Expand Down
157 changes: 97 additions & 60 deletions data/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,12 +13,10 @@ let ws = null;
let mdlColumnNr = 0;
let nrOfMdlColumns = 4;
let userFunId = "";
let htmlGenerated = false;
let jsonValues = {};
let uiFunCommands = [];
let model = null; //model.json (as send by the server), used by FindVar
let model = []; //model.json (as send by the server), used by FindVar
let savedView = null;
let theme;

function gId(c) {return d.getElementById(c);}
function cE(e) { return d.createElement(e); }
Expand All @@ -28,6 +26,7 @@ function handleVisibilityChange() {
}

function onLoad() {
getView();
getTheme();

makeWS();
Expand All @@ -52,6 +51,7 @@ function makeWS() {
clearTimeout(jsonTimeout);
jsonTimeout = null;
gId('connind').style.backgroundColor = "var(--c-l)";

// console.log("onmessage", e.data);
let json = null;
try {
Expand All @@ -61,28 +61,45 @@ function makeWS() {
console.error("makeWS json error", error, e.data); // error in the above string (in this case, yes)!
}
if (json) {
if (!htmlGenerated) { //generate array of variables
if (Array.isArray(json)) {
model = json; //this is the model
console.log("WS receive generateHTML", model);
generateHTML(model); //no parentNode
htmlGenerated = true;
//receive model per module to stay under websocket size limit of 8192
if (json.type && json.type == "module") { //generate array of variables
let found = false;
for (let module of model) {
if (module.id == json.id)
found = true;
}
if (!found) {
let module = json;
model.push((module)); //this is the model
console.log("WS receive generateHTML", module);
generateHTML(module); //no parentNode

if (module.id == "System") {
console.log("system changes", module);
if (module.view)
savedView = module.view;
if (module.theme)
changeHTMLTheme(module.theme);
}

//rerun after each module added
if (savedView)
showHideModules(gId(savedView));
changeHTMLView(savedView);
else
showHideModules(gId("vApp")); //default
changeHTMLView("vApp"); //default

//send request for uiFun
flushUIFunCommands();
}
else
console.log("Error: no valid model", json);
console.log("html of module already generated", json);
}
else { //update
if (!Array.isArray(json)) //only the model is an array
// console.log("WS receive update", json);
receiveData(json);
else
console.log("program error array not expected", json);
}
}
}
Expand Down Expand Up @@ -178,19 +195,10 @@ function generateHTML(json, parentNode = null, rowNr = -1) {

let isPartOfTableRow = (rowNr != -1);

//if System, set the current view
if (variable && variable.id) {
if (variable.id == "System") {
//get the current view
console.log("view", variable);
if (variable.view)
savedView = variable.view;
}
}
else {
console.log("genHTML no variable and id", variable, parentNode); //tbd: caused by more data then columns in table...
return;
}
// if (!variable || !variable.id) {
// console.log("genHTML no variable and id", variable, parentNode); //tbd: caused by more data then columns in table...
// return;
// }

let divNode = null; //divNode will be appended to the parentNode after if then else and returned
let varNode = null; //the node containing the variable
Expand Down Expand Up @@ -219,6 +227,15 @@ function generateHTML(json, parentNode = null, rowNr = -1) {
h2Node.innerText = initCap(variable.id);
varNode.appendChild(h2Node);

let helpNode = cE("input");
helpNode.type = "button";
helpNode.value = "?";
helpNode.addEventListener('click', (event) => {
location.href="https://ewowi.github.io/StarDocs/";// + variable.id;
// location.href="https://starmod.org/" + variable.id;
});
varNode.appendChild(helpNode);

setupModule(varNode); //enable drag and drop of modules
}
else if (variable.type == "table") {
Expand Down Expand Up @@ -439,10 +456,15 @@ function receiveData(json) {
if (key == "uiFun") {
console.log("receiveData no action", key, value); //should not happen anymore
}
else if (key == "view") { //should not happen anymore
console.log("receiveData no action", key, value);
else if (key == "view") {
console.log("receiveData", key, value);
changeHTMLView(value);
}
else if (key == "canvasData") { //should not happen anymore
else if (key == "theme") {
console.log("receiveData", key, value);
changeHTMLTheme(value);
}
else if (key == "canvasData") {
console.log("receiveData no action", key, value);
}
else if (key == "details") {
Expand Down Expand Up @@ -552,9 +574,9 @@ function changeHTML(variable, node, commandJson, rowNr = -1) {
if (commandJson.hasOwnProperty("comment")) {

if (nodeType != "th") {
//only add comment if there is a label
let labelNode = node.parentNode.querySelector('label');
if (labelNode) {

//if not a tablecell
if (node.parentNode.parentNode.nodeName.toLocaleLowerCase() != "td") {
let commentNode = node.parentNode.querySelector('comment');
// console.log("commentNode", commentNode);
if (!commentNode) { //create if not exist
Expand Down Expand Up @@ -1085,11 +1107,12 @@ function setInstanceTableColumns() {
// let insTrNode = gId("insName").parentNode;

let tbl = gId("insTbl");
if (!tbl) return;
let mdlContainer = gId("mdlContainer");
// let isStageView = tbl.parentNode.parentNode.parentNode.className != "mdlColumn";
let isStageView = !mdlContainer.contains(tbl);
let thead = tbl.getElementsByTagName('thead')[0];
let tbody = tbl.getElementsByTagName('tbody')[0];
let thead = tbl.querySelector("thead");
let tbody = tbl.querySelector("tbody");

function showHideColumn(colNr, doHide) {
// console.log("showHideColumn", thead.parentNode.parentNode, colNr, doHide);
Expand All @@ -1113,9 +1136,10 @@ function setInstanceTableColumns() {
gId("sma").parentNode.hidden = isStageView; //hide sync master label field and comment
}

function showHideModules(node) {
function changeHTMLView(value) {

function toggleInstances(isStageView) {
if (!gId("Instances")) return;
let module = gId("Instances").parentNode;
let container = gId("mdlContainer");
// console.log("toggleInstances", module, container, isStageView);
Expand All @@ -1131,18 +1155,20 @@ function showHideModules(node) {
setInstanceTableColumns();
}

localStorage.setItem('view', value);

let sysMods = ["Files", "Print", "System", "Network", "Model", "Pins", "Modules", "Web", "UI", "Instances"];
let mdlContainerNode = gId("mdlContainer"); //class mdlContainer
// console.log("showHideModules", node, node.value, node.id, mdlContainerNode, mdlContainerNode.childNodes);
// console.log("changeHTMLView", node, node.value, node.id, mdlContainerNode, mdlContainerNode.childNodes);

gId("vApp").style.background = "none";
gId("vStage").style.background = "none";
// gId("vUser").style.background = "none";
gId("vSys").style.background = "none";
gId("vAll").style.background = "none";
node.style.backgroundColor = "#FFFFFF";
gId("vApp").classList.remove("selected");
gId("vStage").classList.remove("selected");
// gId("vUser").classList.remove("selected");
gId("vSys").classList.remove("selected");
gId("vAll").classList.remove("selected");
gId(value).classList.add("selected");

switch (node.id) {
switch (value) {
case "vApp":
case "vSys":
toggleInstances(false); //put Instance back if needed
Expand All @@ -1158,7 +1184,7 @@ function showHideModules(node) {
break;
}
}
module.hidden = (node.id=="vApp"?found:!found);
module.hidden = (value=="vApp"?found:!found);
}
}

Expand Down Expand Up @@ -1211,30 +1237,41 @@ function showHideModules(node) {
break;
}

//save the current view
var command = {};
command["view"] = node.id;
// console.log("setInput", command);
} //changeHTMLView

requestJson(command);
} //showHideModules
//https://webdesign.tutsplus.com/color-schemes-with-css-variables-and-javascript--cms-36989t
function changeHTMLTheme(value) {
localStorage.setItem('theme', value);
document.documentElement.className = value;
if (gId("theme-select").value != value)
gId("theme-select").value = value;
}

function saveModel(node) {
console.log("saveModel", node);

sendValue(node);
}

//https://webdesign.tutsplus.com/color-schemes-with-css-variables-and-javascript--cms-36989t
function setTheme(themex) {
theme = themex;
console.log("setTheme", theme);
document.documentElement.className = theme;
localStorage.setItem('theme', theme);
function setView(node) {
var command = {};
command["view"] = node.id;
requestJson(command);
}

function getTheme() {
theme = localStorage.getItem('theme');
theme && setTheme(theme);
gId("theme-select").value = theme;
function getView() {
let value = localStorage.getItem('view');
console.log("getView", value);
if (value && value != "null") changeHTMLView(value);
}

function setTheme(node) {
var command = {};
command["theme"] = node.value;
requestJson(command);
}

function getTheme() {
let value = localStorage.getItem('theme');
if (value && value != "null") changeHTMLTheme(value);
}
2 changes: 1 addition & 1 deletion platformio.ini
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
lib_deps =
https://github.com/bblanchon/ArduinoJson.git#v6.21.4
; https://github.com/ewowi/ESPAsyncWebServer.git ;me-no-dev + 64 + queueLength
https://github.com/ewoudwijma/ESPAsyncWebServer.git ;aircoookie + getClients
https://github.com/ewoudwijma/ESPAsyncWebServer.git ;aircoookie + getClients + 64
; https://github.com/pbolduc/AsyncTCP.git @ 1.2.0 ;optionally combine with aircoookie
; https://github.com/lost-hope/ESPAsyncWebServer.git#master ;artifx on <ip>/edit

Expand Down
Loading

0 comments on commit 57d0066

Please sign in to comment.