 |
| Screen Capture of WSAdam4_0.html |
I want to emphasize how easy it is to draw that circular gauge!
First of all choose the chart that you like the most.
http://chartjs.devexpress.com/Demos/VizGallery/#index
If you have picked Circular Gauge, let's have a look at 12 samples.
http://chartjs.devexpress.com/Demos/VizGallery/#chart/circulargaugesbasicelementspaletteforranges
Now we have to download the library.
http://chartjs.devexpress.com/Download
Last updated download file is DevExpressChartJS-13.2.9.zip
Next, read the tutorial very thoroughly. After reading this you can do everything!
http://chartjs.devexpress.com/Documentation/Tutorial/Configure_Gauges?version=13_2
If you want to know more, read the API reference.
http://chartjs.devexpress.com/Documentation/ApiReference/dxCircularGauge?version=13_2
I have divided up what we have to do roughly. It could easily be done by just simply following the tutorial.
- Load the needed js library.
- Create the gauge.
- Using HTML, create space for gauge.
If all the above is done, - Send data that gauge is going to represent.
<!DOCTYPE html>
<html>
<head>
<title>ADAM-4017 4.0</title>
<!--****************************
1. Load the needed js library
The following 3 js library is included
in DevExpressChartJS-13.2.9\Lib\js
I have attached it in this posting.
****************************-->
<script type="text/javascript" src="jquery-2.0.3.min.js"></script>
<script type="text/javascript" src="globalize.min.js"></script>
<script type="text/javascript" src="dx.chartjs.js"></script>
<script>
var ws;
var poll = 0;
var intervalTimer;
// ****************************
// 2. Create the gauge
// ****************************
$(function() {
$('#gaugeContainer').dxCircularGauge({
scale: {
startValue: 0,
endValue: 10,
majorTick: { tickInterval: 1 },
minorTick: { visible: true, tickInterval: 0.1 }
},
rangeContainer: {
ranges: [{ startValue: 0, endValue: 9, color: 'royalblue' },
{ startValue: 9, endValue: 10, color: 'red'}]
},
valueIndicator: { color: 'red' },
title: {
text: 'ADAM-4017',
font: { size: 28 },
position: 'bottom-center'
}
});
});
$(document).ready(function() {
WebSocketConnect();
});
function WebSocketConnect() {
try {
ws = new WebSocket('ws://192.168.219.16:80/');
ws.onopen = function() {
status('Connected...');
ws.send("AI0");
}
ws.onclose = function() { status('Closed...'); }
ws.onerror = function(evt) { status('Error ' + evt.data); }
ws.onmessage = function(evt) {
// ****************************
// 4. Send data that gauge is going to represent.
// ****************************
$('#gaugeContainer').dxCircularGauge('instance').value(evt.data);
}
}
catch (exception) {status('Exception ' + exception);}
}
function DI_poll() {
ws.send("AI0");
intervalTimer = setTimeout(function() { DI_poll() }, 500);
}
function DI_pollEnable() {
if (!poll) {
poll++;
DI_poll();
}
}
function DI_pollDisable() {
clearTimeout(intervalTimer);
poll = 0;
}
function status(str) { $('#status').append(str); }
</script>
</head>
<body>
<p id="status">Connection Status: </p>
<button type="button" onclick="DI_pollEnable()">Input Refresh ON</button>
<button type="button" onclick="DI_pollDisable()">OFF</button>
<!--****************************
3. Using HTML create space for gauge.
****************************-->
<div id="gaugeContainer" style="height:380px"></div>
</body>
</html>
Full codes can be found in following links
- WSAdam4_0.html:
https://github.com/michelleseo/Arduino_Web/blob/master/WSAdam/WSAdam4_0.html - dx.chartjs.js:
https://github.com/michelleseo/Arduino_Web/blob/master/WSAdam/dx.chartjs.js - globalize.min.js:
https://github.com/michelleseo/Arduino_Web/blob/master/WSAdam/globalize.min.js - jquery-2.0.3.min.js:
https://github.com/michelleseo/Arduino_Web/blob/master/WSAdam/jquery-2.0.3.min.js
No comments:
Post a Comment