vytronics.hmi
Version:
Vytronics HMI server. Core components Vytronics HMI - The 100% Free, Open-Source, SCADA/HMI Initiative
287 lines (236 loc) • 10.9 kB
HTML
<html lang="en" ng-app>
<!--
/*
Copyright 2014 Charles Weissman
This file is part of "Vytroncs HMI, the 100% Free, Open-Source SCADA/HMI Initiative"
herein referred to as "Vytronics HMI".
Vytronics HMI is free software: you can redistribute it and/or modify
it under the terms of the GNU Affero General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.
Vytronics HMI is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU Affero General Public License for more details.
You should have received a copy of the GNU Affero General Public License
along with Vytronics HMI. If not, see <http://www.gnu.org/licenses/>.
*/
-->
<!--
Web interface for monitor and control of drivers and ports for diagnotics,
development and testing.
-->
<head>
<title>POINTS PANEL</title>
<!-- all desktop designs must source the following scripts. The jquery and vytronics vy-client
libraries are made available to any content loaded into HMI iframes and is used as well
for the general pluming implementing the web-based HMI. This particular html file does not
use any iframes though.
-->
<!-- external open source resourced -->
<link rel="stylesheet" type="text/css" href="/external/css/jquery.mobile.min.css"/>
<link rel="stylesheet" type="text/css" href="/external/css/jquery.dataTables.css"/>
<link rel="stylesheet" href="/external/css/smoothness/jquery-ui.custom.min.css">
<script src="/external/script/jquery.min.js"></script>
<script src="/external/script/jquery.mobile.min.js"></script>
<script src="/external/script/jquery-ui.min.js"></script>
<script src="/external/script/jquery.dataTables.min.js"></script>
<script src="/socket.io/socket.io.js"></script>
<script src="/script/vy-desktop.js"></script>
<script src="/script/vy-client.js"></script>
<!-- styles unique to this page -->
<style>
.mainPanel {
width: 480px;
}
</style>
<!-- Styles for JqueryUI -->
<style>
body { font-size: 62.5%; }
label, input { display:block; }
input.text { margin-bottom:12px; width:95%; padding: .4em; }
fieldset { padding:0; border:0; margin-top:25px; }
h1 { font-size: 1.2em; margin: .6em 0; }
div#users-contain { width: 350px; margin: 20px 0; }
div#users-contain table { margin: 1em 0; border-collapse: collapse; width: 100%; }
div#users-contain table td, div#users-contain table th { border: 1px solid #eee; padding: .6em 10px; text-align: left; }
.ui-dialog .ui-state-error { padding: .3em; }
.validateTips { border: 1px solid transparent; padding: 0.3em; }
</style>
<!-- scripts for jqueryui dialogs -->
<script>
$(function() {
var tagid = $('#tagid'),
value = $( '#value' );
$( "#write-form" ).dialog({
autoOpen: false,
height: 250,
width: 250,
modal: true,
buttons: {
Write: function() {
var dialog = $(this);
vyhmi.app_call('write_tag_request', {tagid:tagid.val(), value:value.val()}, function(data,err){
dialog.dialog("close");
});
},
Apply: function() {
vyhmi.app_call('write_tag_request', {tagid:tagid.val(), value:value.val()}, function(data,err){
});
},
Cancel: function() {
$( this ).dialog( "close" );
}
},
close: function() {
//cleanup?
},
open: function() {
//Init fields based on data set when opened
tagid.val($(this).data('tagid'));
value.val($(this).data('value'));
}
});
});
</script>
<script>
//Insturment tabbed displays
$(function() {
$( "#tabs" ).tabs();
});
function build_points_table(div){
$(div).empty(); //Clear the container out
//Query server for points and build table
vyhmi.app_call('query_tags', {tagid_regex:'.*', props: ['value_info']}, function(data,err){
if(err) {
console.log('query_tags error:' + err.message);
return;
}
var table = $('<table class="display" id="points_table"/>').append(
$("<thead/>").append(
$("<tr/>").append(
$("<td>").text("POINT ID"),
$("<td>").text("VALUE"))),
$("<tbody>").append(
function() {
var rows = [];
data.forEach( function(tag_info){
//Create a row for each tag
var row = ($("<tr>").append(
$("<td>").text(tag_info.tagid),
function(){
var td = $("<td>").text('---');
//Subscribe to tag
td.on('click', function() {
$('#write-form')
.data('tagid', tag_info.tagid)
.data('value',td.text())
.dialog('open');
});
vyhmi.create_tagsub(tag_info.tagid, function(tag){
var value = tag.value;
//See if there are any value formatting to do
var value_info = tag_info.value_info;
if (value_info) {
if ( (value_info.type === 'analog') && (value_info.num_digits) ){
value = value.toFixed(value_info.num_digits);
}
}
td.text(value);
});
return td;
}()));
rows.push(row);
});
return rows;
}())
);
$(div).append(table);
$("#points_table").DataTable(); //Make it pretty using dataTables.js
});
}
function build_drivers_table(div){
$(div).empty(); //Clear the container out
//Query server for points and build table
vyhmi.app_call('query_driver_info', {}, function(data,err){
if(err) {
console.log('query_driver_info error:' + err.message);
return;
}
var table = $('<table class="display" id="drivers_table"/>').append(
$("<thead/>").append(
$("<tr/>").append(
$("<td>").text("DRIVER ID"),
$("<td>").text("URI"),
$("<td>").text("START/STOP")
)),
$("<tbody>").append(
function() {
var rows = [];
data.forEach( function(driverInfo){
//Create a row for each driver
var row = ($("<tr>").append(
$("<td>").text(driverInfo.id),
$("<td>").text(driverInfo.uri),
function(){
var td = $("<td>").text('---');
//Subscribe to started tag
var tagid = 'sys.driver.' + driverInfo.id + '.started';
vyhmi.create_tagsub(tagid, function(tag){
td.text(tag.value);
});
return td;
}()));
rows.push(row);
});
return rows;
}())
);
$(div).append(table);
$("#drivers_table").DataTable(); //Make it pretty using dataTables.js
});
}
function drawTables(){
//Build a table for points
build_points_table('#pointPanel');
build_drivers_table('#driverPanel');
}
/*
On document ready listen for connection status
*/
$(document).ready( function() {
vyhmi.socket.on('connect', function (){
drawTables();
});
vyhmi.socket.on('disconnect', function (){
//Unsubscribe from all tags
vyhmi.unsubscribeAllTags();
});
});
</script>
</head>
<body>
<!--hidden form instrumented by JQueryUI script. Pops up when user clicks on point value-->
<div id="write-form" title="WRITE TAG VALUE" style="background-color:white;">
<form>
<fieldset>
<label for="tagid">TAG ID</label>
<input type="text" name="tagid" id="tagid" value="" class="text ui-widget-content ui-corner-all">
<label for="value">VALUE</label>
<input type="text" name="value" id="value" value="" class="text ui-widget-content ui-corner-all">
</fieldset>
</form>
</div>
<div id="tabs" class="mainPanel">
<ul>
<li><a href="#pointPanel">Point Panel</a></li>
<li><a href="#driverPanel">DriverPanel</a></li>
</ul>
<div id="pointPanel">
</div>
<div id="driverPanel">
</div>
</div>
</body>
</html>