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"
No comments:
Post a Comment