Difference between revisions of "New Custom Pages (2017)"

From MidasWiki
Jump to navigation Jump to search
 
(12 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
 
−
|}
 
−
 
 
−
= 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 13: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"