{{Pagelinks}}
= Links =
<div style="column-count:3;-moz-column-count:3;-webkit-column-count:3">
* [[Mhttpd|mhttpd MIDAS web server]]
* [[ODB Page]]
* [[Custom Page]]
* [[/Custom ODB tree]]
* [[Mhttpd.js|MIDAS Javascript library (mhttpd.js)]]
* [[mjsonrpc|MIDAS JSON RPC library functions (mjsonrpc)]]
* [[odbedit]]
</div>

= Introduction =
;NOTE
: Since 2018, many of the features described here can now be implemented more simply using the mod* JS functions (see [[Custom Page|Custom Web Page]]).
: '''If writing a new web page, it is strongly recommended you make use of the mod*JS features. '''

This page describes some of the special features provided for use on a user-created [[Custom Page|Custom Web Page]] using the [[#The MIDAS Javascript Library]], which was the recommended way to write Custom Pages before the [[Custom Page#modb* Javascript scheme]] was available.

<br><br>

= The MIDAS Javascript Library =
The MIDAS Javascript Library [[mhttpd.js]] includes routines written in Javascript and AJAX to provide features useful for writers of [[Custom Page]]s, such as access to the ODB. Recently asynchronous [[mjsonrpc|JSON-RPC functions]] using [[mjsonrpc#Javascript client library|Promises]] has been added (January 2016).
;NOTE
:To use functions in this library, it '''must be [[mhttpd.js#include js lib|included in the HTML code]]'''.

Many of the older routines (ODBGet, ODBSet) use '''synchronous''' RPC requests. With synchronous request, a second RPC request must wait until the first request is complete. This can significantly slow down web pages where many calls to ODBGet are made. For this reason, functions were developed that can be synchronous or '''asynchronous''' (e.g. ODBMCopy) that include a callback mechanism. The data from ODBMCopy can be formatted in [[mjsonrpc#JSON general information|JSON]].

Web developers are moving away from synchronous RPC requests, which are now deprecated [https://midas.triumf.ca/elog/Midas/1128]. Some modern browsers return a warning on a synchronous RPC request.

A new group of JSON-RPC functions using [[mjsonrpc#Javascript client library|Promises]] has been added to the MIDAS Javascript Library (January 2016). These are asynchronous only, and they also provide more functionality and have better error handling than the older AJAX calls, which are also inconsistent in how they handle Booleans. They also have much improved handling of reading/writing arrays to the ODB. Before 2018 it was recommended that all new Custom Pages are written using these JSON-RPC functions. {{Important|text=Since 2018 the [[Custom Page#modb* Javascript scheme]] is recommended for new Custom Pages}}.

The MIDAS Javascript Library routines requires an up-to-date browser that supports Promises (see [https://midas.triumf.ca/elog/Midas/1145]). If using an older browser version, the asynchronous AJAX calls (e.g. ODBMCopy) should be used in order to avoid having to rewrite the web page at a later date to remove all synchronous calls.

<br><br>
== Access the ODB using mjson-rpc asynchronous functions ==

Access to the ODB is provided by the [[Mhttpd.js|MIDAS Javascript Library]], which (since January 2016) includes the [[mjsonrpc]] functions. It is [[#The MIDAS Javascript Library|recommended]] that these functions are used for '''new''' pages rather than the older AJAX calls (see below).

To run these functions you need
# to [[mhttpd.js#include js lib|include the Javascript library in the HTML code]]'''
# to use an up-to-date browser that supports Promises (see [https://midas.triumf.ca/elog/Midas/1145]).

Examples showing how to read and write to the ODB can be found at [[mjsonrpc#examples]]. Also included are examples using arrays.

<br><br>
== Access the ODB using asynchronous AJAX calls ==
;NOTE
: It is recommended that asynchronous MIDAS JSON-RPC functions are used for new pages rather than the older AJAX calls (see [[#Access the ODB using mjson-rpc asynchronous functions|above]]).

[[#Example 2 : Asynchronous calls using Javascript and AJAX|Example 2]] uses the asynchronous call ODBMCopy() with callback to read the data. The data are converted into JSON format. In this case, when accessing the JSON data, ''the ODB Keynames must be in the same case as they are in the ODB'', even though the case is ignored by the ODB. If you find this feature annoying, use [[#Access the ODB using mjson-rpc asynchronous functions|mjson-rpc function db_get_values()]] as all keynames are converted to lower case.

<br><br>
== Access the ODB using synchronous AJAX requests ==
;NOTE
: Synchronous requests are now deprecated (see [[#The MIDAS Javascript Library|above]]). New pages should be written [[#Using mjson-rpc asynchronous functions]].

See [[#Example 3 : Synchronous Calls using Javascript and AJAX]].

<br><br>
= Access the ODB with HTML-style <span style="color:seagreen font-style:italic"><odb></span> tags =

;NOTE
: This method pre-dates the [[Mhttpd.js|MIDAS Javascript Library]]. It is recommended that the [[Mhttpd.js|MIDAS Javascript Library]] be used for ODB access.

If Javascript (JS) is not available, the older HTML-style {{HtmlTag|tag=<odb>}} tags are still available and provide limited functionality.

The HTML-style {{HtmlTag|tag=<odb>}} tag has been defined for read/write access to the ODB under HTML. The {{HtmlTag|tag=<odb>}} tags are declared within enclosing HTML {{HtmlTag|tag=<form...>....</form>}} tags.

{| style="text-align: left; width: 100%; background-color: rgb(255, 255, 255);" border="3" cellpadding="2" cellspacing="2"
|+ Access to ODB from HTML
|-
| colspan="1" rowspan="1" style="text-align: center; vertical-align: top; background-color: rgb(204, 204, 255); font-weight: bold;" | HTML ODB tag
| colspan="1" rowspan="1" style="text-align: center; vertical-align: top; background-color: rgb(204, 204, 255); font-weight: bold;" | Meaning

|-
| colspan="1" rowspan="1" style="text-align: left; vertical-align: top; background-color: rgb(255, 255, 255); color: seagreen; font-style:italic" |<odb src="odb path">
| colspan="1" rowspan="1" style="text-align: left; vertical-align: top; background-color: rgb(255, 255, 255); color: black" |Display ODB field (read only)

|-
| colspan="1" rowspan="1" style="text-align: left; vertical-align: top; background-color: rgb(255, 255, 255); color: seagreen; font-style:italic" |<odb src="odb path" edit=1 pwd="CustomPwd">
| Display an Editable ODB field (inline style). Optional password protection with '''pwd''' .

|-
| colspan="1" rowspan="1" style="text-align: left; vertical-align: top; background-color: rgb(255, 255, 255); color: seagreen; font-style:italic" |<odb src="odb path" edit=2 pwd="CustomPwd">
| Display an Editable ODB field (popup style). Optional password protection with '''pwd''' .
|}

;NOTE
: The Optional password protection with '''pwd''' (documented in the [http://ladd00.triumf.ca/~daqweb/doc/midas-old/html/RC_customize_ODB.html#RC_Access_Control| OldMidas Document]) may not be working.
: Use the [[/Experiment ODB tree#Security subtree|Web Password security]] instead.

{{HtmlTag|tag=<odb>}} tags are included in the HTML code e.g.

{{Html|text= Experiment Name: <odb src="/Experiment/Name"> <br> Run Number: <odb src="/runinfo/run number" edit=1>}}

See also [[Custom Page#How to write a Custom Page|HTML Custom Page example]].

<br><br>
= ODB RPC access =
The [[Mhttpd.js|MIDAS Javascript Library]] function ODBRpc() defined for RPC access.

This permits buttons on MIDAS "custom" web pages to invoke RPC calls directly into user frontend programs, for example to turn hardware modules on or off.

<br><br>
= JSON support =
[[mjsonrpc#JSON general information|JSON]] support is provided with the [[Mhttpd.js|MIDAS Javascript Library]].

<br><br>
= Access to the MIDAS Menu buttons =

;NOTE
: '''New (since 2018) custom pages using the [[Custom Page#modb* Javascript scheme]] should follow the instructions there to include the standard MIDAS Menu buttons.'''
<br><br>
Access to the standard MIDAS Menu buttons can be provided with HTML {{HtmlTag|tag=<input...>}} tags of the form:


{{Html|text=<input name="cmd" value=''<button-name>'' type="submit" >}}
Valid values are the standard MIDAS Menu buttons, i.e. (Start, Pause, Resume, Stop, ODB, Elog, Alarms, History, Programs etc). The {{HtmlTag|tag=<input...>}} tags must be declared within enclosing HTML {{HtmlTag|tag=<form...>....</form>}} tags (see above).

The following HTML fragment shows the inclusion of three of the standard buttons, giving access to the Main Status, ODB and Messages pages :

{{Html|text= <form name="form1" method="Get" action="/CS/MyExpt&"> <br> <input name="cmd" value="Status" type="submit"> <br> <input name="cmd" value="ODB" type="submit"> <br> <input name="cmd" value="Messages" type="submit"> <br> ... <br> </form> }}

See also [[#Redirect]].

<br><br>
= Redirect =

When buttons are included on a Custom Page, after pressing a button (e.g. the Start or Stop button) it may be desirable to return to the same custom page, rather than returning to the [[Status Page]].

This can be done by including an HTML {{HtmlTag|tag=<input...>}} tag with the attributes ''type'' set to "hidden" and ''name'' set to "redir". This name ("redir") is detected by [[Mhttpd]], causing a redirect to the specified custom link in the ''value'' attribute.

For example, the following redirects the screen back to the custom page link {{Odbpath|path=/Custom/my_custom_page&}} when buttons are pressed:
{{Html|text=<input type=hidden name="redir" value="my_custom_page&">}}

See also [[#Replace Status Page by a Custom page|Redirect when a Custom Page replaces the Status Page]].
<br><br>

= CustomScript Buttons =

[[/Customscript ODB tree#Customscript-button|CustomScript buttons]] can be provided on [[Custom Page|Custom Pages]]. These buttons are equivalent to optional '''script buttons''' on the [[Status Page]], which call a script to perform a particular action when the button is pressed. See [[/Script ODB tree#Script-button|script buttons]] for details. Customscript buttons can be set up through the [[/Customscript ODB tree]].

Any key <span style="color:purple; font-style:italic">/CustomScript/test</span> will appear as a customscript-button
<span style="color: #444444; background-color: #CCCCCC; font-style:italic; font-size: 90; padding:0.25em;padding-left: 0.5em;padding-right: 0.5em;border:1px solid #808080;border-radius: 5px;margin-bottom:1px;">test</span> on a custom page whose code includes an HTML {{HtmlTag|tag=<input...>}} tag of the form:
{{Html|text=<input type=submit name=customscript value="test">}}
where the action of the button <span style="color: #444444; background-color: #CCCCCC; font-style:italic; font-size: 90; padding:0.25em;padding-left: 0.5em;padding-right: 0.5em;border:1px solid #808080;border-radius: 5px;margin-bottom:1px;">test</span> will be found in the <span style="color:purple; font-style:italic">/customscript/test</span> subdirectory.

After pressing a customscript-button, the ''type=submit'' in the HTML {{HtmlTag|tag=<input>}} will cause a page reload. This will result in a switch to the [[Status Page]], unless a [[#redirect]] input tag is included to redirect back to the original custom page.

== Customscript button without a page reload ==
To define a customscript button that does '''not''' cause a page reload, set the ''type'' in the HTML {{HtmlTag|tag=<input>}} to "button", i.e.
{{Html|text=<input name="customscript" value="test" type="button" onClick=cs_button(this.value)> }}
and use ''"onClick"'' to call a function to [[#Send an Ajax Request]] instead. The following function sends an asynchronous request, with an optional callback.
{{HtmlTag|tag=<script>}}
<div style="background-color:floralwhite; color:steelblue; font-style:italic">
function cs_button(cmd, callback)<br>
{ // send a request to execute a custom script
: var url;
: var request = XMLHttpRequestGeneric();
:
: url = ODBUrlBase
: if(document.getElementById("redir") != null)
:: url += '?redir='+document.getElementById('redir').value
: url+='&customscript='+ encodeURIComponent(cmd);
: request.open('GET', url, true); // asynchronous request
: request.send(null);
: if(callback!=undefined) {
:: request.onreadystatechange = function() {
::: if (request.readyState == 4) {
:::: if (request.status == 200)
::::: callback();
:::: else
::::: alert('cs_button: Error after sending request to Custom Script "'+cmd+'" :\nHTTP Status: '+request.status)
::: }
:: }
: }
: else {
:: if (request.status != 200)
::: alert('cs_button: Error after sending request to Custom Script "'+cmd+'" :\nHTTP Status: '+request.status)
: }
}
</div>
{{HtmlTag|tag=</script>}}

<br><br>
= Resource files =
== MIDAS resource files ==
A number of resource files have been provided in the MIDAS packages under {{Filepath|path=../packages/midas/resources}}. When including a MIDAS resource file, no key in {{Odbpath|path=/Custom}} needs to be defined as the MIDAS resources directory is searched automatically.

One such resource file is a condensed stylesheet {{File|name=midas.css}} for users who would like their custom pages to have a similar "look and feel" to that of the standard pages. To include the MIDAS stylesheet, in the HTML header, add
{{HtmlTag|tag=<link rel="stylesheet" type="text/css" href="midas.css">}}
Other resource files can provide [[Custom Page#How to use the standard MIDAS navigation bars on your custom page|the standard MIDAS navigation bars]].

== Custom resource files ==
It is often desirable to serve resource files (i.e. '''local files''' such as an external stylesheet, javascript files or images'''<sup>***</sup>''') to a custom page. The following sections describe two alternative ways of serving resource files to a custom page:
* [[#Resource files served WITH /custom/path key defined|with /custom/path key defined]]
* [[#Resource files served WITHOUT /custom/path key defined|without /custom/path key defined]]
See also serving resources to a [[#Replace Status Page by a Custom Status page|Custom Status page]].
;NOTE
: '''<sup>***</sup>''' To superimpose labels, bars or fills onto an image, the image cannot be served as a resource file. See [[#Image insertion]].

=== Resource files served WITH <span style="color: purple; font-style:italic;">/custom/path</span> key defined ===
When a number of resource files are required, it is convenient to place them in the same directory on the disk, and create a key {{Odbpath|path=/Custom/Path}} to contain this directory.

$ ls /home/midas/online/custom/
custom_functions.js custom_globals.js custom_page.html custom_stylesheet.css test_image.png
With the {{Odbpath|path=/Custom/Path}} key defined, [[/Custom ODB tree#Custom-Link|custom-links]] for individual resource files need not be created in the {{Odbpath|path=/Custom/Path}} tree. The custom-link {{Odbpath|path=custom_page&}} '''is''' required so that the custom page can be accessed from the [[/Custom ODB tree#Custom-Button|custom-button]] {{Button|name=custom_page}} on the Status Page. The key name ends in the special character "&" so that it will open in the same window as the Status page (see [[/Custom ODB tree#Key names|key names]]).
$ odbedit
[local:exp:S] ls /custom
path /home/midas/online/custom/
custom_page& custom_page.html

A {{HtmlTag|tag=<script>}} tag for each resource file to be served (specifying the file name) is then placed in the header of {{File|name=custom_page.html}}
i.e.
{{Html|text=<script type="text/javascript" src="custom_functions.js"></script>}}
{{Html|text=<script type="text/javascript" src="custom_globals.js"></script>}}
<br> and a {{HtmlTag|tag=<link>}} tag for an external stylesheet
{{Html|text=<link type="text/css" rel="stylesheet" href="custom_stylesheet.css" title="Stylesheet">}}
An image tag is placed in the body of {{File|name=custom_page.html}}
{{Html|text=<img src="test_image.png"> }}
[[mhttpd]] then loads the resource file from the directory indicated by the Path key with the correct MIME type (see [[/Custom ODB tree#Keys in the /Custom tree|Custom tree keys]] for supported MIME types).

=== Resource files served WITHOUT <span style="color: purple; font-style:italic;">/custom/path</span> key defined ===
Alternatively, resource files can be served to a [[Custom Page]] by creating a key for every resource file in the [[/Custom ODB tree]]. These keys must contain the full path of the file on the disk, and the key {{Odbpath|path=/Custom/Path}} must NOT be defined. The resource files can be in different directories on the disk. By defining the key names with an appropriate file extension, the resource files are served with the appropriate MIME types. The key names end in the special character "!" so that they will not appear on the Status page as custom-links (see [[/Custom ODB tree#Key names|key names]].

Without the {{Odbpath|path=/Custom/Path}} key, the links for the above example in the {{Odbpath|path=/Custom}} tree might look like
$ odbedit
[local:exp:S] ls /custom
custom_page& /home/midas/online/custom/custom_page.html
custom_functions.js! /home/midas/online/resources/custom_functions.js
globals.js! /home/midas/online/resources/custom_functions.js
stylesheet.css! /home/midas/online/stylesheets/custom_stylesheet.css
image.png! /home/midas/images/test_image.png

assuming the resource files are now in the subdirectories indicated.
The {{HtmlTag|tag=<script>}} tag for each resource file to be served (specifying the custom-link) is then placed in the header of {{File|name=custom_page.html}}
i.e.
{{Html|text=<script type="text/javascript" src="custom_functions.js!"></script>}}
{{Html|text=<script type="text/javascript" src="globals.js!"></script>}}
<br> and a {{HtmlTag|tag=<link>}} tag for an external stylesheet
{{Html|text=<link type="text/css" rel="stylesheet" href="stylesheet.css!" title="Stylesheet">}}
An image tag is placed in the body of {{File|name=custom_page.html}}
{{Html|text=<img src="image.png!"> }}

<br><br>

The resulting Demo custom page is shown in Figure 1, which can be compared with Figure 2 (no stylesheet).
{| class="wikitable"
|-
! Figure 1 !! Figure 2
|-
| Demo Custom Page using MIDAS stylesheet || Demo Custom Page
|-

| [[File:Mhxcustom03.jpg|thumb|300px]] || [[File:Mhxcustom02.jpg|thumb|200px]]
|}
<br clear=all>

<br><br>
= Alias-Buttons and Hyperlinks =
Any hyperlink can easily be included on a [[Custom Page]] by using the standard HTML anchor {{HtmlTag|tag=<a...>}} tag, e.g.
{{Html|text=<a href="http://ladd00.triumf.ca/~daqweb/doc/midas/html/">Midas Help</a>}}

Links on a custom page equivalent to [[/Alias ODB tree#Alias-Buttons|alias-buttons]] can also be made e.g.
{{Html|text=<button type="button" onclick="document.location.href='/Alias/alias&';">alias</button>}}
See the [[/Alias ODB tree]] for details.

<br><br>
= Page refresh =
The following {{HtmlTag|tag=<meta...>}} tag included in the HTML header code will cause the whole custom page to refresh in 60 seconds :
{{Html|text=<meta http-equiv="Refresh" content="60">}}
It is also possible to [[#Periodic update of parts of a custom page|periodically update parts]] of a custom page.

<br><br>
= Periodic update of parts of a custom page =

The functionality of [[Mhttpd.js|ODBGet]] together with the window.setInterval() function
can be used to update parts of the web page periodically.
For example the Javascript fragment below contains a function which updates the current run number every 10 seconds in the background:

<div style="background-color:floralwhite; color:steelblue; font-style:italic"> 
window.setInterval("Refresh()", 10000);<br>
function Refresh() {<br>
:document.getElementById("run_number").innerHTML = ODBGet('/Runinfo/Run number');<br>
}
</div>
The custom page has to
* [[Mhttpd.js#include js lib|include the MIDAS JS library]] to access ODBGet
* contain an element with id="run_number", such as
{{Html|text=<td id="run_number"></td>}}

<br><br>
= Display last MIDAS message(s) =

The message log (see [[Message System]]) can be accessed from a custom page using a call to the JavaScript library function [[Mhttpd.js|ODBGetMsg]] (provided the [[Mhttpd.js#include js lib|JS library is included]]).

This allows the inclusion of the "Last Midas message" on a custom page, e.g.
{{JS|text=document.write('Last message:'+ODBGetMsg("midas",0,1))}}
More messages may be displayed by increasing the third parameter to ODBGetMsg.
;Note
: Parameters were changed August 2015. See [[Mhttpd.js|ODBGetMsg]] for older versions.
: Coming soon - a [[mjsonrpc]] function

<br><br>
= Generate a message log entry =

A custom page can generate a message to be sent to the MIDAS message log (see [[Message System]]). A call to mjsonrpc_cm_msg() will generate a message if using the [[mjsonrpc]] functions. Otherwise, use the AJAX function [[Mhttpd.js|ODBGenerateMsg]]. To use these functions, the [[Mhttpd.js#include js lib|JS library must be included]] in the html code.

<br><br>
= Checkboxes =
;NOTE
: '''New (since 2018) custom pages using the [[Custom Page#modb* Javascript scheme]] should use [[Custom Page#modbcheckbox|modbcheckbox]] to create a checkbox.'''
<Br><br>

The function [[Mhttpd.js|ODBSet]] (provided the [[Mhttpd.js#include js lib|JS library is included]]) can be used when one clicks on a checkbox for example:
{{Html|text=<input name="box0" type="checkbox" onClick="ODBSet(my_path, this.checked?'1':'0')">}}
If used as above, the state of the checkbox must be initialized when the page is loaded. This can be done with some JavaScript code called on initialization, e.g.
{{JS|text=document.form1.box0.checked= ODBGet(my_path)); // initialize to the correct value}}

<br><br>
= Replace Status Page by a Custom page =

Click to enlarge thumbnail
[[File:Mhcustom_status.jpg|thumbnail|left|Figure 3: ODB /Custom/Status custom-link to a custom status page]]
<div style="clear: both"></div> 

If a custom-link with the [[/Custom ODB tree#Key names|reserved key name]] '''Status''' (not "Status&" or "Status!") is created in the [[/Custom ODB tree]] (as shown in Figure 3), then that custom page will '''replace the default Status Page'''.

Clicking on the {{Button|name=Status}} button on any of the sub-pages (e.g. [[ODB Page]], [[Programs Page]] etc.) will now return to the Custom Status Page. If there are buttons on the Custom Status page, you '''must''' include a [[#Redirect]] statement of the form
{{Html|text=<input type=hidden name="redir" value="../">}}
or you will see the message
Invalid custom page:NULL path

If the Custom Status page includes [[#Resource files]] served on a regular custom page with a statement such as
{{Html|text=<script type="text/javascript" src="cs_functions!">}}
to serve them in a Custom Status page, the statement would be
{{Html|text=<script type="text/javascript" src="<span style="font-weight:bold">/CS/</span>cs_functions!">}}
In fact, this statement can be used in a regular custom page, as the "/CS/" is ignored in that case.

To return to the default Status Page, delete the <span style="color: purple; font-style:italic;">/Custom/Status</span> key.

<br><br>
= Start, Stop and Check if a program is running =
There are [[mjsonrpc]] functions that implemented all three program management functions - start program,
stop program and "is running?" as JSON-RPC methods.

<br><br>
= Send an Ajax request =
By sending an Ajax request from a custom page, you can make a button perform a specific function.

All functions in midas are controlled through special URLs. So the URL
http://<host:port>/?cmd=Start&value=10
will start run #10.

Although it is easier to use an HTML input statement to [[#Access to the MIDAS Menu buttons]],
to send an Ajax request, you can use the function ''XMLHttpRequestGeneric'' which is in the MIDAS Javascript library [[mhttpd.js]].
Then the HTML code would be

{{Html|text=<input type="button" onclick="start()">}}

and in your JavaScript code add a function ''start()'':

<div style="background-color:floralwhite; color:steelblue; font-style:italic">
function start()
{
: var request = XMLHttpRequestGeneric();

: url = '?cmd=Start&value=10';
: request.open('GET', url, true); // asynchronous request
: request.send(null);
} <br>
</div>
See also [[#Access to the MIDAS Menu buttons]]. Another example with optional callback can be found in [[#Customscript button without a page reload]].

This mechanism can be used for starting a particular program, see for example (see [https://midas.triumf.ca/elog/Midas/1046]). However, this functionality is now provided by [[mjsonrpc]] functions - see [[#Start, Stop and Check if a program is running]].

<br><br>
= Image insertion =
An image can be loaded from the web using an HTML {{HtmlTag|tag=<img...>}}, e.g.
{{Html|text="TRIUMF logo" <img src="https://lixenon.triumf.ca/InternalDocuments/Alice/figures/TRIUMF-logo.jpg/image_preview">}}
or a MIDAS History image can be inserted into a custom page using an HTML {{HtmlTag|tag=<img...>}} tag of the following form:
{{Html|text=blah<img src="http://hostname.domain:port/HS/Meterdis.gif&scale=12h&width=300">}}

If the image file is on the local disk, it can be loaded as a '''resource file'''. The image can be of format .pdf, .jpg, .gif, .png. See loading [[#Resource files]].

If you wish to superimpose features such as '''labels and fills''', the image file cannot be served as a [[#Resource files|resource file]]. Instead, the image file must be in '''gif''' format, and must be included in the {{Odbpath|path=/Custom/images}} subtree (Figure 4). Image insertion into a Custom page will be illustrated using the Demo custom page shown in [[#MIDAS stylesheet|Figure 2]]. All the files required for this demo can be found in the MIDAS package at $MIDASSYS/examples/custom. If you do not wish to create
the keys yourself, proceed to [[#Superimposing Labels, Bars and Fills onto a gif image]].

Make a [[/Custom ODB tree#Custom-Link|custom-link]] to the Demo custom page file ''myexpt.html'' , i.e.
[local:js:S]/>ls /custom
myexpt& /home/test/packages/midas/examples/custom/myexpt.html

To make the image ''myexpt.gif'' visible on the custom page, the path and filename of the image file must be defined in the {{Odbpath|path=/Custom/images}} subtree. To do this,
create the subtrees {{Odbpath|path=/Custom/images/myexpt.gif}} where the subtree name "myexpt.gif" is named for the image file you are going to use. Multiple images can be used, by creating multiple imagefile subtrees.

In the imagefile subtree {{Odbpath|path=myexpt.gif}}, create the STRING key {{Odbpath|path=Background}}, and set it to contain the path and name of the image file. The tree structure should then look similar to Figure 4, minus the labels/bars/fill subtrees which will be added to the ODB later.

The image must also be referenced in the custom HTML file ''myexpt.html'' in the "src" field of an HTML {{HtmlTag|tag=<img...>}} tag, e.g.
{{Html|text=<img '''src="myexpt.gif"'''>}}

Click to enlarge thumbnail
[[File:Mhcustom_images.jpg|thumbnail|left|Figure 4: /Custom/Images ODB Tree]]
<br clear=all>
Once the image is visible, enable [[#HTML mapping]], optionally [[#Display mouse position]] and proceed to [[#Superimposing Labels, Bars and Fills onto a gif image]].

<br><br>
== HTML mapping ==
Note that if additional features such as active clickable areas and labels, bars and fills superimposed on the image are also required, HTML mapping must also be activated with the HTML {{HtmlTag|tag=<map...>}} tag and the "usemap" attribute of the HTML {{HtmlTag|tag=<img>}} tag
{{Html|text= <map '''name="myexpt.map"'''> <br> <img src="myexpt.gif" '''usemap="#myexpt.map"'''> <br>...<br> </map>"}}

<br><br>
== Display mouse position ==
[[File:Cursor.png|thumbnail|left|Figure 5: MEG Gas System Custom Page showing cursor position]]
<div style="clear: both"></div> 

When writing custom pages with large background images and labels and fills placed on that image, it is hard to figure out X and Y coordinates of the labels. This can now be simplified by using the function ''getMouseXY()'' in the development JavaScript built-in library [[develop.js]]. This function supplies the X,Y position of the cursor if an element of ID "'''refimg'''" is present. This JS library '''must be [[develop.js|included in the custom page]]''' in order to use it:

Then, set the "id" attribute of the background HTML {{HtmlTag|tag=<img...>}} tag to "refimg", e.g.

<div style="background-color:floralwhite; color:seagreen; font-style:italic">
: <img '''id="refimg"''' src="ebit_pc.gif" usemap="#Custom1"> 
: <map name="Custom1">
: .....
: </map>
</div>

If the "'''refimg'''" tag is present, the cursor changes into a crosshair, and its absolute and relative locations in respect to the reference image are shown in the status bar (Figure 5).

<br><br>
== Superimposing Labels, Bars and Fills onto a gif image ==
You can enhance your custom page by superimposing multiple features based on ODB variables onto an image (e.g. [[#Display mouse position|Figure 5]]), such as

* labels: "live" ODB values positioned in a particular location of the page
* bars : "bar level" showing graphically ODB values such as levels or rate etc.
* fills : "color level" where colour is used as the level indicator.

Each entry (label/bar/fill) will have an ODB tree associated to it defining the ODB variable path, X/Y position, colour, etc. Each time the page is updated, the latest ODB value/level/rate will be shown based on the ODB parameter to which the label, bar or fill is linked - hence the term "live". The overlay of the requested features is done onto the selected image file.

This powerful new extension brings the [[mhttpd]] capability closer to other experimental web controllers similar to EPICS.

;Note
: Be sure to enable the feature to [[#Display mouse position]] in order to facilitate finding the X,Y positions of the various features.
: [[#HTML mapping]] must be activated for labels/bars/fills to work

A Demo custom page showing labels, bars and fills superimposed on an image is shown in [[#MIDAS stylesheet|Figure 2]].
All the files for this demo can be found in $MIDASSYS/examples/custom/. The file xcustom.odb contains the ODB keys required, including those to insert the image and superimpose the various labels, fills etc. This file can be loaded into the ODB with the {{Odbedit cmd|cmd=load}}.

<br><br>
=== Adding Labels ===

[[File:Mhcustom_label.jpg|thumbnail|left|Figure 6: /Custom/Images/Labels ODB subtree]]

In order to include a readout of ODB values (i.e. labels), on the image, a further ODB subdirectory {{Odbpath|path=/Custom/images/<imagefile.gif/Labels}} must be created. Creating a subdirectory for a particular label i.e. {{Odbpath|path=<label name>}} in the {{Odbpath|path=Labels}} subtree will, at the next custom web page refresh, cause the complete structure for that label to be created and filled with default values. Once the {{Odbpath|path=<label name>}} subtree is created, the user fills the various keys as desired. See [[/Custom ODB tree#Labels subtree]] for details of the various fields. This procedure is repeated for all the labels required, using a unique {{Odbpath|path=<label name>}} subdirectory for each label. An example of a {{Odbpath|path=<label name>}} subtree is shown in Figure 6.

<div style="clear: both"></div> 

<br><br>
=== Adding Bars ===

[[File:Mhcustom_fill.jpg|thumbnail|left|Figure 7: /Custom/Images/Fills ODB subtree]]

In a similar way, Bars can be superimposed on the image. Create a new ODB subdirectory {{Odbpath|path=/Custom/images/<imagefile.gif/Bars}}. Create a subdirectory for a particular Bar ({{Odbpath|path=<bar name>}}) in the {{Odbpath|path=Bars}} subdirectory. Refresh the web page and fill the various keys as desired. See [[/Custom ODB tree#Bars subtree]] for details of the various fields. Examples of a <bar-name> subtree is shown in Figure 7.

<div style="clear: both"></div> 

<br><br>
=== Adding Fills ===
[[File:Mhcustom_bar.jpg|thumbnail|left|Figure 8: /Custom/Images/Bars ODB subtree]]

In a similar way, Fills can be superimposed on the image. Create new ODB subdirectory {{Odbpath|path=/Custom/images/<imagefile.gif/Fills}}. Create a subdirectory for a particular Fill ({{Odbpath|path=<fill name>}}) in the {{Odbpath|path=Fills}} subdirectory. Refresh the web page and fill the various keys as desired. See [[/Custom ODB tree#Fills subtree]] for details of the various fields. Examples of a ({{Odbpath|path=<fill name>}} subtree is shown in Figure 8.

<div style="clear: both"></div> 

<br><br>
== Mapping active areas onto the image ==
Provided [[#HTML mapping]] is activated, "clickable" areas can be created on the image.

This can be done now with a new function like this:
{{Html|text= <area shape="rect" coords="40,200,100,300" alt="Main Valve" href="Custom1?cmd=Toggle&odb=/Equipment/Environment/Variables/Output[2]">}}

This defines a clickable map on top of the custom image. The area(s) should match with some area(s) on the image, e.g. the box of a valve. Determining the co-ordinates of this area is simplified by using the Display mouse position feature.

By clicking on this area, the supplied path to the ODB is used (in this case {{Odbpath|path=/Equipment/Environment/Variables/Output[2]}}) and its value is toggled. If the valve value is then used in the image via a [[#Adding Fills|Fill]] statement to change the color of the valve, it can turn green or red depending on its state. This is illustrated in [[#Display mouse position|Figure 5]].

Clicking an active area can also be made to open a new custom page, for example:
{{Html|text=<area shape=rect coords="687,530, 890,648" alt="Pump detail" href = "Pump!" title="Click for Details">}}
{{Html|text=<area shape=rect coords="560,574,775,662" alt="Buffer Tank detail" href = "BufferTank!" title="Click for Details">}}
where ''Pump!'' and ''BufferTank!'' are defined as links to custom pages in the [[/Custom ODB tree]].

<br><br>
== Edit boxes floating on top of a graphic ==

An edit box can be placed on top of a graphic in a particular position by means of an HTML <span style="color:green"><div></span> tag. Using the ODBEdit function from the Midas JS library [[Mhttpd.js]], the custom page code would look like this:

{| style="text-align: left; width: 100%; background-color: floralwhite;" border="0" cellpadding="1" cellspacing="1"
|-
|<pre style="background-color:floralwhite; color:seagreen; font-style:italic">
<div style="position:absolute; top:100px; left:50px;">
<script type="text/javascript"> </pre>
<pre style="background-color:floralwhite; color:steelblue; font-style:italic;">
document.write('Run number: ')
path='/runinfo/run number'
rn = ODBGet(path)
document.write('<a href="#" onclick="ODBEdit(path)" >')
document.write(rn)
document.write('</a>');</pre>
<pre style="background-color:floralwhite; color:seagreen; font-style:italic;">
</script>
</div>
<img src="custom.gif">
</pre>
|}

The same thing could be done with the HTML-style {{HtmlTag|tag=<odb>}} tag :
<pre style="background-color:floralwhite; color:seagreen; font-style:italic">
<div style="position:absolute; top:100px; left:50px;">
Run number: <odb src="/Runinfo/run number" edit=1>
</div>
<img src="custom.gif">
</pre>

<br><br>

= Examples =
For more examples of accessing the ODB with the Javascript library [[mhttpd.js]] look at the example experiment in the MIDAS package $MIDASSYS/examples/javascript1/example.html.

== Example 1 : Asynchronous calls using mjsonrpc functions ==
See [[mjsonrpc#examples]]

== Example 2 : Asynchronous calls using Javascript and AJAX ==

Example 2 shows html code illustrating the use of ODBMCopy(), where innerHTML is used to display the data. On a page with images or a lot of data, innerHTML allows you to update variables without having to reload the whole page. In the example, a timer causes the page to update every 10s (reread the data). Often the ODB data for the whole page can be read by one asynchronous ODBMCopy() call, rather than scattering synchronous ODBGet() calls throughout the page.

Access to the ODB is provided by the [[Mhttpd.js|MIDAS Javascript Library]], included with the line <span style="color:green"><script src='mhttpd.js'></script></span>.

<div style="background-color:floralwhite; color:seagreen; font-style:italic">
<html> <br>
<head> <br>
<title>MyTitle</title> <br>
<script src='mhttpd.js'></script>
<script> </div>
<div style="background-color:floralwhite; color:steelblue; font-style:italic">
var updatePeriod = 10000; // in msec <br>
var updateTimerId = 0; <br>
var counter=0; <br>
function update() { <br>
:clearTimeout(updateTimerId); <br>
: load();
: if (updatePeriod > 0)
: updateTimerId = setTimeout('update()', updatePeriod);
} <br>
function load() { <br>
: document.getElementById('LastUpdated').innerHTML = "Updating..." + new Date;
: var paths = [ "/Runinfo", "/Experiment"];
: var data_odb=ODBMCopy(paths, mcopy_callback, "json")
: counter++;
: document.getElementById('counter').innerHTML = 'Counter: '+ counter
} <br>
function mcopy_callback(data) { <br>
: var obj= JSON.parse(data);
: var runinfo=obj[0];
: document.getElementById('rn').innerHTML = 'Run Number ='+ parseInt(runinfo["Run number"]);
: document.getElementById('state').innerHTML ='Run State= '+ runinfo.State;
: var experiment=obj[1];
: document.getElementById('name').innerHTML='Experiment name = '+ experiment.Name <br>
}<br> </div>
<div style="background-color:floralwhite; color:seagreen; font-style:italic">
</script> <br>
</head> <br>
<body> <br>
<b>Javascript code using ODBMCopy with callback</b> <br>
The data on the page is updated every 10 sec using a timer<br>
<p id="LastUpdated" > Last updated: never</p><br>
<p id="rn"> Run Number : unknown </p><br>
<p id="state"> State : unknown</p><br>
<p id="name"> Experiment name : unknown </p><br>
<p id="counter">Counter: zero </p><br>
<script type="text/javascript"> </div>
<div style="background-color:floralwhite; color:steelblue; font-style:italic">
: if (updatePeriod > 0)
: update(); </div>
<div style="background-color:floralwhite; color:seagreen; font-style:italic">
</script> <br>
</body> </html></div>

<br><br>
== Example 3 : Synchronous Calls using Javascript and AJAX ==
In the following example, JS functions ODBGet and ODBEdit from the [[Mhttpd.js|MIDAS Javascript Library]] are used to access the ODB.
;NOTE
# Synchronous calls are now deprecated (see [[#The MIDAS Javascript Library|above]]).
# The Javascript library '''must be [[mhttpd.js#include js lib|included in the HTML code]]'''.

{{Html|text=<script>}}
{{JS|text=document.write ('Experiment Name: '+ ODBGet("/Experiment/Name")) <br> var alarm_path="/alarms/Alarm system active"; <br> var alarm_active=ODBGet(alarm_path); <br> document.write('<a href="#" onclick="ODBEdit(alarm_path)" >'+alarm_active+'</a>')}}
{{Html|text=</script>}}

[[Category:Custom]]

2025-05-12T12:17:48Z

Rudzki: /* Example 4 : Interactive SVG custom page */

{{Pagelinks}}
= Links =
<div style="column-count:3;-moz-column-count:3;-webkit-column-count:3">
* [[Mhttpd|mhttpd MIDAS web server]]
* [[ODB Page]]
* [[Custom Page]]
* [[/Custom ODB tree]]
* [[Mhttpd.js|MIDAS Javascript library (mhttpd.js)]]
* [[mjsonrpc|MIDAS JSON RPC library functions (mjsonrpc)]]
* [[odbedit]]
</div>

= Introduction =
;NOTE
: Since 2018, many of the features described here can now be implemented more simply using the mod* JS functions (see [[Custom Page|Custom Web Page]]).
: '''If writing a new web page, it is strongly recommended you make use of the mod*JS features. '''

This page describes some of the special features provided for use on a user-created [[Custom Page|Custom Web Page]] using the [[#The MIDAS Javascript Library]], which was the recommended way to write Custom Pages before the [[Custom Page#modb* Javascript scheme]] was available.

<br><br>

= The MIDAS Javascript Library =
The MIDAS Javascript Library [[mhttpd.js]] includes routines written in Javascript and AJAX to provide features useful for writers of [[Custom Page]]s, such as access to the ODB. Recently asynchronous [[mjsonrpc|JSON-RPC functions]] using [[mjsonrpc#Javascript client library|Promises]] has been added (January 2016).
;NOTE
:To use functions in this library, it '''must be [[mhttpd.js#include js lib|included in the HTML code]]'''.

Many of the older routines (ODBGet, ODBSet) use '''synchronous''' RPC requests. With synchronous request, a second RPC request must wait until the first request is complete. This can significantly slow down web pages where many calls to ODBGet are made. For this reason, functions were developed that can be synchronous or '''asynchronous''' (e.g. ODBMCopy) that include a callback mechanism. The data from ODBMCopy can be formatted in [[mjsonrpc#JSON general information|JSON]].

Web developers are moving away from synchronous RPC requests, which are now deprecated [https://midas.triumf.ca/elog/Midas/1128]. Some modern browsers return a warning on a synchronous RPC request.

A new group of JSON-RPC functions using [[mjsonrpc#Javascript client library|Promises]] has been added to the MIDAS Javascript Library (January 2016). These are asynchronous only, and they also provide more functionality and have better error handling than the older AJAX calls, which are also inconsistent in how they handle Booleans. They also have much improved handling of reading/writing arrays to the ODB. Before 2018 it was recommended that all new Custom Pages are written using these JSON-RPC functions. {{Important|text=Since 2018 the [[Custom Page#modb* Javascript scheme]] is recommended for new Custom Pages}}.

The MIDAS Javascript Library routines requires an up-to-date browser that supports Promises (see [https://midas.triumf.ca/elog/Midas/1145]). If using an older browser version, the asynchronous AJAX calls (e.g. ODBMCopy) should be used in order to avoid having to rewrite the web page at a later date to remove all synchronous calls.

<br><br>
== Access the ODB using mjson-rpc asynchronous functions ==

Access to the ODB is provided by the [[Mhttpd.js|MIDAS Javascript Library]], which (since January 2016) includes the [[mjsonrpc]] functions. It is [[#The MIDAS Javascript Library|recommended]] that these functions are used for '''new''' pages rather than the older AJAX calls (see below).

To run these functions you need
# to [[mhttpd.js#include js lib|include the Javascript library in the HTML code]]'''
# to use an up-to-date browser that supports Promises (see [https://midas.triumf.ca/elog/Midas/1145]).

Examples showing how to read and write to the ODB can be found at [[mjsonrpc#examples]]. Also included are examples using arrays.

<br><br>
== Access the ODB using asynchronous AJAX calls ==
;NOTE
: It is recommended that asynchronous MIDAS JSON-RPC functions are used for new pages rather than the older AJAX calls (see [[#Access the ODB using mjson-rpc asynchronous functions|above]]).

[[#Example 2 : Asynchronous calls using Javascript and AJAX|Example 2]] uses the asynchronous call ODBMCopy() with callback to read the data. The data are converted into JSON format. In this case, when accessing the JSON data, ''the ODB Keynames must be in the same case as they are in the ODB'', even though the case is ignored by the ODB. If you find this feature annoying, use [[#Access the ODB using mjson-rpc asynchronous functions|mjson-rpc function db_get_values()]] as all keynames are converted to lower case.

<br><br>
== Access the ODB using synchronous AJAX requests ==
;NOTE
: Synchronous requests are now deprecated (see [[#The MIDAS Javascript Library|above]]). New pages should be written [[#Using mjson-rpc asynchronous functions]].

See [[#Example 3 : Synchronous Calls using Javascript and AJAX]].

<br><br>
= Access the ODB with HTML-style <span style="color:seagreen font-style:italic"><odb></span> tags =

;NOTE
: This method pre-dates the [[Mhttpd.js|MIDAS Javascript Library]]. It is recommended that the [[Mhttpd.js|MIDAS Javascript Library]] be used for ODB access.

If Javascript (JS) is not available, the older HTML-style {{HtmlTag|tag=<odb>}} tags are still available and provide limited functionality.

The HTML-style {{HtmlTag|tag=<odb>}} tag has been defined for read/write access to the ODB under HTML. The {{HtmlTag|tag=<odb>}} tags are declared within enclosing HTML {{HtmlTag|tag=<form...>....</form>}} tags.

{| style="text-align: left; width: 100%; background-color: rgb(255, 255, 255);" border="3" cellpadding="2" cellspacing="2"
|+ Access to ODB from HTML
|-
| colspan="1" rowspan="1" style="text-align: center; vertical-align: top; background-color: rgb(204, 204, 255); font-weight: bold;" | HTML ODB tag
| colspan="1" rowspan="1" style="text-align: center; vertical-align: top; background-color: rgb(204, 204, 255); font-weight: bold;" | Meaning

|-
| colspan="1" rowspan="1" style="text-align: left; vertical-align: top; background-color: rgb(255, 255, 255); color: seagreen; font-style:italic" |<odb src="odb path">
| colspan="1" rowspan="1" style="text-align: left; vertical-align: top; background-color: rgb(255, 255, 255); color: black" |Display ODB field (read only)

|-
| colspan="1" rowspan="1" style="text-align: left; vertical-align: top; background-color: rgb(255, 255, 255); color: seagreen; font-style:italic" |<odb src="odb path" edit=1 pwd="CustomPwd">
| Display an Editable ODB field (inline style). Optional password protection with '''pwd''' .

|-
| colspan="1" rowspan="1" style="text-align: left; vertical-align: top; background-color: rgb(255, 255, 255); color: seagreen; font-style:italic" |<odb src="odb path" edit=2 pwd="CustomPwd">
| Display an Editable ODB field (popup style). Optional password protection with '''pwd''' .
|}

;NOTE
: The Optional password protection with '''pwd''' (documented in the [http://ladd00.triumf.ca/~daqweb/doc/midas-old/html/RC_customize_ODB.html#RC_Access_Control| OldMidas Document]) may not be working.
: Use the [[/Experiment ODB tree#Security subtree|Web Password security]] instead.

{{HtmlTag|tag=<odb>}} tags are included in the HTML code e.g.

{{Html|text= Experiment Name: <odb src="/Experiment/Name"> <br> Run Number: <odb src="/runinfo/run number" edit=1>}}

See also [[Custom Page#How to write a Custom Page|HTML Custom Page example]].

<br><br>
= ODB RPC access =
The [[Mhttpd.js|MIDAS Javascript Library]] function ODBRpc() defined for RPC access.

This permits buttons on MIDAS "custom" web pages to invoke RPC calls directly into user frontend programs, for example to turn hardware modules on or off.

<br><br>
= JSON support =
[[mjsonrpc#JSON general information|JSON]] support is provided with the [[Mhttpd.js|MIDAS Javascript Library]].

<br><br>
= Access to the MIDAS Menu buttons =

;NOTE
: '''New (since 2018) custom pages using the [[Custom Page#modb* Javascript scheme]] should follow the instructions there to include the standard MIDAS Menu buttons.'''
<br><br>
Access to the standard MIDAS Menu buttons can be provided with HTML {{HtmlTag|tag=<input...>}} tags of the form:


{{Html|text=<input name="cmd" value=''<button-name>'' type="submit" >}}
Valid values are the standard MIDAS Menu buttons, i.e. (Start, Pause, Resume, Stop, ODB, Elog, Alarms, History, Programs etc). The {{HtmlTag|tag=<input...>}} tags must be declared within enclosing HTML {{HtmlTag|tag=<form...>....</form>}} tags (see above).

The following HTML fragment shows the inclusion of three of the standard buttons, giving access to the Main Status, ODB and Messages pages :

{{Html|text= <form name="form1" method="Get" action="/CS/MyExpt&"> <br> <input name="cmd" value="Status" type="submit"> <br> <input name="cmd" value="ODB" type="submit"> <br> <input name="cmd" value="Messages" type="submit"> <br> ... <br> </form> }}

See also [[#Redirect]].

<br><br>
= Redirect =

When buttons are included on a Custom Page, after pressing a button (e.g. the Start or Stop button) it may be desirable to return to the same custom page, rather than returning to the [[Status Page]].

This can be done by including an HTML {{HtmlTag|tag=<input...>}} tag with the attributes ''type'' set to "hidden" and ''name'' set to "redir". This name ("redir") is detected by [[Mhttpd]], causing a redirect to the specified custom link in the ''value'' attribute.

For example, the following redirects the screen back to the custom page link {{Odbpath|path=/Custom/my_custom_page&}} when buttons are pressed:
{{Html|text=<input type=hidden name="redir" value="my_custom_page&">}}

See also [[#Replace Status Page by a Custom page|Redirect when a Custom Page replaces the Status Page]].
<br><br>

= CustomScript Buttons =

[[/Customscript ODB tree#Customscript-button|CustomScript buttons]] can be provided on [[Custom Page|Custom Pages]]. These buttons are equivalent to optional '''script buttons''' on the [[Status Page]], which call a script to perform a particular action when the button is pressed. See [[/Script ODB tree#Script-button|script buttons]] for details. Customscript buttons can be set up through the [[/Customscript ODB tree]].

Any key <span style="color:purple; font-style:italic">/CustomScript/test</span> will appear as a customscript-button
<span style="color: #444444; background-color: #CCCCCC; font-style:italic; font-size: 90; padding:0.25em;padding-left: 0.5em;padding-right: 0.5em;border:1px solid #808080;border-radius: 5px;margin-bottom:1px;">test</span> on a custom page whose code includes an HTML {{HtmlTag|tag=<input...>}} tag of the form:
{{Html|text=<input type=submit name=customscript value="test">}}
where the action of the button <span style="color: #444444; background-color: #CCCCCC; font-style:italic; font-size: 90; padding:0.25em;padding-left: 0.5em;padding-right: 0.5em;border:1px solid #808080;border-radius: 5px;margin-bottom:1px;">test</span> will be found in the <span style="color:purple; font-style:italic">/customscript/test</span> subdirectory.

After pressing a customscript-button, the ''type=submit'' in the HTML {{HtmlTag|tag=<input>}} will cause a page reload. This will result in a switch to the [[Status Page]], unless a [[#redirect]] input tag is included to redirect back to the original custom page.

== Customscript button without a page reload ==
To define a customscript button that does '''not''' cause a page reload, set the ''type'' in the HTML {{HtmlTag|tag=<input>}} to "button", i.e.
{{Html|text=<input name="customscript" value="test" type="button" onClick=cs_button(this.value)> }}
and use ''"onClick"'' to call a function to [[#Send an Ajax Request]] instead. The following function sends an asynchronous request, with an optional callback.
{{HtmlTag|tag=<script>}}
<div style="background-color:floralwhite; color:steelblue; font-style:italic">
function cs_button(cmd, callback)<br>
{ // send a request to execute a custom script
: var url;
: var request = XMLHttpRequestGeneric();
:
: url = ODBUrlBase
: if(document.getElementById("redir") != null)
:: url += '?redir='+document.getElementById('redir').value
: url+='&customscript='+ encodeURIComponent(cmd);
: request.open('GET', url, true); // asynchronous request
: request.send(null);
: if(callback!=undefined) {
:: request.onreadystatechange = function() {
::: if (request.readyState == 4) {
:::: if (request.status == 200)
::::: callback();
:::: else
::::: alert('cs_button: Error after sending request to Custom Script "'+cmd+'" :\nHTTP Status: '+request.status)
::: }
:: }
: }
: else {
:: if (request.status != 200)
::: alert('cs_button: Error after sending request to Custom Script "'+cmd+'" :\nHTTP Status: '+request.status)
: }
}
</div>
{{HtmlTag|tag=</script>}}

<br><br>
= Resource files =
== MIDAS resource files ==
A number of resource files have been provided in the MIDAS packages under {{Filepath|path=../packages/midas/resources}}. When including a MIDAS resource file, no key in {{Odbpath|path=/Custom}} needs to be defined as the MIDAS resources directory is searched automatically.

One such resource file is a condensed stylesheet {{File|name=midas.css}} for users who would like their custom pages to have a similar "look and feel" to that of the standard pages. To include the MIDAS stylesheet, in the HTML header, add
{{HtmlTag|tag=<link rel="stylesheet" type="text/css" href="midas.css">}}
Other resource files can provide [[Custom Page#How to use the standard MIDAS navigation bars on your custom page|the standard MIDAS navigation bars]].

== Custom resource files ==
It is often desirable to serve resource files (i.e. '''local files''' such as an external stylesheet, javascript files or images'''<sup>***</sup>''') to a custom page. The following sections describe two alternative ways of serving resource files to a custom page:
* [[#Resource files served WITH /custom/path key defined|with /custom/path key defined]]
* [[#Resource files served WITHOUT /custom/path key defined|without /custom/path key defined]]
See also serving resources to a [[#Replace Status Page by a Custom Status page|Custom Status page]].
;NOTE
: '''<sup>***</sup>''' To superimpose labels, bars or fills onto an image, the image cannot be served as a resource file. See [[#Image insertion]].

=== Resource files served WITH <span style="color: purple; font-style:italic;">/custom/path</span> key defined ===
When a number of resource files are required, it is convenient to place them in the same directory on the disk, and create a key {{Odbpath|path=/Custom/Path}} to contain this directory.

$ ls /home/midas/online/custom/
custom_functions.js custom_globals.js custom_page.html custom_stylesheet.css test_image.png
With the {{Odbpath|path=/Custom/Path}} key defined, [[/Custom ODB tree#Custom-Link|custom-links]] for individual resource files need not be created in the {{Odbpath|path=/Custom/Path}} tree. The custom-link {{Odbpath|path=custom_page&}} '''is''' required so that the custom page can be accessed from the [[/Custom ODB tree#Custom-Button|custom-button]] {{Button|name=custom_page}} on the Status Page. The key name ends in the special character "&" so that it will open in the same window as the Status page (see [[/Custom ODB tree#Key names|key names]]).
$ odbedit
[local:exp:S] ls /custom
path /home/midas/online/custom/
custom_page& custom_page.html

A {{HtmlTag|tag=<script>}} tag for each resource file to be served (specifying the file name) is then placed in the header of {{File|name=custom_page.html}}
i.e.
{{Html|text=<script type="text/javascript" src="custom_functions.js"></script>}}
{{Html|text=<script type="text/javascript" src="custom_globals.js"></script>}}
<br> and a {{HtmlTag|tag=<link>}} tag for an external stylesheet
{{Html|text=<link type="text/css" rel="stylesheet" href="custom_stylesheet.css" title="Stylesheet">}}
An image tag is placed in the body of {{File|name=custom_page.html}}
{{Html|text=<img src="test_image.png"> }}
[[mhttpd]] then loads the resource file from the directory indicated by the Path key with the correct MIME type (see [[/Custom ODB tree#Keys in the /Custom tree|Custom tree keys]] for supported MIME types).

=== Resource files served WITHOUT <span style="color: purple; font-style:italic;">/custom/path</span> key defined ===
Alternatively, resource files can be served to a [[Custom Page]] by creating a key for every resource file in the [[/Custom ODB tree]]. These keys must contain the full path of the file on the disk, and the key {{Odbpath|path=/Custom/Path}} must NOT be defined. The resource files can be in different directories on the disk. By defining the key names with an appropriate file extension, the resource files are served with the appropriate MIME types. The key names end in the special character "!" so that they will not appear on the Status page as custom-links (see [[/Custom ODB tree#Key names|key names]].

Without the {{Odbpath|path=/Custom/Path}} key, the links for the above example in the {{Odbpath|path=/Custom}} tree might look like
$ odbedit
[local:exp:S] ls /custom
custom_page& /home/midas/online/custom/custom_page.html
custom_functions.js! /home/midas/online/resources/custom_functions.js
globals.js! /home/midas/online/resources/custom_functions.js
stylesheet.css! /home/midas/online/stylesheets/custom_stylesheet.css
image.png! /home/midas/images/test_image.png

assuming the resource files are now in the subdirectories indicated.
The {{HtmlTag|tag=<script>}} tag for each resource file to be served (specifying the custom-link) is then placed in the header of {{File|name=custom_page.html}}
i.e.
{{Html|text=<script type="text/javascript" src="custom_functions.js!"></script>}}
{{Html|text=<script type="text/javascript" src="globals.js!"></script>}}
<br> and a {{HtmlTag|tag=<link>}} tag for an external stylesheet
{{Html|text=<link type="text/css" rel="stylesheet" href="stylesheet.css!" title="Stylesheet">}}
An image tag is placed in the body of {{File|name=custom_page.html}}
{{Html|text=<img src="image.png!"> }}

<br><br>

The resulting Demo custom page is shown in Figure 1, which can be compared with Figure 2 (no stylesheet).
{| class="wikitable"
|-
! Figure 1 !! Figure 2
|-
| Demo Custom Page using MIDAS stylesheet || Demo Custom Page
|-

| [[File:Mhxcustom03.jpg|thumb|300px]] || [[File:Mhxcustom02.jpg|thumb|200px]]
|}
<br clear=all>

<br><br>
= Alias-Buttons and Hyperlinks =
Any hyperlink can easily be included on a [[Custom Page]] by using the standard HTML anchor {{HtmlTag|tag=<a...>}} tag, e.g.
{{Html|text=<a href="http://ladd00.triumf.ca/~daqweb/doc/midas/html/">Midas Help</a>}}

Links on a custom page equivalent to [[/Alias ODB tree#Alias-Buttons|alias-buttons]] can also be made e.g.
{{Html|text=<button type="button" onclick="document.location.href='/Alias/alias&';">alias</button>}}
See the [[/Alias ODB tree]] for details.

<br><br>
= Page refresh =
The following {{HtmlTag|tag=<meta...>}} tag included in the HTML header code will cause the whole custom page to refresh in 60 seconds :
{{Html|text=<meta http-equiv="Refresh" content="60">}}
It is also possible to [[#Periodic update of parts of a custom page|periodically update parts]] of a custom page.

<br><br>
= Periodic update of parts of a custom page =

The functionality of [[Mhttpd.js|ODBGet]] together with the window.setInterval() function
can be used to update parts of the web page periodically.
For example the Javascript fragment below contains a function which updates the current run number every 10 seconds in the background:

<div style="background-color:floralwhite; color:steelblue; font-style:italic"> 
window.setInterval("Refresh()", 10000);<br>
function Refresh() {<br>
:document.getElementById("run_number").innerHTML = ODBGet('/Runinfo/Run number');<br>
}
</div>
The custom page has to
* [[Mhttpd.js#include js lib|include the MIDAS JS library]] to access ODBGet
* contain an element with id="run_number", such as
{{Html|text=<td id="run_number"></td>}}

<br><br>
= Display last MIDAS message(s) =

The message log (see [[Message System]]) can be accessed from a custom page using a call to the JavaScript library function [[Mhttpd.js|ODBGetMsg]] (provided the [[Mhttpd.js#include js lib|JS library is included]]).

This allows the inclusion of the "Last Midas message" on a custom page, e.g.
{{JS|text=document.write('Last message:'+ODBGetMsg("midas",0,1))}}
More messages may be displayed by increasing the third parameter to ODBGetMsg.
;Note
: Parameters were changed August 2015. See [[Mhttpd.js|ODBGetMsg]] for older versions.
: Coming soon - a [[mjsonrpc]] function

<br><br>
= Generate a message log entry =

A custom page can generate a message to be sent to the MIDAS message log (see [[Message System]]). A call to mjsonrpc_cm_msg() will generate a message if using the [[mjsonrpc]] functions. Otherwise, use the AJAX function [[Mhttpd.js|ODBGenerateMsg]]. To use these functions, the [[Mhttpd.js#include js lib|JS library must be included]] in the html code.

<br><br>
= Checkboxes =
;NOTE
: '''New (since 2018) custom pages using the [[Custom Page#modb* Javascript scheme]] should use [[Custom Page#modbcheckbox|modbcheckbox]] to create a checkbox.'''
<Br><br>

The function [[Mhttpd.js|ODBSet]] (provided the [[Mhttpd.js#include js lib|JS library is included]]) can be used when one clicks on a checkbox for example:
{{Html|text=<input name="box0" type="checkbox" onClick="ODBSet(my_path, this.checked?'1':'0')">}}
If used as above, the state of the checkbox must be initialized when the page is loaded. This can be done with some JavaScript code called on initialization, e.g.
{{JS|text=document.form1.box0.checked= ODBGet(my_path)); // initialize to the correct value}}

<br><br>
= Replace Status Page by a Custom page =

Click to enlarge thumbnail
[[File:Mhcustom_status.jpg|thumbnail|left|Figure 3: ODB /Custom/Status custom-link to a custom status page]]
<div style="clear: both"></div> 

If a custom-link with the [[/Custom ODB tree#Key names|reserved key name]] '''Status''' (not "Status&" or "Status!") is created in the [[/Custom ODB tree]] (as shown in Figure 3), then that custom page will '''replace the default Status Page'''.

Clicking on the {{Button|name=Status}} button on any of the sub-pages (e.g. [[ODB Page]], [[Programs Page]] etc.) will now return to the Custom Status Page. If there are buttons on the Custom Status page, you '''must''' include a [[#Redirect]] statement of the form
{{Html|text=<input type=hidden name="redir" value="../">}}
or you will see the message
Invalid custom page:NULL path

If the Custom Status page includes [[#Resource files]] served on a regular custom page with a statement such as
{{Html|text=<script type="text/javascript" src="cs_functions!">}}
to serve them in a Custom Status page, the statement would be
{{Html|text=<script type="text/javascript" src="<span style="font-weight:bold">/CS/</span>cs_functions!">}}
In fact, this statement can be used in a regular custom page, as the "/CS/" is ignored in that case.

To return to the default Status Page, delete the <span style="color: purple; font-style:italic;">/Custom/Status</span> key.

<br><br>
= Start, Stop and Check if a program is running =
There are [[mjsonrpc]] functions that implemented all three program management functions - start program,
stop program and "is running?" as JSON-RPC methods.

<br><br>
= Send an Ajax request =
By sending an Ajax request from a custom page, you can make a button perform a specific function.

All functions in midas are controlled through special URLs. So the URL
http://<host:port>/?cmd=Start&value=10
will start run #10.

Although it is easier to use an HTML input statement to [[#Access to the MIDAS Menu buttons]],
to send an Ajax request, you can use the function ''XMLHttpRequestGeneric'' which is in the MIDAS Javascript library [[mhttpd.js]].
Then the HTML code would be

{{Html|text=<input type="button" onclick="start()">}}

and in your JavaScript code add a function ''start()'':

<div style="background-color:floralwhite; color:steelblue; font-style:italic">
function start()
{
: var request = XMLHttpRequestGeneric();

: url = '?cmd=Start&value=10';
: request.open('GET', url, true); // asynchronous request
: request.send(null);
} <br>
</div>
See also [[#Access to the MIDAS Menu buttons]]. Another example with optional callback can be found in [[#Customscript button without a page reload]].

This mechanism can be used for starting a particular program, see for example (see [https://midas.triumf.ca/elog/Midas/1046]). However, this functionality is now provided by [[mjsonrpc]] functions - see [[#Start, Stop and Check if a program is running]].

<br><br>
= Image insertion =
An image can be loaded from the web using an HTML {{HtmlTag|tag=<img...>}}, e.g.
{{Html|text="TRIUMF logo" <img src="https://lixenon.triumf.ca/InternalDocuments/Alice/figures/TRIUMF-logo.jpg/image_preview">}}
or a MIDAS History image can be inserted into a custom page using an HTML {{HtmlTag|tag=<img...>}} tag of the following form:
{{Html|text=blah<img src="http://hostname.domain:port/HS/Meterdis.gif&scale=12h&width=300">}}

If the image file is on the local disk, it can be loaded as a '''resource file'''. The image can be of format .pdf, .jpg, .gif, .png. See loading [[#Resource files]].

If you wish to superimpose features such as '''labels and fills''', the image file cannot be served as a [[#Resource files|resource file]]. Instead, the image file must be in '''gif''' format, and must be included in the {{Odbpath|path=/Custom/images}} subtree (Figure 4). Image insertion into a Custom page will be illustrated using the Demo custom page shown in [[#MIDAS stylesheet|Figure 2]]. All the files required for this demo can be found in the MIDAS package at $MIDASSYS/examples/custom. If you do not wish to create
the keys yourself, proceed to [[#Superimposing Labels, Bars and Fills onto a gif image]].

Make a [[/Custom ODB tree#Custom-Link|custom-link]] to the Demo custom page file ''myexpt.html'' , i.e.
[local:js:S]/>ls /custom
myexpt& /home/test/packages/midas/examples/custom/myexpt.html

To make the image ''myexpt.gif'' visible on the custom page, the path and filename of the image file must be defined in the {{Odbpath|path=/Custom/images}} subtree. To do this,
create the subtrees {{Odbpath|path=/Custom/images/myexpt.gif}} where the subtree name "myexpt.gif" is named for the image file you are going to use. Multiple images can be used, by creating multiple imagefile subtrees.

In the imagefile subtree {{Odbpath|path=myexpt.gif}}, create the STRING key {{Odbpath|path=Background}}, and set it to contain the path and name of the image file. The tree structure should then look similar to Figure 4, minus the labels/bars/fill subtrees which will be added to the ODB later.

The image must also be referenced in the custom HTML file ''myexpt.html'' in the "src" field of an HTML {{HtmlTag|tag=<img...>}} tag, e.g.
{{Html|text=<img '''src="myexpt.gif"'''>}}

Click to enlarge thumbnail
[[File:Mhcustom_images.jpg|thumbnail|left|Figure 4: /Custom/Images ODB Tree]]
<br clear=all>
Once the image is visible, enable [[#HTML mapping]], optionally [[#Display mouse position]] and proceed to [[#Superimposing Labels, Bars and Fills onto a gif image]].

<br><br>
== HTML mapping ==
Note that if additional features such as active clickable areas and labels, bars and fills superimposed on the image are also required, HTML mapping must also be activated with the HTML {{HtmlTag|tag=<map...>}} tag and the "usemap" attribute of the HTML {{HtmlTag|tag=<img>}} tag
{{Html|text= <map '''name="myexpt.map"'''> <br> <img src="myexpt.gif" '''usemap="#myexpt.map"'''> <br>...<br> </map>"}}

<br><br>
== Display mouse position ==
[[File:Cursor.png|thumbnail|left|Figure 5: MEG Gas System Custom Page showing cursor position]]
<div style="clear: both"></div> 

When writing custom pages with large background images and labels and fills placed on that image, it is hard to figure out X and Y coordinates of the labels. This can now be simplified by using the function ''getMouseXY()'' in the development JavaScript built-in library [[develop.js]]. This function supplies the X,Y position of the cursor if an element of ID "'''refimg'''" is present. This JS library '''must be [[develop.js|included in the custom page]]''' in order to use it:

Then, set the "id" attribute of the background HTML {{HtmlTag|tag=<img...>}} tag to "refimg", e.g.

<div style="background-color:floralwhite; color:seagreen; font-style:italic">
: <img '''id="refimg"''' src="ebit_pc.gif" usemap="#Custom1"> 
: <map name="Custom1">
: .....
: </map>
</div>

If the "'''refimg'''" tag is present, the cursor changes into a crosshair, and its absolute and relative locations in respect to the reference image are shown in the status bar (Figure 5).

<br><br>
== Superimposing Labels, Bars and Fills onto a gif image ==
You can enhance your custom page by superimposing multiple features based on ODB variables onto an image (e.g. [[#Display mouse position|Figure 5]]), such as

* labels: "live" ODB values positioned in a particular location of the page
* bars : "bar level" showing graphically ODB values such as levels or rate etc.
* fills : "color level" where colour is used as the level indicator.

Each entry (label/bar/fill) will have an ODB tree associated to it defining the ODB variable path, X/Y position, colour, etc. Each time the page is updated, the latest ODB value/level/rate will be shown based on the ODB parameter to which the label, bar or fill is linked - hence the term "live". The overlay of the requested features is done onto the selected image file.

This powerful new extension brings the [[mhttpd]] capability closer to other experimental web controllers similar to EPICS.

;Note
: Be sure to enable the feature to [[#Display mouse position]] in order to facilitate finding the X,Y positions of the various features.
: [[#HTML mapping]] must be activated for labels/bars/fills to work

A Demo custom page showing labels, bars and fills superimposed on an image is shown in [[#MIDAS stylesheet|Figure 2]].
All the files for this demo can be found in $MIDASSYS/examples/custom/. The file xcustom.odb contains the ODB keys required, including those to insert the image and superimpose the various labels, fills etc. This file can be loaded into the ODB with the {{Odbedit cmd|cmd=load}}.

<br><br>
=== Adding Labels ===

[[File:Mhcustom_label.jpg|thumbnail|left|Figure 6: /Custom/Images/Labels ODB subtree]]

In order to include a readout of ODB values (i.e. labels), on the image, a further ODB subdirectory {{Odbpath|path=/Custom/images/<imagefile.gif/Labels}} must be created. Creating a subdirectory for a particular label i.e. {{Odbpath|path=<label name>}} in the {{Odbpath|path=Labels}} subtree will, at the next custom web page refresh, cause the complete structure for that label to be created and filled with default values. Once the {{Odbpath|path=<label name>}} subtree is created, the user fills the various keys as desired. See [[/Custom ODB tree#Labels subtree]] for details of the various fields. This procedure is repeated for all the labels required, using a unique {{Odbpath|path=<label name>}} subdirectory for each label. An example of a {{Odbpath|path=<label name>}} subtree is shown in Figure 6.

<div style="clear: both"></div> 

<br><br>
=== Adding Bars ===

[[File:Mhcustom_fill.jpg|thumbnail|left|Figure 7: /Custom/Images/Fills ODB subtree]]

In a similar way, Bars can be superimposed on the image. Create a new ODB subdirectory {{Odbpath|path=/Custom/images/<imagefile.gif/Bars}}. Create a subdirectory for a particular Bar ({{Odbpath|path=<bar name>}}) in the {{Odbpath|path=Bars}} subdirectory. Refresh the web page and fill the various keys as desired. See [[/Custom ODB tree#Bars subtree]] for details of the various fields. Examples of a <bar-name> subtree is shown in Figure 7.

<div style="clear: both"></div> 

<br><br>
=== Adding Fills ===
[[File:Mhcustom_bar.jpg|thumbnail|left|Figure 8: /Custom/Images/Bars ODB subtree]]

In a similar way, Fills can be superimposed on the image. Create new ODB subdirectory {{Odbpath|path=/Custom/images/<imagefile.gif/Fills}}. Create a subdirectory for a particular Fill ({{Odbpath|path=<fill name>}}) in the {{Odbpath|path=Fills}} subdirectory. Refresh the web page and fill the various keys as desired. See [[/Custom ODB tree#Fills subtree]] for details of the various fields. Examples of a ({{Odbpath|path=<fill name>}} subtree is shown in Figure 8.

<div style="clear: both"></div> 

<br><br>
== Mapping active areas onto the image ==
Provided [[#HTML mapping]] is activated, "clickable" areas can be created on the image.

This can be done now with a new function like this:
{{Html|text= <area shape="rect" coords="40,200,100,300" alt="Main Valve" href="Custom1?cmd=Toggle&odb=/Equipment/Environment/Variables/Output[2]">}}

This defines a clickable map on top of the custom image. The area(s) should match with some area(s) on the image, e.g. the box of a valve. Determining the co-ordinates of this area is simplified by using the Display mouse position feature.

By clicking on this area, the supplied path to the ODB is used (in this case {{Odbpath|path=/Equipment/Environment/Variables/Output[2]}}) and its value is toggled. If the valve value is then used in the image via a [[#Adding Fills|Fill]] statement to change the color of the valve, it can turn green or red depending on its state. This is illustrated in [[#Display mouse position|Figure 5]].

Clicking an active area can also be made to open a new custom page, for example:
{{Html|text=<area shape=rect coords="687,530, 890,648" alt="Pump detail" href = "Pump!" title="Click for Details">}}
{{Html|text=<area shape=rect coords="560,574,775,662" alt="Buffer Tank detail" href = "BufferTank!" title="Click for Details">}}
where ''Pump!'' and ''BufferTank!'' are defined as links to custom pages in the [[/Custom ODB tree]].

<br><br>
== Edit boxes floating on top of a graphic ==

An edit box can be placed on top of a graphic in a particular position by means of an HTML <span style="color:green"><div></span> tag. Using the ODBEdit function from the Midas JS library [[Mhttpd.js]], the custom page code would look like this:

{| style="text-align: left; width: 100%; background-color: floralwhite;" border="0" cellpadding="1" cellspacing="1"
|-
|<pre style="background-color:floralwhite; color:seagreen; font-style:italic">
<div style="position:absolute; top:100px; left:50px;">
<script type="text/javascript"> </pre>
<pre style="background-color:floralwhite; color:steelblue; font-style:italic;">
document.write('Run number: ')
path='/runinfo/run number'
rn = ODBGet(path)
document.write('<a href="#" onclick="ODBEdit(path)" >')
document.write(rn)
document.write('</a>');</pre>
<pre style="background-color:floralwhite; color:seagreen; font-style:italic;">
</script>
</div>
<img src="custom.gif">
</pre>
|}

The same thing could be done with the HTML-style {{HtmlTag|tag=<odb>}} tag :
<pre style="background-color:floralwhite; color:seagreen; font-style:italic">
<div style="position:absolute; top:100px; left:50px;">
Run number: <odb src="/Runinfo/run number" edit=1>
</div>
<img src="custom.gif">
</pre>

<br><br>

== Interactive SVG Implementation ==

An SVG file loaded on a custom page can be interactively modified using JavaScript.
This is useful for graphically displaying ODB values in complex service or detector systems.

An SVG file can be embedded like this:
<pre>
<object id="svgObject" type="image/svg+xml" data="Midas_helium_example.svg"></object>
</pre>

Objects within the SVG can be modified—for example, by changing their fill color as shown below:
<pre>
const svgDoc = document.getElementById('svgObject').contentDocument;
const obj_Valve = svgDoc.getElementById(valveID);
obj_Valve.style.fill = "#00FF00";
</pre>

SVG images are stored in XML format. In Inkscape, object properties can be interactively edited using the XML Editor.
An example is given below in [[Custom Page Features#Example 4 : Interactive SVG custom page]]

= Examples =
For more examples of accessing the ODB with the Javascript library [[mhttpd.js]] look at the example experiment in the MIDAS package $MIDASSYS/examples/javascript1/example.html.

== Example 1 : Asynchronous calls using mjsonrpc functions ==
See [[mjsonrpc#examples]]

== Example 2 : Asynchronous calls using Javascript and AJAX ==

Example 2 shows html code illustrating the use of ODBMCopy(), where innerHTML is used to display the data. On a page with images or a lot of data, innerHTML allows you to update variables without having to reload the whole page. In the example, a timer causes the page to update every 10s (reread the data). Often the ODB data for the whole page can be read by one asynchronous ODBMCopy() call, rather than scattering synchronous ODBGet() calls throughout the page.

Access to the ODB is provided by the [[Mhttpd.js|MIDAS Javascript Library]], included with the line <span style="color:green"><script src='mhttpd.js'></script></span>.

<div style="background-color:floralwhite; color:seagreen; font-style:italic">
<html> <br>
<head> <br>
<title>MyTitle</title> <br>
<script src='mhttpd.js'></script>
<script> </div>
<div style="background-color:floralwhite; color:steelblue; font-style:italic">
var updatePeriod = 10000; // in msec <br>
var updateTimerId = 0; <br>
var counter=0; <br>
function update() { <br>
:clearTimeout(updateTimerId); <br>
: load();
: if (updatePeriod > 0)
: updateTimerId = setTimeout('update()', updatePeriod);
} <br>
function load() { <br>
: document.getElementById('LastUpdated').innerHTML = "Updating..." + new Date;
: var paths = [ "/Runinfo", "/Experiment"];
: var data_odb=ODBMCopy(paths, mcopy_callback, "json")
: counter++;
: document.getElementById('counter').innerHTML = 'Counter: '+ counter
} <br>
function mcopy_callback(data) { <br>
: var obj= JSON.parse(data);
: var runinfo=obj[0];
: document.getElementById('rn').innerHTML = 'Run Number ='+ parseInt(runinfo["Run number"]);
: document.getElementById('state').innerHTML ='Run State= '+ runinfo.State;
: var experiment=obj[1];
: document.getElementById('name').innerHTML='Experiment name = '+ experiment.Name <br>
}<br> </div>
<div style="background-color:floralwhite; color:seagreen; font-style:italic">
</script> <br>
</head> <br>
<body> <br>
<b>Javascript code using ODBMCopy with callback</b> <br>
The data on the page is updated every 10 sec using a timer<br>
<p id="LastUpdated" > Last updated: never</p><br>
<p id="rn"> Run Number : unknown </p><br>
<p id="state"> State : unknown</p><br>
<p id="name"> Experiment name : unknown </p><br>
<p id="counter">Counter: zero </p><br>
<script type="text/javascript"> </div>
<div style="background-color:floralwhite; color:steelblue; font-style:italic">
: if (updatePeriod > 0)
: update(); </div>
<div style="background-color:floralwhite; color:seagreen; font-style:italic">
</script> <br>
</body> </html></div>

<br><br>
== Example 3 : Synchronous Calls using Javascript and AJAX ==
In the following example, JS functions ODBGet and ODBEdit from the [[Mhttpd.js|MIDAS Javascript Library]] are used to access the ODB.
;NOTE
# Synchronous calls are now deprecated (see [[#The MIDAS Javascript Library|above]]).
# The Javascript library '''must be [[mhttpd.js#include js lib|included in the HTML code]]'''.

{{Html|text=<script>}}
{{JS|text=document.write ('Experiment Name: '+ ODBGet("/Experiment/Name")) <br> var alarm_path="/alarms/Alarm system active"; <br> var alarm_active=ODBGet(alarm_path); <br> document.write('<a href="#" onclick="ODBEdit(alarm_path)" >'+alarm_active+'</a>')}}
{{Html|text=</script>}}

== Example 4 : Interactive SVG custom page ==

[[File:SVGcustom_page.svg|thumbnail|none|Figure 9: SVG based custom page]]

In this example, an SVG image forms the basis of a custom page.
It displays two valves and an expansion volume.

The valves change color depending on their status — open or closed.
The expansion volume dynamically changes its height.

All objects within the SVG file are directly modified using JavaScript functions.

<pre>
<!DOCTYPE html>
<html class="mcss">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="midas.css">
<script src="controls.js"></script>
<script src="midas.js"></script>
<script src="mhttpd.js"></script>
<title>Helium example</title>

<style>
.modbbutton {font-size:20px;}
.text {font-size:20px;}
</style>

<script>

// Valve Coloring --------------------------------------------------------------

function updateValveColor(flag, valveID) {
console.log(valveID, flag);
const svgDoc = document.getElementById('svgObject').contentDocument;
//The valveID needs to match the ID given in the svg file
const obj_Valve = svgDoc.getElementById(valveID);

obj_Valve.style.fill = (flag === 1) ? "#00FF00" : "#FF0000";
}

// Confirmation routines --------------------------------------------------------

function confirmValve(arg, valveAddress) {
const txt = arg === "Close" ? "Are you sure to close the valve?" : "Are you sure to open the valve?";
const val = arg === "Open" ? 1 : 0;
dlgConfirm(txt, function(confirmed) {
if (confirmed) {
modbset(valveAddress, val);
}
});
return false; // Prevent ODB value change immediately
}

// Animation -------------------------------------------------------------------

/**
* Update the volume of an SVG element by applying a transformation based on input.
* @param {number} elem - The scale factor to modify the volume.
* @param {string} svgID - The ID of the SVG element to be transformed.
* Comment: This example specifically transform only the ySize of the object,
* with the special case that the bottom edge stays in place
*/
function updateVolume(elem, svgID) {
const svgDoc = document.getElementById('svgObject').contentDocument;
const rootSvg = svgDoc.documentElement;

// Get the width and height of the root SVG element.
const widthAttr = rootSvg.getAttribute("width");
const heightAttr = rootSvg.getAttribute("height");

// Get and parse the viewBox attribute.
const viewBoxAttr = rootSvg.getAttribute("viewBox");
const viewBoxParts = viewBoxAttr.split(" ").map(parseFloat);
const viewBoxWidth = viewBoxParts[2];
const viewBoxHeight = viewBoxParts[3];

// Calculate the scaling factors for x and y axes based on the viewBox and actual width/height.
const xScale = widthAttr / viewBoxWidth;
const yScale = heightAttr / viewBoxHeight;

// Get the element to modify based on the provided svgID.
const obj_Vol = svgDoc.getElementById(svgID);
const bbox = obj_Vol.getBBox();

// Extract the transformation matrix from the element's transform attribute.
const transformAttr = obj_Vol.getAttribute("transform");
const matrixMatch = transformAttr.match(/matrix$([^)]+)$/);

let transformedY, transformedHeight;

// Apply matrix transformation if it exists.
if (matrixMatch) {
const [a, b, c, d, e, f] = matrixMatch[1].split(",").map(parseFloat);

// Apply matrix to the top-left corner of the bbox to get transformed Y position and height.
transformedY = d * bbox.y + f;
transformedHeight = d * bbox.height;
}

// Scale factor is 0.01 times the provided 'elem' value.
const scale = 0.01 * elem;

// Calculate the new Y position after applying scaling.
const yPosInit = (transformedY / yScale + transformedHeight / yScale) * (1 - scale);

// Update the element's transform attribute with the new translation and scaling.
// In this example only the height (y-axis) is changed
updateTransform(obj_Vol, `0,${yPosInit}`, `1,${scale}`);
}

/**
* Updates the transform attribute of an SVG element by applying new translation and scale values.
* @param {Element} elem - The SVG element whose transform attribute is to be updated.
* @param {string} newTranslate - The new translation value as a string (e.g., "0,100").
* @param {string} newScale - The new scale value as a string (e.g., "1,0.5").
*/
function updateTransform(elem, newTranslate, newScale) {
let transform = elem.getAttribute("transform") || "";

// Regular expressions to match existing translate and scale transformations.
const translateRegex = /translate$([^)]+)$/;
const scaleRegex = /scale$([^)]+)$/;

// Remove any existing translate and scale transformations from the transform string.
transform = transform
.replace(translateRegex, '')
.replace(scaleRegex, '')
.trim();

// Construct the new transform string with updated translation and scale.
const newTransform = `translate(${newTranslate}) scale(${newScale}) ${transform}`.trim();

// Apply the new transform to the element.
elem.setAttribute("transform", newTransform);
}

</script>

</head>

<body class="mcss" onload="mhttpd_init('Example');">


<div id="mheader"></div>
<div id="msidenav"></div>

<div id="mmain">


<div id="filling_valve" class="modb" data-odb-path="/Equipment/Example/Filling Valve" onchange="updateValveColor(this.value,'Filling_valve');" onload="updateValveColor(this.value,'Filling_valve');">
<div id="exhaust_valve" class="modb" data-odb-path="/Equipment/Example/Exhaust Valve" onchange="updateValveColor(this.value,'Exhaust_valve');" onload="updateValveColor(this.value,'Exhaust_valve');">

<table class="mtable">
<tr><th class="mtableheader">Helium example</th></tr>
<tr><td>
<div style="position:relative;width:600px;margin:auto">

<object id="svgObject" type="image/svg+xml" data="Midas_helium_example.svg"></object>





<button class="modbbutton" class="mbutton" data-odb-path="/Equipment/Example/Filling Valve"
style="position:absolute; top: 473px;left:125px;"
data-validate='confirmValve("Open","/Equipment/Example/Filling Valve")'
data-odb-value="1">Open</button>
<button class="modbbutton" class="mbutton" data-odb-path="/Equipment/Example/Filling Valve"
style="position:absolute; top: 473px;left:195px;"
data-validate='confirmValve("Close","/Equipment/Example/Filling Valve")'
data-odb-value="0">Close</button>
<div class="text" style="position:absolute; top: 443px; left:125px; font-weight: bold;">Filling valve:</div>



<button class="modbbutton" class="mbutton" data-odb-path="/Equipment/Example/Exhaust Valve"
style="position:absolute; top: 300px;left:352px;"
data-validate='confirmValve("Open","/Equipment/Example/Exhaust Valve")'
data-odb-value="1">Open</button>
<button class="modbbutton" class="mbutton" data-odb-path="/Equipment/Example/Exhaust Valve"
style="position:absolute; top: 300px;left:422px;"
data-validate='confirmValve("Close","/Equipment/Example/Exhaust Valve")'
data-odb-value="0">Close</button>
<div class="text" style="position:absolute; top: 270px; left:352px; font-weight: bold;">Exhaust valve:</div>



<div class="modbvbar" data-odb-path="/Equipment/Example/Expansion volume"
style="width:20px;height:200px; color:grey; position:absolute; top:56px;left:320px"
data-min-value="0" data-max-value="100" data-log="0"
onchange="updateVolume(this.value, 'Expansion_volume')"></div>
<div class="mvaxis" style="width:30px;height:200px; position:absolute; top:56px;left:340px; text-align:left"
data-min-value="0" data-max-value="100" data-log="0"></div>

</td></tr>

</table>

</div>

</body>
</html>
</pre>

[[Category:Custom]]

File:SVGcustom page.svg

2025-05-12T12:16:35Z

Rudzki:

Custom Page Features

2025-05-12T12:15:04Z

Rudzki: /* Example 4 : Interactive SVG custom page */

{{Pagelinks}}
= Links =
<div style="column-count:3;-moz-column-count:3;-webkit-column-count:3">
* [[Mhttpd|mhttpd MIDAS web server]]
* [[ODB Page]]
* [[Custom Page]]
* [[/Custom ODB tree]]
* [[Mhttpd.js|MIDAS Javascript library (mhttpd.js)]]
* [[mjsonrpc|MIDAS JSON RPC library functions (mjsonrpc)]]
* [[odbedit]]
</div>

= Introduction =
;NOTE
: Since 2018, many of the features described here can now be implemented more simply using the mod* JS functions (see [[Custom Page|Custom Web Page]]).
: '''If writing a new web page, it is strongly recommended you make use of the mod*JS features. '''

This page describes some of the special features provided for use on a user-created [[Custom Page|Custom Web Page]] using the [[#The MIDAS Javascript Library]], which was the recommended way to write Custom Pages before the [[Custom Page#modb* Javascript scheme]] was available.

<br><br>

= The MIDAS Javascript Library =
The MIDAS Javascript Library [[mhttpd.js]] includes routines written in Javascript and AJAX to provide features useful for writers of [[Custom Page]]s, such as access to the ODB. Recently asynchronous [[mjsonrpc|JSON-RPC functions]] using [[mjsonrpc#Javascript client library|Promises]] has been added (January 2016).
;NOTE
:To use functions in this library, it '''must be [[mhttpd.js#include js lib|included in the HTML code]]'''.

Many of the older routines (ODBGet, ODBSet) use '''synchronous''' RPC requests. With synchronous request, a second RPC request must wait until the first request is complete. This can significantly slow down web pages where many calls to ODBGet are made. For this reason, functions were developed that can be synchronous or '''asynchronous''' (e.g. ODBMCopy) that include a callback mechanism. The data from ODBMCopy can be formatted in [[mjsonrpc#JSON general information|JSON]].

Web developers are moving away from synchronous RPC requests, which are now deprecated [https://midas.triumf.ca/elog/Midas/1128]. Some modern browsers return a warning on a synchronous RPC request.

A new group of JSON-RPC functions using [[mjsonrpc#Javascript client library|Promises]] has been added to the MIDAS Javascript Library (January 2016). These are asynchronous only, and they also provide more functionality and have better error handling than the older AJAX calls, which are also inconsistent in how they handle Booleans. They also have much improved handling of reading/writing arrays to the ODB. Before 2018 it was recommended that all new Custom Pages are written using these JSON-RPC functions. {{Important|text=Since 2018 the [[Custom Page#modb* Javascript scheme]] is recommended for new Custom Pages}}.

The MIDAS Javascript Library routines requires an up-to-date browser that supports Promises (see [https://midas.triumf.ca/elog/Midas/1145]). If using an older browser version, the asynchronous AJAX calls (e.g. ODBMCopy) should be used in order to avoid having to rewrite the web page at a later date to remove all synchronous calls.

<br><br>
== Access the ODB using mjson-rpc asynchronous functions ==

Access to the ODB is provided by the [[Mhttpd.js|MIDAS Javascript Library]], which (since January 2016) includes the [[mjsonrpc]] functions. It is [[#The MIDAS Javascript Library|recommended]] that these functions are used for '''new''' pages rather than the older AJAX calls (see below).

To run these functions you need
# to [[mhttpd.js#include js lib|include the Javascript library in the HTML code]]'''
# to use an up-to-date browser that supports Promises (see [https://midas.triumf.ca/elog/Midas/1145]).

Examples showing how to read and write to the ODB can be found at [[mjsonrpc#examples]]. Also included are examples using arrays.

<br><br>
== Access the ODB using asynchronous AJAX calls ==
;NOTE
: It is recommended that asynchronous MIDAS JSON-RPC functions are used for new pages rather than the older AJAX calls (see [[#Access the ODB using mjson-rpc asynchronous functions|above]]).

[[#Example 2 : Asynchronous calls using Javascript and AJAX|Example 2]] uses the asynchronous call ODBMCopy() with callback to read the data. The data are converted into JSON format. In this case, when accessing the JSON data, ''the ODB Keynames must be in the same case as they are in the ODB'', even though the case is ignored by the ODB. If you find this feature annoying, use [[#Access the ODB using mjson-rpc asynchronous functions|mjson-rpc function db_get_values()]] as all keynames are converted to lower case.

<br><br>
== Access the ODB using synchronous AJAX requests ==
;NOTE
: Synchronous requests are now deprecated (see [[#The MIDAS Javascript Library|above]]). New pages should be written [[#Using mjson-rpc asynchronous functions]].

See [[#Example 3 : Synchronous Calls using Javascript and AJAX]].

<br><br>
= Access the ODB with HTML-style <span style="color:seagreen font-style:italic"><odb></span> tags =

;NOTE
: This method pre-dates the [[Mhttpd.js|MIDAS Javascript Library]]. It is recommended that the [[Mhttpd.js|MIDAS Javascript Library]] be used for ODB access.

If Javascript (JS) is not available, the older HTML-style {{HtmlTag|tag=<odb>}} tags are still available and provide limited functionality.

The HTML-style {{HtmlTag|tag=<odb>}} tag has been defined for read/write access to the ODB under HTML. The {{HtmlTag|tag=<odb>}} tags are declared within enclosing HTML {{HtmlTag|tag=<form...>....</form>}} tags.

{| style="text-align: left; width: 100%; background-color: rgb(255, 255, 255);" border="3" cellpadding="2" cellspacing="2"
|+ Access to ODB from HTML
|-
| colspan="1" rowspan="1" style="text-align: center; vertical-align: top; background-color: rgb(204, 204, 255); font-weight: bold;" | HTML ODB tag
| colspan="1" rowspan="1" style="text-align: center; vertical-align: top; background-color: rgb(204, 204, 255); font-weight: bold;" | Meaning

|-
| colspan="1" rowspan="1" style="text-align: left; vertical-align: top; background-color: rgb(255, 255, 255); color: seagreen; font-style:italic" |<odb src="odb path">
| colspan="1" rowspan="1" style="text-align: left; vertical-align: top; background-color: rgb(255, 255, 255); color: black" |Display ODB field (read only)

|-
| colspan="1" rowspan="1" style="text-align: left; vertical-align: top; background-color: rgb(255, 255, 255); color: seagreen; font-style:italic" |<odb src="odb path" edit=1 pwd="CustomPwd">
| Display an Editable ODB field (inline style). Optional password protection with '''pwd''' .

|-
| colspan="1" rowspan="1" style="text-align: left; vertical-align: top; background-color: rgb(255, 255, 255); color: seagreen; font-style:italic" |<odb src="odb path" edit=2 pwd="CustomPwd">
| Display an Editable ODB field (popup style). Optional password protection with '''pwd''' .
|}

;NOTE
: The Optional password protection with '''pwd''' (documented in the [http://ladd00.triumf.ca/~daqweb/doc/midas-old/html/RC_customize_ODB.html#RC_Access_Control| OldMidas Document]) may not be working.
: Use the [[/Experiment ODB tree#Security subtree|Web Password security]] instead.

{{HtmlTag|tag=<odb>}} tags are included in the HTML code e.g.

{{Html|text= Experiment Name: <odb src="/Experiment/Name"> <br> Run Number: <odb src="/runinfo/run number" edit=1>}}

See also [[Custom Page#How to write a Custom Page|HTML Custom Page example]].

<br><br>
= ODB RPC access =
The [[Mhttpd.js|MIDAS Javascript Library]] function ODBRpc() defined for RPC access.

This permits buttons on MIDAS "custom" web pages to invoke RPC calls directly into user frontend programs, for example to turn hardware modules on or off.

<br><br>
= JSON support =
[[mjsonrpc#JSON general information|JSON]] support is provided with the [[Mhttpd.js|MIDAS Javascript Library]].

<br><br>
= Access to the MIDAS Menu buttons =

;NOTE
: '''New (since 2018) custom pages using the [[Custom Page#modb* Javascript scheme]] should follow the instructions there to include the standard MIDAS Menu buttons.'''
<br><br>
Access to the standard MIDAS Menu buttons can be provided with HTML {{HtmlTag|tag=<input...>}} tags of the form:


{{Html|text=<input name="cmd" value=''<button-name>'' type="submit" >}}
Valid values are the standard MIDAS Menu buttons, i.e. (Start, Pause, Resume, Stop, ODB, Elog, Alarms, History, Programs etc). The {{HtmlTag|tag=<input...>}} tags must be declared within enclosing HTML {{HtmlTag|tag=<form...>....</form>}} tags (see above).

The following HTML fragment shows the inclusion of three of the standard buttons, giving access to the Main Status, ODB and Messages pages :

{{Html|text= <form name="form1" method="Get" action="/CS/MyExpt&"> <br> <input name="cmd" value="Status" type="submit"> <br> <input name="cmd" value="ODB" type="submit"> <br> <input name="cmd" value="Messages" type="submit"> <br> ... <br> </form> }}

See also [[#Redirect]].

<br><br>
= Redirect =

When buttons are included on a Custom Page, after pressing a button (e.g. the Start or Stop button) it may be desirable to return to the same custom page, rather than returning to the [[Status Page]].

This can be done by including an HTML {{HtmlTag|tag=<input...>}} tag with the attributes ''type'' set to "hidden" and ''name'' set to "redir". This name ("redir") is detected by [[Mhttpd]], causing a redirect to the specified custom link in the ''value'' attribute.

For example, the following redirects the screen back to the custom page link {{Odbpath|path=/Custom/my_custom_page&}} when buttons are pressed:
{{Html|text=<input type=hidden name="redir" value="my_custom_page&">}}

See also [[#Replace Status Page by a Custom page|Redirect when a Custom Page replaces the Status Page]].
<br><br>

= CustomScript Buttons =

[[/Customscript ODB tree#Customscript-button|CustomScript buttons]] can be provided on [[Custom Page|Custom Pages]]. These buttons are equivalent to optional '''script buttons''' on the [[Status Page]], which call a script to perform a particular action when the button is pressed. See [[/Script ODB tree#Script-button|script buttons]] for details. Customscript buttons can be set up through the [[/Customscript ODB tree]].

Any key <span style="color:purple; font-style:italic">/CustomScript/test</span> will appear as a customscript-button
<span style="color: #444444; background-color: #CCCCCC; font-style:italic; font-size: 90; padding:0.25em;padding-left: 0.5em;padding-right: 0.5em;border:1px solid #808080;border-radius: 5px;margin-bottom:1px;">test</span> on a custom page whose code includes an HTML {{HtmlTag|tag=<input...>}} tag of the form:
{{Html|text=<input type=submit name=customscript value="test">}}
where the action of the button <span style="color: #444444; background-color: #CCCCCC; font-style:italic; font-size: 90; padding:0.25em;padding-left: 0.5em;padding-right: 0.5em;border:1px solid #808080;border-radius: 5px;margin-bottom:1px;">test</span> will be found in the <span style="color:purple; font-style:italic">/customscript/test</span> subdirectory.

After pressing a customscript-button, the ''type=submit'' in the HTML {{HtmlTag|tag=<input>}} will cause a page reload. This will result in a switch to the [[Status Page]], unless a [[#redirect]] input tag is included to redirect back to the original custom page.

== Customscript button without a page reload ==
To define a customscript button that does '''not''' cause a page reload, set the ''type'' in the HTML {{HtmlTag|tag=<input>}} to "button", i.e.
{{Html|text=<input name="customscript" value="test" type="button" onClick=cs_button(this.value)> }}
and use ''"onClick"'' to call a function to [[#Send an Ajax Request]] instead. The following function sends an asynchronous request, with an optional callback.
{{HtmlTag|tag=<script>}}
<div style="background-color:floralwhite; color:steelblue; font-style:italic">
function cs_button(cmd, callback)<br>
{ // send a request to execute a custom script
: var url;
: var request = XMLHttpRequestGeneric();
:
: url = ODBUrlBase
: if(document.getElementById("redir") != null)
:: url += '?redir='+document.getElementById('redir').value
: url+='&customscript='+ encodeURIComponent(cmd);
: request.open('GET', url, true); // asynchronous request
: request.send(null);
: if(callback!=undefined) {
:: request.onreadystatechange = function() {
::: if (request.readyState == 4) {
:::: if (request.status == 200)
::::: callback();
:::: else
::::: alert('cs_button: Error after sending request to Custom Script "'+cmd+'" :\nHTTP Status: '+request.status)
::: }
:: }
: }
: else {
:: if (request.status != 200)
::: alert('cs_button: Error after sending request to Custom Script "'+cmd+'" :\nHTTP Status: '+request.status)
: }
}
</div>
{{HtmlTag|tag=</script>}}

<br><br>
= Resource files =
== MIDAS resource files ==
A number of resource files have been provided in the MIDAS packages under {{Filepath|path=../packages/midas/resources}}. When including a MIDAS resource file, no key in {{Odbpath|path=/Custom}} needs to be defined as the MIDAS resources directory is searched automatically.

One such resource file is a condensed stylesheet {{File|name=midas.css}} for users who would like their custom pages to have a similar "look and feel" to that of the standard pages. To include the MIDAS stylesheet, in the HTML header, add
{{HtmlTag|tag=<link rel="stylesheet" type="text/css" href="midas.css">}}
Other resource files can provide [[Custom Page#How to use the standard MIDAS navigation bars on your custom page|the standard MIDAS navigation bars]].

== Custom resource files ==
It is often desirable to serve resource files (i.e. '''local files''' such as an external stylesheet, javascript files or images'''<sup>***</sup>''') to a custom page. The following sections describe two alternative ways of serving resource files to a custom page:
* [[#Resource files served WITH /custom/path key defined|with /custom/path key defined]]
* [[#Resource files served WITHOUT /custom/path key defined|without /custom/path key defined]]
See also serving resources to a [[#Replace Status Page by a Custom Status page|Custom Status page]].
;NOTE
: '''<sup>***</sup>''' To superimpose labels, bars or fills onto an image, the image cannot be served as a resource file. See [[#Image insertion]].

=== Resource files served WITH <span style="color: purple; font-style:italic;">/custom/path</span> key defined ===
When a number of resource files are required, it is convenient to place them in the same directory on the disk, and create a key {{Odbpath|path=/Custom/Path}} to contain this directory.

$ ls /home/midas/online/custom/
custom_functions.js custom_globals.js custom_page.html custom_stylesheet.css test_image.png
With the {{Odbpath|path=/Custom/Path}} key defined, [[/Custom ODB tree#Custom-Link|custom-links]] for individual resource files need not be created in the {{Odbpath|path=/Custom/Path}} tree. The custom-link {{Odbpath|path=custom_page&}} '''is''' required so that the custom page can be accessed from the [[/Custom ODB tree#Custom-Button|custom-button]] {{Button|name=custom_page}} on the Status Page. The key name ends in the special character "&" so that it will open in the same window as the Status page (see [[/Custom ODB tree#Key names|key names]]).
$ odbedit
[local:exp:S] ls /custom
path /home/midas/online/custom/
custom_page& custom_page.html

A {{HtmlTag|tag=<script>}} tag for each resource file to be served (specifying the file name) is then placed in the header of {{File|name=custom_page.html}}
i.e.
{{Html|text=<script type="text/javascript" src="custom_functions.js"></script>}}
{{Html|text=<script type="text/javascript" src="custom_globals.js"></script>}}
<br> and a {{HtmlTag|tag=<link>}} tag for an external stylesheet
{{Html|text=<link type="text/css" rel="stylesheet" href="custom_stylesheet.css" title="Stylesheet">}}
An image tag is placed in the body of {{File|name=custom_page.html}}
{{Html|text=<img src="test_image.png"> }}
[[mhttpd]] then loads the resource file from the directory indicated by the Path key with the correct MIME type (see [[/Custom ODB tree#Keys in the /Custom tree|Custom tree keys]] for supported MIME types).

=== Resource files served WITHOUT <span style="color: purple; font-style:italic;">/custom/path</span> key defined ===
Alternatively, resource files can be served to a [[Custom Page]] by creating a key for every resource file in the [[/Custom ODB tree]]. These keys must contain the full path of the file on the disk, and the key {{Odbpath|path=/Custom/Path}} must NOT be defined. The resource files can be in different directories on the disk. By defining the key names with an appropriate file extension, the resource files are served with the appropriate MIME types. The key names end in the special character "!" so that they will not appear on the Status page as custom-links (see [[/Custom ODB tree#Key names|key names]].

Without the {{Odbpath|path=/Custom/Path}} key, the links for the above example in the {{Odbpath|path=/Custom}} tree might look like
$ odbedit
[local:exp:S] ls /custom
custom_page& /home/midas/online/custom/custom_page.html
custom_functions.js! /home/midas/online/resources/custom_functions.js
globals.js! /home/midas/online/resources/custom_functions.js
stylesheet.css! /home/midas/online/stylesheets/custom_stylesheet.css
image.png! /home/midas/images/test_image.png

assuming the resource files are now in the subdirectories indicated.
The {{HtmlTag|tag=<script>}} tag for each resource file to be served (specifying the custom-link) is then placed in the header of {{File|name=custom_page.html}}
i.e.
{{Html|text=<script type="text/javascript" src="custom_functions.js!"></script>}}
{{Html|text=<script type="text/javascript" src="globals.js!"></script>}}
<br> and a {{HtmlTag|tag=<link>}} tag for an external stylesheet
{{Html|text=<link type="text/css" rel="stylesheet" href="stylesheet.css!" title="Stylesheet">}}
An image tag is placed in the body of {{File|name=custom_page.html}}
{{Html|text=<img src="image.png!"> }}

<br><br>

The resulting Demo custom page is shown in Figure 1, which can be compared with Figure 2 (no stylesheet).
{| class="wikitable"
|-
! Figure 1 !! Figure 2
|-
| Demo Custom Page using MIDAS stylesheet || Demo Custom Page
|-

| [[File:Mhxcustom03.jpg|thumb|300px]] || [[File:Mhxcustom02.jpg|thumb|200px]]
|}
<br clear=all>

<br><br>
= Alias-Buttons and Hyperlinks =
Any hyperlink can easily be included on a [[Custom Page]] by using the standard HTML anchor {{HtmlTag|tag=<a...>}} tag, e.g.
{{Html|text=<a href="http://ladd00.triumf.ca/~daqweb/doc/midas/html/">Midas Help</a>}}

Links on a custom page equivalent to [[/Alias ODB tree#Alias-Buttons|alias-buttons]] can also be made e.g.
{{Html|text=<button type="button" onclick="document.location.href='/Alias/alias&';">alias</button>}}
See the [[/Alias ODB tree]] for details.

<br><br>
= Page refresh =
The following {{HtmlTag|tag=<meta...>}} tag included in the HTML header code will cause the whole custom page to refresh in 60 seconds :
{{Html|text=<meta http-equiv="Refresh" content="60">}}
It is also possible to [[#Periodic update of parts of a custom page|periodically update parts]] of a custom page.

<br><br>
= Periodic update of parts of a custom page =

The functionality of [[Mhttpd.js|ODBGet]] together with the window.setInterval() function
can be used to update parts of the web page periodically.
For example the Javascript fragment below contains a function which updates the current run number every 10 seconds in the background:

<div style="background-color:floralwhite; color:steelblue; font-style:italic"> 
window.setInterval("Refresh()", 10000);<br>
function Refresh() {<br>
:document.getElementById("run_number").innerHTML = ODBGet('/Runinfo/Run number');<br>
}
</div>
The custom page has to
* [[Mhttpd.js#include js lib|include the MIDAS JS library]] to access ODBGet
* contain an element with id="run_number", such as
{{Html|text=<td id="run_number"></td>}}

<br><br>
= Display last MIDAS message(s) =

The message log (see [[Message System]]) can be accessed from a custom page using a call to the JavaScript library function [[Mhttpd.js|ODBGetMsg]] (provided the [[Mhttpd.js#include js lib|JS library is included]]).

This allows the inclusion of the "Last Midas message" on a custom page, e.g.
{{JS|text=document.write('Last message:'+ODBGetMsg("midas",0,1))}}
More messages may be displayed by increasing the third parameter to ODBGetMsg.
;Note
: Parameters were changed August 2015. See [[Mhttpd.js|ODBGetMsg]] for older versions.
: Coming soon - a [[mjsonrpc]] function

<br><br>
= Generate a message log entry =

A custom page can generate a message to be sent to the MIDAS message log (see [[Message System]]). A call to mjsonrpc_cm_msg() will generate a message if using the [[mjsonrpc]] functions. Otherwise, use the AJAX function [[Mhttpd.js|ODBGenerateMsg]]. To use these functions, the [[Mhttpd.js#include js lib|JS library must be included]] in the html code.

<br><br>
= Checkboxes =
;NOTE
: '''New (since 2018) custom pages using the [[Custom Page#modb* Javascript scheme]] should use [[Custom Page#modbcheckbox|modbcheckbox]] to create a checkbox.'''
<Br><br>

The function [[Mhttpd.js|ODBSet]] (provided the [[Mhttpd.js#include js lib|JS library is included]]) can be used when one clicks on a checkbox for example:
{{Html|text=<input name="box0" type="checkbox" onClick="ODBSet(my_path, this.checked?'1':'0')">}}
If used as above, the state of the checkbox must be initialized when the page is loaded. This can be done with some JavaScript code called on initialization, e.g.
{{JS|text=document.form1.box0.checked= ODBGet(my_path)); // initialize to the correct value}}

<br><br>
= Replace Status Page by a Custom page =

Click to enlarge thumbnail
[[File:Mhcustom_status.jpg|thumbnail|left|Figure 3: ODB /Custom/Status custom-link to a custom status page]]
<div style="clear: both"></div> 

If a custom-link with the [[/Custom ODB tree#Key names|reserved key name]] '''Status''' (not "Status&" or "Status!") is created in the [[/Custom ODB tree]] (as shown in Figure 3), then that custom page will '''replace the default Status Page'''.

Clicking on the {{Button|name=Status}} button on any of the sub-pages (e.g. [[ODB Page]], [[Programs Page]] etc.) will now return to the Custom Status Page. If there are buttons on the Custom Status page, you '''must''' include a [[#Redirect]] statement of the form
{{Html|text=<input type=hidden name="redir" value="../">}}
or you will see the message
Invalid custom page:NULL path

If the Custom Status page includes [[#Resource files]] served on a regular custom page with a statement such as
{{Html|text=<script type="text/javascript" src="cs_functions!">}}
to serve them in a Custom Status page, the statement would be
{{Html|text=<script type="text/javascript" src="<span style="font-weight:bold">/CS/</span>cs_functions!">}}
In fact, this statement can be used in a regular custom page, as the "/CS/" is ignored in that case.

To return to the default Status Page, delete the <span style="color: purple; font-style:italic;">/Custom/Status</span> key.

<br><br>
= Start, Stop and Check if a program is running =
There are [[mjsonrpc]] functions that implemented all three program management functions - start program,
stop program and "is running?" as JSON-RPC methods.

<br><br>
= Send an Ajax request =
By sending an Ajax request from a custom page, you can make a button perform a specific function.

All functions in midas are controlled through special URLs. So the URL
http://<host:port>/?cmd=Start&value=10
will start run #10.

Although it is easier to use an HTML input statement to [[#Access to the MIDAS Menu buttons]],
to send an Ajax request, you can use the function ''XMLHttpRequestGeneric'' which is in the MIDAS Javascript library [[mhttpd.js]].
Then the HTML code would be

{{Html|text=<input type="button" onclick="start()">}}

and in your JavaScript code add a function ''start()'':

<div style="background-color:floralwhite; color:steelblue; font-style:italic">
function start()
{
: var request = XMLHttpRequestGeneric();

: url = '?cmd=Start&value=10';
: request.open('GET', url, true); // asynchronous request
: request.send(null);
} <br>
</div>
See also [[#Access to the MIDAS Menu buttons]]. Another example with optional callback can be found in [[#Customscript button without a page reload]].

This mechanism can be used for starting a particular program, see for example (see [https://midas.triumf.ca/elog/Midas/1046]). However, this functionality is now provided by [[mjsonrpc]] functions - see [[#Start, Stop and Check if a program is running]].

<br><br>
= Image insertion =
An image can be loaded from the web using an HTML {{HtmlTag|tag=<img...>}}, e.g.
{{Html|text="TRIUMF logo" <img src="https://lixenon.triumf.ca/InternalDocuments/Alice/figures/TRIUMF-logo.jpg/image_preview">}}
or a MIDAS History image can be inserted into a custom page using an HTML {{HtmlTag|tag=<img...>}} tag of the following form:
{{Html|text=blah<img src="http://hostname.domain:port/HS/Meterdis.gif&scale=12h&width=300">}}

If the image file is on the local disk, it can be loaded as a '''resource file'''. The image can be of format .pdf, .jpg, .gif, .png. See loading [[#Resource files]].

If you wish to superimpose features such as '''labels and fills''', the image file cannot be served as a [[#Resource files|resource file]]. Instead, the image file must be in '''gif''' format, and must be included in the {{Odbpath|path=/Custom/images}} subtree (Figure 4). Image insertion into a Custom page will be illustrated using the Demo custom page shown in [[#MIDAS stylesheet|Figure 2]]. All the files required for this demo can be found in the MIDAS package at $MIDASSYS/examples/custom. If you do not wish to create
the keys yourself, proceed to [[#Superimposing Labels, Bars and Fills onto a gif image]].

Make a [[/Custom ODB tree#Custom-Link|custom-link]] to the Demo custom page file ''myexpt.html'' , i.e.
[local:js:S]/>ls /custom
myexpt& /home/test/packages/midas/examples/custom/myexpt.html

To make the image ''myexpt.gif'' visible on the custom page, the path and filename of the image file must be defined in the {{Odbpath|path=/Custom/images}} subtree. To do this,
create the subtrees {{Odbpath|path=/Custom/images/myexpt.gif}} where the subtree name "myexpt.gif" is named for the image file you are going to use. Multiple images can be used, by creating multiple imagefile subtrees.

In the imagefile subtree {{Odbpath|path=myexpt.gif}}, create the STRING key {{Odbpath|path=Background}}, and set it to contain the path and name of the image file. The tree structure should then look similar to Figure 4, minus the labels/bars/fill subtrees which will be added to the ODB later.

The image must also be referenced in the custom HTML file ''myexpt.html'' in the "src" field of an HTML {{HtmlTag|tag=<img...>}} tag, e.g.
{{Html|text=<img '''src="myexpt.gif"'''>}}

Click to enlarge thumbnail
[[File:Mhcustom_images.jpg|thumbnail|left|Figure 4: /Custom/Images ODB Tree]]
<br clear=all>
Once the image is visible, enable [[#HTML mapping]], optionally [[#Display mouse position]] and proceed to [[#Superimposing Labels, Bars and Fills onto a gif image]].

<br><br>
== HTML mapping ==
Note that if additional features such as active clickable areas and labels, bars and fills superimposed on the image are also required, HTML mapping must also be activated with the HTML {{HtmlTag|tag=<map...>}} tag and the "usemap" attribute of the HTML {{HtmlTag|tag=<img>}} tag
{{Html|text= <map '''name="myexpt.map"'''> <br> <img src="myexpt.gif" '''usemap="#myexpt.map"'''> <br>...<br> </map>"}}

<br><br>
== Display mouse position ==
[[File:Cursor.png|thumbnail|left|Figure 5: MEG Gas System Custom Page showing cursor position]]
<div style="clear: both"></div> 

When writing custom pages with large background images and labels and fills placed on that image, it is hard to figure out X and Y coordinates of the labels. This can now be simplified by using the function ''getMouseXY()'' in the development JavaScript built-in library [[develop.js]]. This function supplies the X,Y position of the cursor if an element of ID "'''refimg'''" is present. This JS library '''must be [[develop.js|included in the custom page]]''' in order to use it:

Then, set the "id" attribute of the background HTML {{HtmlTag|tag=<img...>}} tag to "refimg", e.g.

<div style="background-color:floralwhite; color:seagreen; font-style:italic">
: <img '''id="refimg"''' src="ebit_pc.gif" usemap="#Custom1"> 
: <map name="Custom1">
: .....
: </map>
</div>

If the "'''refimg'''" tag is present, the cursor changes into a crosshair, and its absolute and relative locations in respect to the reference image are shown in the status bar (Figure 5).

<br><br>
== Superimposing Labels, Bars and Fills onto a gif image ==
You can enhance your custom page by superimposing multiple features based on ODB variables onto an image (e.g. [[#Display mouse position|Figure 5]]), such as

* labels: "live" ODB values positioned in a particular location of the page
* bars : "bar level" showing graphically ODB values such as levels or rate etc.
* fills : "color level" where colour is used as the level indicator.

Each entry (label/bar/fill) will have an ODB tree associated to it defining the ODB variable path, X/Y position, colour, etc. Each time the page is updated, the latest ODB value/level/rate will be shown based on the ODB parameter to which the label, bar or fill is linked - hence the term "live". The overlay of the requested features is done onto the selected image file.

This powerful new extension brings the [[mhttpd]] capability closer to other experimental web controllers similar to EPICS.

;Note
: Be sure to enable the feature to [[#Display mouse position]] in order to facilitate finding the X,Y positions of the various features.
: [[#HTML mapping]] must be activated for labels/bars/fills to work

A Demo custom page showing labels, bars and fills superimposed on an image is shown in [[#MIDAS stylesheet|Figure 2]].
All the files for this demo can be found in $MIDASSYS/examples/custom/. The file xcustom.odb contains the ODB keys required, including those to insert the image and superimpose the various labels, fills etc. This file can be loaded into the ODB with the {{Odbedit cmd|cmd=load}}.

<br><br>
=== Adding Labels ===

[[File:Mhcustom_label.jpg|thumbnail|left|Figure 6: /Custom/Images/Labels ODB subtree]]

In order to include a readout of ODB values (i.e. labels), on the image, a further ODB subdirectory {{Odbpath|path=/Custom/images/<imagefile.gif/Labels}} must be created. Creating a subdirectory for a particular label i.e. {{Odbpath|path=<label name>}} in the {{Odbpath|path=Labels}} subtree will, at the next custom web page refresh, cause the complete structure for that label to be created and filled with default values. Once the {{Odbpath|path=<label name>}} subtree is created, the user fills the various keys as desired. See [[/Custom ODB tree#Labels subtree]] for details of the various fields. This procedure is repeated for all the labels required, using a unique {{Odbpath|path=<label name>}} subdirectory for each label. An example of a {{Odbpath|path=<label name>}} subtree is shown in Figure 6.

<div style="clear: both"></div> 

<br><br>
=== Adding Bars ===

[[File:Mhcustom_fill.jpg|thumbnail|left|Figure 7: /Custom/Images/Fills ODB subtree]]

In a similar way, Bars can be superimposed on the image. Create a new ODB subdirectory {{Odbpath|path=/Custom/images/<imagefile.gif/Bars}}. Create a subdirectory for a particular Bar ({{Odbpath|path=<bar name>}}) in the {{Odbpath|path=Bars}} subdirectory. Refresh the web page and fill the various keys as desired. See [[/Custom ODB tree#Bars subtree]] for details of the various fields. Examples of a <bar-name> subtree is shown in Figure 7.

<div style="clear: both"></div> 

<br><br>
=== Adding Fills ===
[[File:Mhcustom_bar.jpg|thumbnail|left|Figure 8: /Custom/Images/Bars ODB subtree]]

In a similar way, Fills can be superimposed on the image. Create new ODB subdirectory {{Odbpath|path=/Custom/images/<imagefile.gif/Fills}}. Create a subdirectory for a particular Fill ({{Odbpath|path=<fill name>}}) in the {{Odbpath|path=Fills}} subdirectory. Refresh the web page and fill the various keys as desired. See [[/Custom ODB tree#Fills subtree]] for details of the various fields. Examples of a ({{Odbpath|path=<fill name>}} subtree is shown in Figure 8.

<div style="clear: both"></div> 

<br><br>
== Mapping active areas onto the image ==
Provided [[#HTML mapping]] is activated, "clickable" areas can be created on the image.

This can be done now with a new function like this:
{{Html|text= <area shape="rect" coords="40,200,100,300" alt="Main Valve" href="Custom1?cmd=Toggle&odb=/Equipment/Environment/Variables/Output[2]">}}

This defines a clickable map on top of the custom image. The area(s) should match with some area(s) on the image, e.g. the box of a valve. Determining the co-ordinates of this area is simplified by using the Display mouse position feature.

By clicking on this area, the supplied path to the ODB is used (in this case {{Odbpath|path=/Equipment/Environment/Variables/Output[2]}}) and its value is toggled. If the valve value is then used in the image via a [[#Adding Fills|Fill]] statement to change the color of the valve, it can turn green or red depending on its state. This is illustrated in [[#Display mouse position|Figure 5]].

Clicking an active area can also be made to open a new custom page, for example:
{{Html|text=<area shape=rect coords="687,530, 890,648" alt="Pump detail" href = "Pump!" title="Click for Details">}}
{{Html|text=<area shape=rect coords="560,574,775,662" alt="Buffer Tank detail" href = "BufferTank!" title="Click for Details">}}
where ''Pump!'' and ''BufferTank!'' are defined as links to custom pages in the [[/Custom ODB tree]].

<br><br>
== Edit boxes floating on top of a graphic ==

An edit box can be placed on top of a graphic in a particular position by means of an HTML <span style="color:green"><div></span> tag. Using the ODBEdit function from the Midas JS library [[Mhttpd.js]], the custom page code would look like this:

{| style="text-align: left; width: 100%; background-color: floralwhite;" border="0" cellpadding="1" cellspacing="1"
|-
|<pre style="background-color:floralwhite; color:seagreen; font-style:italic">
<div style="position:absolute; top:100px; left:50px;">
<script type="text/javascript"> </pre>
<pre style="background-color:floralwhite; color:steelblue; font-style:italic;">
document.write('Run number: ')
path='/runinfo/run number'
rn = ODBGet(path)
document.write('<a href="#" onclick="ODBEdit(path)" >')
document.write(rn)
document.write('</a>');</pre>
<pre style="background-color:floralwhite; color:seagreen; font-style:italic;">
</script>
</div>
<img src="custom.gif">
</pre>
|}

The same thing could be done with the HTML-style {{HtmlTag|tag=<odb>}} tag :
<pre style="background-color:floralwhite; color:seagreen; font-style:italic">
<div style="position:absolute; top:100px; left:50px;">
Run number: <odb src="/Runinfo/run number" edit=1>
</div>
<img src="custom.gif">
</pre>

<br><br>

== Interactive SVG Implementation ==

An SVG file loaded on a custom page can be interactively modified using JavaScript.
This is useful for graphically displaying ODB values in complex service or detector systems.

An SVG file can be embedded like this:
<pre>
<object id="svgObject" type="image/svg+xml" data="Midas_helium_example.svg"></object>
</pre>

Objects within the SVG can be modified—for example, by changing their fill color as shown below:
<pre>
const svgDoc = document.getElementById('svgObject').contentDocument;
const obj_Valve = svgDoc.getElementById(valveID);
obj_Valve.style.fill = "#00FF00";
</pre>

SVG images are stored in XML format. In Inkscape, object properties can be interactively edited using the XML Editor.
An example is given below in [[Custom Page Features#Example 4 : Interactive SVG custom page]]

= Examples =
For more examples of accessing the ODB with the Javascript library [[mhttpd.js]] look at the example experiment in the MIDAS package $MIDASSYS/examples/javascript1/example.html.

== Example 1 : Asynchronous calls using mjsonrpc functions ==
See [[mjsonrpc#examples]]

== Example 2 : Asynchronous calls using Javascript and AJAX ==

Example 2 shows html code illustrating the use of ODBMCopy(), where innerHTML is used to display the data. On a page with images or a lot of data, innerHTML allows you to update variables without having to reload the whole page. In the example, a timer causes the page to update every 10s (reread the data). Often the ODB data for the whole page can be read by one asynchronous ODBMCopy() call, rather than scattering synchronous ODBGet() calls throughout the page.

Access to the ODB is provided by the [[Mhttpd.js|MIDAS Javascript Library]], included with the line <span style="color:green"><script src='mhttpd.js'></script></span>.

<div style="background-color:floralwhite; color:seagreen; font-style:italic">
<html> <br>
<head> <br>
<title>MyTitle</title> <br>
<script src='mhttpd.js'></script>
<script> </div>
<div style="background-color:floralwhite; color:steelblue; font-style:italic">
var updatePeriod = 10000; // in msec <br>
var updateTimerId = 0; <br>
var counter=0; <br>
function update() { <br>
:clearTimeout(updateTimerId); <br>
: load();
: if (updatePeriod > 0)
: updateTimerId = setTimeout('update()', updatePeriod);
} <br>
function load() { <br>
: document.getElementById('LastUpdated').innerHTML = "Updating..." + new Date;
: var paths = [ "/Runinfo", "/Experiment"];
: var data_odb=ODBMCopy(paths, mcopy_callback, "json")
: counter++;
: document.getElementById('counter').innerHTML = 'Counter: '+ counter
} <br>
function mcopy_callback(data) { <br>
: var obj= JSON.parse(data);
: var runinfo=obj[0];
: document.getElementById('rn').innerHTML = 'Run Number ='+ parseInt(runinfo["Run number"]);
: document.getElementById('state').innerHTML ='Run State= '+ runinfo.State;
: var experiment=obj[1];
: document.getElementById('name').innerHTML='Experiment name = '+ experiment.Name <br>
}<br> </div>
<div style="background-color:floralwhite; color:seagreen; font-style:italic">
</script> <br>
</head> <br>
<body> <br>
<b>Javascript code using ODBMCopy with callback</b> <br>
The data on the page is updated every 10 sec using a timer<br>
<p id="LastUpdated" > Last updated: never</p><br>
<p id="rn"> Run Number : unknown </p><br>
<p id="state"> State : unknown</p><br>
<p id="name"> Experiment name : unknown </p><br>
<p id="counter">Counter: zero </p><br>
<script type="text/javascript"> </div>
<div style="background-color:floralwhite; color:steelblue; font-style:italic">
: if (updatePeriod > 0)
: update(); </div>
<div style="background-color:floralwhite; color:seagreen; font-style:italic">
</script> <br>
</body> </html></div>

<br><br>
== Example 3 : Synchronous Calls using Javascript and AJAX ==
In the following example, JS functions ODBGet and ODBEdit from the [[Mhttpd.js|MIDAS Javascript Library]] are used to access the ODB.
;NOTE
# Synchronous calls are now deprecated (see [[#The MIDAS Javascript Library|above]]).
# The Javascript library '''must be [[mhttpd.js#include js lib|included in the HTML code]]'''.

{{Html|text=<script>}}
{{JS|text=document.write ('Experiment Name: '+ ODBGet("/Experiment/Name")) <br> var alarm_path="/alarms/Alarm system active"; <br> var alarm_active=ODBGet(alarm_path); <br> document.write('<a href="#" onclick="ODBEdit(alarm_path)" >'+alarm_active+'</a>')}}
{{Html|text=</script>}}

== Example 4 : Interactive SVG custom page ==

[[File:SVGcustom_page.svg|thumbnail|left|Figure X: SVG based custom page]]

In this example, an SVG image forms the basis of a custom page.
It displays two valves and an expansion volume.

The valves change color depending on their status — open or closed.
The expansion volume dynamically changes its height.

All objects within the SVG file are directly modified using JavaScript functions.

<pre>
<!DOCTYPE html>
<html class="mcss">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="midas.css">
<script src="controls.js"></script>
<script src="midas.js"></script>
<script src="mhttpd.js"></script>
<title>Helium example</title>

<style>
.modbbutton {font-size:20px;}
.text {font-size:20px;}
</style>

<script>

// Valve Coloring --------------------------------------------------------------

function updateValveColor(flag, valveID) {
console.log(valveID, flag);
const svgDoc = document.getElementById('svgObject').contentDocument;
//The valveID needs to match the ID given in the svg file
const obj_Valve = svgDoc.getElementById(valveID);

obj_Valve.style.fill = (flag === 1) ? "#00FF00" : "#FF0000";
}

// Confirmation routines --------------------------------------------------------

function confirmValve(arg, valveAddress) {
const txt = arg === "Close" ? "Are you sure to close the valve?" : "Are you sure to open the valve?";
const val = arg === "Open" ? 1 : 0;
dlgConfirm(txt, function(confirmed) {
if (confirmed) {
modbset(valveAddress, val);
}
});
return false; // Prevent ODB value change immediately
}

// Animation -------------------------------------------------------------------

/**
* Update the volume of an SVG element by applying a transformation based on input.
* @param {number} elem - The scale factor to modify the volume.
* @param {string} svgID - The ID of the SVG element to be transformed.
* Comment: This example specifically transform only the ySize of the object,
* with the special case that the bottom edge stays in place
*/
function updateVolume(elem, svgID) {
const svgDoc = document.getElementById('svgObject').contentDocument;
const rootSvg = svgDoc.documentElement;

// Get the width and height of the root SVG element.
const widthAttr = rootSvg.getAttribute("width");
const heightAttr = rootSvg.getAttribute("height");

// Get and parse the viewBox attribute.
const viewBoxAttr = rootSvg.getAttribute("viewBox");
const viewBoxParts = viewBoxAttr.split(" ").map(parseFloat);
const viewBoxWidth = viewBoxParts[2];
const viewBoxHeight = viewBoxParts[3];

// Calculate the scaling factors for x and y axes based on the viewBox and actual width/height.
const xScale = widthAttr / viewBoxWidth;
const yScale = heightAttr / viewBoxHeight;

// Get the element to modify based on the provided svgID.
const obj_Vol = svgDoc.getElementById(svgID);
const bbox = obj_Vol.getBBox();

// Extract the transformation matrix from the element's transform attribute.
const transformAttr = obj_Vol.getAttribute("transform");
const matrixMatch = transformAttr.match(/matrix$([^)]+)$/);

let transformedY, transformedHeight;

// Apply matrix transformation if it exists.
if (matrixMatch) {
const [a, b, c, d, e, f] = matrixMatch[1].split(",").map(parseFloat);

// Apply matrix to the top-left corner of the bbox to get transformed Y position and height.
transformedY = d * bbox.y + f;
transformedHeight = d * bbox.height;
}

// Scale factor is 0.01 times the provided 'elem' value.
const scale = 0.01 * elem;

// Calculate the new Y position after applying scaling.
const yPosInit = (transformedY / yScale + transformedHeight / yScale) * (1 - scale);

// Update the element's transform attribute with the new translation and scaling.
// In this example only the height (y-axis) is changed
updateTransform(obj_Vol, `0,${yPosInit}`, `1,${scale}`);
}

/**
* Updates the transform attribute of an SVG element by applying new translation and scale values.
* @param {Element} elem - The SVG element whose transform attribute is to be updated.
* @param {string} newTranslate - The new translation value as a string (e.g., "0,100").
* @param {string} newScale - The new scale value as a string (e.g., "1,0.5").
*/
function updateTransform(elem, newTranslate, newScale) {
let transform = elem.getAttribute("transform") || "";

// Regular expressions to match existing translate and scale transformations.
const translateRegex = /translate$([^)]+)$/;
const scaleRegex = /scale$([^)]+)$/;

// Remove any existing translate and scale transformations from the transform string.
transform = transform
.replace(translateRegex, '')
.replace(scaleRegex, '')
.trim();

// Construct the new transform string with updated translation and scale.
const newTransform = `translate(${newTranslate}) scale(${newScale}) ${transform}`.trim();

// Apply the new transform to the element.
elem.setAttribute("transform", newTransform);
}

</script>

</head>

<body class="mcss" onload="mhttpd_init('Example');">


<div id="mheader"></div>
<div id="msidenav"></div>

<div id="mmain">


<div id="filling_valve" class="modb" data-odb-path="/Equipment/Example/Filling Valve" onchange="updateValveColor(this.value,'Filling_valve');" onload="updateValveColor(this.value,'Filling_valve');">
<div id="exhaust_valve" class="modb" data-odb-path="/Equipment/Example/Exhaust Valve" onchange="updateValveColor(this.value,'Exhaust_valve');" onload="updateValveColor(this.value,'Exhaust_valve');">

<table class="mtable">
<tr><th class="mtableheader">Helium example</th></tr>
<tr><td>
<div style="position:relative;width:600px;margin:auto">

<object id="svgObject" type="image/svg+xml" data="Midas_helium_example.svg"></object>





<button class="modbbutton" class="mbutton" data-odb-path="/Equipment/Example/Filling Valve"
style="position:absolute; top: 473px;left:125px;"
data-validate='confirmValve("Open","/Equipment/Example/Filling Valve")'
data-odb-value="1">Open</button>
<button class="modbbutton" class="mbutton" data-odb-path="/Equipment/Example/Filling Valve"
style="position:absolute; top: 473px;left:195px;"
data-validate='confirmValve("Close","/Equipment/Example/Filling Valve")'
data-odb-value="0">Close</button>
<div class="text" style="position:absolute; top: 443px; left:125px; font-weight: bold;">Filling valve:</div>



<button class="modbbutton" class="mbutton" data-odb-path="/Equipment/Example/Exhaust Valve"
style="position:absolute; top: 300px;left:352px;"
data-validate='confirmValve("Open","/Equipment/Example/Exhaust Valve")'
data-odb-value="1">Open</button>
<button class="modbbutton" class="mbutton" data-odb-path="/Equipment/Example/Exhaust Valve"
style="position:absolute; top: 300px;left:422px;"
data-validate='confirmValve("Close","/Equipment/Example/Exhaust Valve")'
data-odb-value="0">Close</button>
<div class="text" style="position:absolute; top: 270px; left:352px; font-weight: bold;">Exhaust valve:</div>



<div class="modbvbar" data-odb-path="/Equipment/Example/Expansion volume"
style="width:20px;height:200px; color:grey; position:absolute; top:56px;left:320px"
data-min-value="0" data-max-value="100" data-log="0"
onchange="updateVolume(this.value, 'Expansion_volume')"></div>
<div class="mvaxis" style="width:30px;height:200px; position:absolute; top:56px;left:340px; text-align:left"
data-min-value="0" data-max-value="100" data-log="0"></div>

</td></tr>

</table>

</div>

</body>
</html>
</pre>

[[Category:Custom]]

Custom Page Features

2025-05-12T12:14:00Z

Rudzki: /* Interactive SVG Implementation */

{{Pagelinks}}
= Links =
<div style="column-count:3;-moz-column-count:3;-webkit-column-count:3">
* [[Mhttpd|mhttpd MIDAS web server]]
* [[ODB Page]]
* [[Custom Page]]
* [[/Custom ODB tree]]
* [[Mhttpd.js|MIDAS Javascript library (mhttpd.js)]]
* [[mjsonrpc|MIDAS JSON RPC library functions (mjsonrpc)]]
* [[odbedit]]
</div>

= Introduction =
;NOTE
: Since 2018, many of the features described here can now be implemented more simply using the mod* JS functions (see [[Custom Page|Custom Web Page]]).
: '''If writing a new web page, it is strongly recommended you make use of the mod*JS features. '''

This page describes some of the special features provided for use on a user-created [[Custom Page|Custom Web Page]] using the [[#The MIDAS Javascript Library]], which was the recommended way to write Custom Pages before the [[Custom Page#modb* Javascript scheme]] was available.

<br><br>

= The MIDAS Javascript Library =
The MIDAS Javascript Library [[mhttpd.js]] includes routines written in Javascript and AJAX to provide features useful for writers of [[Custom Page]]s, such as access to the ODB. Recently asynchronous [[mjsonrpc|JSON-RPC functions]] using [[mjsonrpc#Javascript client library|Promises]] has been added (January 2016).
;NOTE
:To use functions in this library, it '''must be [[mhttpd.js#include js lib|included in the HTML code]]'''.

Many of the older routines (ODBGet, ODBSet) use '''synchronous''' RPC requests. With synchronous request, a second RPC request must wait until the first request is complete. This can significantly slow down web pages where many calls to ODBGet are made. For this reason, functions were developed that can be synchronous or '''asynchronous''' (e.g. ODBMCopy) that include a callback mechanism. The data from ODBMCopy can be formatted in [[mjsonrpc#JSON general information|JSON]].

Web developers are moving away from synchronous RPC requests, which are now deprecated [https://midas.triumf.ca/elog/Midas/1128]. Some modern browsers return a warning on a synchronous RPC request.

A new group of JSON-RPC functions using [[mjsonrpc#Javascript client library|Promises]] has been added to the MIDAS Javascript Library (January 2016). These are asynchronous only, and they also provide more functionality and have better error handling than the older AJAX calls, which are also inconsistent in how they handle Booleans. They also have much improved handling of reading/writing arrays to the ODB. Before 2018 it was recommended that all new Custom Pages are written using these JSON-RPC functions. {{Important|text=Since 2018 the [[Custom Page#modb* Javascript scheme]] is recommended for new Custom Pages}}.

The MIDAS Javascript Library routines requires an up-to-date browser that supports Promises (see [https://midas.triumf.ca/elog/Midas/1145]). If using an older browser version, the asynchronous AJAX calls (e.g. ODBMCopy) should be used in order to avoid having to rewrite the web page at a later date to remove all synchronous calls.

<br><br>
== Access the ODB using mjson-rpc asynchronous functions ==

Access to the ODB is provided by the [[Mhttpd.js|MIDAS Javascript Library]], which (since January 2016) includes the [[mjsonrpc]] functions. It is [[#The MIDAS Javascript Library|recommended]] that these functions are used for '''new''' pages rather than the older AJAX calls (see below).

To run these functions you need
# to [[mhttpd.js#include js lib|include the Javascript library in the HTML code]]'''
# to use an up-to-date browser that supports Promises (see [https://midas.triumf.ca/elog/Midas/1145]).

Examples showing how to read and write to the ODB can be found at [[mjsonrpc#examples]]. Also included are examples using arrays.

<br><br>
== Access the ODB using asynchronous AJAX calls ==
;NOTE
: It is recommended that asynchronous MIDAS JSON-RPC functions are used for new pages rather than the older AJAX calls (see [[#Access the ODB using mjson-rpc asynchronous functions|above]]).

[[#Example 2 : Asynchronous calls using Javascript and AJAX|Example 2]] uses the asynchronous call ODBMCopy() with callback to read the data. The data are converted into JSON format. In this case, when accessing the JSON data, ''the ODB Keynames must be in the same case as they are in the ODB'', even though the case is ignored by the ODB. If you find this feature annoying, use [[#Access the ODB using mjson-rpc asynchronous functions|mjson-rpc function db_get_values()]] as all keynames are converted to lower case.

<br><br>
== Access the ODB using synchronous AJAX requests ==
;NOTE
: Synchronous requests are now deprecated (see [[#The MIDAS Javascript Library|above]]). New pages should be written [[#Using mjson-rpc asynchronous functions]].

See [[#Example 3 : Synchronous Calls using Javascript and AJAX]].

<br><br>
= Access the ODB with HTML-style <span style="color:seagreen font-style:italic"><odb></span> tags =

;NOTE
: This method pre-dates the [[Mhttpd.js|MIDAS Javascript Library]]. It is recommended that the [[Mhttpd.js|MIDAS Javascript Library]] be used for ODB access.

If Javascript (JS) is not available, the older HTML-style {{HtmlTag|tag=<odb>}} tags are still available and provide limited functionality.

The HTML-style {{HtmlTag|tag=<odb>}} tag has been defined for read/write access to the ODB under HTML. The {{HtmlTag|tag=<odb>}} tags are declared within enclosing HTML {{HtmlTag|tag=<form...>....</form>}} tags.

{| style="text-align: left; width: 100%; background-color: rgb(255, 255, 255);" border="3" cellpadding="2" cellspacing="2"
|+ Access to ODB from HTML
|-
| colspan="1" rowspan="1" style="text-align: center; vertical-align: top; background-color: rgb(204, 204, 255); font-weight: bold;" | HTML ODB tag
| colspan="1" rowspan="1" style="text-align: center; vertical-align: top; background-color: rgb(204, 204, 255); font-weight: bold;" | Meaning

|-
| colspan="1" rowspan="1" style="text-align: left; vertical-align: top; background-color: rgb(255, 255, 255); color: seagreen; font-style:italic" |<odb src="odb path">
| colspan="1" rowspan="1" style="text-align: left; vertical-align: top; background-color: rgb(255, 255, 255); color: black" |Display ODB field (read only)

|-
| colspan="1" rowspan="1" style="text-align: left; vertical-align: top; background-color: rgb(255, 255, 255); color: seagreen; font-style:italic" |<odb src="odb path" edit=1 pwd="CustomPwd">
| Display an Editable ODB field (inline style). Optional password protection with '''pwd''' .

|-
| colspan="1" rowspan="1" style="text-align: left; vertical-align: top; background-color: rgb(255, 255, 255); color: seagreen; font-style:italic" |<odb src="odb path" edit=2 pwd="CustomPwd">
| Display an Editable ODB field (popup style). Optional password protection with '''pwd''' .
|}

;NOTE
: The Optional password protection with '''pwd''' (documented in the [http://ladd00.triumf.ca/~daqweb/doc/midas-old/html/RC_customize_ODB.html#RC_Access_Control| OldMidas Document]) may not be working.
: Use the [[/Experiment ODB tree#Security subtree|Web Password security]] instead.

{{HtmlTag|tag=<odb>}} tags are included in the HTML code e.g.

{{Html|text= Experiment Name: <odb src="/Experiment/Name"> <br> Run Number: <odb src="/runinfo/run number" edit=1>}}

See also [[Custom Page#How to write a Custom Page|HTML Custom Page example]].

<br><br>
= ODB RPC access =
The [[Mhttpd.js|MIDAS Javascript Library]] function ODBRpc() defined for RPC access.

This permits buttons on MIDAS "custom" web pages to invoke RPC calls directly into user frontend programs, for example to turn hardware modules on or off.

<br><br>
= JSON support =
[[mjsonrpc#JSON general information|JSON]] support is provided with the [[Mhttpd.js|MIDAS Javascript Library]].

<br><br>
= Access to the MIDAS Menu buttons =

;NOTE
: '''New (since 2018) custom pages using the [[Custom Page#modb* Javascript scheme]] should follow the instructions there to include the standard MIDAS Menu buttons.'''
<br><br>
Access to the standard MIDAS Menu buttons can be provided with HTML {{HtmlTag|tag=<input...>}} tags of the form:


{{Html|text=<input name="cmd" value=''<button-name>'' type="submit" >}}
Valid values are the standard MIDAS Menu buttons, i.e. (Start, Pause, Resume, Stop, ODB, Elog, Alarms, History, Programs etc). The {{HtmlTag|tag=<input...>}} tags must be declared within enclosing HTML {{HtmlTag|tag=<form...>....</form>}} tags (see above).

The following HTML fragment shows the inclusion of three of the standard buttons, giving access to the Main Status, ODB and Messages pages :

{{Html|text= <form name="form1" method="Get" action="/CS/MyExpt&"> <br> <input name="cmd" value="Status" type="submit"> <br> <input name="cmd" value="ODB" type="submit"> <br> <input name="cmd" value="Messages" type="submit"> <br> ... <br> </form> }}

See also [[#Redirect]].

<br><br>
= Redirect =

When buttons are included on a Custom Page, after pressing a button (e.g. the Start or Stop button) it may be desirable to return to the same custom page, rather than returning to the [[Status Page]].

This can be done by including an HTML {{HtmlTag|tag=<input...>}} tag with the attributes ''type'' set to "hidden" and ''name'' set to "redir". This name ("redir") is detected by [[Mhttpd]], causing a redirect to the specified custom link in the ''value'' attribute.

For example, the following redirects the screen back to the custom page link {{Odbpath|path=/Custom/my_custom_page&}} when buttons are pressed:
{{Html|text=<input type=hidden name="redir" value="my_custom_page&">}}

See also [[#Replace Status Page by a Custom page|Redirect when a Custom Page replaces the Status Page]].
<br><br>

= CustomScript Buttons =

[[/Customscript ODB tree#Customscript-button|CustomScript buttons]] can be provided on [[Custom Page|Custom Pages]]. These buttons are equivalent to optional '''script buttons''' on the [[Status Page]], which call a script to perform a particular action when the button is pressed. See [[/Script ODB tree#Script-button|script buttons]] for details. Customscript buttons can be set up through the [[/Customscript ODB tree]].

Any key <span style="color:purple; font-style:italic">/CustomScript/test</span> will appear as a customscript-button
<span style="color: #444444; background-color: #CCCCCC; font-style:italic; font-size: 90; padding:0.25em;padding-left: 0.5em;padding-right: 0.5em;border:1px solid #808080;border-radius: 5px;margin-bottom:1px;">test</span> on a custom page whose code includes an HTML {{HtmlTag|tag=<input...>}} tag of the form:
{{Html|text=<input type=submit name=customscript value="test">}}
where the action of the button <span style="color: #444444; background-color: #CCCCCC; font-style:italic; font-size: 90; padding:0.25em;padding-left: 0.5em;padding-right: 0.5em;border:1px solid #808080;border-radius: 5px;margin-bottom:1px;">test</span> will be found in the <span style="color:purple; font-style:italic">/customscript/test</span> subdirectory.

After pressing a customscript-button, the ''type=submit'' in the HTML {{HtmlTag|tag=<input>}} will cause a page reload. This will result in a switch to the [[Status Page]], unless a [[#redirect]] input tag is included to redirect back to the original custom page.

== Customscript button without a page reload ==
To define a customscript button that does '''not''' cause a page reload, set the ''type'' in the HTML {{HtmlTag|tag=<input>}} to "button", i.e.
{{Html|text=<input name="customscript" value="test" type="button" onClick=cs_button(this.value)> }}
and use ''"onClick"'' to call a function to [[#Send an Ajax Request]] instead. The following function sends an asynchronous request, with an optional callback.
{{HtmlTag|tag=<script>}}
<div style="background-color:floralwhite; color:steelblue; font-style:italic">
function cs_button(cmd, callback)<br>
{ // send a request to execute a custom script
: var url;
: var request = XMLHttpRequestGeneric();
:
: url = ODBUrlBase
: if(document.getElementById("redir") != null)
:: url += '?redir='+document.getElementById('redir').value
: url+='&customscript='+ encodeURIComponent(cmd);
: request.open('GET', url, true); // asynchronous request
: request.send(null);
: if(callback!=undefined) {
:: request.onreadystatechange = function() {
::: if (request.readyState == 4) {
:::: if (request.status == 200)
::::: callback();
:::: else
::::: alert('cs_button: Error after sending request to Custom Script "'+cmd+'" :\nHTTP Status: '+request.status)
::: }
:: }
: }
: else {
:: if (request.status != 200)
::: alert('cs_button: Error after sending request to Custom Script "'+cmd+'" :\nHTTP Status: '+request.status)
: }
}
</div>
{{HtmlTag|tag=</script>}}

<br><br>
= Resource files =
== MIDAS resource files ==
A number of resource files have been provided in the MIDAS packages under {{Filepath|path=../packages/midas/resources}}. When including a MIDAS resource file, no key in {{Odbpath|path=/Custom}} needs to be defined as the MIDAS resources directory is searched automatically.

One such resource file is a condensed stylesheet {{File|name=midas.css}} for users who would like their custom pages to have a similar "look and feel" to that of the standard pages. To include the MIDAS stylesheet, in the HTML header, add
{{HtmlTag|tag=<link rel="stylesheet" type="text/css" href="midas.css">}}
Other resource files can provide [[Custom Page#How to use the standard MIDAS navigation bars on your custom page|the standard MIDAS navigation bars]].

== Custom resource files ==
It is often desirable to serve resource files (i.e. '''local files''' such as an external stylesheet, javascript files or images'''<sup>***</sup>''') to a custom page. The following sections describe two alternative ways of serving resource files to a custom page:
* [[#Resource files served WITH /custom/path key defined|with /custom/path key defined]]
* [[#Resource files served WITHOUT /custom/path key defined|without /custom/path key defined]]
See also serving resources to a [[#Replace Status Page by a Custom Status page|Custom Status page]].
;NOTE
: '''<sup>***</sup>''' To superimpose labels, bars or fills onto an image, the image cannot be served as a resource file. See [[#Image insertion]].

=== Resource files served WITH <span style="color: purple; font-style:italic;">/custom/path</span> key defined ===
When a number of resource files are required, it is convenient to place them in the same directory on the disk, and create a key {{Odbpath|path=/Custom/Path}} to contain this directory.

$ ls /home/midas/online/custom/
custom_functions.js custom_globals.js custom_page.html custom_stylesheet.css test_image.png
With the {{Odbpath|path=/Custom/Path}} key defined, [[/Custom ODB tree#Custom-Link|custom-links]] for individual resource files need not be created in the {{Odbpath|path=/Custom/Path}} tree. The custom-link {{Odbpath|path=custom_page&}} '''is''' required so that the custom page can be accessed from the [[/Custom ODB tree#Custom-Button|custom-button]] {{Button|name=custom_page}} on the Status Page. The key name ends in the special character "&" so that it will open in the same window as the Status page (see [[/Custom ODB tree#Key names|key names]]).
$ odbedit
[local:exp:S] ls /custom
path /home/midas/online/custom/
custom_page& custom_page.html

A {{HtmlTag|tag=<script>}} tag for each resource file to be served (specifying the file name) is then placed in the header of {{File|name=custom_page.html}}
i.e.
{{Html|text=<script type="text/javascript" src="custom_functions.js"></script>}}
{{Html|text=<script type="text/javascript" src="custom_globals.js"></script>}}
<br> and a {{HtmlTag|tag=<link>}} tag for an external stylesheet
{{Html|text=<link type="text/css" rel="stylesheet" href="custom_stylesheet.css" title="Stylesheet">}}
An image tag is placed in the body of {{File|name=custom_page.html}}
{{Html|text=<img src="test_image.png"> }}
[[mhttpd]] then loads the resource file from the directory indicated by the Path key with the correct MIME type (see [[/Custom ODB tree#Keys in the /Custom tree|Custom tree keys]] for supported MIME types).

=== Resource files served WITHOUT <span style="color: purple; font-style:italic;">/custom/path</span> key defined ===
Alternatively, resource files can be served to a [[Custom Page]] by creating a key for every resource file in the [[/Custom ODB tree]]. These keys must contain the full path of the file on the disk, and the key {{Odbpath|path=/Custom/Path}} must NOT be defined. The resource files can be in different directories on the disk. By defining the key names with an appropriate file extension, the resource files are served with the appropriate MIME types. The key names end in the special character "!" so that they will not appear on the Status page as custom-links (see [[/Custom ODB tree#Key names|key names]].

Without the {{Odbpath|path=/Custom/Path}} key, the links for the above example in the {{Odbpath|path=/Custom}} tree might look like
$ odbedit
[local:exp:S] ls /custom
custom_page& /home/midas/online/custom/custom_page.html
custom_functions.js! /home/midas/online/resources/custom_functions.js
globals.js! /home/midas/online/resources/custom_functions.js
stylesheet.css! /home/midas/online/stylesheets/custom_stylesheet.css
image.png! /home/midas/images/test_image.png

assuming the resource files are now in the subdirectories indicated.
The {{HtmlTag|tag=<script>}} tag for each resource file to be served (specifying the custom-link) is then placed in the header of {{File|name=custom_page.html}}
i.e.
{{Html|text=<script type="text/javascript" src="custom_functions.js!"></script>}}
{{Html|text=<script type="text/javascript" src="globals.js!"></script>}}
<br> and a {{HtmlTag|tag=<link>}} tag for an external stylesheet
{{Html|text=<link type="text/css" rel="stylesheet" href="stylesheet.css!" title="Stylesheet">}}
An image tag is placed in the body of {{File|name=custom_page.html}}
{{Html|text=<img src="image.png!"> }}

<br><br>

The resulting Demo custom page is shown in Figure 1, which can be compared with Figure 2 (no stylesheet).
{| class="wikitable"
|-
! Figure 1 !! Figure 2
|-
| Demo Custom Page using MIDAS stylesheet || Demo Custom Page
|-

| [[File:Mhxcustom03.jpg|thumb|300px]] || [[File:Mhxcustom02.jpg|thumb|200px]]
|}
<br clear=all>

<br><br>
= Alias-Buttons and Hyperlinks =
Any hyperlink can easily be included on a [[Custom Page]] by using the standard HTML anchor {{HtmlTag|tag=<a...>}} tag, e.g.
{{Html|text=<a href="http://ladd00.triumf.ca/~daqweb/doc/midas/html/">Midas Help</a>}}

Links on a custom page equivalent to [[/Alias ODB tree#Alias-Buttons|alias-buttons]] can also be made e.g.
{{Html|text=<button type="button" onclick="document.location.href='/Alias/alias&';">alias</button>}}
See the [[/Alias ODB tree]] for details.

<br><br>
= Page refresh =
The following {{HtmlTag|tag=<meta...>}} tag included in the HTML header code will cause the whole custom page to refresh in 60 seconds :
{{Html|text=<meta http-equiv="Refresh" content="60">}}
It is also possible to [[#Periodic update of parts of a custom page|periodically update parts]] of a custom page.

<br><br>
= Periodic update of parts of a custom page =

The functionality of [[Mhttpd.js|ODBGet]] together with the window.setInterval() function
can be used to update parts of the web page periodically.
For example the Javascript fragment below contains a function which updates the current run number every 10 seconds in the background:

<div style="background-color:floralwhite; color:steelblue; font-style:italic"> 
window.setInterval("Refresh()", 10000);<br>
function Refresh() {<br>
:document.getElementById("run_number").innerHTML = ODBGet('/Runinfo/Run number');<br>
}
</div>
The custom page has to
* [[Mhttpd.js#include js lib|include the MIDAS JS library]] to access ODBGet
* contain an element with id="run_number", such as
{{Html|text=<td id="run_number"></td>}}

<br><br>
= Display last MIDAS message(s) =

The message log (see [[Message System]]) can be accessed from a custom page using a call to the JavaScript library function [[Mhttpd.js|ODBGetMsg]] (provided the [[Mhttpd.js#include js lib|JS library is included]]).

This allows the inclusion of the "Last Midas message" on a custom page, e.g.
{{JS|text=document.write('Last message:'+ODBGetMsg("midas",0,1))}}
More messages may be displayed by increasing the third parameter to ODBGetMsg.
;Note
: Parameters were changed August 2015. See [[Mhttpd.js|ODBGetMsg]] for older versions.
: Coming soon - a [[mjsonrpc]] function

<br><br>
= Generate a message log entry =

A custom page can generate a message to be sent to the MIDAS message log (see [[Message System]]). A call to mjsonrpc_cm_msg() will generate a message if using the [[mjsonrpc]] functions. Otherwise, use the AJAX function [[Mhttpd.js|ODBGenerateMsg]]. To use these functions, the [[Mhttpd.js#include js lib|JS library must be included]] in the html code.

<br><br>
= Checkboxes =
;NOTE
: '''New (since 2018) custom pages using the [[Custom Page#modb* Javascript scheme]] should use [[Custom Page#modbcheckbox|modbcheckbox]] to create a checkbox.'''
<Br><br>

The function [[Mhttpd.js|ODBSet]] (provided the [[Mhttpd.js#include js lib|JS library is included]]) can be used when one clicks on a checkbox for example:
{{Html|text=<input name="box0" type="checkbox" onClick="ODBSet(my_path, this.checked?'1':'0')">}}
If used as above, the state of the checkbox must be initialized when the page is loaded. This can be done with some JavaScript code called on initialization, e.g.
{{JS|text=document.form1.box0.checked= ODBGet(my_path)); // initialize to the correct value}}

<br><br>
= Replace Status Page by a Custom page =

Click to enlarge thumbnail
[[File:Mhcustom_status.jpg|thumbnail|left|Figure 3: ODB /Custom/Status custom-link to a custom status page]]
<div style="clear: both"></div> 

If a custom-link with the [[/Custom ODB tree#Key names|reserved key name]] '''Status''' (not "Status&" or "Status!") is created in the [[/Custom ODB tree]] (as shown in Figure 3), then that custom page will '''replace the default Status Page'''.

Clicking on the {{Button|name=Status}} button on any of the sub-pages (e.g. [[ODB Page]], [[Programs Page]] etc.) will now return to the Custom Status Page. If there are buttons on the Custom Status page, you '''must''' include a [[#Redirect]] statement of the form
{{Html|text=<input type=hidden name="redir" value="../">}}
or you will see the message
Invalid custom page:NULL path

If the Custom Status page includes [[#Resource files]] served on a regular custom page with a statement such as
{{Html|text=<script type="text/javascript" src="cs_functions!">}}
to serve them in a Custom Status page, the statement would be
{{Html|text=<script type="text/javascript" src="<span style="font-weight:bold">/CS/</span>cs_functions!">}}
In fact, this statement can be used in a regular custom page, as the "/CS/" is ignored in that case.

To return to the default Status Page, delete the <span style="color: purple; font-style:italic;">/Custom/Status</span> key.

<br><br>
= Start, Stop and Check if a program is running =
There are [[mjsonrpc]] functions that implemented all three program management functions - start program,
stop program and "is running?" as JSON-RPC methods.

<br><br>
= Send an Ajax request =
By sending an Ajax request from a custom page, you can make a button perform a specific function.

All functions in midas are controlled through special URLs. So the URL
http://<host:port>/?cmd=Start&value=10
will start run #10.

Although it is easier to use an HTML input statement to [[#Access to the MIDAS Menu buttons]],
to send an Ajax request, you can use the function ''XMLHttpRequestGeneric'' which is in the MIDAS Javascript library [[mhttpd.js]].
Then the HTML code would be

{{Html|text=<input type="button" onclick="start()">}}

and in your JavaScript code add a function ''start()'':

<div style="background-color:floralwhite; color:steelblue; font-style:italic">
function start()
{
: var request = XMLHttpRequestGeneric();

: url = '?cmd=Start&value=10';
: request.open('GET', url, true); // asynchronous request
: request.send(null);
} <br>
</div>
See also [[#Access to the MIDAS Menu buttons]]. Another example with optional callback can be found in [[#Customscript button without a page reload]].

This mechanism can be used for starting a particular program, see for example (see [https://midas.triumf.ca/elog/Midas/1046]). However, this functionality is now provided by [[mjsonrpc]] functions - see [[#Start, Stop and Check if a program is running]].

<br><br>
= Image insertion =
An image can be loaded from the web using an HTML {{HtmlTag|tag=<img...>}}, e.g.
{{Html|text="TRIUMF logo" <img src="https://lixenon.triumf.ca/InternalDocuments/Alice/figures/TRIUMF-logo.jpg/image_preview">}}
or a MIDAS History image can be inserted into a custom page using an HTML {{HtmlTag|tag=<img...>}} tag of the following form:
{{Html|text=blah<img src="http://hostname.domain:port/HS/Meterdis.gif&scale=12h&width=300">}}

If the image file is on the local disk, it can be loaded as a '''resource file'''. The image can be of format .pdf, .jpg, .gif, .png. See loading [[#Resource files]].

If you wish to superimpose features such as '''labels and fills''', the image file cannot be served as a [[#Resource files|resource file]]. Instead, the image file must be in '''gif''' format, and must be included in the {{Odbpath|path=/Custom/images}} subtree (Figure 4). Image insertion into a Custom page will be illustrated using the Demo custom page shown in [[#MIDAS stylesheet|Figure 2]]. All the files required for this demo can be found in the MIDAS package at $MIDASSYS/examples/custom. If you do not wish to create
the keys yourself, proceed to [[#Superimposing Labels, Bars and Fills onto a gif image]].

Make a [[/Custom ODB tree#Custom-Link|custom-link]] to the Demo custom page file ''myexpt.html'' , i.e.
[local:js:S]/>ls /custom
myexpt& /home/test/packages/midas/examples/custom/myexpt.html

To make the image ''myexpt.gif'' visible on the custom page, the path and filename of the image file must be defined in the {{Odbpath|path=/Custom/images}} subtree. To do this,
create the subtrees {{Odbpath|path=/Custom/images/myexpt.gif}} where the subtree name "myexpt.gif" is named for the image file you are going to use. Multiple images can be used, by creating multiple imagefile subtrees.

In the imagefile subtree {{Odbpath|path=myexpt.gif}}, create the STRING key {{Odbpath|path=Background}}, and set it to contain the path and name of the image file. The tree structure should then look similar to Figure 4, minus the labels/bars/fill subtrees which will be added to the ODB later.

The image must also be referenced in the custom HTML file ''myexpt.html'' in the "src" field of an HTML {{HtmlTag|tag=<img...>}} tag, e.g.
{{Html|text=<img '''src="myexpt.gif"'''>}}

Click to enlarge thumbnail
[[File:Mhcustom_images.jpg|thumbnail|left|Figure 4: /Custom/Images ODB Tree]]
<br clear=all>
Once the image is visible, enable [[#HTML mapping]], optionally [[#Display mouse position]] and proceed to [[#Superimposing Labels, Bars and Fills onto a gif image]].

<br><br>
== HTML mapping ==
Note that if additional features such as active clickable areas and labels, bars and fills superimposed on the image are also required, HTML mapping must also be activated with the HTML {{HtmlTag|tag=<map...>}} tag and the "usemap" attribute of the HTML {{HtmlTag|tag=<img>}} tag
{{Html|text= <map '''name="myexpt.map"'''> <br> <img src="myexpt.gif" '''usemap="#myexpt.map"'''> <br>...<br> </map>"}}

<br><br>
== Display mouse position ==
[[File:Cursor.png|thumbnail|left|Figure 5: MEG Gas System Custom Page showing cursor position]]
<div style="clear: both"></div> 

When writing custom pages with large background images and labels and fills placed on that image, it is hard to figure out X and Y coordinates of the labels. This can now be simplified by using the function ''getMouseXY()'' in the development JavaScript built-in library [[develop.js]]. This function supplies the X,Y position of the cursor if an element of ID "'''refimg'''" is present. This JS library '''must be [[develop.js|included in the custom page]]''' in order to use it:

Then, set the "id" attribute of the background HTML {{HtmlTag|tag=<img...>}} tag to "refimg", e.g.

<div style="background-color:floralwhite; color:seagreen; font-style:italic">
: <img '''id="refimg"''' src="ebit_pc.gif" usemap="#Custom1"> 
: <map name="Custom1">
: .....
: </map>
</div>

If the "'''refimg'''" tag is present, the cursor changes into a crosshair, and its absolute and relative locations in respect to the reference image are shown in the status bar (Figure 5).

<br><br>
== Superimposing Labels, Bars and Fills onto a gif image ==
You can enhance your custom page by superimposing multiple features based on ODB variables onto an image (e.g. [[#Display mouse position|Figure 5]]), such as

* labels: "live" ODB values positioned in a particular location of the page
* bars : "bar level" showing graphically ODB values such as levels or rate etc.
* fills : "color level" where colour is used as the level indicator.

Each entry (label/bar/fill) will have an ODB tree associated to it defining the ODB variable path, X/Y position, colour, etc. Each time the page is updated, the latest ODB value/level/rate will be shown based on the ODB parameter to which the label, bar or fill is linked - hence the term "live". The overlay of the requested features is done onto the selected image file.

This powerful new extension brings the [[mhttpd]] capability closer to other experimental web controllers similar to EPICS.

;Note
: Be sure to enable the feature to [[#Display mouse position]] in order to facilitate finding the X,Y positions of the various features.
: [[#HTML mapping]] must be activated for labels/bars/fills to work

A Demo custom page showing labels, bars and fills superimposed on an image is shown in [[#MIDAS stylesheet|Figure 2]].
All the files for this demo can be found in $MIDASSYS/examples/custom/. The file xcustom.odb contains the ODB keys required, including those to insert the image and superimpose the various labels, fills etc. This file can be loaded into the ODB with the {{Odbedit cmd|cmd=load}}.

<br><br>
=== Adding Labels ===

[[File:Mhcustom_label.jpg|thumbnail|left|Figure 6: /Custom/Images/Labels ODB subtree]]

In order to include a readout of ODB values (i.e. labels), on the image, a further ODB subdirectory {{Odbpath|path=/Custom/images/<imagefile.gif/Labels}} must be created. Creating a subdirectory for a particular label i.e. {{Odbpath|path=<label name>}} in the {{Odbpath|path=Labels}} subtree will, at the next custom web page refresh, cause the complete structure for that label to be created and filled with default values. Once the {{Odbpath|path=<label name>}} subtree is created, the user fills the various keys as desired. See [[/Custom ODB tree#Labels subtree]] for details of the various fields. This procedure is repeated for all the labels required, using a unique {{Odbpath|path=<label name>}} subdirectory for each label. An example of a {{Odbpath|path=<label name>}} subtree is shown in Figure 6.

<div style="clear: both"></div> 

<br><br>
=== Adding Bars ===

[[File:Mhcustom_fill.jpg|thumbnail|left|Figure 7: /Custom/Images/Fills ODB subtree]]

In a similar way, Bars can be superimposed on the image. Create a new ODB subdirectory {{Odbpath|path=/Custom/images/<imagefile.gif/Bars}}. Create a subdirectory for a particular Bar ({{Odbpath|path=<bar name>}}) in the {{Odbpath|path=Bars}} subdirectory. Refresh the web page and fill the various keys as desired. See [[/Custom ODB tree#Bars subtree]] for details of the various fields. Examples of a <bar-name> subtree is shown in Figure 7.

<div style="clear: both"></div> 

<br><br>
=== Adding Fills ===
[[File:Mhcustom_bar.jpg|thumbnail|left|Figure 8: /Custom/Images/Bars ODB subtree]]

In a similar way, Fills can be superimposed on the image. Create new ODB subdirectory {{Odbpath|path=/Custom/images/<imagefile.gif/Fills}}. Create a subdirectory for a particular Fill ({{Odbpath|path=<fill name>}}) in the {{Odbpath|path=Fills}} subdirectory. Refresh the web page and fill the various keys as desired. See [[/Custom ODB tree#Fills subtree]] for details of the various fields. Examples of a ({{Odbpath|path=<fill name>}} subtree is shown in Figure 8.

<div style="clear: both"></div> 

<br><br>
== Mapping active areas onto the image ==
Provided [[#HTML mapping]] is activated, "clickable" areas can be created on the image.

This can be done now with a new function like this:
{{Html|text= <area shape="rect" coords="40,200,100,300" alt="Main Valve" href="Custom1?cmd=Toggle&odb=/Equipment/Environment/Variables/Output[2]">}}

This defines a clickable map on top of the custom image. The area(s) should match with some area(s) on the image, e.g. the box of a valve. Determining the co-ordinates of this area is simplified by using the Display mouse position feature.

By clicking on this area, the supplied path to the ODB is used (in this case {{Odbpath|path=/Equipment/Environment/Variables/Output[2]}}) and its value is toggled. If the valve value is then used in the image via a [[#Adding Fills|Fill]] statement to change the color of the valve, it can turn green or red depending on its state. This is illustrated in [[#Display mouse position|Figure 5]].

Clicking an active area can also be made to open a new custom page, for example:
{{Html|text=<area shape=rect coords="687,530, 890,648" alt="Pump detail" href = "Pump!" title="Click for Details">}}
{{Html|text=<area shape=rect coords="560,574,775,662" alt="Buffer Tank detail" href = "BufferTank!" title="Click for Details">}}
where ''Pump!'' and ''BufferTank!'' are defined as links to custom pages in the [[/Custom ODB tree]].

<br><br>
== Edit boxes floating on top of a graphic ==

An edit box can be placed on top of a graphic in a particular position by means of an HTML <span style="color:green"><div></span> tag. Using the ODBEdit function from the Midas JS library [[Mhttpd.js]], the custom page code would look like this:

{| style="text-align: left; width: 100%; background-color: floralwhite;" border="0" cellpadding="1" cellspacing="1"
|-
|<pre style="background-color:floralwhite; color:seagreen; font-style:italic">
<div style="position:absolute; top:100px; left:50px;">
<script type="text/javascript"> </pre>
<pre style="background-color:floralwhite; color:steelblue; font-style:italic;">
document.write('Run number: ')
path='/runinfo/run number'
rn = ODBGet(path)
document.write('<a href="#" onclick="ODBEdit(path)" >')
document.write(rn)
document.write('</a>');</pre>
<pre style="background-color:floralwhite; color:seagreen; font-style:italic;">
</script>
</div>
<img src="custom.gif">
</pre>
|}

The same thing could be done with the HTML-style {{HtmlTag|tag=<odb>}} tag :
<pre style="background-color:floralwhite; color:seagreen; font-style:italic">
<div style="position:absolute; top:100px; left:50px;">
Run number: <odb src="/Runinfo/run number" edit=1>
</div>
<img src="custom.gif">
</pre>

<br><br>

== Interactive SVG Implementation ==

An SVG file loaded on a custom page can be interactively modified using JavaScript.
This is useful for graphically displaying ODB values in complex service or detector systems.

An SVG file can be embedded like this:
<pre>
<object id="svgObject" type="image/svg+xml" data="Midas_helium_example.svg"></object>
</pre>

Objects within the SVG can be modified—for example, by changing their fill color as shown below:
<pre>
const svgDoc = document.getElementById('svgObject').contentDocument;
const obj_Valve = svgDoc.getElementById(valveID);
obj_Valve.style.fill = "#00FF00";
</pre>

SVG images are stored in XML format. In Inkscape, object properties can be interactively edited using the XML Editor.
An example is given below in [[Custom Page Features#Example 4 : Interactive SVG custom page]]

= Examples =
For more examples of accessing the ODB with the Javascript library [[mhttpd.js]] look at the example experiment in the MIDAS package $MIDASSYS/examples/javascript1/example.html.

== Example 1 : Asynchronous calls using mjsonrpc functions ==
See [[mjsonrpc#examples]]

== Example 2 : Asynchronous calls using Javascript and AJAX ==

Example 2 shows html code illustrating the use of ODBMCopy(), where innerHTML is used to display the data. On a page with images or a lot of data, innerHTML allows you to update variables without having to reload the whole page. In the example, a timer causes the page to update every 10s (reread the data). Often the ODB data for the whole page can be read by one asynchronous ODBMCopy() call, rather than scattering synchronous ODBGet() calls throughout the page.

Access to the ODB is provided by the [[Mhttpd.js|MIDAS Javascript Library]], included with the line <span style="color:green"><script src='mhttpd.js'></script></span>.

<div style="background-color:floralwhite; color:seagreen; font-style:italic">
<html> <br>
<head> <br>
<title>MyTitle</title> <br>
<script src='mhttpd.js'></script>
<script> </div>
<div style="background-color:floralwhite; color:steelblue; font-style:italic">
var updatePeriod = 10000; // in msec <br>
var updateTimerId = 0; <br>
var counter=0; <br>
function update() { <br>
:clearTimeout(updateTimerId); <br>
: load();
: if (updatePeriod > 0)
: updateTimerId = setTimeout('update()', updatePeriod);
} <br>
function load() { <br>
: document.getElementById('LastUpdated').innerHTML = "Updating..." + new Date;
: var paths = [ "/Runinfo", "/Experiment"];
: var data_odb=ODBMCopy(paths, mcopy_callback, "json")
: counter++;
: document.getElementById('counter').innerHTML = 'Counter: '+ counter
} <br>
function mcopy_callback(data) { <br>
: var obj= JSON.parse(data);
: var runinfo=obj[0];
: document.getElementById('rn').innerHTML = 'Run Number ='+ parseInt(runinfo["Run number"]);
: document.getElementById('state').innerHTML ='Run State= '+ runinfo.State;
: var experiment=obj[1];
: document.getElementById('name').innerHTML='Experiment name = '+ experiment.Name <br>
}<br> </div>
<div style="background-color:floralwhite; color:seagreen; font-style:italic">
</script> <br>
</head> <br>
<body> <br>
<b>Javascript code using ODBMCopy with callback</b> <br>
The data on the page is updated every 10 sec using a timer<br>
<p id="LastUpdated" > Last updated: never</p><br>
<p id="rn"> Run Number : unknown </p><br>
<p id="state"> State : unknown</p><br>
<p id="name"> Experiment name : unknown </p><br>
<p id="counter">Counter: zero </p><br>
<script type="text/javascript"> </div>
<div style="background-color:floralwhite; color:steelblue; font-style:italic">
: if (updatePeriod > 0)
: update(); </div>
<div style="background-color:floralwhite; color:seagreen; font-style:italic">
</script> <br>
</body> </html></div>

<br><br>
== Example 3 : Synchronous Calls using Javascript and AJAX ==
In the following example, JS functions ODBGet and ODBEdit from the [[Mhttpd.js|MIDAS Javascript Library]] are used to access the ODB.
;NOTE
# Synchronous calls are now deprecated (see [[#The MIDAS Javascript Library|above]]).
# The Javascript library '''must be [[mhttpd.js#include js lib|included in the HTML code]]'''.

{{Html|text=<script>}}
{{JS|text=document.write ('Experiment Name: '+ ODBGet("/Experiment/Name")) <br> var alarm_path="/alarms/Alarm system active"; <br> var alarm_active=ODBGet(alarm_path); <br> document.write('<a href="#" onclick="ODBEdit(alarm_path)" >'+alarm_active+'</a>')}}
{{Html|text=</script>}}

== Example 4 : Interactive SVG custom page ==

In this example, an SVG image forms the basis of a custom page.
It displays two valves and an expansion volume.

The valves change color depending on their status — open or closed.
The expansion volume dynamically changes its height.

All objects within the SVG file are directly modified using JavaScript functions.

<pre>
<!DOCTYPE html>
<html class="mcss">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="midas.css">
<script src="controls.js"></script>
<script src="midas.js"></script>
<script src="mhttpd.js"></script>
<title>Helium example</title>

<style>
.modbbutton {font-size:20px;}
.text {font-size:20px;}
</style>

<script>

// Valve Coloring --------------------------------------------------------------

function updateValveColor(flag, valveID) {
console.log(valveID, flag);
const svgDoc = document.getElementById('svgObject').contentDocument;
//The valveID needs to match the ID given in the svg file
const obj_Valve = svgDoc.getElementById(valveID);

obj_Valve.style.fill = (flag === 1) ? "#00FF00" : "#FF0000";
}

// Confirmation routines --------------------------------------------------------

function confirmValve(arg, valveAddress) {
const txt = arg === "Close" ? "Are you sure to close the valve?" : "Are you sure to open the valve?";
const val = arg === "Open" ? 1 : 0;
dlgConfirm(txt, function(confirmed) {
if (confirmed) {
modbset(valveAddress, val);
}
});
return false; // Prevent ODB value change immediately
}

// Animation -------------------------------------------------------------------

/**
* Update the volume of an SVG element by applying a transformation based on input.
* @param {number} elem - The scale factor to modify the volume.
* @param {string} svgID - The ID of the SVG element to be transformed.
* Comment: This example specifically transform only the ySize of the object,
* with the special case that the bottom edge stays in place
*/
function updateVolume(elem, svgID) {
const svgDoc = document.getElementById('svgObject').contentDocument;
const rootSvg = svgDoc.documentElement;

// Get the width and height of the root SVG element.
const widthAttr = rootSvg.getAttribute("width");
const heightAttr = rootSvg.getAttribute("height");

// Get and parse the viewBox attribute.
const viewBoxAttr = rootSvg.getAttribute("viewBox");
const viewBoxParts = viewBoxAttr.split(" ").map(parseFloat);
const viewBoxWidth = viewBoxParts[2];
const viewBoxHeight = viewBoxParts[3];

// Calculate the scaling factors for x and y axes based on the viewBox and actual width/height.
const xScale = widthAttr / viewBoxWidth;
const yScale = heightAttr / viewBoxHeight;

// Get the element to modify based on the provided svgID.
const obj_Vol = svgDoc.getElementById(svgID);
const bbox = obj_Vol.getBBox();

// Extract the transformation matrix from the element's transform attribute.
const transformAttr = obj_Vol.getAttribute("transform");
const matrixMatch = transformAttr.match(/matrix$([^)]+)$/);

let transformedY, transformedHeight;

// Apply matrix transformation if it exists.
if (matrixMatch) {
const [a, b, c, d, e, f] = matrixMatch[1].split(",").map(parseFloat);

// Apply matrix to the top-left corner of the bbox to get transformed Y position and height.
transformedY = d * bbox.y + f;
transformedHeight = d * bbox.height;
}

// Scale factor is 0.01 times the provided 'elem' value.
const scale = 0.01 * elem;

// Calculate the new Y position after applying scaling.
const yPosInit = (transformedY / yScale + transformedHeight / yScale) * (1 - scale);

// Update the element's transform attribute with the new translation and scaling.
// In this example only the height (y-axis) is changed
updateTransform(obj_Vol, `0,${yPosInit}`, `1,${scale}`);
}

/**
* Updates the transform attribute of an SVG element by applying new translation and scale values.
* @param {Element} elem - The SVG element whose transform attribute is to be updated.
* @param {string} newTranslate - The new translation value as a string (e.g., "0,100").
* @param {string} newScale - The new scale value as a string (e.g., "1,0.5").
*/
function updateTransform(elem, newTranslate, newScale) {
let transform = elem.getAttribute("transform") || "";

// Regular expressions to match existing translate and scale transformations.
const translateRegex = /translate$([^)]+)$/;
const scaleRegex = /scale$([^)]+)$/;

// Remove any existing translate and scale transformations from the transform string.
transform = transform
.replace(translateRegex, '')
.replace(scaleRegex, '')
.trim();

// Construct the new transform string with updated translation and scale.
const newTransform = `translate(${newTranslate}) scale(${newScale}) ${transform}`.trim();

// Apply the new transform to the element.
elem.setAttribute("transform", newTransform);
}

</script>

</head>

<body class="mcss" onload="mhttpd_init('Example');">


<div id="mheader"></div>
<div id="msidenav"></div>

<div id="mmain">


<div id="filling_valve" class="modb" data-odb-path="/Equipment/Example/Filling Valve" onchange="updateValveColor(this.value,'Filling_valve');" onload="updateValveColor(this.value,'Filling_valve');">
<div id="exhaust_valve" class="modb" data-odb-path="/Equipment/Example/Exhaust Valve" onchange="updateValveColor(this.value,'Exhaust_valve');" onload="updateValveColor(this.value,'Exhaust_valve');">

<table class="mtable">
<tr><th class="mtableheader">Helium example</th></tr>
<tr><td>
<div style="position:relative;width:600px;margin:auto">

<object id="svgObject" type="image/svg+xml" data="Midas_helium_example.svg"></object>





<button class="modbbutton" class="mbutton" data-odb-path="/Equipment/Example/Filling Valve"
style="position:absolute; top: 473px;left:125px;"
data-validate='confirmValve("Open","/Equipment/Example/Filling Valve")'
data-odb-value="1">Open</button>
<button class="modbbutton" class="mbutton" data-odb-path="/Equipment/Example/Filling Valve"
style="position:absolute; top: 473px;left:195px;"
data-validate='confirmValve("Close","/Equipment/Example/Filling Valve")'
data-odb-value="0">Close</button>
<div class="text" style="position:absolute; top: 443px; left:125px; font-weight: bold;">Filling valve:</div>



<button class="modbbutton" class="mbutton" data-odb-path="/Equipment/Example/Exhaust Valve"
style="position:absolute; top: 300px;left:352px;"
data-validate='confirmValve("Open","/Equipment/Example/Exhaust Valve")'
data-odb-value="1">Open</button>
<button class="modbbutton" class="mbutton" data-odb-path="/Equipment/Example/Exhaust Valve"
style="position:absolute; top: 300px;left:422px;"
data-validate='confirmValve("Close","/Equipment/Example/Exhaust Valve")'
data-odb-value="0">Close</button>
<div class="text" style="position:absolute; top: 270px; left:352px; font-weight: bold;">Exhaust valve:</div>



<div class="modbvbar" data-odb-path="/Equipment/Example/Expansion volume"
style="width:20px;height:200px; color:grey; position:absolute; top:56px;left:320px"
data-min-value="0" data-max-value="100" data-log="0"
onchange="updateVolume(this.value, 'Expansion_volume')"></div>
<div class="mvaxis" style="width:30px;height:200px; position:absolute; top:56px;left:340px; text-align:left"
data-min-value="0" data-max-value="100" data-log="0"></div>

</td></tr>

</table>

</div>

</body>
</html>
</pre>

[[Category:Custom]]

Custom Page Features

2025-05-12T12:12:58Z

Rudzki: /* Examples */

{{Pagelinks}}
= Links =
<div style="column-count:3;-moz-column-count:3;-webkit-column-count:3">
* [[Mhttpd|mhttpd MIDAS web server]]
* [[ODB Page]]
* [[Custom Page]]
* [[/Custom ODB tree]]
* [[Mhttpd.js|MIDAS Javascript library (mhttpd.js)]]
* [[mjsonrpc|MIDAS JSON RPC library functions (mjsonrpc)]]
* [[odbedit]]
</div>

= Introduction =
;NOTE
: Since 2018, many of the features described here can now be implemented more simply using the mod* JS functions (see [[Custom Page|Custom Web Page]]).
: '''If writing a new web page, it is strongly recommended you make use of the mod*JS features. '''

This page describes some of the special features provided for use on a user-created [[Custom Page|Custom Web Page]] using the [[#The MIDAS Javascript Library]], which was the recommended way to write Custom Pages before the [[Custom Page#modb* Javascript scheme]] was available.

<br><br>

= The MIDAS Javascript Library =
The MIDAS Javascript Library [[mhttpd.js]] includes routines written in Javascript and AJAX to provide features useful for writers of [[Custom Page]]s, such as access to the ODB. Recently asynchronous [[mjsonrpc|JSON-RPC functions]] using [[mjsonrpc#Javascript client library|Promises]] has been added (January 2016).
;NOTE
:To use functions in this library, it '''must be [[mhttpd.js#include js lib|included in the HTML code]]'''.

Many of the older routines (ODBGet, ODBSet) use '''synchronous''' RPC requests. With synchronous request, a second RPC request must wait until the first request is complete. This can significantly slow down web pages where many calls to ODBGet are made. For this reason, functions were developed that can be synchronous or '''asynchronous''' (e.g. ODBMCopy) that include a callback mechanism. The data from ODBMCopy can be formatted in [[mjsonrpc#JSON general information|JSON]].

Web developers are moving away from synchronous RPC requests, which are now deprecated [https://midas.triumf.ca/elog/Midas/1128]. Some modern browsers return a warning on a synchronous RPC request.

A new group of JSON-RPC functions using [[mjsonrpc#Javascript client library|Promises]] has been added to the MIDAS Javascript Library (January 2016). These are asynchronous only, and they also provide more functionality and have better error handling than the older AJAX calls, which are also inconsistent in how they handle Booleans. They also have much improved handling of reading/writing arrays to the ODB. Before 2018 it was recommended that all new Custom Pages are written using these JSON-RPC functions. {{Important|text=Since 2018 the [[Custom Page#modb* Javascript scheme]] is recommended for new Custom Pages}}.

The MIDAS Javascript Library routines requires an up-to-date browser that supports Promises (see [https://midas.triumf.ca/elog/Midas/1145]). If using an older browser version, the asynchronous AJAX calls (e.g. ODBMCopy) should be used in order to avoid having to rewrite the web page at a later date to remove all synchronous calls.

<br><br>
== Access the ODB using mjson-rpc asynchronous functions ==

Access to the ODB is provided by the [[Mhttpd.js|MIDAS Javascript Library]], which (since January 2016) includes the [[mjsonrpc]] functions. It is [[#The MIDAS Javascript Library|recommended]] that these functions are used for '''new''' pages rather than the older AJAX calls (see below).

To run these functions you need
# to [[mhttpd.js#include js lib|include the Javascript library in the HTML code]]'''
# to use an up-to-date browser that supports Promises (see [https://midas.triumf.ca/elog/Midas/1145]).

Examples showing how to read and write to the ODB can be found at [[mjsonrpc#examples]]. Also included are examples using arrays.

<br><br>
== Access the ODB using asynchronous AJAX calls ==
;NOTE
: It is recommended that asynchronous MIDAS JSON-RPC functions are used for new pages rather than the older AJAX calls (see [[#Access the ODB using mjson-rpc asynchronous functions|above]]).

[[#Example 2 : Asynchronous calls using Javascript and AJAX|Example 2]] uses the asynchronous call ODBMCopy() with callback to read the data. The data are converted into JSON format. In this case, when accessing the JSON data, ''the ODB Keynames must be in the same case as they are in the ODB'', even though the case is ignored by the ODB. If you find this feature annoying, use [[#Access the ODB using mjson-rpc asynchronous functions|mjson-rpc function db_get_values()]] as all keynames are converted to lower case.

<br><br>
== Access the ODB using synchronous AJAX requests ==
;NOTE
: Synchronous requests are now deprecated (see [[#The MIDAS Javascript Library|above]]). New pages should be written [[#Using mjson-rpc asynchronous functions]].

See [[#Example 3 : Synchronous Calls using Javascript and AJAX]].

<br><br>
= Access the ODB with HTML-style <span style="color:seagreen font-style:italic"><odb></span> tags =

;NOTE
: This method pre-dates the [[Mhttpd.js|MIDAS Javascript Library]]. It is recommended that the [[Mhttpd.js|MIDAS Javascript Library]] be used for ODB access.

If Javascript (JS) is not available, the older HTML-style {{HtmlTag|tag=<odb>}} tags are still available and provide limited functionality.

The HTML-style {{HtmlTag|tag=<odb>}} tag has been defined for read/write access to the ODB under HTML. The {{HtmlTag|tag=<odb>}} tags are declared within enclosing HTML {{HtmlTag|tag=<form...>....</form>}} tags.

{| style="text-align: left; width: 100%; background-color: rgb(255, 255, 255);" border="3" cellpadding="2" cellspacing="2"
|+ Access to ODB from HTML
|-
| colspan="1" rowspan="1" style="text-align: center; vertical-align: top; background-color: rgb(204, 204, 255); font-weight: bold;" | HTML ODB tag
| colspan="1" rowspan="1" style="text-align: center; vertical-align: top; background-color: rgb(204, 204, 255); font-weight: bold;" | Meaning

|-
| colspan="1" rowspan="1" style="text-align: left; vertical-align: top; background-color: rgb(255, 255, 255); color: seagreen; font-style:italic" |<odb src="odb path">
| colspan="1" rowspan="1" style="text-align: left; vertical-align: top; background-color: rgb(255, 255, 255); color: black" |Display ODB field (read only)

|-
| colspan="1" rowspan="1" style="text-align: left; vertical-align: top; background-color: rgb(255, 255, 255); color: seagreen; font-style:italic" |<odb src="odb path" edit=1 pwd="CustomPwd">
| Display an Editable ODB field (inline style). Optional password protection with '''pwd''' .

|-
| colspan="1" rowspan="1" style="text-align: left; vertical-align: top; background-color: rgb(255, 255, 255); color: seagreen; font-style:italic" |<odb src="odb path" edit=2 pwd="CustomPwd">
| Display an Editable ODB field (popup style). Optional password protection with '''pwd''' .
|}

;NOTE
: The Optional password protection with '''pwd''' (documented in the [http://ladd00.triumf.ca/~daqweb/doc/midas-old/html/RC_customize_ODB.html#RC_Access_Control| OldMidas Document]) may not be working.
: Use the [[/Experiment ODB tree#Security subtree|Web Password security]] instead.

{{HtmlTag|tag=<odb>}} tags are included in the HTML code e.g.

{{Html|text= Experiment Name: <odb src="/Experiment/Name"> <br> Run Number: <odb src="/runinfo/run number" edit=1>}}

See also [[Custom Page#How to write a Custom Page|HTML Custom Page example]].

<br><br>
= ODB RPC access =
The [[Mhttpd.js|MIDAS Javascript Library]] function ODBRpc() defined for RPC access.

This permits buttons on MIDAS "custom" web pages to invoke RPC calls directly into user frontend programs, for example to turn hardware modules on or off.

<br><br>
= JSON support =
[[mjsonrpc#JSON general information|JSON]] support is provided with the [[Mhttpd.js|MIDAS Javascript Library]].

<br><br>
= Access to the MIDAS Menu buttons =

;NOTE
: '''New (since 2018) custom pages using the [[Custom Page#modb* Javascript scheme]] should follow the instructions there to include the standard MIDAS Menu buttons.'''
<br><br>
Access to the standard MIDAS Menu buttons can be provided with HTML {{HtmlTag|tag=<input...>}} tags of the form:


{{Html|text=<input name="cmd" value=''<button-name>'' type="submit" >}}
Valid values are the standard MIDAS Menu buttons, i.e. (Start, Pause, Resume, Stop, ODB, Elog, Alarms, History, Programs etc). The {{HtmlTag|tag=<input...>}} tags must be declared within enclosing HTML {{HtmlTag|tag=<form...>....</form>}} tags (see above).

The following HTML fragment shows the inclusion of three of the standard buttons, giving access to the Main Status, ODB and Messages pages :

{{Html|text= <form name="form1" method="Get" action="/CS/MyExpt&"> <br> <input name="cmd" value="Status" type="submit"> <br> <input name="cmd" value="ODB" type="submit"> <br> <input name="cmd" value="Messages" type="submit"> <br> ... <br> </form> }}

See also [[#Redirect]].

<br><br>
= Redirect =

When buttons are included on a Custom Page, after pressing a button (e.g. the Start or Stop button) it may be desirable to return to the same custom page, rather than returning to the [[Status Page]].

This can be done by including an HTML {{HtmlTag|tag=<input...>}} tag with the attributes ''type'' set to "hidden" and ''name'' set to "redir". This name ("redir") is detected by [[Mhttpd]], causing a redirect to the specified custom link in the ''value'' attribute.

For example, the following redirects the screen back to the custom page link {{Odbpath|path=/Custom/my_custom_page&}} when buttons are pressed:
{{Html|text=<input type=hidden name="redir" value="my_custom_page&">}}

See also [[#Replace Status Page by a Custom page|Redirect when a Custom Page replaces the Status Page]].
<br><br>

= CustomScript Buttons =

[[/Customscript ODB tree#Customscript-button|CustomScript buttons]] can be provided on [[Custom Page|Custom Pages]]. These buttons are equivalent to optional '''script buttons''' on the [[Status Page]], which call a script to perform a particular action when the button is pressed. See [[/Script ODB tree#Script-button|script buttons]] for details. Customscript buttons can be set up through the [[/Customscript ODB tree]].

Any key <span style="color:purple; font-style:italic">/CustomScript/test</span> will appear as a customscript-button
<span style="color: #444444; background-color: #CCCCCC; font-style:italic; font-size: 90; padding:0.25em;padding-left: 0.5em;padding-right: 0.5em;border:1px solid #808080;border-radius: 5px;margin-bottom:1px;">test</span> on a custom page whose code includes an HTML {{HtmlTag|tag=<input...>}} tag of the form:
{{Html|text=<input type=submit name=customscript value="test">}}
where the action of the button <span style="color: #444444; background-color: #CCCCCC; font-style:italic; font-size: 90; padding:0.25em;padding-left: 0.5em;padding-right: 0.5em;border:1px solid #808080;border-radius: 5px;margin-bottom:1px;">test</span> will be found in the <span style="color:purple; font-style:italic">/customscript/test</span> subdirectory.

After pressing a customscript-button, the ''type=submit'' in the HTML {{HtmlTag|tag=<input>}} will cause a page reload. This will result in a switch to the [[Status Page]], unless a [[#redirect]] input tag is included to redirect back to the original custom page.

== Customscript button without a page reload ==
To define a customscript button that does '''not''' cause a page reload, set the ''type'' in the HTML {{HtmlTag|tag=<input>}} to "button", i.e.
{{Html|text=<input name="customscript" value="test" type="button" onClick=cs_button(this.value)> }}
and use ''"onClick"'' to call a function to [[#Send an Ajax Request]] instead. The following function sends an asynchronous request, with an optional callback.
{{HtmlTag|tag=<script>}}
<div style="background-color:floralwhite; color:steelblue; font-style:italic">
function cs_button(cmd, callback)<br>
{ // send a request to execute a custom script
: var url;
: var request = XMLHttpRequestGeneric();
:
: url = ODBUrlBase
: if(document.getElementById("redir") != null)
:: url += '?redir='+document.getElementById('redir').value
: url+='&customscript='+ encodeURIComponent(cmd);
: request.open('GET', url, true); // asynchronous request
: request.send(null);
: if(callback!=undefined) {
:: request.onreadystatechange = function() {
::: if (request.readyState == 4) {
:::: if (request.status == 200)
::::: callback();
:::: else
::::: alert('cs_button: Error after sending request to Custom Script "'+cmd+'" :\nHTTP Status: '+request.status)
::: }
:: }
: }
: else {
:: if (request.status != 200)
::: alert('cs_button: Error after sending request to Custom Script "'+cmd+'" :\nHTTP Status: '+request.status)
: }
}
</div>
{{HtmlTag|tag=</script>}}

<br><br>
= Resource files =
== MIDAS resource files ==
A number of resource files have been provided in the MIDAS packages under {{Filepath|path=../packages/midas/resources}}. When including a MIDAS resource file, no key in {{Odbpath|path=/Custom}} needs to be defined as the MIDAS resources directory is searched automatically.

One such resource file is a condensed stylesheet {{File|name=midas.css}} for users who would like their custom pages to have a similar "look and feel" to that of the standard pages. To include the MIDAS stylesheet, in the HTML header, add
{{HtmlTag|tag=<link rel="stylesheet" type="text/css" href="midas.css">}}
Other resource files can provide [[Custom Page#How to use the standard MIDAS navigation bars on your custom page|the standard MIDAS navigation bars]].

== Custom resource files ==
It is often desirable to serve resource files (i.e. '''local files''' such as an external stylesheet, javascript files or images'''<sup>***</sup>''') to a custom page. The following sections describe two alternative ways of serving resource files to a custom page:
* [[#Resource files served WITH /custom/path key defined|with /custom/path key defined]]
* [[#Resource files served WITHOUT /custom/path key defined|without /custom/path key defined]]
See also serving resources to a [[#Replace Status Page by a Custom Status page|Custom Status page]].
;NOTE
: '''<sup>***</sup>''' To superimpose labels, bars or fills onto an image, the image cannot be served as a resource file. See [[#Image insertion]].

=== Resource files served WITH <span style="color: purple; font-style:italic;">/custom/path</span> key defined ===
When a number of resource files are required, it is convenient to place them in the same directory on the disk, and create a key {{Odbpath|path=/Custom/Path}} to contain this directory.

$ ls /home/midas/online/custom/
custom_functions.js custom_globals.js custom_page.html custom_stylesheet.css test_image.png
With the {{Odbpath|path=/Custom/Path}} key defined, [[/Custom ODB tree#Custom-Link|custom-links]] for individual resource files need not be created in the {{Odbpath|path=/Custom/Path}} tree. The custom-link {{Odbpath|path=custom_page&}} '''is''' required so that the custom page can be accessed from the [[/Custom ODB tree#Custom-Button|custom-button]] {{Button|name=custom_page}} on the Status Page. The key name ends in the special character "&" so that it will open in the same window as the Status page (see [[/Custom ODB tree#Key names|key names]]).
$ odbedit
[local:exp:S] ls /custom
path /home/midas/online/custom/
custom_page& custom_page.html

A {{HtmlTag|tag=<script>}} tag for each resource file to be served (specifying the file name) is then placed in the header of {{File|name=custom_page.html}}
i.e.
{{Html|text=<script type="text/javascript" src="custom_functions.js"></script>}}
{{Html|text=<script type="text/javascript" src="custom_globals.js"></script>}}
<br> and a {{HtmlTag|tag=<link>}} tag for an external stylesheet
{{Html|text=<link type="text/css" rel="stylesheet" href="custom_stylesheet.css" title="Stylesheet">}}
An image tag is placed in the body of {{File|name=custom_page.html}}
{{Html|text=<img src="test_image.png"> }}
[[mhttpd]] then loads the resource file from the directory indicated by the Path key with the correct MIME type (see [[/Custom ODB tree#Keys in the /Custom tree|Custom tree keys]] for supported MIME types).

=== Resource files served WITHOUT <span style="color: purple; font-style:italic;">/custom/path</span> key defined ===
Alternatively, resource files can be served to a [[Custom Page]] by creating a key for every resource file in the [[/Custom ODB tree]]. These keys must contain the full path of the file on the disk, and the key {{Odbpath|path=/Custom/Path}} must NOT be defined. The resource files can be in different directories on the disk. By defining the key names with an appropriate file extension, the resource files are served with the appropriate MIME types. The key names end in the special character "!" so that they will not appear on the Status page as custom-links (see [[/Custom ODB tree#Key names|key names]].

Without the {{Odbpath|path=/Custom/Path}} key, the links for the above example in the {{Odbpath|path=/Custom}} tree might look like
$ odbedit
[local:exp:S] ls /custom
custom_page& /home/midas/online/custom/custom_page.html
custom_functions.js! /home/midas/online/resources/custom_functions.js
globals.js! /home/midas/online/resources/custom_functions.js
stylesheet.css! /home/midas/online/stylesheets/custom_stylesheet.css
image.png! /home/midas/images/test_image.png

assuming the resource files are now in the subdirectories indicated.
The {{HtmlTag|tag=<script>}} tag for each resource file to be served (specifying the custom-link) is then placed in the header of {{File|name=custom_page.html}}
i.e.
{{Html|text=<script type="text/javascript" src="custom_functions.js!"></script>}}
{{Html|text=<script type="text/javascript" src="globals.js!"></script>}}
<br> and a {{HtmlTag|tag=<link>}} tag for an external stylesheet
{{Html|text=<link type="text/css" rel="stylesheet" href="stylesheet.css!" title="Stylesheet">}}
An image tag is placed in the body of {{File|name=custom_page.html}}
{{Html|text=<img src="image.png!"> }}

<br><br>

The resulting Demo custom page is shown in Figure 1, which can be compared with Figure 2 (no stylesheet).
{| class="wikitable"
|-
! Figure 1 !! Figure 2
|-
| Demo Custom Page using MIDAS stylesheet || Demo Custom Page
|-

| [[File:Mhxcustom03.jpg|thumb|300px]] || [[File:Mhxcustom02.jpg|thumb|200px]]
|}
<br clear=all>

<br><br>
= Alias-Buttons and Hyperlinks =
Any hyperlink can easily be included on a [[Custom Page]] by using the standard HTML anchor {{HtmlTag|tag=<a...>}} tag, e.g.
{{Html|text=<a href="http://ladd00.triumf.ca/~daqweb/doc/midas/html/">Midas Help</a>}}

Links on a custom page equivalent to [[/Alias ODB tree#Alias-Buttons|alias-buttons]] can also be made e.g.
{{Html|text=<button type="button" onclick="document.location.href='/Alias/alias&';">alias</button>}}
See the [[/Alias ODB tree]] for details.

<br><br>
= Page refresh =
The following {{HtmlTag|tag=<meta...>}} tag included in the HTML header code will cause the whole custom page to refresh in 60 seconds :
{{Html|text=<meta http-equiv="Refresh" content="60">}}
It is also possible to [[#Periodic update of parts of a custom page|periodically update parts]] of a custom page.

<br><br>
= Periodic update of parts of a custom page =

The functionality of [[Mhttpd.js|ODBGet]] together with the window.setInterval() function
can be used to update parts of the web page periodically.
For example the Javascript fragment below contains a function which updates the current run number every 10 seconds in the background:

<div style="background-color:floralwhite; color:steelblue; font-style:italic"> 
window.setInterval("Refresh()", 10000);<br>
function Refresh() {<br>
:document.getElementById("run_number").innerHTML = ODBGet('/Runinfo/Run number');<br>
}
</div>
The custom page has to
* [[Mhttpd.js#include js lib|include the MIDAS JS library]] to access ODBGet
* contain an element with id="run_number", such as
{{Html|text=<td id="run_number"></td>}}

<br><br>
= Display last MIDAS message(s) =

The message log (see [[Message System]]) can be accessed from a custom page using a call to the JavaScript library function [[Mhttpd.js|ODBGetMsg]] (provided the [[Mhttpd.js#include js lib|JS library is included]]).

This allows the inclusion of the "Last Midas message" on a custom page, e.g.
{{JS|text=document.write('Last message:'+ODBGetMsg("midas",0,1))}}
More messages may be displayed by increasing the third parameter to ODBGetMsg.
;Note
: Parameters were changed August 2015. See [[Mhttpd.js|ODBGetMsg]] for older versions.
: Coming soon - a [[mjsonrpc]] function

<br><br>
= Generate a message log entry =

A custom page can generate a message to be sent to the MIDAS message log (see [[Message System]]). A call to mjsonrpc_cm_msg() will generate a message if using the [[mjsonrpc]] functions. Otherwise, use the AJAX function [[Mhttpd.js|ODBGenerateMsg]]. To use these functions, the [[Mhttpd.js#include js lib|JS library must be included]] in the html code.

<br><br>
= Checkboxes =
;NOTE
: '''New (since 2018) custom pages using the [[Custom Page#modb* Javascript scheme]] should use [[Custom Page#modbcheckbox|modbcheckbox]] to create a checkbox.'''
<Br><br>

The function [[Mhttpd.js|ODBSet]] (provided the [[Mhttpd.js#include js lib|JS library is included]]) can be used when one clicks on a checkbox for example:
{{Html|text=<input name="box0" type="checkbox" onClick="ODBSet(my_path, this.checked?'1':'0')">}}
If used as above, the state of the checkbox must be initialized when the page is loaded. This can be done with some JavaScript code called on initialization, e.g.
{{JS|text=document.form1.box0.checked= ODBGet(my_path)); // initialize to the correct value}}

<br><br>
= Replace Status Page by a Custom page =

Click to enlarge thumbnail
[[File:Mhcustom_status.jpg|thumbnail|left|Figure 3: ODB /Custom/Status custom-link to a custom status page]]
<div style="clear: both"></div> 

If a custom-link with the [[/Custom ODB tree#Key names|reserved key name]] '''Status''' (not "Status&" or "Status!") is created in the [[/Custom ODB tree]] (as shown in Figure 3), then that custom page will '''replace the default Status Page'''.

Clicking on the {{Button|name=Status}} button on any of the sub-pages (e.g. [[ODB Page]], [[Programs Page]] etc.) will now return to the Custom Status Page. If there are buttons on the Custom Status page, you '''must''' include a [[#Redirect]] statement of the form
{{Html|text=<input type=hidden name="redir" value="../">}}
or you will see the message
Invalid custom page:NULL path

If the Custom Status page includes [[#Resource files]] served on a regular custom page with a statement such as
{{Html|text=<script type="text/javascript" src="cs_functions!">}}
to serve them in a Custom Status page, the statement would be
{{Html|text=<script type="text/javascript" src="<span style="font-weight:bold">/CS/</span>cs_functions!">}}
In fact, this statement can be used in a regular custom page, as the "/CS/" is ignored in that case.

To return to the default Status Page, delete the <span style="color: purple; font-style:italic;">/Custom/Status</span> key.

<br><br>
= Start, Stop and Check if a program is running =
There are [[mjsonrpc]] functions that implemented all three program management functions - start program,
stop program and "is running?" as JSON-RPC methods.

<br><br>
= Send an Ajax request =
By sending an Ajax request from a custom page, you can make a button perform a specific function.

All functions in midas are controlled through special URLs. So the URL
http://<host:port>/?cmd=Start&value=10
will start run #10.

Although it is easier to use an HTML input statement to [[#Access to the MIDAS Menu buttons]],
to send an Ajax request, you can use the function ''XMLHttpRequestGeneric'' which is in the MIDAS Javascript library [[mhttpd.js]].
Then the HTML code would be

{{Html|text=<input type="button" onclick="start()">}}

and in your JavaScript code add a function ''start()'':

<div style="background-color:floralwhite; color:steelblue; font-style:italic">
function start()
{
: var request = XMLHttpRequestGeneric();

: url = '?cmd=Start&value=10';
: request.open('GET', url, true); // asynchronous request
: request.send(null);
} <br>
</div>
See also [[#Access to the MIDAS Menu buttons]]. Another example with optional callback can be found in [[#Customscript button without a page reload]].

This mechanism can be used for starting a particular program, see for example (see [https://midas.triumf.ca/elog/Midas/1046]). However, this functionality is now provided by [[mjsonrpc]] functions - see [[#Start, Stop and Check if a program is running]].

<br><br>
= Image insertion =
An image can be loaded from the web using an HTML {{HtmlTag|tag=<img...>}}, e.g.
{{Html|text="TRIUMF logo" <img src="https://lixenon.triumf.ca/InternalDocuments/Alice/figures/TRIUMF-logo.jpg/image_preview">}}
or a MIDAS History image can be inserted into a custom page using an HTML {{HtmlTag|tag=<img...>}} tag of the following form:
{{Html|text=blah<img src="http://hostname.domain:port/HS/Meterdis.gif&scale=12h&width=300">}}

If the image file is on the local disk, it can be loaded as a '''resource file'''. The image can be of format .pdf, .jpg, .gif, .png. See loading [[#Resource files]].

If you wish to superimpose features such as '''labels and fills''', the image file cannot be served as a [[#Resource files|resource file]]. Instead, the image file must be in '''gif''' format, and must be included in the {{Odbpath|path=/Custom/images}} subtree (Figure 4). Image insertion into a Custom page will be illustrated using the Demo custom page shown in [[#MIDAS stylesheet|Figure 2]]. All the files required for this demo can be found in the MIDAS package at $MIDASSYS/examples/custom. If you do not wish to create
the keys yourself, proceed to [[#Superimposing Labels, Bars and Fills onto a gif image]].

Make a [[/Custom ODB tree#Custom-Link|custom-link]] to the Demo custom page file ''myexpt.html'' , i.e.
[local:js:S]/>ls /custom
myexpt& /home/test/packages/midas/examples/custom/myexpt.html

To make the image ''myexpt.gif'' visible on the custom page, the path and filename of the image file must be defined in the {{Odbpath|path=/Custom/images}} subtree. To do this,
create the subtrees {{Odbpath|path=/Custom/images/myexpt.gif}} where the subtree name "myexpt.gif" is named for the image file you are going to use. Multiple images can be used, by creating multiple imagefile subtrees.

In the imagefile subtree {{Odbpath|path=myexpt.gif}}, create the STRING key {{Odbpath|path=Background}}, and set it to contain the path and name of the image file. The tree structure should then look similar to Figure 4, minus the labels/bars/fill subtrees which will be added to the ODB later.

The image must also be referenced in the custom HTML file ''myexpt.html'' in the "src" field of an HTML {{HtmlTag|tag=<img...>}} tag, e.g.
{{Html|text=<img '''src="myexpt.gif"'''>}}

Click to enlarge thumbnail
[[File:Mhcustom_images.jpg|thumbnail|left|Figure 4: /Custom/Images ODB Tree]]
<br clear=all>
Once the image is visible, enable [[#HTML mapping]], optionally [[#Display mouse position]] and proceed to [[#Superimposing Labels, Bars and Fills onto a gif image]].

<br><br>
== HTML mapping ==
Note that if additional features such as active clickable areas and labels, bars and fills superimposed on the image are also required, HTML mapping must also be activated with the HTML {{HtmlTag|tag=<map...>}} tag and the "usemap" attribute of the HTML {{HtmlTag|tag=<img>}} tag
{{Html|text= <map '''name="myexpt.map"'''> <br> <img src="myexpt.gif" '''usemap="#myexpt.map"'''> <br>...<br> </map>"}}

<br><br>
== Display mouse position ==
[[File:Cursor.png|thumbnail|left|Figure 5: MEG Gas System Custom Page showing cursor position]]
<div style="clear: both"></div> 

When writing custom pages with large background images and labels and fills placed on that image, it is hard to figure out X and Y coordinates of the labels. This can now be simplified by using the function ''getMouseXY()'' in the development JavaScript built-in library [[develop.js]]. This function supplies the X,Y position of the cursor if an element of ID "'''refimg'''" is present. This JS library '''must be [[develop.js|included in the custom page]]''' in order to use it:

Then, set the "id" attribute of the background HTML {{HtmlTag|tag=<img...>}} tag to "refimg", e.g.

<div style="background-color:floralwhite; color:seagreen; font-style:italic">
: <img '''id="refimg"''' src="ebit_pc.gif" usemap="#Custom1"> 
: <map name="Custom1">
: .....
: </map>
</div>

If the "'''refimg'''" tag is present, the cursor changes into a crosshair, and its absolute and relative locations in respect to the reference image are shown in the status bar (Figure 5).

<br><br>
== Superimposing Labels, Bars and Fills onto a gif image ==
You can enhance your custom page by superimposing multiple features based on ODB variables onto an image (e.g. [[#Display mouse position|Figure 5]]), such as

* labels: "live" ODB values positioned in a particular location of the page
* bars : "bar level" showing graphically ODB values such as levels or rate etc.
* fills : "color level" where colour is used as the level indicator.

Each entry (label/bar/fill) will have an ODB tree associated to it defining the ODB variable path, X/Y position, colour, etc. Each time the page is updated, the latest ODB value/level/rate will be shown based on the ODB parameter to which the label, bar or fill is linked - hence the term "live". The overlay of the requested features is done onto the selected image file.

This powerful new extension brings the [[mhttpd]] capability closer to other experimental web controllers similar to EPICS.

;Note
: Be sure to enable the feature to [[#Display mouse position]] in order to facilitate finding the X,Y positions of the various features.
: [[#HTML mapping]] must be activated for labels/bars/fills to work

A Demo custom page showing labels, bars and fills superimposed on an image is shown in [[#MIDAS stylesheet|Figure 2]].
All the files for this demo can be found in $MIDASSYS/examples/custom/. The file xcustom.odb contains the ODB keys required, including those to insert the image and superimpose the various labels, fills etc. This file can be loaded into the ODB with the {{Odbedit cmd|cmd=load}}.

<br><br>
=== Adding Labels ===

[[File:Mhcustom_label.jpg|thumbnail|left|Figure 6: /Custom/Images/Labels ODB subtree]]

In order to include a readout of ODB values (i.e. labels), on the image, a further ODB subdirectory {{Odbpath|path=/Custom/images/<imagefile.gif/Labels}} must be created. Creating a subdirectory for a particular label i.e. {{Odbpath|path=<label name>}} in the {{Odbpath|path=Labels}} subtree will, at the next custom web page refresh, cause the complete structure for that label to be created and filled with default values. Once the {{Odbpath|path=<label name>}} subtree is created, the user fills the various keys as desired. See [[/Custom ODB tree#Labels subtree]] for details of the various fields. This procedure is repeated for all the labels required, using a unique {{Odbpath|path=<label name>}} subdirectory for each label. An example of a {{Odbpath|path=<label name>}} subtree is shown in Figure 6.

<div style="clear: both"></div> 

<br><br>
=== Adding Bars ===

[[File:Mhcustom_fill.jpg|thumbnail|left|Figure 7: /Custom/Images/Fills ODB subtree]]

In a similar way, Bars can be superimposed on the image. Create a new ODB subdirectory {{Odbpath|path=/Custom/images/<imagefile.gif/Bars}}. Create a subdirectory for a particular Bar ({{Odbpath|path=<bar name>}}) in the {{Odbpath|path=Bars}} subdirectory. Refresh the web page and fill the various keys as desired. See [[/Custom ODB tree#Bars subtree]] for details of the various fields. Examples of a <bar-name> subtree is shown in Figure 7.

<div style="clear: both"></div> 

<br><br>
=== Adding Fills ===
[[File:Mhcustom_bar.jpg|thumbnail|left|Figure 8: /Custom/Images/Bars ODB subtree]]

In a similar way, Fills can be superimposed on the image. Create new ODB subdirectory {{Odbpath|path=/Custom/images/<imagefile.gif/Fills}}. Create a subdirectory for a particular Fill ({{Odbpath|path=<fill name>}}) in the {{Odbpath|path=Fills}} subdirectory. Refresh the web page and fill the various keys as desired. See [[/Custom ODB tree#Fills subtree]] for details of the various fields. Examples of a ({{Odbpath|path=<fill name>}} subtree is shown in Figure 8.

<div style="clear: both"></div> 

<br><br>
== Mapping active areas onto the image ==
Provided [[#HTML mapping]] is activated, "clickable" areas can be created on the image.

This can be done now with a new function like this:
{{Html|text= <area shape="rect" coords="40,200,100,300" alt="Main Valve" href="Custom1?cmd=Toggle&odb=/Equipment/Environment/Variables/Output[2]">}}

This defines a clickable map on top of the custom image. The area(s) should match with some area(s) on the image, e.g. the box of a valve. Determining the co-ordinates of this area is simplified by using the Display mouse position feature.

By clicking on this area, the supplied path to the ODB is used (in this case {{Odbpath|path=/Equipment/Environment/Variables/Output[2]}}) and its value is toggled. If the valve value is then used in the image via a [[#Adding Fills|Fill]] statement to change the color of the valve, it can turn green or red depending on its state. This is illustrated in [[#Display mouse position|Figure 5]].

Clicking an active area can also be made to open a new custom page, for example:
{{Html|text=<area shape=rect coords="687,530, 890,648" alt="Pump detail" href = "Pump!" title="Click for Details">}}
{{Html|text=<area shape=rect coords="560,574,775,662" alt="Buffer Tank detail" href = "BufferTank!" title="Click for Details">}}
where ''Pump!'' and ''BufferTank!'' are defined as links to custom pages in the [[/Custom ODB tree]].

<br><br>
== Edit boxes floating on top of a graphic ==

An edit box can be placed on top of a graphic in a particular position by means of an HTML <span style="color:green"><div></span> tag. Using the ODBEdit function from the Midas JS library [[Mhttpd.js]], the custom page code would look like this:

{| style="text-align: left; width: 100%; background-color: floralwhite;" border="0" cellpadding="1" cellspacing="1"
|-
|<pre style="background-color:floralwhite; color:seagreen; font-style:italic">
<div style="position:absolute; top:100px; left:50px;">
<script type="text/javascript"> </pre>
<pre style="background-color:floralwhite; color:steelblue; font-style:italic;">
document.write('Run number: ')
path='/runinfo/run number'
rn = ODBGet(path)
document.write('<a href="#" onclick="ODBEdit(path)" >')
document.write(rn)
document.write('</a>');</pre>
<pre style="background-color:floralwhite; color:seagreen; font-style:italic;">
</script>
</div>
<img src="custom.gif">
</pre>
|}

The same thing could be done with the HTML-style {{HtmlTag|tag=<odb>}} tag :
<pre style="background-color:floralwhite; color:seagreen; font-style:italic">
<div style="position:absolute; top:100px; left:50px;">
Run number: <odb src="/Runinfo/run number" edit=1>
</div>
<img src="custom.gif">
</pre>

<br><br>

== Interactive SVG Implementation ==

An SVG file loaded on a custom page can be interactively modified using JavaScript.
This is useful for graphically displaying ODB values in complex service or detector systems.

An SVG file can be embedded like this:
<pre>
<object id="svgObject" type="image/svg+xml" data="Midas_helium_example.svg"></object>
</pre>

Objects within the SVG can be modified—for example, by changing their fill color as shown below:
<pre>
const svgDoc = document.getElementById('svgObject').contentDocument;
const obj_Valve = svgDoc.getElementById(valveID);
obj_Valve.style.fill = "#00FF00";
</pre>

SVG images are stored in XML format. In Inkscape, object properties can be interactively edited using the XML Editor.

= Examples =
For more examples of accessing the ODB with the Javascript library [[mhttpd.js]] look at the example experiment in the MIDAS package $MIDASSYS/examples/javascript1/example.html.

== Example 1 : Asynchronous calls using mjsonrpc functions ==
See [[mjsonrpc#examples]]

== Example 2 : Asynchronous calls using Javascript and AJAX ==

Example 2 shows html code illustrating the use of ODBMCopy(), where innerHTML is used to display the data. On a page with images or a lot of data, innerHTML allows you to update variables without having to reload the whole page. In the example, a timer causes the page to update every 10s (reread the data). Often the ODB data for the whole page can be read by one asynchronous ODBMCopy() call, rather than scattering synchronous ODBGet() calls throughout the page.

Access to the ODB is provided by the [[Mhttpd.js|MIDAS Javascript Library]], included with the line <span style="color:green"><script src='mhttpd.js'></script></span>.

<div style="background-color:floralwhite; color:seagreen; font-style:italic">
<html> <br>
<head> <br>
<title>MyTitle</title> <br>
<script src='mhttpd.js'></script>
<script> </div>
<div style="background-color:floralwhite; color:steelblue; font-style:italic">
var updatePeriod = 10000; // in msec <br>
var updateTimerId = 0; <br>
var counter=0; <br>
function update() { <br>
:clearTimeout(updateTimerId); <br>
: load();
: if (updatePeriod > 0)
: updateTimerId = setTimeout('update()', updatePeriod);
} <br>
function load() { <br>
: document.getElementById('LastUpdated').innerHTML = "Updating..." + new Date;
: var paths = [ "/Runinfo", "/Experiment"];
: var data_odb=ODBMCopy(paths, mcopy_callback, "json")
: counter++;
: document.getElementById('counter').innerHTML = 'Counter: '+ counter
} <br>
function mcopy_callback(data) { <br>
: var obj= JSON.parse(data);
: var runinfo=obj[0];
: document.getElementById('rn').innerHTML = 'Run Number ='+ parseInt(runinfo["Run number"]);
: document.getElementById('state').innerHTML ='Run State= '+ runinfo.State;
: var experiment=obj[1];
: document.getElementById('name').innerHTML='Experiment name = '+ experiment.Name <br>
}<br> </div>
<div style="background-color:floralwhite; color:seagreen; font-style:italic">
</script> <br>
</head> <br>
<body> <br>
<b>Javascript code using ODBMCopy with callback</b> <br>
The data on the page is updated every 10 sec using a timer<br>
<p id="LastUpdated" > Last updated: never</p><br>
<p id="rn"> Run Number : unknown </p><br>
<p id="state"> State : unknown</p><br>
<p id="name"> Experiment name : unknown </p><br>
<p id="counter">Counter: zero </p><br>
<script type="text/javascript"> </div>
<div style="background-color:floralwhite; color:steelblue; font-style:italic">
: if (updatePeriod > 0)
: update(); </div>
<div style="background-color:floralwhite; color:seagreen; font-style:italic">
</script> <br>
</body> </html></div>

<br><br>
== Example 3 : Synchronous Calls using Javascript and AJAX ==
In the following example, JS functions ODBGet and ODBEdit from the [[Mhttpd.js|MIDAS Javascript Library]] are used to access the ODB.
;NOTE
# Synchronous calls are now deprecated (see [[#The MIDAS Javascript Library|above]]).
# The Javascript library '''must be [[mhttpd.js#include js lib|included in the HTML code]]'''.

{{Html|text=<script>}}
{{JS|text=document.write ('Experiment Name: '+ ODBGet("/Experiment/Name")) <br> var alarm_path="/alarms/Alarm system active"; <br> var alarm_active=ODBGet(alarm_path); <br> document.write('<a href="#" onclick="ODBEdit(alarm_path)" >'+alarm_active+'</a>')}}
{{Html|text=</script>}}

== Example 4 : Interactive SVG custom page ==

In this example, an SVG image forms the basis of a custom page.
It displays two valves and an expansion volume.

The valves change color depending on their status — open or closed.
The expansion volume dynamically changes its height.

All objects within the SVG file are directly modified using JavaScript functions.

<pre>
<!DOCTYPE html>
<html class="mcss">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="midas.css">
<script src="controls.js"></script>
<script src="midas.js"></script>
<script src="mhttpd.js"></script>
<title>Helium example</title>

<style>
.modbbutton {font-size:20px;}
.text {font-size:20px;}
</style>

<script>

// Valve Coloring --------------------------------------------------------------

function updateValveColor(flag, valveID) {
console.log(valveID, flag);
const svgDoc = document.getElementById('svgObject').contentDocument;
//The valveID needs to match the ID given in the svg file
const obj_Valve = svgDoc.getElementById(valveID);

obj_Valve.style.fill = (flag === 1) ? "#00FF00" : "#FF0000";
}

// Confirmation routines --------------------------------------------------------

function confirmValve(arg, valveAddress) {
const txt = arg === "Close" ? "Are you sure to close the valve?" : "Are you sure to open the valve?";
const val = arg === "Open" ? 1 : 0;
dlgConfirm(txt, function(confirmed) {
if (confirmed) {
modbset(valveAddress, val);
}
});
return false; // Prevent ODB value change immediately
}

// Animation -------------------------------------------------------------------

/**
* Update the volume of an SVG element by applying a transformation based on input.
* @param {number} elem - The scale factor to modify the volume.
* @param {string} svgID - The ID of the SVG element to be transformed.
* Comment: This example specifically transform only the ySize of the object,
* with the special case that the bottom edge stays in place
*/
function updateVolume(elem, svgID) {
const svgDoc = document.getElementById('svgObject').contentDocument;
const rootSvg = svgDoc.documentElement;

// Get the width and height of the root SVG element.
const widthAttr = rootSvg.getAttribute("width");
const heightAttr = rootSvg.getAttribute("height");

// Get and parse the viewBox attribute.
const viewBoxAttr = rootSvg.getAttribute("viewBox");
const viewBoxParts = viewBoxAttr.split(" ").map(parseFloat);
const viewBoxWidth = viewBoxParts[2];
const viewBoxHeight = viewBoxParts[3];

// Calculate the scaling factors for x and y axes based on the viewBox and actual width/height.
const xScale = widthAttr / viewBoxWidth;
const yScale = heightAttr / viewBoxHeight;

// Get the element to modify based on the provided svgID.
const obj_Vol = svgDoc.getElementById(svgID);
const bbox = obj_Vol.getBBox();

// Extract the transformation matrix from the element's transform attribute.
const transformAttr = obj_Vol.getAttribute("transform");
const matrixMatch = transformAttr.match(/matrix$([^)]+)$/);

let transformedY, transformedHeight;

// Apply matrix transformation if it exists.
if (matrixMatch) {
const [a, b, c, d, e, f] = matrixMatch[1].split(",").map(parseFloat);

// Apply matrix to the top-left corner of the bbox to get transformed Y position and height.
transformedY = d * bbox.y + f;
transformedHeight = d * bbox.height;
}

// Scale factor is 0.01 times the provided 'elem' value.
const scale = 0.01 * elem;

// Calculate the new Y position after applying scaling.
const yPosInit = (transformedY / yScale + transformedHeight / yScale) * (1 - scale);

// Update the element's transform attribute with the new translation and scaling.
// In this example only the height (y-axis) is changed
updateTransform(obj_Vol, `0,${yPosInit}`, `1,${scale}`);
}

/**
* Updates the transform attribute of an SVG element by applying new translation and scale values.
* @param {Element} elem - The SVG element whose transform attribute is to be updated.
* @param {string} newTranslate - The new translation value as a string (e.g., "0,100").
* @param {string} newScale - The new scale value as a string (e.g., "1,0.5").
*/
function updateTransform(elem, newTranslate, newScale) {
let transform = elem.getAttribute("transform") || "";

// Regular expressions to match existing translate and scale transformations.
const translateRegex = /translate$([^)]+)$/;
const scaleRegex = /scale$([^)]+)$/;

// Remove any existing translate and scale transformations from the transform string.
transform = transform
.replace(translateRegex, '')
.replace(scaleRegex, '')
.trim();

// Construct the new transform string with updated translation and scale.
const newTransform = `translate(${newTranslate}) scale(${newScale}) ${transform}`.trim();

// Apply the new transform to the element.
elem.setAttribute("transform", newTransform);
}

</script>

</head>

<body class="mcss" onload="mhttpd_init('Example');">


<div id="mheader"></div>
<div id="msidenav"></div>

<div id="mmain">


<div id="filling_valve" class="modb" data-odb-path="/Equipment/Example/Filling Valve" onchange="updateValveColor(this.value,'Filling_valve');" onload="updateValveColor(this.value,'Filling_valve');">
<div id="exhaust_valve" class="modb" data-odb-path="/Equipment/Example/Exhaust Valve" onchange="updateValveColor(this.value,'Exhaust_valve');" onload="updateValveColor(this.value,'Exhaust_valve');">

<table class="mtable">
<tr><th class="mtableheader">Helium example</th></tr>
<tr><td>
<div style="position:relative;width:600px;margin:auto">

<object id="svgObject" type="image/svg+xml" data="Midas_helium_example.svg"></object>





<button class="modbbutton" class="mbutton" data-odb-path="/Equipment/Example/Filling Valve"
style="position:absolute; top: 473px;left:125px;"
data-validate='confirmValve("Open","/Equipment/Example/Filling Valve")'
data-odb-value="1">Open</button>
<button class="modbbutton" class="mbutton" data-odb-path="/Equipment/Example/Filling Valve"
style="position:absolute; top: 473px;left:195px;"
data-validate='confirmValve("Close","/Equipment/Example/Filling Valve")'
data-odb-value="0">Close</button>
<div class="text" style="position:absolute; top: 443px; left:125px; font-weight: bold;">Filling valve:</div>



<button class="modbbutton" class="mbutton" data-odb-path="/Equipment/Example/Exhaust Valve"
style="position:absolute; top: 300px;left:352px;"
data-validate='confirmValve("Open","/Equipment/Example/Exhaust Valve")'
data-odb-value="1">Open</button>
<button class="modbbutton" class="mbutton" data-odb-path="/Equipment/Example/Exhaust Valve"
style="position:absolute; top: 300px;left:422px;"
data-validate='confirmValve("Close","/Equipment/Example/Exhaust Valve")'
data-odb-value="0">Close</button>
<div class="text" style="position:absolute; top: 270px; left:352px; font-weight: bold;">Exhaust valve:</div>



<div class="modbvbar" data-odb-path="/Equipment/Example/Expansion volume"
style="width:20px;height:200px; color:grey; position:absolute; top:56px;left:320px"
data-min-value="0" data-max-value="100" data-log="0"
onchange="updateVolume(this.value, 'Expansion_volume')"></div>
<div class="mvaxis" style="width:30px;height:200px; position:absolute; top:56px;left:340px; text-align:left"
data-min-value="0" data-max-value="100" data-log="0"></div>

</td></tr>

</table>

</div>

</body>
</html>
</pre>

[[Category:Custom]]

Custom Page Features

2025-05-12T12:06:00Z

Rudzki: /* Image insertion */

{{Pagelinks}}
= Links =
<div style="column-count:3;-moz-column-count:3;-webkit-column-count:3">
* [[Mhttpd|mhttpd MIDAS web server]]
* [[ODB Page]]
* [[Custom Page]]
* [[/Custom ODB tree]]
* [[Mhttpd.js|MIDAS Javascript library (mhttpd.js)]]
* [[mjsonrpc|MIDAS JSON RPC library functions (mjsonrpc)]]
* [[odbedit]]
</div>

= Introduction =
;NOTE
: Since 2018, many of the features described here can now be implemented more simply using the mod* JS functions (see [[Custom Page|Custom Web Page]]).
: '''If writing a new web page, it is strongly recommended you make use of the mod*JS features. '''

This page describes some of the special features provided for use on a user-created [[Custom Page|Custom Web Page]] using the [[#The MIDAS Javascript Library]], which was the recommended way to write Custom Pages before the [[Custom Page#modb* Javascript scheme]] was available.

<br><br>

= The MIDAS Javascript Library =
The MIDAS Javascript Library [[mhttpd.js]] includes routines written in Javascript and AJAX to provide features useful for writers of [[Custom Page]]s, such as access to the ODB. Recently asynchronous [[mjsonrpc|JSON-RPC functions]] using [[mjsonrpc#Javascript client library|Promises]] has been added (January 2016).
;NOTE
:To use functions in this library, it '''must be [[mhttpd.js#include js lib|included in the HTML code]]'''.

Many of the older routines (ODBGet, ODBSet) use '''synchronous''' RPC requests. With synchronous request, a second RPC request must wait until the first request is complete. This can significantly slow down web pages where many calls to ODBGet are made. For this reason, functions were developed that can be synchronous or '''asynchronous''' (e.g. ODBMCopy) that include a callback mechanism. The data from ODBMCopy can be formatted in [[mjsonrpc#JSON general information|JSON]].

Web developers are moving away from synchronous RPC requests, which are now deprecated [https://midas.triumf.ca/elog/Midas/1128]. Some modern browsers return a warning on a synchronous RPC request.

A new group of JSON-RPC functions using [[mjsonrpc#Javascript client library|Promises]] has been added to the MIDAS Javascript Library (January 2016). These are asynchronous only, and they also provide more functionality and have better error handling than the older AJAX calls, which are also inconsistent in how they handle Booleans. They also have much improved handling of reading/writing arrays to the ODB. Before 2018 it was recommended that all new Custom Pages are written using these JSON-RPC functions. {{Important|text=Since 2018 the [[Custom Page#modb* Javascript scheme]] is recommended for new Custom Pages}}.

The MIDAS Javascript Library routines requires an up-to-date browser that supports Promises (see [https://midas.triumf.ca/elog/Midas/1145]). If using an older browser version, the asynchronous AJAX calls (e.g. ODBMCopy) should be used in order to avoid having to rewrite the web page at a later date to remove all synchronous calls.

<br><br>
== Access the ODB using mjson-rpc asynchronous functions ==

Access to the ODB is provided by the [[Mhttpd.js|MIDAS Javascript Library]], which (since January 2016) includes the [[mjsonrpc]] functions. It is [[#The MIDAS Javascript Library|recommended]] that these functions are used for '''new''' pages rather than the older AJAX calls (see below).

To run these functions you need
# to [[mhttpd.js#include js lib|include the Javascript library in the HTML code]]'''
# to use an up-to-date browser that supports Promises (see [https://midas.triumf.ca/elog/Midas/1145]).

Examples showing how to read and write to the ODB can be found at [[mjsonrpc#examples]]. Also included are examples using arrays.

<br><br>
== Access the ODB using asynchronous AJAX calls ==
;NOTE
: It is recommended that asynchronous MIDAS JSON-RPC functions are used for new pages rather than the older AJAX calls (see [[#Access the ODB using mjson-rpc asynchronous functions|above]]).

[[#Example 2 : Asynchronous calls using Javascript and AJAX|Example 2]] uses the asynchronous call ODBMCopy() with callback to read the data. The data are converted into JSON format. In this case, when accessing the JSON data, ''the ODB Keynames must be in the same case as they are in the ODB'', even though the case is ignored by the ODB. If you find this feature annoying, use [[#Access the ODB using mjson-rpc asynchronous functions|mjson-rpc function db_get_values()]] as all keynames are converted to lower case.

<br><br>
== Access the ODB using synchronous AJAX requests ==
;NOTE
: Synchronous requests are now deprecated (see [[#The MIDAS Javascript Library|above]]). New pages should be written [[#Using mjson-rpc asynchronous functions]].

See [[#Example 3 : Synchronous Calls using Javascript and AJAX]].

<br><br>
= Access the ODB with HTML-style <span style="color:seagreen font-style:italic"><odb></span> tags =

;NOTE
: This method pre-dates the [[Mhttpd.js|MIDAS Javascript Library]]. It is recommended that the [[Mhttpd.js|MIDAS Javascript Library]] be used for ODB access.

If Javascript (JS) is not available, the older HTML-style {{HtmlTag|tag=<odb>}} tags are still available and provide limited functionality.

The HTML-style {{HtmlTag|tag=<odb>}} tag has been defined for read/write access to the ODB under HTML. The {{HtmlTag|tag=<odb>}} tags are declared within enclosing HTML {{HtmlTag|tag=<form...>....</form>}} tags.

{| style="text-align: left; width: 100%; background-color: rgb(255, 255, 255);" border="3" cellpadding="2" cellspacing="2"
|+ Access to ODB from HTML
|-
| colspan="1" rowspan="1" style="text-align: center; vertical-align: top; background-color: rgb(204, 204, 255); font-weight: bold;" | HTML ODB tag
| colspan="1" rowspan="1" style="text-align: center; vertical-align: top; background-color: rgb(204, 204, 255); font-weight: bold;" | Meaning

|-
| colspan="1" rowspan="1" style="text-align: left; vertical-align: top; background-color: rgb(255, 255, 255); color: seagreen; font-style:italic" |<odb src="odb path">
| colspan="1" rowspan="1" style="text-align: left; vertical-align: top; background-color: rgb(255, 255, 255); color: black" |Display ODB field (read only)

|-
| colspan="1" rowspan="1" style="text-align: left; vertical-align: top; background-color: rgb(255, 255, 255); color: seagreen; font-style:italic" |<odb src="odb path" edit=1 pwd="CustomPwd">
| Display an Editable ODB field (inline style). Optional password protection with '''pwd''' .

|-
| colspan="1" rowspan="1" style="text-align: left; vertical-align: top; background-color: rgb(255, 255, 255); color: seagreen; font-style:italic" |<odb src="odb path" edit=2 pwd="CustomPwd">
| Display an Editable ODB field (popup style). Optional password protection with '''pwd''' .
|}

;NOTE
: The Optional password protection with '''pwd''' (documented in the [http://ladd00.triumf.ca/~daqweb/doc/midas-old/html/RC_customize_ODB.html#RC_Access_Control| OldMidas Document]) may not be working.
: Use the [[/Experiment ODB tree#Security subtree|Web Password security]] instead.

{{HtmlTag|tag=<odb>}} tags are included in the HTML code e.g.

{{Html|text= Experiment Name: <odb src="/Experiment/Name"> <br> Run Number: <odb src="/runinfo/run number" edit=1>}}

See also [[Custom Page#How to write a Custom Page|HTML Custom Page example]].

<br><br>
= ODB RPC access =
The [[Mhttpd.js|MIDAS Javascript Library]] function ODBRpc() defined for RPC access.

This permits buttons on MIDAS "custom" web pages to invoke RPC calls directly into user frontend programs, for example to turn hardware modules on or off.

<br><br>
= JSON support =
[[mjsonrpc#JSON general information|JSON]] support is provided with the [[Mhttpd.js|MIDAS Javascript Library]].

<br><br>
= Access to the MIDAS Menu buttons =

;NOTE
: '''New (since 2018) custom pages using the [[Custom Page#modb* Javascript scheme]] should follow the instructions there to include the standard MIDAS Menu buttons.'''
<br><br>
Access to the standard MIDAS Menu buttons can be provided with HTML {{HtmlTag|tag=<input...>}} tags of the form:


{{Html|text=<input name="cmd" value=''<button-name>'' type="submit" >}}
Valid values are the standard MIDAS Menu buttons, i.e. (Start, Pause, Resume, Stop, ODB, Elog, Alarms, History, Programs etc). The {{HtmlTag|tag=<input...>}} tags must be declared within enclosing HTML {{HtmlTag|tag=<form...>....</form>}} tags (see above).

The following HTML fragment shows the inclusion of three of the standard buttons, giving access to the Main Status, ODB and Messages pages :

{{Html|text= <form name="form1" method="Get" action="/CS/MyExpt&"> <br> <input name="cmd" value="Status" type="submit"> <br> <input name="cmd" value="ODB" type="submit"> <br> <input name="cmd" value="Messages" type="submit"> <br> ... <br> </form> }}

See also [[#Redirect]].

<br><br>
= Redirect =

When buttons are included on a Custom Page, after pressing a button (e.g. the Start or Stop button) it may be desirable to return to the same custom page, rather than returning to the [[Status Page]].

This can be done by including an HTML {{HtmlTag|tag=<input...>}} tag with the attributes ''type'' set to "hidden" and ''name'' set to "redir". This name ("redir") is detected by [[Mhttpd]], causing a redirect to the specified custom link in the ''value'' attribute.

For example, the following redirects the screen back to the custom page link {{Odbpath|path=/Custom/my_custom_page&}} when buttons are pressed:
{{Html|text=<input type=hidden name="redir" value="my_custom_page&">}}

See also [[#Replace Status Page by a Custom page|Redirect when a Custom Page replaces the Status Page]].
<br><br>

= CustomScript Buttons =

[[/Customscript ODB tree#Customscript-button|CustomScript buttons]] can be provided on [[Custom Page|Custom Pages]]. These buttons are equivalent to optional '''script buttons''' on the [[Status Page]], which call a script to perform a particular action when the button is pressed. See [[/Script ODB tree#Script-button|script buttons]] for details. Customscript buttons can be set up through the [[/Customscript ODB tree]].

Any key <span style="color:purple; font-style:italic">/CustomScript/test</span> will appear as a customscript-button
<span style="color: #444444; background-color: #CCCCCC; font-style:italic; font-size: 90; padding:0.25em;padding-left: 0.5em;padding-right: 0.5em;border:1px solid #808080;border-radius: 5px;margin-bottom:1px;">test</span> on a custom page whose code includes an HTML {{HtmlTag|tag=<input...>}} tag of the form:
{{Html|text=<input type=submit name=customscript value="test">}}
where the action of the button <span style="color: #444444; background-color: #CCCCCC; font-style:italic; font-size: 90; padding:0.25em;padding-left: 0.5em;padding-right: 0.5em;border:1px solid #808080;border-radius: 5px;margin-bottom:1px;">test</span> will be found in the <span style="color:purple; font-style:italic">/customscript/test</span> subdirectory.

After pressing a customscript-button, the ''type=submit'' in the HTML {{HtmlTag|tag=<input>}} will cause a page reload. This will result in a switch to the [[Status Page]], unless a [[#redirect]] input tag is included to redirect back to the original custom page.

== Customscript button without a page reload ==
To define a customscript button that does '''not''' cause a page reload, set the ''type'' in the HTML {{HtmlTag|tag=<input>}} to "button", i.e.
{{Html|text=<input name="customscript" value="test" type="button" onClick=cs_button(this.value)> }}
and use ''"onClick"'' to call a function to [[#Send an Ajax Request]] instead. The following function sends an asynchronous request, with an optional callback.
{{HtmlTag|tag=<script>}}
<div style="background-color:floralwhite; color:steelblue; font-style:italic">
function cs_button(cmd, callback)<br>
{ // send a request to execute a custom script
: var url;
: var request = XMLHttpRequestGeneric();
:
: url = ODBUrlBase
: if(document.getElementById("redir") != null)
:: url += '?redir='+document.getElementById('redir').value
: url+='&customscript='+ encodeURIComponent(cmd);
: request.open('GET', url, true); // asynchronous request
: request.send(null);
: if(callback!=undefined) {
:: request.onreadystatechange = function() {
::: if (request.readyState == 4) {
:::: if (request.status == 200)
::::: callback();
:::: else
::::: alert('cs_button: Error after sending request to Custom Script "'+cmd+'" :\nHTTP Status: '+request.status)
::: }
:: }
: }
: else {
:: if (request.status != 200)
::: alert('cs_button: Error after sending request to Custom Script "'+cmd+'" :\nHTTP Status: '+request.status)
: }
}
</div>
{{HtmlTag|tag=</script>}}

<br><br>
= Resource files =
== MIDAS resource files ==
A number of resource files have been provided in the MIDAS packages under {{Filepath|path=../packages/midas/resources}}. When including a MIDAS resource file, no key in {{Odbpath|path=/Custom}} needs to be defined as the MIDAS resources directory is searched automatically.

One such resource file is a condensed stylesheet {{File|name=midas.css}} for users who would like their custom pages to have a similar "look and feel" to that of the standard pages. To include the MIDAS stylesheet, in the HTML header, add
{{HtmlTag|tag=<link rel="stylesheet" type="text/css" href="midas.css">}}
Other resource files can provide [[Custom Page#How to use the standard MIDAS navigation bars on your custom page|the standard MIDAS navigation bars]].

== Custom resource files ==
It is often desirable to serve resource files (i.e. '''local files''' such as an external stylesheet, javascript files or images'''<sup>***</sup>''') to a custom page. The following sections describe two alternative ways of serving resource files to a custom page:
* [[#Resource files served WITH /custom/path key defined|with /custom/path key defined]]
* [[#Resource files served WITHOUT /custom/path key defined|without /custom/path key defined]]
See also serving resources to a [[#Replace Status Page by a Custom Status page|Custom Status page]].
;NOTE
: '''<sup>***</sup>''' To superimpose labels, bars or fills onto an image, the image cannot be served as a resource file. See [[#Image insertion]].

=== Resource files served WITH <span style="color: purple; font-style:italic;">/custom/path</span> key defined ===
When a number of resource files are required, it is convenient to place them in the same directory on the disk, and create a key {{Odbpath|path=/Custom/Path}} to contain this directory.

$ ls /home/midas/online/custom/
custom_functions.js custom_globals.js custom_page.html custom_stylesheet.css test_image.png
With the {{Odbpath|path=/Custom/Path}} key defined, [[/Custom ODB tree#Custom-Link|custom-links]] for individual resource files need not be created in the {{Odbpath|path=/Custom/Path}} tree. The custom-link {{Odbpath|path=custom_page&}} '''is''' required so that the custom page can be accessed from the [[/Custom ODB tree#Custom-Button|custom-button]] {{Button|name=custom_page}} on the Status Page. The key name ends in the special character "&" so that it will open in the same window as the Status page (see [[/Custom ODB tree#Key names|key names]]).
$ odbedit
[local:exp:S] ls /custom
path /home/midas/online/custom/
custom_page& custom_page.html

A {{HtmlTag|tag=<script>}} tag for each resource file to be served (specifying the file name) is then placed in the header of {{File|name=custom_page.html}}
i.e.
{{Html|text=<script type="text/javascript" src="custom_functions.js"></script>}}
{{Html|text=<script type="text/javascript" src="custom_globals.js"></script>}}
<br> and a {{HtmlTag|tag=<link>}} tag for an external stylesheet
{{Html|text=<link type="text/css" rel="stylesheet" href="custom_stylesheet.css" title="Stylesheet">}}
An image tag is placed in the body of {{File|name=custom_page.html}}
{{Html|text=<img src="test_image.png"> }}
[[mhttpd]] then loads the resource file from the directory indicated by the Path key with the correct MIME type (see [[/Custom ODB tree#Keys in the /Custom tree|Custom tree keys]] for supported MIME types).

=== Resource files served WITHOUT <span style="color: purple; font-style:italic;">/custom/path</span> key defined ===
Alternatively, resource files can be served to a [[Custom Page]] by creating a key for every resource file in the [[/Custom ODB tree]]. These keys must contain the full path of the file on the disk, and the key {{Odbpath|path=/Custom/Path}} must NOT be defined. The resource files can be in different directories on the disk. By defining the key names with an appropriate file extension, the resource files are served with the appropriate MIME types. The key names end in the special character "!" so that they will not appear on the Status page as custom-links (see [[/Custom ODB tree#Key names|key names]].

Without the {{Odbpath|path=/Custom/Path}} key, the links for the above example in the {{Odbpath|path=/Custom}} tree might look like
$ odbedit
[local:exp:S] ls /custom
custom_page& /home/midas/online/custom/custom_page.html
custom_functions.js! /home/midas/online/resources/custom_functions.js
globals.js! /home/midas/online/resources/custom_functions.js
stylesheet.css! /home/midas/online/stylesheets/custom_stylesheet.css
image.png! /home/midas/images/test_image.png

assuming the resource files are now in the subdirectories indicated.
The {{HtmlTag|tag=<script>}} tag for each resource file to be served (specifying the custom-link) is then placed in the header of {{File|name=custom_page.html}}
i.e.
{{Html|text=<script type="text/javascript" src="custom_functions.js!"></script>}}
{{Html|text=<script type="text/javascript" src="globals.js!"></script>}}
<br> and a {{HtmlTag|tag=<link>}} tag for an external stylesheet
{{Html|text=<link type="text/css" rel="stylesheet" href="stylesheet.css!" title="Stylesheet">}}
An image tag is placed in the body of {{File|name=custom_page.html}}
{{Html|text=<img src="image.png!"> }}

<br><br>

The resulting Demo custom page is shown in Figure 1, which can be compared with Figure 2 (no stylesheet).
{| class="wikitable"
|-
! Figure 1 !! Figure 2
|-
| Demo Custom Page using MIDAS stylesheet || Demo Custom Page
|-

| [[File:Mhxcustom03.jpg|thumb|300px]] || [[File:Mhxcustom02.jpg|thumb|200px]]
|}
<br clear=all>

<br><br>
= Alias-Buttons and Hyperlinks =
Any hyperlink can easily be included on a [[Custom Page]] by using the standard HTML anchor {{HtmlTag|tag=<a...>}} tag, e.g.
{{Html|text=<a href="http://ladd00.triumf.ca/~daqweb/doc/midas/html/">Midas Help</a>}}

Links on a custom page equivalent to [[/Alias ODB tree#Alias-Buttons|alias-buttons]] can also be made e.g.
{{Html|text=<button type="button" onclick="document.location.href='/Alias/alias&';">alias</button>}}
See the [[/Alias ODB tree]] for details.

<br><br>
= Page refresh =
The following {{HtmlTag|tag=<meta...>}} tag included in the HTML header code will cause the whole custom page to refresh in 60 seconds :
{{Html|text=<meta http-equiv="Refresh" content="60">}}
It is also possible to [[#Periodic update of parts of a custom page|periodically update parts]] of a custom page.

<br><br>
= Periodic update of parts of a custom page =

The functionality of [[Mhttpd.js|ODBGet]] together with the window.setInterval() function
can be used to update parts of the web page periodically.
For example the Javascript fragment below contains a function which updates the current run number every 10 seconds in the background:

<div style="background-color:floralwhite; color:steelblue; font-style:italic"> 
window.setInterval("Refresh()", 10000);<br>
function Refresh() {<br>
:document.getElementById("run_number").innerHTML = ODBGet('/Runinfo/Run number');<br>
}
</div>
The custom page has to
* [[Mhttpd.js#include js lib|include the MIDAS JS library]] to access ODBGet
* contain an element with id="run_number", such as
{{Html|text=<td id="run_number"></td>}}

<br><br>
= Display last MIDAS message(s) =

The message log (see [[Message System]]) can be accessed from a custom page using a call to the JavaScript library function [[Mhttpd.js|ODBGetMsg]] (provided the [[Mhttpd.js#include js lib|JS library is included]]).

This allows the inclusion of the "Last Midas message" on a custom page, e.g.
{{JS|text=document.write('Last message:'+ODBGetMsg("midas",0,1))}}
More messages may be displayed by increasing the third parameter to ODBGetMsg.
;Note
: Parameters were changed August 2015. See [[Mhttpd.js|ODBGetMsg]] for older versions.
: Coming soon - a [[mjsonrpc]] function

<br><br>
= Generate a message log entry =

A custom page can generate a message to be sent to the MIDAS message log (see [[Message System]]). A call to mjsonrpc_cm_msg() will generate a message if using the [[mjsonrpc]] functions. Otherwise, use the AJAX function [[Mhttpd.js|ODBGenerateMsg]]. To use these functions, the [[Mhttpd.js#include js lib|JS library must be included]] in the html code.

<br><br>
= Checkboxes =
;NOTE
: '''New (since 2018) custom pages using the [[Custom Page#modb* Javascript scheme]] should use [[Custom Page#modbcheckbox|modbcheckbox]] to create a checkbox.'''
<Br><br>

The function [[Mhttpd.js|ODBSet]] (provided the [[Mhttpd.js#include js lib|JS library is included]]) can be used when one clicks on a checkbox for example:
{{Html|text=<input name="box0" type="checkbox" onClick="ODBSet(my_path, this.checked?'1':'0')">}}
If used as above, the state of the checkbox must be initialized when the page is loaded. This can be done with some JavaScript code called on initialization, e.g.
{{JS|text=document.form1.box0.checked= ODBGet(my_path)); // initialize to the correct value}}

<br><br>
= Replace Status Page by a Custom page =

Click to enlarge thumbnail
[[File:Mhcustom_status.jpg|thumbnail|left|Figure 3: ODB /Custom/Status custom-link to a custom status page]]
<div style="clear: both"></div> 

If a custom-link with the [[/Custom ODB tree#Key names|reserved key name]] '''Status''' (not "Status&" or "Status!") is created in the [[/Custom ODB tree]] (as shown in Figure 3), then that custom page will '''replace the default Status Page'''.

Clicking on the {{Button|name=Status}} button on any of the sub-pages (e.g. [[ODB Page]], [[Programs Page]] etc.) will now return to the Custom Status Page. If there are buttons on the Custom Status page, you '''must''' include a [[#Redirect]] statement of the form
{{Html|text=<input type=hidden name="redir" value="../">}}
or you will see the message
Invalid custom page:NULL path

If the Custom Status page includes [[#Resource files]] served on a regular custom page with a statement such as
{{Html|text=<script type="text/javascript" src="cs_functions!">}}
to serve them in a Custom Status page, the statement would be
{{Html|text=<script type="text/javascript" src="<span style="font-weight:bold">/CS/</span>cs_functions!">}}
In fact, this statement can be used in a regular custom page, as the "/CS/" is ignored in that case.

To return to the default Status Page, delete the <span style="color: purple; font-style:italic;">/Custom/Status</span> key.

<br><br>
= Start, Stop and Check if a program is running =
There are [[mjsonrpc]] functions that implemented all three program management functions - start program,
stop program and "is running?" as JSON-RPC methods.

<br><br>
= Send an Ajax request =
By sending an Ajax request from a custom page, you can make a button perform a specific function.

All functions in midas are controlled through special URLs. So the URL
http://<host:port>/?cmd=Start&value=10
will start run #10.

Although it is easier to use an HTML input statement to [[#Access to the MIDAS Menu buttons]],
to send an Ajax request, you can use the function ''XMLHttpRequestGeneric'' which is in the MIDAS Javascript library [[mhttpd.js]].
Then the HTML code would be

{{Html|text=<input type="button" onclick="start()">}}

and in your JavaScript code add a function ''start()'':

<div style="background-color:floralwhite; color:steelblue; font-style:italic">
function start()
{
: var request = XMLHttpRequestGeneric();

: url = '?cmd=Start&value=10';
: request.open('GET', url, true); // asynchronous request
: request.send(null);
} <br>
</div>
See also [[#Access to the MIDAS Menu buttons]]. Another example with optional callback can be found in [[#Customscript button without a page reload]].

This mechanism can be used for starting a particular program, see for example (see [https://midas.triumf.ca/elog/Midas/1046]). However, this functionality is now provided by [[mjsonrpc]] functions - see [[#Start, Stop and Check if a program is running]].

<br><br>
= Image insertion =
An image can be loaded from the web using an HTML {{HtmlTag|tag=<img...>}}, e.g.
{{Html|text="TRIUMF logo" <img src="https://lixenon.triumf.ca/InternalDocuments/Alice/figures/TRIUMF-logo.jpg/image_preview">}}
or a MIDAS History image can be inserted into a custom page using an HTML {{HtmlTag|tag=<img...>}} tag of the following form:
{{Html|text=blah<img src="http://hostname.domain:port/HS/Meterdis.gif&scale=12h&width=300">}}

If the image file is on the local disk, it can be loaded as a '''resource file'''. The image can be of format .pdf, .jpg, .gif, .png. See loading [[#Resource files]].

If you wish to superimpose features such as '''labels and fills''', the image file cannot be served as a [[#Resource files|resource file]]. Instead, the image file must be in '''gif''' format, and must be included in the {{Odbpath|path=/Custom/images}} subtree (Figure 4). Image insertion into a Custom page will be illustrated using the Demo custom page shown in [[#MIDAS stylesheet|Figure 2]]. All the files required for this demo can be found in the MIDAS package at $MIDASSYS/examples/custom. If you do not wish to create
the keys yourself, proceed to [[#Superimposing Labels, Bars and Fills onto a gif image]].

Make a [[/Custom ODB tree#Custom-Link|custom-link]] to the Demo custom page file ''myexpt.html'' , i.e.
[local:js:S]/>ls /custom
myexpt& /home/test/packages/midas/examples/custom/myexpt.html

To make the image ''myexpt.gif'' visible on the custom page, the path and filename of the image file must be defined in the {{Odbpath|path=/Custom/images}} subtree. To do this,
create the subtrees {{Odbpath|path=/Custom/images/myexpt.gif}} where the subtree name "myexpt.gif" is named for the image file you are going to use. Multiple images can be used, by creating multiple imagefile subtrees.

In the imagefile subtree {{Odbpath|path=myexpt.gif}}, create the STRING key {{Odbpath|path=Background}}, and set it to contain the path and name of the image file. The tree structure should then look similar to Figure 4, minus the labels/bars/fill subtrees which will be added to the ODB later.

The image must also be referenced in the custom HTML file ''myexpt.html'' in the "src" field of an HTML {{HtmlTag|tag=<img...>}} tag, e.g.
{{Html|text=<img '''src="myexpt.gif"'''>}}

Click to enlarge thumbnail
[[File:Mhcustom_images.jpg|thumbnail|left|Figure 4: /Custom/Images ODB Tree]]
<br clear=all>
Once the image is visible, enable [[#HTML mapping]], optionally [[#Display mouse position]] and proceed to [[#Superimposing Labels, Bars and Fills onto a gif image]].

<br><br>
== HTML mapping ==
Note that if additional features such as active clickable areas and labels, bars and fills superimposed on the image are also required, HTML mapping must also be activated with the HTML {{HtmlTag|tag=<map...>}} tag and the "usemap" attribute of the HTML {{HtmlTag|tag=<img>}} tag
{{Html|text= <map '''name="myexpt.map"'''> <br> <img src="myexpt.gif" '''usemap="#myexpt.map"'''> <br>...<br> </map>"}}

<br><br>
== Display mouse position ==
[[File:Cursor.png|thumbnail|left|Figure 5: MEG Gas System Custom Page showing cursor position]]
<div style="clear: both"></div> 

When writing custom pages with large background images and labels and fills placed on that image, it is hard to figure out X and Y coordinates of the labels. This can now be simplified by using the function ''getMouseXY()'' in the development JavaScript built-in library [[develop.js]]. This function supplies the X,Y position of the cursor if an element of ID "'''refimg'''" is present. This JS library '''must be [[develop.js|included in the custom page]]''' in order to use it:

Then, set the "id" attribute of the background HTML {{HtmlTag|tag=<img...>}} tag to "refimg", e.g.

<div style="background-color:floralwhite; color:seagreen; font-style:italic">
: <img '''id="refimg"''' src="ebit_pc.gif" usemap="#Custom1"> 
: <map name="Custom1">
: .....
: </map>
</div>

If the "'''refimg'''" tag is present, the cursor changes into a crosshair, and its absolute and relative locations in respect to the reference image are shown in the status bar (Figure 5).

<br><br>
== Superimposing Labels, Bars and Fills onto a gif image ==
You can enhance your custom page by superimposing multiple features based on ODB variables onto an image (e.g. [[#Display mouse position|Figure 5]]), such as

* labels: "live" ODB values positioned in a particular location of the page
* bars : "bar level" showing graphically ODB values such as levels or rate etc.
* fills : "color level" where colour is used as the level indicator.

Each entry (label/bar/fill) will have an ODB tree associated to it defining the ODB variable path, X/Y position, colour, etc. Each time the page is updated, the latest ODB value/level/rate will be shown based on the ODB parameter to which the label, bar or fill is linked - hence the term "live". The overlay of the requested features is done onto the selected image file.

This powerful new extension brings the [[mhttpd]] capability closer to other experimental web controllers similar to EPICS.

;Note
: Be sure to enable the feature to [[#Display mouse position]] in order to facilitate finding the X,Y positions of the various features.
: [[#HTML mapping]] must be activated for labels/bars/fills to work

A Demo custom page showing labels, bars and fills superimposed on an image is shown in [[#MIDAS stylesheet|Figure 2]].
All the files for this demo can be found in $MIDASSYS/examples/custom/. The file xcustom.odb contains the ODB keys required, including those to insert the image and superimpose the various labels, fills etc. This file can be loaded into the ODB with the {{Odbedit cmd|cmd=load}}.

<br><br>
=== Adding Labels ===

[[File:Mhcustom_label.jpg|thumbnail|left|Figure 6: /Custom/Images/Labels ODB subtree]]

In order to include a readout of ODB values (i.e. labels), on the image, a further ODB subdirectory {{Odbpath|path=/Custom/images/<imagefile.gif/Labels}} must be created. Creating a subdirectory for a particular label i.e. {{Odbpath|path=<label name>}} in the {{Odbpath|path=Labels}} subtree will, at the next custom web page refresh, cause the complete structure for that label to be created and filled with default values. Once the {{Odbpath|path=<label name>}} subtree is created, the user fills the various keys as desired. See [[/Custom ODB tree#Labels subtree]] for details of the various fields. This procedure is repeated for all the labels required, using a unique {{Odbpath|path=<label name>}} subdirectory for each label. An example of a {{Odbpath|path=<label name>}} subtree is shown in Figure 6.

<div style="clear: both"></div> 

<br><br>
=== Adding Bars ===

[[File:Mhcustom_fill.jpg|thumbnail|left|Figure 7: /Custom/Images/Fills ODB subtree]]

In a similar way, Bars can be superimposed on the image. Create a new ODB subdirectory {{Odbpath|path=/Custom/images/<imagefile.gif/Bars}}. Create a subdirectory for a particular Bar ({{Odbpath|path=<bar name>}}) in the {{Odbpath|path=Bars}} subdirectory. Refresh the web page and fill the various keys as desired. See [[/Custom ODB tree#Bars subtree]] for details of the various fields. Examples of a <bar-name> subtree is shown in Figure 7.

<div style="clear: both"></div> 

<br><br>
=== Adding Fills ===
[[File:Mhcustom_bar.jpg|thumbnail|left|Figure 8: /Custom/Images/Bars ODB subtree]]

In a similar way, Fills can be superimposed on the image. Create new ODB subdirectory {{Odbpath|path=/Custom/images/<imagefile.gif/Fills}}. Create a subdirectory for a particular Fill ({{Odbpath|path=<fill name>}}) in the {{Odbpath|path=Fills}} subdirectory. Refresh the web page and fill the various keys as desired. See [[/Custom ODB tree#Fills subtree]] for details of the various fields. Examples of a ({{Odbpath|path=<fill name>}} subtree is shown in Figure 8.

<div style="clear: both"></div> 

<br><br>
== Mapping active areas onto the image ==
Provided [[#HTML mapping]] is activated, "clickable" areas can be created on the image.

This can be done now with a new function like this:
{{Html|text= <area shape="rect" coords="40,200,100,300" alt="Main Valve" href="Custom1?cmd=Toggle&odb=/Equipment/Environment/Variables/Output[2]">}}

This defines a clickable map on top of the custom image. The area(s) should match with some area(s) on the image, e.g. the box of a valve. Determining the co-ordinates of this area is simplified by using the Display mouse position feature.

By clicking on this area, the supplied path to the ODB is used (in this case {{Odbpath|path=/Equipment/Environment/Variables/Output[2]}}) and its value is toggled. If the valve value is then used in the image via a [[#Adding Fills|Fill]] statement to change the color of the valve, it can turn green or red depending on its state. This is illustrated in [[#Display mouse position|Figure 5]].

Clicking an active area can also be made to open a new custom page, for example:
{{Html|text=<area shape=rect coords="687,530, 890,648" alt="Pump detail" href = "Pump!" title="Click for Details">}}
{{Html|text=<area shape=rect coords="560,574,775,662" alt="Buffer Tank detail" href = "BufferTank!" title="Click for Details">}}
where ''Pump!'' and ''BufferTank!'' are defined as links to custom pages in the [[/Custom ODB tree]].

<br><br>
== Edit boxes floating on top of a graphic ==

An edit box can be placed on top of a graphic in a particular position by means of an HTML <span style="color:green"><div></span> tag. Using the ODBEdit function from the Midas JS library [[Mhttpd.js]], the custom page code would look like this:

{| style="text-align: left; width: 100%; background-color: floralwhite;" border="0" cellpadding="1" cellspacing="1"
|-
|<pre style="background-color:floralwhite; color:seagreen; font-style:italic">
<div style="position:absolute; top:100px; left:50px;">
<script type="text/javascript"> </pre>
<pre style="background-color:floralwhite; color:steelblue; font-style:italic;">
document.write('Run number: ')
path='/runinfo/run number'
rn = ODBGet(path)
document.write('<a href="#" onclick="ODBEdit(path)" >')
document.write(rn)
document.write('</a>');</pre>
<pre style="background-color:floralwhite; color:seagreen; font-style:italic;">
</script>
</div>
<img src="custom.gif">
</pre>
|}

The same thing could be done with the HTML-style {{HtmlTag|tag=<odb>}} tag :
<pre style="background-color:floralwhite; color:seagreen; font-style:italic">
<div style="position:absolute; top:100px; left:50px;">
Run number: <odb src="/Runinfo/run number" edit=1>
</div>
<img src="custom.gif">
</pre>

<br><br>

== Interactive SVG Implementation ==

An SVG file loaded on a custom page can be interactively modified using JavaScript.
This is useful for graphically displaying ODB values in complex service or detector systems.

An SVG file can be embedded like this:
<pre>
<object id="svgObject" type="image/svg+xml" data="Midas_helium_example.svg"></object>
</pre>

Objects within the SVG can be modified—for example, by changing their fill color as shown below:
<pre>
const svgDoc = document.getElementById('svgObject').contentDocument;
const obj_Valve = svgDoc.getElementById(valveID);
obj_Valve.style.fill = "#00FF00";
</pre>

SVG images are stored in XML format. In Inkscape, object properties can be interactively edited using the XML Editor.

= Examples =
For more examples of accessing the ODB with the Javascript library [[mhttpd.js]] look at the example experiment in the MIDAS package $MIDASSYS/examples/javascript1/example.html.

== Example 1 : Asynchronous calls using mjsonrpc functions ==
See [[mjsonrpc#examples]]

== Example 2 : Asynchronous calls using Javascript and AJAX ==

Example 2 shows html code illustrating the use of ODBMCopy(), where innerHTML is used to display the data. On a page with images or a lot of data, innerHTML allows you to update variables without having to reload the whole page. In the example, a timer causes the page to update every 10s (reread the data). Often the ODB data for the whole page can be read by one asynchronous ODBMCopy() call, rather than scattering synchronous ODBGet() calls throughout the page.

Access to the ODB is provided by the [[Mhttpd.js|MIDAS Javascript Library]], included with the line <span style="color:green"><script src='mhttpd.js'></script></span>.

<div style="background-color:floralwhite; color:seagreen; font-style:italic">
<html> <br>
<head> <br>
<title>MyTitle</title> <br>
<script src='mhttpd.js'></script>
<script> </div>
<div style="background-color:floralwhite; color:steelblue; font-style:italic">
var updatePeriod = 10000; // in msec <br>
var updateTimerId = 0; <br>
var counter=0; <br>
function update() { <br>
:clearTimeout(updateTimerId); <br>
: load();
: if (updatePeriod > 0)
: updateTimerId = setTimeout('update()', updatePeriod);
} <br>
function load() { <br>
: document.getElementById('LastUpdated').innerHTML = "Updating..." + new Date;
: var paths = [ "/Runinfo", "/Experiment"];
: var data_odb=ODBMCopy(paths, mcopy_callback, "json")
: counter++;
: document.getElementById('counter').innerHTML = 'Counter: '+ counter
} <br>
function mcopy_callback(data) { <br>
: var obj= JSON.parse(data);
: var runinfo=obj[0];
: document.getElementById('rn').innerHTML = 'Run Number ='+ parseInt(runinfo["Run number"]);
: document.getElementById('state').innerHTML ='Run State= '+ runinfo.State;
: var experiment=obj[1];
: document.getElementById('name').innerHTML='Experiment name = '+ experiment.Name <br>
}<br> </div>
<div style="background-color:floralwhite; color:seagreen; font-style:italic">
</script> <br>
</head> <br>
<body> <br>
<b>Javascript code using ODBMCopy with callback</b> <br>
The data on the page is updated every 10 sec using a timer<br>
<p id="LastUpdated" > Last updated: never</p><br>
<p id="rn"> Run Number : unknown </p><br>
<p id="state"> State : unknown</p><br>
<p id="name"> Experiment name : unknown </p><br>
<p id="counter">Counter: zero </p><br>
<script type="text/javascript"> </div>
<div style="background-color:floralwhite; color:steelblue; font-style:italic">
: if (updatePeriod > 0)
: update(); </div>
<div style="background-color:floralwhite; color:seagreen; font-style:italic">
</script> <br>
</body> </html></div>

<br><br>
== Example 3 : Synchronous Calls using Javascript and AJAX ==
In the following example, JS functions ODBGet and ODBEdit from the [[Mhttpd.js|MIDAS Javascript Library]] are used to access the ODB.
;NOTE
# Synchronous calls are now deprecated (see [[#The MIDAS Javascript Library|above]]).
# The Javascript library '''must be [[mhttpd.js#include js lib|included in the HTML code]]'''.

{{Html|text=<script>}}
{{JS|text=document.write ('Experiment Name: '+ ODBGet("/Experiment/Name")) <br> var alarm_path="/alarms/Alarm system active"; <br> var alarm_active=ODBGet(alarm_path); <br> document.write('<a href="#" onclick="ODBEdit(alarm_path)" >'+alarm_active+'</a>')}}
{{Html|text=</script>}}

[[Category:Custom]]

Custom Page

2025-05-12T11:57:06Z

Rudzki:

{{Pagelinks}}

= Links =
{{mhttpdpages3|[[Custom Page Features]]|[[/Custom ODB tree]]|[[Mhttpd.js|MIDAS Javascript library]]}}

= Purpose =
A user-created [[mhttpd]] Custom Web Page accessible from the side menu allows the user additional flexibility. For example, a custom page may present the essential parameters of the controlled experiment in a more compact way. A custom page may even replace the default [[Status Page]].

= Introduction =
Custom web pages provide the user with a means of creating secondary user-created web page(s) activated within the standard MIDAS web interface. These custom pages usually display ODB parameters or data to the user. They can contain specific links to the ODB so the user may also input information relevant to the experiment. Users create Custom Pages when the standard pages do not meet their requirements completely.

We note that MIDAS has provided a number of different ways of providing custom pages over the years. A new scheme of custom pages making use of modern HTML5 techniques has been introduced in 2017. This page will mostly only be providing documentation for the new scheme of custom pages.

= Examples of Custom Pages =

Click on the thumbnails to enlarge.

{|
|-
| [[File:Capture_sgas.png|thumb|left|Figure 1: MEG Gas System]] || '''Example 1'''
This page (Figure 1) from the MEG experiment at PSI shows a complex gas system. This shows the use of "fills" and "labels". Open valves are represented as green circles, closed valves as red circles. If, for example, an open valve is clicked, the valve closes, and the circle turns red (provided the user successfully supplied the correct password).
|-
| [[File:custom_ROOT_analyzer_page.png|thumb|left|Figure 2: ROOT Analyzer (MEG Experiment)]] || '''Example 2'''
Many MIDAS experiments work with ROOT based analyzers today. One problem is that the graphical output of the root analyzer can only be seen through the X server and not through the web. At the MEG experiment, this problem was solved in an elegant way: The ROOT analyzer runs in the background, using a "virtual" X server called Xvfb. It plots its output (several panels) normally using this X server, then saves this panels every ten seconds into GIF files. These GIF files are then served through mhttpd using a custom page. The output is shown in Figure 2.

The buttons on the left sides are actually HTML buttons on that custom page overlaid to the GIF image, which in this case shows one of the 800 PMT channels digitized at 1.6 GSPS. With these buttons one can cycle through the different GIF images, which then automatically update ever ten seconds. Of course it is not possible to feed interaction back to the analyzer (i.e. the waveform cannot be fitted interactively) but for monitoring an experiment in production mode this tool is extremely helpful, since it is seamlessly integrated into mhttpd. All the magic is done with JavaScript, and the buttons are overlaid on the graphics using CSS with absolute positioning. The analysis ratio on the top right is also done with JavaScript accessing the required information from the ODB.

For details using Xvfb server, please contact Ryu Sawada <sawada@icepp.s.u-tokyo.ac.jp>.
|-
| [[File:deap_custom_scb.png|thumb|left|Figure 3: SCB Setup (Deap Experiment)]] || '''Example 3'''
This custom page from the Deap Experiment (Figure 3) allows the users to easily set individual channels, or a group of channels, or all channels of the SCB modules to a particular value.
|}

= Access a Custom Page from the Regular MIDAS pages =
Access to a Custom Page is set up through the [[/Custom ODB tree]] (see [[/Custom ODB tree#Keys in the /Custom tree|custom-link]]). This associates a custom page file on the disk with a menu item on the left navigation bar. Clicking on the resulting link will display that custom page.

Often a custom page requires resources such as *.css (stylesheets) or *.js (javascript) files. It is convenient to store all such files with the custom page file (*.html) in
a particular directory, e.g. /home/expt/online/custom. By creating an ODB key /Custom/Path, all the custom page files and resources can be served easily from this directory.
See [[Custom Page Features#Resource files]] for more information.

If the key {{Odbpath|path=/Custom/myPage&}} (see Note) is created, e.g.
odbedit> ls /Custom
Path /home/expt/online/custom
myPage& mypage.html

the custom link on the left navigation bar will be <code>myPage</code> and the URL for the resulting custom page will be of the form <code>http://myhost.mydomain:myport/cmd=?Custom&page=myPage</code> (see also [[mhttpd#usage]]).
Clicking on <code>myPage</code> will display the custom page in the same window.

;Note
: With the "&" symbol in the key name, the page would appear in a new tab/window. See [[/Custom ODB tree#Key names|Key names]] for more information.

If an experiment used many custom pages, the menu on the left side can get pretty long. To avoid that, custom pages can be structured in submenus. Simply put a custom page in an ODB subdirectory, and it will appear in a separate submenu, e.g.

odbedit> ls -r /Custom
Path /home/expt/online/custom
myPage& mypage.html
Calorimeter
HV hv.html
Rates rates.html
Baeam
Beamline beamline.html
Accelerator accel.html

The pages then include the subdirectory in the URL, like

http://localhost:8080?cmd=custom&page=beam/Beamline

Subdirectories can contain nested subdirectories. Please make sure that you specify the full path in your mhttpd_init() call, such as

<body class="mcss" onload="mhttpd_init('Calorimeter/HV');">

in order to keep the submenu open after you select the custom page.

= How to write a custom page =
A custom page is usually written in a combination of HTML and Javascript. It can contain any of the features described below. A [[Mjsonrpc | Javascript MjsonRPC Library]] has been written to provide access to the ODB and other functions.

In what follows, we describe a scheme for writing custom pages with the set of modb* javascript functions. The advantages of using these modb* javascript functions are

* modb* functions hide details about the underlying MjsonRPC calls, which should allow a user to write pretty and sophisticated custom pages quickly and cleanly.
* modb* functions ensure that all the periodic updates of the ODB value (and other MIDAS information) are done in a single MjsonRPC batch call, which should ensure optimal page loading speed.
* modb* functions encapsulate the underlying communication. Should the communication change in the future, the custom pages do not have to be changed.

It is also possible for users to write their custom pages using only the underlying [[Mjsonrpc | MjsonRPC library]] calls, but they then need to ensure on their own that the page loading remains efficient. In particular, if you combine the standard MIDAS navigation bars (described in next section) with your own periodic MjsonRPC calls then you will probably need at least two separate periodic RPC calls to populate the custom page (instead of one call). It will also require more coding to implement the custom page with only MjsonRPC calls.

== How to use the standard MIDAS navigation bars on your custom page ==

If you want to have your custom page use the same header and navigation bars as the standard MIDAS pages, you need to use the following syntax

<pre>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="midas.css">
<script src="controls.js"></script>
<script src="midas.js"></script>
<script src="mhttpd.js"></script>
<title>myPage</title>
</head>

<body class="mcss" onload="mhttpd_init('myPage');">


<div id="mheader"></div>
<div id="msidenav"></div>

<div id="mmain">
ADD YOUR HTML/JS CODE here...
</div>
</pre>

The call <code>mhttpd_init('myPage')</code> is executed when the page is loaded, and <code>myPage</code> is the name of the page shown on the left menu bar. This corresponds to an ODB entry /Custom/myPage.
This pattern will allow you to use the standard MIDAS navigation whether you are using the modb* functions or the underlying [[Mjsonrpc | javascript libraries]].

= modb* Javascript scheme =

The general scheme of the custom page scheme is to write <code><div class="modb..."></div></code> or <code><span class="modb..."></span></code> tags with special class names, most of them starting with "modb..." ("MIDAS-ODB"). Use a <code><div></code> tag if you want the element to appear in a separate line, and use the <code><span></code> tag if you want to display the element in-line. The following description uses only <code><div></code> tags, but all of them can be changed to <code><span></code>.

All HTML tags with "modb..." names are scanned by the <code>mhttp_init('name')</code> function upon page load, and their inner contents are replaced by the requested ODB value or some graphics. The contents are then updated regularly. Updates are once per second by default. This can be changed by passing a second argument to <code>mhttpd_init('name', interval)</code> where "interval" is in milliseconds. You can add or remove "modb..." elements at any time using javascript, and the new elements will be "discovered" automatically during the next update.

== modbset(path, value) ==

To set values in the ODB, the midas JavaScript function mjsonrpc_db_paste() is usually called. This function is implemented as a JavaScript promise, which lets you chain several request in order to change values inside the ODB in a certain order. If that functionality is not required, the simplified modbset() function can be called, which also implements standard error handling. Two versions of this function exist, one which accepts a single ODB path and a single value, and one which accepts an array of ODB paths and values:

<code>
modbset("odb path", value)
</code>

<code>
modbset(["odb path1", "odb path2", ...], [value1, value2, ...])
</code>

These functions are typically used by custom JavaScript code, like when some value in an experiment exceeds some limit and some action has to be taken like to close a valve. If the call fails (like if mhttpd is dead), a window with an error description is shown.

== modb ==

This special HTML div tag (abbreviation stands for Midas ODB) <code><div class="modb" data-odb-path="/Some/Path" onchange="func()"></code> can be used to call a user-defined function func() if a value in the ODB changes. This function must be defined inline or in a separate <script>...</script> section, and can execute any operation, such as opening a dialog box, hiding/unhiding parts of the custom page, or changing colors and styles of page elements.

The current value of the ODB entry is available inside the "onchange" function as '''this.value'''. Following tag will call a function which logs the current run number in the JavaScript console window:
<br /><br />
<code><div class="modb" data-odb-path="/Runinfo/Run number" onchange="func(this.value)">

<script>function func(value) {
console.log(value);
}</script>
</code>
<br /><br />
If the ODB path does not point to an individual value but to a subdirectory, the whole subdirectory is mapped to '''this.value''' as a JavaSctipt object such as
<br /><br />
<code><div class="modb" data-odb-path="/Runinfo" onchange="func(this.value)">

<script>function func(value) {
console.log(value["run number"]);
}</script>
<br />
</code>
<br /><br />
Note that ODB entries are mapped to JavaScript objects without change. So if an ODB entry name contains a blank, it must be accessed via the JS square bracket '''value["run number"]''' as shown in the above example. Otherwise, the entry can be accessed via the dot notation, such as '''value.state''' for /Runinfo/State for example.

== modbvalue ==

This special HTML div tag (abbreviation stands for "Midas ODB VALUE")
<br /><br />
<code><div class="modbvalue" data-odb-path="/Some/Path"></div></code>
<br /><br />
is now automatically replaced by the value in the ODB found at the given path and updated regularly as described above Following options are valid for this tag:

{| class="wikitable"
|+ Table 1: List of valid options for modbvalue tag
|-
! Option !! Example !! Meaning
|-
| data-name || class="modbvalue" || Tells the framework to replace this tag with an ODB value
|-
| data-odb-path || data-odb-path = "/Runinfo/Run number" || Path to the value in the ODB. If omitted, the value must be set via [[Custom_Page#Changing_values_of_indicators_programmatically | set_value]].
|-
| data-odb-editable || data-odb-editable="1" || If set, the value is not only shown, but is also clickable for in-line editing. Hitting return send the new value to the ODB.
|-
| data-format || data-format="f3" || Specify format of data shown. See Table 2 below for options.
|-
| data-size || data-size="8" || Specify size (in chars) of edit box if one modifies the value. Default is 10.
|-
| data-formula || data-formula="2*x+3" || Specify an optional formula to process with the current ODB value stored in x
|-
| data-validate || data-validate="func" || Specify an optional validation function which gets called before submitting data (see below)
|}

=== Validation ===

Before a modified value is submitted to the ODB, an optional validation function can be called via the <code>data-validate</code> option. The function
will be called with the current value and a reference to the current modbvalue element. If the function returns <code>false</code>, then the value
is not sent to the ODB.

Following example shows a function which just rejects the submission of values above 1000:

<div class="modbvalue" ... data-odb-editable="1" data-validate="my_validate"></div>

<script src="controls.js"></script> 
<script>
function my_validate(value, element) {
if (value > 1000) {
dlgAlert("Value cannot be above 1000");
return false;
}
return true;
}
</script>

Following function corrects the return value to 1000 if it's above 1000:

<script>
function my_validate2(value, element) {
if (value > 1000) {
element.childNodes[0].value = 1000;
return true;
}
</script>

=== Confirmation ===

Before a modified value is submitted to the ODB, a confirmation dialog box can be displayed to let the user confirm the change before it is actually written to the ODB.
This is done with the option <code>data-confirm=<string></code>. A dialog box is then shown with the <code><string></code> as the main text and two buttons with "OK" and "Cancel".
Hitting "OK" finally writes the value to the ODB, hitting "Cancel" keeps the old value.

Following example shows an example:

<div class="modbvalue" ... data-odb-editable="1" data-confirm="Are you sure to change the value?"></div>

Following dialog box is then showed:

[[File:Confirm.png|frame|left|Optional confirm dialog]]

<br clear=all>

=== Formatting ===

Table 2 below lists the format specifiers supported with a modbvalue tag <code>data-format="..."</code>:

{| class="wikitable"
|+ Table 2: Format specifiers for modbvalue tag <code>data-format="..."</code>.
|-
! Option !! Valid for* !! Example !! Meaning
|-
| %d || int || 1234 || Shows a number in decimal encoding
|-
| %t || int, float || 1,234,567 || Shows a number in decimal encoding with commas as thousands separator
|-
| %x || int || 0x4D2 || Shows a number in hexadecimal encoding
|-
| %b || int || 10011010010b|| Shows a number in binary encoding. Options t, d, x, b can be combined, like <code>data-format="%d / %x"</code> to produce <code>1234 / 0x4D2</code>
|-
| %f<x> || float || 1.234 || Shows a floating point number with <x> digits after the decimal. A value of f0 shows only the integer part.
|-
| %p<x> || float || 1.23 || Shows a floating point number with <x> significant digits of precision, independent of the decimal. For example a value of p2 can render a number to 12000 or 0.0012
|-
| %e<x> || float || 1.23e-05 || Shows a floating point number with <x> digits after the decimal in exponential format. Useful for small number such as pressures.
|-
| T= %f1 C || float || T= 25.4 C || Combination of text and float value is possible.
|-
| %d / %x / %b || int || 17 / 0x11 / 10001b|| Same integer value in different formats
|-
| [col1,col2] || bool || [red,var(--mgreen)] || Generates a color box filled with col1 (false, <span style="display: inline-block; width: 1em; height: 1em; border: 1px solid black; background-color: red"></span>) or col2 (true, <span style="display: inline-block; width: 1em; height: 1em; border: 1px solid black; background-color: #a0ffb8"></span>)
|}

* Note that valid for "int" means all integral ODB types (regardless of size or signed/unsigned) and valid for "float" means both float and double.

== modbbutton ==

This tag generates a push-button which can set a certain ODB entry to a specific value. To set the "Run number" to 100, one can use the following tag:
<br /><br />
<code><button class="modbbutton mbutton" data-odb-path="/Runinfo/Run number" data-odb-value="100" data-validate="my_validate">[Button Text]</button></code>

The optional <code>data-validate</code> function can be used to prevent pressing the button under certain circumstances. If the validate function returns false, the value is not written to the ODB, similarly than for modbvalue tag.

== modbbox ==

This tag generates a rectangular box which changes color according to a value in the ODB. If the value is nonzero or true (for booleans), the '''data-color''' is used, otherwise the '''data-background-color''' is used
<br /><br />
<code><div class="modbbox" data-odb-path="/Logger/Write Data" data-formula="x > 0" style="width: 30px; height: 30px; border: 1px solid black" data-color="lightgreen" data-background-color="red"></div></code>

Optionally, a <code>data-formula</code> can be specified. The formula sees the ODB value in the variable <code>x</code>, and can do any boolean operation. If the result of this is true, then the box gets the <code>data-color</code>, otherwise the <code>data-background-color</code>.
Examples for these formulas are <code>x > 10</code> for a comparison or <code>x & 1</code> which will do a bitwise AND operation and is true only for odd numbers.

== modbcheckbox ==

This tag generates a check box which can set a certain ODB entry to true or false. To set the "Write data" flag for the logger true or false, one can use the following tag:
<br /><br />
<code><input type="checkbox" class="modbcheckbox" data-odb-path="/Logger/Write data" data-validate="my_validate" /></code>
<br /><br />
If the ODB value changed by this control is of type integer, its value will be set to 1 or 0. The optional <code>data-validate</code> function can be used to prevent changing a value under certain circumstances. If the validate function returns false, the value is not written to the ODB, similarly than for <code>modbvalue</code> tag.

== modbselect ==

This tag generates a drop down box with certain valued which can be sent to a value in the ODB. Following example shows a drop-down box with three different values. When selected, they are sent to the ODB under <code>/Runinfo/Run number</code>.

<select class="modbselect" data-odb-path="/Runinfo/Run number">
<option value="1">1</option>
<option value="5">5</option>
<option value="10">10</option>
</select>

Instead of specifying the valid options in the javascript code, you can also specify them in the ODB, and populate the drop-down with those values. Specify <code>data-auto-options="1"</code> to enable this behaviour. For ODB key <code>x</code>, you will need to create an ODB entry called <code>Options x</code> in the same directory; this "options" key should be a list, with each element in the list being an allowable option.


<select class="modbselect" data-odb-path="/Equipment/Example/Settings/Something" data-auto-options="1">
</select>

The benefit of the <code>data-auto-options="1"</code> approach is that the same options will be shown on the regular ODB browser webpage.

Note that these options are only a convenience for the user interface - there is no strict enforcement in the ODB itself! Power-users are able to set other values via C++/Python/Javascript/odbedit etc.

== modbhbar ==

The following tag:
<br /><br />
<code><div class="modbhbar" style="width: 500px; height: 18px; color: lightgreen;" data-odb-path="/Runinfo/Run number" data-max-value="10" ></div></code>
<br /><br />
shows a horizontal bar with a total length of 500px. Depending on the ODB value {{Odbpath|path=Run number}}. If {{Odbpath|path=Run number}} is 10, then the bar is filled all the way to the right, if {{Odbpath|path=Run number}} is 5, the bar is only filled halfway. Following options are possible:

{| class="wikitable"
|-
! Setting !! Meaning !! Required
|-
| style="width: 500px" || Total width of the horizontal bar || Yes
|-
| style="height: 18px" || Height of the horizontal bar || Yes
|-
| style="color: red" || Color of horizontal bar || Transparent if not present
|-
| style="background-color: red" || Background color of horizontal bar || Transparent if not present
|-
| data-odb-path || ODB path of value being displayed. If omitted, the value must be set via [[Custom_Page#Changing_values_of_indicators_programmatically | set_value]]. || No
|-
| data-min-value || Left limit of bar range || 0 if not present
|-
| data-max-value || Right limit of bar range || 1 if not present
|-
| data-log || Logarithmic display || No
|-
| data-print-value || If "1", data value is shown as text overlay || No
|-
| data-format || Specify format of data shown. See Table 2 above for options || No
|-
| data-formula || Specify an optional formula to process with the current ODB value stored in x || No
|}

== mhaxis ==

A horizontal bar can be combined with an axis with tick marks and labels. The axis can be above or below the bar.

The following tag:
<br /><br />
<code><div class="mhaxis" style="width: 500px; height: 22px;" data-min-value="0" data-max-value="10" ></div></code>
<br /><br />
shows a horizontal axis next to the bar. Following options are possible:

{| class="wikitable"
|-
! Setting !! Meaning !! Required
|-
| style="width: 500px" || Total width of the axis, must match the width of the horizontal bar || Yes
|-
| style="height: 18px" || Height of the axis, must be enough to display labels || Yes
|-
| style="vertical-align: top" || Must be "top" if the axis is below the bar || "bottom" if not given
|-
| data-min-value || Left limit of axis range || Yes
|-
| data-max-value || Right limit of axis range || Yes
|-
| data-log || Logarithmic display || No
|}

== modbvbar ==

Same as <code>modbhbar</code>, except the bar grows vertically instead of horizontally.

== mvaxis ==

Same as <code>mhaxis</code>, except the axis is shown vertically instead of horizontally.

== modbthermo ==

The following tag:
<br /><br />
<code><div class="modbthermo" style="width: 30px; height: 100px;" data-odb-path="/Runinfo/Run number" data-min-value="-10" data-max-value="30" data-color="blue" data-print-value="1" ></div></code>
<br /><br />
shows a vertical thermometer ranging from -10 to 30. Depending on the ODB value {{Odbpath|path=Run number}}. The run number was chosen instead of a real temperature since this ODB variable exists in all midas installations by default, so it's good for testing. Following options are possible:

{| class="wikitable"
|-
! Setting !! Meaning !! Required
|-
| style="width: 30px" || Width of the thermometer || Yes
|-
| style="height: 100px" || Total height of the thermometer || Yes
|-
| data-odb-path || ODB path of value being displayed. If omitted, the value must be set via [[Custom_Page#Changing_values_of_indicators_programmatically | set_value]]. || No
|-
| data-max-value || Upper range || Yes
|-
| data-min-value || Lower range || 0 if not present
|-
| data-color || Color of thermometer || Black if not present
|-
| data-background-color || Color of thermometer background || Transparent if not present
|-
| data-print-value || If "1", data value is shown below the thermometer || No
|-
| data-scale || If "1", the min and max values of the range are shown next to the thermometer || No
|-
| data-format || Specifies format of temperature shown below gauge. See Table 2 for options. || No
|-
| data-formula || Specify an optional formula to process with the current ODB value stored in x || No
|}

== modbgauge ==

The following tag:
<br /><br />
<code><div class="modbgauge" style="width: 100px; height: 50px;" data-odb-path="/Runinfo/Run number" data-min-value="0" data-max-value="10" data-color="darkgreen"></div></code>
<br /><br />
shows a circular gauge ranging from 0 to 10. Depending on the ODB value "Run number". Following options are possible:

{| class="wikitable"
|-
! Setting !! Meaning !! Required
|-
| style="width: 100px" || Width of the gauge || Yes
|-
| style="height: 50px" || Total height of the gauge || Yes
|-
| data-odb-path || ODB path of value being displayed. If omitted, the value must be set via [[Custom_Page#Changing_values_of_indicators_programmatically | set_value]]. || No
|-
| data-max-value || Upper range || Yes
|-
| data-min-value || Lower range || 0 if not present
|-
| data-color || Color of gauge || Black if not present
|-
| data-background-color || Color of gauge background || Transparent if not present
|-
| data-print-value || If "1", data value is shown below the gauge || No
|-
| data-format || Specifies format of temperature shown below gauge. See Table 2 for options. || No
|-
| data-scale || If "1", the min and max values of the range are shown below the gauge || No
|-
| data-formula || Specify an optional formula to process with the current ODB value stored in x || No
|}

If the gauge scale is not shown, the gauge height should be half the gauge width. If the scale is shown, 15px must be added to the height.

== Changing properties of controls dynamically ==

All custom controls can be configured to call a user's function when the control is first set up, or when the value changes. This is done by specifying the '''onload''' and/or '''onchange''' functions.

* '''onload''' is called only once, when the control's value is first read from the ODB.
* '''onchange''' is called each time the value in the ODB changes.

The onload/onchange functions have access to the current value and can change any of the parameters of the control. The following callback for example changes the color of a thermometer to red if the value is above 30 and to blue if it is below:

<code>onchange="this.dataset.color=this.value > 30?'red':'blue';"</code>

onchange can call any arbitrary javascript function. Rather than specifying the logic in the tag itself, the above example could also be implemented like:

<pre>
<script>
function check_therm(elem) {
if (elem.value > 30) {
elem.dataset.color = "red";
} else {
elem.dataset.color = "blue";
}
};
</script>

....

<div class="modbthermo" style="width: 30px; height: 100px;" data-odb-path="/Runinfo/Run number" data-min-value="-10" data-max-value="30" data-color="blue" data-print-value="1" onchange="check_therm(this)"></div>

</pre>

Other example use cases include showing/hiding other elements on a webpage based on whether an modbcheckbox is checked or not, or temporarily changing the background color of an element to highlight that a value has changed.

If you want the same function to be called for both onload and onchange, you could set <code>onload="onchange()"</code> and have the "real" function in onchange.

== Dynamic ODB paths ==

The path of a custom control is static, meaning it has to be written directly inside the control via <code>data-odb-path="/Some/Path"</code>. There can be however cases where the path is only known at runtime. For these cases, the path can be a user function which gets called during each update of the control and has to return the current ODB path. This can be useful for equipment values with names. The standard scheme of MIDAS is to have slow control variables under <code>/Equipment/<name>/Variables</code> and the names of these variables under <code>/Equipment/<name>/Settings/Names</code>. If there are several different arrays under <code>Variables</code>, you might also have something like <code>/Equipment/<name>/Settings/Names XXX</code> where <code>XXX</code> is the name of the key under <code>Variables</code>. If one wants to use a name of a variable rather than its index, the dynamic path function can be uses like in the following example:
<pre>
<script>
let names;

function getNames() {
mjsonrpc_db_get_value("/Equipment/.../Settings/Names").then(function (rpc) {
names = rpc.result.data[0];
mhttpd_init('Custom Page Example');
});
}

function getpath(p) {
if (mscbNames)
return `/Equipment/.../Variables/MSCB[${names.indexOf(p)}]`;
}
</script>
<body class="mcss" onload="getNames();">


<div id="mheader"></div>
<div id="msidenav"></div>

<div id="mmain">
<div class="modbvalue" data-odb-path="getpath('ADC1')"></div>
</div>

</body>
</pre>

When the page is initialized, the function <code>getNames()</code> is called, which obtains the <code>Names</code> array from the ODB and stores it into an array. After the names have been received, the function calls the usual <code>mhttpd_init()</code> function. The "modbvalue" path is now set to <code>data-odb-path="getpath('ADC1')"</code>. This function does a lookup in the <code>names</code> array and returns the proper index, which is then used to access the corresponding value in the variables array. This method has the advantage that if the indices of an array change (e.g. by adding new variables at the front), the code does not have to update any index since the indices are calculated dynamically.

== Changing values of indicators programmatically ==

Usually, custom controls are directly linked to values in the ODB. Sometimes it is however necessary to combine several ODB values into a single indicator, like if you want to show the difference of two ODB values.

For such cases, the <code>data-odb-path</code> attribute can be removed and the the display value can be changed via JavaScript code like following:

<pre>

<div id="mythermo" class="modbthermo" data-min-value="-10" data-max-value="30"></div>

...
let t = document.getElementById("mythermo");
t.setValue(15);
...

</pre>

= mjshistory =

Custom pages can contain one or more specific history panels usually shown on the "History" page. This makes it easy to combine current readings of values together with the history of these values.

To enable interactive history panels, following lines have to be added to your custom page:

Inisde the <head> tag:

<script src="mhistory.js"></script>

Inside the <body> tag:

<body ... onload="mhistory_init();">

The following tag:

<div class="mjshistory" data-group="<group>" data-panel="<panel>" style="width: 320px; height: 200px;" ></div>

shows a history panel defined in the ODB under /History/Display/<group>/<panel> (replace <group>/<panel> with groups and panels from your experiment).

Following options are possible:

{| class="wikitable"
|-
! Setting !! Meaning !! Required
|-
| data-group || ODB group of history. Has to match a group under /History/Display || Yes
|-
| data-panel || ODB panel name of history. Has to match a panel name under /History/Display/<group>/ || Yes
|-
| data-scale || Time scale of history plot. Use 10m for 10 minutes and 5h for 5 hours. If not specified, the value from the ODB under /History/Display/<group>/<panel>/Timescale is used. || No
|-
| data-show-title || Flag to show or hide the title. Default is "1". || No
|-
| data-show-values || Flag to show or hide the variable labels with their current value. Default is "1". || No
|-
| data-show-axis || Flag to show or hide the X/Y axis. Default is "1". || No
|-
| data-show-menu-buttons || Flag to show or hide the menu buttons. Default is "1". || No
|-
| data-show-menu-buttons || Flag to show or hide the zoom buttons. Default is "1". || No
|-
| style="width: 320px" || Width of the history panel || No
|-
| style="height: 200px" || Height of the history panel || No
|-
| style="border: 1px solid black" || Border around the history panel || No
|}

If width and height are omitted, the default values of 320px and 200px are used. History panels are automatically updated every second.

In addition, it is possible to show a floating dialog box with a history panel. That might be useful if you show a single value on a custom page, and want to give users
the possibility to show the history of that variable. Just put a button next to the value and call '''mhistory_dialog(<group>, <panel>)''' from that button like:

<span class="modbvalue" data-odb-path="/Some/Path"></span>
<button onclick="mhistory_dialog('group','panel')"><img src="icons/activity.svg"></button>

The history panel will then be opened when the user clicks the button:

[[File:History dialog.png|frame|left|Floating history dialog]]

<br clear=all>

If one wants to avoid the definition of a history panel in the ODB, a "direct variable plot" can be done with the function '''mhistory_dialog_var(<variable>)''' where <variable> has the format like the variable definition in the ODB (e.g. "System:Trigger per sec."). Such a plot has some default parameters for the timescale etc., which can be overwritten by passing a parameter object to the function such as '''mhistory_dialog_var("System:Trigger per sec.", {"Timescale": "24h"});'''

A full example of a custom page with a history panel is shown below.

<pre>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="midas.css" type="text/css">
<script src="midas.js"></script>
<script src="mhttpd.js"></script>
<script src="controls.js"></script>
<script src="mhistory.js"></script>
</head>
<body onload="mhttpd_init('history_example'); mhistory_init();">
<div id="mheader"></div>
<div id="msidenav"></div>
<div id="mmain">
<div class="mjshistory" data-group="EPICS" data-panel="Logging" style="width: 500px; height: 300px;" ></div>
</div>
</body>
</html>
</pre>

= mplot =

Custom pages may contain scatter plots, histograms and other graphics. The syntax is described on the dedicated [[Custom plots with mplot]] page.

= Dialog, popup and modal boxes =

You can spawn a dialog box to either show a message to the user, ask for input, or require confirmation of an action. You can call all these functions from your own javascript code.

== Showing a message ==

The dlgMessage, dlgAlert and dlgWait functions show a message to the user. The dialog box contains an "Ok" button that the user may click to dismiss the message.

=== dlgMessage ===

dlgMessage is the most customisable of the 3 functions. The signature is:

<pre>
dlgMessage(title, message, modal, error, callback, param)
</pre>

{| class="wikitable"
|-
! Parameter !! Type !! Meaning !! Required
|-
| title || string || Title of the dialog box || Yes
|-
| message || string (can be arbitrary HTML) || Main message content || Yes
|-
| modal || boolean || If true, will grey out the rest of the page and require the user to dismiss the alert box before they can continue interacting with the page. || No. Defaults to false
|-
| error || boolean || If true, will use a red background for the title || No. Defaults to false
|-
| callback || function || Function to be called with the user clicks the "Ok" button. The callback function will be called with just a single paramter. || No. Defaults to not calling a callback function.
|-
| param || anything || Parameter that will be passed to the `callback` function || No. Defaults to undefined.
|}

Some example invocations are:

<pre>
dlgMessage("Message title", "Message text");
dlgMessage("It's an error!", "<b>Something is wrong!!!</b>", true, true);
dlgMessage("Callback example", "Testing", true, false, my_message_cb, "some_param");

function my_message_cb(param) {
alert("Message dismissed! The param was " + param);
}
</pre>

=== dlgAlert ===

dlgAlert is a convenience function for making it easier to show a warning message to the user. The signature is:

<pre>
dlgAlert(message, callback)

// The above is equivalent to:
dlgMessage("Message", message, true, true, callback)
</pre>

=== dlgWait ===

dlgWait shows a message for a certain amount of time and then automatically closes itself. The signature is:

<pre>
dlgWait(time_in_seconds, message)
</pre>

== Asking for input ==

=== dlgQuery ===

dlgQuery asks the user to respond to a question. The dialog shows a message, an input field for the user to type in, and Ok/Cancel buttons. The user's response is sent to a callback function that you must implement yourself. The signature is:

<pre>
dlgQuery(message, value, callback, param)
</pre>

{| class="wikitable"
|-
! Parameter !! Type !! Meaning !! Required
|-
| message || string (can be arbitrary HTML) || The question to show the user || Yes
|-
| value || string || Default value to pre-populate the answer field with || Yes (but can be empty string)
|-
| callback || function || Function to be called when the user finishes with the dialog. The first parameter will be false if the user clicked the "Cancel" button, or their answer if they clicked the "Ok" button. || Yes
|-
| param || anything || Parameter that will be passed to the `callback` function as the 2nd parameter || No. Defaults to undefined.
|}

Example usage is:

<pre>
dlgQuery("Enter a value:", "my default value", my_query_cb, "some_other_param")

function my_query_cb(value, param) {
if (value === false) {
// User clicked the Cancel button
} else {
alert('Value is ' + value + ', param is ' + param);
}
}

// where 'param' can also be ommitted.
</pre>

=== dlgConfirm ===

dlgConfirm is like dlgQuery, but just shows the Ok and Cancel buttons without an extra input field. The signature is:

<pre>
dlgConfirm(message, callback, param)
</pre>

{| class="wikitable"
|-
! Parameter !! Type !! Meaning !! Required
|-
| message || string (can be arbitrary HTML) || The question to show the user || Yes
|-
| callback || function || Function to be called when the user finishes with the dialog. The first parameter will be false if the user clicked the "Cancel" button, or true if they clicked the "Ok" button. || Yes
|-
| param || anything || Parameter that will be passed to the `callback` function as the 2nd parameter || No. Defaults to undefined.
|}

Example usage is:

<pre>
dlgConfirm("Are you sure you wish to do that?", my_confirm_cb, "some_other_param")

function my_confirm_cb(value, param) {
if (value === false) {
alert("User clicked Cancel! Param was " + param);
} else {
alert("User clicked Ok! Param was " + param);
}
}

// where 'param' can also be ommitted.
</pre>

= Implementing SVGs =

Complex services or detector systems can be displayed using vector images e.g. SVGs created by Inkscape.
<pre>
<object id="svgObject" type="image/svg+xml" data="Midas_helium_example.svg"></object>
</pre>
They can be loaded for example as a background image with modb ... class object at the dedicated position.

Interactive changes of the SVG like updating a the color of a valve, or changing the size of objects depending on ODB values is explained in more detail in [[Custom Page Features]].

= Complete Example =

The following code shows an example page (contained in {{Filepath|path=resources/a_example.html}} in the MIDAS distribution) of a custom page implementing most of the new features. You activate this page by putting in the ODB:

<pre>
/Custom
Path /midas/resources
Test a_example.html
</pre>

== Code ==
The file '''a_example.html''' contains the following code:

<pre>
<!DOCTYPE html>
<html class="mcss">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="midas.css">
<script src="controls.js"></script>
<script src="midas.js"></script>
<script src="mhttpd.js"></script>
<title>Example</title>

<style>
.mtable td { padding: 10px; }
</style>
</head>

<body class="mcss" onload="mhttpd_init('Example');">


<div id="mheader"></div>
<div id="msidenav"></div>

<div id="mmain">
<table class="mtable">
<tr>
<th colspan="2" class="mtableheader">Status</th>
</tr>
<tr>
<td style="width: 200px;">
Run number:
</td>
<td>
<div class="modbvalue" data-odb-path="/Runinfo/Run number" data-odb-editable="1"></div>
</td>
</tr>
<tr>
<td>
Last run start:
</td>
<td>
<div class="modbvalue" data-odb-path="/Runinfo/Start time"></div>
</td>
</tr>
<tr>
<td>
Last run stop:
</td>
<td>
<div class="modbvalue" data-odb-path="/Runinfo/Stop time"></div>
</td>
</tr>
<tr>
<td>
Check box:
</td>
<td>

<input type="checkbox" class="modbcheckbox" data-odb-path="/Logger/Write data"></input>

<div class="modb" data-odb-path="/Logger/Write data" onchange="dlgAlert('Flag has changed');"></div>
</td>
</tr>
<tr>
<td>
Color box:
</td>
<td>

<div class="modbbox" style="width: 30px; height: 30px;" data-odb-path="/Logger/Write data"
data-color="lightgreen" data-background-color="red"></div>
</td>
</tr>
<tr>
<td>
Horizontal bars:
</td>
<td>
<div class="modbhbar" style="width:300px;height:20px;color:orange;" data-odb-path="/Runinfo/Run number"
data-max-value="10" data-print-value="1"></div><br />

<div class="mhaxis" style="width:500px;height:22px;" data-min-value="0" data-max-value="10"></div>
<div class="modbhbar" style="width: 500px; height: 18px;color:lightblue" data-odb-path="/Runinfo/Run number"
data-max-value="10"></div><br />

<div class="modbhbar" style="width: 200px; height: 10px;color:lightgreen;background-color:white"
data-odb-path="/Runinfo/Run number" data-min-value="0.1" data-max-value="10" data-log="1"></div>
<div class="mhaxis" style="width:200px;height:22px;vertical-align:top;" data-min-value="0.1"
data-max-value="10" data-line="0" data-log="1"></div>
</td>
</tr>
<tr>
<td>
Vertical bars:
</td>
<td>
<span class="mvaxis" style="width:100px;height:200px;text-align:right;" data-min-value="0" data-max-value="20"></span><span class="modbvbar"
style="width:20px;height:200px;color:yellow;" data-odb-path="/Runinfo/Run number"
data-min-value="0" data-max-value="20"></span>
<span class="modbvbar" style="width:10px;height:200px;vertical-align:top;color:red" data-odb-path="/Runinfo/Run number" data-min-value="0.1"
data-max-value="10" data-log="1"></span><span class="mvaxis" style="width:100px;height:200px;text-align:left;" data-min-value="0.1"
data-max-value="10" data-log="1"></span>
</td>
</tr>

<tr>
<td>
Thermometer:
</td>
<td>
<div class="modbthermo" style="width:30px;height:100px;" data-odb-path="/Runinfo/Run number" data-min-value="-10" data-max-value="30"
data-color="darkgreen"></div>
<div class="modbthermo" style="width:60px;height:100px;" data-odb-path="/Runinfo/Run number" data-min-value="-10" data-max-value="30"
data-color="blue" data-scale="1"
onchange="this.dataset.color=this.value > 9?'red':'blue';"></div>
<div class="modbthermo" style="width:30px;height:100px;" data-odb-path="/Runinfo/Run number" data-min-value="-10" data-max-value="30"
data-color="blue" data-background-color="white" data-value="1"></div>
</td>
</tr>

<tr>
<td>
Gauges:
</td>
<td>
<div class="modbgauge" style="width:100px;height:50px;" data-odb-path="/Runinfo/Run number" data-min-value="0" data-max-value="10"
data-color="darkgreen" data-background-color="lightgrey" ></div>
<div class="modbgauge" style="width:100px;height:65px;" data-odb-path="/Runinfo/Run number" data-min-value="0" data-max-value="10"
data-color="red" data-value="1" data-scale="1"></div>
</td>
</tr>

<tr>
<td colspan="2" style="text-align: center;">

<div style="position:relative;width:300px;margin:auto">

<img src="tank.gif"> 


<div class="modbvalue" data-odb-path="/Runinfo/Run number" data-odb-editable="1"
style="position:absolute;top:157px;left:288px;"></div>


<div class="modbvbar" style="position:absolute;top:80px;left:10px;width:104px;height:170px;"
data-odb-path="/Runinfo/Run number" data-max-value="11" data-color="green"
onchange="this.firstChild.style.backgroundColor=(this.value > 9)?'red':'green';"></div>


<div class="modbthermo" style="position:absolute;top:140px;left:20px;width:20px;height:100px;"
data-odb-path="/Runinfo/Run number" data-min-value="-10" data-max-value="30"
data-color="blue" data-value="1"></div>

</div>
</td>
</tr>

<tr>
<td colspan="2" style="text-align: center;">

<button class="modbbutton" class="mbutton" data-odb-path="/Runinfo/Run number" data-odb-value="1">Set run
number to 1
</button>
<button class="modbbutton" class="mbutton" data-odb-path="/Runinfo/Run number" data-odb-value="5">Set run
number to 5
</button>
<button class="modbbutton" class="mbutton" data-odb-path="/Runinfo/Run number" data-odb-value="10">Set run
number to 10
</button>
</td>
</tr>
</table>
</div>

</body>
</html>
</pre>

which results in the page shown in Figure 1 below:

[[File:Custom17.png|frame|left|Figure 1 Example custom page using most features]]

<div style="clear: both"></div> 

= Old custom page feature =

There are a number of deprecated custom page features, which can be seen here: [[Old Custom Page Features]].

[[Category:mhttpd Pages]] [[Category:Custom]]