Viele holen sich die wetterdaten von wunderground.com mit dem script aus diesem thread
http://homematic-forum.de/forum/viewtop ... 31&t=17209
Dieses script falls nicht verändert, füllt eine variable namens "Wetter_Windrichtg" mit einer zahl auf
welche die aktuelle windrichtung in ° anzeigt.
Habe einwenig nach "Windrose" gesucht, um irgendwie die windrichtung in neo grafisch zu darstellen, ohne viele einzelne grafiken anzulegen.
Bin hier fundig geworden
http://wiki.sandaysoft.com/a/SteelSeries_Gauges
dort gibt es viele analoge und digitalen anzeigen, für temperatur, eine hübsche uhr und vieles mehr.
Nun habe ich es heruntergeladen und die scripte etwas für die windrichtung angepasst,
finde es recht hübsch und mit einem kleinem programm auf der ccu wird die windrichtung in echtzeit, bei änderung angezeigt,
durh das drehen des zeigers oder des kompasses selbst.
Man kann alles anpassen vom hintergrund, ausserem rand, zeiger farbe, zeigertyp, grösse, sogar ob sich hintergrund dreht oder der zeiger
Alles was man benötigt ist ein php server, lokal oder einer im web, die zip datei unten entpacken und den ganzen ordner auf den server übertragen.
Der datei "windrichtung.dat" schreibrechte geben!!!!
Die seite in webseitenelement einbinden:
Code: Alles auswählen
http://ipserver/windrose/index.phpum es zu testen kann man im browser folgendes eingeben:
Code: Alles auswählen
http://ipserver/windrose/index.php?wind=220falls keine änderung zu sehen ist
prüfen ob der datei "windrichtung.dat" schreibrechte geben sind!!!!
In der ccu ein programm anlegen:
wenn variable Wetter_Windrichtg im wert kleiner oder gleich 360
dann script ausführen
Code: Alles auswählen
var wind = dom.GetObject("Wetter_Windrichtg").Value();
string url="wget -q -O - 'http://ipserver/windrose/index.php?wind="#wind#"'";
dom.GetObject("CUxD.CUX2801001:1.CMD_EXEC").State(url);Man kann auch das vorhandene programm in dem die wetterdaten abgeholt werden benutzen
einfach noch ein script anlegen und dieses oben einfügen, verzögert um paar sekunden, z.b. verzögert um 5 sek
Ich werde hier nur die datei liveWindDaten.js im code zeigen und einige parameter erklären, wie man das ausehen anpasst
obwohl alles in dem code kommentiert ist.
code liveWindDaten.js
Code: Alles auswählen
// Datenaktualisierung
setInterval( "leseWind();", 10000 );
// -------------------------------------------
function setWind(data)
{
// --------------------------------------------------
// variablen vorbereitung um sie aus JSON datei zu laden
var curWind;
// --------------------------------------------------
// parse JSON daten vom server
var myArray = jQuery.parseJSON(data);
// --------------------------------------------------
// lese wert aus json
// Windrichtung
curWind = myArray[0].WIND;
// -------------------------------------------------
// Schreibe wert in Kompass, animiert
windActual.setValueAnimated(curWind);
};
// --------------------------------------------
// hole aktuelle Windrichtung von json datei
// schreibe die Windrichtung in Kompass
function leseWind()
{
$.get( "winddata.php", setWind);
};
// --------------------------------------------
// init WindKompass
function initWind()
{
//umrandung design
/*mögliche werte:
BLACK_METAL
METAL
SHINY_METAL
BRASS
STEEL
CHROME
GOLD
ANTHRACITE
TILTED_GRAY
TILTED_BLACK
GLOSSY_METAL */
var windFrameDesign = steelseries.FrameDesign.ANTHRACITE;
//hintergrund farbe
/*mögliche werte:
DARK_GRAY
SATIN_GRAY
LIGHT_GRAY
WHITE
BLACK
BEIGE
BROWN
RED
GREEN
BLUE
ANTHRACITE
MUD
PUNCHED_SHEET
CARBON
STAINLESS
BRUSHED_METAL
BRUSHED_STAINLESS
TURNED */
var windBackgroundColor = steelseries.BackgroundColor.BROWN;
//kompass grösse in px
var windSize = 200;
// --------------------------------------------------
// Windkompass erzeugen und aussehen definieren
windActual = new steelseries.Compass('canvasWindActual',
{
size: windSize,
backgroundColor: windBackgroundColor,
/*bestimmt ob sich der kompass oder der zeiger dreht
wenn man kompass drehen möchte, die kommentar "//" zeichen unten entfernen */
// rotateFace: true,
/*typ des zeigers
mögliche werte: TYPE1 bis TYPE16
wenn änderung gewünscht die kommentar "//" zeichen unten entfernen */
//pointerType: steelseries.PointerType.TYPE1,
//farbe des zeigers
/*mögliche werte:
RED
GREEN
BLUE
ORANGE
YELLOW
CYAN
MAGENTA
WHITE
GRAY
BLACK
RAITH
GREEN_LCD
JUG_GREEN
wenn farbänderung gewünscht die kommentar "//" zeichen in zeile unten entfernen */
//pointerColor: steelseries.ColorDef.BLUE,
frameDesign: windFrameDesign
});
};
// --------------------------------------------
function initPage(initMode)
{
if (initMode == "WIND")
{
initWind();
}
leseWind();
};
// --------------------------------------------
// wenn seite geladen
window.onload = function () { initPage(sInitMode); };Code: Alles auswählen
var windBackgroundColor = steelseries.BackgroundColor.BROWN;die randfarbe bzw. randaussehen ändert man in dieser zeile:
Code: Alles auswählen
var windFrameDesign = steelseries.FrameDesign.ANTHRACITE;Die pointer/zeiger farbe ändert man hier:
Code: Alles auswählen
//pointerColor: steelseries.ColorDef.BLUE,Auch zeigertyp kann man ändern in dieser zeile:
Code: Alles auswählen
//pointerType: steelseries.PointerType.TYPE1,die grösse stellt man hier ein:
Code: Alles auswählen
var windSize = 200; wenn man möchte das nicht der zeiger rotiert, sondern der hintergrund, bzw. der kompass selbst
kann man das in dieser zeile tun
Code: Alles auswählen
// rotateFace: true,Alle anderen dateien so lassen wie sie sind, hintergrundfarbe der seite ist auf transparent gestellt, falls man es ändern möchte
die werte in wind.css datei ändern.
Ich zeige noch paar bilder, wie das dann aussieht:
Vielen Dank,