UI Redesign

[ewowi]

Current StarMod UI is a POC UI, meaning it implements the StarMod architecture but is not the user friendliest.

So we need to redesign it.

Step 1: Inspiration

Inspiration 1: Synology UI

Requirements:

• Also Mobile mode
• Super light weight as it runs on esp32 boards
• Not depending on internet connection

[netmindz]

While I love the UI for Synology, I'm not sure it's really the best comparison, we aren't trying to build an entire OS gui, just controls for embedded devices so if be looking more at things like the UI for a WiFi access point, smart power plug etc

[MoonModules]

Yeah - agree we are not building an entire OS gui - But StarBase is a lightweight OS-like layer so maybe a bit of a OS GUI ... ;-)

A bit about the history:

• Started with 4 columns, like wled has, so it fits on desktop and mobile devices
• each panel is a module
• All data for all panels is retrieved at once (variables itself ask for ui specifics: label, comment, select options) using ws, this goes very fast
• The view All shows all modules - which is a developers dream so you see exactly what is going on
• UI is data driven: the model determines what is shown. Javascript determines how it is shown
• Made panels drag and drop enabled, so could be moved from one column to the other
• Added view buttons (which should look like tabs) to have different collections of modules, depending on purpose
• Added a theme to adjust color scheme
• Added a yellow minimise (well... hide) button on each module panel

I would like to keep most of these things in some way but realise it is too overwhelming / nerdy now. My next idea is instead of dragging them to another column is dragging them anywhere you like - so get rid of the column structure - see : https://www.w3schools.com/css/css_positioning.asp

I think implementing these absolute positions is not too difficult and it allows more freedom to organise it the way a user wants - this led me to Synology interface.
Next to absolute position also width and height of a panel should be defined and panels scale / layout their elements within that boundary (scrolling if needed)

So long story short - would be nice to have this positioning implemented - as we are close to that - but for the rest we could make a control structure which makes it look much more straightforward as it is now.

What about Home Assistant interface? This also has panels which can be moved around?

Maybe you can share screenshots of simpler UI's we can use for inspiration?

[ewowi]

[{"id":"Files","type":"sysmod","ro":true,"max":255,"n":[{"id":"fileTbl","type":"table","ro":false,"n":[{"id":"flName","type":"text","ro":true,"max":32},{"id":"flSize","type":"number","ro":true},{"id":"flTime","type":"number","ro":true},{"id":"flEdit","type":"fileEdit","ro":false,"value":["F_Fiber.json","F_Panel-128x64.json","F_Panel-32x32.json","F_Panel-64x64.json","F_Panel-80x80.json","F_Panel-8x8.json","F_Panel-90x90.json","F_Rings241-9.json","balls.sc","blink.sc","helloworld1.sc","helloworld2.sc","helloworld3.sc","model.json","octo.sc","blink.sc","helloworld1.sc","helloworld2.sc","helloworld3.sc","model.json","octo.sc"]}]},{"id":"upload","type":"fileUpload","ro":false},{"id":"drsize","type":"progress","ro":true,"max":262144}]},{"id":"System","type":"sysmod","ro":true,"max":255,"s":true,"n":[{"id":"upTime","type":"text","ro":true,"max":16},{"id":"reboot","type":"button","ro":false},{"id":"loops","type":"text","ro":true,"max":16},{"id":"chip","type":"text","ro":true,"max":16},{"id":"heap","type":"progress","ro":true,"max":292},{"id":"mainStack","type":"progress","ro":true,"max":8192},{"id":"tcpStack","type":"progress","ro":true,"max":16384},{"id":"reset0","type":"select","ro":true},{"id":"reset1","type":"select","ro":true},{"id":"restartReason","type":"select","ro":true},{"id":"build","type":"text","ro":true,"max":32},{"id":"update","type":"fileUpload","ro":false},{"id":"name","type":"text","ro":false,"max":24,"value":"Lab-16","oldValue":"Star3232-16"},{"id":"now","type":"number","ro":true,"max":-1},{"id":"timeBase","type":"number","ro":true,"max":-1}],"view":"vAll"},{"id":"Pins","type":"sysmod","ro":true,"max":255,"n":[{"id":"pinTbl","type":"table","ro":true,"n":[{"id":"pinNr","type":"pin","ro":true,"max":40},{"id":"pinOwner","type":"text","ro":true,"max":32},{"id":"pinDetails","type":"text","ro":true,"max":256}]},{"id":"board","type":"canvas","ro":true,"interval":100,"loopFun":0},{"id":"pin19","type":"checkbox","ro":false,"value":1}]},{"id":"Print","type":"sysmod","ro":true,"max":255,"n":[{"id":"pOut","type":"select","ro":false,"value":1,"oldValue":2},{"id":"log","type":"textarea","ro":false}]},{"id":"Web","type":"sysmod","ro":true,"max":255,"n":[{"id":"clTbl","type":"table","ro":true,"n":[{"id":"clNr","type":"number","ro":true,"max":999},{"id":"clIp","type":"text","ro":true,"max":16},{"id":"clIsFull","type":"checkbox","ro":true},{"id":"clStatus","type":"select","ro":true},{"id":"clLength","type":"number","ro":true,"max":64}]},{"id":"maxQueue","type":"number","ro":true,"max":64},{"id":"wsSend","type":"text","ro":true,"max":16},{"id":"wsRecv","type":"text","ro":true,"max":16},{"id":"udpSend","type":"text","ro":true,"max":16},{"id":"udpRecv","type":"text","ro":true,"max":16}]},{"id":"Network","type":"sysmod","ro":true,"max":255,"s":true,"n":[{"id":"ssid","type":"text","ro":false,"max":31,"value":"ewtr","oldValue":""},{"id":"pw","type":"password","ro":false,"value":"zonledmod","oldValue":"","max":63},{"id":"connect","type":"button","ro":false},{"id":"nwstatus","type":"text","ro":true,"max":32},{"id":"rssi","type":"text","ro":true,"max":32}]},{"id":"E131","type":"usermod","ro":true,"max":255,"n":[{"id":"dun","type":"number","ro":false,"max":7,"value":1},{"id":"dch","type":"number","ro":false,"min":1,"max":512,"value":1},{"id":"e131Tbl","type":"table","ro":true,"n":[{"id":"e131Channel","type":"number","ro":true,"min":1,"max":512},{"id":"e131Name","type":"text","ro":true,"max":32},{"id":"e131Max","type":"number","ro":true},{"id":"e131Value","type":"number","ro":true,"max":255}]}]},{"id":"Model","type":"sysmod","ro":true,"max":255,"s":true,"n":[{"id":"saveModel","type":"button","ro":false},{"id":"showObsolete","type":"checkbox","ro":false,"value":0},{"id":"deleteObsolete","type":"button","ro":false}]},{"id":"UI","type":"sysmod","ro":true,"max":255,"n":[{"id":"vlTbl","type":"table","ro":true,"n":[{"id":"vlVar","type":"text","ro":true,"max":32},{"id":"vlLoopps","type":"number","ro":true,"max":999}]}]},{"id":"Instances","type":"sysmod","ro":true,"max":255,"n":[{"id":"insTbl","type":"table","ro":true,"n":[{"id":"insName","type":"text","ro":false,"max":32},{"id":"insLink","type":"number","ro":true},{"id":"insIp","type":"text","ro":true,"max":16},{"id":"insType","type":"text","ro":true,"max":16},{"id":"insVersion","type":"number","ro":true,"max":-1},{"id":"insUp","type":"number","ro":true,"max":-1},{"id":"inson","type":"checkbox","ro":false},{"id":"insdch","type":"number","ro":false,"min":1,"max":512},{"id":"insbri","type":"range","ro":false,"max":255,"log":true},{"id":"insShow","type":"url","ro":true},{"id":"insTS","type":"number","ro":true,"max":-1},{"id":"insTT","type":"number","ro":true,"max":-1},{"id":"insTM","type":"number","ro":true,"max":-1},{"id":"insNow","type":"number","ro":true,"max":-1}]}]},{"id":"Modules","type":"sysmod","ro":true,"max":255,"n":[{"id":"mdlTbl","type":"table","ro":true,"n":[{"id":"mdlName","type":"text","ro":true,"max":32},{"id":"mdlSuccess","type":"checkbox","ro":true},{"id":"mdlEnabled","type":"checkbox","ro":false,"value":[true,true,true,true,true,true,true,false,false,true,true,true,true,true]}]}]},{"id":"Motion Tracking","type":"usermod","ro":true,"max":255,"n":[{"id":"mtReady","type":"checkbox","ro":true},{"id":"gyro","type":"coord3D","ro":true},{"id":"accell","type":"coord3D","ro":true}]},{"id":"AppMod Demo","type":"appmod","ro":true,"max":255,"n":[{"id":"on","type":"checkbox","ro":false,"value":1},{"id":"bri","type":"range","ro":false,"max":255,"value":10,"log":true},{"id":"textField","type":"text","ro":false,"max":32,"value":"text"},{"id":"blinkPin","type":"pin","ro":false,"max":40},{"id":"frequency","type":"range","ro":false,"max":255,"value":44}]},{"id":"Live","type":"usermod","ro":true,"max":255,"n":[{"id":"script","type":"select","ro":false},{"id":"fps1","type":"text","ro":true,"max":10},{"id":"fps2","type":"text","ro":true,"max":10}]}]

[ewoudwijma]

Above is contents of model.json, which is used by JavaScript to generate all the fields in the ui

see this discussion: https://discord.com/channels/700041398778331156/1262883283809603698

[ewowi]

Copying discussion from discord here ...

[ewowi]

@aaronaverill said on July 17

I've done UI design and dev for a few decades if you want to bounce ideas around.

For what I know of your app, it seems to be primarily tailored to an admin dashboard kind of look and feel. If that's true, I would go with a vertical left rail for primary navigation, and a main area to the right of that with a vertical scrolling overflow
Like this.

Yeah this typically collapses into a hamburger menu on the left side on mobile with a vertical list that scrolls if needed just like you did!
Icons are obviously opional
You can set some cute horizontal transition css property if you want it to "slide" out
the other mobile approach would be a max of 4 bottom main menus, and then they have to drill into detail pages, but I dont think thats appropriate for such a complex config
this has essentially become standard UI for this type of app. Of course, you could get creative if you want to have a unique and memorable UI 🙂

Do you have the concept of module collections? You could offer that as a top level navigation on the side, with the modules being indented under, if you get a lot of modules this can be more easily navigated

This is adjacent to UI design, but related to the implementation, and forgive me if I'm telling you stuff you know but you should move to implementing your javascript inside of classes with private functions prefixed with # so the minimizer will obfuscate them and you can stick to human readable method names but not worry about performance

Apologies for a newb question but are you doing the new ui development in a separate branch in the starbase repo?
I've moved to doing all my mcu ui development with es6 modules for the javascript and rollup to bundle the files. Its a decent system that gives good control over how you serve your html, css, js from the controller. And everything is clean and modern and modular as it should be in 2024.

I guess its a personal preference but for example I find the 3,000 line index.js file of wled to be inscrutable for anyone except the original developer. Modern js techniques will allow much easier contribution, maintenance and quicker feature innovation
Its a much more scalable approach as well if you find a set of pages is getting too large to serve from the mcu in a single request you can easily break them into separate files served only when needed hitting certain pages.
Browser support for dynamic imports now does all the work of loading modules on demand only when needed. Cool stuff

[ewowi]

@ewowi July 18

I might do it just in the main branch as the old ui is still fully available, so the new ui is not interfering, it’s just /newUI to see it

We now zip all the files using npm into html_ui.h so it’s just a c file instead of index.js etc to be copied to the file system (like done in WLED) as far as I know index.html must explicitly import index.js, index.css etc so not sure if dynamic import works here ?

Fully agree but see the remark, but the idea of splitting into more files is for sure a good idea!
I will submit the setup for the new UI most likely tomorrow, then you could play with it and tell me what you think
I could use some help in css magic, to nicely move nodes around the screen 🙂

/newui is in StarBase: a32ef8e
GitHub
Add newUI html, js and css - WIP · a32ef8e
gitignore: add html_newui

newnavbar.css: new: all css for navbar

newui.htm: new: only meta data and file imports (css/js)

newui.js: new:

• NavBar class (navItem (level 1) and dropdownitem (level...

@Aaroneous you can check this link to see what I have added, probably you have some questions or remarks so happy to discuss. A few things:
navbar has a seperate navbar.css file and a class NavBar in newui.js, to make it as modular as possible
a few things in navbar is not working as nice as I would, so if you could help here that would be great:

1. the navBar is now the top item in the body, I would like a title bar above but then the menus of navbar are not aligned right when in hamburger mode (☰)
2. There are 2 levels navItem (module type) and dropdownItem (module.id), but alignment of both is not nice
3. when in hamburger mode (☰) a navItem is selected the nav-list is transitioning all the way to the right, would like that to go only as far as the length of the navItems
4. I will implement a theme class so no need to do any coloring, that will come from theme
5. As you can see if selecting a module, the json is shown which defines the module. I will make a setup of that in one of the next commits, then we can discuss that if you like (I expect we need subscreens there with back arrows, e.g. a table in the old ui will probably by a list of keywords and if you click a keyword you will see a row of the table)
6. after selecting a drop down item in non hamburger mode, the list of dropdowns should disappear but it stays (In hamburger mode it does disappear)

This is in StarBase latest main commit /newui

[ewowi]

@aaronaverill on July 18

So my first recommendation is to have your top nav by sticky by using a flex layout for the body and wrap the page contents in a div that has overflow-y as auto so you get a vertical scrollbar

.... etc ...

.. all your page content

I think the nav layout looks ok once that is fixed

[ewowi]

@ewowi July 18

Although my advanced html and even more css skills are very limited this sounds good to me 🙂
Did you saw the way I generate html: by using the cE function which does createElement, instead of extending innerHTML as i understand it’s then part of the dom and allows things like addEventListener on the nodes created that way.
Does that sound okay for you?
(Also used in WLED )

[ewowi]

@aaronaverill July 18

I have opinions hahaha
It's definitely a preference thing, but typically you would put the markup in HTML, and then use something like mustache as a templating language.
With the ESP32 I think you can get away with this, mustache comes to only 400 bytes gzipped!
mustache is great, and it will be much cleaner looking code and faster to develop complex layouts
You can append -OR- set innerHTML, either will be placed into the DOM and allow you to attach event listeners.
So...

element.innerHTML = '<div onclick="nav.click()">Click me</div>'

Is equivalent to the same with append and add event handler, but it's maybe a lot less code on the mcu to serve back to the webpage

[ewowi]

@ewowi July 18:

Thanls a lot for your feedback, this helps a lot!

So what can we do? Does this makes sense:

1. I push another commit, using innerHTML instead of createElement as much as possible?
2. Add the html suggestion above
3. make a separate branch with a moustache POC

Regarding 2 and also 3: I can add it, but I think it would be nicer if you fork and pull request it, by that your work is also visible 😉
(micromoustache: not updated the last 2 years, so thats not good I guess 😉 )