256 lines
14 KiB
HTML
256 lines
14 KiB
HTML
<!DOCTYPE HTML>
|
|
<html>
|
|
|
|
<head>
|
|
<title>V6 Web Config Client</title>
|
|
<link rel="icon" type="image/png" sizes="16x16" href="static\images\favicon-16x16.png"></link>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
|
|
<!-- Custom CSS -->
|
|
<link rel="stylesheet" href="CSS/normalize.css"></link>
|
|
<link rel="stylesheet" href="CSS/styles.css"></link>
|
|
<link rel="stylesheet" href="CSS/pd.css"></link>
|
|
<link rel="stylesheet" href="jsTree/themes/default/style.min.css" /></link>
|
|
<script src="jQuery/jquery-1.12.1.min.js"></script>
|
|
<script src="jsTree/jstree.min.js"></script>
|
|
<!--jsEditor-->
|
|
<link href="dist/jsoneditor.css" rel="stylesheet" type="text/css">
|
|
</script>
|
|
<script src="dist/jsoneditor.js"></script>
|
|
</head>
|
|
<!-- End of Head-->
|
|
|
|
<body>
|
|
<div class="box">
|
|
<div id="header" class="row header">
|
|
<a href="https://www.kepware.com/"><img class="logo" src="static\images\Kepware-Logo-800px.png" class="logo" alt="Kepware Logo" width="150px;"></a>
|
|
<!--<a href=""><img class="logo" src="static\images\PD.png" class="logo" alt="PD Logo" width="150px;"></a>-->
|
|
<label id="exampleslogantop" float="center">Example Code Example Code Example Code Example Code Example Code Example Code Example Code</label>
|
|
<div id="statsBar">you
|
|
<ul>
|
|
<li id="connectedUserTxt"></li>
|
|
<label class="hideAfterConnect" for="userName"><strong>User: </strong></label>
|
|
<input class="hideAfterConnect" id="userName" type="text" value="Administrator"></input>
|
|
<label class="hideAfterConnect" for="userPass"><strong>PW: </strong></label>
|
|
<input class="hideAfterConnect" id="userPass" type="password"></input>
|
|
<label class="hideAfterConnect" for="server"><strong>IP and Port: </strong></label>
|
|
<input class="hideAfterConnect" id="server" type="text" value="127.0.0.1:57412"></input>
|
|
<!--Change your default IP here-->
|
|
<input id="updateConfig" type="button" value="Connect" class="inputButton "></input>
|
|
<li id="connectedTo"><strong>Connected to:</strong>Not Connected</li>
|
|
<li id="channelCount"><strong>No. of Channels:</strong>Not Connected</li>
|
|
<li id="deviceCount"><strong>No. of Devices:</strong>Not Connected</li>
|
|
<li><strong>Debug Mode: <input id="debugState" type="checkbox"></strong></li>
|
|
<button id="readProjObj" class="inputButton">Refresh Project Tree</button>
|
|
</ul>
|
|
</div>
|
|
<!-- End Stats bar-->
|
|
<div id="mainNav">
|
|
<li><a class="active" id="v6Configurator">Configurator</a></li>
|
|
<li><a id="useCase1">Subroutine Demo</a></li>
|
|
<li><a id="iotGateway">IoT Gateway</a></li>
|
|
</div>
|
|
<!--End of Main Nav-->
|
|
</div>
|
|
<!--End Header-->
|
|
|
|
|
|
<div id="maincontainer" class="row content">
|
|
<div class="card" id="deviceList">
|
|
<div class="supporting-text">
|
|
<h4>Tree View</h4>
|
|
<div>Select a Channel or Device object in order to view and modify its properties.</div>
|
|
<div id="deviceTree">Click "Connect" above to load the project tree.</div>
|
|
<button id="deleteChannel" class="inputButton">Delete Channel</button>
|
|
<button id="deleteDevice" class="inputButton">Delete Device</button>
|
|
</div>
|
|
<!-- End of Supporting text for device List-->
|
|
</div>
|
|
<!-- End deviceList Card-->
|
|
|
|
<div class="card" id="configurator">
|
|
<div class="supporting-text">
|
|
<!--Nav Menu-->
|
|
<h4>Asset Creation and Modification</h4>
|
|
<ul id="assetCreationNav">
|
|
<li><a class="active" id="displayChannelPanel">Channel</a></li>
|
|
<li><a id="displayDevicePanel">Device</a></li>
|
|
<li><a id="displayTagPanel">Tag</a></li>
|
|
</ul>
|
|
<div id="channelPanel">
|
|
<p>Enter the Channel to create or the Channel properties you wish to modify.</p>
|
|
<label for="channel">Channel Name</label>
|
|
<input name="channel" id="channel" type="text" value="Channel1" maxlength="256" size="20">
|
|
|
|
<label for="channelType">Channel Type</label>
|
|
<select id="channelType">
|
|
<option value="ABB Totalflow">ABB Totalflow</option>
|
|
<option value="Allen-Bradley ControlLogix Ethernet">Allen-Bradley ControlLogix Ethernet</option>
|
|
<option value="Simulator">Simulator</option>
|
|
<option value="Modbus TCP/IP Ethernet">Modbus TCP/IP Ethernet</option>
|
|
<option value="Siemens TCP/IP Ethernet">Siemens TCP/IP Ethernet</option>
|
|
</select>
|
|
|
|
<input id="createCh" type="button" value="Create" class="inputButton"></input>
|
|
<input id="modCh" type="button" value="Modify" class="inputButton"></input>
|
|
</div>
|
|
<!--End of channelPanel-->
|
|
<div id="devicePanel">
|
|
<p>Enter the Device to create or the Device properties you wish to modify.</p>
|
|
<label for="device">Device Name</label>
|
|
<input name="device" id="device" type="text" value="Device1" maxlength="256" size="20">
|
|
<label for="deviceId">Device ID</label>
|
|
<input name="deviceId" id="deviceId" type="text" maxlength="256" size="20" value="<255.255.255.255>.255">
|
|
<input id="createDevice" type="button" value="Create" class="inputButton"></input>
|
|
<input id="modDev" type="button" value="Modify" class="inputButton"></input>
|
|
</div>
|
|
<!--End of devicePanel-->
|
|
<div id="tagPanel">
|
|
<!--<p>Enter the Tag to create or the Tag properties you wish to modify.</p>-->
|
|
<label for="tag">Tag Name</label>
|
|
<input name="tag" id="tag" type="text" maxlength="256" size="20" value="Tag1"></input>
|
|
<label for="tagAddr">Tag Address</label>
|
|
<input name="tagAddr" id="tagAddr" type="text" maxlength="256" size="20" value="400001"></input>
|
|
<label for="tagType">Tag Data Type</label>
|
|
<input name="tagType" id="tagType" type="text" maxlength="256" size="20" value="-1"></input>
|
|
<input id="createTag" type="button" value="Create" class="inputButton"></input>
|
|
<input id="modTag" type="button" value="Modify" class="inputButton"></input>
|
|
<!--no way currently to mod tags-->
|
|
</div>
|
|
<!--End of tagPanel-->
|
|
</div>
|
|
<!--End of Supporting Text for configurator-->
|
|
</div>
|
|
<!--End of configurator-->
|
|
|
|
<div class="card" id="useCase1Panel">
|
|
<div class="supporting-text">
|
|
<h4>Predefined Routines</h4>
|
|
<p>This Button creates a bunch of simulator and Modbus channels, complete with devices and Tags</p>
|
|
<button id="delAll" class="inputButton">Delete All</button>
|
|
<p>This Button creates a bunch of simulator and Modbus channels, complete with devices and Tags</p>
|
|
<button id="demoProj" class="inputButton">Demo Project</button>
|
|
<p>Create Templates for various sites or machines.</p>
|
|
<button id="templateA" class="inputButton">A</button>
|
|
<button id="templateB" class="inputButton">B</button>
|
|
</div>
|
|
</div>
|
|
<!--End useCase1Panel-->
|
|
|
|
<div class="card" id="iotGatewayPanel">
|
|
<div class="supporting-text">
|
|
<h4>IoT Gateway</h4>
|
|
<p>Name of REST Server </p>
|
|
<input id='restServerName' value='Rest_Server'></input>
|
|
<input id='restServerPort' value='39320'></input>
|
|
<button id="createRESTServer" class="inputButton">Create REST Server</button>
|
|
<button id="deleteRESTServer" class="inputButton">Delete REST Server</button>
|
|
<button id="readTag" class="inputButton">Read Tag</button>
|
|
<input id="readNonStop" type="checkbox">
|
|
<p id="tagValue">Select the Tag and click read Tag to see the value</p>
|
|
</div>
|
|
</div>
|
|
<!--End iotGatewayPanel-->
|
|
|
|
<div class="card" id="jsonObject">
|
|
<div class="supporting-text" id="dropdownContainer">
|
|
<h4>Data Viewer</h4>
|
|
<!--<p>Import a file to create Objects in the Configuration. Modify the JSON in the text editor to make object changes.</p>-->
|
|
<div id="jsonConfigNav">
|
|
<li><a class="active" id="displayText">Text input</a></li>
|
|
<li><a id="displayTree">Tree View</a></li>
|
|
<li><a id="displayTagList">Tag List</a></li>
|
|
</div>
|
|
<div id="textJsonEditor">
|
|
<textarea id="textJsonInput"></textarea>
|
|
</div>
|
|
<!--End of Text Input-->
|
|
<div id="jsonEditorContainer">
|
|
<div id="jsoneditor"></div>
|
|
</div>
|
|
<!--End of jsonEditor-->
|
|
<div id="tagListContainer">
|
|
<table id="tagReadResults">
|
|
<tr align="left">
|
|
<th>Tag Name</th>
|
|
<th>Address</th>
|
|
</tr>
|
|
<tr align="left">
|
|
<td></td>
|
|
<td></td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
<p id="jsonButtons">
|
|
<div class="drop-down-container">
|
|
<div class="dropdown">
|
|
<button class="inputButton dropbtn">Import JSON Template</button>
|
|
<div class="dropdown-content">
|
|
<a href="#Modbus.txt" src="Modbus.txt" id="importMdbsJSON">Modbus</a>
|
|
<a href="#ABTemplate.txt" src="ABTemplate.txt" id="importABJSON">AB ControlLogix</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<button id="createAll" class="inputButton">Create All Objects in Template</button>
|
|
<button id="deleteTag" class="inputButton">Delete Selected Tag</button>
|
|
<button id="addtoIoTGateway" class="inputButton">Add to IoTGateway</button>
|
|
</p>
|
|
<!--End of json Configurator inputs-->
|
|
</div>
|
|
</div>
|
|
<!--End jsonObject-->
|
|
</div>
|
|
<!-- End Main Container-->
|
|
<div class="row footer">
|
|
<div id="results">
|
|
<div class="supporting-text" id="resultsTable">
|
|
<h4>Custom Client Diagnostics</h4>
|
|
<table id="resultsRow">
|
|
<tr align="left">
|
|
<th>Time</th>
|
|
<th>Event</th>
|
|
<th>HTTP Status</th>
|
|
</tr>
|
|
<tr align="left">
|
|
<td></td>
|
|
<td></td>
|
|
<td></td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
<div class="supporting-text" id="eventsTable">
|
|
<h4>Custom Event Diagnostics</h4>
|
|
<table id="eventsRow">
|
|
<tr align="left">
|
|
<th>Server Time</th>
|
|
<th>Event Type</th>
|
|
<th>Message</th>
|
|
</tr>
|
|
<tr align="left">
|
|
<td></td>
|
|
<td></td>
|
|
<td></td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
<!--End Results-->
|
|
<div id="copyright">
|
|
<p id="examplesloganbottom">Demo Purpose Only Demo Purpose Only Demo Purpose Only Demo Purpose</p>
|
|
<p id="copyrightquotes">© 2016 Kepware Technologies. All Rights Reserved. Best viewed with Firefox. Not supported on IE/Edge.</p>
|
|
</div>
|
|
<!--End Copyright-->
|
|
</div>
|
|
|
|
|
|
</div>
|
|
<!--End of Box-->
|
|
</body>
|
|
|
|
<script src="JS/globalVariables.js"></script>
|
|
<script src="JS/v6CommonAPI.js"></script>
|
|
<script src="JS/v6_1CommonAPI.js"></script>
|
|
<script src="JS/engine.js"></script>
|
|
<script src="JS/main.js"></script>
|
|
<script src="JS/useCase1.js"></script>
|
|
|
|
</html> |