LED example

by Fred Fourie

HTML

<div id="suction_element_top" class="element_below_left" style="background:white;">
  <div id="suction_element_top_title">SUCTION ELEMENT POSITION</div>
  <canvas id="suction_element_top_position" class="gauge_led"></canvas>
</div>

     <div id = "dump_valve" class="element_R">
     <div id="dump_valve_title" class="gauge_title">DUMP VALVE</div>
     <canvas id="dump_valve_position" class="gauge_led"></canvas>
     </div>

CSS

#suction_element_top, #dump_valve{  
width: 150px;
height: 150px;
}

#suction_element_top_title, #dump_valve_title
{
  text-align:center;
  padding-bottom:20px;
}

.gauge_led {
  top: 50px;
}

JavaScript

function drawLed(position,element)
{
  var c = document.getElementById(element);
  var ctx = c.getContext("2d");
  ctx.clearRect(0, 0, 300, 150);
  ctx.beginPath();
  //ctx.arc(100, 75, 50, 0, 2 * Math.PI);
  ctx.arc(75, 50, 50, 0, 2 * Math.PI);
  ctx.font="20px Arial";
  if(position == 1){
  	ctx.fillStyle = '#66CC99';
  	ctx.fill();
    ctx.fillStyle = '#000000';
  	//ctx.fillText("OPEN",70,80);
    ctx.fillText("OPEN",45,55);
  }
  else
  {
  	ctx.fillStyle = '#C0392B';
    ctx.fill();
    ctx.fillStyle = '#000000';
  	//ctx.fillText("CLOSED",60,80);
    ctx.fillText("CLOSED",35,55);
  }
}

drawLed(1,"suction_element_top_position")
drawLed(0,"dump_valve_position")