maybe easier to use Dashboard replacement

[Ath]

Not to spoil the party here, but I hope you are aware of the GUIEasy project, intended as the 'official' front-end for managing ESPEasy? (Has been on hold for quite a while though)
I think it also has the intention to be used as a dashboard, but I've not really done an investigation.

[TD-er]

Yes it is intended to replace the current web UI, but that's still a lot to do.
Also side-projects like these may even give new insights to what is really usable or is wanted by the users which may in the end also help developing the new UI.

[chromo23]

Not to spoil the party here, but I hope you are aware of the GUIEasy project, intended as the 'official' front-end for managing ESPEasy? (Has been on hold for quite a while though)
I think it also has the intention to be used as a dashboard, but I've not really done an investigation.

It´s fine. I know it exists and i am waiting for it for a while.
I needed something simple and easy to use now and i thought i might share it with the community.

[chromo23]

And to be honest... i am still really happy with standard UI of espeasy! Its also simple and easy to use.

[chromo23]

I did some research... so guieasy really a complete replacement for the espeasy gui.
So there a hardly any overlaps with my site since mine is more or less a simple json parser with very basic functionality and it is firmware independent (unless the json format will ever change)

[iron]

I did some research... so guieasy really a complete replacement for the espeasy gui.
So there a hardly any overlaps with my site since mine is more or less a simple json parser with very basic functionality and it is firmware independent (unless the json format will ever change)

Of course, your solution can be utilized irrelevantly of the gui
You have been and are doing a great job. Keep it up !!!

[chromo23]

@iron: Thank you, i´ll do

Important!: I forgot to set the fetch timer back to 10sek (right now it will take 1000sek for a regular refresh)... so please download these new files:

fetch.zip

(9.21 KiB) Downloaded 1253 times

fetch_minified.zip

(7.21 KiB) Downloaded 1244 times

Keep it up !!!

You asked for it

What’s new:
- You can now also hide a Task and keep it active by adding XX to the name instead of editing the html file(see in the picture) downside: you´ll have to change the name in the rules accordingly .
- you can now define the minimum maximum and step size of the range slider by adding: slMin, slMax & slStep as values to the device
but keep in mind: slVal or noslVal needs to be the first value so that the Task is recognized as a slider!!
(default values: min:0 max:1023 step:1)

Example
-instead of changing the set temperatue of a device with up and down buttons we use a slider
- therefore we have to set the range and steps. and since dummy-devices loose their value we have to define the values at boot.

Code: Select all

On System#Boot do
TaskValueSet,SetTemp,slMin,10
TaskValueSet,SetTemp,slMax,30
TaskValueSet,SetTemp,slStep,0.5
endon

- to give the values of the slider to bigVal, the Regulator - Level Control device and to back the slider(so that the page also knows where the slider is right now) we need this code:

Code: Select all

On SetTempevent do
Taskvalueset,SetTemp,1,%eventvalue%
taskvalueset,bigVal,1,%eventvalue%
TimerSet,1,10
endon

On Rules#Timer=1 do
config,task,Tempset,SetLevel,[bigVal#Set]
endon

55.png (239.99 KiB) Viewed 137806 times

[iron]

Looking great !!!

1. When a temp has no decimal (eg 20.0 °C) it shows no decimal at all (20)
IMO it should respect the amount of decimals set on the task ("NrDecimals":1 in the json).

2. Will be nice to add the °C / °F next to the temp (φ / RH next to humidity ?)

3. Why did the State Status disappear from the button ?

4. Do you intentionally capitalize the first letter of the Task Name on the Tile ?

[chromo23]

Looking great !!!

1. When a temp has no decimal (eg 20.0 °C) it shows no decimal at all (20)
IMO it should respect the amount of decimals set on the task ("NrDecimals":1 in the json).

2. Will be nice to add the °C / °F next to the temp (φ / RH next to humidity ?)

3. Why did the State Status disappear from the button ?

4. Do you intentionally capitalize the first letter of the Task Name on the Tile ?

1. I fixed this in my code (will upload it later).
2. I maybe do this in the future but for now i have to take it easy because my body tells me to.
3. I didn’t find it necessary. Do you really need it?
4. Yes. in the beginning for testing (because i thought i looks nicer). I forgot to delete it.

[iron]

1.
In the json :

{"ValueNumber":1,
"Name":"Temp1",
"NrDecimals":1,
"Value":24.6
},

So number of decimals is indeed provided in the json right above the value, no ?

3.
Would be nice to have the state, or just ON / OFF even better ?

[chromo23]

1.
In the json :

{"ValueNumber":1,
"Name":"Temp1",
"NrDecimals":1,
"Value":24.6
},

So number of decimals is indeed provided in the json right above the value, no ?

3.
Would be nice to have the state, or just ON / OFF even better ?

1. ohh that´s interesting...to see the content of the json file i use a program. and that does exactly what my program does :

11.png (94.73 KiB) Viewed 137728 times

3. therefore there is the coloring i thought.... so you suggest to have both? but why this redundancy?

[chromo23]

Looking great !!!

1. When a temp has no decimal (eg 20.0 °C) it shows no decimal at all (20)
IMO it should respect the amount of decimals set on the task ("NrDecimals":1 in the json).

2. Will be nice to add the °C / °F next to the temp (φ / RH next to humidity ?)

You mean like this?:

123.png (29.93 KiB) Viewed 137717 times

[iron]

Looking great !!!

1. When a temp has no decimal (eg 20.0 °C) it shows no decimal at all (20)
IMO it should respect the amount of decimals set on the task ("NrDecimals":1 in the json).

2. Will be nice to add the °C / °F next to the temp (φ / RH next to humidity ?)

You mean like this?:
123.png

If I were you I would move somewhere cooler

Looks good (perhaps align - top?)

[chromo23]

So. i am finished... i hope.
May i introduce to you......the "Fetch-master 3000™"
or call it whatever you want.
i call it "lots of crappy javascript (the parts that i did´t copy from somwhere else) and even more strange css in a big file that miraculously works".

Whats new:

- added: pressing the unitname triggers fullscreen on supported browsers
- added: longpress events. every clickable tile also triggers now an event called Taskname+long eg: on ButtonLong do
- improved: big numbers can have units: °C/°F if the Taskvaluename contains "temp" and % if the Taskvaluename contains "hum"
- improved: big number-tiles have now a dynamic textsize
- improved: the desktop gridview looks and works better and is generated on a lot of strange conditions(don´t look to deep into the code). there is a possibility that there are unmet conditions. please contact me if this happens
- gimmick: i added a new type of slider. this was the largest part of the work with the least benefit but i did it anyway. (since custom variables aren’t stored in flash, these timesettings are not reliable)
- removed: capitalize the tasknames

slTSdeskt.png (47.05 KiB) Viewed 137570 times

Examples

Longpress:
if you press a tile for 1second it will trigger an event. (I made this for myself, because a button on a touchscreen is easily pressed by accident and a raspberry doesn’t like it to be shut off without proper shutdown )

Code: Select all

On ButtonLong do
GPIOtoggle,12
endon

Timeslider.:
to generate a timeslider the first value has to be called slT and the second one slT2

slTS.png (24.51 KiB) Viewed 137574 times

Both Sliderhands generate an event with an eventvalue in minutes that then needs to be processed to compare it to the systemtime:
the left one : Taskname + L
the left one : Taskname + R

here a sample rule:

Code: Select all

On Mo_FrL do
TaskValueSet,Mo_Fr,1,%eventvalue% //send the value as feedback to the slider
Let,1,[Mo_Fr#slT]/60              //hours are beeing calculated
Let,2,[Mo_Fr#slT]%60              //minutes are beeing calculated
endon
On Mo_FrR do
TaskValueSet,Mo_Fr,2,%eventvalue% //send the value as feedback to the slider
Let,3,[Mo_Fr#slT]/60                  //hours are beeing calculated
Let,4,[Mo_Fr#slT]%60              //minutes are beeing calculated
TaskValueSet,Mo_Fr,2,%eventvalue%
endon

On Clock#Time=All,"[Var#1#F]:[Var#2#D2]" do
gpio,2,1
endon
On Clock#Time=All,"[Var#3#F]:[Var#4#D2]" do
gpio,2,0
endon

Here are the files:
There is one for fahrenheit as well as gzipped htmls. the files got really big because of this timeslider and the longpress option
but i found out, that espeasy can make use of compressed html files. thats really cool!! (so there is fortunately no need anymore to manually minify the htmls)

fetch.zip

(32.66 KiB) Downloaded 1246 times

Edit: Please make no feature requests.(unless it is really essential) i am done with this. the code already got too big and i am really a beginner regarding coding.(otherwise there is a good chance my head will explode)
Edit2: a last thing i will do in the future is to make the page independent from my and espeasys css...

[iron]

So. i am finished... i hope.

You will be back with more...

(since custom variables aren’t stored in flash, these timesettings are not reliable)

Same applies for the initial slider as well, no ? Can't see an actual use on any of the sliders since they do not survive cold reboot unless the devs give us this feature

Edit: Please make no feature requests.

We hear you you.... NOT

[chromo23]

Same applies for the initial slider as well, no ? Can't see an actual use on any of the sliders since they do not survive cold reboot unless the devs give us this feature

not quite..you can store values
i store these values with the level control plugin (downside: only one value per task)

Code: Select all

config,task,<taskname>,setlevel,<value> 

https://www.letscontrolit.com/wiki/inde ... velControl

its also in the how-to for the slider some posts earlier...

[Ath]

not quite..you can store values
i store these values with the level control plugin (downside: only one value per task)

Code: Select all

config,task,<taskname>,setlevel,<value> 

https://www.letscontrolit.com/wiki/inde ... velControl

its also in the how-to for the slider some posts earlier...

That is old documentation, and old information too. From next release on (PR already merged) the default behavior (for new tasks) is to no longer immediately save the setting to flash, as documented on RTD, to avoid wearing out the flash.
An explicit save command has to be used to actually save the settings. (But there is a checkbox to have backward compatibility, that will be on for existing tasks).

[chromo23]

i should also mention again, that if you use this feature use it homeopathically.... around 100000 writes are not so much.
That’s why it is always a good idea to use a timer to trigger a write and look twice at your code... (or you have stashed a lot of flash modules like i do. )

[chromo23]

did some minor fixes in the css (eg. forgot word break for longer names, slider size in 2x grid)
i changed the file in the last post, so redownload it if you like

[chromo23]

-node list got unit numbers
-update because of unmet conditions

file updated in post #64

nodelist.png (35.02 KiB) Viewed 137420 times

[chromo23]

Can't see an actual use on any of the sliders since they do not survive cold reboot unless the devs give us this feature

I forgot to mention, that you do not necessarily need to use these sliders as an input. they can be used as display as well.(e.g waterlevels , batterylevels, remaining kwh,.....)
give the slider a min and a max as described earlier and use

Code: Select all

TaskValueSet,Waterlevel,slVal,<value>

to set the value.
Same goes for the buttons. They can be just a visual feedback of a state. In the picture e.g. you can see if the pump is running or not depending on the tilecolor...

level.png (32.11 KiB) Viewed 137394 times

To do the clock and date tile:
give a dummy device a name containing bigVal and name two values clock and date (with two decimals)

clock.png (24.18 KiB) Viewed 137394 times

the code would look like this:

Code: Select all

on Clock#Time=All,**:** do
Taskvalueset,bigVal,1,%syshour%.%sysmin_0%
Taskvalueset,bigVal,2,%sysday%.%sysmonth_0%
endon

[chromo23]

And as promised i made it independent from my eps.css but i highly recommend to use the esp.css for better usability of the espeasy web-ui on mobile devices and if you like the dark mode of course.

fetch.zip

(32.66 KiB) Downloaded 1252 times

[iron]

1. Longer node list names get truncated on both ends (with or w/o your CSS)

2. Slider slStep is set to 0.1 and declared with 1 Value decimal, yet still showing 2 decimals on the right end of the slider

3. Task name can not contain blank spaces so the underscore @ Do_Something.
For beautification purposes replacing the underscore (or any other predefined character) with a blank would be ideal

4. How long will you tolerate displaying the Time w/o ":" and the Date w/o "-" ?

Those are just observations not requests

[chromo23]

1. Longer node list names get truncated on both ends (with or w/o your CSS)

2. Slider slStep is set to 0.1 and declared with 1 Value decimal, yet still showing 2 decimals on the right end of the slider

3. Task name can not contain blank spaces so the underscore @ Do_Something.
For beautification purposes replacing the underscore (or any other predefined character) with a blank would be ideal

4. How long will you tolerate displaying the Time w/o ":" and the Date w/o "-" ?

Those are just observations not requests

1. fixed > i´ll upload the file later or tomorrow. i´ll let you know
2. this works...i just tested it myself. make sure you have set decimals to 1 of slVal
3. this works too: "do something"
4. probably forever since it it not important right now

[chromo23]

The ":" for the clock was easier than i thought. It appears when the name consists "clock"

I will not change the "." for the date since it works like that in germany and i cannot provide special formatting for every country.

Here you go:

fetch.zip

(32.92 KiB) Downloaded 1216 times

clock2.png (26.54 KiB) Viewed 137346 times

[iron]

2. this works...i just tested it myself. make sure you have set decimals to 1 of slVal

Indeed it works. I stand corrected

[iron]

Should the first post be edited to include the last file and complete documentation as it has evolved so far ?

[Ath]

The forum doesn't allow posts to be edited after ~4 days (or somewhere in that area), to inhibit spammers to later change their useless first posts into real spam infests.

[chromo23]

Should the first post be edited to include the last file and complete documentation as it has evolved so far ?

The forum doesn't allow posts to be edited after ~4 days (or somewhere in that area), to inhibit spammers to later change their useless first posts into real spam infests.

I think i´ll maybe move to github then....

You will be back with more...

Because you have quite a lot of relays so it seems, it gave me an idea.
I added a new Button that is generated by naming the first value "allNodes". It will send an event to all connected nodes.
This button is colored and will call an event "Taskname+Event" and "Taskname+Long" on long press.
e.g.:

allnodestask.png (16.59 KiB) Viewed 137277 times

allnodes.png (352.21 KiB) Viewed 137277 times

fetch.zip

(57.65 KiB) Downloaded 1174 times

[chromo23]

I reuploaded the last file because there was a typo causing to stop the interval of fetch with a button press. also a minor css error was fixed.

I also added a new type of this dashboard. it´s called fetch-remote. It runs only on one node and fetches the data of the node you click on in the nodelist. comands are send through the main node.
So there is no need to put the file on every device anymore.
@iron
since you where so actively giving me feedback i would appreciate if you could test this...

[chromo23]

All files will be from now on available on github.
Css can be found here: https://github.com/chromoxdor/espeasy_custom-css
The rest here: https://github.com/chromoxdor/easyfetch

a manual will be added soon...

[iron]

@iron
since you where so actively giving me feedback i would appreciate if you could test this...

When a node has no Tasks enabled then the tiles of the "main node" appear on that node as well

[chromo23]

When a node has no Tasks enabled then the tiles of the "main node" appear on that node as well

Jep.. i see.. two rare conditions.
1. no task at all
2. all tasks disabled

should be fixed now. and for each condition there should be a tile present that links to the devices page.
plese try the test.html in github

Edit: and i changed the behavior of the nodelist. it stays now open until you click the closebutton.. makes more sense with the remote fetch

[iron]

Shouldn't the sidebar also be able to close from the same 3 bars it opens ? (from a desktop point of view)

[iron]

Seems like the event is not generated properly now ?

A local button event now results to this :

339179: HTTP: SendTo,undefined,'event,SysInfoEvent'

[chromo23]

Seems like the event is not generated properly now ?

A local button event now results to this :

339179: HTTP: SendTo,undefined,'event,SysInfoEvent'

I am not sure what you mean but i did some fixes just two minutes ago. maybe this solves it...
And we also should move over to github for issues.

EDIT: and try to longpress the nodenames in the sidelist..

[chromo23]

Some things have changed since the last update. most of it got much easier to use und i added also some new stuff.
From now on it is only one file, because country dependent values can now be set in espeasy.
And since the size is the same it needs no extra fetch-remote file. The file provided here will be always remote. So if you have many nodes you need to put this file only on one of them.

n1.png (43.16 KiB) Viewed 136877 times

So what´s new?:
- Better mobile layout for three big values
- Colored option for the big value Tiles when the taskname consist of “bigValC” (otherwise only “bigVal”)
- You can call an item of a “bigVal” Task something that consists “clock”/”time”, “date”, “year” to get this displayed independent of the value. (german speaking person can also use “uhr” and “datum” -> for date format with dots)

n2.png (57.64 KiB) Viewed 136877 times

bv1.png (25.22 KiB) Viewed 136877 times

-Every itemvalue of a task can have its own unit. Therefore add “?<unit>“ to the itemname (e.g. Temperature?°C or Humidity?H)
Notice: ?% is not an option because you´ll get an error message in espeasy so H is translated to % when displayed.
- You can hide itemnames and values: add “XX” to the itemname (e.g. HumidityXX for name and value or for hiding only the name leave it empty or just name it “?°C” to keep the unit)

s1.png (61.31 KiB) Viewed 136871 times

- To make a buttontile, call the first! itemname “btnState” (a button whose color is dependent of the btnState 0=no color 1=blue) or “btnStateC” (this button is independent from its state always blue)

- Alert: whenever the value of “btnState” or “btnStateC” is 2 the tile becomes red.

a1.png (20.32 KiB) Viewed 136877 times

- Slider: there are two types of slider. The “normal” slider and the “time set slider”

-The normal slider: There are two versions too.
- 1.the slider with values displayed: name a task something consisting of “vSlider” and every item will become a Slider with values shown while sliding
- 2. the slider with values hidden: name a task something consisting of “nvSlider”
- For both kinds of slider you can set a minimum, a maximum and the steps.
- To achieve this add ?<minimum>?<maximum>?<steps> to the itemname (e.g. slider?0?100?0.1)
Notice: if you use this you must use it altogether. Standard values if unset are min=0 max=1023 step=1.

vS1.png (25.5 KiB) Viewed 136877 times

- The time set slider: Name a task something consisting of “tSlider” and every item will become a time set slider.
- The time set slider stores the values of both times in one number. This makes it easier to store these values with the regulator - level control plugin since only one plugin for both values is needed
- This slider has two thumbs for two time values (e.g. on and off time). Both times are stored in the corresponding itemvalue. The code example shows how to make use of it:

Code: Select all

On tSlider do
Let,1,[tSlider#Mo_Fr#D0.0]/60
Let,2,[tSlider#Mo_Fr#F]%60
Let,3,[tSlider#Mo_Fr]*10000-[tSlider#Mo_Fr#F]*10000)/60
Let,4,[var#3]%60
Let,3,[var#3]/60
endon

On Clock#Time=All,"[Var#1#F]:[Var#2#D2]" do
gpio,2,1
endon
On Clock#Time=All,"[Var#3#F]:[Var#4#D2]" do
gpio,2,0
endon

ts.png (35.25 KiB) Viewed 136877 times

- Every tile calls an event (except big values): <taskname>event or when long pessed <taskname>long (e.g. “buttonevent” or “buttonlong”)
- Every slider calls an event when finished sliding. (“sliderevent”)
- Clicking on the unitname on top enters fullscreen on supported browsers
- Longpress/click on the nodes opens a new window with the device settings page of the node
- Last but not least: if you call the first item of a task “allNodes” the an event is send to all devices that are visible in the nodelist

The fetch.html file can be found here: https://github.com/chromoxdor/easyfetch

[Patou]

Hello friends,
Thanks for the Dashboard, I took some time to read and understand all the evolution of the included features. This is work in progress. As the progress is already quiet far, I took the time to make some kind of tutorial for other interested people.
Chromo23 : please read it carefully and correct my errors in understanding you work. You can include the tutorial in your github page if you find it a good idea.
Ath : may be you could include the work of Chromo23 in the readdoc on the espeasy page so you can also use part of this document.
Fell free to come with new suggestions for this dashboard ... Eventually more colors for the buttons or to make the button change state on the GPIO monitor event. This saves devices !! (limited number of 12 devices in esp8266)
The document is in google drive : with this link : https://docs.google.com/document/d/1rmj ... ue&sd=true
Have a nide day
Patou

[chromo23]

I have no access to the doc. please make it public or add it as an attachment in the forum.

[Patou]

Sorry I made it public now.
Here is the link https://docs.google.com/document/d/1rmj ... ue&sd=true

[chromo23]

Today is iframe day....

i embedded the espeasy web ui into the dashboard. so no need for extra open tabs and nice live feedback while creating all the buttons, slider and big numbers...

iframe.gif (975.77 KiB) Viewed 136671 times

you dont see it in the video. but a short press on the nodes opens the dashboard and a longpress opens also the corresponding webui

[TD-er]

Wow, looks nice !

[chromo23]

Thanks...
and if anyone just tried to download it.. please download it again. i forgot to push the recent files to github..

[TD-er]

Is the iframe you showed already present in the latest code on your Github?
I tried it but I don't see the iframe switching

[chromo23]

it should in the files i uploaded 38 minutes ago...
but i`ll check.. maybe i made a mistake

and you have to klick on the nodename for a second

[TD-er]

[...]
and you have to klick on the nodename for a second

That last hint was what I missed.

[chromo23]

and the split view only appears with a window size greater than 1024px.... otherwise the whole page will be just the webui

[chromo23]

I changed the button behavior for the iframe-overlay!

The house symbol now opens an closes the the iframe. no long press/click on the nodenames

[iron]

I changed the button behavior for the iframe-overlay!

The house symbol now opens an closes the the iframe. no long press/click on the nodenames

Add the GitHub link to your signature please

[iron]

@TD-er

After uploading a file :

"...
Upload OK!
You may need to reboot to apply all settings...Upload finished
..."

Make the "reboot" text into an actual reboot link please