Project in progress
Digital Dashboard

Digital Dashboard © GPL3+

Measuring engine data with Arduino and retrieve/display it over LAN in a webpage with awesome configurable steelseries gauges .

  • 13,430 views
  • 11 comments
  • 36 respects

Components and supplies

About this project

Our tugbout ( build in 1951, still original engine, in daily use ) needed an instrumentation upgrade. The boat also has 2 wheelhouses and 2 generators, 2 chargers/inverters and shore connection.

I've installed an Arduino Ethernet in the engine room, used a hall sensor to measure rpm of the engine, for now there are 6 ds18b20 in use, #7 will be installed shortly. Furthermore the Arduino also steers the original ( read: antique ) RPM instrument in the main wheelhouse.

I am sourcing the sensors to measure exhaust temperatures and oil/air pressure (Honeywell has 'm).

Despite sampling temperature on 6 points, count rpm and steer analog meter, i'm only using 3 ports on the Arduino and spent less than €120 on hardware! The most expensive parts are the adapters to mount the sensors watertight into the cooling system.

To display this data i'm using steelseries gauges, designed by Gerrit Grunwald, find all resources here.

I've adapted the radial demo page to my needs and got very pleasing results.

Code

arduino sketchArduino
this code measures rpm of the main angine by means of an opto coupled hall sensor. It also reads a series of temperatures (ds18b20 sensors), steers an analog rpm instrument in the wheelhouse, and puts all the measurement data in an xml that is sent to the browser that has the instument webpage opened (this can be a local stored copy, the6 arduino does not serve the page itself, only the data)
#include <EthernetClient.h>
#include <Ethernet.h>
#include <EthernetServer.h>
#include <SPI.h>
#include <OneWire.h>
#include <DallasTemperature.h>
#define ONE_WIRE_BUS 7
#define REQ_BUF_SZ   500
OneWire oneWire(ONE_WIRE_BUS);
DallasTemperature sensors(&oneWire);
DeviceAddress ts_1 = { 0x28, 0x10, 0x1A, 0x1F, 0x00, 0x00, 0x80, 0xAA };
DeviceAddress ts_2 = { 0x28, 0x38, 0x15, 0x08, 0x00, 0x00, 0x80, 0x6C };
DeviceAddress ts_3 = { 0x28, 0x4C, 0x19, 0x1F, 0x00, 0x00, 0x80, 0xB7 };
DeviceAddress ts_4 = { 0x28, 0xAC, 0x19, 0x08, 0x00, 0x00, 0x80, 0x20 };
DeviceAddress ts_5 = { 0x28, 0x76, 0x1A, 0x1F, 0x00, 0x00, 0x80, 0xDB };
DeviceAddress ts_6 = { 0x28, 0x05, 0x1C, 0x08, 0x00, 0x00, 0x80, 0x38 };

float tempC1 = 0;
float tempC2 = 0;
float tempC3 = 0;
float tempC4 = 0;
float tempC5 = 0;
float tempC6 = 0;
float tempC7 = 0;
float tempC8 = 0;
float tempC9 = 0;
float tempC10 = 0;
float tempC11 = 0;
float tempC12 = 0; 
float tempC14 = 0; 
byte mac[] = { 0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xFF};
IPAddress ip( 192, 168, 1, 176);
EthernetServer server(80);

char HTTP_req[REQ_BUF_SZ] = {0};
char req_index = 0;
int analog_val = 0;
unsigned long lastmillis = 0;
int RPM;
int rpm;
int PinVal;
int OldPinVal;
String readString = "";
int counter = 0; 

void setup()
{

  Ethernet.begin(mac, ip);  // initialize Ethernet device
  server.begin();
  sensors.begin();
  Serial.begin(9600);
  delay(300);
  Serial.print("Live !");
}

void loop()
{
  if(counter == 3); {
    sensors.requestTemperatures();
    delay(800);
    tempC1 = sensors.getTempC(ts_1);
    tempC2 = sensors.getTempC(ts_2);
    tempC3 = sensors.getTempC(ts_3);
    tempC4 = sensors.getTempC(ts_4);
    tempC5 = sensors.getTempC(ts_5);
    tempC6 = sensors.getTempC(ts_6);
    counter = 0;
    }
  counter++;  
  analog_val = 0;
  lastmillis = millis(); // reset timer voor 0.8 sec timeout
  if (digitalRead(2) == HIGH) { while (digitalRead(2) == HIGH and millis() - lastmillis < 800);{} }
  while (digitalRead(2) == LOW and millis() - lastmillis < 800); {} // wacht op begin passage detector of timeout
  while (digitalRead(2) == HIGH and millis() - lastmillis < 800); {} // wacht op einde passage detector ==> startpunt meting
  lastmillis = millis(); // reset timer voor meting & start chrono
  while (digitalRead(2) == LOW and millis() - lastmillis < 800); {} // wacht op begin passage detector
  while (digitalRead(2) == HIGH and millis() - lastmillis < 800); {} // wacht op einde passage detector ==> eindpunt meting

  if (millis() - lastmillis < 800 ) {
    analog_val = (60000 / (millis() - lastmillis)) ;
  }
  if (millis() - lastmillis > 799) {
    analog_val = 0;  // timed out = toerental 0
  }
  // aansturing toerenteller stuurhuis
 
  RPM = analog_val;
  PinVal = 0;
  if (RPM > 100) {
    PinVal = 16 + ((RPM - 100) * .33);
  }
  if (RPM > 200) {
    PinVal = 49 + ((RPM - 200) * .37);
  }
  if (RPM > 300) {
    PinVal = 86 + ((RPM - 300) * .38);
  }
  // PinVal = conversie van toerental naar waarde voor de output pin
  analogWrite(5, round(PinVal)); // einde aansturing toerenteller stuurhuis

  EthernetClient client = server.available();

  if (client) {
    readString = "";
    boolean currentLineIsBlank = true;

    while (client.connected() || client.available()) {
      char c = client.read(); //gets byte from ethernet buffer
      readString = readString + c;

      if (c == '\n' && currentLineIsBlank) {
        Serial.println(readString);
        // send a standard http response header
        client.println("HTTP/1.1 200 OK");
        client.println("Content-Type: text/xml");
        client.println("Access-Control-Allow-Origin: *");
        client.println();
        // print the current readings, in HTML format:
        client.print("<inputs>");
        client.print("<rpm>");
        client.print(analog_val);
        client.print("</rpm>");
        client.print("<tc1>");
        client.print(tempC1);
        client.print("</tc1>");
        client.print("<tc2>");
        client.print(tempC2);
        client.print("</tc2>");
        client.print("<tc3>");
        client.print(tempC3);
        client.print("</tc3>");
        client.print("<tc4>");
        client.print(tempC4);
        client.print("</tc4>");
        client.print("<tc5>");
        client.print(tempC5);
        client.print("</tc5>");
        client.print("<tc6>");
        client.print(tempC6);
        client.print("</tc6>");
        client.println("<inputs/>");
        client.println();
        break;
      }
      if (c == '\n') {
        // you're starting a new line
        currentLineIsBlank = true;
      } else if (c != '\r') {
        // you've gotten a character on the current line
        currentLineIsBlank = false;
      }

    }
  }
  delay(50);
  client.stop();
  while (client.status() != 0) delay(50);
}
My dashboardHTML
This is the webpage containing all the gauges, it updates the gauges by requesting data from the arduino over LAN connection
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <title>Canvas Steel</title>
    
</head>
<body onload="init();" style="background-color:#020d1e">
    <table>
        <tbody>
                
        <tr>
            <td width="100%">
                <canvas id="canvasRadial1" width="240" height="260">No canvas in your browser...sorry...</canvas>
                <canvas id="canvasRadial2" width="240" height="240"></canvas>
                <canvas id="canvasRadial3" width="240" height="240"></canvas>
                <canvas id="canvasRadial4" width="240" height="240"></canvas> 
                <canvas id="canvasRadial5" width="240" height="240"></canvas>
                <canvas id="canvasRadial6" width="240" height="240"></canvas>
            </td>
        </tr>
        <tr>
            <td width="100%">
                <canvas id="canvasRadial13" width="240" height="300"></canvas>
                <canvas id="canvasRadial15" width="240" height="300"></canvas>
                <canvas id="canvasRadial16" width="300" height="300"></canvas>
                <canvas id="canvasRadial17" width="240" height="300"></canvas>
                <canvas id="canvasRadial14" width="240" height="300"></canvas>               
            </td>
            
            
        </tr>
        <tr>
            <td width="100%">
                <canvas id="canvasRadial7" width="240" height="240"></canvas>
                <canvas id="canvasRadial8" width="240" height="240"></canvas>
                <canvas id="canvasRadial9" width="240" height="240"></canvas>
                <canvas id="canvasRadial10" width="240" height="240"></canvas> 
                <canvas id="canvasRadial11" width="240" height="240"></canvas>
                <canvas id="canvasRadial12" width="240" height="240"></canvas>
            </td>
        <tr>
           
        </tr>
    </tbody></table>
    <div style="position:absolute; left:1310px; top:20px; ">
      <button onclick="popup()"; style="height:30px;width:125px"> Hoofdmotor  </button><br>
      <button onclick="popup()"; style="height:30px;width:125px"> Tanklevels  </button><br>
      <button onclick="popup()"; style="height:30px;width:125px"> 220/380/24V </button><br>
      <button onclick="popup()"; style="height:30px;width:125px"> Generatoren </button><br>
      <button onclick="popup()"; style="height:30px;width:125px"> Bediening </button><br>
      <button onclick="popup()"; style="height:30px;width:125px"> Alarmen  </button><br>
      <img src="cue.png" style="width:50px;height:50px"; onclick="popup()";>
      <br>
      <select id="comboFrame" onchange="setFrameDesign(this)" style="height:30px;width:125px">
                    <option selected="selected" value="">   Type ring  </option>
                    <option value="BLACK_METAL">BlackMetal</option>
                    <option value="METAL">Metal</option>
                    <option value="SHINY_METAL">ShinyMetal</option>
                    <option value="BRASS">Brass</option>
                    <option value="STEEL">Steel</option>
                    <option value="CHROME">Chrome</option>
                    <option value="GOLD">Gold</option>
                    <option value="ANTHRACITE">Anthracite</option>
                    <option value="TILTED_GRAY">TiltedGray</option>
                    <option value="TILTED_BLACK">TiltedBlack</option>
                    <option value="GLOSSY_METAL">GlossyMetal</option>
                </select>
                <select id="comboBackground" onchange="setBackgroundColor(this);" style="height:30px;width:125px">
                    <option selected="selected" value="">   Kleur achtergrond  </option>
                    <option value="DARK_GRAY">DarkGray</option>
                    <option value="SATIN_GRAY">SatinGray</option>
                    <option value="LIGHT_GRAY">LightGray</option>
                    <option value="WHITE">White</option>
                    <option value="BLACK">Black</option>
                    <option value="BEIGE">Beige</option>
                    <option value="BROWN">Brown</option>
                    <option value="RED">Red</option>
                    <option value="GREEN">Green</option>
                    <option value="BLUE">Blue</option>
                    <option value="ANTHRACITE">Anthracite</option>
                    <option value="MUD">Mud</option>
                    <option value="PUNCHED_SHEET">PunchedSheet</option>
                    <option value="CARBON">Carbon</option>
                    <option value="STAINLESS">Stainless</option>
                    <option value="BRUSHED_METAL">BrushedMetal</option>
                    <option value="BRUSHED_STAINLESS">BrushedStainless</option>
                    <option value="TURNED">Turned</option>
                </select>
                <select id="comboPointerColor" onchange="setPointerColor(this);" style="height:30px;width:125px">
                    <option selected="selected" value="">   Kleur naald  </option>
                    <option value="RED">Red</option>
                    <option value="GREEN">Green</option>
                    <option value="BLUE">Blue</option>
                    <option value="ORANGE">Orange</option>
                    <option value="YELLOW">Yellow</option>
                    <option value="CYAN">Cyan</option>
                    <option value="MAGENTA">Magenta</option>
                    <option value="WHITE">White</option>
                    <option value="GRAY">Gray</option>
                    <option value="BLACK">Black</option>
                    <option value="RAITH">Raith</option>
                    <option value="GREEN_LCD">Green LCD</option>
                    <option value="JUG_GREEN">JUG Green</option>
                </select>
                <select id="comboPointerType" onchange="setPointerType(this);" style="height:30px;width:125px">
                    <option selected="selected" value="">   Type wijzernaald  </option>
                    <option value="TYPE1">Type1</option>
                    <option value="TYPE2">Type2</option>
                    <option value="TYPE3">Type3</option>
                    <option value="TYPE4">Type4</option>
                    <option value="TYPE5">Type5</option>
                    <option value="TYPE6">Type6</option>
                    <option value="TYPE7">Type7</option>
                    <option value="TYPE8">Type8</option>
                    <option value="TYPE9">Type9</option>
                    <option value="TYPE10">Type10</option>
                    <option value="TYPE11">Type11</option>
                    <option value="TYPE12">Type12</option>
                    <option value="TYPE13">Type13</option>
                    <option value="TYPE14">Type14</option>
                    <option value="TYPE15">Type15</option>
                    <option value="TYPE16">Type16</option>
                </select>
                <select id="comboLcdColor" onchange="setLcdColor(this);" style="height:30px;width:125px">
                    <option selected="selected" value="">  Kleur LCD scherm</option>
                    <option value="BEIGE">Beige</option>
                    <option value="BLUE">Blue</option>
                    <option value="ORANGE">Orange</option>
                    <option value="RED">Red</option>
                    <option value="YELLOW">Yellow</option>
                    <option value="WHITE">White</option>
                    <option value="GRAY">Gray</option>
                    <option value="BLACK">Black</option>
                    <option value="GREEN">Green</option>
                    <option value="BLUE2">Blue2</option>
                    <option value="BLUE_BLACK">BlueBlack</option>
                    <option value="BLUE_DARKBLUE">BlueDarkBlue</option>
                    <option value="BLUE_GRAY">BlueGray</option>
                    <option value="STANDARD">Standard</option>
                    <option value="STANDARD_GREEN">StandardGreen</option>
                    <option value="BLUE_BLUE">BlueBlue</option>
                    <option value="RED_DARKRED">RedDarkRed</option>
                    <option value="DARKBLUE">DarkBlue</option>
                    <option value="LILA">Lila</option>
                    <option value="BLACKRED">BlackRed</option>
                    <option value="DARKGREEN">DarkGreen</option>
                    <option value="AMBER">Amber</option>
                    <option value="LIGHTBLUE">LightBlue</option>
                    <option value="SECTIONS">Sections</option>
                </select>
                <select id="comboForeground" onchange="setForegroundType(this);" style="height:30px;width:125px">
                    <option selected="selected" value="">   Type afdekglas    </option>
                    <option value="TYPE1">Type1</option>
                    <option value="TYPE2">Type2</option>
                    <option value="TYPE3">Type3</option>
                    <option value="TYPE4">Type4</option>
                    <option value="TYPE5">Type5</option>
                </select>
      
    </div>

<script>
    var radial1,
        radial2,
        radial3,
        radial4,
        radial5,
        radial6,
        radial7,
        radial8,
        radial9,
        radial10,
        radial11,
        radial12,
        radial13,
        radial14,  
        radial15,
        radial16,
        radial17,
        tempC1=85;
        tempC2=85;
        tempC3=85;
        tempC4=85;
        tempC5=85;
        tempC6=85;
        tempC7=300;
        tempC8=300;
        tempC9=300;
        tempC10=300;
        tempC11=300;
        tempC12=300;
        meter="";
        data_val = 699;
        i=1;
        
        
    function init() {
        // Define some sections
        var sections1 = [steelseries.Section(0, 45, 'rgba(0, 0, 220, 0.3)'),
                        steelseries.Section(45, 65, 'rgba(0, 220, 0, 0.3)'),
                        steelseries.Section(65, 70, 'rgba(220, 220, 0, 0.3)'),
                        steelseries.Section(70, 90, 'rgba(255, 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) ]);

        // Initialzing gauges
      
        radial1 = new steelseries.Radial('canvasRadial1', {
                            gaugeType: steelseries.GaugeType.TYPE4,
                            size: 210,
                            minValue: 0,
                            maxValue: 90,
                            section: sections1,
                            titleString: 'Koelwater',
                            unitString: 'Cil 1',
                            threshold: 70,
                            lcdDecimals: 1,
                            lcdVisible: true,
                            tickLabelOrientation: steelseries.TickLabelOrientation.HORIZONTAL
                            
                        });                

        radial2 = new steelseries.Radial('canvasRadial2', {
                            size: 210,
                            minValue: 0,
                            maxValue: 90,
                            section: sections1,
                            titleString: 'Koelwater',
                            unitString: 'Cil 2',
                            threshold: 70,
                            lcdDecimals: 1,
                            lcdVisible: true,
                            tickLabelOrientation: steelseries.TickLabelOrientation.HORIZONTAL
                            
                        });

        radial3 = new steelseries.Radial('canvasRadial3', {
                            gaugeType: steelseries.GaugeType.TYPE4,
                            size: 210,
                            minValue: 0,
                            maxValue: 90,
                            section: sections1,
                            titleString: "Koelwater",
                            unitString: "Cil 3",
                            threshold: 70,
                            lcdDecimals: 1,
                            lcdVisible: true,
                            tickLabelOrientation: steelseries.TickLabelOrientation.HORIZONTAL
                            
                        });

        radial4 = new steelseries.Radial('canvasRadial4', {
                            gaugeType: steelseries.GaugeType.TYPE4,
                            size: 210,
                            minValue: 0,
                            maxValue: 90,
                            section: sections1,
                            titleString: "Koelwater",
                            unitString: "Cil 4",
                            threshold: 70,
                            lcdDecimals: 1,
                            lcdVisible: true,
                            tickLabelOrientation: steelseries.TickLabelOrientation.HORIZONTAL
                            
                        });

        radial5 = new steelseries.Radial('canvasRadial5', {
                            gaugeType: steelseries.GaugeType.TYPE4,
                            size: 210,
                            minValue: 0,
                            maxValue: 90,
                            section: sections1,
                            titleString: "Koelwater",
                            unitString: "Cil 5",
                            threshold: 70,
                            lcdDecimals: 1,
                            lcdVisible: true,
                            tickLabelOrientation: steelseries.TickLabelOrientation.HORIZONTAL
                            
                        });
                        
        radial6 = new steelseries.Radial('canvasRadial6', {
                            gaugeType: steelseries.GaugeType.TYPE4,
                            size: 210,
                            minValue: 0,
                            maxValue: 90,
                            section: sections1,
                            titleString: "Koelwater",
                            unitString: "Cil 6",
                            threshold: 70,
                            lcdDecimals: 1,
                            lcdVisible: true,
                            tickLabelOrientation: steelseries.TickLabelOrientation.HORIZONTAL
                            
                        });

        
         radial7 = new steelseries.Radial('canvasRadial7', {
                            gaugeType: steelseries.GaugeType.TYPE4,
                            size: 210,
                            minValue: 0,
                            maxValue: 350,
                            section: Array(steelseries.Section(0,120,'rgba(0,0,255,0.3)'),steelseries.Section(120,250,'rgba(0,255,0,0.3)'),steelseries.Section(250,300,'rgba(255,255,0,0.3)'),steelseries.Section(300,350,'rgba(255,0,0,0.3)')),
                            titleString: 'Uitlaat',
                            unitString: 'Cil 1',
                            threshold: 310,
                            lcdDecimals: 0,
                            lcdVisible: true,
                            tickLabelOrientation: steelseries.TickLabelOrientation.HORIZONTAL
                            
                        });

        radial8 = new steelseries.Radial('canvasRadial8', {
                            gaugeType: steelseries.GaugeType.TYPE4,
                            size: 210,
                            minValue: 0,
                            maxValue: 350,
                            section: Array(steelseries.Section(0,120,'rgba(0,0,255,0.3)'),steelseries.Section(120,250,'rgba(0,255,0,0.3)'),steelseries.Section(250,300,'rgba(255,255,0,0.3)'),steelseries.Section(300,350,'rgba(255,0,0,0.3)')),
                            titleString: 'Uitlaat',
                            unitString: 'Cil 2',
                            threshold: 310,
                            lcdDecimals: 0,
                            lcdVisible: true,
                            tickLabelOrientation: steelseries.TickLabelOrientation.HORIZONTAL
                            
                        });

        radial9 = new steelseries.Radial('canvasRadial9', {
                            gaugeType: steelseries.GaugeType.TYPE4,
                            size: 210,
                            minValue: 0,
                            maxValue: 350,
                            section: Array(steelseries.Section(0,120,'rgba(0,0,255,0.3)'),steelseries.Section(120,250,'rgba(0,255,0,0.3)'),steelseries.Section(250,300,'rgba(255,255,0,0.3)'),steelseries.Section(300,350,'rgba(255,0,0,0.3)')),
                            titleString: "Uitlaat",
                            unitString: "Cil 3",
                            threshold: 310,
                            lcdDecimals: 0,
                            tickLabelOrientation: steelseries.TickLabelOrientation.HORIZONTAL,
                            
                            lcdVisible: true
                        });

        radial10 = new steelseries.Radial('canvasRadial10', {
                            gaugeType: steelseries.GaugeType.TYPE4,
                            size: 210,
                            minValue: 0,
                            maxValue: 350,
                            section: Array(steelseries.Section(0,120,'rgba(0,0,255,0.3)'),steelseries.Section(120,250,'rgba(0,255,0,0.3)'),steelseries.Section(250,300,'rgba(255,255,0,0.3)'),steelseries.Section(300,350,'rgba(255,0,0,0.3)')),
                            titleString: "Uitlaat",
                            unitString: "Cil 4",
                            threshold: 310,
                            lcdDecimals: 0,
                            lcdVisible: true
                        });

        radial11 = new steelseries.Radial('canvasRadial11', {
                            gaugeType: steelseries.GaugeType.TYPE4,
                            size: 210,
                            minValue: 0,
                            maxValue: 350,
                            section: Array(steelseries.Section(0,120,'rgba(0,0,255,0.3)'),steelseries.Section(120,250,'rgba(0,255,0,0.3)'),steelseries.Section(250,300,'rgba(255,255,0,0.3)'),steelseries.Section(300,350,'rgba(255,0,0,0.3)')),
                            titleString: "Uitlaat",
                            unitString: "Cil 5",
                            threshold: 310,
                            lcdDecimals: 0,
                            tickLabelOrientation: steelseries.TickLabelOrientation.HORIZONTAL,
                            
                            lcdVisible: true
                         
                        });
                        
        radial12 = new steelseries.Radial('canvasRadial12', {
                            gaugeType: steelseries.GaugeType.TYPE4,
                            size: 210,
                            minValue: 0,
                            maxValue: 350,
                            section: Array(steelseries.Section(0,120,'rgba(0,0,255,0.3)'),steelseries.Section(120,250,'rgba(0,255,0,0.3)'),steelseries.Section(250,300,'rgba(255,255,0,0.3)'),steelseries.Section(300,350,'rgba(255,0,0,0.3)')),
                            titleString: "Uitlaat",
                            unitString: "Cil 6",
                            threshold: 310,
                            lcdDecimals: 0,
                            tickLabelOrientation: steelseries.TickLabelOrientation.HORIZONTAL,
                            
                            lcdVisible: true
                        });
                        
        radial13 = new steelseries.Radial('canvasRadial13', {
                            gaugeType: steelseries.GaugeType.TYPE4,
                            size: 240,
                            minValue: 0,
                            maxValue: 35,
                            section: Array(steelseries.Section(0,10,'rgba(255,0,0,0.3)'),steelseries.Section(10,35,'rgba(0,255,0,0.3)')),
                            titleString: "Startlucht",
                            unitString: "Bar",
                            threshold: 10,
                            lcdDecimals: 0,
                            tickLabelOrientation: steelseries.TickLabelOrientation.HORIZONTAL,
                            
                            lcdVisible: true
                        });
                           
         radial14 = new steelseries.Radial('canvasRadial14', {
                            gaugeType: steelseries.GaugeType.TYPE4,
                            size: 240,
                            minValue: 0,
                            maxValue: 90,
                            section: Array(steelseries.Section(0,30,'rgba(0,0,255,0.3)'),steelseries.Section(30,60,'rgba(0,255,0,0.3)'),steelseries.Section(60,70,'rgba(255,255,0,0.3)'),steelseries.Section(70,90,'rgba(255,0,0,0.3)')),
                            titleString: "KOPPELING",
                            unitString: "Olie °C ",
                            threshold: 65,
                            lcdDecimals: 0,
                            tickLabelOrientation: steelseries.TickLabelOrientation.HORIZONTAL,
                            
                            lcdVisible: true
                        });
                        
                    

        radial15 = new steelseries.Radial('canvasRadial15', {
                            gaugeType: steelseries.GaugeType.TYPE4,
                            section: Array(steelseries.Section(0,1,'rgba(255,0,0,0.3)'),steelseries.Section(1,1.25,'rgba(255,255,0,0.3)'),steelseries.Section(1.25,2.5,'rgba(0,255,0,0.3)'),steelseries.Section(300,350,'rgba(255,0,0,0.3)')),
                            size: 240,
                            minValue: 0,
                            maxValue: 2.5,
                            majorTickSpacing: 0.1,
                            minorTickSpacing: 0.01,
                            labelNumberFormat: steelseries.LabelNumberFormat.FRACTIONAL,
                            thresholdBehaviourInverted: true,
                            //section: sectionsu,
                            titleString: "STORK",
                            unitString: "Oliedruk",
                            threshold: 1,
                            tickLabelOrientation: steelseries.TickLabelOrientation.HORIZONTAL,
                            
       
                            lcdDecimals: 1,
                            lcdVisible: true
                            
                        });

        radial16 = new steelseries.Radial('canvasRadial16', {
                           gaugeType: steelseries.GaugeType.TYPE4,
                            size: 300,
                            minValue: 0,
                            maxValue: 700,
                            section: Array(steelseries.Section(150,520,'rgba(0,255,0,0.3)'),steelseries.Section(520,600,'rgba(255,255,0,0.3)'),steelseries.Section(600,700,'rgba(255,0,0,0.3)')),
                            titleString: "STORK",
                            unitString: "RPM",
                            threshold: 600,
                            lcdDecimals: 0,
                            tickLabelOrientation: steelseries.TickLabelOrientation.HORIZONTAL,
                            
                            lcdVisible: true
                            
                        });

        radial17 = new steelseries.Radial('canvasRadial17', {
                            gaugeType: steelseries.GaugeType.TYPE4,
                            section: Array(steelseries.Section(0,12,'rgba(255,0,0,0.3)'),steelseries.Section(12,15,'rgba(255,255,0,0.3)'),steelseries.Section(15,30,'rgba(0,255,0,0.3)')),
                            size: 240,
                            minValue: 0,
                            maxValue: 30,
                            //section: sectionsu,
                            titleString: "KOPPELING",
                            unitString: "Oliedruk",
                            threshold: 12,
                            lcdDecimals:0,
                            tickLabelOrientation: steelseries.TickLabelOrientation.HORIZONTAL,
                            
                            lcdVisible: true
                        });
                        
        
        // Start update
        setTimeout('GetArduinoInputs()', 2500);
        setInterval(function(){ GetArduinoInputs(); }, 900);
        
        setInterval(function(){ radial16.setValueAnimated(data_val); }, 900);
        setInterval(function(){ radial1.setValueAnimated(tempC1); }, 2000);
        setInterval(function(){ radial2.setValueAnimated(tempC2); }, 2000);
        setInterval(function(){ radial3.setValueAnimated(tempC3); }, 2000);
        setInterval(function(){ radial4.setValueAnimated(tempC4); }, 2000);
        setInterval(function(){ radial5.setValueAnimated(tempC5); }, 2000);
        setInterval(function(){ radial6.setValueAnimated(tempC6); }, 2000);
        /*
        setInterval(function(){ radial7.setValueAnimated(tempC1); }, 2000);
        setInterval(function(){ radial8.setValueAnimated(tempC2); }, 2000);
        setInterval(function(){ radial9.setValueAnimated(tempC3); }, 2000);
        setInterval(function(){ radial10.setValueAnimated(tempC4); }, 2000);
        setInterval(function(){ radial11.setValueAnimated(tempC5); }, 2000);
        setInterval(function(){ radial12.setValueAnimated(tempC6); }, 2000);
        setInterval(function(){ radial12.setValueAnimated(tempC14); }, 2000);
        */
        
        
    }
    
    
       function GetArduinoInputs()
		{
			nocache = "&nocache=" + Math.random() * 1000000;
			var request = new XMLHttpRequest();			
			request.onreadystatechange = function()
			{  
				if (request.readyState == 4) {
				
					if (request.status == 200) {

						if (request.responseXML != null) {
							data_val = request.responseXML.getElementsByTagName('rpm')[0].childNodes[0].nodeValue;
							tempC1 = request.responseXML.getElementsByTagName('tc1')[0].childNodes[0].nodeValue;
							tempC2 = request.responseXML.getElementsByTagName('tc2')[0].childNodes[0].nodeValue;
							tempC3 = request.responseXML.getElementsByTagName('tc3')[0].childNodes[0].nodeValue;
							tempC4 = request.responseXML.getElementsByTagName('tc4')[0].childNodes[0].nodeValue;
							tempC5 = request.responseXML.getElementsByTagName('tc5')[0].childNodes[0].nodeValue;
							tempC6 = request.responseXML.getElementsByTagName('tc6')[0].childNodes[0].nodeValue;
						}
						
					}
				}
			}
					
			request.open("GET", "http://192.168.1.176", true);
			request.send(null);
			}
			

    function popup() {
        alert('onder constructie');    
    }

  
    function setFrameDesign(sel) {
        switch (sel.options[sel.selectedIndex].value) {
        case "BLACK_METAL":
             i = 1; 
             while(i < 18) {
        		 meter = "radial" + i; 
        		 eval(meter).setFrameDesign(steelseries.FrameDesign.BLACK_METAL);
        		 i++;
        		 }
            break;          
        case "METAL":
             i = 1; 
             while(i < 18) {
        		 meter = "radial" + i; 
        		 eval(meter).setFrameDesign(steelseries.FrameDesign.METAL);
        		 i++;
        		 }
            break;           
        case "SHINY_METAL":
             i = 1; 
             while(i < 18) {
        		 meter = "radial" + i; 
        		 eval(meter).setFrameDesign(steelseries.FrameDesign.SHINY_METAL);
        		 i++;
        		 }
            break;            
        case "BRASS":
             i = 1; 
             while(i < 18) {
        		 meter = "radial" + i; 
        		 eval(meter).setFrameDesign(steelseries.FrameDesign.BRASS);
        		 i++;
        		 }
            break;            
        case "STEEL":
             i = 1; 
             while(i < 18) {
        		 meter = "radial" + i; 
        		 eval(meter).setFrameDesign(steelseries.FrameDesign.STEEL);
        		 i++;
        		 }
             break;            
        case "CHROME":
             i = 1; 
             while(i < 18) {
        		 meter = "radial" + i; 
        		 eval(meter).setFrameDesign(steelseries.FrameDesign.CHROME);
        		 i++;
        		 }
             break;            
        case "GOLD":
             i = 1; 
             while(i < 18) {
        		 meter = "radial" + i; 
        		 eval(meter).setFrameDesign(steelseries.FrameDesign.GOLD);
        		 i++;
        		 }
            break;            
        case "ANTHRACITE":
             i = 1; 
             while(i < 18) {
        		 meter = "radial" + i; 
        		 eval(meter).setFrameDesign(steelseries.FrameDesign.ANTHRACITE);
        		 i++;
        		 }
            break;         
        case "TILTED_GRAY":
             i = 1; 
             while(i < 18) {
        		 meter = "radial" + i; 
        		 eval(meter).setFrameDesign(steelseries.FrameDesign.TILTED_GRAY);
        		 i++;
        		 }
            break;            
        case "TILTED_BLACK":
             i = 1; 
             while(i < 18) {
        		 meter = "radial" + i; 
        		 eval(meter).setFrameDesign(steelseries.FrameDesign.TILTED_BLACK);
        		 i++;
        		 }
           break;           
        case "GLOSSY_METAL":
            i = 1; 
             while(i < 18) {
        		 meter = "radial" + i; 
        		 eval(meter).setFrameDesign(steelseries.FrameDesign.GLOSSY_METAL);
        		 i++;
        		 }
            break;
        }
    }

    function setBackgroundColor(sel) {
        switch (sel.options[sel.selectedIndex].value) {
        case "DARK_GRAY":
             i = 1; 
             while(i < 18) {
        		 meter = "radial" + i; 
        		 eval(meter).setBackgroundColor(steelseries.BackgroundColor.DARK_GRAY);
        		 i++;
        		 }
           break;          
        case "SATIN_GRAY":
             i = 1; 
             while(i < 18) {
        		 meter = "radial" + i; 
        		 eval(meter).setBackgroundColor(steelseries.BackgroundColor.SATIN_GRAY);
        		 i++;
        		 }
            break;           
        case "LIGHT_GRAY":
             i = 1; 
             while(i < 18) {
        		 meter = "radial" + i; 
        		 eval(meter).setBackgroundColor(steelseries.BackgroundColor.LIGHT_GRAY);
        		 i++;
        		 }
            break; 
        case "WHITE":
             i = 1; 
             while(i < 18) {
        		 meter = "radial" + i; 
        		 eval(meter).setBackgroundColor(steelseries.BackgroundColor.WHITE);
        		 i++;
        		 }
             break;            
        case "BLACK":
             i = 1; 
             while(i < 18) {
        		 meter = "radial" + i; 
        		 eval(meter).setBackgroundColor(steelseries.BackgroundColor.BLACK);
        		 i++;
        		 }
            break;
        case "BEIGE":
             i = 1; 
             while(i < 18) {
        		 meter = "radial" + i; 
        		 eval(meter).setBackgroundColor(steelseries.BackgroundColor.BEIGE);
        		 i++;
        		 }
            break;
        case "BROWN":
             i = 1; 
             while(i < 18) {
        		 meter = "radial" + i; 
        		 eval(meter).setBackgroundColor(steelseries.BackgroundColor.BROWN);
        		 i++;
        		 }
            break;
        case "RED":
             i = 1; 
             while(i < 18) {
        		 meter = "radial" + i; 
        		 eval(meter).setBackgroundColor(steelseries.BackgroundColor.RED);
        		 i++;
        		 }
            break;
        case "GREEN":
             i = 1; 
             while(i < 18) {
        		 meter = "radial" + i; 
        		 eval(meter).setBackgroundColor(steelseries.BackgroundColor.GREEN);
        		 i++;
        		 }
             break;            
        case "BLUE":
             i = 1; 
             while(i < 18) {
        		 meter = "radial" + i; 
        		 eval(meter).setBackgroundColor(steelseries.BackgroundColor.BLUE);
        		 i++;
        		 }
            break;
        case "ANTHRACITE":
             i = 1; 
             while(i < 18) {
        		 meter = "radial" + i; 
        		 eval(meter).setBackgroundColor(steelseries.BackgroundColor.ANTHRACITE);
        		 i++;
        		 }
            break;
        case "MUD":
             i = 1; 
             while(i < 18) {
        		 meter = "radial" + i; 
        		 eval(meter).setBackgroundColor(steelseries.BackgroundColor.MUD);
        		 i++;
        		 }
            break;
        case "PUNCHED_SHEET":
             i = 1; 
             while(i < 18) {
        		 meter = "radial" + i; 
        		 eval(meter).setBackgroundColor(steelseries.BackgroundColor.PUNCHED_SHEET);
        		 i++;
        		 }
            break;
        case "CARBON":
             i = 1; 
             while(i < 18) {
        		 meter = "radial" + i; 
        		 eval(meter).setBackgroundColor(steelseries.BackgroundColor.CARBON);
        		 i++;
        		 }
            break;
        case "STAINLESS":
             i = 1; 
             while(i < 18) {
        		 meter = "radial" + i; 
        		 eval(meter).setBackgroundColor(steelseries.BackgroundColor.STAINLESS);
        		 i++;
        		 }
            break;
        case "BRUSHED_METAL":
             i = 1; 
             while(i < 18) {
        		 meter = "radial" + i; 
        		 eval(meter).setBackgroundColor(steelseries.BackgroundColor.BRUSHED_METAL);
        		 i++;
        		 }
            break;
        case "BRUSHED_STAINLESS":
             i = 1; 
             while(i < 18) {
        		 meter = "radial" + i; 
        		 eval(meter).setBackgroundColor(steelseries.BackgroundColor.BRUSHED_STAINLESS);
        		 i++;
        		 }
             break;
        case "TURNED":
             i = 1; 
             while(i < 18) {
        		 meter = "radial" + i; 
        		 eval(meter).setBackgroundColor(steelseries.BackgroundColor.TURNED);
        		 i++;
        		 }
            break;
        }
    }

    function setForegroundType(sel) {
        switch (sel.options[sel.selectedIndex].value) {
        case "TYPE1":
             i = 1; 
             while(i < 18) {
        		 meter = "radial" + i; 
        		 eval(meter).setForegroundType(steelseries.ForegroundType.TYPE1);
        		 i++;
        		 }
            break;
        case "TYPE2":
             i = 1; 
             while(i < 18) {
        		 meter = "radial" + i; 
        		 eval(meter).setForegroundType(steelseries.ForegroundType.TYPE2);
        		 i++;
        		 }
            break;
        case "TYPE3":
             i = 1; 
             while(i < 18) {
        		 meter = "radial" + i; 
        		 eval(meter).setForegroundType(steelseries.ForegroundType.TYPE3);
        		 i++;
        		 }
            break;
        case "TYPE4":
             i = 1; 
             while(i < 18) {
        		 meter = "radial" + i; 
        		 eval(meter).setForegroundType(steelseries.ForegroundType.TYPE4);
        		 i++;
        		 }
            break;
        case "TYPE5":
             i = 1; 
             while(i < 18) {
        		 meter = "radial" + i; 
        		 eval(meter).setForegroundType(steelseries.ForegroundType.TYPE5);
        		 i++;
        		 }
            break;
        }
    }

    function setPointerColor(sel) {
        switch (sel.options[sel.selectedIndex].value) {
        case "RED":
             i = 1; 
             while(i < 18) {
        		 meter = "radial" + i; 
        		 eval(meter).setPointerColor(steelseries.ColorDef.RED);
        		 i++;
        		 }
           break;
        case "GREEN":
             i = 1; 
             while(i < 18) {
        		 meter = "radial" + i; 
        		 eval(meter).setPointerColor(steelseries.ColorDef.GREEN);
        		 i++;
        		 }
            break;
        case "BLUE":
             i = 1; 
             while(i < 18) {
        		 meter = "radial" + i; 
        		 eval(meter).setPointerColor(steelseries.ColorDef.BLUE);
        		 i++;
        		 }
            break;
        case "ORANGE":
             i = 1; 
             while(i < 18) {
        		 meter = "radial" + i; 
        		 eval(meter).setPointerColor(steelseries.ColorDef.ORANGE);
        		 i++;
        		 }
            break;
        case "YELLOW":
             i = 1; 
             while(i < 18) {
        		 meter = "radial" + i; 
        		 eval(meter).setPointerColor(steelseries.ColorDef.YELLOW);
        		 i++;
        		 }
            break;
        case "CYAN":
             i = 1; 
             while(i < 18) {
        		 meter = "radial" + i; 
        		 eval(meter).setPointerColor(steelseries.ColorDef.CYAN);
        		 i++;
        		 }
            break;
        case "MAGENTA":
             i = 1; 
             while(i < 18) {
        		 meter = "radial" + i; 
        		 eval(meter).setPointerColor(steelseries.ColorDef.MAGENTA);
        		 i++;
        		 }
            break;
        case "WHITE":
             i = 1; 
             while(i < 18) {
        		 meter = "radial" + i; 
        		 eval(meter).setPointerColor(steelseries.ColorDef.WHITE);
        		 i++;
        		 }
            break;
        case "GRAY":
             i = 1; 
             while(i < 18) {
        		 meter = "radial" + i; 
        		 eval(meter).setPointerColor(steelseries.ColorDef.GRAY);
        		 i++;
        		 }
           break;
        case "BLACK":
             i = 1; 
             while(i < 18) {
        		 meter = "radial" + i; 
        		 eval(meter).setPointerColor(steelseries.ColorDef.BLACK);
        		 i++;
        		 }
             break;
        case "RAITH":
             i = 1; 
             while(i < 18) {
        		 meter = "radial" + i; 
        		 eval(meter).setPointerColor(steelseries.ColorDef.RAITH);
        		 i++;
        		 }
            break;
        case "GREEN_LCD":
             i = 1; 
             while(i < 18) {
        		 meter = "radial" + i; 
        		 eval(meter).setPointerColor(steelseries.ColorDef.GREEN_LCD);
        		 i++;
        		 }
            break;
        case "JUG_GREEN":
             i = 1; 
             while(i < 18) {
        		 meter = "radial" + i; 
        		 eval(meter).setPointerColor(steelseries.ColorDef.JUG_GREEN);
        		 i++;
        		 }
           break;
        }
    }

    function setPointerType(sel) {
        switch (sel.options[sel.selectedIndex].value) {
        case "TYPE1":
             i = 1; 
             while(i < 18) {
        		 meter = "radial" + i; 
        		 eval(meter).setPointerType(steelseries.PointerType.TYPE1);
        		 i++;
        		 }
           break;
         case "TYPE2":
              i = 1; 
             while(i < 18) {
        		 meter = "radial" + i; 
        		 eval(meter).setPointerType(steelseries.PointerType.TYPE2);
        		 i++;
        		 }
            break;    
          case "TYPE3":
               i = 1; 
             while(i < 18) {
        		 meter = "radial" + i; 
        		 eval(meter).setPointerType(steelseries.PointerType.TYPE3);
        		 i++;
        		 }
            break;
          case "TYPE4":
               i = 1; 
             while(i < 18) {
        		 meter = "radial" + i; 
        		 eval(meter).setPointerType(steelseries.PointerType.TYPE4);
        		 i++;
        		 }
           break;
           case "TYPE5":
                i = 1; 
             while(i < 18) {
        		 meter = "radial" + i; 
        		 eval(meter).setPointerType(steelseries.PointerType.TYPE5);
        		 i++;
        		 }
            break;
           case "TYPE6":
                i = 1; 
             while(i < 18) {
        		 meter = "radial" + i; 
        		 eval(meter).setPointerType(steelseries.PointerType.TYPE6);
        		 i++;
        		 }
             break;
           case "TYPE7":
                i = 1; 
             while(i < 18) {
        		 meter = "radial" + i; 
        		 eval(meter).setPointerType(steelseries.PointerType.TYPE7);
        		 i++;
        		 }
            break;
           case "TYPE8":
                i = 1; 
             while(i < 18) {
...

This file has been truncated, please download it to see its full contents.
updated and refined sketch, 7 temp sensors in use, Arduino
This sketch samples temperatures on 7 points, measures rpm, steers analog rpm meter, and sends measurements in xml to network clients on request
#include <EthernetClient.h>
#include <Ethernet.h>
#include <EthernetServer.h>
#include <SPI.h>
#include <OneWire.h>
#include <DallasTemperature.h>
#define ONE_WIRE_BUS 7
#define REQ_BUF_SZ   500
OneWire oneWire(ONE_WIRE_BUS);
DallasTemperature sensors(&oneWire);
DeviceAddress ts_1 = { 0x28, 0x10, 0x1A, 0x1F, 0x00, 0x00, 0x80, 0xAA };
DeviceAddress ts_2 = { 0x28, 0x38, 0x15, 0x08, 0x00, 0x00, 0x80, 0x6C };
DeviceAddress ts_3 = { 0x28, 0x4C, 0x19, 0x1F, 0x00, 0x00, 0x80, 0xB7 };
DeviceAddress ts_4 = { 0x28, 0xAC, 0x19, 0x08, 0x00, 0x00, 0x80, 0x20 };
DeviceAddress ts_5 = { 0x28, 0x76, 0x1A, 0x1F, 0x00, 0x00, 0x80, 0xDB };
DeviceAddress ts_6 = { 0x28, 0x05, 0x1C, 0x08, 0x00, 0x00, 0x80, 0x38 };
DeviceAddress ts_7 = { 0x28, 0x3E, 0x16, 0x08, 0x00, 0x00, 0x80, 0x90 };

float tempC1 = 0;
float tempC2 = 0;
float tempC3 = 0;
float tempC4 = 0;
float tempC5 = 0;
float tempC6 = 0;
float tempC7 = 0;
float tempC8 = 0;
float tempC9 = 0;
float tempC10 = 0;
float tempC11 = 0;
float tempC12 = 0; 
float tempC14 = 0; 
byte mac[] = { 0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xFF};
IPAddress ip( 192, 168, 1, 167);
EthernetServer server(80);

char HTTP_req[REQ_BUF_SZ] = {0};
char req_index = 0;
int analog_val = 0;
unsigned long lastmillis = 0;
int RPM;
int rpm;
int PinVal;
int OldPinVal;
String readString = "";
int counter = 0; 

void setup()
{

  Ethernet.begin(mac, ip);  // initialize Ethernet device
  server.begin();
  sensors.begin();
  Serial.begin(9600);
  delay(300);
  Serial.print("Live !");
}

void loop()
{
  sensors.requestTemperatures();
  // delay(100);
  analog_val = 0;
  lastmillis = millis(); // reset timer voor 0.8 sec timeout
  if (digitalRead(2) == HIGH) { while (digitalRead(2) == HIGH and millis() - lastmillis < 700);{} }
  while (digitalRead(2) == LOW and millis() - lastmillis < 700); {} // wacht op begin passage detector of timeout
  while (digitalRead(2) == HIGH and millis() - lastmillis < 700); {} // wacht op einde passage detector ==> startpunt meting
  lastmillis = millis(); // reset timer voor meting & start chrono
  while (digitalRead(2) == LOW and millis() - lastmillis < 700); {} // wacht op begin passage detector
  while (digitalRead(2) == HIGH and millis() - lastmillis < 700); {} // wacht op einde passage detector ==> eindpunt meting

  if (millis() - lastmillis < 700 ) {
    analog_val = (60000 / (millis() - lastmillis)) ;
  }
  if (millis() - lastmillis > 699) {
    analog_val = 0;  // timed out = toerental 0
  }
  // aansturing toerenteller stuurhuis
 
  RPM = analog_val;
  PinVal = 0;
  if (RPM > 100) {
    PinVal = 16 + ((RPM - 100) * .33);
  }
  if (RPM > 200) {
    PinVal = 49 + ((RPM - 200) * .37);
  }
  if (RPM > 300) {
    PinVal = 86 + ((RPM - 300) * .38);
  }
  // PinVal = conversie van toerental naar waarde voor de output pin
  analogWrite(5, round(PinVal)); // einde aansturing toerenteller stuurhuis

  EthernetClient client = server.available();

  if (client) {
    readString = "";
    boolean currentLineIsBlank = true;

    while (client.connected() || client.available()) {
      char c = client.read(); //gets byte from ethernet buffer
      readString = readString + c;

      if (c == '\n' && currentLineIsBlank) {
        Serial.println(readString);
        // send a standard http response header
        client.println("HTTP/1.1 200 OK");
        client.println("Content-Type: text/xml");
        client.println("Access-Control-Allow-Origin: *");
        client.println();
        // print the current readings, in HTML format:
        client.print("<inputs>");
        client.print("<rpm>");
        client.print(analog_val);
        client.print("</rpm>");
        client.print("<tc1>");
        client.print(sensors.getTempC(ts_1));
        client.print("</tc1>");
        client.print("<tc2>"); 
        client.print(sensors.getTempC(ts_2));
        client.print("</tc2>");
        client.print("<tc3>");
        client.print(sensors.getTempC(ts_3));
        client.print("</tc3>");
        client.print("<tc4>");
        client.print(sensors.getTempC(ts_4));
        client.print("</tc4>");
        client.print("<tc5>");
        client.print(sensors.getTempC(ts_5));
        client.print("</tc5>");
        client.print("<tc6>");
        client.print(sensors.getTempC(ts_6));
        client.print("</tc6>");
        client.print("<tc7>");
        client.print(sensors.getTempC(ts_7));
        client.print("</tc7>");
        client.print("</inputs>");
        client.println();
        break;
      }
      if (c == '\n') {
        // you're starting a new line
        currentLineIsBlank = true;
      } else if (c != '\r') {
        // you've gotten a character on the current line
        currentLineIsBlank = false;
      }

    }
  }
  delay(50);
  client.stop();
  while (client.status() != 0) delay(50);
}
My dashboard updated versionHTML
This webpage displays a series of gauges (designed by Gerrit Grunwald) , it requests data from the arduino, the response is an xml file. The gauges are updated with the data in the xml.
Updated version, 1K lines less code !!
<!DOCTYPE html>
<html><head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <title>Lorenzo Online Instruments</title>
    
</head>
<body onload="init();" style="background-color:#020d1e">
    <table>
        <tbody>
                
        <tr>
            <td width="100%">
                <canvas id="canvasRadial1" width="210" height="210">No canvas in your browser...sorry...</canvas>
                <canvas id="canvasRadial2" width="210" height="210"></canvas>
                <canvas id="canvasRadial3" width="210" height="210"></canvas>
                <canvas id="canvasRadial4" width="210" height="210"></canvas> 
                <canvas id="canvasRadial5" width="210" height="210"></canvas>
                <canvas id="canvasRadial6" width="210" height="210"></canvas>
            </td>
        </tr>
        <tr>
            <td width="100%">
                <canvas id="canvasRadial13" width="240" height="240"></canvas>
                <canvas id="canvasRadial15" width="240" height="240"></canvas>
                <canvas id="canvasRadial16" width="300" height="300"></canvas>
                <canvas id="canvasRadial17" width="240" height="240"></canvas>
                <canvas id="canvasRadial14" width="240" height="240"></canvas>               
            </td>
            
            
        </tr>
        <tr>
            <td width="100%">
                <canvas id="canvasRadial7" width="210" height="210"></canvas>
                <canvas id="canvasRadial8" width="210" height="210"></canvas>
                <canvas id="canvasRadial9" width="210" height="210"></canvas>
                <canvas id="canvasRadial10" width="210" height="210"></canvas> 
                <canvas id="canvasRadial11" width="210" height="210"></canvas>
                <canvas id="canvasRadial12" width="210" height="210"></canvas>
            </td>
        </tr><tr>
           
        </tr>
    </tbody></table>
    <div style="position:absolute; left:1310px; top:20px; ">
      <button onclick="popup()" ;="" style="height:30px;width:125px"> Hoofdmotor  </button><br>
      <button onclick="popup()" ;="" style="height:30px;width:125px"> Tanklevels  </button><br>
      <button onclick="popup()" ;="" style="height:30px;width:125px"> 220/380/24V </button><br>
      <button onclick="popup()" ;="" style="height:30px;width:125px"> Generatoren </button><br>
      <button onclick="popup()" ;="" style="height:30px;width:125px"> Bediening </button><br>
      <button onclick="popup()" ;="" style="height:30px;width:125px"> Alarmen  </button><br>
      <img src="Canvas%20Steel_bestanden/cue.png" style="width:50px;height:50px" ;="" onclick="popup()">
      <br>
      <select id="comboFrame" onchange="setFrameDesign(this)" style="height:30px;width:125px">
                    <option value="">   Type ring  </option>
                    <option value="BLACK_METAL">BlackMetal</option>
                    <option value="METAL">Metal</option>
                    <option value="SHINY_METAL" selected="selected">ShinyMetal</option>
                    <option value="BRASS">Brass</option>
                    <option value="STEEL">Steel</option>
                    <option value="CHROME">Chrome</option>
                    <option value="GOLD">Gold</option>
                    <option value="ANTHRACITE">Anthracite</option>
                    <option value="TILTED_GRAY">TiltedGray</option>
                    <option value="TILTED_BLACK">TiltedBlack</option>
                    <option value="GLOSSY_METAL">GlossyMetal</option>
                </select>
                <select id="comboBackground" onchange="setBackgroundColor(this);" style="height:30px;width:125px">
                    <option value="">   Kleur achtergrond  </option>
                    <option value="DARK_GRAY">DarkGray</option>
                    <option value="SATIN_GRAY">SatinGray</option>
                    <option value="LIGHT_GRAY">LightGray</option>
                    <option value="WHITE">White</option>
                    <option value="BLACK">Black</option>
                    <option value="BEIGE">Beige</option>
                    <option value="BROWN">Brown</option>
                    <option value="RED">Red</option>
                    <option value="GREEN">Green</option>
                    <option value="BLUE" selected="selected">Blue</option>
                    <option value="ANTHRACITE">Anthracite</option>
                    <option value="MUD">Mud</option>
                    <option value="PUNCHED_SHEET">PunchedSheet</option>
                    <option value="CARBON">Carbon</option>
                    <option value="STAINLESS">Stainless</option>
                    <option value="BRUSHED_METAL">BrushedMetal</option>
                    <option value="BRUSHED_STAINLESS">BrushedStainless</option>
                    <option value="TURNED">Turned</option>
                </select>
                <select id="comboPointerColor" onchange="setPointerColor(this);" style="height:30px;width:125px">
                    <option selected="selected" value="">   Kleur naald  </option>
                    <option value="RED">Red</option>
                    <option value="GREEN">Green</option>
                    <option value="BLUE">Blue</option>
                    <option value="ORANGE">Orange</option>
                    <option value="YELLOW">Yellow</option>
                    <option value="CYAN">Cyan</option>
                    <option value="MAGENTA">Magenta</option>
                    <option value="WHITE">White</option>
                    <option value="GRAY">Gray</option>
                    <option value="BLACK">Black</option>
                    <option value="RAITH">Raith</option>
                    <option value="GREEN_LCD">Green LCD</option>
                    <option value="JUG_GREEN">JUG Green</option>
                </select>
                <select id="comboPointerType" onchange="setPointerType(this);" style="height:30px;width:125px">
                    <option value="">   Type wijzernaald  </option>
                    <option value="TYPE1">Type1</option>
                    <option value="TYPE2">Type2</option>
                    <option value="TYPE3">Type3</option>
                    <option value="TYPE4">Type4</option>
                    <option value="TYPE5">Type5</option>
                    <option value="TYPE6" selected="selected">Type6</option>
                    <option value="TYPE7">Type7</option>
                    <option value="TYPE8">Type8</option>
                    <option value="TYPE9">Type9</option>
                    <option value="TYPE10">Type10</option>
                    <option value="TYPE11">Type11</option>
                    <option value="TYPE12">Type12</option>
                    <option value="TYPE13">Type13</option>
                    <option value="TYPE14">Type14</option>
                    <option value="TYPE15">Type15</option>
                    <option value="TYPE16">Type16</option>
                </select>
                <select id="comboLcdColor" onchange="setLcdColor(this);" style="height:30px;width:125px">
                    <option value="">  Kleur LCD scherm</option>
                    <option value="BEIGE">Beige</option>
                    <option value="BLUE">Blue</option>
                    <option value="ORANGE">Orange</option>
                    <option value="RED">Red</option>
                    <option value="YELLOW">Yellow</option>
                    <option value="WHITE">White</option>
                    <option value="GRAY">Gray</option>
                    <option value="BLACK">Black</option>
                    <option value="GREEN">Green</option>
                    <option value="BLUE2">Blue2</option>
                    <option value="BLUE_BLACK" selected="selected">BlueBlack</option>
                    <option value="BLUE_DARKBLUE">BlueDarkBlue</option>
                    <option value="BLUE_GRAY">BlueGray</option>
                    <option value="STANDARD">Standard</option>
                    <option value="STANDARD_GREEN">StandardGreen</option>
                    <option value="BLUE_BLUE">BlueBlue</option>
                    <option value="RED_DARKRED">RedDarkRed</option>
                    <option value="DARKBLUE">DarkBlue</option>
                    <option value="LILA">Lila</option>
                    <option value="BLACKRED">BlackRed</option>
                    <option value="DARKGREEN">DarkGreen</option>
                    <option value="AMBER">Amber</option>
                    <option value="LIGHTBLUE">LightBlue</option>
                    <option value="SECTIONS">Sections</option>
                </select>
                <select id="comboForeground" onchange="setForegroundType(this);" style="height:30px;width:125px">
                    <option value="">   Type afdekglas    </option>
                    <option value="TYPE1">Type1</option>
                    <option value="TYPE2">Type2</option>
                    <option value="TYPE3">Type3</option>
                    <option value="TYPE4" selected="selected">Type4</option>
                    <option value="TYPE5">Type5</option>
                </select>
      
    </div>

<script>
    var radial1,
        radial2,
        radial3,
        radial4,
        radial5,
        radial6,
        radial7,
        radial8,
        radial9,
        radial10,
        radial11,
        radial12,
        radial13,
        radial14,  
        radial15,
        radial16,
        radial17,
        tempC1=85;
        tempC2=85;
        tempC3=85;
        tempC4=85;
        tempC5=85;
        tempC6=85;
        tempC7=300;
        tempC8=300;
        tempC9=300;
        tempC10=300;
        tempC11=300;
        tempC12=300;
        tempC14=85;
        meter="";
        data_val = 699;
        i=1;
        
        
    function init() {
        // Define some sections
        var sections1 = [steelseries.Section(0, 45, 'rgba(0, 0, 220, 0.3)'),
                        steelseries.Section(45, 65, 'rgba(0, 220, 0, 0.3)'),
                        steelseries.Section(65, 70, 'rgba(220, 220, 0, 0.3)'),
                        steelseries.Section(70, 90, 'rgba(255, 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) ]);

        // Initialzing gauges
      
        radial1 = new steelseries.Radial('canvasRadial1', {
                            gaugeType: steelseries.GaugeType.TYPE4,
                            size: 210,
                            minValue: 0,
                            maxValue: 90,
                            section: sections1,
                            titleString: 'Koelwater',
                            unitString: 'Cil 1',
                            threshold: 70,
                            lcdDecimals: 1,
                            lcdVisible: true,
                            tickLabelOrientation: steelseries.TickLabelOrientation.HORIZONTAL
                            
                        });                

        radial2 = new steelseries.Radial('canvasRadial2', {
                            size: 210,
                            minValue: 0,
                            maxValue: 90,
                            section: sections1,
                            titleString: 'Koelwater',
                            unitString: 'Cil 2',
                            threshold: 70,
                            lcdDecimals: 1,
                            lcdVisible: true,
                            tickLabelOrientation: steelseries.TickLabelOrientation.HORIZONTAL
                            
                        });

        radial3 = new steelseries.Radial('canvasRadial3', {
                            gaugeType: steelseries.GaugeType.TYPE4,
                            size: 210,
                            minValue: 0,
                            maxValue: 90,
                            section: sections1,
                            titleString: "Koelwater",
                            unitString: "Cil 3",
                            threshold: 70,
                            lcdDecimals: 1,
                            lcdVisible: true,
                            tickLabelOrientation: steelseries.TickLabelOrientation.HORIZONTAL
                            
                        });

        radial4 = new steelseries.Radial('canvasRadial4', {
                            gaugeType: steelseries.GaugeType.TYPE4,
                            size: 210,
                            minValue: 0,
                            maxValue: 90,
                            section: sections1,
                            titleString: "Koelwater",
                            unitString: "Cil 4",
                            threshold: 70,
                            lcdDecimals: 1,
                            lcdVisible: true,
                            tickLabelOrientation: steelseries.TickLabelOrientation.HORIZONTAL
                            
                        });

        radial5 = new steelseries.Radial('canvasRadial5', {
                            gaugeType: steelseries.GaugeType.TYPE4,
                            size: 210,
                            minValue: 0,
                            maxValue: 90,
                            section: sections1,
                            titleString: "Koelwater",
                            unitString: "Cil 5",
                            threshold: 70,
                            lcdDecimals: 1,
                            lcdVisible: true,
                            tickLabelOrientation: steelseries.TickLabelOrientation.HORIZONTAL
                            
                        });
                        
        radial6 = new steelseries.Radial('canvasRadial6', {
                            gaugeType: steelseries.GaugeType.TYPE4,
                            size: 210,
                            minValue: 0,
                            maxValue: 90,
                            section: sections1,
                            titleString: "Koelwater",
                            unitString: "Cil 6",
                            threshold: 70,
                            lcdDecimals: 1,
                            lcdVisible: true,
                            tickLabelOrientation: steelseries.TickLabelOrientation.HORIZONTAL
                            
                        });

        
         radial7 = new steelseries.Radial('canvasRadial7', {
                            gaugeType: steelseries.GaugeType.TYPE4,
                            size: 210,
                            minValue: 0,
                            maxValue: 350,
                            section: Array(steelseries.Section(0,120,'rgba(0,0,255,0.3)'),steelseries.Section(120,250,'rgba(0,255,0,0.3)'),steelseries.Section(250,300,'rgba(255,255,0,0.3)'),steelseries.Section(300,350,'rgba(255,0,0,0.3)')),
                            titleString: 'Uitlaat',
                            unitString: 'Cil 1',
                            threshold: 310,
                            lcdDecimals: 0,
                            lcdVisible: true,
                            tickLabelOrientation: steelseries.TickLabelOrientation.HORIZONTAL
                            
                        });

        radial8 = new steelseries.Radial('canvasRadial8', {
                            gaugeType: steelseries.GaugeType.TYPE4,
                            size: 210,
                            minValue: 0,
                            maxValue: 350,
                            section: Array(steelseries.Section(0,120,'rgba(0,0,255,0.3)'),steelseries.Section(120,250,'rgba(0,255,0,0.3)'),steelseries.Section(250,300,'rgba(255,255,0,0.3)'),steelseries.Section(300,350,'rgba(255,0,0,0.3)')),
                            titleString: 'Uitlaat',
                            unitString: 'Cil 2',
                            threshold: 310,
                            lcdDecimals: 0,
                            lcdVisible: true,
                            tickLabelOrientation: steelseries.TickLabelOrientation.HORIZONTAL
                            
                        });

        radial9 = new steelseries.Radial('canvasRadial9', {
                            gaugeType: steelseries.GaugeType.TYPE4,
                            size: 210,
                            minValue: 0,
                            maxValue: 350,
                            section: Array(steelseries.Section(0,120,'rgba(0,0,255,0.3)'),steelseries.Section(120,250,'rgba(0,255,0,0.3)'),steelseries.Section(250,300,'rgba(255,255,0,0.3)'),steelseries.Section(300,350,'rgba(255,0,0,0.3)')),
                            titleString: "Uitlaat",
                            unitString: "Cil 3",
                            threshold: 310,
                            lcdDecimals: 0,
                            tickLabelOrientation: steelseries.TickLabelOrientation.HORIZONTAL,
                            
                            lcdVisible: true
                        });

        radial10 = new steelseries.Radial('canvasRadial10', {
                            gaugeType: steelseries.GaugeType.TYPE4,
                            size: 210,
                            minValue: 0,
                            maxValue: 350,
                            section: Array(steelseries.Section(0,120,'rgba(0,0,255,0.3)'),steelseries.Section(120,250,'rgba(0,255,0,0.3)'),steelseries.Section(250,300,'rgba(255,255,0,0.3)'),steelseries.Section(300,350,'rgba(255,0,0,0.3)')),
                            titleString: "Uitlaat",
                            unitString: "Cil 4",
                            threshold: 310,
                            lcdDecimals: 0,
                            lcdVisible: true
                        });

        radial11 = new steelseries.Radial('canvasRadial11', {
                            gaugeType: steelseries.GaugeType.TYPE4,
                            size: 210,
                            minValue: 0,
                            maxValue: 350,
                            section: Array(steelseries.Section(0,120,'rgba(0,0,255,0.3)'),steelseries.Section(120,250,'rgba(0,255,0,0.3)'),steelseries.Section(250,300,'rgba(255,255,0,0.3)'),steelseries.Section(300,350,'rgba(255,0,0,0.3)')),
                            titleString: "Uitlaat",
                            unitString: "Cil 5",
                            threshold: 310,
                            lcdDecimals: 0,
                            tickLabelOrientation: steelseries.TickLabelOrientation.HORIZONTAL,
                            
                            lcdVisible: true
                         
                        });
                        
        radial12 = new steelseries.Radial('canvasRadial12', {
                            gaugeType: steelseries.GaugeType.TYPE4,
                            size: 210,
                            minValue: 0,
                            maxValue: 350,
                            section: Array(steelseries.Section(0,120,'rgba(0,0,255,0.3)'),steelseries.Section(120,250,'rgba(0,255,0,0.3)'),steelseries.Section(250,300,'rgba(255,255,0,0.3)'),steelseries.Section(300,350,'rgba(255,0,0,0.3)')),
                            titleString: "Uitlaat",
                            unitString: "Cil 6",
                            threshold: 310,
                            lcdDecimals: 0,
                            tickLabelOrientation: steelseries.TickLabelOrientation.HORIZONTAL,
                            
                            lcdVisible: true
                        });
                        
        radial13 = new steelseries.Radial('canvasRadial13', {
                            gaugeType: steelseries.GaugeType.TYPE4,
                            size: 240,
                            minValue: 0,
                            maxValue: 35,
                            section: Array(steelseries.Section(0,10,'rgba(255,0,0,0.3)'),steelseries.Section(10,35,'rgba(0,255,0,0.3)')),
                            titleString: "Startlucht",
                            unitString: "Bar",
                            threshold: 10,
                            lcdDecimals: 0,
                            tickLabelOrientation: steelseries.TickLabelOrientation.HORIZONTAL,
                            
                            lcdVisible: true
                        });
                           
         radial14 = new steelseries.Radial('canvasRadial14', {
                            gaugeType: steelseries.GaugeType.TYPE4,
                            size: 240,
                            minValue: 0,
                            maxValue: 90,
                            section: Array(steelseries.Section(0,30,'rgba(0,0,255,0.3)'),steelseries.Section(30,60,'rgba(0,255,0,0.3)'),steelseries.Section(60,70,'rgba(255,255,0,0.3)'),steelseries.Section(70,90,'rgba(255,0,0,0.3)')),
                            titleString: "KOPPELING",
                            unitString: "Olie C ",
                            threshold: 65,
                            lcdDecimals: 0,
                            tickLabelOrientation: steelseries.TickLabelOrientation.HORIZONTAL,
                            
                            lcdVisible: true
                        });
                        
                    

        radial15 = new steelseries.Radial('canvasRadial15', {
                            gaugeType: steelseries.GaugeType.TYPE4,
                            section: Array(steelseries.Section(0,1,'rgba(255,0,0,0.3)'),steelseries.Section(1,1.25,'rgba(255,255,0,0.3)'),steelseries.Section(1.25,2.5,'rgba(0,255,0,0.3)'),steelseries.Section(300,350,'rgba(255,0,0,0.3)')),
                            size: 240,
                            minValue: 0,
                            maxValue: 2.5,
                            majorTickSpacing: 0.1,
                            minorTickSpacing: 0.01,
                            labelNumberFormat: steelseries.LabelNumberFormat.FRACTIONAL,
                            thresholdBehaviourInverted: true,
                            //section: sectionsu,
                            titleString: "STORK",
                            unitString: "Oliedruk",
                            threshold: 1,
                            tickLabelOrientation: steelseries.TickLabelOrientation.HORIZONTAL,
                            
       
                            lcdDecimals: 1,
                            lcdVisible: true
                            
                        });

        radial16 = new steelseries.Radial('canvasRadial16', {
                           gaugeType: steelseries.GaugeType.TYPE4,
                            size: 300,
                            minValue: 0,
                            maxValue: 700,
                            section: Array(steelseries.Section(150,520,'rgba(0,255,0,0.3)'),steelseries.Section(520,600,'rgba(255,255,0,0.3)'),steelseries.Section(600,700,'rgba(255,0,0,0.3)')),
                            titleString: "STORK",
                            unitString: "RPM",
                            threshold: 600,
                            lcdDecimals: 0,
                            tickLabelOrientation: steelseries.TickLabelOrientation.HORIZONTAL,
                            
                            lcdVisible: true
                            
                        });

        radial17 = new steelseries.Radial('canvasRadial17', {
                            gaugeType: steelseries.GaugeType.TYPE4,
                            section: Array(steelseries.Section(0,12,'rgba(255,0,0,0.3)'),steelseries.Section(12,15,'rgba(255,255,0,0.3)'),steelseries.Section(15,30,'rgba(0,255,0,0.3)')),
                            size: 240,
                            minValue: 0,
                            maxValue: 30,
                            //section: sectionsu,
                            titleString: "KOPPELING",
                            unitString: "Oliedruk",
                            threshold: 12,
                            lcdDecimals:0,
                            tickLabelOrientation: steelseries.TickLabelOrientation.HORIZONTAL,
                            
                            lcdVisible: true
                        });
                        
        
        // Start update
        setTimeout('GetArduinoInputs()', 5000);
        setInterval(function(){ GetArduinoInputs(); }, 1000);
        
        setInterval(function(){ radial16.setValueAnimated(data_val); }, 1000);
        setInterval(function(){ radial1.setValueAnimated(tempC1); }, 2000);
        setInterval(function(){ radial2.setValueAnimated(tempC2); }, 2000);
        setInterval(function(){ radial3.setValueAnimated(tempC3); }, 2000);
        setInterval(function(){ radial4.setValueAnimated(tempC4); }, 2000);
        setInterval(function(){ radial5.setValueAnimated(tempC5); }, 2000);
        setInterval(function(){ radial6.setValueAnimated(tempC6); }, 2000);
        setInterval(function(){ radial14.setValueAnimated(tempC7); }, 2000);
        /*
        
        setInterval(function(){ radial8.setValueAnimated(tempC8); }, 2000);
        setInterval(function(){ radial9.setValueAnimated(tempC9); }, 2000);
        setInterval(function(){ radial10.setValueAnimated(tempC10); }, 2000);
        setInterval(function(){ radial11.setValueAnimated(tempC11); }, 2000);
        setInterval(function(){ radial12.setValueAnimated(tempC12); }, 2000);
        setInterval(function(){ radial14.setValueAnimated(tempC14); }, 2000);
        */
        
       
    }
    
    
       function GetArduinoInputs()
		{
			nocache = "&nocache=" + Math.random() * 1000000;
			var request = new XMLHttpRequest();			
			request.onreadystatechange = function()
			{  
				if (request.readyState == 4) {
				
					if (request.status == 200) {

						if (request.responseXML != null) {
							data_val = request.responseXML.getElementsByTagName('rpm')[0].childNodes[0].nodeValue;
							tempC1 = request.responseXML.getElementsByTagName('tc1')[0].childNodes[0].nodeValue;
							tempC2 = request.responseXML.getElementsByTagName('tc2')[0].childNodes[0].nodeValue;
							tempC3 = request.responseXML.getElementsByTagName('tc3')[0].childNodes[0].nodeValue;
							tempC4 = request.responseXML.getElementsByTagName('tc4')[0].childNodes[0].nodeValue;
							tempC5 = request.responseXML.getElementsByTagName('tc5')[0].childNodes[0].nodeValue;
							tempC6 = request.responseXML.getElementsByTagName('tc6')[0].childNodes[0].nodeValue;
							tempC7 = request.responseXML.getElementsByTagName('tc7')[0].childNodes[0].nodeValue;
						}
						
					}
				}
			}
					
			request.open("GET", "http://192.168.1.167", true);
			request.send(null);
			}
			

    function popup() {
        alert('onder constructie');    
    }

  
    function setFrameDesign(sel) {
        switch (sel.options[sel.selectedIndex].value) {
        case "BLACK_METAL":
             i = 1; 
             while(i < 18) {
        		 meter = "radial" + i; 
        		 eval(meter).setFrameDesign(steelseries.FrameDesign.BLACK_METAL);
        		 i++;
        		 }
            break;          
        case "METAL":
             i = 1; 
             while(i < 18) {
        		 meter = "radial" + i; 
        		 eval(meter).setFrameDesign(steelseries.FrameDesign.METAL);
        		 i++;
        		 }
            break;           
        case "SHINY_METAL":
             i = 1; 
             while(i < 18) {
        		 meter = "radial" + i; 
        		 eval(meter).setFrameDesign(steelseries.FrameDesign.SHINY_METAL);
        		 i++;
        		 }
            break;            
        case "BRASS":
             i = 1; 
             while(i < 18) {
        		 meter = "radial" + i; 
        		 eval(meter).setFrameDesign(steelseries.FrameDesign.BRASS);
        		 i++;
        		 }
            break;            
        case "STEEL":
             i = 1; 
             while(i < 18) {
        		 meter = "radial" + i; 
        		 eval(meter).setFrameDesign(steelseries.FrameDesign.STEEL);
        		 i++;
        		 }
             break;            
        case "CHROME":
             i = 1; 
             while(i < 18) {
        		 meter = "radial" + i; 
        		 eval(meter).setFrameDesign(steelseries.FrameDesign.CHROME);
        		 i++;
        		 }
             break;            
        case "GOLD":
             i = 1; 
             while(i < 18) {
        		 meter = "radial" + i; 
        		 eval(meter).setFrameDesign(steelseries.FrameDesign.GOLD);
        		 i++;
        		 }
            break;            
        case "ANTHRACITE":
             i = 1; 
             while(i < 18) {
        		 meter = "radial" + i; 
        		 eval(meter).setFrameDesign(steelseries.FrameDesign.ANTHRACITE);
        		 i++;
        		 }
            break;         
        case "TILTED_GRAY":
             i = 1; 
             while(i < 18) {
        		 meter = "radial" + i; 
        		 eval(meter).setFrameDesign(steelseries.FrameDesign.TILTED_GRAY);
        		 i++;
        		 }
            break;            
        case "TILTED_BLACK":
             i = 1; 
             while(i < 18) {
        		 meter = "radial" + i; 
        		 eval(meter).setFrameDesign(steelseries.FrameDesign.TILTED_BLACK);
        		 i++;
        		 }
           break;           
        case "GLOSSY_METAL":
            i = 1; 
             while(i < 18) {
        		 meter = "radial" + i; 
        		 eval(meter).setFrameDesign(steelseries.FrameDesign.GLOSSY_METAL);
        		 i++;
        		 }
            break;
        }
    }

    function setBackgroundColor(sel) {
        switch (sel.options[sel.selectedIndex].value) {
        case "DARK_GRAY":
             i = 1; 
             while(i < 18) {
        		 meter = "radial" + i; 
        		 eval(meter).setBackgroundColor(steelseries.BackgroundColor.DARK_GRAY);
        		 i++;
        		 }
           break;          
        case "SATIN_GRAY":
             i = 1; 
             while(i < 18) {
        		 meter = "radial" + i; 
        		 eval(meter).setBackgroundColor(steelseries.BackgroundColor.SATIN_GRAY);
        		 i++;
        		 }
            break;           
        case "LIGHT_GRAY":
             i = 1; 
             while(i < 18) {
        		 meter = "radial" + i; 
        		 eval(meter).setBackgroundColor(steelseries.BackgroundColor.LIGHT_GRAY);
        		 i++;
        		 }
            break; 
        case "WHITE":
             i = 1; 
             while(i < 18) {
        		 meter = "radial" + i; 
        		 eval(meter).setBackgroundColor(steelseries.BackgroundColor.WHITE);
        		 i++;
        		 }
             break;            
        case "BLACK":
             i = 1; 
             while(i < 18) {
        		 meter = "radial" + i; 
        		 eval(meter).setBackgroundColor(steelseries.BackgroundColor.BLACK);
        		 i++;
        		 }
            break;
        case "BEIGE":
             i = 1; 
             while(i < 18) {
        		 meter = "radial" + i; 
        		 eval(meter).setBackgroundColor(steelseries.BackgroundColor.BEIGE);
        		 i++;
        		 }
            break;
        case "BROWN":
             i = 1; 
             while(i < 18) {
        		 meter = "radial" + i; 
        		 eval(meter).setBackgroundColor(steelseries.BackgroundColor.BROWN);
        		 i++;
        		 }
            break;
        case "RED":
             i = 1; 
             while(i < 18) {
        		 meter = "radial" + i; 
        		 eval(meter).setBackgroundColor(steelseries.BackgroundColor.RED);
        		 i++;
        		 }
            break;
        case "GREEN":
             i = 1; 
             while(i < 18) {
        		 meter = "radial" + i; 
        		 eval(meter).setBackgroundColor(steelseries.BackgroundColor.GREEN);
        		 i++;
        		 }
             break;            
        case "BLUE":
             i = 1; 
             while(i < 18) {
        		 meter = "radial" + i; 
        		 eval(meter).setBackgroundColor(steelseries.BackgroundColor.BLUE);
        		 i++;
        		 }
            break;
        case "ANTHRACITE":
             i = 1; 
             while(i < 18) {
        		 meter = "radial" + i; 
        		 eval(meter).setBackgroundColor(steelseries.BackgroundColor.ANTHRACITE);
        		 i++;
        		 }
            break;
        case "MUD":
             i = 1; 
             while(i < 18) {
        		 meter = "radial" + i; 
        		 eval(meter).setBackgroundColor(steelseries.BackgroundColor.MUD);
        		 i++;
        		 }
            break;
        case "PUNCHED_SHEET":
             i = 1; 
             while(i < 18) {
        		 meter = "radial" + i; 
        		 eval(meter).setBackgroundColor(steelseries.BackgroundColor.PUNCHED_SHEET);
        		 i++;
        		 }
            break;
        case "CARBON":
             i = 1; 
             while(i < 18) {
        		 meter = "radial" + i; 
        		 eval(meter).setBackgroundColor(steelseries.BackgroundColor.CARBON);
        		 i++;
        		 }
            break;
        case "STAINLESS":
             i = 1; 
             while(i < 18) {
        		 meter = "radial" + i; 
        		 eval(meter).setBackgroundColor(steelseries.BackgroundColor.STAINLESS);
        		 i++;
        		 }
            break;
        case "BRUSHED_METAL":
             i = 1; 
             while(i < 18) {
        		 meter = "radial" + i; 
        		 eval(meter).setBackgroundColor(steelseries.BackgroundColor.BRUSHED_METAL);
        		 i++;
        		 }
            break;
        case "BRUSHED_STAINLESS":
             i = 1; 
             while(i < 18) {
        		 meter = "radial" + i; 
        		 eval(meter).setBackgroundColor(steelseries.BackgroundColor.BRUSHED_STAINLESS);
        		 i++;
        		 }
             break;
        case "TURNED":
             i = 1; 
             while(i < 18) {
        		 meter = "radial" + i; 
        		 eval(meter).setBackgroundColor(steelseries.BackgroundColor.TURNED);
        		 i++;
        		 }
            break;
        }
    }

    function setForegroundType(sel) {
        switch (sel.options[sel.selectedIndex].value) {
        case "TYPE1":
             i = 1; 
             while(i < 18) {
        		 meter = "radial" + i; 
        		 eval(meter).setForegroundType(steelseries.ForegroundType.TYPE1);
        		 i++;
        		 }
            break;
        case "TYPE2":
             i = 1; 
             while(i < 18) {
        		 meter = "radial" + i; 
        		 eval(meter).setForegroundType(steelseries.ForegroundType.TYPE2);
        		 i++;
        		 }
            break;
        case "TYPE3":
             i = 1; 
             while(i < 18) {
        		 meter = "radial" + i; 
        		 eval(meter).setForegroundType(steelseries.ForegroundType.TYPE3);
        		 i++;
        		 }
            break;
        case "TYPE4":
             i = 1; 
             while(i < 18) {
        		 meter = "radial" + i; 
        		 eval(meter).setForegroundType(steelseries.ForegroundType.TYPE4);
        		 i++;
        		 }
            break;
        case "TYPE5":
             i = 1; 
             while(i < 18) {
        		 meter = "radial" + i; 
        		 eval(meter).setForegroundType(steelseries.ForegroundType.TYPE5);
        		 i++;
        		 }
            break;
        }
    }

    function setPointerColor(sel) {
        switch (sel.options[sel.selectedIndex].value) {
        case "RED":
             i = 1; 
             while(i < 18) {
        		 meter = "radial" + i; 
        		 eval(meter).setPointerColor(steelseries.ColorDef.RED);
        		 i++;
        		 }
           break;
        case "GREEN":
             i = 1; 
             while(i < 18) {
        		 meter = "radial" + i; 
        		 eval(meter).setPointerColor(steelseries.ColorDef.GREEN);
        		 i++;
        		 }
            break;
        case "BLUE":
             i = 1; 
             while(i < 18) {
        		 meter = "radial" + i; 
        		 eval(meter).setPointerColor(steelseries.ColorDef.BLUE);
        		 i++;
        		 }
            break;
        case "ORANGE":
             i = 1; 
             while(i < 18) {
        		 meter = "radial" + i; 
        		 eval(meter).setPointerColor(steelseries.ColorDef.ORANGE);
        		 i++;
        		 }
            break;
        case "YELLOW":
             i = 1; 
             while(i < 18) {
        		 meter = "radial" + i; 
        		 eval(meter).setPointerColor(steelseries.ColorDef.YELLOW);
        		 i++;
        		 }
            break;
        case "CYAN":
             i = 1; 
             while(i < 18) {
        		 meter = "radial" + i; 
        		 eval(meter).setPointerColor(steelseries.ColorDef.CYAN);
        		 i++;
        		 }
            break;
        case "MAGENTA":
             i = 1; 
             while(i < 18) {
        		 meter = "radial" + i; 
        		 eval(meter).setPointerColor(steelseries.ColorDef.MAGENTA);
        		 i++;
        		 }
            break;
        case "WHITE":
             i = 1; 
             while(i < 18) {
        		 meter = "radial" + i; 
        		 eval(meter).setPointerColor(steelseries.ColorDef.WHITE);
        		 i++;
        		 }
            break;
        case "GRAY":
             i = 1; 
             while(i < 18) {
        		 meter = "radial" + i; 
        		 eval(meter).setPointerColor(steelseries.ColorDef.GRAY);
        		 i++;
        		 }
           break;
        case "BLACK":
             i = 1; 
             while(i < 18) {
        		 meter = "radial" + i; 
        		 eval(meter).setPointerColor(steelseries.ColorDef.BLACK);
        		 i++;
        		 }
             break;
        case "RAITH":
             i = 1; 
             while(i < 18) {
        		 meter = "radial" + i; 
        		 eval(meter).setPointerColor(steelseries.ColorDef.RAITH);
        		 i++;
        		 }
            break;
        case "GREEN_LCD":
             i = 1; 
             while(i < 18) {
        		 meter = "radial" + i; 
        		 eval(meter).setPointerColor(steelseries.ColorDef.GREEN_LCD);
        		 i++;
        		 }
            break;
        case "JUG_GREEN":
             i = 1; 
             while(i < 18) {
        		 meter = "radial" + i; 
        		 eval(meter).setPointerColor(steelseries.ColorDef.JUG_GREEN);
        		 i++;
        		 }
           break;
        }
    }

    function setPointerType(sel) {
        switch (sel.options[sel.selectedIndex].value) {
        case "TYPE1":
             i = 1; 
             while(i < 18) {
        		 meter = "radial" + i; 
        		 eval(meter).setPointerType(steelseries.PointerType.TYPE1);
        		 i++;
        		 }
           break;
         case "TYPE2":
              i = 1; 
             while(i < 18) {
        		 meter = "radial" + i; 
        		 eval(meter).setPointerType(steelseries.PointerType.TYPE2);
        		 i++;
        		 }
            break;    
          case "TYPE3":
               i = 1; 
             while(i < 18) {
        		 meter = "radial" + i; 
        		 eval(meter).setPointerType(steelseries.PointerType.TYPE3);
        		 i++;
        		 }
            break;
          case "TYPE4":
               i = 1; 
             while(i < 18) {
        		 meter = "radial" + i; 
        		 eval(meter).setPointerType(steelseries.PointerType.TYPE4);
        		 i++;
        		 }
           break;
           case "TYPE5":
                i = 1; 
             while(i < 18) {
        		 meter = "radial" + i; 
        		 eval(meter).setPointerType(steelseries.PointerType.TYPE5);
        		 i++;
        		 }
            break;
           case "TYPE6":
                i = 1; 
             while(i < 18) {
        		 meter = "radial" + i; 
        		 eval(meter).setPointerType(steelseries.PointerType.TYPE6);
        		 i++;
        		 }
             break;
           case "TYPE7":
                i = 1; 
             while(i < 18) {
        		 meter = "radial" + i; 
        		 eval(meter).setPointerType(steelseries.PointerType.TYPE7);
        		 i++;
        		 }
            break;
           case "TYPE8":
...

This file has been truncated, please download it to see its full contents.

Schematics

Original thermometers
20170228 113848 3e5go5nwmc
ds18b20s mounted in adapter @ place of original thermometers
20170228 113706 rcjkxvgyfc
schematic optocoupler
Change the value of 560 resistor according to supply voltage, for 24V use a 1.5K resistor
Opto4n35 ujkrw3qq1m

Comments

Similar projects you might like

Race Car Dashboard (Online Connectivity)

Project showcase by Team Jatayu

  • 15,279 views
  • 48 comments
  • 31 respects

Digital 3D Printer Filament Counter Using PS/2 Mouse

Project in progress by ArtSuzhou

  • 8,624 views
  • 11 comments
  • 33 respects

Arduino Digital Light - Octowide

Project showcase by Octowide

  • 1,240 views
  • 0 comments
  • 1 respect

Digital Clock with Arduino, RTC and Shift Register 74HC595

Project tutorial by LAGSILVA

  • 20,727 views
  • 16 comments
  • 46 respects

Nipkow Disk Based Digital Display Device

Project showcase by christopheArduino

  • 16,116 views
  • 8 comments
  • 52 respects
Add projectSign up / Login