Skip to content

Home

Jump to bottom
chromoxdor edited this page Mar 26, 2022 · 23 revisions

If you like my work consider a donation: donate

If you are looking for nice styling of the ESPeasy ui try my css: https://github.com/chromoxdor/espeasy_custom-css

easyfetch - dashboard for ESPeasy

Easyfetch is a alternative dashboard in tile optic for ESPeasy (https://github.com/letscontrolit/ESPEasy). It was created to have a quick and relatively simple way of visualizing data and interacting with the hardware (buttons & slider) in a browser. Especially where no bigger infrastructure like a homeautomation server is needed (the ability to write complex rules in espeasy and the ability of communication between the nodes via a simple p2p-network can often make a full blown home automation system unnecessary).

fetch

Overview:

The Dashboard consists of different elements with different purposes:

  1. main-section: the tasks you have in espeasy are rendered here in tiles. There are a lot of options to customize these. There are 3 possible categories:

    1. big-values
    2. slider
    3. the rest: buttons and "normal" tiles

  2. unit-menu: Here are all the units listed, that are connected via the controller called ESPEasy P2P Networking (https://espeasy.readthedocs.io/en/latest/Controller/C013.html)

    • next to the unitname is the unitnumber.
    • the symbol "⊙" leading the unitname marks the unit wich serves the easyfetch.html

  3. unit-name: the unit-name of the unit that is actual selected. next to it is the signalstrength in dBm of this unit.

    • clicking it enters fullscreen mode on supported browsers

  4. menu and splitview buttons:

    • the left button opens the unit-list
    • the right button opens the devices-page of the espeasy unit in a splitview for easier dashboard creation (on smartphones it overlays the page instead because of limited space). If long-clicked this button leaves easyfetch and directs to the tools page of the selected unit.
main

Creating a Dashboard:

Here you can see the corresponding devices page of the unit: "testesp":

main split

Install:

  1. Download the fetch.html or better for limited space the fetch.html.gz to your computer. (It is also possible to name it index.htm or index.htm.gz to replace the main page)

  2. Use a browser and open your ESPEasy Device at http://<ESP_DEVICE_IP>    (Note: replace <ESP_DEVICE_IP> with your device's Local IP Address)

  3. Go to the "Tools" Tab

  4. Select the "Filesystem->File browser" button.

  5. Click the "Upload" button.

  6. Click the "Browse..." button and select the fetch.html file.

  7. Click the "Upload" button.

  8. Repeat steps 4-7 for the custom esp.css file if you want a custom css (e.g. darkmode).

Use your browser to view the new dashboard: http://<ESP_DEVICE_IP>/fetch.html You should now see all the ESPEasy device tasks and states. (Note: For multiple espeasy devices in a network you´ll need only one device with the fetch.html as a primary device when all communicate via the p2p controller)

Display options:

1. ordinary Tile:

  • Each task is without further ado rendered as a tile. These tiles are arranged by their tasknumbers.

  • On the upper left is the taskname and aligned right if present are the valuenames and their values

  • These tiles (and the buttons too) can be clicked and longclicked and trigger an event which can be accessed in rules

    • if clicked short <taskname>event and if longclicked <taskname>long
    • rulesexample: 
      
on sensorevent do
dosomething
endon

  • Every value of a task can have its own unit. Therefore add “?<unit>“ to the valuename (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 valuenames and their 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

2. Buttons:

  • Buttons are basically ordinary tiles where the valuenames/values are not rendered

  • They have the ability to change their color depending on their state

  • There are two options to generate a button tile:

    1. Name the first value of a Task "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) button simple (the device here is a sonoff s20 and since we do not need the first button, since its the hardwarebutton, on our dahboard we can hide it with the "XX" option. the second button is the actual relay so the state changes depending on the gpio state)

      The rule for it:

      
  On buttonevent do
   gpiotoggle,12
  endon

    2. Name a dummy device something that consists "dButtons" and every value becomes a button.

      • You can add an option for colorbuttons with "?C"(see picture below)
      • put "&<unit_number>" to the end of the valuename to send this buttonevent to a specific device. (e.g. valuename "button&2" will result in this command: SendTo,2,"event,ButtonEvent")
      • put "&A" to the end of the valuename and the event will be send to all connected nodes
      b1 b1f

  • Alert: whenever the value of “btnState” / “btnStateC” or any value in a "dButtons" task is 2 the tile becomes red.

3. Slider

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

  • Every slider calls an event when finished sliding. (e.g. “sliderevent”)

  • To create a slider name a dummy device either "vSlider", "nvSlider" or "tSlider"

    • 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 ??? 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

    • The "time" slider: Name a task something consisting of “tSlider” and every item will become a "time" slider.

    • The "time" 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 taskvalue. The code example shows how to make use of it:


 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

4. Big values

  • Big values are displayed when the taskname consist of “bigVal” or if colored “bigValC”

  • 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 persons can also use “uhr” / "zeit", “datum” -> for date format with dots and "jahr")

    n2 bv1

5. Additional things

  • Thingspeak: add a thingspeak value to display the last value of a field of a public thingspeak channel, use this scheme for a valuename: "name&&" optional you can give it a unit of measurement with ? (like in every other field):

ts1 ts1f

ts2ts2f

  • Grid layout (desktop view):

    • the amount of colums (1,2,3 or maximum 4) is determined by the ammount of tiles.

      • 1 tile = one colum
      • 2 - 4 tiles = 2 colums
      • 5 - 9 tiles = 3 colums
      • > 9 tiles = 4 colums

    • The amount of "big values" however is prioritized for rendering the grid layout and constraints it.

      • e.g. if a 4 colum grid is preferred just create a dummy-device with 4 values and call it "bigVal" but if you only have 3 values to display you can add an empty "big value" tile by calling an valuename "noval" or hide it with "XX" gridnorm
        grid_noval grid_XX

    • with this "trick" you can have a 2 colum grid layout even wihout displaying any "big values": grid_2

Display options overview:

(options are case sensitive!)

Options via taskname:

The taskname needs to contain one of these phrases. E.g. 1bigVal, bigVal1, bigVal2, bigValtwo,...

  • dButtons --- creates an array of buttons (dummy device)
  • bigVal / bigValC --- creates "big values" (any device)
  • vSlider / nvSlider --- creates an array of "normal" slider (dummy device)
  • tSlider --- creates an array of "time" slider (dummy device)
  • XX --- hides the task (any device)

Options via valuename:

The valuename needs to contain one of these phrases.

  • btnState / btnStateC --- renders a button if beein the first value (any device)
  • clock / time / uhr / zeit --- valuename for displaying the time set in espeasy (big values)
  • date / datum --- valuename for displaying the date set in espeasy (big values)
  • year / jahr --- valuename for displaying the year set in espeasy (big values)
  • XX --- append this to the valuename to hide it (any value)

These options needs to be at the and of the valuename:

  • Thingspeak (latest value of a field of a public channel ): "&<thingspeakchannel>&<field>" --- (any valuename)

  • vSlider / nvSlider: "?<min>?<max>?<step>" (hint: change the amount of digits of the value to correspond with the stepsize)

This options needs to be at the very end and of the valuename: (e.g. "iamaslider?0?100?0.5?ms)

  • "?<UM>" --- unit of measurement (any valuename)
  • "&<unit_number>" or "&A" --- sends the event to the specific unit or if "A" to all units (only dButtons)
Clone this wiki locally