Spaces:

bardd
/

vab

Running

App Files Files Community

vab / 04_ui_html_builder.html

bardd

Upload 8 files

f6f4993 verified 21 days ago

raw

history blame contribute delete

28.7 kB

	<!DOCTYPE html>
	<!--
	================================================================================
	FILE: 04_ui_html_builder.html
	PURPOSE: Documents the HTML page-building code — the part that creates the
	actual form the engineer sees and uses.

	FUNCTIONS COVERED:
	- CreateMainPage (line 719) — opens the Internet Explorer window
	- HelpButton (line 730) — generates the "?" help buttons and popup text
	- CreateMainPageDocument (line 1579) — writes the entire HTML form into the window

	LINES IN ORIGINAL FILE: 719 — 2108

	WHY IS THIS SO COMPLEX?
	Because VBScript does not have a built-in UI toolkit, the script DYNAMICALLY
	GENERATES HTML by calling .writeln(...) into an Internet Explorer window.
	Each .writeln() call adds one line of HTML to the page.
	================================================================================
	-->
	<html>
	<head>
	<meta charset="UTF-8">
	<title>04 — HTML UI Builder \| Siemens Configurator</title>
	<style>
	body { font-family: Arial, sans-serif; background: #f5f5f5; color: #222; margin: 20px; }
	h1 { color: #003366; border-bottom: 3px solid #003366; padding-bottom: 6px; }
	h2 { color: #005599; margin-top: 30px; }
	h3 { color: #007733; margin-top: 20px; }
	pre.code { background: #1e1e1e; color: #d4d4d4; padding: 16px; border-radius: 6px;
	font-family: Consolas, monospace; font-size: 13px; overflow-x: auto;
	border-left: 4px solid #dcdcaa; white-space: pre-wrap; }
	pre.html { background: #1a1a2e; color: #a8d8ea; padding: 16px; border-radius: 6px;
	font-family: Consolas, monospace; font-size: 13px; overflow-x: auto;
	border-left: 4px solid #f6d365; white-space: pre-wrap; }
	.comment { color: #6a9955; }
	.keyword { color: #569cd6; }
	.string { color: #ce9178; }
	.number { color: #b5cea8; }
	.tag { color: #f6d365; }
	.attr { color: #9cdcfe; }
	.note { background: #fff8dc; border: 2px solid #f0c040; border-radius: 6px; padding: 12px; margin: 10px 0; }
	.explain { background: #e8f5e9; border: 2px solid #4caf50; border-radius: 6px; padding: 12px; margin: 10px 0; }
	.warn { background: #fff3e0; border: 2px solid #ff9800; border-radius: 6px; padding: 12px; margin: 10px 0; }
	nav { background: #003366; padding: 10px; border-radius: 6px; }
	nav a { color: #fff; text-decoration: none; margin-right: 18px; font-size: 14px; }
	nav a:hover { text-decoration: underline; }
	.sig { background: #003366; color: #fff; padding: 4px 10px; border-radius: 4px; font-family: monospace; display: inline-block; margin-bottom: 8px; }
	table { border-collapse: collapse; width: 100%; margin: 10px 0; }
	th { background: #003366; color: white; padding: 8px; }
	td { border: 1px solid #ccc; padding: 7px; }
	tr:nth-child(even) td { background: #f0f0f0; }
	.ui-mockup { border: 2px solid #888; border-radius: 6px; background: #d8d8d8; padding: 12px; margin: 12px 0; font-family: Arial, sans-serif; }
	.ui-button { background: #c0c0c0; border: 2px outset #888; padding: 4px 10px; display: inline-block; margin: 2px; cursor: pointer; }
	.ui-status { color: green; margin-left: 10px; font-size: 13px; }
	</style>
	</head>
	<body>

	<nav>
	<a href="index.html">📋 README</a>
	<a href="01_config_variables.html">① Config</a>
	<a href="02_utility_functions.html">② Utilities</a>
	<a href="03_drive_configuration.html">③ Drive Config</a>
	<a href="04_ui_html_builder.html">④ HTML Builder</a>
	<a href="05_event_handlers.html">⑤ Event Handlers</a>
	<a href="06_machine_data.html">⑥ Machine Data</a>
	</nav>

	<h1>④ HTML User Interface Builder</h1>

	<p>
	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.
	</p>

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

	<!-- ===== What the UI looks like ===== -->
	<h2>What the UI Looks Like</h2>

	<div class="ui-mockup">
	<strong>Siemens Drive System Script User Interface — S53b</strong>
	<hr style="margin:6px 0;">
	<table style="border:none; width:100%;">
	<tr>
	<td style="vertical-align:top; width:350px;">
	<table style="border:1px solid #888; background:white; width:100%;">
	<tr>
	<td style="width:20px; color:#888;">❓</td>
	<td><div class="ui-button">Automatic Controller Reset</div></td>
	<td class="ui-status"> </td>
	</tr>
	<tr>
	<td style="color:#888;">❓</td>
	<td><div class="ui-button">Identify Drives</div></td>
	<td class="ui-status">Complete ✓</td>
	</tr>
	<tr>
	<td style="color:#888;">❓</td>
	<td><div class="ui-button">Edit Machine Data</div></td>
	<td class="ui-status">Complete ✓</td>
	</tr>
	<tr>
	<td style="color:#888;">❓</td>
	<td><div class="ui-button">Config Infeed and CUs</div></td>
	<td style="color:blue; font-size:13px; margin-left:10px;">In progress...</td>
	</tr>
	<tr>
	<td style="color:#888;">❓</td>
	<td><div class="ui-button" style="color:#888;">Config Drives</div></td>
	<td> </td>
	</tr>
	<tr><td colspan="3">... (Steps 5–10)</td></tr>
	</table>
	</td>
	<td style="vertical-align:top; padding-left:20px;">
	<div style="border:1px solid #888; background:white; height:120px; padding:8px; font-size:12px;">
	<strong>Help text appears here</strong><br>
	Press '?' for help
	</div>
	</td>
	</tr>
	</table>
	<hr style="margin:6px 0;">
	Below the step buttons: the <strong>Machine Data table</strong> (hidden until Step 2 is clicked)<br>
	and the <strong>Drive Identification table</strong> (hidden until Step 1 is clicked).
	</div>

	<!-- ===== CreateMainPage ===== -->
	<h2>CreateMainPage</h2>
	<div class="sig">Sub CreateMainPage</div>

	<div class="explain">
	<strong>What it does:</strong><br>
	Opens an Internet Explorer (MSIE) browser window inside Siemens Starter and positions it.
	Then waits until the window is fully ready before continuing.
	</div>

	<pre class="code"><span class="keyword">Sub</span> CreateMainPage
	Set MainPage = CreateObject(<span class="string">"InternetExplorer.Application"</span>)
	<span class="comment">' ↑ Opens a new Internet Explorer window. "MainPage" is how the script refers to this window.</span>

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

	<!-- ===== HelpButton ===== -->
	<h2>HelpButton</h2>
	<div class="sig">Sub HelpButton( IndexHelp )</div>

	<div class="explain">
	<strong>What it does:</strong><br>
	Writes a <code><td></code> cell containing a small "?" button into the HTML document.
	When clicked, the button updates a <code><div id="HelpText"></code> area with
	the help text for that parameter/step.<br><br>
	Each case number corresponds to a different parameter. Help texts are in HTML format —
	they use <code><b></code>, <code><br></code>, <code><font></code> tags etc.
	</div>

	<table>
	<tr><th>Case Number</th><th>Help text for</th></tr>
	<tr><td>1</td><td>Machine Name</td></tr>
	<tr><td>2</td><td>Supply Voltage (p210)</td></tr>
	<tr><td>3</td><td>Max Web Speed (p2000, p1082)</td></tr>
	<tr><td>4</td><td>Layarm Max Linear Speed</td></tr>
	<tr><td>5</td><td>Unwind Layarm Max Thrust</td></tr>
	<tr><td>6</td><td>Rewind Layarm Max Thrust</td></tr>
	<tr><td>7, 70</td><td>Unwind/Rewind Layarm Max Force Setpoint</td></tr>
	<tr><td>8, 9</td><td>Unwind/Rewind Layarm Force Scale Factor</td></tr>
	<tr><td>10</td><td>Motor Shaft Direction (p1821)</td></tr>
	<tr><td>11</td><td>Roller Diameter (p2000, p1082)</td></tr>
	<tr><td>12</td><td>Gear/Pulley Ratio</td></tr>
	<tr><td>13</td><td>Max Axial Speed Calibration (p2000)</td></tr>
	<tr><td>14</td><td>Motor Type</td></tr>
	<tr><td>15</td><td>Encoder Type</td></tr>
	<tr><td>16</td><td>Motor Reference Torque (p2003)</td></tr>
	<tr><td>17</td><td>Max Allowed Motor Speed / Speed Limit (p1082)</td></tr>
	<tr><td>18</td><td>Speed Loop Gain KP (p1460)</td></tr>
	<tr><td>19</td><td>Speed Loop Reset Time Ti (p1462)</td></tr>
	<tr><td>20–22</td><td>Machine Type / PLC Type / Winder Type</td></tr>
	<tr><td>100</td><td>Step 0: Automatic Controller Reset (procedure steps)</td></tr>
	<tr><td>101</td><td>Step 1: Identify Drives (procedure steps)</td></tr>
	<tr><td>102</td><td>Step 2: Edit Machine Data (procedure steps)</td></tr>
	<tr><td>103</td><td>Step 3: Config Infeed / CUs</td></tr>
	<tr><td>104</td><td>Step 4: Config Drives</td></tr>
	<tr><td>105</td><td>Step 5: Download</td></tr>
	<tr><td>106</td><td>Step 6: Safety Integrated Setup</td></tr>
	<tr><td>107</td><td>Step 7: Motor Identification</td></tr>
	<tr><td>108</td><td>Step 8: Post ID Drive Config</td></tr>
	<tr><td>109</td><td>Step 9: RAM → ROM + Upload</td></tr>
	<tr><td>110</td><td>Step 10: Export File to HMI</td></tr>
	</table>

	<pre class="code"><span class="keyword">Sub</span> HelpButton(IndexHelp)
	<span class="keyword">With</span> MainPage.Document
	<span class="comment">' Write the "?" button into a table cell.
	' When clicked, the onclick event sets the innerHTML of div#HelpText to the help text below.</span>
	.writeln(<span class="string">"<td align='middle'><input Type='button' id='Help_"</span> & IndexHelp & <span class="string">"' value='?' ..."</span>)

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

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

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

	<span class="comment">' ... (all other cases follow the same pattern)</span>
	<span class="keyword">End Select</span>
	<span class="keyword">End With</span>
	<span class="keyword">End Sub</span>
	</pre>

	<!-- ===== CreateMainPageDocument ===== -->
	<h2>CreateMainPageDocument — The Main HTML Form</h2>
	<div class="sig">Sub CreateMainPageDocument</div>

	<div class="explain">
	<strong>What it does:</strong><br>
	This is the <em>largest single sub in the file</em>. 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.
	</div>

	<h3>HTML Structure Overview</h3>

	<pre class="html"><span class="tag"><html></span>
	<span class="tag"><head></span>
	<span class="tag"><style></span>
	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; }
	<span class="tag"></style></span>
	<span class="tag"><title></span>Siemens Drive System, Script User Interface<span class="tag"></title></span>
	<span class="tag"></head></span>

	<span class="tag"><body</span> <span class="attr">onload</span>=<span class="string">"... hide Script_Warning, show main_table ..."</span><span class="tag">></span>

	<span class="comment"><!-- Section 1: Version title --></span>
	<span class="tag"><h4></span>Company Start-up Script S53b with Unwind/Rewind Vector/Servo setup...<span class="tag"></h4></span>

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

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

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

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

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

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

	<span class="tag"><button</span> <span class="attr">id</span>=<span class="string">"Button_MD_Save"</span><span class="tag">></span>Save<span class="tag"></button></span>
	<span class="tag"><button</span> <span class="attr">id</span>=<span class="string">"Button_MD_Cancel"</span><span class="tag">></span>Cancel<span class="tag"></button></span>
	<span class="tag"></div></span> <span class="comment"><!-- end MachineData --></span>

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

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

	<h3>Key JavaScript Calculations in the UI</h3>

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

	<hr>
	<p style="color:#888; font-size:12px;">
	Continue to <a href="05_event_handlers.html">⑤ Event Handlers</a>.
	</p>

	</body>
	</html>