Custom Page Features: Difference between revisions

From MidasWiki
Jump to navigation Jump to search
No edit summary
(The midas documentation has moved to https://midas.triumf.ca/docs/)
Tag: Replaced
 
(15 intermediate revisions by 3 users not shown)
Line 1: Line 1:
{{Pagelinks}}
The midas documentation has moved. See [https://midas.triumf.ca/docs/develop/api/javascript/deprecated/ Deprecated web features] and [https://midas.triumf.ca/docs/develop/features/monitoring_and_control/custom_pages/ Custom pages: overview] for the new documentation about the older custom page features.
= 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 =
This page describes some of the special features provided for use on a user-created [[Custom Page|Custom Web Page]] running under [[mhttpd]].
 
 
= 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. It is {{Important|text=recommended that all new Custom Pages are written using these JSON-RPC functions}}. They do require 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. 
 
== 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.
 
== 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.
 
 
 
== 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]].
 
 
= 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.
<!--
Experiment Name: <odb src="/Experiment/Name">
Run Number: <odb src="/runinfo/run number" edit=1>
-->
{{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]].
 
= 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.
 
= JSON support =
[[mjsonrpc#JSON general information|JSON]] support is provided with the [[Mhttpd.js|MIDAS Javascript Library]].
 
 
 
=  Access to the MIDAS Menu buttons =
Access to the standard MIDAS Menu buttons can be provided with HTML {{HtmlTag|tag=<input...>}} tags of the form:
 
<!-- <input name="cmd" value=''<button-name>'' type="submit" > -->
{{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 :
<!--
<form name="form1" method="Get" action="/CS/MyExpt&">
<input name="cmd" value="Status" type="submit">
<input name="cmd" value="ODB" type="submit">
<input name="cmd" value="Messages" type="submit">
...
</form>
-->
{{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> }}
 
 
= 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&">}}
 
When a custom page [[#Replace Status Page by a custom page|replaces the Status Page]], a redirect must be included, or you will see the message
Invalid custom page:NULL path
The redirect statement should be of the form
{{Html|text=<input type=hidden name="redir" value="../">}}
 
 
= CustomScript Buttons =
 
[[/Customscript ODB tree#Customscript-button|CustomScript buttons]] can be provided on [[Custom Page|Custom Pages]]. These buttons are equivalent to optional [[/Script ODB tree#Script-button|script buttons]] on the [[Status Page]], and allow a particular action to be performed when the button is pressed. Customscript buttons can be set up through the [[/Customscript ODB tree]].
 
Any key <span style="color:purple; font-style:italic">/CustomScript/my button</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;">my button</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="my button">}}
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;">my button</span> will be found in the <span style="color:purple; font-style:italic">/customscript/my button</span> subdirectory.
 
After pressing a customscript-button, the [[Status Page]] will be shown, unless a redirect input tag is included to redirect back to the original custom page.
 
 
 
=    External stylesheet  =
 
A stylesheet can of course be included in an HTML page. However, it is often convenient to use an '''external stylesheet''' that can be used for several custom pages.
 
<div id="MIDAS stylesheet"></div>
;MIDAS stylesheet
: The MIDAS package provides a condensed stylesheet
:: {{Filepath|path=/home/midas/packages/midas/resources/}}{{File|name=mhttpd.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="mhttpd.css">}}
 
Alternatively, a user-defined external stylesheet can be used in a [[Custom Page]] by creating a ''custom-link'' in the [[/Custom ODB tree]] to a stylesheet file on the local disk. It is convenient to end the link name with the [[/Custom ODB tree#Keys in the /Custom tree#Keys in the /Custom tree|special character "!"]] to prevent a [[/Custom ODB tree#Custom-Button|custom-button]] appearing on the [[Status Page]].  For example, the ''custom-links'' for a custom page custom_page.html and the style sheet my_stylesheet.css are shown using the [[ODB Page]] in Figure 5 below.
 
 
[[File:Mhxcustom03_keys.jpg|left|]]
<br clear=all>
;Figure 5: Keys in /Custom ODB tree for external stylesheet and custom page html code
 
 
A {{HtmlTag|tag=<link>}} tag to link in the stylesheet is then placed in the header of the custom page html code (myexpt.html)  e.g.
{{Html|text=<link type="text/css" rel="stylesheet" href="/CS/stylesheet!" title="Stylesheet">}}
 
The resulting Demo custom page is shown in Figure 6, which can be compared with [[Custom Page#Demo Custom Page|Demo page, no stylesheet]].
[[File:Mhxcustom03.jpg|thumb|left|Figure 6: Demo Custom Page using MIDAS stylesheet]]
<br clear=all> <!-- clear wraparound after thumbnail -->
 
=  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.
 
 
=    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.
 
= 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"> <!-- JS -->
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>}}
 
 
= 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
 
= 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.
 
 
 
=  Checkboxes =
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}}
 
= Replace Status Page by a Custom page =
 
Click to enlarge thumbnail
[[File:Mhcustom_status.jpg|thumbnail|left|Figure 7: ODB /Custom/Status custom-link to a custom status page]]
<div style="clear: both"></div>  <!-- clear wraparound after thumbnail -->
 
If a custom-link with the [[/Custom ODB tree#Key names|reserved key name]] "Status"  (no "& or !") is created in the [[/Custom ODB tree]] (as shown in  Figure 7), 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.
 
To return to the default Status Page, delete the <span style="color: purple; font-style:italic;">/Custom/Status</span> key.
 
= 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.
 
 
= 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 the [[access to the MIDAS Menu buttons]] method,
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]].
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]].
 
=    Image insertion  =
;Note
:      The image file must be in '''gif''' format.
Click to enlarge thumbnail
[[File:Mhcustom_images.jpg|thumbnail|left|Figure 5: /Custom/Images ODB Tree]]
 
Image insertion into a Custom page will be illustrated using the Demo custom page shown in [[Custom Page#How to write a custom page|Figure 4]]. It is assumed that a [[/Custom ODB tree#Custom-Link|custom-link]] to the Demo custom page file ''myexpt.html'' has already been made.
 
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.
 
Create the  subtrees {{Odbpath|path=/Custom/images/myexpt.gif}} where the subtree name "myexpt.gif" is named for the imagefile 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 imagefile.  The tree structure should then look similar to Figure 5, 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"'''>}}
 
==  Inserting a history image  ==
In the special case where the image to be inserted is a History image, it 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">}}
 
 
== 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>"}}
 
== Display mouse position ==
[[File:Cursor.png|thumbnail|left|Figure 9: MEG Gas System Custom Page showing cursor position]]
<div style="clear: both"></div>  <!-- clear wraparound after thumbnail -->
 
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">  <!-- name="refimg" makes crosshairs appear -->
: <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 9).
 
==  Superimposing Labels, Bars and Fills onto an image ==
You can enhance your custom page by superimposing multiple features based on ODB variables onto
[[#Image insertion into a Custom page|an image]], 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 [[Custom Page#How to write a custom page|Figure 4]]. The file [http://ladd00.triumf.ca/~daqweb/doc/midas/doc/html/xcustom_8odb_source.html xcustom.odb]
contains the ODB keys required, including those to insert the image and superimpose the various labels, fills etc.
 
=== 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>  <!-- clear wraparound after thumbnail -->
 
=== 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 Figures 7.
<div style="clear: both"></div>  <!-- clear wraparound after thumbnail -->
 
=== 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 Figures 8.
 
<div style="clear: both"></div>  <!-- clear wraparound after thumbnail -->
 
== 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 Figure 9.
 
 
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]].
 
 
== 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 {{HtmlTag|tag=<div>}} tag. Using the ODBEdit function from the Midas JS library [[Mhttpd.js]], the custom page code would look like this:
<!-- Complicated... have to use <pre> because of <div>, then a table to keep the background colour between <pre>s -->
{|  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>
 
= 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
{{Html|text=<script src='mhttpd.js'></script>}}.
 
<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>
<p id="rn">Run Number : unknown</p> 
<p id="state">State : unknown</p>
<p id="name">Experiment name : unknown</p> 
<p id="counter">Counter: zero</p> 
<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>
 
== 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]]

Latest revision as of 22:00, 30 October 2026

The midas documentation has moved. See Deprecated web features and Custom pages: overview for the new documentation about the older custom page features.

Retrieved from "https://daq00.triumf.ca/MidasWiki/index.php?title=Custom_Page_Features&oldid=3686"