SimpleHMI by Html Page - Part2

On previous post we were show how create custom view for our project. Now its time to add view measurement point. I would like to use Modbus simulator and use it like container for variable and communication. Logic will be implement on Fenix by C# script.

5. Simulation Logic

We will use 7 variables and and script for logic simulation. Picture below showing created Tags. Connection is now created for simulation Mod_RSim.

Listing below "Script.cs" its added to Scripts Node

using System;
using ProjectDataLib;
using System.Windows.Forms;
using System.Collections.Generic;
using System.Linq;
using System.IO;

public class Script : ScriptModel
{
    public override void Start()
    {
    }
    public override void Stop()
    {      
    }
    public override void Cycle()
    {     
     //When Sw1 is "1" Turn on Light1 if not turn off 
     if((bool)GetTag("Sw1"))
      SetTag("Light1",true);
        else
      SetTag("Light1",false);
                           
     //When Sw2 is "1" Turn on Light2 if not turn off 
     if((bool)GetTag("Sw2"))
      SetTag("Light2",true);
        else
      SetTag("Light2",false);
                                
     //When Sw3 is "1" Turn on Light3 if not turn off 
     if((bool)GetTag("Sw3"))
      SetTag("Light3",true);
        else
      SetTag("Light3",false);
               
        //Temperature1 simulation. Random values between 0 - 20
        Random rd = new Random();
        float temp1 = (float)(rd.NextDouble() * 20.0);
        SetTag("Temperature1",temp1);          
    }
}

6. Add variable to Html

Code with description:

   <script>
    $(document).ready(function fcElementProp(){ 
              
    $('#temp1').css({
       position: 'absolute',
       top: '200px',
       left: '290px'
   });
   
   $('#L1').css({
       position: 'absolute',
       top: '180px',
       left: '440px',
       background: 'green',
       width: '40px',
       height: '40px'
   });
   
   $('#L2').css({
       position: 'absolute',
       top: '220px',
       left: '140px',
       background: 'green',
       width: '40px',
       height: '40px'
   });
   
   $('#L3').css({
       position: 'absolute',
       top: '410px',
       left: '170px',
       background: 'green',
       width: '40px',
       height: '40px'
   });
   
   //Sw1 click handler
   $( "#sw1" ).click(function() {
   
   //invoke only if Tags isnt empty
          if (!$.isEmptyObject(Tags))
    {
       if(Tags["Sw1"].value)
       {
          $.post("Tag/Sw1/Value/0",function(data){ 
             alert("Data Changed");
             });
              }
              else
              {
                $.post("Tag/Sw1/Value/1",function(data){
                  alert("Data Changed");
             });
              }
    }   
   });
   
      //Sw2 click handler
   $( "#sw2" ).click(function() {
   
     //invoke only if Tags isnt empty
          if (!$.isEmptyObject(Tags))
    {
       if(Tags["Sw2"].value)
       {
          $.post("Tag/Sw2/Value/0",function(data){ 
             alert("Data Changed");
             });
              }
              else
              {
                $.post("Tag/Sw2/Value/1",function(data){
                  alert("Data Changed");
             });
              }
    }   
   });
   
      //Sw3 click handler
   $( "#sw3" ).click(function() {
   
     //invoke only if Tags isnt empty
          if (!$.isEmptyObject(Tags))
    {
       if(Tags["Sw3"].value)
       {
          $.post("Tag/Sw3/Value/0",function(data){ 
             alert("Data Changed");
             });
              }
              else
              {
                $.post("Tag/Sw3/Value/1",function(data){
                  alert("Data Changed");
             });
              }
    }   
   });
   
    });
         
   $(document).ready(function fcMainCycle(){ 
   
       //Wait if buffor is empty
       if ($.isEmptyObject(Tags))
         $("#temp1").html("---");
       else 
       {
         $("#temp1").html(Tags["Temperature1"].formattedValue + " ℃");
         
         //Light1
         if(Tags["Light1"].value)
           $('#L1 ').css("background","red");
         else
           $('#L1 ').css("background","green");
           
         //Light2
         if(Tags["Light2"].value)
           $('#L2 ').css("background","red");
         else
           $('#L2 ').css("background","green");
           
          //Light3 
         if(Tags["Light3"].value)
           $('#L3 ').css("background","red");
         else
           $('#L3 ').css("background","green");    
       }
     
     //Cycle every 1000ms
     setTimeout(fcMainCycle,500); 
    });
   </script>

7. Browser View

Website allow you to use 3 switches SW1,2,3 to turn on or turn off Lights L1,2,3, Additionally random temperature is showing.

Link for download

SimpleHMI - Link to download file