window.huggingface={variables:{"SPACE_CREATOR_USER_ID":"6629298660c08c28bcf66b16"}};ml> 04 — HTML UI Builder | Siemens Configurator

④ HTML User Interface Builder

The script creates its entire user interface by writing HTML into an Internet Explorer window at runtime. This file explains how that HTML is generated.

💡 If you know HTML, this section will be very familiar! The VBScript just uses .writeln("... html ...") to output HTML. Each .writeln() call is exactly like typing that HTML into a file. HTML tags like <table>, <input>, <select> all work exactly as you'd expect.

What the UI Looks Like

Siemens Drive System Script User Interface — S53b
❓
Automatic Controller Reset
  
❓
Identify Drives
 Complete ✓
❓
Edit Machine Data
 Complete ✓
❓
Config Infeed and CUs
 In progress...
❓
Config Drives
  
... (Steps 5–10)
Help text appears here
Press '?' for help
Below the step buttons: the Machine Data table (hidden until Step 2 is clicked)
and the Drive Identification table (hidden until Step 1 is clicked).

CreateMainPage

Sub CreateMainPage
What it does:
Opens an Internet Explorer (MSIE) browser window inside Siemens Starter and positions it. Then waits until the window is fully ready before continuing. 
Sub CreateMainPage
    Set MainPage = CreateObject("InternetExplorer.Application")
    ' ↑ Opens a new Internet Explorer window. "MainPage" is how the script refers to this window.

    With MainPage
        .Top = 5    : .Left = 10    ' Position: 5px from top, 10px from left of screen
        .Height = 780 : .Width = 1000 ' Size: 780px tall, 1000px wide
        .Menubar = False    ' Hide the IE menubar (File, Edit, View...)
        .Toolbar = False    ' Hide the IE toolbar (Back, Forward, Address bar)
        .Statusbar = True   ' Show status bar at bottom (used for EchoToScreen messages)
        .Resizable = True   ' Allow engineering to resize the window
        .Navigate("about:blank")  ' Load a blank page (ready to accept our HTML)
        .Visible = True     ' Make the window visible to the user
        Do
        Loop While .readyState <> 4  ' Wait until IE is ready (readyState 4 = complete)
    End With
End Sub

HelpButton

Sub HelpButton( IndexHelp )
What it does:
Writes a <td> cell containing a small "?" button into the HTML document. When clicked, the button updates a <div id="HelpText"> area with the help text for that parameter/step.

Each case number corresponds to a different parameter. Help texts are in HTML format — they use <b>, <br>, <font> tags etc.
Case NumberHelp text for
1Machine Name
2Supply Voltage (p210)
3Max Web Speed (p2000, p1082)
4Layarm Max Linear Speed
5Unwind Layarm Max Thrust
6Rewind Layarm Max Thrust
7, 70Unwind/Rewind Layarm Max Force Setpoint
8, 9Unwind/Rewind Layarm Force Scale Factor
10Motor Shaft Direction (p1821)
11Roller Diameter (p2000, p1082)
12Gear/Pulley Ratio
13Max Axial Speed Calibration (p2000)
14Motor Type
15Encoder Type
16Motor Reference Torque (p2003)
17Max Allowed Motor Speed / Speed Limit (p1082)
18Speed Loop Gain KP (p1460)
19Speed Loop Reset Time Ti (p1462)
20–22Machine Type / PLC Type / Winder Type
100Step 0: Automatic Controller Reset (procedure steps)
101Step 1: Identify Drives (procedure steps)
102Step 2: Edit Machine Data (procedure steps)
103Step 3: Config Infeed / CUs
104Step 4: Config Drives
105Step 5: Download
106Step 6: Safety Integrated Setup
107Step 7: Motor Identification
108Step 8: Post ID Drive Config
109Step 9: RAM → ROM + Upload
110Step 10: Export File to HMI
Sub HelpButton(IndexHelp)
    With MainPage.Document
        ' Write the "?" button into a table cell.
        ' When clicked, the onclick event sets the innerHTML of div#HelpText to the help text below.
        .writeln("<td align='middle'><input Type='button' id='Help_" & IndexHelp & "' value='?' ...")

        Select Case IndexHelp
            Case 1    ' Machine Name help
                .writeln("'<b>Machine Name</b><br><font Size=3>Entered as text - CODENAME followed by contract number VYYGNNN</font>'")

            Case 2    ' Supply Voltage help
                .writeln("'<b>Supply Voltage [Units = Volts][Mnemonic = Vsup]</b><br>Setup limits: 400-480<br>Writes to p210 (Line supply voltage)'")

            Case 100   ' Step 0 procedure help
                .writeln("'<b>Step 0 - Automatic Controller Reset</b><br>Step0a - Wire check all connections. Step0b - Label each drive with Dymo...'")

            ' ... (all other cases follow the same pattern)
        End Select
    End With
End Sub

CreateMainPageDocument — The Main HTML Form

Sub CreateMainPageDocument
What it does:
This is the largest single sub in the file. It writes the complete HTML document into the Internet Explorer window. The document has several sections, each made visible or hidden dynamically as the engineer progresses through the steps.

HTML Structure Overview

<html>
  <head>
    <style>
      body { font-size:40px; background-color:lightgrey; }
      table { border-collapse: collapse; border: 2.5px solid black; }
      td, th { font-size: 16px; border: 1px solid grey; }
    </style>
    <title>Siemens Drive System, Script User Interface</title>
  </head>

  <body onload="... hide Script_Warning, show main_table ...">

    <!-- Section 1: Version title -->
    <h4>Company Start-up Script S53b with Unwind/Rewind Vector/Servo setup...</h4>

    <!-- Section 2: Warning if scripting is disabled (hidden by onload if OK) -->
    <div id="Script_Warning">Please enable active scripting</div>

    <!-- Section 3: Main step buttons table (two-column layout) -->
    <div id="main_table">
      <table>
        <col width="420px">  <!-- Left column: step buttons -->
        <col width="700px">  <!-- Right column: help text -->
        <td>
          <!-- Step buttons loop: creates one row per step (0 to NumSteps) -->
          <tr><td>[? button]</td><td>[step button]</td><td id="out_0">[status]</td></tr>
          ... (repeated for each step)
        </td>
        <td valign="top">
          <div id="HelpText" style="overflow:auto; height:220px;">Press '?' for help</div>
        </td>
      </table>
    </div>

    <!-- Section 4: Machine Data form (hidden until Step 2 is clicked) -->
    <div id="MachineData" style="display:none">
      <!-- Row 1: Machine name, Supply Voltage dropdown, Max Web Speed -->
      <input type="text" id="MachineName">
      <select id="SupplyVoltage">380V, 390V ... 480V</select>
      <input type="number" id="LineSpeed"> m/min

      <!-- Row 2: Machine type, PLC type, Winder type dropdowns -->
      <select id="MachineType">Estop method old/new</select>
      <select id="MachinePlcType">S7 Classic / TIA Portal</select>
      <select id="WinderDriveType" onchange="update(1)">Servo / Vector</select>

      <!-- Layarm section: thrust, force setpoint, scale factor -->
      <input id="UnwLayarmMaxThrust">  (Newtons)
      <input id="UnwLayarmMaxTensSetpoint">  (Newtons)
      <input id="UnwLayarmTSF" disabled>  (calculated automatically by update() JS)

      <!-- Per-drive table: one row per drive -->
      <!-- Pass 1: Line drives (LineDrive=True) -->
      <!-- Pass 2: Layarm drives (LineDrive=False) -->
      <tr id="MachineDataLine_1">
        <td>1</td>                             <!-- Drive number -->
        <input type="checkbox" id="Enable_1">  <!-- Enable config for this drive? -->
        <td>Unwind</td>                      <!-- Drive name -->
        <select id="Direction_1">CW/CCW</select>
        <input id="Diameter_1" type="number">   <!-- Roll diameter in mm -->
        <input id="GearRatio_1" type="number">  <!-- Gear/pulley ratio -->
        <input id="Speed_1" disabled>          <!-- Calculated motor speed (auto-updated by JS) -->
        <select id="MotorType_1">DriveCliq / Baumuller / 1FW6150...</select>
        <select id="Encoder_1">HTL SMC30 / SinCos SME120...</select>
        <input id="Torque_1" disabled>         <!-- Auto-filled from motor type selection -->
        <input id="MaxSpeed_1">               <!-- Optional speed limit (when checkbox ticked) -->
        <input id="Gain_1">                   <!-- Speed loop proportional gain Kp -->
        <input id="ResetTime_1">             <!-- Speed loop integral time Ti (ms) -->
      </tr>
      <!-- ... repeated for drives 2 through 13 ... -->

      <button id="Button_MD_Save">Save</button>
      <button id="Button_MD_Cancel">Cancel</button>
    </div>  <!-- end MachineData -->

    <!-- Section 5: Drive Identification table (hidden until Step 1 is clicked) -->
    <div id="DriveIdent">
      <!-- One row per detected drive (up to NumIdentList=16 rows) -->
      <tr id="DriveIdentLine_1" style="display:none">
        <td id="ID1_1">CU Name</td>                         <!-- Device (CU) name -->
        <td id="ID2_1">Drive TO Name</td>                    <!-- Technology Object name -->
        <button>- Identify -</button>                      <!-- Makes this drive flash its LED -->
        <td id="ID3_1">Drive Number</td>
        <select id="Select_1">Unwind/Draw/Drum...</select>  <!-- Assign function -->
        <td id="ID4_1">- A</td>                               <!-- Rated current (p207) -->
        <td id="ID5_1">- kW</td>                              <!-- Rated power (p307) -->
        <td id="ID6_1">- rpm</td>                             <!-- Rated speed (p311) -->
      </tr>
      <button id="Button_Ident_Accept">Accept</button>
      <button id="Button_Ident_Cancel">Cancel</button>
    </div>

    <!-- Section 6: JavaScript for live calculations -->
    <script>
      // The update() function is called every time the engineer changes a value
      function update(warning) {
        // For each drive 1-13: enable/disable fields based on the Enable checkbox
        for(i=1; i<=13; i++) {
          document.getElementById('MaxSpeed_'+i).disabled = !document.getElementById('MaxSpeedEnable_'+i).checked;
          ConfigNotChecked = !document.getElementById('Enable_'+i).checked;
          document.getElementById('Direction_'+i).disabled = ConfigNotChecked;
          // etc. for Diameter, GearRatio, Gain, ResetTime ...
        }
        // Calculate motor speed for line drives (n=1-6, 9-13)
        //   Speed [rpm] = GearRatio * LineSpeed [m/min] * 1000 / (Diameter [mm] * π)
        for(i=1; i<=6; i++) {
          document.getElementById('Speed_'+i).value = Math.round(
            GearRatio_i * LineSpeed * 1000 / (Diameter_i * 3.14159) );
        }
        // Calculate motor speed for layarm drives (n=7,8) — uses LayarmMaxSpeed not LineSpeed
        // Calculate layarm torque from thrust, diameter, gear ratio
        // Calculate Force Scale Factor = (MaxForceSetpoint / MaxThrust) * 10000
      }
    </script>
  </body>
</html>

Key JavaScript Calculations in the UI

Calculated FieldFormulaNotes
Speed_n (line drives 1-6, 9-13) GearRatio × LineSpeed × 1000 ÷ (Diameter × π) Result in RPM. Auto-updates when Diameter or GearRatio changes.
Speed_7, Speed_8 (layarms) GearRatio × LayarmMaxSpeed × 1000 ÷ (Diameter × π) LayarmMaxSpeed is fixed at 10 m/min (constant for all machines).
Torque_7 (Unwind Layarm) Diameter_7 × UnwMaxThrust ÷ (GearRatio_7 × 2 × 1000) Reference torque for the layarm drive. Units: Nm.
UnwLayarmTSF (Force Scale Factor) UnwMaxForceSetpoint × 10000 ÷ UnwMaxThrust Written to HMI LFSFn parameter. Must match between Starter and HMI.

Continue to ⑤ Event Handlers.