Temperature and humidity gauges are available for all appropriate measurements. Where possible they include indicators for the maximum and/or minimum achieved during the day as well as trend indicators.

They are all 90 pixels wide and all come in two heights - 200 pixels or 380 pixels (illustrated). To include one on your page simply insert a <div> tag with the id of the gauge you want to display and optionally the word 'large' or 'small' to set the desired height as follows:

<div id="outsidetemp">large</div> would display a 380 pixel high outside temperature gauge at the point you place the div tag.

Change the word large to small to get a 200 pixel high gauge.

The following gauges can be placed...

outsidetemp
insidetemp
extratemp1
extratemp2
dewpoint
heatindex
windchill
outsidehumidity
insidehumidity
extrahumidity1
extrahumidity2

All temperature and humidity gauges have a transparent background.

The rain gauge is 90 pixels wide and comes in two heights - 200 pixels (illustrated) or 380 pixels. To include one on your page simply insert a <div> tag with the id "rain" and optionally the word 'large' or 'small' to set the desired height as follows:

<div id="rain">large</div> would display a 380 pixel high rain gauge at the point you place the div tag.

Change the word large to small to get a 200 pixel high gauge (illustrated).

The rain gauage has a transparent background.

The rain gauge will re-scale as the amount of rain increases.

The cloud base indicator is one size at 200 pixels high by 90 pixels wide. To include one in your page simply insert the following div tag.

<div id="cloudbase"></div>

The cloud base indicator has a transparent background.

The wind rose is one size at 220 pixels high 220 pixels wide. To include one in your page simply insert the following div tag.

<div id="wind"></div>

The wind rose does not have a transparent background.

The wind rose will re-scale as wind speeds increase.

The wind rose illustrates the last gust speed and direction as a red line, the last average speed and direction as a green line and the previous 24 hours average speeds and directions as small squares. The wind rose indicates the direction from which the wind is blowing by the direction of the line and the speed by the length of the line.

The barometer indicator is one size at 100 pixels high by 90 pixels wide. To include one in your page simply insert the following div tag.

<div id="barometer"></div>

The barometer is styled as a digital readout and does not have a transparent background. It reports the current reading, the units in use, the trend both as a word and indicator and current period maximum and minimum.

Note: An analog barometer is also now available. Measuring 220px wide x 180px high (illustrated) with a transparent background it is set by inserting the word 'analog' between the above <div> tags. e.g. <div id="barometer">analog</div>

The colors of the graphic images are fixed to those supplied. The temperature, humidty, rain and digital baramoter instruments are all square in shape and do not use anti-aliased fonts. They should therefore work on all colored backgrounds. The wind rose and analog barometer use rounded scales anti aliased to a white background. They are designed to work on light colored backgrounds, especially greys as illustrated above. On darker colored backgrounds they will appear to have jagged edges due to the anti-aliasing. Should you wish to use one of these gauges on a dark background, consider placing it in a single cell table, with border to give the appearance of a regtangular instrument.

The color of any default text can be changed easily.

At the bottom of the section you copied and pasted from the code.txt file, there is a section as follows:

var TempColor = "";
var HumColor = "";
var RainColor = "";
var WindAvgColor = "";
var WindGustColor = "";
var WindHistColor = "";
var CloudTextColor = "";
var AnalogBaroTextColor = "";
var AnalogBaroNeedleColor = "";

These change the default colors of the dynamic areas of the gauges. You can either key in a color word such as Red, Green or Blue or an HTML hex color reference such as #F843A9.

var ExtraSensor1Name = "";
var ExtraSensor2Name = "";

These last two settings enable you to name the additional sensors if you use them. This information will be used in the mouseOver information. For example, if you have an additional sensor in your garage, you might want to put the word 'Garage' in the variable ExtraSensor1Name so that the mouse over displays Garage Temperature in place of Extra Temperature 1.