Jetzt wird es schon interessanter. Nun kommt das Java Script welches die Anzeigeelemente initialisiert und die Daten vom Server holt und dann an die Anzeige weitergibt. Damit das Skript etwas übersichtlicher bleibt, ist es hier verkürzt und liefert nur den Code für die Anzeige der Windrichtung und der aktuellen Temperatur.

Der Name des Java Scripts lautet hier "liveGaugesData.js" und kommt in den Ordner "js".

/*
 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();", 30000 );
// -------------------------------------------
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
	// windspeed and direction
	curWindDir =  myArray[0].WIND_DIR;
	avgWindDir = myArray[0].WIND_DIR_HOUR;
	
	// temperatures
	curTemp = myArray[0].TEMP_OUT;
	minTemp = myArray[0].TEMP_OUT_MIN_DAY;
	maxTemp = myArray[0].TEMP_OUT_MAX_DAY;
		
	// -------------------------------------------------
	// now set values in gauges 
	wind_direction.setValueAnimatedLatest(curWindDir);
	wind_direction.setValueAnimatedAverage(avgWindDir);
	
	tempActual.setValue(curTemp);
	tempActual.setMinMeasuredValue(minTemp);
	tempActual.setMaxMeasuredValue(maxTemp);
};
// --------------------------------------------
// get actual values from server json file
// and set data in gauges
function readWeather() 
{
		$.getJSON( "./php-scripts/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, 10, 'rgba(150, 220, 0, 0.3)'),
					steelseries.Section(10, 30, 'rgba(0, 220, 0, 0.3)'),
					steelseries.Section(30, 40, '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) ]);
	
	// --------------------------------------------------
	// Windirection gauge
	wind_direction = new steelseries.WindDirection('canvasWind_direction',
	{
		size: gaugeSize,
		lcdVisible: true,
		lcdTitleStrings: ["Aktuell", "1 Stunde"],
		roseVisible: false,
		pointerColor: steelseries.ColorDef.BLUE,
		pointerType: steelseries.PointerType.TYPE2,
		pointerColorLatest: steelseries.ColorDef.BLUE,
		pointerTypeLatest: steelseries.PointerType.TYPE2,
		pointerColorAverage: steelseries.ColorDef.RED,
		pointerTypeAverage: steelseries.PointerType.TYPE2,
		frameDesign: gaugeFrameDesign,
		backgroundColor: gaugeBackgroundColor
	});
	wind_direction.setValueAnimatedLatest(0);
	wind_direction.setValueAnimatedAverage(0);
	
	// --------------------------------------------------
	// Actual outside tempurature gauge
	tempActual = new steelseries.Radial('canvasTempActual', 
	{
		size: gaugeSize,
		section: sectionsTemperature,
		frameDesign: gaugeFrameDesign,
		pointerType: steelseries.PointerType.TYPE2,
		pointerColor: steelseries.ColorDef.BLUE,
		backgroundColor: gaugeBackgroundColor,
		titleString: 'Temperatur',
		unitString: '\u00B0C',
		lcdVisible: true,
		minValue: -20,
		maxValue: 40,
		thresholdVisible: false,
		ledVisible: false,
		lcdDecimals: 1,
		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); };

Was tut nun das Java Script?

Hier werden die Gauges Objekte initialisiert, damit diese später im Browser angesprochen werden können.

// --------------------------------------------
// init gauges
function initGauges()

Hier werden die Daten aus dem Array welches die Wetterdaten enthält in an die Anzeigeelemente gegeben. Zudem wird im Browser ein Element angesprochen, welches den Zeitstempel der Datenlieferung anzeigt.

// -------------------------------------------
function setGauges(data)

Hier wird das PHP Script zum Lesen der pywws Daten aufgerufen und dann diese an die Funktion zum Setzen der Anzeigen übergeben.

// --------------------------------------------
// get actual values from server json file
// and set data in gauges
function readWeather() 

Der letzte Teil sorgt dafür, dass die Objekte beim ersten Laden der Webpage initialisiert werden und dann die Daten vom Server für die Anzeige geholt werden.

// --------------------------------------------
// 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); };