BL-NET online diagram

Example

The Bootloader BL-NET provides the option on an online visualisation where a graphical illustration of the current system conditions can be displayed in a web browser via LAN or the internet.

Since TAPPS 1.26 the HTML file for online Scheme of the BL-NET is created in a new format, which allows automatic updating of the measured values​​, without having to load the graphics again. The new online scheme requires a boot loader BL-NET version 1.40!

This online diagram consists of a graphics file (e.g. hydraulics circuit diagram) and the associated HTML file where the display parameters are defined.

The graphics can be created with any graphics or drawing program. Should no graphics program be available, the graphic can also be created in TAPPS and saved by copying and pasting into Microsoft ® Paint in the required formats, with the following points should be noted:

1. The graphic must be provided in gif and bmp format.
2. The GIF file must be transferred to the BL-NET.
3. The BMP file is used for graphical creation of the HTML file with TAPPS.
4. File size must not exceed the maximum size of 196 kilobytes! To keep the response time short, the graphics file should be kept as small as possible in general.

With the components of the <online diagram> library, the HTML file for the online diagram can be graphically created in TAPPS.

1. Drag and drop the frame representing the display area from the library into the drawing.
2. Import the chart (e.g. hydraulics circuit diagram) of the online diagram into the drawing as a 24-bit bitmap (*.bmp): File → Import…
   If the chart is in a different file format (e.g. *.gif), the required bitmap can be created using a graphics program (e.g. Microsoft® Paint).
3. The chart must be aligned on the zero point (top left corner) of the frame, as the display parameters would otherwise be displayed in the wrong place for the online diagram.
   Similarly, the size of the chart must not be changed in TAPPS.
4. Adjust the size of the frame (display area), which is normally identical to the chart, accordingly.
5. Where required, import placeholders for the display parameters (temperatures, output conditions) from library, then position and configure them.
   To this end, placeholders for text aligned left or right are available.
   A placeholder has 2 lines which can be edited by double clicking.

• Preview line: The top line is used as a preview and reflects the position and the appearance of the display parameter.
  The following text attributes of this line are imported into the HTML file:
  • Font
  • Font size (4…20)
  • Font style (bold, italic)
  • Font colour
  • Background colour

The entered text of this line has no influence on the online diagram and serves as a preview only which facilitates positioning the placeholder.

• Command line: The bottom line is only visible in TAPPS and serves to define the actually displayed text. The syntax of the command line is as follows:

Umlauts, spaces and special characters (°, ß, ²) are automatically converted into the respective HTML code by TAPPS when creating the HTML file. The “&“, “<“ and “>“ characters must not be used.
The definitions of the display values are replaced in the online diagram by the Bootloader BL-NET by respective, current measurements. Information on the possible display values and their definitions can be found in the operating instructions of the Bootloader BL-NET.
A definition of a display value always starts with the “$“ character which must therefore never be used in the static text.
Several display values can be defined in the command line of a placeholder. An exclusively static text can also be placed in the online diagram by using a placeholder.

1. The HTML file for the online diagram can be created from the graphical illustration: File → Export to Translator → Online Diagram…

Depending on the device type of the controller to be acquired, the following parameters are available for visualisation:

The following parameters are available for visualisation:
The selection of the controller whose data is to be displayed (can be set by selecting a controllerdata frame) and

Example of a definition of a display value from the CAN data logging:
$c4Ae
c4: Es werden Daten jenes Reglers, für den der Datenrahmen 4 erstellt wurde, angezeigt.
A: Analoger Wert des 2. Datensatzes
e: Sensor 15 (siehe „Hexadezimaltabelle“)

In addition to the values obtained from data logging over DL or CAN buses, the values at the network inputs of the BL-NET can also be displayed. The network inputs can be defined using a browser in the „CAN bus/Analog resp. Digital inputs“ menu (see the relevant chapter).

NOTE: The inputs and outputs are numbered from zero in hexadecimal (see hexadecimal table)!
Consequently, for example when data logging over the DL bus, the definition „e0“ results for input 1 and for input 16 the definition „ef“.

hexadecimal table:

Beispiele:
$d1ef … DL bus 1, input 16 of the controller, display without unit
$D2a0 … DL bus 2, output 1 of the controller, display with unit
$n1a1 … Network, analog network input 2 of the Bootloader, display without unit
$c1da … CAN data logging, controller of the frame 1, digital value (output) 11 of the data frame 1, display without unit
$C2A1 … CAN data logging, controller of the frame 2, analog value (sensor) 1 of the data frame 2, display with unit

If necessary, this factory setting can be retrospectively altered directly in the HTML file using a text editor as follows:
These changes may take place only at the place designated for it!

In the factory, the graphic file is loaded by BL-NET. In this case, the variable 'GraphicFile' must be defined as „GRAFIK.gif“!

var GraphicFile = "GRAFIK.gif";  // graphic file path

In order to, for example, reduce the graphic loading time, this can be loaded from a web server rather than from the boot loader. To do this, the variable 'GraphicFile' must be allocated to the corresponding graphic file path.
For example: var GraphicFile = "http://doku.uvr1611.at/grafik.gif"; // graphic file path

to change the title of the page the following line must be changed:

var Title ="Online diagram";  // Title text in the browser window

The text between the quotation marks can be adjusted.
z.B:

var Title ="Factory settings TA";  // Title text in the browser window

The variable 'AutoRefreshTime' can be used to define the interval (in seconds), after which the display values in the browser window are automatically updated. An interval time smaller than 30 seconds is not permitted and means that automatic display updating will not take place!

//### interval [sec] for an automatic update of the display values: ###
//### < "30" = no automatic update ###
//--------------------------------------------------
var AutoRefreshTime = 60;

If automatic updating of the display values is not required, this function can be deactivated by setting the 'AutoRefreshTime' variable less than or equal to 30.

Examples:

var AutoRefreshTime = 10;  // no automatic update of the display values
var AutoRefreshTime = 60;  // automatic update every 30 seconds
var AutoRefreshTime = 180; // automatic update every 180 seconds
var AutoRefreshTime = 3*30;// automatic update every 90 seconds

The variable 'RefreshLink' can be used to define the display text of a link, which is displayed beneath the graphic and which enables manual updating of the display values by a mouse click.

//### link text for manual updating of the display values: ###
//### "" = no link for manual updating: ###
//--------------------------------------------------
var RefreshLink ="Update values";

If the link for manual updating of the display values is not required, then it can be hidden by deleting the link text.

var RefreshLink ="";

• As first line

  <!—2.0-->

  has to be inserted.

• Between the lines

  </style>

  and

  </head>

  the Javascript has to be inserted.

  <script type="text/javascript">
  <!--
  var Title ="Online diagram";  // Title text in the browser window
  var GraphicFile = "GRAFIK.gif";  // path of the grafik
  var Width = "1020px";
  var Height = "760px";
   
  //### interval [sec] for an automatic update of the display values: ###
  //### < "30" = no automatic update ###
  //--------------------------------------------------
  var AutoRefreshTime = 60;
   
  //### link text for manual updating of the display values: ###
  //### "" = no link for manual updating: ###
  //--------------------------------------------------
  var RefreshLink ="Update values";
  -->
  </script>

  In this area adaptations has been done such as the graphic path, if the graphic is not stored in the BL-NET and the height and width of the image. Optionally, the refresh time, the manual updating link text and the title has to bee changed.

• The line

  <img src="GRAFIK.gif" alt="GRAFIK.gif" border="0"/>

  has to be deleted from the old diagram.