Hallo
Ich fand diesen script toll und wollte irgendwie (schön
), diese werte dann in meiner mediola fernbedienung darstellen.
Da es, bei mediola, nur eine werte anzeige gibt, das dann immer für einen datenpunkt, habe ich im internet gesucht, eine schöne analoge
anzeige, die möglichst viel darstellen könnte.
Die basis zum suchen waren wetter daten und darstellung.
Hier bin ich fundig geworden
http://wiki.sandaysoft.com/a/SteelSeries_Gauges
Da dieses an mehr an wetterstationen zugeschnitten ist, habe ich eine möglichkeit gesucht, wie ich meine werte,
in diesen hübschen anzeigern, angezeigt bekomme.
Dann bin ich auf diese seite gestossen, die fast meinen anforderungen passte (scripts usw)
http://www.eskofier.de/projekte/modellb ... darstellen
Hier wird auch eine (pywws) usb-wetterstation (auf raspberry pi), benutzt. Da ich keine habe, musste ich erstmal, die scripte etwas an die, der ccu anpassen.
Noch ein problem war die erstellung, aller werte (temperatur, luftfeuchte und die minimalen und maximalen werte) im json format.
Wieder gesucht, um mit php json daten aus arrays in eine datei zu schreibe. Habe alles gefunden und möchte denen,
die mittels mediola oder dashui, euere werte darstellen wollen (vorausgesetzt die gauge anzeigen gefallen euch
),
erklären-beschreiben.
Vorausetzung dafür ist eine pi, oder ein anderer server, wo apache läuft.
Zuerst erstellen wir ein verzeichnis, im www ordner der pi, z.b. /gauge_temp
Ich werde alle dateien bereitstellen, die hierfür nötig sind (von mir etwas angepasst), aber zuerst ein screenshot,
um zu sehen wie das dann aussieht :
Dazu muss ich sagen dass man die dinger sehr schön und leicht anpassen kann,(farblich,wertlich usw...) diese anzeigen gibt es in allen
möglichen varianten, (z.b. eine schöne uhr für mediola oder dashui) am besten könnt ihr euch hier ansehen:
http://binicki.de/gauge/demoExtras.html
http://binicki.de/gauge/demoLcdSections.html
http://binicki.de/gauge/demoLightBulb.html
http://binicki.de/gauge/demoLinear.html
http://binicki.de/gauge/demoRadial.html
http://binicki.de/gauge/demoStopWatch.html
http://binicki.de/gauge/demoTrafficLight.html
Wer alles selber machen will, kann die gaugen von hier holen:
https://github.com/HanSolo/SteelSeries-Canvas
Auf jeden fall brauchen wir diese libs von obiger url:
tween-min.js und steelseries-min.js
in unserem ordner
Dann erstellen wir die index.php datei:
Code: Alles auswählen
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="description" content="Temperatur und Luftfeuchte"/>
<meta name="keywords" content="aktuelles wetter"/>
<title>CCU Temperatur und Luftfeuchte</title>
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="expires" content="-1" />
<meta http-equiv="Cache-control" content="no-cache" />
<link rel="stylesheet" href="template.css" type="text/css" />
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
var sInitMode;
sInitMode = 'GAUGES';
</script>
<!-- init and execution script for steelseries gauges -->
<script language="JavaScript" src="http://pi/wetter/tween-min.js"></script>
<script language="JavaScript" src="http://pi/wetter/steelseries-min.js"></script>
<script language="JavaScript" src="http://pi/wetter/liveGaugesData.js"></script>
</head>
<body>
<!-- show current data timestamp -->
<div id="display_values">
<div id="header">
<abbr id="weather_timestamp"></abbr>
</div>
<!-- display steelseries gauges -->
<div id="gauges">
<table width="100%" border="0" cellspacing="0" cellpadding="5">
<tr>
<td align="center">
<canvas id="canvasTempActual" width="201" height="201"></canvas>
</td>
<td align="center">
<canvas id="canvasHumidity" width="201" height="201"></canvas>
</td>
</tr>
</table>
</div> <!-- end of steelseries gauges -->
</div> <!-- end of div.display_values -->
</body>
</html>
die css datei für die index.php, um hintergrundfarben anzupassen,
template.css:
Code: Alles auswählen
html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, span, a, table, td, form, img, li {
margin: 0px;
padding: 0px;
font-family: Arial, Helvetica, sans-serif;
font-style: normal;
color: #000000;
}
h1
{
font-weight: bold;
font-size: 14px;
}
h2, h3, h4, h5, h6
{
font-weight: bold;
font-size: 12px;
}
html, body
{
font-size: 12px;
background-color: #181818
}
p
{
margin: 0px;
padding: 4px 4px 5px 5px;
}
#page
{
margin: 0px;
}
#display_values
{
padding: 0px;
width: 0px;
}
#header
{
display:none;
margin: 4px 0px 4px 0px !important;
padding: 0px;
width: 0px;
}
#gauges
{
background-color: #181818;
margin: 4px 0px 4px 0px !important;
padding: 5px 0px 0px 0px;
width: 500px;
}
#charts
{
display:none;
background-color: rgb(245,245,245);
padding: 0px;
width: 0px;
}
Jetzt brauchen wir eine gaugesdata.php (hier werden die werte aus der json datei mydata.json gelesen):
Code: Alles auswählen
<?php
session_cache_limiter('nocache');
header('Expires: ' . gmdate('r', 0));
header('Content-type: application/json');
$weather_data = file_get_contents("mydata.json");
echo json_encode($weather_data);
?>
dann erstellen wir die datei mydata.json mit folgendem inhalt:
diese datei müssen wir schreibrechte geben!!!!
Code: Alles auswählen
[
{
"TEMP_IN": "19.80",
"TEMP_IN_MIN_DAY": "13.50",
"TEMP_IN_MAX_DAY": "23.00",
"HUM_IN": "55",
"HUM_IN_MIN_DAY": "44",
"HUM_IN_MAX_DAY": "66"
}
]
die werte sind, da ich nur innen wandthermostat habe:
temperatur innen, min temperatur am tag und max temperatur am tag,
sowie luftfeuchte innen, minimale und maximale luftfeuchte am tag.
Diese werte kann man leicht an eigene anpassen...
dann brauchen wir noch ein javascript: liveGaugesData.js
Code: Alles auswählen
/*
Initialize life gauges display for weather data.
Based on Code from http://wiki.sandaysoft.com/a/SteelSeries_Gauges
(c) 2013-08-29, Peter Eskofier
*/
setInterval( "readWeather();", 20000 );
// -------------------------------------------
function setGauges(data)
{
// --------------------------------------------------
// prepare variables to copy data from JSON Array
var curWindDir, avgWindDir;
var curTemp, maxTemp, minTemp;
// --------------------------------------------------
// parse JSON data from server request
var myArray = jQuery.parseJSON(data);
// --------------------------------------------------
// put timestamp to page
// this requires an element called "weather_timestamp" in the indes.php!
//document.getElementById("weather_timestamp").innerHTML=myArray[0].DATE;
// --------------------------------------------------
// read data from JSON Array
// humidity in
curHum = myArray[0].HUM_IN;
minHum = myArray[0].HUM_IN_MIN_DAY;
maxHum = myArray[0].HUM_IN_MAX_DAY;
// temperatures
curTemp = myArray[0].TEMP_IN;
minTemp = myArray[0].TEMP_IN_MIN_DAY;
maxTemp = myArray[0].TEMP_IN_MAX_DAY;
// -------------------------------------------------
// now set values in gauges
humActual.setValueAnimated(curHum);
humActual.setMinMeasuredValue(minHum);
humActual.setMaxMeasuredValue(maxHum);
tempActual.setValueAnimated(curTemp);
tempActual.setMinMeasuredValue(minTemp);
tempActual.setMaxMeasuredValue(maxTemp);
};
// --------------------------------------------
// get actual values from server json file
// and set data in gauges
function readWeather()
{
$.getJSON( "gaugesdata.php", setGauges);
};
// --------------------------------------------
// init gauges
function initGauges()
{
var gaugeFrameDesign = steelseries.FrameDesign.CHROME;
var gaugeBackgroundColor = steelseries.BackgroundColor.BEIGE;
var gaugeSize = 201;
// Define some sections
var sectionsTemperature = [steelseries.Section(-20, 0, 'rgba(130, 40, 230, 0.3)'),
steelseries.Section(0, 30, 'rgba(150, 220, 0, 0.3)'),
steelseries.Section(30, 65, 'rgba(0, 220, 0, 0.3)'),
steelseries.Section(65, 100, 'rgba(240, 10, 0, 0.3)')],
sectionsTemperature1 = [steelseries.Section(-20, 0, 'rgba(130, 40, 230, 0.3)'),
steelseries.Section(0, 15, 'rgba(240, 10, 0, 0.3)'),
steelseries.Section(15, 19, 'rgba(150, 220, 0, 0.3)'),
steelseries.Section(19, 25, 'rgba(0, 220, 0, 0.3)'),
steelseries.Section(25, 100, 'rgba(240, 10, 0, 0.3)')],
sectionsHumid = [steelseries.Section(0, 20, 'rgba(130, 40, 230, 0.3)'),
steelseries.Section(20, 80, 'rgba(0, 220, 0, 0.3)'),
steelseries.Section(80, 100, 'rgba(240, 10, 0, 0.3)')],
// Define one area
areasWind = [steelseries.Section(0, 1, 'rgba(220, 0, 0, 0.3)')],
// Define value gradient for bargraph
valGrad = new steelseries.gradientWrapper( 0,
100,
[ 0, 0.33, 0.66, 0.85, 1],
[ new steelseries.rgbaColor(0, 0, 200, 1),
new steelseries.rgbaColor(0, 200, 0, 1),
new steelseries.rgbaColor(200, 200, 0, 1),
new steelseries.rgbaColor(200, 0, 0, 1),
new steelseries.rgbaColor(200, 0, 0, 1) ]);
// --------------------------------------------------
// Actual humidity gauge
humActual = new steelseries.Radial('canvasHumidity',
{
size: gaugeSize,
section: sectionsTemperature,
frameDesign: gaugeFrameDesign,
pointerType: steelseries.PointerType.TYPE2,
pointerColor: steelseries.ColorDef.BLUE,
backgroundColor: gaugeBackgroundColor,
titleString: 'Luftfeuchte',
unitString: '\u0025',
lcdVisible: true,
minValue: 0,
maxValue: 100,
thresholdVisible: false,
ledVisible: false,
lcdDecimals: 2,
minMeasuredValueVisible: true,
maxMeasuredValueVisible: true
});
humActual.setMinMeasuredValue(0);
humActual.setMaxMeasuredValue(0);
humActual.setValue(0);
// --------------------------------------------------
// Actual inside tempurature gauge
tempActual = new steelseries.Radial('canvasTempActual',
{
size: gaugeSize,
section: sectionsTemperature1,
frameDesign: gaugeFrameDesign,
pointerType: steelseries.PointerType.TYPE2,
pointerColor: steelseries.ColorDef.BLUE,
backgroundColor: gaugeBackgroundColor,
titleString: 'Temperatur',
unitString: '\u00B0C',
lcdVisible: true,
minValue: -5,
maxValue: 40,
thresholdVisible: false,
ledVisible: false,
lcdDecimals: 2,
minMeasuredValueVisible: true,
maxMeasuredValueVisible: true
});
tempActual.setMinMeasuredValue(0);
tempActual.setMaxMeasuredValue(0);
tempActual.setValue(0);
};
// --------------------------------------------
// init page -> enable gauges and load current values from JSON file
function initPage(initMode)
{
if (initMode == "GAUGES")
{
initGauges();
}
readWeather();
};
// --------------------------------------------
// do after page was load
window.onload = function () { initPage(sInitMode); };
hier werden die werte an unsere anzeigen übergeben, hier werden die gaugen angepasst, sowie initialisiert.
und noch die datei writedata.php
Code: Alles auswählen
<?php
// check if all form data are submited, else output error message
if(isset($_GET['TEMP_IN']) && isset($_GET['TEMP_IN_MIN_DAY']) && isset($_GET['TEMP_IN_MAX_DAY']) && isset($_GET['HUM_IN'])&& isset($_GET['HUM_IN_MIN_DAY'])&& isset($_GET['HUM_IN_MAX_DAY'])) {
// if empty, outputs message, else, gets their data
if(empty($_GET['TEMP_IN']) || empty($_GET['TEMP_IN_MIN_DAY']) || empty($_GET['TEMP_IN_MAX_DAY']) || empty($_GET['HUM_IN']) || empty($_GET['HUM_IN_MIN_DAY']) || empty($_GET['HUM_IN_MAX_DAY'])) {
echo 'Not all data submited';
}
else {
// gets and adds form data into an array
$formdata = array(
'TEMP_IN'=> $_GET['TEMP_IN'],
'TEMP_IN_MIN_DAY'=> $_GET['TEMP_IN_MIN_DAY'],
'TEMP_IN_MAX_DAY'=> $_GET['TEMP_IN_MAX_DAY'],
'HUM_IN'=> $_GET['HUM_IN'],
'HUM_IN_MIN_DAY'=> $_GET['HUM_IN_MIN_DAY'],
'HUM_IN_MAX_DAY'=> $_GET['HUM_IN_MAX_DAY'],
'HUM_IN'=> $_GET['HUM_IN'],
);
// encodes the array into a string in JSON format (JSON_PRETTY_PRINT - uses whitespace in json-string, for human readable)
$arr_data[] =$formdata;
$jsondata = json_encode($arr_data, JSON_PRETTY_PRINT);
// saves the json string in "mydata.json" (in folder)
// outputs error message if data cannot be saved
if(file_put_contents('mydata.json', $jsondata)) echo 'Data successfully saved';
else echo 'Unable to save data in "mydata.json"';
}
}
else echo 'data not submited';
?>
an dieses script werden unsere daten mittels cuxd übergeben, und dann in mydata.json wieder geschrieben.
Um es zu testen reicht ein script in der ccu :
Code: Alles auswählen
var tempin = "19.80";
var tempmin = "13.50";
var tempmax = "23.00";
var hudin = "55";
var hudmin = "44";
var hudmax = "66";
var url = "http://pi/wetter/writedata.php?TEMP_IN="#tempin#"&TEMP_IN_MIN_DAY="#tempmin#"&TEMP_IN_MAX_DAY="#tempmax#"&HUM_IN="#hudin#"&HUM_IN_MIN_DAY="#hudmin#"&HUM_IN_MAX_DAY="#hudmax#"";
var cURL="LD_LIBRARY_PATH=/usr/local/addons/cuxd /usr/local/addons/cuxd/curl";
dom.GetObject("CUxD.CUX2801001:2.CMD_EXEC").State(cURL#" -s -m 5 '"#url#"'");
WriteLine(tempin);
vom browser aus geht es dann so:
http://pi/gauge_temp/writedata.php?TEMP ... MAX_DAY=61
wo pi, die ip adresse der pi ist..
Natürlich muss man diese beispiel variablen, mit richtigen variablen befüllen
kann man in das script, aus diesem thread einbauen und dann in dem programm das jede minute läuft, die daten mit cuxd weiter geben an writedata.php
mit kleinen anpassungen kann man nur, die aktuele temperatur, sowie luftfeuchte darstellen.
Wichtig ist dass man alle werte in der zeile:
Code: Alles auswählen
http://pi/gauge_temp/writedata.php?TEMP_IN=21.7&TEMP_IN_MIN_DAY=17.2&TEMP_IN_MAX_DAY=22.4&HUM_IN=55&HUM_IN_MIN_DAY=48&HUM_IN_MAX_DAY=61
übergibt. Wer nur die temperatur und luftfeuchte anzeigen möchte, muss die writedata.php, und liveGaugesData.js, entsprechend ändern...
Möglich ist mit noch einer gauge, die werte für gestern darzustellen.
Die werte für min und max temperatur, sind die kleinen dreiecke in den gaugen, auf dem bild.
Die farben für bestimmte werte z.b. -5-0 grad, 0-15 grad usw. sowie für luftfeuchte von 0-30 % 30-65% und 65%-100% sind hier, in liveGaugesData.js, zu editieren
Code: Alles auswählen
// Define some sections
var sectionsTemperature = [steelseries.Section(-20, 0, 'rgba(130, 40, 230, 0.3)'),
steelseries.Section(0, 30, 'rgba(150, 220, 0, 0.3)'),
steelseries.Section(30, 65, 'rgba(0, 220, 0, 0.3)'),
steelseries.Section(65, 100, 'rgba(240, 10, 0, 0.3)')],
sectionsTemperature1 = [steelseries.Section(-20, 0, 'rgba(130, 40, 230, 0.3)'),
steelseries.Section(0, 15, 'rgba(240, 10, 0, 0.3)'),
steelseries.Section(15, 19, 'rgba(150, 220, 0, 0.3)'),
steelseries.Section(19, 25, 'rgba(0, 220, 0, 0.3)'),
steelseries.Section(25, 100, 'rgba(240, 10, 0, 0.3)')],
mit in rgba werten: 240, 10, 0 ist grün
ich hoffe es hilft jemandem um eigene werte, meine meinung nach, schön darzustellen
hier noch die gauge_temp.zip für die, die es gleich ausprobieren wollen, ohne den code zu kopieren, ohne die dateien selber zu erstellen.