mhttpd.js
This page contains the full API reference for mhttpd.js: the HTML classes and attributes that show and edit ODB values on custom pages, and the library's functions.
For how to write custom pages, with examples and screenshots, see Custom pages: overview and Custom pages: ODB widgets.
Files to include
| File | Required | Purpose |
|---|---|---|
midas.js |
 |
The JSON-RPC calls used to read and write the ODB (midas.js) |
controls.js |
|
Dialogs, e.g. for editing values (controls.js) |
mhttpd.js |
|
The widgets and functions on this page |
midas.css |
The standard midas appearance, including the styles for modbtile and modbswitch |
Page set-up
Page elements
| Element | Purpose |
|---|---|
<body class="mcss"> |
The standard midas styles |
<div id="mheader"> |
Filled with the standard header by mhttpd_init() |
<div id="msidenav"> |
Filled with the side menu by mhttpd_init() |
<div id="mmain"> |
Holds the page's own content |
mhttpd_init()
mhttpd_init(current_page, interval, callback) sets up the header, side menu and widgets, then refreshes the widgets periodically. Call it once, from the onload handler of <body>.
| Parameter | Required | Default | Description |
|---|---|---|---|
current_page |
The last part of the URL's page parameter |
The page title. An error is shown if there is no title and no page parameter |
|
interval |
1000 |
Time between refreshes, in milliseconds | |
callback |
Function called once the header and side menu have been created |
The refresh can be changed later with mhttpd_set_refresh_interval(interval) and paused with mhttpd_refresh_pause(true) (and restarted with mhttpd_refresh_pause(false)).
ODB widgets
Each widget is an HTML element with one of the classes below. The library also finds elements with a name attribute instead (e.g. name="modbvalue"), but don't use both on the same element. Widgets added to the page later are set up on the next refresh.
Common attributes and properties
These work with all the widget classes that read an ODB value, unless the tables below say otherwise.
| Attribute | Description |
|---|---|
data-odb-path |
ODB path to read, including an optional array index such as [2]. Under /Equipment/<name>/Variables/, the index can be a quoted name instead, e.g. Inputs['ADC1']. See named array entries. A value that doesn't start with / but contains (...) is evaluated as JavaScript that returns the path, e.g. sensorPath('ADC1') |
data-formula |
JavaScript expression applied to the value before it is shown, with the value in x, e.g. 2*x+3 |
data-format |
Display format. See format strings |
onload |
JavaScript run once, when the first value has been read |
onchange |
JavaScript run when the value changes. Some graphical widgets run it on every refresh |
| Property or method | Description |
|---|---|
element.value |
The latest value (after data-formula). For a modb element on an ODB directory, an object with lower-case keys |
element.setValue(value, tid) |
Set the value from JavaScript, for widgets without data-odb-path. tid is a TID_xxx type, default TID_DOUBLE. Bars, thermometers and gauges redraw; modbvalue stores the value and runs its callbacks, but doesn't update its text |
Named array entries
In data-odb-path and data-status-path, a path of the form /Equipment/<name>/Variables/<array>['<entry>'] selects an array element by name. When mhttpd_init() starts, it reads the names from /Equipment/<name>/Settings/Names <array>, or /Equipment/<name>/Settings/Names if that doesn't exist, and replaces the name with its index before the first refresh.
- The name must be quoted, with
'or", and match an entry exactly. - The names are only read once, for the elements on the page when
mhttpd_init()runs. Reload the page if their order changes. - A name that isn't found is reported in the browser console, and the path is left unchanged.
modb
An invisible element that reads a value or a whole ODB directory, for use in JavaScript.
| Attribute | Required | Default | Description |
|---|---|---|---|
data-odb-path |
|
ODB path of a value or directory | |
onload, onchange |
Callbacks, with the value in this.value |
modbvalue
Shows a value as text, optionally with an inline editor.
| Attribute | Required | Default | Description |
|---|---|---|---|
data-odb-path |
|
ODB path of the value | |
data-format |
Depends on the ODB type | Display format. See format strings | |
data-formula |
Expression applied to the value, using x |
||
data-odb-editable |
0 |
1 lets the user click the value to edit it |
|
data-input |
0 |
1 always shows an input field instead of the text |
|
data-size |
20, or the length of the current value if longer | Width of the editor, in characters | |
data-validate |
Name of a function called as f(value, element) before an edit is written. Return false to reject the edit |
||
data-confirm |
Message of an OK/Cancel dialog shown before an edit is written | ||
data-label |
Label shown before the value. Only used inside a modbtile |
||
data-unit |
Unit shown after the value. Only used inside a modbtile |
||
onload, onchange |
Callbacks, with the value in this.value |
Unless data-odb-editable or data-input is set, the element's contents are replaced by the value.
modbtile
A grey box holding one or more values, with an optional label and a colored status bar on its left. For one value, set data-odb-path on the tile. For several, put modbvalue elements inside the tile instead.
| Attribute | Required | Default | Description |
|---|---|---|---|
data-odb-path |
One value | ODB path of the value, for a tile with one value | |
data-format, data-formula, data-unit, data-odb-editable, data-confirm |
Passed to the value of a one-value tile. See modbvalue |
||
data-label |
Label shown at the top of the tile | ||
data-layout |
horizontal |
vertical stacks the values instead of placing them side by side |
|
data-height |
Natural height | Height of the tile as a CSS length, e.g. 40px or 3em. A number without a unit is in pixels. The whole tile is scaled to fit, keeping its proportions |
|
data-color |
Grey | JavaScript expression returning the CSS color of the status bar. See tile expressions | |
data-blinking |
JavaScript expression. The status bar pulses while it is true. See tile expressions | ||
data-status-path |
ODB path of an extra value used only in the expressions, as status. It isn't shown |
If the expressions can't be evaluated, the tile sets these attributes:
| Attribute | Description |
|---|---|
data-color-error |
Why data-color failed (the status bar is grey) |
data-blinking-error |
Why data-blinking failed (the status bar doesn't pulse) |
Tile expressions
data-color and data-blinking are evaluated after all the tile's values have been read. They can use:
| Variable | Description |
|---|---|
value |
The first value (the same as values[0]) |
values |
All the tile's values, in HTML order, after their formulas but before formatting |
status |
The value of data-status-path |
If any value can't be read or is not a finite number, the tile shows — and the status bar is grey.
Tile CSS classes
| Class | Element |
|---|---|
modbtile-label |
The tile's label |
modbtile-value-label |
The label of each value |
modbtile-item > .modbvalue |
Each value |
modbtile-unit |
The unit of each value |
modbbutton
A button that writes a fixed value.
| Attribute | Required | Default | Description |
|---|---|---|---|
data-odb-path |
|
ODB path to write | |
data-odb-value |
|
Value written when the button is clicked | |
data-validate |
Name of a function called as f(button) before writing. Return false to cancel |
modbcheckbox and modbswitch
<input type="checkbox"> elements that show a flag and write 1 or 0 when clicked. modbswitch looks like a sliding switch; without data-odb-path it only provides the appearance.
| Attribute | Required | Default | Description |
|---|---|---|---|
data-odb-path |
|
ODB path of a boolean or integer flag | |
data-validate |
Name of a function called as f(checked, element) before writing. Return false to reject the change |
||
onload, onchange |
Callbacks |
modbselect
A <select> element that writes the value of the selected <option>.
| Attribute | Required | Default | Description |
|---|---|---|---|
data-odb-path |
|
ODB path to read and write | |
data-auto-options |
0 |
1 fills an empty <select> with the values in the ODB array Options <key name>, next to the key |
|
data-validate |
Name of a function called as f(value, element) before writing. Return false to reject the change |
||
onload, onchange |
Callbacks |
modbbox
A box whose background shows one of two colors.
| Attribute | Required | Default | Description |
|---|---|---|---|
data-odb-path |
|
ODB path of the value | |
data-formula |
Expression using x, e.g. x > 10 or x & 1 |
||
data-color |
|
CSS color used when the value (after the formula) is true or positive | |
data-background-color |
No background | CSS color used otherwise |
Set the box's size with CSS.
modbhbar and modbvbar
Horizontal and vertical bars, filled from the minimum to the maximum. The filled part uses the element's CSS color, and the rest its background-color.
| Attribute | Required | Default | Description |
|---|---|---|---|
data-odb-path |
ODB path of the value. Without it, set the value with setValue() |
||
data-min-value |
0 |
Value at the empty end | |
data-max-value |
1 |
Value at the full end | |
data-log |
0 |
1 for a logarithmic scale (a minimum of 0 becomes 0.001) |
|
data-print-value |
0 |
1 shows the value inside the bar |
|
data-format, data-formula |
See common attributes | ||
CSS width, height |
Size of the bar | ||
onload, onchange |
Callbacks |
mhaxis and mvaxis
Horizontal and vertical axes to draw next to a bar. They don't read the ODB.
| Attribute | Required | Default | Description |
|---|---|---|---|
CSS width, height |
|
Size of the axis | |
data-min-value |
0 |
Value at the start of the axis | |
data-max-value |
1 |
Value at the end of the axis | |
data-log |
0 |
1 for a logarithmic axis |
|
data-line |
1 |
0 hides the axis line, leaving only the ticks and labels |
modbthermo
A thermometer.
| Attribute | Required | Default | Description |
|---|---|---|---|
CSS width, height |
|
Size in pixels | |
data-min-value |
|
Value at the bottom | |
data-max-value |
|
Value at the top | |
data-odb-path |
ODB path of the value. Without it, set the value with setValue() |
||
data-color |
Black | CSS color of the fluid and outline | |
data-background-color |
No background | CSS color inside the glass | |
data-border |
true |
false hides the glass outline |
|
data-scale |
0 |
1 shows the minimum and maximum |
|
data-print-value |
0 |
1 shows the value below the thermometer |
|
data-format, data-formula |
See common attributes | ||
onload, onchange |
Callbacks |
modbgauge
A semicircular gauge. A height of about half the width (plus 15 pixels if data-scale="1") fits it best.
| Attribute | Required | Default | Description |
|---|---|---|---|
CSS width, height |
|
Size in pixels | |
data-min-value |
|
Value at the left end | |
data-max-value |
|
Value at the right end | |
data-odb-path |
ODB path of the value. Without it, set the value with setValue() |
||
data-color |
Black | CSS color of the filled part, or a list of value/color pairs. See gauge colors | |
data-background-color |
#B8B8B8 |
CSS color of the unfilled part | |
data-frame |
Any value draws an outline around the gauge | ||
data-scale |
0 |
1 shows the minimum and maximum |
|
data-print-value |
0 |
1 shows the value |
|
data-format, data-formula |
See common attributes | ||
onload, onchange |
Callbacks |
modbgauge2
A 270-degree gauge with rounded ends.
| Attribute | Required | Default | Description |
|---|---|---|---|
CSS width, height |
|
Size in pixels | |
data-min-value |
0 |
Value at the start of the arc | |
data-max-value |
1 |
Value at the end of the arc | |
data-odb-path |
ODB path of the value. Without it, set the value with setValue() |
||
data-color |
Black | CSS color of the filled part, or a list of value/color pairs. See gauge colors | |
data-background-color |
#B8B8B8 |
CSS color of the unfilled part | |
data-line-width |
Chosen from the size | Thickness of the arc, in pixels | |
data-title |
Title in the middle of the gauge | ||
data-scale |
0 |
1 shows the minimum and maximum |
|
data-print-value |
0 |
1 shows the value |
|
data-format, data-formula |
See common attributes | ||
onload, onchange |
Callbacks |
Gauge colors
data-color of modbgauge and modbgauge2 is either a CSS color, or a list of value/color pairs in ascending order of value, e.g. [[0, 'green'], [30, 'orange'], [40, 'red']]. Each color is used from its value up to the next one. The older form [{0, 'green'}, {30, 'orange'}] is also accepted.
Format strings
Used by data-format. Text before and after the format is shown as it is, e.g. T = %f1 °C.
| Format | ODB types | Result |
|---|---|---|
%d |
Integers | Decimal, e.g. 1234 |
%t |
Integers, floating point | With thousands separators, depending on the browser's locale |
%x |
Integers | Hexadecimal, e.g. 0x4D2 |
%b |
Integers | Binary, with a trailing b |
%fN |
Numbers | N digits after the decimal point, e.g. %f1. Note that this is not the C format %.1f |
%pN |
Numbers | N significant digits |
%eN |
Numbers | Exponential notation with N digits after the decimal point |
[color1,color2] |
Booleans | A colored box: color1 for false, color2 for true |
A format can contain several codes, e.g. %d / %x / %b. The older forms without % (e.g. f3) still work.
CSS classes
These classes are defined in midas.css. The classes of the widgets, tiles and tabs are described in their own sections.
| Class | Use on | Description |
|---|---|---|
mcss |
<body> |
The standard midas fonts, link colors and widget styles |
mtable |
<table> |
A panel with a rounded green border, as on the built-in pages. Rows are shaded alternately |
mtableheader |
<th> |
The blue title bar of an mtable. Use colspan to span the table |
mtabletitle |
<tr> |
A row of column headings in an mtable |
mbutton |
<button>, <input type="button"> |
The standard button style. It only changes the appearance; see modbbutton for buttons that write to the ODB |
mbox |
Any element | Rounded corners. Usually combined with a status color |
mgreen, mred, myellow, morange, mgray, mblue |
Any element | Background in one of the status colors |
mseparator |
<div> |
A grey horizontal line |
grayout |
Any element | Fades the element, e.g. to show that it is disabled |
The status colors are also defined as CSS variables, for use in your own styles and in widget colors (e.g. var(--mgreen)):
| Variable | Value |
|---|---|
--mgreen |
#a0ffb8 |
--mred |
#ff9ca6 |
--myellow |
#fff58b |
--morange |
#ffc585 |
--mgray |
#B0B0B0 |
--mblue |
#91d6ff |
Tabs
| Class | Element | Description |
|---|---|---|
mtabs |
Container | Holds the tab buttons |
mtab |
Tab button | data-target is the ID of the panel it shows |
mpanel |
Panel | The content of a tab |
active |
Tab button and panel | Added to the tab and panel shown initially |
Functions and variables
Functions
function dlgOdbEdit(path)
odb edit single value dialog box
Defined in resources/mhttpd.js:523
function dlgOdbEditKeydown(event, input)
Defined in resources/mhttpd.js:491
function dlgOdbEditSend(b)
Defined in resources/mhttpd.js:509
function evalPath(path)
Defined in resources/mhttpd.js:2413
function get_options_path(odb_path)
Defined in resources/mhttpd.js:2406
function getMElements(name)
Defined in resources/mhttpd.js:1430
function haxisDraw(ctx, x1, y1, width, line, minor, major, text, label, grid, xmin, xmax, logaxis)
Defined in resources/mhttpd.js:2040
function mhttpd_add_menu_items(html, custom, current_page, path, level)
Defined in resources/mhttpd.js:1312
function mhttpd_alarm_is_snoozed()
Defined in resources/mhttpd.js:4321
function mhttpd_alarm_play()
Defined in resources/mhttpd.js:4534
function mhttpd_alarm_play_now()
Defined in resources/mhttpd.js:4445
function mhttpd_alarm_retry_pending()
Defined in resources/mhttpd.js:4555
function mhttpd_alarm_snooze(seconds)
Defined in resources/mhttpd.js:4325
function mhttpd_alarm_snooze_clear()
Defined in resources/mhttpd.js:4346
function mhttpd_alarm_snooze_close_menus()
Defined in resources/mhttpd.js:4361
function mhttpd_alarm_snooze_remaining()
Defined in resources/mhttpd.js:4298
function mhttpd_alarm_snooze_select(event, seconds)
Defined in resources/mhttpd.js:4382
function mhttpd_alarm_snooze_toggle_menu(event)
Defined in resources/mhttpd.js:4367
function mhttpd_alarm_snooze_update_buttons()
Defined in resources/mhttpd.js:4388
function mhttpd_cancel_transition()
Defined in resources/mhttpd.js:4106
function mhttpd_close_message()
Defined in resources/mhttpd.js:3583
function mhttpd_create_page_handle_cancel(mouseEvent)
Defined in resources/mhttpd.js:3908
function mhttpd_create_page_handle_create(mouseEvent)
Defined in resources/mhttpd.js:3828
function mhttpd_delete_page_handle_cancel(mouseEvent)
Defined in resources/mhttpd.js:4047
function mhttpd_delete_page_handle_delete(mouseEvent, xpath)
Defined in resources/mhttpd.js:3975
function mhttpd_disable(id)
Defined in resources/mhttpd.js:716
function mhttpd_disable_button(button)
Defined in resources/mhttpd.js:629
function mhttpd_enable(id)
Defined in resources/mhttpd.js:710
function mhttpd_enable_button(button)
Defined in resources/mhttpd.js:635
function mhttpd_error(error)
Defined in resources/mhttpd.js:3811
function mhttpd_error_clear()
Defined in resources/mhttpd.js:3821
function mhttpd_escape(s)
stupid javascript does not have a function to escape javascript and html characters to make it safe to assign a json string to p.innerHTML. What gives? K.O.
Defined in resources/mhttpd.js:230
function mhttpd_exec_script(name)
Defined in resources/mhttpd.js:859
function mhttpd_find_menuitem(current_page, submenu, path = "")
Defined in resources/mhttpd.js:1292
function mhttpd_fit_message(m)
Defined in resources/mhttpd.js:3593
function mhttpd_gauge2_draw()
Defined in resources/mhttpd.js:1794
function mhttpd_gauge_band(ctx, cx, cy, outer, inner, start, end)
Trace an annular band with small rounded corners at both radial ends.
Defined in resources/mhttpd.js:1627
function mhttpd_gauge_draw()
Defined in resources/mhttpd.js:1643
function mhttpd_get_display_time(sec)
Returns time to display in status bar and history. By default show local time, but through the config page the user can select the server time zone or any other time zone
Defined in resources/mhttpd.js:573
function mhttpd_getParameterByName(name)
Defined in resources/mhttpd.js:749
function mhttpd_goto_page(page, param)
Defined in resources/mhttpd.js:754
function mhttpd_haxis_draw()
Defined in resources/mhttpd.js:1979
function mhttpd_hide(id)
Defined in resources/mhttpd.js:694
function mhttpd_hide_button(button)
Defined in resources/mhttpd.js:684
function mhttpd_hide_overlay(overlay)
Defined in resources/mhttpd.js:739
function mhttpd_init(current_page, interval, callback)
Defined in resources/mhttpd.js:904
function mhttpd_init_overlay(overlay)
Defined in resources/mhttpd.js:722
function mhttpd_link_page_handle_cancel(mouseEvent)
Defined in resources/mhttpd.js:3970
function mhttpd_link_page_handle_link(mouseEvent)
Defined in resources/mhttpd.js:3913
function mhttpd_menu_shortcuts(menu)
Annotate built-in menu links, including menus restored from older session caches.
Defined in resources/mhttpd.js:883
function mhttpd_message(msg, chat)
Defined in resources/mhttpd.js:3658
function mhttpd_navigation_bar(current_page, path)
Defined in resources/mhttpd.js:760
function mhttpd_pause_run(ret)
Defined in resources/mhttpd.js:4073
function mhttpd_reconnect()
Defined in resources/mhttpd.js:3559
function mhttpd_refresh(boost)
Defined in resources/mhttpd.js:2441
function mhttpd_refresh_history()
Defined in resources/mhttpd.js:3538
function mhttpd_refresh_pause(flag)
Defined in resources/mhttpd.js:1422
function mhttpd_reset_alarm(alarm_name)
Defined in resources/mhttpd.js:4134
function mhttpd_resize_header()
Defined in resources/mhttpd.js:2400
function mhttpd_resize_message()
Defined in resources/mhttpd.js:3576
function mhttpd_resize_sidenav()
Defined in resources/mhttpd.js:2383
function mhttpd_resume_run(ret)
Defined in resources/mhttpd.js:4090
function mhttpd_scale_tile(tile)
Resolve the CSS length in the tile's font context, then scale its whole rendered box.
Defined in resources/mhttpd.js:1442
function mhttpd_set_className(e, v)
Defined in resources/mhttpd.js:675
function mhttpd_set_firstChild_data(e, v)
Defined in resources/mhttpd.js:657
function mhttpd_set_innerHTML(e, v)
Defined in resources/mhttpd.js:666
function mhttpd_set_refresh_interval(interval)
Defined in resources/mhttpd.js:1426
function mhttpd_set_style_display(e, v)
Defined in resources/mhttpd.js:649
function mhttpd_set_style_visibility(e, v)
Defined in resources/mhttpd.js:641
function mhttpd_show_menu(flag)
Defined in resources/mhttpd.js:835
function mhttpd_speak(time, text)
Defined in resources/mhttpd.js:4577
function mhttpd_speak_now(text)
Defined in resources/mhttpd.js:4565
function mhttpd_start_run(ret)
Defined in resources/mhttpd.js:4052
function mhttpd_stop_run(ret)
Defined in resources/mhttpd.js:4056
function mhttpd_submenu(o)
Defined in resources/mhttpd.js:1401
function mhttpd_thermo_draw()
Defined in resources/mhttpd.js:1484
function mhttpd_toggle_menu()
Defined in resources/mhttpd.js:853
function mhttpd_unhide(id)
Defined in resources/mhttpd.js:702
function mhttpd_unhide_button(button)
Defined in resources/mhttpd.js:689
function mhttpd_unhide_overlay(overlay)
Defined in resources/mhttpd.js:744
function mhttpd_vaxis_draw()
Defined in resources/mhttpd.js:1938
function mhttpdConfig()
Defined in resources/mhttpd.js:4250
function mhttpdConfigODB(callback)
Defined in resources/mhttpd.js:4215
function mhttpdConfigSet(item, value)
Defined in resources/mhttpd.js:4268
function mhttpdConfigSetAll(new_config)
Defined in resources/mhttpd.js:4282
function mie_back_to_link(p, path)
odb inline edit - make element a link to inline editor
Defined in resources/mhttpd.js:252
function mie_link_to_edit(p, cur_val, size)
odb inline edit - convert link to edit field
Defined in resources/mhttpd.js:415
function mie_to_string(tid, jvalue, format)
convert json dom values to text for display and editing this is similar to db_sprintf()
Defined in resources/mhttpd.js:37
function ODBConfirmInlineEdit(flag, p)
called from ODBFinishInlineEdit if element has 'confirm' flag
Defined in resources/mhttpd.js:306
function ODBFinishInlineEdit(p, path)
odb inline edit - write new value to odb
Defined in resources/mhttpd.js:335
function ODBInlineEdit(p, odb_path)
odb inline edit - start editing
Defined in resources/mhttpd.js:451
function ODBInlineEditKeydown(event, p, path)
odb inline edit - key-press handler
Defined in resources/mhttpd.js:391
function parseColorSpec(str)
Defined in resources/mhttpd.js:2421
function vaxisDraw(ctx, x1, y1, height, line, minor, major, text, label, grid, ymin, ymax, logaxis)
Defined in resources/mhttpd.js:2218
Variables
let count_audio = 0
Defined in resources/mhttpd.js:4293
let inside_new_audio = false
Defined in resources/mhttpd.js:4292
let last_audio = null
Defined in resources/mhttpd.js:4291
let mhttpd_alarm_play_pending = false
Defined in resources/mhttpd.js:4294
const
const mhttpd_alarm_snooze_storage_key = "mhttpdAlarmSnoozeUntil"
Defined in resources/mhttpd.js:4296
let mhttpd_config_defaults = {…}
Defined in resources/mhttpd.js:4166
let mhttpd_initialized = false
Defined in resources/mhttpd.js:880
let mhttpd_last_alarm = 0
Defined in resources/mhttpd.js:2404
let mhttpd_refresh_boost
Defined in resources/mhttpd.js:878
let mhttpd_refresh_history_id
Defined in resources/mhttpd.js:874
let mhttpd_refresh_history_interval
Defined in resources/mhttpd.js:877
let mhttpd_refresh_id
Defined in resources/mhttpd.js:873
let mhttpd_refresh_interval
Defined in resources/mhttpd.js:875
let mhttpd_refresh_paused
Defined in resources/mhttpd.js:876
let mhttpd_spinning_wheel
Defined in resources/mhttpd.js:879
let run_state_names = {1: "Stopped", 2: "Paused", 3: "Running"}
Defined in resources/mhttpd.js:12
let serverTimezoneOffset = undefined
Defined in resources/mhttpd.js:14
let transition_names = {…}
Defined in resources/mhttpd.js:16