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

SimpleHMI by Html Page - Part1

The article was created to show how create simple control based on Web Page. Fenix can share data from Modbus or S7 devices in WebBrowsers. During project creation you can include standard web template to project with all important libraries. Template is used by Fenix Server which work from one side like WebSerwer ans second side like Modbus or S7 client. We will prepare simple example how control light and look on temperature in intelligent home system.

1. Create project name "SimpleHMI"

- Open Fenix

- Click on ^File->New^, <Add Project> window will appear. Type in [Project Name] "SimpleHMI"

Important is to that during creation option [Apply Http Templates] must be checked. Fenix will create structure below.

2. Change "index.html" file

On beginning open "index.html" from ^HttpServer->Index.html->Open^ and delete all data between <style></style> and all data between <body></body>. Code will be look like picture below:

<!doctype html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
   <title>Fenix Modbus</title>   
   <script language="javascript" type="text/javascript" src="jquery-2.2.0/jquery-2.2.0.min.js"></script>
   <script language="javascript" type="text/javascript" src="flot-0.8.3/jquery.flot.js"></script>
   <script language="javascript" type="text/javascript" src="flot-0.8.3/jquery.flot.time.js"></script>
   <script language="javascript" type="text/javascript" src="flot-0.8.3/jquery.flot.tooltip.js"></script>
   <script language="javascript" type="text/javascript" src="jquery-ui-1.11.4/jquery-ui.js"></script>  
   <script language="javascript" type="text/javascript" src="fenixlib.js"></script>
   <script language="javascript" type="text/javascript" src="script.js"></script>    
     
   <style>
   </style>

</head> 
<body>  
</body>
 
</html>

3. Add mimic like background

We were creted "bgd.jpg" this will be main mimic. We will add it like bacground in "index.html". The size of the "bgd.jpg" will be 600x600px. To add this file to project:

- Click on ^HtmlServer->Add Files->Add Existing File^

- Select right *.jpg file.

- Add code below to index.html

<!doctype html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
   <title>Fenix Modbus</title>   
   <script language="javascript" type="text/javascript" src="jquery-2.2.0/jquery-2.2.0.min.js"></script>
   <script language="javascript" type="text/javascript" src="flot-0.8.3/jquery.flot.js"></script>
   <script language="javascript" type="text/javascript" src="flot-0.8.3/jquery.flot.time.js"></script>
   <script language="javascript" type="text/javascript" src="flot-0.8.3/jquery.flot.tooltip.js"></script>
   <script language="javascript" type="text/javascript" src="jquery-ui-1.11.4/jquery-ui.js"></script>  
   <script language="javascript" type="text/javascript" src="fenixlib.js"></script>
   <script language="javascript" type="text/javascript" src="script.js"></script>         
   <style>
    body {
  height: 600px;
  height: 600px;
        background-image: url("bgd.jpg");
        background-repeat: no-repeat;
 }
   </style>
</head> 
<body>  
</body>
 
</html>

4. Testing page in Fenix

To test work progress:

- Click on ^HttpServer->Simulation^ 

- <HttpServer> will start

- Go to WebBrowser and type in URL "localhost" or "127.0.0.1"

To be continued

S7 Siemens to Modbus TCP/IP

In this article I will try explain how to push data from Siemens S7 plc to Modbus device. For this purpose I will use Fenix software. To carry data between drivers we will use C# script.

We will have two remote devices:
Siemens PLC [S7Plc] -> 192.168.142.134:102
Modbus Device [ModPlc] -> 192.168.142.134:502

Issue is take data from S7Plc and push to ModPlc. Assigning addresses are shown below:
Var1 DB1.DBD0  -> HoldingRegister [40001]
Var2 DB1.DBD4  -> HoldingRegister [40003]
Var3 DB1.DBD8  -> HoldingRegister [40005]
Var4 DB1.DBD12 -> HoldingRegister [40007]

Now we will create project in Fenix. Start fenix and create new project. Picture below:

Next step is to add two connections to project:

Then we will create device and tags for S7 communication:

We will do the same for Modbus communication:

When we finished you will get something similar like picture below:

When project is created we will set all important parameters. We will create script. Script will be invoked every 50 ms. We must set time default timer for script. 

1. Click on Scripts on Solution.

2. Go to Properties. Click on filed Timers

3. CustomerTimer window will appear. Change default time from 1500 to 50 ms the click OK.

Now add Timer to script to do this:

1. Click on Script.cs on Solution

2. Go to Properties and from ComboBox 03 Script choose Timer.

Now we can write script. Open script in editor and add code:

Code:

Script have 3 methotds. Start() is invoking during start of driver. Stop() is invoking during driver stop. Cycle() is invoking by Timer every 50ms. Script have access to all Tags in project and for that you can use functions:

SetTag("TagName", Value);

GetTag("TagName");

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()
    {
        var Var0 = GetTag("S7Var0");
        SetTag("ModVar0",Var0);

        var Var1 = GetTag("S7Var1");
        SetTag("ModVar1",Var1);
           
        var Var2 = GetTag("S7Var2");
        SetTag("ModVar1",Var1);
  
        var Var3 = GetTag("S7Var3");
        SetTag("ModVar3",Var3);
    }
}

And Start communication:

1. Click on Solution on Example1

2. Click on TableView

3. Click to start all communication drivers.