eink.html

      <title>MQTT Environment Dashboard</title>
	   
<!--Script to change the backgound colour according to temperature from the mqtt data-->	   
	   
   <script  type = "text/javascript" language = "javascript">
		   
		   function changeBodyBg(color){
		  
		  document.body.style.background = color;
    }
	    </script> 
	   
<!--Style Sheets-->	   
	   
	   <link href="./css/dashboardeink.css" rel="stylesheet" type="text/css"/>
	   
	   <link href="./weather-icons-master/css/weather-icons.css" rel="stylesheet" type="text/css"/>
	   
	   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

  	   <script src="https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.0.1/mqttws31.js" type="text/javascript"></script>
	   
<!--MQTT Connect-->
		  
	 
	 <script type = "text/javascript" language = "javascript">
		var mqtt;
		var reconnectTimeout = 2000;
		var host="yourmqttsever"; //change this
		var port=8080; // edit this as need be
		var useSSL =true;
		var clientID = "clientID" + parseInt(Math.random() * 100); 
		
		function onFailure(message) {
			console.log("Connection Attempt to Host "+host+"Failed");
			setTimeout(MQTTconnect, reconnectTimeout);
			$("#mqttconnection").html("mqtt: disconnected");	
        }
		
	 	function onConnect() {
	  // Once a connection has been made, make a subscription and send a message.
	
		console.log("Connected ");
		$("#mqttconnection").html("mqtt: connected");	
		
     // Subscribe to topics
			
		mqtt.subscribe("weather/#");	//edit this to your mqtt feed
		
	
	  }
		 
	  function MQTTconnect() {
		console.log("connecting to "+ host +" "+ port);
		mqtt = new Paho.MQTT.Client(host, Number(port), clientID);
		//document.write("connecting to "+ host);
		var options = {
			timeout: 3,
			onSuccess: onConnect,
			onFailure: onFailure,
			 };
		
		mqtt.onMessageArrived = decode
		
		
		mqtt.connect(options); //connect
		}
		 
		 
// Decodes the ClientRaw Data and send to the various div files on each data uptate
		 
		  function decode(msg){
			  
			  
			// Max/Mins Additional Data from WEEWX JSON
			if(msg.destinationName == "weather/tempmax"){   
			tempmax=msg.payloadString;
		 	$("#tempmax").html(tempmax);
			console.log(tempmax);
				}   
			  
			if(msg.destinationName == "weather/tempmin"){   
			tempmin=msg.payloadString;
		 	$("#tempmin").html(tempmin);
			console.log(tempmin);
				}   
			  
			
			 if(msg.destinationName == "weather/pressuremax"){   
		    pressuremax=msg.payloadString;
		 	$("#baromax").html(pressuremax);
			console.log(pressuremax);
				}   
			  
			if(msg.destinationName == "weather/pressuremin"){   
			pressuremin=msg.payloadString;
		 	$("#baromin").html(pressuremin);
			console.log(pressuremin);
				}    
			  
			    
			if(msg.destinationName == "weather/barotrend"){   
			pressurehour=msg.payloadString.replace('mbar', '')
			$("#pbarohour").html(pressurehour);
		    console.log(pressurehour);
			 
 // Pressure Trend Text
			 
			if ((pressurehour >= -0.7) && (pressurehour <= 0.7))
			 {
				 $("#pressuretrend").html("steady");
			 }
   			if ((pressurehour > 0.7) && (pressurehour < 2.0))
			  {
				 $("#pressuretrend").html("rising");
			 }
   			if (pressurehour >= 2.0)
									   {
				 $("#pressuretrend").html("rising");
			 }
   			if ((pressurehour < -0.7) && (pressurehour > -2.0))
									   {
				 $("#pressuretrend").html("falling");
			 }
									  
   			if (pressurehour <= -2.0)
			  {
				 $("#pressuretrend").html("falling");
			 }
			  
			}
			  
// Temp Trend
			  
			  
			if(msg.destinationName == "weather/temptrend"){   
			temptrend=msg.payloadString;
			$("#temptrend").html(temptrend);
		    console.log(temptrend);	
			}
// Wind Max			  
			if(msg.destinationName == "weather/windmax"){   
			windmax=msg.payloadString;
		 	$("#windmaxgust").html(windmax);
			console.log(windmax);
				}    
			     
		
			  
			//Davis AQI	  
			  
	        if(msg.destinationName == "weather/davisaqi"){   
			AQI=msg.payloadString;
		 	$("#AQI").html(AQI);
			console.log(AQI);
				} 
			if(msg.destinationName == "weather/davisquality"){   
			aqiquality=msg.payloadString;
		 	$("#aqiquality").html(aqiquality);
			console.log(aqiquality);
				}   
			
			if(msg.destinationName == "weather/davispm25"){   
			pmtwo=msg.payloadString;
		 	$("#pmtwo").html(pmtwo);
			console.log(pmtwo);
				}     
			  
			if(msg.destinationName == "weather/davispm10"){   
			pmten=msg.payloadString;
		 	$("#pmten").html(pmten);
			console.log(pmten);
				}   
			  
			if(msg.destinationName == "weather/davistrend"){   
			pmtrend=msg.payloadString;
		 	$("#pmtrend").html(pmtrend);
			console.log(pmtrend);
				}     
			  
			// Environ Agency
			  
			if(msg.destinationName == "weather/environ/marham"){   
			marham=msg.payloadString;
		 	$("#marham").html(marham);
			console.log(marham);
				}   
			
			if(msg.destinationName == "weather/environ/ely"){   
			ely=msg.payloadString;
		 	$("#ely").html(ely);
			console.log(ely);
				}   
			  
			if(msg.destinationName == "weather/environ/denver"){   
			denver=msg.payloadString;
		 	$("#denver").html(denver);
			console.log(denver);
				}      
			
			// Davis VP2  
			  
			// Wind  
			
			if(msg.destinationName == "weather/loop"){
			var data = jQuery.parseJSON(msg.payloadString)	
			
	        wind = (data['windSpeed_mph']);	
			$("#wind").html(wind);
		    console.log(wind);	
			
				
		
	        windspeed10 = (data['windSpeed10_mps'])*2.23694;
			var windspeed10round = parseFloat(windspeed10).toFixed(1);		
			$("#windspeed10").html(windspeed10round);
		    console.log(windspeed10round);		
			
				
				
			// Convert Wind Speed to Beaufort Text
			 
		   if ((wind => 0 ) && (wind < 4 )){
			  $("#beaufort").html("calm");
			 }
		  if ((wind > 4 ) && (wind < 7 )){
			  $("#beaufort").html("slight breeze");
			 }
		  if ((wind > 7 ) && (wind < 11 )) {
			  $("#beaufort").html("light breeze");
			 }
		  if ((wind > 11 ) && (wind < 17 )){
			  $("#beaufort").html("gentle breeze");
			 }
		  if ((wind > 17 ) && (wind < 22 )) {
			  $("#beaufort").html("moderate breeze");
			 }
		  if ((wind > 22 ) && (wind < 28 )) {
			  $("#beaufort").html("stiff breeze");
			 }
		  if ((wind > 28 ) && (wind < 34 )){
			  $("#beaufort").html("strong breeze");
			 }
		  if ((wind > 34 ) && (wind < 41 )){
			  $("#beaufort").html("near gale");
			 }
		  if ((wind > 41 ) && (wind < 48 )){
			  $("#beaufort").html("gale");
			 }
		  if ((wind > 48 ) && (wind < 56 )){
			  $("#beaufort").html("strong gale");
			 }
		  if ((wind > 56 ) && (wind < 64 )){
			  $("#beaufort").html("storm");
			 }
		  if ((wind > 64 ) && (wind >= 73 ))  {
			  $("#beaufort").html("violent storm");
			 }
		  if (wind >= 73 ) {
			  $("#beaufort").html("hurricane");
			 }
	
		// Wind Direction
				
		 winddir=(data['windDir']);	

		    if ((winddir >= 11.25) &&(winddir < 33.75)) {
				$("#winddir").html("NNE");
			}
			 else if ((winddir >= 33.75) && (winddir < 56.25)) {
				$("#winddir").html("NE");
			}
			 else if ((winddir >= 56.25) && (winddir < 78.75)) {
				$("#winddir").html("ENE");
			}
			 else if ((winddir >= 78.75) && (winddir < 101.25)) {
				$("#winddir").html("E");
			}	 
			 else if ((winddir >= 101.25) && (winddir < 123.75)) {
				$("#winddir").html("ESE");
			}	 
			 else if ((winddir >= 123.75) && (winddir < 146.25)) {
				$("#winddir").html("SE");
			} 
		     else if ((winddir >= 146.25) &&(winddir < 168.75)) {
				$("#winddir").html("SSE");
			}
		
			 else if ((winddir >= 168.75) && (winddir < 191.25)) {
				$("#winddir").html("S");
			}
				 
			 else if ((winddir >= 191.25) && (winddir < 213.75)) {
				$("#winddir").html("SSW");
			}
				 
			 else if ((winddir >= 213.75) && (winddir < 236.25)) {
				$("#winddir").html("SW");
			}
				 
			 else if ((winddir >= 236.25) && (winddir < 258.75)) {
				$("#winddir").html("WSW");
			}
			 
			 else if ((winddir >= 258.75) &&(winddir < 281.25)) {
				$("#winddir").html("W");
			}
			 
			
			 else if ((winddir >= 281.25) && (winddir < 303.75)) {
				$("#winddir").html("WNW");
			}
			 
			 else if ((winddir >= 303.75) && (winddir < 326.25)) {
				$("#winddir").html("NW");
			}
			
		    else if ((winddir >= 326.25) && (winddir < 348.75)) {
				$("#winddir").html("NNW");
			}
			
		    else {$("#winddir").html("N");
				 }	 
				
				
	//Temp
				
		    temp=(data['outTemp_C']);	
			$("#temp").html(temp);
		    console.log(temp);
				
			apptemp=(data['appTemp_C']);
			var apptempround = parseFloat(apptemp).toFixed(1)	
			$("#apptemp").html(apptempround);
		    console.log(apptempround);	
				
				
	//Rain
			dailyrain=(data['dayRain_mm']);	
			$("#rain").html(dailyrain);
		    console.log(dailyrain);
				
			rainrate=(data['rainRate_mm_per_hour']);	
			$("#rainrate").html(rainrate);
		    console.log(rainrate);	
		
	// Pressure
			
			pressure=(data['barometer_mbar']);	
			$("#baro").html(pressure);
		    console.log(pressure);	
											   
	// Solar
			  
			solar=(data['radiation_Wpm2']);
			$("#solar").html(solar);
		    console.log(solar);
			  
	// Humidity		 
			  
			humidity=(data['outHumidity']);
			$("#humidity").html(humidity);
		    console.log(humidity);  
			  
    // UV
			  
			uv=(data['UV']);
			$("#uv").html(uv);
		    console.log(uv);   
			  
	// Cloud Base
			cloudheight=(data['cloudbase_meter']);
			$("#cloudheight").html(cloudheight);
		    console.log(cloudheight); 	
				
	// Dewpoint
			dewpoint=(data['dewpoint_C']);
			var dewpointround = parseFloat(dewpoint).toFixed(1)		
			$("#dewpoint").html(dewpointround);
		    console.log(dewpointround); 	
				
	
		 
			}
			  

		  
		  }
		
	 
			  
					  
	  </script>
   </head>
 
		 <body class="top">
 


<div id="dashboard">

<div id="top">
  <div id="left"><span id="currentcond"></span></div>
  <div id="center"></div>
	
	</div>

 <div class="data">

    <div class="dataValue" style="font-size : 50px"><i class="wi wi-thermometer"></i></div>
       

    </div>
  
 <div class="data">

    <div class="dataValue"> <span id="temp" lastobs="loading&deg;C">loading</span></div>

        <div class="title">temp</div>

    </div>
      
      <div id="TempTrend" class="data">

        <div class="dataText"> <span id="temptrend" lastobs="loading&deg;C">loading</span></div>


        <div class="title">trend / hr</div>
        
    </div>

      

      <div id="TempMax" class="data">

       <div class="dataValue"> <span id="tempmax" lastobs="loading&deg;C">loading</span></div>


       <div class="title">max</div>

      </div>

    <div id="TempMin" class="data">

        <div class="dataValue"> <span id="tempmin" lastobs="loading&deg;C">loading</span></div>


        <div class="title">min</div>

      </div>
<div id="14" class="data">

         <div class="dataValue"> <span id="apptemp" lastobs="loading&deg;C">loading</span></div>


       <div class="title">feels like</div>

    </div>
      


     <p>
    <div><hr size="1" color="black" ></div>
     
      <div class="data">

   <div class="dataValue" style="font-size : 50px" ><i class="wi wi-small-craft-advisory"></i></div>


        
    </div>
      
<div id="Wind" class="data">

         <div class="dataValue"> <span id="wind" lastobs="loading&deg;C">loading</span></div>

        <div class="title">wind</div>

</div>
      <div id="WindAverage" class="data">

         <div class="dataValue"> <span id="windspeed10" lastobs="loading&deg;C">loading</span></div>


       <div class="title">av / ten min</div>

      </div>
      
       <div id="MaxGust" class="data">

         <div class="dataValue"> <span id="windmaxgust" lastobs="loading&deg;C">loading</span></div>

        <div class="title">max</div>

      </div>
      
       <div id="Beaufort" class="data">

        <div class="dataText"> <span id="beaufort" lastobs="loading&deg;C">loading</span></div>

        <div class="title">beaufort</div>

      </div>
       <div id="WindDirection" class="data">

        <div class="dataText"> <span id="winddir" lastobs="loading&deg;C">loading</span></div>

        <div class="title">direction</div>

      </div>
      
      <p>
      <div><hr size="1" color="black" ></div>
      
       <div class="data">

    <div class="dataValue" style="font-size: 50px; text-align: center;"><i class="wi wi-umbrella"></i></div>


        
    </div>
      <div id="Rain" class="data">

         <div class="dataValue"> <span id="rain" lastobs="loading&deg;C">loading</span></div>


        <div class="title">Vantage Pro</div>

      </div>
      
      <div id="vp2data" class="data">

        <div class="dataValue"> <span id="rainrate" lastobs="loading&deg;C">loading</span></div>


        <div class="title">Rain Rate&nbsp; &nbsp;</div>

      </div>
      
      <div id="marhamdata" class="data">

        <div class="dataValue"> <span id="marham" lastobs="loading&deg;C">loading</span></div>
        

        <div class="title">marham</div>

      </div>
      
      <div id="Denver" class="data">

        
         <div class="dataValue"> <span id="denver" lastobs="loading&deg;C">loading</span></div>

        <div class="title">denver</div>

      </div>
      
      <div id="Ely" class="data">

        <div class="dataValue"> <span id="ely" lastobs="loading&deg;C">loading</span></div>


       <div class="title">ely</div>

      </div>
      <p>
    <div><hr size="1" color="black" ></div>
      <div class="data">
	<div class="dataValue" style="font-size: 50px; text-align: center;"><i class="wi wi-dust"></i></div>
        
    </div>

      <div id="aqiindex" class="data">

         <div class="dataValue"> <span id="AQI" lastobs="loading&deg;C">loading</span></div>


        <div class="title">AQI</div>

      </div>
      
      <div id="q" class="data">

        <div class="datatext"> <span id="aqiquality" lastobs="loading&deg;C">loading</span></div>


        <div class="title">AQI Rating&nbsp; &nbsp;</div>

      </div>
      
      <div id="pm25tag" class="data">

        <div class="dataValue"> <span id="pmtwo" lastobs="loading&deg;C">loading</span></div>
        

        <div class="title">pm two.five</div>

      </div>
      
      <div id="pmtest" class="data">

        
         <div class="dataValue"> <span id="pmten" lastobs="loading&deg;C">loading</span></div>

        <div class="title">PM ten</div>

      </div>
      
      <div id="tag" class="data">

        <div class="dataText"> <span id="pmtrend" lastobs="loading&deg;C">loading</span></div>


       <div class="title">quality&nbsp;</div>

      </div>
      <p>
    <div><hr size="1" color="black" ></div>	  
    
       <div class="data">	  

  <div class="dataValue" style="font-size : 50px"><i class="wi wi-barometer"></i></div>


        
    </div>
      <div id="Pressure" class="data">

        <div class="dataValue"> <span id="baro" lastobs="loading&deg;C">loading</span></div>


        <div class="title">pressure</div>



      </div>
      
         <div id="Pressure_Hour" class="data">

         <div class="dataValue"> <span id="pbarohour" lastobs="loading&deg;C">loading</span></div>


       <div class="title">trend / hr</div>


      </div>
      
         <div id="PressureMax" class="data">

         <div class="dataValue"> <span id="baromax" lastobs="loading&deg;C">loading</span></div>

<div class="title">max</div>



      </div>
      
         <div id="PressureMin" class="data">

         <div class="dataValue"> <span id="baromin" lastobs="loading&deg;C">loading</span></div>

        <div class="title">min</div>


      </div>
      
         <div class="data">

         <div class="dataText"> <span id="pressuretrend" lastobs="loading&deg;C">loading</span></div>


        <div class="title">state</div>
      </div>
      
      <p>
      <div><hr size="1" color="black" ></div>
       <div class="data">
		   
		   
 <div class="dataValue" style="font-size : 50px"><i class="wi wi-day-sunny"></i></div>

    </div>
    
   <div id="Solar" class="data">

        <div class="dataValue"> <span id="solar" lastobs="loading&deg;C">loading</span></div>

        <div class="title">solar</div>
</div>
      
       <div id="Solarpct" class="data">

         <div class="dataValue"> <span id="uv" lastobs="loading&deg;C">loading</span></div>


       <div class="title">UV&nbsp;</div>

      </div>

 <div id="Sunshine" class="data">

         <div class="dataValue"> <span id="dewpoint" lastobs="loading&deg;C">loading</span></div>


        <div class="title">dew point</div>
</div>
      
      <div id="Humidity" class="data">

         <div class="dataValue"> <span id="humidity" lastobs="loading&deg;C">loading</span></div>

<div class="title">humidity %</div>
      </div>
      
      <div id="CloudBase" class="data">

         <div class="dataValue"> <span id="cloudheight" lastobs="loading&deg;C">loading</span></div>

       <div class="title">cloud base m</div>

      </div>

	

 

    
      <center>
 
  
  

	<script>
	MQTTconnect();
	</script>
</body>	
</html>