Код: Выделить всё
<body onload="init()">
<table width="100%" border="0">
<tr>
<td width="20%" >
Часы
</td>
<td width="20%" >
Температура Дом
</td>
<td width="60%" >
Температура Улица
</td>
</tr>
<tr>
<td width="20%" >
<canvas id="canvasClock1" width="201" height="201"></canvas>
</td>
<td width="20%" >
<canvas id="canvasTin" width="201" height="201"></canvas>
</td>
<td width="60%" >
<canvas id="canvasTout" width="201" height="201"></canvas>
</td>
</tr>
<tr>
<td width="20%" >
Ветер, направление
</td>
<td width="20%" >
Ветер, скорость
</td>
<td width="60%" >
Давление
</td>
</tr>
<tr>
<td width="20%" >
<canvas id="canvasWindDir1" width="201" height="201"></canvas>
</td>
<td width="20%" >
<canvas id="canvasWindSpeed" width="201" height="201"></canvas>
</td>
<td width="60%" >
<canvas id="canvasRadialPress" width="201" height="201"></canvas>
</td>
</tr>
</table>
<script>
var scroll = false;
var RadialTin;
var RadialTout;
var windDir1;
var windSpeed;
var RadialPress;
var odometer1, n = 999997.7;
function init() {
// Initialzing gauge
// Define some sections
var sections = [steelseries.Section(-15, 15, 'rgba(0, 0, 220, 0.3)'),
steelseries.Section(15, 25, 'rgba(0, 220, 0, 0.3)'),
steelseries.Section(-30, -15, 'rgba(220, 220, 0, 0.3)'),
steelseries.Section(25, 30, 'rgba(220, 220, 0, 0.3)') ],
// Define one area
areas = [steelseries.Section(30, 40, 'rgba(220, 0, 0, 0.3)'),
steelseries.Section(-40, -30, 'rgba(220, 0, 0, 0.3)'),],
sect_pr = [steelseries.Section(745, 755, 'rgba(0, 220, 0, 0.3)'),
steelseries.Section(735, 745, 'rgba(220, 220, 0, 0.3)'),
steelseries.Section(755, 775, 'rgba(220, 220, 0, 0.3)') ],
areas_pr = [steelseries.Section(700, 735, 'rgba(220, 0, 0, 0.3)'),
steelseries.Section(775, 800, 'rgba(220, 0, 0, 0.3)'),],
clock1 = new steelseries.Clock('canvasClock1', {
width: 201,
height: 201
});
windDir1 = new steelseries.WindDirection('canvasWindDir1', {
size: 201,
trendVisible: true,
lcdVisible: true
});
RadialTin = new steelseries.Radial('canvasTin', {
gaugeType: steelseries.GaugeType.TYPE4,
size: 201,
section: sections,
area: areas,
minValue:-30,
maxValue:30,
titleString: "Температура",
unitString: "Градусы",
threshold: 25,
lcdVisible: true
});
RadialTout = new steelseries.Radial('canvasTout', {
gaugeType: steelseries.GaugeType.TYPE4,
size: 201,
section: sections,
area: areas,
minValue:-40,
maxValue:40,
titleString: "Температура",
unitString: "Градусы",
threshold: 25,
lcdVisible: true
});
windSpeed = new steelseries.Radial('canvasWindSpeed', {
gaugeType: steelseries.GaugeType.TYPE2,
size: 201,
//section: sections,
//area: areas,
minValue: 0,
maxValue: 20,
titleString: "Скорость ветра",
unitString: "м/с",
threshold: 5,
lcdVisible: true
});
RadialPress = new steelseries.Radial('canvasRadialPress', {
gaugeType: steelseries.GaugeType.TYPE4,
size: 201,
section: sect_pr,
area: areas_pr,
minValue:700,
maxValue:800,
titleString: "Атм давление",
unitString: "мм рт ст",
threshold: 765,
lcdVisible: true
});
clock1.setBackgroundColor(steelseries.BackgroundColor.WHITE);
windDir1.setBackgroundColor(steelseries.BackgroundColor.WHITE);
RadialTout.setBackgroundColor(steelseries.BackgroundColor.WHITE);
RadialTin.setBackgroundColor(steelseries.BackgroundColor.WHITE);
windSpeed.setBackgroundColor(steelseries.BackgroundColor.WHITE);
RadialPress.setBackgroundColor(steelseries.BackgroundColor.WHITE);
// Start the update
setInterval(function(){ setDirValue(windDir1); }, 3000);
setInterval(function(){ live_upd("/pChart/?op=value&p=weather_my.temp", RadialTout); },6000);
setInterval(function(){ live_upd("/pChart/?op=value&p=ws.tempInside", RadialTin); },7000);
setInterval(function(){ live_upd("/pChart/?op=value&p=ws.windLatest", windSpeed);}, 1500);
setInterval(function(){ live_upd("/pChart/?op=value&p=weather_my.pressure", RadialPress); },12000);
}
function setDirValue(gauge) {
var url="/pChart/?op=value&p=ws.windBearing";
$.ajax({
url: url,
}).done(function(data) {
if (data!='') {gauge.setValueAnimatedLatest(parseFloat(data));}
});
url="/pChart/?op=value&p=ws.windavgBearing";
$.ajax({
url: url,
}).done(function(data) {
if (data!='') {gauge.setValueAnimatedAverage(parseFloat(data));}
});
}
function live_upd(url,gauge) {
$.ajax({
url: url,
}).done(function(data) {
if (data!='') {gauge.setValueAnimated(parseFloat(data));}
});
}
</script>
<script src="../SteelSeries/tween-min.js"></script>
<script src="../SteelSeries/steelseries-min.js"></script>
</body>