Drawing of the solar boiler and the location of  the temperature sensors pump is working hot area warm area cold area hot area warm area cold area


125 °F (52 °C)

48 °F

50 °F

40 °F

30 °F

18 °F


This information is old hat; today, the use of SVG graphics is so much more suited for this purpose. See an example of SVG graphics (live updating) on my PhotoThermic page (the boiler picture on the left)

So what is so special? The numbers you see, are html text on top of an image. So they are not IN the image, but ON TOP. That allows displaying of temperatures on top of a static image, without using a background image, and without the need for an application to paint numbers in a picture.

One can also stretch the images, as is shown by three images (ro, og and gb) stacked on the right. The left column has heigths of 10, 30 and 140 pix for the three respective images, while the right column has equal heigths for the images. Of course the top-values are also modified accordingly. Try drag and drop the three parts that make up one column.

Also the pump (an animated gif) is placed on top of the image. If needed, the picture can be replaced by a pump that does not rotate.

Finally, the digits do not deteriorate as they are don't have to be converted to jpg. Compare the digits to the text in the image.

Numbers are fake, for the time being ()



<!--insert in <head> part of HTML page -->

<style type="text/css">


p#solarinput{ position:absolute; left:75px; top:5px;}

p#paneltop{ position:absolute; left:125px; top:25px;}

p#panelbottom{ position:absolute; left:50px; top:115px;}

p#boilertop{ position:absolute; left:315px; top:125px;}

p#boilerhalf{ position:absolute; left:315px; top:205px;}

p#boilerbottom{ position:absolute; left:315px; top:275px;}

p#hall{ position:absolute; left:440px; top:170px;}

p#pump{ position:absolute; left:160px; top:240px;}

div#theExplanation{  position:absolute;left:10px; top:359px;}



<!-- end insert in <head> part -->

<!--insert in <body> part of HTML page -->


<img style="position:absolute; left:10px; top:10px;width:477px;height:359px;" src="boilerdrawing.jpg" alt="Drawing of the solar boiler and the location of the temperature sensors" />

<img style="position:absolute;left:142px; top:303px;width:30px;height:30px;" src="pumpon.gif" alt="pump is working" />

<img style="position:absolute;left:440px; top:150px;width:20px;height:60px;" src="ro.gif" alt="hot area" />

<img style="position:absolute;left:440px; top:210px;width:20px;height:60px;" src="og.gif" alt="warm area" />

<img style="position:absolute;left:440px; top:270px;width:20px;height:60px;" src="gb.gif" alt="cold area" />

<p id="solarinput">12</p>

<p id="paneltop">125&#176;F(52 &#176;C)</p>

<p id="panelbottom">48 &#176;F</p>

<p id="boilertop">50 &#176;F</p>

<p id="boilerhalf">40 &#176;F</p>

<p id="boilerbottom">30 &#176;F</p>

<p id="hall">18 &#176;F</p>

<p id="pump">On</p>


<!-- end insert in <body> part -->