mail@pastecode.io avatar
a year ago
5.9 kB
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<link rel="stylesheet" href="lib/carel.css" type="text/css"/>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
    <meta http-equiv="Content-Language" content="en"/>
    <meta http-equiv="x-ua-compatible" content="IE=edge">
<title>AHU </title>
<meta name="description" content="Carel C.pCO Custom Webpage"/>

<style type="text/css">
div.ChartsLink {
  position: absolute; 
  display: block;
  height: 25px;
  background: #B0B0B0;
  padding: 5px;
  text-align: center;
  border-radius: 5px;
  color: white;
  font-weight: bold;

div.ChartsLink a{color:#000000; text-decoration: none}
div.ChartsLink a:hover{color:#FF7474;text-decoration: underline}
div.ChartsLink a#activelink{color:#FF7474;text-decoration: none}


    <script type="text/javascript" src="lib/jquery.js"></script>
    <script type="text/javascript" src="lib/jquery-csv.js"></script>
    <script type="text/javascript" src="lib/deviceengine.js"></script>
    <script type="text/javascript" src="lib/dynamicvars.js"></script>
    <script type="text/javascript">
        var mRefreshInterval = 1; // seconds
        var mDeviceEngine = new DeviceEngine();
        var mDeviceVariables = null;

      function toggleImage() {
        var heatersEnabled = mDeviceVariables['HeatersEnable'].value;
        var image = document.getElementById("my-icon");
        if (heatersEnabled) {
            image.style.display = "block";
        } else {
            image.style.display = "none";

//   README: CUSTOMIZATION STEP1 ***************************************************************
//           List here all your variables to attach their periodical refresh to javascript engine.
//           Variable name should be surrounded by single quotes to avoid HTML parsing errors
//           (when it contains dots, for example).
//           You can specify 
//             txt       - Caption to be printed before variable's value
//             um        - Unit of Measurements label to be printed after the variable's value
//             decimals  - how many decimals to display for variables
//             readonly  - if variable is associated with buttons, radio, etc, and you want them disabled
//             output    - map that contains value->txt pairs for enum data to "nicely" display
        var mVariablesUIModel = {
            'TempSupply':     {um : '°C', txt : 'Темп. подаване: '},
            'TempHeatexch':      {um : '°C', txt : 'Темп. ТО1: '},
            'TempHeatexch2':    {um : '°C', txt : 'Темп. ТО2: '},    
            'TempOut':       {um : '°C', txt : 'Темп. външна: '},
            'TempElHeater':    {um : '°C', txt : 'Темп. ел.нагревател: '},
            'OnOffUnitMng.KeybOnOff': {},
            'HeatersEnable':	   {},

        $(window).load(function() {

<div id="header">
<div id="topmenu"><table width="100%"><tr>
<td align="center"><a href="index2.htm">HOME</a></td>
</tr></table></div></div><!-- header -->


<!-- README: CUSTOMIZATION STEP2 ***************************************************************
     Put here the style for your variables display (font, default color, etc)
     "DynVar" divisions must use absolute positioning and must be inside "container" division
 <div id="container" style="height: 1200px; width: 1500px; background: url('imgs/cleanroom-ahu-dtl.jpg'); background-size:100%; background-repeat:no-repeat;" >

 <img src="my-icon.png" id="my-icon" >
 <div id="TempOut" class="DynVar" style="top: 40px; left: 20px;color: #000000">Outside Temp</div>
 <div id="TempElHeater" class="DynVar" style="top: 60px; left: 20px;color: #000000">El Heater Temp</div>
 <div id="TempHeatexch" class="DynVar" style="top: 80px; left: 20px;color: #000000">Heat exchanger Temp</div>
 <div id="TempHeatexch2" class="DynVar" style="top: 100px; left: 20px;color: #000000">Heat exchanger Temp</div>
 <div id="TempSupply" class="DynVar" style="top: 120px; left: 20px;color: #000000">Supply Temp</div>

 <!-- README: CUSTOMIZATION STEP2 ***************************************************************
     Put here the style for your variables display (font, default color, etc)
     "DynVar" divisions must use absolute positioning and must be inside "container" division


<!-- README: CHART EXAMPLES ***************************************************************
     Custom chart Example, how to link a page with custom realtime charting of pre-defined set of variables
 <div class="DynVar" style="top: 470px; left: 630px"><a href="customchart.htm"><img src="imgs/chart.png"></a></div>
 <div class="DynVar" style="top: 350px; left: 50px"> <a href="customchart.htm"><img src="imgs/chart.png"></a></div>

<!-- README: BUTTON EXAMPLE ***************************************************************
     ON/OFF button Example, how to create an ON/OFF button and link to application variable ("OnOffUnit")
 <div class="DynVar" style="top: 470px; left: 50px">
    <div class="onoffswitch">
    <input type="checkbox" name="HeatersEnable" class="onoffswitch-checkbox" id="myonoffswitch" onchange="sendInputValueToRemote(this);">
    <label class="onoffswitch-label" for="myonoffswitch">
        <div class="onoffswitch-inner"></div>
        <div class="onoffswitch-switch"></div>


</div><!-- container-->