Serge NOEL
95 lines
4.2 KiB
HTML
95 lines
4.2 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<title>JSON Set Power Demonstration</title>
|
|
<style>
|
|
html {background-color:#eeeeee}
|
|
body {
|
|
background-color:#ccffcc;
|
|
font-family:Tahoma,Arial,Helvetica,sans-serif;
|
|
font-size:12px;
|
|
margin-left:15%;
|
|
margin-right:15%;
|
|
border:3px groove #006600;
|
|
padding:15px
|
|
}
|
|
h1 {
|
|
text-align:left;
|
|
font-size:1.5em;
|
|
font-weight:bold
|
|
}
|
|
</style>
|
|
<!-- include the jquery.jmri library and its dependencies -->
|
|
<script src="/js/jquery-2.2.4.min.js"></script>
|
|
<script src="/js/json2.js"></script>
|
|
<script src="/js/jquery.websocket.js"></script>
|
|
<script src="/js/logger.js"></script>
|
|
<script src="/js/jquery.jmri.js"></script>
|
|
<script type="text/javascript">
|
|
// set the jmri global variable to null
|
|
var jmri = null;
|
|
$(document).ready(function() {
|
|
// once the document is loaded, assign a $.JMRI object to
|
|
// the jmri variable and overload two functions:
|
|
// open() and power(state)
|
|
jmri = $.JMRI({
|
|
// call getPower() when the JMRI WebSocket connection opens
|
|
// getPower() does two things: it requests the current power
|
|
// status from JMRI and it starts the power status monitor
|
|
// on the JMRI server.
|
|
open: function() {
|
|
jmri.getPower();
|
|
},
|
|
// when the JMRI object receives a power update, call this
|
|
// function, regardless of source of update
|
|
power: function(state) {
|
|
power = state;
|
|
switch (power) {
|
|
case jmri.UNKNOWN:
|
|
$('#powerImg').prop('src', "/images/PowerGrey.png");
|
|
$('#powerImg').prop('alt', "Unknown");
|
|
$('#powerImg').prop('title', "Unknown");
|
|
break;
|
|
case jmri.POWER_ON:
|
|
$('#powerImg').prop('src', "/images/PowerGreen.png");
|
|
$('#powerImg').prop('alt', "Powered On");
|
|
$('#powerImg').prop('title', "Powered On");
|
|
break;
|
|
case jmri.POWER_OFF:
|
|
$('#powerImg').prop('src', "/images/PowerRed.png");
|
|
$('#powerImg').prop('alt', "Powered Off");
|
|
$('#powerImg').prop('title', "Powered Off");
|
|
break;
|
|
}
|
|
}
|
|
});
|
|
// trigger the initial connection to the JMRI server; this
|
|
// method call ensures the jmri.open() method is called after
|
|
// a timeout to begin using fall back methods for monitoring
|
|
// items on the JMRI server even if a WebSocket connection
|
|
// cannot be established
|
|
jmri.connect();
|
|
// make it possible to click on the power button to turn track
|
|
// power on or off without using a javascript URI
|
|
$('#powerImg').click(function(event) {
|
|
jmri.setPower((power === jmri.POWER_ON) ? jmri.POWER_OFF : jmri.POWER_ON);
|
|
});
|
|
});
|
|
</script>
|
|
|
|
</head>
|
|
<body>
|
|
<h1>JSON Set Power Demonstration</h1>
|
|
<hr />
|
|
<p>This sample page sends a request to change layout power when clicked.
|
|
This page will update the power button automatically as the track
|
|
power is changed elsewhere in JMRI.</p>
|
|
<p>The button is grey if the power state is unknown, green if powered
|
|
on, and red if powered off.</p>
|
|
<a id="powerBtn" href="#">
|
|
<img id="powerImg" alt="Unknown" src="images/PowerGrey.png">
|
|
</a>
|
|
</body>
|
|
</html>
|