WebMenu

WebMenu

The library provides esp8266 drivers to serve the menu as a web-page, automating menu navigation and values input/output. The web-page uses Web-Sockets to update field values without refreshing the page, with a fall back of common web-link that will refresh the page when needed.

There is also a JSON IO available for web-sockets and http.

assuming webmenu is a device name.

http://webmenu/ serves a static web page that can serve as a cover, you can customize this page.

http://webmenu/menu?at=/ access the auto-generated menu pages, on this case the root.

http://webmenu/json?at=/ access the JSON output with root page state

all above modes accept a menu path parameter to activate options, update fields or set navigation state. The same path control is available for web-sockets, with JSON output

menu path

the http at parameter or the websocket string sent should contain a menu path using character / as a separator.

/ menu main page (root) /0 use first option

• if its a sub-menu, navigate into it, path can continue into submenus by separating indexes with / ex: /0/1/3
• execute some action if its a regular prompt
• change value if it its a toggle option
• ignored on other controls

Setting values

lets say /0 is a toggle field, we can toggle it by calling its path, but we can also set it to enumerated values, lets say it has values "No"/"Yes", then:

/0/0 will set it to "No"

/0/1 will set it to "Yes"

The same technique can be used to update text or numeric fields.

web-sockets should send a null terminated string.

while issuing menu requests a response is provided that can, depending on the output device, be translated to and html page or a JSON response.

JSON Response

This is an JSON output example for a menu root.

while on a menu page you can use the browser console and the function menu(...) to send web-socket requests.

{
  "output":"",
  "menu":{"title":{"prompt":"Main menu"},
  "path":"","sel":"0",
  "items":[
    {"idx":"0","enabled":"1","selStart":">","prompt":"Led: ","value":"Off","options":["On","Off"]},
    {"idx":"1","enabled":"1","selStart":" ","prompt":"Action A"},
    {"idx":"2","enabled":"1","selStart":" ","prompt":"Action B"},
    {"idx":"3","enabled":"1","selStart":" ","prompt":"On" ,"field":"50","range":            
    {"low":"0","high":"100","step":"10","tune":"1"},"unit":"ms"},
    {"idx":"4","enabled":"1","selStart":" ","prompt":"Select" ,"select":"Zero","options":["Zero","One","Two"]},
    {"idx":"5","enabled":"1","selStart":" ","prompt":"Choose" ,"choose":"Last","options":            
    ["First","Second","Third","Last"]}
  ]
  }
}

.menu.title.prompt current menu prompt

.menu.path path of current menu page

.menu.sel current selection (not important on async interfaces as web)

.menu.items list of menu items (prompts/fields/pads)

sub-menus display as single prompts and form a new menu page/state when activated

note: Choose fields not yet implemented on web-page side.

Menu prompts

all items have some common info with prompts

ex:

{"idx":"1","enabled":"1","selStart":" ","prompt":"Action A"}

.idx option/field path index number
.enable 0/1 disabled/enabled
.prompt option title, can be empty

[.cursor] cursor character optional and not relevant for web
[.selStart] cursor start, optional and not relevant for web
[.selEnd] cursor end, optional and not relevant for web

Fields

ex:

{
  "idx":"1",
  "enabled":"1",
  "cursor":" ",
  "prompt":"",
  "field":"0.00",
  "range":{
    "low":"0.00",
    "high":"100.00",
    "step":"10.00",
    "tune":"1.00"
  },
  "unit":"%"
}

complements prompt info with:
.field current value of the field
.range and object containing field boundaries and update info
.unit field unit text to draw after the field value

Field Range

.low minimum value allowed, DO NOT SET OUTSIDE RANGE
.high maximum value
.step normal value adjust step
.tune tuning value adjust step

Text fields

ex:

{"idx":"1","enabled":"1","selStart":" ","prompt":"Key","editCursor":" ","text":"XXXXXX"}

complements prompt info with:
.text current text value .editCursor not important for web

Toggle/Select/Choose field

ex:

{
  "idx":"6",
  "enabled":"1",
  "selStart":" ",
  "prompt":"Demo:",
  "value":"Off",
  "options":["Off","On"]
}

complements prompt info with:
.value the current field value text, the actual value is an index of options list
.option a list of possible value strings ordered by index, start at 0

Pad options

Pads are groups of options (sub-menus) that are drawn together as a single option

ex:

{
  "idx":"0",
  "enabled":"1",
  "selStart":">",
  "prompt":"",
  "pad":[
    {"idx":"0","enabled":"1","cursor":" ","prompt":"" ,"field":"1","range": 
    {"low":"1","high":"31","step":"1","tune":"0"},"unit":"/"},
    {"idx":"1","enabled":"1","cursor":" ","prompt":"" ,"field":"1","range":            
    {"low":"1","high":"12","step":"1","tune":"0"},"unit":"/"},
    {"idx":"2","enabled":"1","cursor":" ","prompt":"" ,"field":"2000","range": 
    {"low":"2000","high":"2100","step":"10","tune":"1"},"unit":""}
  ]
}

they complement the prompt with:
.pad a list of prompts/fields