Commit af13230e authored by rees_s's avatar rees_s
Browse files

Version 2.0.0

parent cf6117fa
......@@ -53,7 +53,7 @@
"@psi/ilk-wc-factory": {
"version": "2.4.0",
"resolved": "http://npm.psi.ch/@psi%2filk-wc-factory/-/ilk-wc-factory-2.4.0.tgz",
"integrity": "sha512-Vr7bjTScJSE2ir+P5nm7xBhekVObSEgWCzzzZOrzCQ8RQh5UaLJkiJx68TX7O32g4kqlWnPQcMeQ+94acV6MFA==",
"integrity": "sha512-g0ICMHuVbGAJb+tWMZLyLQ2NdaYkzw1zMweIBkFCDpFxHWsKsEP9cWf0qfyGylK2KYYhi0dDkzhsbHJXU6F/SA==",
"requires": {
"@psi/wica-js": "^1.5.1",
"json5": "^2.1.3",
......
{
"name": "gfa-ilk-panels",
"version": "1.4.0-SNAPSHOT",
"version": "2.0.0",
"description": "GFA Interlock Panels",
"main": "",
"scripts": {
......@@ -38,7 +38,7 @@
"author": "",
"license": "ISC",
"dependencies": {
"@psi/ilk-wc-factory": "^2.4.0",
"@psi/ilk-wc-factory": "2.4.0",
"@psi/wica-js": "^1.5.1",
"json5": "^2.2.0",
"lit-element": "^2.4.0",
......
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- <script src="vacuum_support.js"></script>-->
<!-- <script src="/wica/wica.js" type="module"></script>-->
<title>PROSCAN Machine Protection System</title>
<style>
* {
padding: 0;
margin: 0;
border:0;
}
html {
background-color: grey;
width: 100%;
}
body {
overflow: hidden;
margin: auto;
width: 95%;
}
.hidden {
display: none;
}
</style>
</head>
<body>
<div class="hidden">
<!-- HIPA Clock -->
<div data-wica-channel-name="XHIPA:TIME" onchange="update_svg_string_value( event, '$TIME_TEXT' )"></div>
<!-- Block 0 Section -->
<div data-wica-channel-name="PWK0:TV:2" onchange="update_svg_component_color( event, '$PWK0_VALVE_TV', 'TV_offen', 'TV_geschlossen' )"></div>
<div data-wica-channel-name="PWT0:HV:2" onchange="update_svg_component_color( event, '$PWT0_VALVE_HV_LEFT', 'HV_offen', 'HV_geschlossen' )"></div>
<div data-wica-channel-name="PWT0:HV:2" onchange="update_svg_component_color( event, '$PWT0_VALVE_HV_RIGHT', 'HV_offen', 'HV_geschlossen' )"></div>
<div data-wica-channel-name="PWT0:VV:2" onchange="update_svg_component_color( event, '$PWT0_VALVE_VV', 'VV_offen', 'VV_geschlossen' )"></div>
<div data-wica-channel-name="PWK0:HV:2" onchange="update_svg_component_color( event, '$PWK0_VALVE_HV', 'HV_offen', 'HV_geschlossen' )"></div>
<div data-wica-channel-name="PWK0:RV:2" onchange="update_svg_component_color( event, '$PWK0_VALVE_RV', 'RV_offen', 'RV_geschlossen' )"></div>
<div data-wica-channel-name="PWT0:TURBO:2" onchange="update_svg_component_color( event, '$PWT0_PUMP_TURBO', 'TURBO_eingeschaltet', 'TURBO_ausgeschaltet' )"></div>
<div data-wica-channel-name="PWK0:TURBO:2" onchange="update_svg_component_color( event, '$PWK0_PUMP_CRYO', 'TURBO_eingeschaltet', 'TURBO_ausgeschaltet' )"></div>
<div data-wica-channel-name="PWK0:VP:2" onchange="update_svg_component_color( event, '$PWK0_PUMP_VP', 'VP_ON', 'VP_OFF' )"></div>
<div data-wica-channel-name="GW0:IST:2" data-wica-channel-props='{ "prec" : 12 }' onchange="update_svg_gauge_level( event, '$GW0_GAUGE_LEVEL', true )"></div>
<div data-wica-channel-name="PWT0:IST:2" data-wica-channel-props='{ "prec" : 12 }' onchange="update_svg_gauge_level( event, '$PWT0_GAUGE_GP_LEVEL', false )"></div>
<div data-wica-channel-name="PWK0:IST:2" data-wica-channel-props='{ "prec" : 12 }' onchange="update_svg_gauge_level( event, '$PWK0_GAUGE_GK_LEVEL', true )"></div>
<div data-wica-channel-name="PWK0:IST1:2" data-wica-channel-props='{ "prec" : 12 }' onchange="update_svg_gauge_level( event, '$PWK0_GAUGE_GV_LEVEL', false )"></div>
<div data-wica-channel-name="GW0:IST:2" data-wica-channel-props='{ "prec" : 12 }' onchange="update_svg_numeric_value( event, '$GW0_GAUGE_VALUE', 1, true, true )"></div>
<div data-wica-channel-name="PWT0:IST:2" data-wica-channel-props='{ "prec" : 12 }' onchange="update_svg_numeric_value( event, '$PWT0_GAUGE_GP_VALUE', 1, true, true )"></div>
<div data-wica-channel-name="PWK0:IST:2" data-wica-channel-props='{ "prec" : 12 }' onchange="update_svg_numeric_value( event, '$PWK0_GAUGE_GK_VALUE', 1, true, true )"></div>
<div data-wica-channel-name="PWK0:IST1:2" data-wica-channel-props='{ "prec" : 12 }' onchange="update_svg_numeric_value( event, '$PWK0_GAUGE_GV_VALUE', 1, true, true )"></div>
<!-- Block 1 Section -->
<div data-wica-channel-name="VWD1:SV:2" onchange="update_svg_component_color( event, '$VWD1_VALVE', 'SV_OPEN', 'SV_CLOSED' )"></div>
<div data-wica-channel-name="PW1:HV:2" onchange="update_svg_component_color( event, '$PW1_VALVE_HV', 'HV_offen', 'HV_geschlossen' )"></div>
<div data-wica-channel-name="PW1:PV:2" onchange="update_svg_component_color( event, '$PW1_VALVE_PV', 'PV_offen', 'PV_geschlossen' )"></div>
<div data-wica-channel-name="PW1:TURBO:2" onchange="update_svg_component_color( event, '$PW1_PUMP_TURBO', 'TURBO_eingeschaltet', 'TURBO_ausgeschaltet' )"></div>
<div data-wica-channel-name="GW1:IST:2" data-wica-channel-props='{ "prec" : 12 }' onchange="update_svg_gauge_level( event, '$GW1_GAUGE_LEVEL', true )"></div>
<div data-wica-channel-name="PW1:IST:2" data-wica-channel-props='{ "prec" : 12 }' onchange="update_svg_gauge_level( event, '$PW1_GAUGE_LEVEL', false )"></div>
<div data-wica-channel-name="GW1:IST:2" data-wica-channel-props='{ "prec" : 12 }' onchange="update_svg_numeric_value( event, '$GW1_GAUGE_VALUE', 1, true, true )"></div>
<div data-wica-channel-name="PW1:IST:2" data-wica-channel-props='{ "prec" : 12 }' onchange="update_svg_numeric_value( event, '$PW1_GAUGE_VALUE', 1, true, true )"></div>
<!-- Block 2 Section -->
<div data-wica-channel-name="VWD2:SVB:2" onchange="update_svg_component_color( event, '$VWD2_VALVE_B', 'SVB_OPEN', 'SVB_CLOSED' )"></div>
<div data-wica-channel-name="VWD2:SV:2" onchange="update_svg_component_color( event, '$VWD2_VALVE', 'SV_OPEN', 'SV_CLOSED' )"></div>
<div data-wica-channel-name="PW2:HV:2" onchange="update_svg_component_color( event, '$PW2_VALVE_HV', 'HV_offen', 'HV_geschlossen' )"></div>
<div data-wica-channel-name="PW2:PV:2" onchange="update_svg_component_color( event, '$PW2_VALVE_PV', 'PV_offen', 'PV_geschlossen' )"></div>
<div data-wica-channel-name="PW2:TURBO:2" onchange="update_svg_component_color( event, '$PW2_PUMP_TURBO', 'TURBO_eingeschaltet', 'TURBO_ausgeschaltet' )"></div>
<div data-wica-channel-name="GW2:IST:2" data-wica-channel-props='{ "prec" : 12 }' onchange="update_svg_gauge_level( event, '$GW2_GAUGE_LEVEL', true )"></div>
<div data-wica-channel-name="PW2:IST:2" data-wica-channel-props='{ "prec" : 12 }' onchange="update_svg_gauge_level( event, '$PW2_GAUGE_LEVEL', false )"></div>
<div data-wica-channel-name="GW2:IST:2" data-wica-channel-props='{ "prec" : 12 }' onchange="update_svg_numeric_value( event, '$GW2_GAUGE_VALUE', 1, true, true )"></div>
<div data-wica-channel-name="PW2:IST:2" data-wica-channel-props='{ "prec" : 12 }' onchange="update_svg_numeric_value( event, '$PW2_GAUGE_VALUE', 1, true, true )"></div>
<!-- Block 3 Section -->
<div data-wica-channel-name="VWD3:SVB:2" onchange="update_svg_component_color( event, '$VWD3_VALVE_B', 'SVB_OPEN', 'SVB_CLOSED' )"></div>
<div data-wica-channel-name="VWD3:SV:2" onchange="update_svg_component_color( event, '$VWD3_VALVE', 'SV_OPEN', 'SV_CLOSED' )"></div>
<div data-wica-channel-name="PW3:HV:2" onchange="update_svg_component_color( event, '$PW3_VALVE_HV', 'HV_offen', 'HV_geschlossen' )"></div>
<div data-wica-channel-name="PW3:PV:2" onchange="update_svg_component_color( event, '$PW3_VALVE_PV', 'PV_offen', 'PV_geschlossen' )"></div>
<div data-wica-channel-name="PW3:TURBO:2" onchange="update_svg_component_color( event, '$PW3_PUMP_TURBO', 'TURBO_eingeschaltet', 'TURBO_ausgeschaltet' )"></div>
<div data-wica-channel-name="GW3:IST:2" data-wica-channel-props='{ "prec" : 12 }' onchange="update_svg_gauge_level( event, '$GW3_GAUGE_LEVEL', true )"></div>
<div data-wica-channel-name="PW3:IST:2" data-wica-channel-props='{ "prec" : 12 }' onchange="update_svg_gauge_level( event, '$PW3_GAUGE_LEVEL', false )"></div>
<div data-wica-channel-name="GW3:IST:2" data-wica-channel-props='{ "prec" : 12 }' onchange="update_svg_numeric_value( event, '$GW3_GAUGE_VALUE', 1, true, true )"></div>
<div data-wica-channel-name="PW3:IST:2" data-wica-channel-props='{ "prec" : 12 }' onchange="update_svg_numeric_value( event, '$PW3_GAUGE_VALUE', 1, true, true )"></div>
<!-- Block 4 Section -->
<div data-wica-channel-name="VWD4:SV:2" onchange="update_svg_component_color( event, '$VWD4_VALVE', 'SV_OPEN', 'SV_CLOSED' )"></div>
<div data-wica-channel-name="PW4:HV:2" onchange="update_svg_component_color( event, '$PW4_VALVE_HV', 'HV_offen', 'HV_geschlossen' )"></div>
<div data-wica-channel-name="PW4:PV:2" onchange="update_svg_component_color( event, '$PW4_VALVE_PV', 'PV_offen', 'PV_geschlossen' )"></div>
<div data-wica-channel-name="PW4:TURBO:2" onchange="update_svg_component_color( event, '$PW4_PUMP_TURBO', 'TURBO_eingeschaltet', 'TURBO_ausgeschaltet' )"></div>
<div data-wica-channel-name="GW4:IST:2" data-wica-channel-props='{ "prec" : 12 }' onchange="update_svg_gauge_level( event, '$GW4_GAUGE_LEVEL', true )"></div>
<div data-wica-channel-name="PW4:IST:2" data-wica-channel-props='{ "prec" : 12 }' onchange="update_svg_gauge_level( event, '$PW4_GAUGE_LEVEL', false )"></div>
<div data-wica-channel-name="GW4:IST:2" data-wica-channel-props='{ "prec" : 12 }' onchange="update_svg_numeric_value( event, '$GW4_GAUGE_VALUE', 1, true, true )"></div>
<div data-wica-channel-name="PW4:IST:2" data-wica-channel-props='{ "prec" : 12 }' onchange="update_svg_numeric_value( event, '$PW4_GAUGE_VALUE', 1, true, true )"></div>
</div>
<object id="svgHostElement" type="image/svg+xml" data="proscan_mps.svg?refresh"> </object>
</body>
</html>
......@@ -3,7 +3,7 @@
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title>MPS Facility Overview Tool</title>
<title>Facility Overview Tool</title>
<link rel="stylesheet" type="text/css" href="../register-view-styles.css">
<style>
......@@ -11,13 +11,16 @@
:root {
--page-background-color: darkgray;
--panel-background-color: lightgray;
--header-and-footer-background-color: rgb( 80, 80, 80 );
--header-and-footer-background-color: rgb( 0, 117, 167 );
--header-and-footer-text-color: white;
--other-text-color: rgb( 255,255,255 );
--logo-text-color: lightgray;
--logo-background-color: rgb( 0, 117, 167 );
--logo-text-color: white;
--logo-background-color: darkgray;
--select-background-color: lightgreen;
--select-background-hover-color: rgb( 161, 255, 161);
--footer-text-color: rgb( 229, 229, 299 );
--nav-menu-item-color: rgb( 80, 80, 80);
--nav-menu-hover-color: rgb( 30, 130, 229);
--module-color-RPM: salmon;
--module-color-USI: royalblue;
--module-color-SIIO1-TTL: yellow;
......@@ -46,18 +49,18 @@
html {
font-family: "Helvetica Neue",sans-serif;
background-color: var( --page-background-color );
font-size: 16px;
font-size: 14px;
height: 100%;
width: 100%;
}
body {
margin: 0.5rem;
height: 98%;
height: 99%;
overflow: hidden;
}
select {
font-size: 14px;
border-radius: 5px;
margin: 0.5rem;
background-color: var( --select-background-color );
......@@ -73,72 +76,112 @@
width: 100%;
grid-gap: 0.5%;
grid-template-columns: 2fr 2fr 3fr 10fr;
grid-template-rows: 1fr 2.5fr 20fr 1fr;
grid-template-areas: 'Banner Banner Banner Banner'
'ChooseFacility ChooseLevel ChooseView Help'
grid-template-rows: 0fr 2.5fr 20fr 0fr;
grid-template-areas: 'Header Header Header Header'
'ChooseFacility ChooseViewDetail ChooseViewType Help'
'HardwareOverview HardwareOverview HardwareOverview HardwareOverview'
'Footer Footer Footer Footer';
}
.Banner { grid-area: Banner; }
.Header { grid-area: Header; }
.ChooseFacility { grid-area: ChooseFacility; }
.ChooseLevel { grid-area: ChooseLevel; }
.ChooseView { grid-area: ChooseView; }
.ChooseViewDetail { grid-area: ChooseViewDetail; }
.ChooseViewType { grid-area: ChooseViewType; }
.Help { grid-area: Help; }
.HardwareOverview { grid-area: HardwareOverview; }
.Footer { grid-area: Footer; }
.Banner, .ChooseFacility, .ChooseLevel, .ChooseView, .Help, .HardwareOverview, .Footer {
.Header, .ChooseFacility, .ChooseViewDetail, .ChooseViewType, .Help, .HardwareOverview, .Footer {
display: flex;
background-color: var( --panel-background-color );
border-radius: 5px;
}
.Banner {
flex-direction: column;
.Header, .Footer {
flex-direction: row;
background-color: var( --header-and-footer-background-color );
color: var( --other-text-color );
justify-content: center;
color: var( --header-and-footer-text-color );
align-items: center;
padding: 0.5rem;
}
.ChooseFacility {
.ChooseFacility, .ChooseViewDetail, .ChooseViewType, .Help {
flex-direction: column;
justify-content: space-between;
background-color: var( --panel-background-color );
}
.ChooseLevel {
flex-direction: column;
justify-content: space-between;
.HardwareOverview {
flex-direction: row;
overflow-y: auto;
justify-content: space-evenly;
background-color: var( --panel-background-color );
}
.ChooseView {
flex-direction: column;
justify-content: space-between;
background-color: var( --panel-background-color );
.header-tool-icon, .header-nav-menu {
flex-grow: 0;
width:25px;
}
.Help {
flex-direction: column;
justify-content: space-between;
background-color: var( --panel-background-color );
.header-text {
flex-grow: 1;
text-align: center;
}
.HardwareOverview {
flex-direction: row;
overflow-y: auto;
justify-content: space-evenly;
background-color: var( --panel-background-color );
.footer-version, .footer-arch, .footer-text{
flex-grow: 1;
flex-basis: 0;
}
.Footer {
flex-direction: row;
background-color: var( --header-and-footer-background-color );
color: var( --footer-text-color );
justify-content: flex-end;
align-items: center;
padding: 0.5rem;
.footer-arch {
text-align: center;
}
.footer-text {
text-align: right;
}
.footer-logo {
display: inline-block;
color: var( --logo-text-color );
background-color: var( --logo-background-color );
border-radius: 20px;
line-height: 25px;
margin-right: 0.5rem;
}
.footer-link {
color: white;
text-decoration: none;
}
.footer-link:hover {
background-color: darkgray;
}
.nav-menu-popup {
display: none;
}
.nav-menu-item {
color: var( --nav-menu-item-color );
display: block;
font-weight: bold;
text-align: right;
text-decoration: none;
padding: 0.25rem 0.25rem;
}
.nav-menu-item:hover {
background-color: var( --nav-menu-hover-color );
}
.header-nav-menu:hover .nav-menu-popup {
background-color: white;
color: black;
display: block;
position:absolute;
right: 1rem;
padding: 0.25rem 0.25rem;
}
h3 {
......@@ -237,25 +280,6 @@
background-color:var( --module-color-SIIO1-TTL );
}
.footer-version {
flex-grow: 1;
}
.footer-logo {
color: var( --logo-text-color );
background-color: var( --logo-background-color );
border-radius: 17.5px;
width:35px;
line-height: 35px;
height: 35px;
text-align: center;
margin-right: 0.25rem;
}
.footer-text {
color: var( --footer-text-color );
}
.help-table {
font-size: 12px;
margin-top: 0.2rem;
......@@ -361,8 +385,21 @@
<div class="grid-container">
<div class="Banner">
<h3>Machine Protection System - Facility Overview Tool</h3>
<div class="Header">
<svg class="header-tool-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path d="M10 12a2 2 0 100-4 2 2 0 000 4z" />
<path fill-rule="evenodd" d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z" clip-rule="evenodd" />
</svg>
<h3 class="header-text">RPS Assistant - Facility Overview Tool</h3>
<div class="header-nav-menu">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
</svg>
<div class="nav-menu-popup">
<a class="nav-menu-item" href="ilkcs-command-tool.html">COMMAND TOOL</a>
<a class="nav-menu-item" href="ilkdb-explorer-tool.html">EXPLORER TOOL</a>
</div>
</div>
</div>
<div class="ChooseFacility">
......@@ -377,7 +414,7 @@
</select>
</div>
<div class="ChooseLevel">
<div class="ChooseViewDetail">
<h4><label for="information-level-selector" class="panel-label">Choose View Detail</label></h4>
<select id="information-level-selector">
<option value="low">Low</option>
......@@ -386,13 +423,13 @@
</select>
</div>
<div class="ChooseView">
<div class="ChooseViewType">
<h4><label for="view-type-selector" class="panel-label">Choose View Type</label></h4>
<select id="view-type-selector">
<option data-view-type="logical" data-module-selection-query="/modules?arrangeBy=interlockLevel">All Modules by Interlock Level</option>
<option data-view-type="logical" data-module-selection-query="/modules?arrangeBy=interlockLevel&filter=finalElement">Final Element Modules by Interlock Level</option>
<option data-view-type="logical" data-module-selection-query="/modules?arrangeBy=interlockLevel&filter=traceModule">Trace Modules by Interlock Level</option>
<option data-view-type="logical" data-module-selection-query="/modules?arrangeBy=sectionName">All Modules by Section Name</option>
<option data-view-type="logical" data-module-selection-query="/modules?arrangeBy=sectionName&filter=finalElement">Final Element Modules by Section Name</option>
<option data-view-type="logical" data-module-selection-query="/modules?arrangeBy=sectionName&filter=traceModule">Trace Modules by Section Name</option>
<option data-view-type="physical" data-module-selection-query="/modules?arrangeBy=hardwareType">All Modules by Hardware Type</option>
</select>
</div>
......@@ -416,13 +453,15 @@
</div>
<div class="Footer">
<h5 class="footer-version">1.4.0-SNAPSHOT</h5>
<h5 class="footer-logo">&uarr;LK</h5>
<h5 class="footer-text">GFA Interlock Upgrade Project</h5>
<h5 class="footer-version">2.0.0</h5>
<h5 class="footer-arch"><a class="footer-link" href="http://i.psi.ch/arPEi">ARCHITECTURE HELP</a></h5>
<h5 class="footer-text">
<span class="footer-logo">&uarr;LK</span>
<span>GFA Interlock Upgrade Project</span>
</h5>
</div>
</div>
</body>
<script type="module">
......
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
......@@ -103,9 +103,18 @@
<div class="board">
<label class="board-header">Board ID: J002004</label>
<label class="board-header">Board ID: RPM Modules</label>
<wc-event-viewer eventType="ev-rpmip-module-update" title="Module: J002004">
<rpmip-module moduleId="J3002004"></rpmip-module>
<rpmip-module moduleId="J002004"></rpmip-module>
</wc-event-viewer>
<wc-event-viewer eventType="ev-rpmip-module-update" title="Module: J002006">
<rpmip-module moduleId="J002006"></rpmip-module>
</wc-event-viewer>
<wc-event-viewer eventType="ev-rpmip-module-update" title="Module: J002037">
<rpmip-module moduleId="J002037"></rpmip-module>
</wc-event-viewer>
<wc-event-viewer eventType="ev-rpmip-module-update" title="Module: J002097">
<rpmip-module moduleId="J002097"></rpmip-module>
</wc-event-viewer>
</div>
......@@ -128,7 +137,7 @@
</wc-event-viewer>
<wc-event-viewer eventType="ev-usi-module-update" title="Module: J3003003">
<usi-module moduleId="J3003004"></usi-module>
<usi-module moduleId="J3003003"></usi-module>
</wc-event-viewer>
</div>
......
let svgDoc = null;
function init_svg_document_ref()
{
if ( svgDoc === null ) {
const svgElement = document.getElementById( "svgHostElement" );
svgDoc = svgElement.contentDocument;
}
}
function update_svg_component_color(event, svgElementId, okValue, nokValue )
{
const errColor = "orange";
const nokColor = "red";
const okColor = "limegreen";
init_svg_document_ref();
const svgElement = svgDoc.getElementById( svgElementId );
if ( svgElement == null ) {
return;
}
switch ( event.channelValueLatest.val )
{
case okValue:
svgElement.style.setProperty( "--component_fill_color", okColor );
break;
case nokValue:
svgElement.style.setProperty( "--component_fill_color", nokColor );
break;
default:
svgElement.style.setProperty( "--component_fill_color", errColor );
break;
}
}
\ No newline at end of file
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- <script src="vacuum_support.js"></script>-->
<!-- <script src="/wica/wica.js" type="module"></script>-->
<title>PROSCAN Machine Protection System</title>
<style>
* {
padding: 0;
margin: 0;
border:0;
}
html {
background-color: lightgrey;
width: 100%;
}
body {
overflow: hidden;
margin: auto;
width: 95%;
}
.hidden {
display: none;
}
</style>
</head>
<body>
<div class="hidden">
<!-- HIPA Clock -->
<div data-wica-channel-name="XHIPA:TIME" onchange="update_svg_string_value( event, '$TIME_TEXT' )"></div>
<!-- Block 0 Section -->
<div data-wica-channel-name="PWK0:TV:2" onchange="update_svg_component_color( event, '$PWK0_VALVE_TV', 'TV_offen', 'TV_geschlossen' )"></div>
<div data-wica-channel-name="PWT0:HV:2" onchange="update_svg_component_color( event, '$PWT0_VALVE_HV_LEFT', 'HV_offen', 'HV_geschlossen' )"></div>
<div data-wica-channel-name="PWT0:HV:2" onchange="update_svg_component_color( event, '$PWT0_VALVE_HV_RIGHT', 'HV_offen', 'HV_geschlossen' )"></div>
<div data-wica-channel-name="PWT0:VV:2" onchange="update_svg_component_color( event, '$PWT0_VALVE_VV', 'VV_offen', 'VV_geschlossen' )"></div>
<div data-wica-channel-name="PWK0:HV:2" onchange="update_svg_component_color( event, '$PWK0_VALVE_HV', 'HV_offen', 'HV_geschlossen' )"></div>
<div data-wica-channel-name="PWK0:RV:2" onchange="update_svg_component_color( event, '$PWK0_VALVE_RV', 'RV_offen', 'RV_geschlossen' )"></div>
<div data-wica-channel-name="PWT0:TURBO:2" onchange="update_svg_component_color( event, '$PWT0_PUMP_TURBO', 'TURBO_eingeschaltet', 'TURBO_ausgeschaltet' )"></div>
<div data-wica-channel-name="PWK0:TURBO:2" onchange="update_svg_component_color( event, '$PWK0_PUMP_CRYO', 'TURBO_eingeschaltet', 'TURBO_ausgeschaltet' )"></div>
<div data-wica-channel-name="PWK0:VP:2" onchange="update_svg_component_color( event, '$PWK0_PUMP_VP', 'VP_ON', 'VP_OFF' )"></div>
<div data-wica-channel-name="GW0:IST:2" data-wica-channel-props='{ "prec" : 12 }' onchange="update_svg_gauge_level( event, '$GW0_GAUGE_LEVEL', true )"></div>
<div data-wica-channel-name="PWT0:IST:2" data-wica-channel-props='{ "prec" : 12 }' onchange="update_svg_gauge_level( event, '$PWT0_GAUGE_GP_LEVEL', false )"></div>
<div data-wica-channel-name="PWK0:IST:2" data-wica-channel-props='{ "prec" : 12 }' onchange="update_svg_gauge_level( event, '$PWK0_GAUGE_GK_LEVEL', true )"></div>
<div data-wica-channel-name="PWK0:IST1:2" data-wica-channel-props='{ "prec" : 12 }' onchange="update_svg_gauge_level( event, '$PWK0_GAUGE_GV_LEVEL', false )"></div>
<div data-wica-channel-name="GW0:IST:2" data-wica-channel-props='{ "prec" : 12 }' onchange="update_svg_numeric_value( event, '$GW0_GAUGE_VALUE', 1, true, true )"></div>
<div data-wica-channel-name="PWT0:IST:2" data-wica-channel-props='{ "prec" : 12 }' onchange="update_svg_numeric_value( event, '$PWT0_GAUGE_GP_VALUE', 1, true, true )"></div>
<div data-wica-channel-name="PWK0:IST:2" data-wica-channel-props='{ "prec" : 12 }' onchange="update_svg_numeric_value( event, '$PWK0_GAUGE_GK_VALUE', 1, true, true )"></div>
<div data-wica-channel-name="PWK0:IST1:2" data-wica-channel-props='{ "prec" : 12 }' onchange="update_svg_numeric_value( event, '$PWK0_GAUGE_GV_VALUE', 1, true, true )"></div>
<!-- Block 1 Section -->
<div data-wica-channel-name="VWD1:SV:2" onchange="update_svg_component_color( event, '$VWD1_VALVE', 'SV_OPEN', 'SV_CLOSED' )"></div>
<div data-wica-channel-name="PW1:HV:2" onchange="update_svg_component_color( event, '$PW1_VALVE_HV', 'HV_offen', 'HV_geschlossen' )"></div>
<div data-wica-channel-name="PW1:PV:2" onchange="update_svg_component_color( event, '$PW1_VALVE_PV', 'PV_offen', 'PV_geschlossen' )"></div>
<div data-wica-channel-name="PW1:TURBO:2" onchange="update_svg_component_color( event, '$PW1_PUMP_TURBO', 'TURBO_eingeschaltet', 'TURBO_ausgeschaltet' )"></div>
<div data-wica-channel-name="GW1:IST:2" data-wica-channel-props='{ "prec" : 12 }' onchange="update_svg_gauge_level( event, '$GW1_GAUGE_LEVEL', true )"></div>
<div data-wica-channel-name="PW1:IST:2" data-wica-channel-props='{ "prec" : 12 }' onchange="update_svg_gauge_level( event, '$PW1_GAUGE_LEVEL', false )"></div>
<div data-wica-channel-name="GW1:IST:2" data-wica-channel-props='{ "prec" : 12 }' onchange="update_svg_numeric_value( event, '$GW1_GAUGE_VALUE', 1, true, true )"></div>
<div data-wica-channel-name="PW1:IST:2" data-wica-channel-props='{ "prec" : 12 }' onchange="update_svg_numeric_value( event, '$PW1_GAUGE_VALUE', 1, true, true )"></div>
<!-- Block 2 Section -->
<div data-wica-channel-name="VWD2:SVB:2" onchange="update_svg_component_color( event, '$VWD2_VALVE_B', 'SVB_OPEN', 'SVB_CLOSED' )"></div>
<div data-wica-channel-name="VWD2:SV:2" onchange="update_svg_component_color( event, '$VWD2_VALVE', 'SV_OPEN', 'SV_CLOSED' )"></div>
<div data-wica-channel-name="PW2:HV:2" onchange="update_svg_component_color( event, '$PW2_VALVE_HV', 'HV_offen', 'HV_geschlossen' )"></div>
<div data-wica-channel-name="PW2:PV:2" onchange="update_svg_component_color( event, '$PW2_VALVE_PV', 'PV_offen', 'PV_geschlossen' )"></div>
<div data-wica-channel-name="PW2:TURBO:2" onchange="update_svg_component_color( event, '$PW2_PUMP_TURBO', 'TURBO_eingeschaltet', 'TURBO_ausgeschaltet' )"></div>
<div data-wica-channel-name="GW2:IST:2" data-wica-channel-props='{ "prec" : 12 }' onchange="update_svg_gauge_level( event, '$GW2_GAUGE_LEVEL', true )"></div>
<div data-wica-channel-name="PW2:IST:2" data-wica-channel-props='{ "prec" : 12 }' onchange="update_svg_gauge_level( event, '$PW2_GAUGE_LEVEL', false )"></div>
<div data-wica-channel-name="GW2:IST:2" data-wica-channel-props='{ "prec" : 12 }' onchange="update_svg_numeric_value( event, '$GW2_GAUGE_VALUE', 1, true, true )"></div>
<div data-wica-channel-name="PW2:IST:2" data-wica-channel-props='{ "prec" : 12 }' onchange="update_svg_numeric_value( event, '$PW2_GAUGE_VALUE', 1, true, true )"></div>
<!-- Block 3 Section -->
<div data-wica-channel-name="VWD3:SVB:2" onchange="update_svg_component_color( event, '$VWD3_VALVE_B', 'SVB_OPEN', 'SVB_CLOSED' )"></div>