266 lines
11 KiB
HTML
266 lines
11 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Machine Description Form</title>
|
|
<style>
|
|
body {
|
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
|
background-color: #f4f4f9;
|
|
color: #333;
|
|
line-height: 1.6;
|
|
margin: 0;
|
|
padding: 20px;
|
|
}
|
|
.container {
|
|
max-width: 800px;
|
|
margin: auto;
|
|
background: #fff;
|
|
padding: 25px;
|
|
border-radius: 10px;
|
|
box-shadow: 0 0 20px rgba(0,0,0,0.1);
|
|
}
|
|
h2 {
|
|
color: #2649B2;
|
|
text-align: center;
|
|
margin-bottom: 25px;
|
|
}
|
|
fieldset {
|
|
border: 1px solid #D4D9F0;
|
|
border-radius: 8px;
|
|
padding: 20px;
|
|
margin-bottom: 20px;
|
|
}
|
|
legend {
|
|
font-weight: bold;
|
|
color: #4A74F3;
|
|
padding: 0 10px;
|
|
font-size: 1.2em;
|
|
}
|
|
.form-group {
|
|
margin-bottom: 18px;
|
|
}
|
|
label {
|
|
display: block;
|
|
margin-bottom: 6px;
|
|
font-weight: bold;
|
|
}
|
|
input[type="text"],
|
|
input[type="number"],
|
|
input[type="email"],
|
|
input[type="date"],
|
|
select {
|
|
width: 100%;
|
|
padding: 10px;
|
|
border: 1px solid #ccc;
|
|
border-radius: 5px;
|
|
box-sizing: border-box;
|
|
}
|
|
input[readonly] {
|
|
background-color: #e9ecef;
|
|
cursor: not-allowed;
|
|
}
|
|
.radio-group label, .checkbox-group label {
|
|
font-weight: normal;
|
|
margin-right: 15px;
|
|
}
|
|
input[type="radio"], input[type="checkbox"] {
|
|
margin-right: 5px;
|
|
}
|
|
small {
|
|
display: block;
|
|
margin-top: 5px;
|
|
color: #6c757d;
|
|
}
|
|
input[type="submit"] {
|
|
background-color: #4A74F3;
|
|
color: white;
|
|
padding: 12px 20px;
|
|
border: none;
|
|
border-radius: 5px;
|
|
cursor: pointer;
|
|
font-size: 18px;
|
|
font-weight: bold;
|
|
width: 100%;
|
|
margin-top: 20px;
|
|
transition: background-color 0.3s;
|
|
}
|
|
input[type="submit"]:hover {
|
|
background-color: #2649B2;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<script src="renderer.js"></script>
|
|
<div class="container">
|
|
<h2>Machine Description</h2>
|
|
<form id="machine-form">
|
|
|
|
<fieldset>
|
|
<legend>Machine Details</legend>
|
|
<div class="form-group">
|
|
<label for="machineType">MachineType</label>
|
|
<select id="machineType" name="machineType">
|
|
<option value="Unspecified">Unspecified</option>
|
|
<option value="Accumulation">Accumulation</option>
|
|
<option value="BulkFeedingSystem">BulkFeedingSystem</option>
|
|
<option value="Bundler">Bundler</option>
|
|
<option value="Capper">Capper</option>
|
|
<option value="Cartoner">Cartoner</option>
|
|
<option value="CasePacker">CasePacker</option>
|
|
<option value="CaseSealer">CaseSealer</option>
|
|
<option value="CheckWeigher">CheckWeigher</option>
|
|
<option value="DePalletizer">DePalletizer</option>
|
|
<option value="Feeder">Feeder</option>
|
|
<option value="Filler">Filler</option>
|
|
<option value="FillerCapper">FillerCapper</option>
|
|
<option value="FillSeal">FillSeal</option>
|
|
<option value="FormFillSeal">FormFillSeal</option>
|
|
<option value="Labeller">Labeller</option>
|
|
<option value="LineManagementController">LineManagementController</option>
|
|
<option value="OverWrapper">OverWrapper</option>
|
|
<option value="Palletizer">Palletizer</option>
|
|
<option value="PickAndPlace">PickAndPlace</option>
|
|
<option value="ShrinkWrapper">ShrinkWrapper</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="vendor">Vendor</label>
|
|
<input type="text" id="vendor" name="vendor">
|
|
<small>Company name of the machine vendor. Avoid whitespaces or special characters.</small>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="model">Model</label>
|
|
<input type="text" id="model" name="model">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="serialNo">SerialNo</label>
|
|
<input type="text" id="serialNo" name="serialNo">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="buildYear">Build Year</label>
|
|
<input type="number" id="buildYear" name="buildYear" placeholder="Ex: 2024" min="1980" max="2100">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="browseName">BrowseName (OPC UA)</label>
|
|
<input type="text" id="browseName" name="browseName">
|
|
<small>This is the name of the machine which appears in the OPC UA server. Recommendation: MachineType + Numeric Suffix (e.g., Labeller1).</small>
|
|
</div>
|
|
</fieldset>
|
|
|
|
<fieldset>
|
|
<legend>Publication & Versioning</legend>
|
|
<div class="form-group">
|
|
<label for="publicationDate">Publication Date</label>
|
|
<input type="date" id="publicationDate" name="publicationDate">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="authorEmail">Author Email</label>
|
|
<input type="email" id="authorEmail" name="authorEmail" placeholder="firstname.lastname@loreal.com">
|
|
<small>Email of the person to contact about this spreadsheet.</small>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="version">Version</label>
|
|
<input type="text" id="version" name="version" placeholder="Ex: 1.0.0">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="outputFile">Output File</label>
|
|
<input type="text" id="outputFile" name="outputFile" value="Automatically generated (YAML)" readonly>
|
|
<small>This field is automatically generated and cannot be edited.</small>
|
|
</div>
|
|
</fieldset>
|
|
|
|
<fieldset>
|
|
<legend>Alarm Configuration</legend>
|
|
<div class="form-group">
|
|
<label for="alarmRepresentation">AlarmRepresentation</label>
|
|
<select id="alarmRepresentation" name="alarmRepresentation">
|
|
<option value="DistinctAlarms">DistinctAlarms (Each alarm is a separate OPC UA variable)</option>
|
|
<option value="SingleAlarmsArray">SingleAlarmsArray (Alarms are packed in a Boolean array)</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="alarmBehavior">AlarmBehavior</label>
|
|
<select id="alarmBehavior" name="alarmBehavior">
|
|
<option value="STATIC">STATIC (Static allocation, recommended)</option>
|
|
<option value="DYNAMIC">DYNAMIC (Alarms are allocated in a dynamic table)</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="alarmCount">AlarmCount</label>
|
|
<input type="number" id="alarmCount" name="alarmCount" min="0">
|
|
<small>Used as the size of the array for DYNAMIC alarm behavior.</small>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="messagesLanguage">MessagesLanguage</label>
|
|
<select id="messagesLanguage" name="messagesLanguage">
|
|
<option value="EN">EN (English)</option>
|
|
<option value="FR">FR (Français)</option>
|
|
<option value="DE">DE (Deutsch)</option>
|
|
<option value="ES">ES (Español)</option>
|
|
<option value="IT">IT (Italiano)</option>
|
|
</select>
|
|
</div>
|
|
</fieldset>
|
|
|
|
<fieldset>
|
|
<legend>Features & ADD-INs (Boolean Variables)</legend>
|
|
<div class="form-group">
|
|
<label>StopReason Generation</label>
|
|
<div class="radio-group">
|
|
<input type="radio" id="stopReasonYes" name="stopReason" value="Yes">
|
|
<label for="stopReasonYes">Yes</label>
|
|
<input type="radio" id="stopReasonNo" name="stopReason" value="No" checked>
|
|
<label for="stopReasonNo">No</label>
|
|
</div>
|
|
<small>Generate the special variable for the root cause of the machine stop (recommended if supported by the PLC).</small>
|
|
</div>
|
|
<div class="form-group">
|
|
<label>AGV ADDIN</label>
|
|
<div class="radio-group">
|
|
<input type="radio" id="agvYes" name="agvAddin" value="Yes">
|
|
<label for="agvYes">Yes</label>
|
|
<input type="radio" id="agvNo" name="agvAddin" value="No" checked>
|
|
<label for="agvNo">No</label>
|
|
</div>
|
|
<small>Applies to Palletizers which are interfaced with AGVs.</small>
|
|
</div>
|
|
<div class="form-group">
|
|
<label>TrackAdvance ADDIN</label>
|
|
<div class="radio-group">
|
|
<input type="radio" id="trackYes" name="trackAddin" value="Yes">
|
|
<label for="trackYes">Yes</label>
|
|
<input type="radio" id="trackNo" name="trackAddin" value="No" checked>
|
|
<label for="trackNo">No</label>
|
|
</div>
|
|
<small>Applies to filling machines which are supporting a cleaning in place (CIP) process.</small>
|
|
</div>
|
|
<div class="form-group">
|
|
<label>ACPower ADDIN</label>
|
|
<div class="radio-group">
|
|
<input type="radio" id="acYes" name="acpowerAddin" value="Yes">
|
|
<label for="acYes">Yes</label>
|
|
<input type="radio" id="acNo" name="acpowerAddin" value="No" checked>
|
|
<label for="acNo">No</label>
|
|
</div>
|
|
<small>Provides information about electrical consumption.</small>
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Utilities ADDIN</label>
|
|
<div class="radio-group">
|
|
<input type="radio" id="utilYes" name="utilities" value="Yes">
|
|
<label for="utilYes">Yes</label>
|
|
<input type="radio" id="utilNo" name="utilities" value="No" checked>
|
|
<label for="utilNo">No</label>
|
|
</div>
|
|
<small>Used for machines which consume or produce different sources of energy.</small>
|
|
</div>
|
|
</fieldset>
|
|
|
|
<input type="submit" value="Validate and Submit Description">
|
|
</form>
|
|
</div>
|
|
|
|
</body>
|
|
</html> |