New Custom Pages (2017): Difference between revisions

From MidasWiki
Jump to navigation Jump to search
No edit summary
 
(24 intermediate revisions by 3 users not shown)
Line 1: Line 1:
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 =
This page has been superseded by the [[Custom Page]] Instructions.
 
For the new custom pages to work, 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 =
 
The 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 one once per second, which can be changed by passing a second argument to <code>mhttpd_init('name', interval)</code> where interval is in milliseconds. Following options are valid for this tag:
 
{| class="wikitable"
|-
! 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 below for options.
|}
 
Following format specifiers are possible together with an modbvalue tag <code>data-format="..."</code>:
 
{| class="wikitable"
|-
! 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>
 
= modbhbar =
 
The following tag:
 
<code>&gt;div name="modbhbar" style="width: 500px" data-odb-path="/Runinfo/Run number" data-max-value="10"
                data-color="lightgreen"&lt;&lt;/div&gt;</code>
 
shows a horizontal bar with a total length of 500px. Depending on the ODB value "Run number". If "Run number" is 10, then the bar is filled all the way to the right, if "Run number" is 5, the far is only filled 50% to the right.
 
= modbvbar =
 
Same as <code>modbhbar</code>, except the bar grows vertically instead of horizontally.
 
= Complete Example =
 
Following code shows an example page (contained in 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>
 
The file a_example.html contains following code:
 
<pre>
<!DOCTYPE html>
<html class="mcss">
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="midas.css">
  <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>
            Indicator:
        </td>
        <td>
            <div name="modbbar" style="width: 500px" data-odb-path="/Runinfo/Run number" data-max-value="10"
                data-color="lightgreen"></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 this page:
 
[[File:Custom17.png]]

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"