Technical Instructions

Add a gauge to your page:

  1. Create and configure a gauge using the gauge wizard (optionally edit the resulting xml).
  2. Copy the XML generated by the wizard and put it in an XML file (gauge.xml for example)
  3. Download and unzip the bindows gauges JavaScript package.
  4. Add this script tag to the <head> tag of your html document:
    <script type="text/javascript" src="bindows_gauges/bindows_gauges.js"></script>
  5. Add a <div> tag to place the gauge in:
    <div id="gaugeDiv" style="width: 150; height: 150"></div>
  6. Add the following JavaScript to create load the gauge into the div:
    <script type="text/javascript">
    var gauge = bindows.loadGaugeIntoDiv("gauge.xml", "gaugeDiv");
    </script>
  7. Now you can set the gauge needle's value through JavaScript at runtime: gauge.needle.setValue(50)

Controlling the gauge at runtime:

A gauge can easily be controlled at runtime through the object returned by the bindows.loadGaugeIntoDiv() function. This object is a map of all the id's contained in the gauge XML file to the corresponding objects (parts) in the created gauge. If a needle is defined in the XML with this tag:

<Gauge2RadialNeedle id="needle" value="35"/>

Then the value of the needle can be set with:

gauge.needle.setValue(50)

Similarly if we have a label with the id='label' it's text can be set by gauge.label.setText('Hello').

Sample html file

<html>
<head>
<title>Bindows gauge sample</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="bindows_gauges/bindows_gauges.js"></script>
</head>
<body>
<div id="gaugeDiv" style="width: 150; height: 150" ></div>
<script type="text/javascript">
	var gauge = bindows.loadGaugeIntoDiv("gauge.xml", "gaugeDiv");

	// dynamically update the gauge at runtime
	var t = 0;
	function updateGauge() {
		t += 100;
		gauge.needle.setValue( 50 + 50 * Math.sin(t/1000) );
	}
	updateGauge();
	setInterval(updateGauge, 100);
</script>
</body>
</html>

How to dynamically update Bindows gauges

The general approach of dynamic updates to the Bindows free gauges.

To read the full article: Dynamic Updates

Feedback

We always appreciate your feedback. Please drop a line to feedback@bindows.net and tell us what you think.

Bindows Clock - Your Local Time

Bindows Speedometer