New Custom Pages (2017): Difference between revisions

From MidasWiki
Jump to navigation Jump to search
(Replaced content with " This page has been superseded by the Custom Page Instructions.")
Line 1: Line 1:
{{Pagelinks}}


= Links =
This page has been superseded by the Custom Page Instructions.
{{mhttpdpages4|[[Custom Page Features]]|[[New Custom Pages (2017)]]|[[/Custom ODB tree]]|[[Mhttpd.js|MIDAS Javascript library]]}}
 
= Introduction =
A new scheme of custom pages making use of modern HTML5 techniques has been introduced in 2017. This page describes all new elements and gives some example pages.
 
= Required Elements =
 
For the new custom pages to work, the following elements in a custom HTML page are required:
 
* Including  <code>midas.js</code>
* Including  <code>mhttpd.js</code>
* Including style sheet <code>midas.css</code>
* Setting the class of the HTML body to <code>mcss</code>
* Calling <code>mhttpd_init('name')</code> on page load where <code>name</code> is the name of the page shown on the left menu bar
* Using <code>div</code> elements with various pre-defined id's and names
 
= modb =
 
This special HTML div tag (abbreviation stands for Midas ODB) <code>&lt;div name="modb" data-odb-path="/Some/Path" onchange="func()"&gt;</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 &lt;script&gt;...&lt;/script&gt; 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.
 
= modbvalue =
 
This special HTML div tag (abbreviation stands for Midas ODB VALUE) <code>&lt;div name="modbvalue" data-odb-path="/Some/Path"&gt;</code> is now automatically replaced by the value in the ODB found at the given path. 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. The following options are valid for this tag:
 
{| class="wikitable"
|+ Table 1: List of valid options for modbvalue tag
|-
! Option !! Example !! Meaning
|-
| name || name="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
|-
| 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.
|}
 
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 !! Example !! Meaning
|-
| d || 1234 || Shows a number in decimal encoding
|-
| x || 0x4D2 || Shows a number in hexadecimal encoding
|-
| b || 10011010010b|| Shows a number in binary encoding. Options d, x, b can be combined, like <code>data-format="dxb"</code>
|-
| f&lt;x&gt; || 1.234 || Shows a floating point number with &lt;x&gt; digits after the decimal. A value of f0 shows only the integer part.
|-
| p&lt;x&gt; || 1.23 || Shows a floating point number with &lt;x&gt; significant digits of precision, independent of the decimal. For example a value of p2 can render a number to 12000 or to 0.00012
|}
 
= 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:
 
<code>&lt;button name="modbbutton" class="mbutton" data-odb-path="/Runinfo/Run number" data-odb-value="100"&gt;</code>
 
= 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:
 
<code>&lt;input type="checkbox" name="modbcheckbox" data-odb-path="/Logger/Write data"&gt;</code>
 
If the ODB value changed by this control is of type integer, its value will be set to 1 or 0.
 
= modbhbar =
 
The following tag:
 
<code>&lt;div name="modbhbar" style="width: 500px; height: 18px;" data-odb-path="/Runinfo/Run number" data-max-value="10" data-color="lightgreen" data-value="1" &gt;&lt;/div&gt;</code>
 
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
|-
| data-odb-path || ODB path of value being displayed || Yes
|-
| data-max-value || Right limit of bar range || Yes
|-
| data-min-value || Left limit of bar range || 0 if not present
|-
| data-color || Color of bar || transparent if not present
|-
| data-value || If "1", data value is shown as text overlay || No
|}
 
= modbvbar =
 
Same as <code>modbhbar</code>, except the bar grows vertically instead of horizontally.
 
= modbthermo =
 
The following tag:
 
<code>&lt;div name="modbthermo" style="width: 30px; height: 100px;" data-odb-path="/Runinfo/Run number" data-min-value="-10" data-max-value="30" data-color="blue" data-value="1" &gt;&lt;/div&gt;</code>
 
shows a vertical thermometer ranging from -10 to 30. Depending on the ODB value {{Odbpath|path=Run number}}. 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 || Yes
|-
| 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-value || If "1", data value is shown below the thermometer || No
|}
 
= modbgauge =
 
The following tag:
 
<code>&lt;div name="modbgauge" style="width: 100px; height: 50px;" data-odb-path="/Runinfo/Run number" data-min-value="0" data-max-value="10" data-color="darkgreen"&gt;&lt;/div&gt;</code>
 
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 || Yes
|-
| 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-value || If "1", data value is shown below the gauge || No
|-
| data-scale || If "1", the min and max values of the range are shown below the gauge || 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.
 
= mhistory =
 
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.
 
The following tag:
 
<code>&lt;div name="mhistory" data-group="<group>" data-panel="<panel>" style="width: 320px; height: 200px;" &gt;&lt;/div&gt;</code>
 
shows a history panel defined in the ODB under /History/Display/&lt;group&gt;/&lt;panel&gt; (replace &lt;group&gt;/&lt;panel&gt; with groups and panels from your experiment).
 
Following options are possible:
 
{| class="wikitable"
|-
| 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/&lt;group&gt;/ || 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/&lt;group&gt;/&lt;panel&gt;/Timescale is used. || 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 30 seconds.
 
NOTE: It is planned to change the static history panels to dynamic ones using JavaScript. This will allow users to interactively zoom and scroll through the history with the mouse. The syntax of the "mhistory" tag will however stay the same so it is safe to use this tag now without having to change it after dynamic panels are implemented.
 
= Changing properties of controls dynamically =
 
All custom controls can be changed dynamically (meaning depending on their value) by implementing a '''onchange''' function. This function has access to the current value and can change any of the parameters of the control. 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>
 
= 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>
</head>
 
<body class="mcss" onload="mhttpd_init('Test');">
 
<!-- header and side navigation will be filled in mhttpd_start -->
<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 name="modbvalue" data-odb-path="/Runinfo/Run number" data-odb-editable="1"></div>
        </td>
      </tr>
      <tr>
        <td>
            Last run start:
        </td>
        <td>
            <div name="modbvalue" data-odb-path="/Runinfo/Start time"></div>
        </td>
      </tr>
      <tr>
        <td>
            Last run stop:
        </td>
        <td>
            <div name="modbvalue" data-odb-path="/Runinfo/Stop time"></div>
        </td>
      </tr>
      <tr>
        <td>
            Check box:
        </td>
        <td>
            <input type="checkbox" name="modbcheckbox" data-odb-path="/Logger/Write data"></input>
        </td>
      </tr>
      <tr>
        <td>
            Color box:
        </td>
        <td>
            <div name="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 name="modbhbar" style="width: 500px; height: 18px;" data-odb-path="/Runinfo/Run number" data-max-value="10"
                data-color="lightgreen" data-value="0"></div><br /><br />
            <div name="modbhbar" style="width: 200px; height: 10px;" data-odb-path="/Runinfo/Run number" data-max-value="10"
                data-color="green" data-value="0"></div>
        </td>
      </tr>
      <tr>
        <td>
            Vertical bars:
        </td>
        <td>
            <div name="modbvbar" style="width:20px;height:100px;" data-odb-path="/Runinfo/Run number" data-min-value="4" data-max-value="20"
                data-color="lightgreen"></div>
            <div name="modbvbar" style="width:10px;height:100px;" data-odb-path="/Runinfo/Run number" data-max-value="10"
                data-color="red"></div>
        </td>
      </tr>
 
      <tr>
        <td>
            Thermometer:
        </td>
        <td>
            <div name="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 name="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 name="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 name="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 name="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 around image with "relative" position as anchor for labels and bars -->
            <div style="position:relative;width:300px;margin:auto">
 
              <img src="tank.gif"> <!-- background image of tank -->
 
              <!-- label next to valve -->
              <div name="modbvalue" data-odb-path="/Runinfo/Run number" data-odb-editable="1"
                    style="position:absolute;top:157px;left:288px;"></div>
 
              <!-- vertical bar inside tank, render red if value > 9 -->
              <div name="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>
 
              <!-- thermometer inside tank -->
              <div name="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 name="modbbutton" class="mbutton" data-odb-path="/Runinfo/Run number" data-odb-value="1">Set run
              number to 1
            </button>
            </button>
            <button name="modbbutton" class="mbutton" data-odb-path="/Runinfo/Run number" data-odb-value="5">Set run
              number to 5
            </button>
            </button>
            <button name="modbbutton" class="mbutton" data-odb-path="/Runinfo/Run number" data-odb-value="10">Set run
              number to 10
            </button>
            </button>
        </td>
      </tr>
  </table>
</div>
 
</body>
</html>
</pre>
 
which results in the page shown in Figure 1 below.
 
<center>Figure 1  Example custom page using new (2017) features</center>
 
[[File:Custom17.png]]
 
[[Category:mhttpd Pages]] [[Category:Custom]]

Revision as of 12:55, 8 February 2019

This page has been superseded by the Custom Page Instructions.

Retrieved from "https://daq00.triumf.ca/MidasWiki/index.php?title=New_Custom_Pages_(2017)&oldid=2839"