I forgot to update the webpage

My self congratulatory feelings on finishing another section came to an abrupt end when I realised I hadn’t updated the webpage to show both types of temperature so here is a quick addon.

Both temperatures are already sent to the webpage so all we need to is determine which to show. Had I palnned for this life would have been a little easier. Shame I didn’t.

Arduino code

To show which scale to use I am adding an extra field to the data; C for Celsius and F for Fahrenheit. I am using a new variable called whichTemp to hold the data. This is not really required but helps make the code easier to read. The new code is then added to the end of the data. This is the only change to the main sketch. All the other changes are within the javascript.

switchPinState = digitalRead(pinSWITCH);
String whichTemp = "";
if (switchPinState==true) {whichTemp = "F";} else {whichTemp = "C";}
 
String data = "";
data = String(data + byte(humidity) ); 
data = String(data + "|"); 
data = String(data + tempC); 
data = String(data + "|"); 
data = String(data + tempF); 
data = String(data + "|"); 
data = String(data + brightness); 
data = String(data + "|"); 
data = String(data + whichTemp);

Javascript

Most of the updates are in the javascript used to update the webpage.

Dial and graph initialization

The dial and graph initialization depended on knowing the scale to use. The default was Celsius but this no longer the case. If the user has selected Celius before starting then all is good but if Fahrenheit is selected the dial and graph are first drawn with the wrong scale and then they jump when the first values are received. To address this I have simply removed the initialization functions. This means the dials and graph are not drawn until values are received.

Others things to consider

What happens to the graph when the temperature changes scale; C to F or F to C? The 2 use different ranges. I feel it best to restart the graph so there are no weird values mid-way.
How to track when the temperature scale changes so that the graph is restarted at the correct time.
Both C and F are now displayed so we need a way of changing them when the scale changes.

Minor change to the HTML

Rather than messing around with another span and more code to change the temperature label (C and F) label I felt it easier to simply add the degree label to the temperature value and remove it from the HTML.

<div id='dial_1'> 
  <h3>Temperature</h3>
  <canvas id='canvasTemp' width='200' height='150'  style='border:1px solid #000000;' > </canvas>
  <p class='noMargin bigText'><span id='temp'>00</span></p>
</div>    
 
<div id='dial_2'> 
  <h3>Humidity</h3>
  <canvas id='canvasHumid' width='200' height='150'  style='border:1px solid #000000;' > </canvas>
  <p class='noMargin bigText'><span id='humd'>00</span></p>
</div>

and in the javascript the temperature label is added to the temperature value when the inner HTML is replaced.

.
.
tempSymbol = '°C';
.
.
tempSymbol = '°F';
.
.
document.getElementById('temp').innerHTML = temperature + tempSymbol;

Only relevant code shown.

Changes to the javascript

The dial and graph initialization has been remove from the init() function.

function init() 
{
  Socket = new WebSocket('ws://' + window.location.hostname + ':81/');
  Socket.onmessage = function(event) { processReceivedData(event); };
 
  // myVarTime is a timer used to update the time displayed in the page.
  // when the timer fires is calls the function updateTime()
  var myVarTime = setInterval(updateTime, 1000); 
 
  console.log('started');
}

The updateValues() function is no longer used and the code has been moved to the processReceivedData() function. This makes the code flow simpler. The drawDial() and drawGraph() functions have not changed. The new processReceivedData() function is considerable larger though.

function processReceivedData(evt) 
{
  // new data has been received via the websocket
 
  var data = evt.data;
  console.log(data);
 
  // the data is a single string. Data is | separated so use the bar character to split the data in to array elements.
  var tmp = data.split('|');
 
  // convert the received values in to numbers
  var h  = parseInt(tmp[0]);
  var tc = parseInt(tmp[1]);
  var tf = parseInt(tmp[2]);
  var b  = parseInt(tmp[3]);
 
  var whichTemp = (tmp[4]);   //  (C or F)
 
 // if the temperature scale has changed reset all the values used for the graph.
 // I am reseting humidity as well as temperature.
 
 if ( oldTemp != whichTemp  )
 {
    tempArray = [ -9999,-9999,-9999,-9999,-9999,-9999,-9999,-9999,-9999,-9999,-9999,-9999,-9999,-9999,-9999,-9999,-9999,-9999,-9999,-9999 ];
    humdArray = [ -9999,-9999,-9999,-9999,-9999,-9999,-9999,-9999,-9999,-9999,-9999,-9999,-9999,-9999,-9999,-9999,-9999,-9999,-9999,-9999 ];
    oldTemp = whichTemp;
 }
 
  // the brightness value uses the same range everytime so we can draw the sun logo
  drawSVG(b);
 
  // the humidity value use the same range everytime so we can draw the humidity dial
  var arcStartDegree = 160;
  var arcStopDegree = 20;
 
  var dialMinVal = 0;
  var dialMaxVal = 100;
 
  // humidity dial
  drawDial('canvasHumid', '#aaaaff', arcStartDegree, arcStopDegree, dialMinVal, dialMaxVal, h);   
  document.getElementById('humd').innerHTML = h + '%';
 
 
  // temperature.  If using Celsius the range is -30 to 50.   If using Fahrenheit the range is 20 to 120. 
 
  // temperature dial
  var tempSymbol = '';
  var temperature = 0;
 
  if (whichTemp=="C") 
  { 
    dialMinVal = -30;
    dialMaxVal = 50;
    temperature = tc;
    tempSymbol = '°C';
  }
  else
  {
    dialMinVal = 20;
    dialMaxVal = 120;
    temperature = tf;
    tempSymbol = '°F';
  }
  drawDial('canvasTemp',  '#ffaaaa', arcStartDegree, arcStopDegree, dialMinVal, dialMaxVal, temperature); 
  document.getElementById('temp').innerHTML = temperature + tempSymbol;
 
  // graph
  // remember to take in to account the humidity range 0 -100 and the range is used for the temperature should cover humidity.
 
  var graphCanvas = 'graph';
  var drawDataPoints = true;
  var graphMin = 0;
  var graphMax = 0;
 
  if (whichTemp=="C") 
  { 
      graphMin = -30;
      graphMax = 100;
      temperature = tc;
  }
  else // temperature is in F
  {
      graphMin = 0;
      graphMax = 120;
      temperature = tf;
  }
 
  drawGraph(graphCanvas, graphMin, graphMax, drawDataPoints, temperature, h);
}

The data is received the same as before, this time though there is an extra field used to show what temperature to use (C or F).

var tmp = data.split('|');
 
// convert the received values in to numbers
var h  = parseInt(tmp[0]);
var tc = parseInt(tmp[1]);
var tf = parseInt(tmp[2]);
var b  = parseInt(tmp[3]);
 
var whichTemp = (tmp[4]);   //  (C or F)

The value is copied to whichTemp and then whichTemp is later used to determine the values to use for the temperature dial and temperature in the graph (Celsius or Fahrenheit).

The new variable ol
dTemp is used to track the previous temperature scale and if it is not the same as the new whichTemp then we know the scale to use has changed; either from C to F or from F to C.
If the scale has changed then the temperature and humidity values are reset. This in turn resets the graph.

if ( oldTemp != whichTemp  )
{
 tempArray = [ -9999,-9999,-9999,-9999,-9999,-9999,-9999,-9999,-9999,-9999,-9999,-9999,-9999,-9999,-9999,-9999,-9999,-9999,-9999,-9999 ];
      humdArray = [ -9999,-9999,-9999,-9999,-9999,-9999,-9999,-9999,-9999,-9999,-9999,-9999,-9999,-9999,-9999,-9999,-9999,-9999,-9999,-9999 ];
      oldTemp = whichTemp;
}

I have kept the code for the dials and the code for the graph separate. This is not the most efficient method and means slightly more code but makes the code easier to understand.
If the temperature is in Celsius the range used is -30 to 50 and if Fahrenheit the range is 20 to 120. These can be changed to suit your own preferences. Just edit the the values in the code.

// temperature dial
var tempSymbol = '';
var temperature = 0;
 
if (whichTemp=="C") 
{ 
      dialMinVal = -30;
      dialMaxVal = 50;
      temperature = tc;
      tempSymbol = '°C';
}
else
{
      dialMinVal = 20;
      dialMaxVal = 120;
      temperature = tf;
      tempSymbol = '°F';
}
drawDial('canvasTemp',  '#ffaaaa', arcStartDegree, arcStopDegree, dialMinVal, dialMaxVal, temperature); 
 
document.getElementById('temp').innerHTML = temperature + tempSymbol;

The graph also has a different scale depending on which temperature is being displayed. However, the graph also shows the humidity so the range must at lkeast be 0 – 100.

 // graph
 // remember to take in to account the humidity range 0 -100 and the range is used for the temperature should cover humidity.
 
 var graphCanvas = 'graph';
 var drawDataPoints = true;
 var graphMin = 0;
 var graphMax = 0;
 
 if (whichTemp=="C") 
 { 
        graphMin = -30;
        graphMax = 100;
        temperature = tc;
 }
 else // temperature is in F
 {
        graphMin = 0;
        graphMax = 120;
        temperature = tf;
 }
 
 drawGraph(graphCanvas, graphMin, graphMax, drawDataPoints, temperature, h);
 }

This results is a webpage that updates the temperature correctly when the switch in the circuit is changed.