New Custom Pages (2017): Difference between revisions

From MidasWiki
Jump to navigation Jump to search
No edit summary
 
(11 intermediate revisions by 2 users not shown)
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
 
= 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;button 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 thermometer background || Transparent if not present
|-
| data-value || If "1", data value is shown below the thermometer || No
|-
| data-scale || If "1", the min and max values 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.
 
= 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 {{File|name=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>
            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>
        </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-value="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.
 
== Image ==
The example [[#Code]] results in the image shown below:
;<center>Figure 1  Example custom page using new (2017) features</center>
 
[[File:Custom17.png]]
 
[[Category:mhttpd Pages]] [[Category:Custom]]

Latest revision as of 12:56, 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=2840"