New Custom Pages (2017): Difference between revisions

From MidasWiki
Jump to navigation Jump to search
No edit summary
Line 1: Line 1:
{{Pagelinks}}
= Links =
{{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.
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 =
= Required Elements =


For the new custom pages to work, following elements in a custom HTML page are required:
For the new custom pages to work, the following elements in a custom HTML page are required:


* Including <code>midas.js</code>
* Including <code>midas.js</code>
* Including <code>mhttpd.js</code>
* Including <code>mhttpd.js</code>
* Including style sheet <code>midas.css</code>
* Including style sheet <code>midas.css</code>
* Setting the class of the HTML body to <code>mcss</code>
* Setting the class of the HTML body to <code>mcss</code>
Line 14: Line 20:
= modbvalue =
= 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:
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"
{| class="wikitable"
|+ Table 1: List of valid options for modbvalue tag
|-
|-
! Option !! Example !! Meaning
! Option !! Example !! Meaning
Line 26: Line 33:
| 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-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.
| data-format || data-format="f3" || Specify format of data shown. See Table 2 below for options.
|}
|}


Following format specifiers are possible together with an modbvalue tag <code>data-format="..."</code>:
Table 2 below lists the format specifiers supported with a modbvalue tag <code>data-format="..."</code>:


{| class="wikitable"
{| class="wikitable"
|+ Table 2: Format specifiers for modbvalue tag <code>data-format="..."</code>
|-
|-
! Option !! Example !! Meaning
! Option !! Example !! Meaning
Line 48: Line 56:
= modbbutton =
= 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:
This tag generates a push-button which can set a certain ODB entry to a specific value. To set the {{Odbpath|path=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>
<code>&lt;button name="modbbutton" class="mbutton" data-odb-path="/Runinfo/Run number" data-odb-value="100"&gt;</code>
Line 56: Line 64:
The following tag:
The following tag:


<code>&gt;div name="modbhbar" style="width: 500px" data-odb-path="/Runinfo/Run number" data-max-value="10"
<code>&lt;div name="modbhbar" style="width: 500px" data-odb-path="/Runinfo/Run number" data-max-value="10" data-color="lightgreen"&gt;&lt;/div&gt;</code>
                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.
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.


= modbvbar =
= modbvbar =
Line 67: Line 74:
= Complete Example =
= 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:
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>
<pre>
Line 75: Line 82:
</pre>
</pre>


The file a_example.html contains following code:
== Code ==
The file {{File|name=a_example.html}} contains the following code:


<pre>
<pre>
Line 88: Line 96:
</head>
</head>


<body class="mcss" onload="mhttpd_init('Test')">
<body class="mcss" onload="mhttpd_init('Example')">


<!-- header and side navigation will be filled in mhttpd_start -->
<!-- header and side navigation will be filled in mhttpd_start -->
Line 155: Line 163:
</pre>
</pre>


which results in this page:
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]]
[[File:Custom17.png]]
[[Category:mhttpd Pages]] [[Category:Custom]]

Revision as of 13:09, 15 November 2017


Links


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 midas.js
  • Including mhttpd.js
  • Including style sheet midas.css
  • Setting the class of the HTML body to mcss
  • Calling mhttpd_init('name') on page load where name is the name of the page shown on the left menu bar
  • Using div elements with various pre-defined id's and names

modbvalue

This special HTML div tag (abbreviation stands for Midas ODB VALUE) <div name="modbvalue" data-odb-path="/Some/Path"> 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 mhttpd_init('name', interval) where interval is in milliseconds. The following options are valid for this tag:

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 data-format="...":

Table 2: Format specifiers for modbvalue tag data-format="..."
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 data-format="dxb"
f<x> 1.234 Shows a floating point number with <x> digits after the decimal. A value of f0 shows only the integer part.
p<x> 1.23 Shows a floating point number with <x> 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:

<button name="modbbutton" class="mbutton" data-odb-path="/Runinfo/Run number" data-odb-value="100">

modbhbar

The following tag:

<div name="modbhbar" style="width: 500px" data-odb-path="/Runinfo/Run number" data-max-value="10" data-color="lightgreen"></div>

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 bar is only filled halfway.

modbvbar

Same as modbhbar, except the bar grows vertically instead of horizontally.

Complete Example

The 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: 

/Custom
  Path     /midas/resources
  Test     a_example.html

Code

The file a_example.html contains the following code: 

<!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('Example')">

<!-- 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>

which results in the page shown in Figure 1 below.

Image

The example #Code results in the image shown below:

Figure 1 Example custom page using new (2017) features

Custom17.png

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