It is currently March 28th, 2024, 8:47 am

Solved: Web parse skin display issue

Get help with creating, editing & fixing problems with skins
User avatar
Stillub
Posts: 17
Joined: December 30th, 2017, 2:38 pm

Solved: Web parse skin display issue

Post by Stillub »

I am having troubles getting my web parse skin to display temperature values from my own web page. I have a page set up to display sensor values from an Arduino Micro controller from which I am trying to parse those numbers. I have tried changing the RegExp many times but the skin only captures and displays the actual html script, not the values. Screenshot:

Image

This is the RegExp that gives me the output in the screen shot:

Code: Select all

(?siU)<p>Sensor1-Analog_A2_: <span id=(.*)>.*Sensor2-Analog_A3_: <span id=(.*)>
This is how I have the skin formatted:

Code: Select all

[Rainmeter]
Update=1000
AccurateText=1
DynamicWindowSize=1

[MeasureParent]
Measure=Plugin
Plugin=Plugins\WebParser.dll
URL=http://192.168.0.20
RegExp=(?siU)<p>Sensor1-Analog_A2_: <span id=(.*)>.*Sensor2-Analog_A3_: <span id=(.*)>
Debug=1

[MeasureTank_R1]
Measure=Plugin
Plugin=WebParser
URL=[MeasureParent]
StringIndex=1

[MeasureRoof]
Measure=Plugin
Plugin=WebParser
URL=[MeasureParent]
StringIndex=2

[MeterTank_R1]
MeasureName=MeasureTank_R1
Meter=String
X=0
Y=3R
W=190
H=18
FontSize=11
FontColor=255,255,255,205
SolidColor=47,47,47,255
Padding=5,5,5,5
StringIndex=1
AntiAlias=1


[MeterRoof]
MeasureName=MeasureRoof
Meter=String
X15
Y=3R
W=190
H=18
FontSize=11
FontColor=255,255,255,205
SolidColor=47,47,47,255
Padding=5,5,5,5
AntiAlias=1
Padding=5,5,5,5
StringIndex=1
AntiAlias=1
This is the script on the web page from which I am trying to parse values:

Code: Select all

<p>Sensor1-Analog_A2_: <span id="input3">...</span>_Raw_value&&Sensor2-Analog_A3_: <span id="input4">...</span>_Raw_value<p>
This is my first time creating a skin and have spent a week or so researching and trying to resolve this issue before asking kindly for "help".

Brian
Last edited by Stillub on January 12th, 2018, 8:54 pm, edited 1 time in total.
User avatar
jsmorley
Developer
Posts: 22628
Joined: April 19th, 2009, 11:02 pm
Location: Fort Hunt, Virginia, USA

Re: Web parse skin display issue

Post by jsmorley »

If you can give some example of the actual data you are parsing, and describe what values you are looking to get out of it, I'm sure we can help.
Stratosteel
Posts: 12
Joined: December 13th, 2016, 10:28 pm

Re: Web parse skin display issue

Post by Stratosteel »

Try this:

Code: Select all

(?siU)<p>Sensor1-Analog_A2_: <span id=(.*)>.+?Sensor2-Analog_A3_: <span id=(.*)>
.* was changed to .+?
.* is a bit finicky sometimes, so i think that may have been your problem.
User avatar
balala
Rainmeter Sage
Posts: 16109
Joined: October 11th, 2010, 6:27 pm
Location: Gheorgheni, Romania

Re: Web parse skin display issue

Post by balala »

If, as you said Brian:
Stillub wrote:This is the script on the web page from which I am trying to parse values:

Code: Select all

<p>Sensor1-Analog_A2_: <span id="input3">...</span>_Raw_value&&Sensor2-Analog_A3_: <span id="input4">...</span>_Raw_value<p>
is indeed the data from the page, your code works perfectly. It parses exactly what you have on the page:
Here are marked red the parsed strings: <p>Sensor1-Analog_A2_: <span id="[color=#FF0000]input3[/color]">...</span>_Raw_value&&Sensor2-Analog_A3_: <span id="[color=#FF0000]input4[/color]">...</span>_Raw_value<p>
Stratosteel
Posts: 12
Joined: December 13th, 2016, 10:28 pm

Re: Web parse skin display issue

Post by Stratosteel »

Are the quotes supposed to be there? (are they supposed to be captured?)
If not, then this should fix it

Code: Select all

(?siU)<p>Sensor1-Analog_A2_: <span id="(.*)">.*Sensor2-Analog_A3_: <span id="(.*)">
I'm getting confused, what exactly is the expected result?
User avatar
Stillub
Posts: 17
Joined: December 30th, 2017, 2:38 pm

Re: Web parse skin display issue

Post by Stillub »

Thank you all for the reply's! Much appreciated.

What I am looking for is to have the sensor values displayed numerically, which when properly calibrated, will reflect Temperature in Celsius.

If you look at the screen shot showing the web script, you will see 3 dots between the symbols (>...<), that is where the numbers appear on the page when opened in a browser.
Because the numbers are not yet calibrated, they are actual RAW sensor values, they at room temperature, display a number of 150 or so. When I open the web page, I can see the displayed numbers fluctuate with temperature change. I tried writing the RegExp to specifically capture those 3 dots and nothing else, but the result was... 3 dots and nothing else. Temperature readings (calibrated) can vary anywhere from -20 to + 120 or so.


Brian
User avatar
balala
Rainmeter Sage
Posts: 16109
Joined: October 11th, 2010, 6:27 pm
Location: Gheorgheni, Romania

Re: Web parse skin display issue

Post by balala »

Stillub wrote:What I am looking for is to have the sensor values displayed numerically, which when properly calibrated, will reflect Temperature in Celsius.
Try the following RegExp option, into the [MeasureParent] measure: RegExp=(?siU)<p>Sensor1-Analog_A2_: <span id="input3">(.*)</span>_Raw_value&&Sensor2-Analog_A3_: <span id="input4">(.*)</span>_Raw_value<p>
User avatar
Stillub
Posts: 17
Joined: December 30th, 2017, 2:38 pm

Re: Web parse skin display issue

Post by Stillub »

Thanks for the suggestion. Unfortunately, it didn't resolve the issue. I just see the 3 dots...
Screen shot:
Image

This is how the web page appears in a browser. The sensor values are 142 and 145:
Image
User avatar
balala
Rainmeter Sage
Posts: 16109
Joined: October 11th, 2010, 6:27 pm
Location: Gheorgheni, Romania

Re: Web parse skin display issue

Post by balala »

Stillub wrote:Thanks for the suggestion. Unfortunately, it didn't resolve the issue. I just see the 3 dots...
Please post the whole code.
User avatar
Stillub
Posts: 17
Joined: December 30th, 2017, 2:38 pm

Re: Web parse skin display issue

Post by Stillub »

Not sure which code you are asking for? Html?

Code: Select all

<!DOCTYPE html>
<html>
    <head>
        <title>My Arduino</title>
        <script>
		
		var A1_val =0;
		var A2_val =0;
		var data_val = 0;		// A2 raw data from Arduino analog input (0 to 1023)
		var data_val2 = 0;      // A3 raw data from Arduino analog input (0 to 1023)
		var data_val3 = 0;      // A3 raw data from Arduino analog input (0 to 1023)
		var data_val4 = 0;      // A3 raw data from Arduino analog input (0 to 1023)
		var data_val5 = 0;      // A3 raw data from Arduino analog input (0 to 1023)
		var sensor1 = 0;        // input for ThingSpeak
		var sensor2 = 0;	    // input for ThingSpeak
		var num_updates = 0;	// number of 200ms periods used to calculate time to send data to ThingSpeak
		                        // gauge code starts......below
		var Gauge=function(b){function l(a,b){for(var c in b)"object"==typeof b[c]&&"[object Array]"!==Object.prototype.toString.call(b[c])&&"renderTo"!=c?("object"!=typeof a[c]&&(a[c]={}),l(a[c],b[c])):a[c]=b[c]}function q(){z.width=b.width;z.height=b.height;A=z.cloneNode(!0);B=A.getContext("2d");C=z.width;D=z.height;t=C/2;u=D/2;f=t<u?t:u;A.i8d=!1;B.translate(t,u);B.save();a.translate(t,u);a.save()}function v(a){var b=new Date;G=setInterval(function(){var c=(new Date-b)/a.duration;1<c&&(c=1);var f=("function"==
typeof a.delta?a.delta:M[a.delta])(c);a.step(f);1==c&&clearInterval(G)},a.delay||10)}function k(){G&&clearInterval(G);var a=I-n,h=n,c=b.animation;v({delay:c.delay,duration:c.duration,delta:c.fn,step:function(b){n=parseFloat(h)+a*b;E.draw()}})}function e(a){return a*Math.PI/180}function g(b,h,c){c=a.createLinearGradient(0,0,0,c);c.addColorStop(0,b);c.addColorStop(1,h);return c}function p(){var m=93*(f/100),h=f-m,c=91*(f/100),e=88*(f/100),d=85*(f/100);a.save();b.glow&&(a.shadowBlur=h,a.shadowColor=
"rgba(0, 0, 0, 0.5)");a.beginPath();a.arc(0,0,m,0,2*Math.PI,!0);a.fillStyle=g("#ddd","#aaa",m);a.fill();a.restore();a.beginPath();a.arc(0,0,c,0,2*Math.PI,!0);a.fillStyle=g("#fafafa","#ccc",c);a.fill();a.beginPath();a.arc(0,0,e,0,2*Math.PI,!0);a.fillStyle=g("#eee","#f0f0f0",e);a.fill();a.beginPath();a.arc(0,0,d,0,2*Math.PI,!0);a.fillStyle=b.colors.plate;a.fill();a.save()}function w(a){var h=!1;a=0===b.majorTicksFormat.dec?Math.round(a).toString():a.toFixed(b.majorTicksFormat.dec);return 1<b.majorTicksFormat["int"]?
(h=-1<a.indexOf("."),-1<a.indexOf("-")?"-"+(b.majorTicksFormat["int"]+b.majorTicksFormat.dec+2+(h?1:0)-a.length)+a.replace("-",""):""+(b.majorTicksFormat["int"]+b.majorTicksFormat.dec+1+(h?1:0)-a.length)+a):a}function d(){var m=81*(f/100);a.lineWidth=2;a.strokeStyle=b.colors.majorTicks;a.save();if(0===b.majorTicks.length){for(var h=(b.maxValue-b.minValue)/5,c=0;5>c;c++)b.majorTicks.push(w(b.minValue+h*c));b.majorTicks.push(w(b.maxValue))}for(c=0;c<b.majorTicks.length;++c)a.rotate(e(45+c*(270/(b.majorTicks.length-
1)))),a.beginPath(),a.moveTo(0,m),a.lineTo(0,m-15*(f/100)),a.stroke(),a.restore(),a.save();b.strokeTicks&&(a.rotate(e(90)),a.beginPath(),a.arc(0,0,m,e(45),e(315),!1),a.stroke(),a.restore(),a.save())}function J(){var m=81*(f/100);a.lineWidth=1;a.strokeStyle=b.colors.minorTicks;a.save();for(var h=b.minorTicks*(b.majorTicks.length-1),c=0;c<h;++c)a.rotate(e(45+c*(270/h))),a.beginPath(),a.moveTo(0,m),a.lineTo(0,m-7.5*(f/100)),a.stroke(),a.restore(),a.save()}function s(){for(var m=55*(f/100),h=0;h<b.majorTicks.length;++h){var c=
F(m,e(45+h*(270/(b.majorTicks.length-1))));a.font=20*(f/200)+"px Arial";a.fillStyle=b.colors.numbers;a.lineWidth=0;a.textAlign="center";a.fillText(b.majorTicks[h],c.x,c.y+3)}}function x(a){var h=b.valueFormat.dec,c=b.valueFormat["int"];a=parseFloat(a);var f=0>a;a=Math.abs(a);if(0<h){a=a.toFixed(h).toString().split(".");h=0;for(c-=a[0].length;h<c;++h)a[0]="0"+a[0];a=(f?"-":"")+a[0]+"."+a[1]}else{a=Math.round(a).toString();h=0;for(c-=a.length;h<c;++h)a="0"+a;a=(f?"-":"")+a}return a}function F(a,b){var c=
Math.sin(b),f=Math.cos(b);return{x:0*f-a*c,y:0*c+a*f}}function N(){a.save();for(var m=81*(f/100),h=m-15*(f/100),c=0,g=b.highlights.length;c<g;c++){var d=b.highlights[c],r=(b.maxValue-b.minValue)/270,k=e(45+(d.from-b.minValue)/r),r=e(45+(d.to-b.minValue)/r);a.beginPath();a.rotate(e(90));a.arc(0,0,m,k,r,!1);a.restore();a.save();var l=F(h,k),p=F(m,k);a.moveTo(l.x,l.y);a.lineTo(p.x,p.y);var p=F(m,r),n=F(h,r);a.lineTo(p.x,p.y);a.lineTo(n.x,n.y);a.lineTo(l.x,l.y);a.closePath();a.fillStyle=d.color;a.fill();
a.beginPath();a.rotate(e(90));a.arc(0,0,h,k-0.2,r+0.2,!1);a.restore();a.closePath();a.fillStyle=b.colors.plate;a.fill();a.save()}}function K(){var m=12*(f/100),h=8*(f/100),c=77*(f/100),d=20*(f/100),k=4*(f/100),r=2*(f/100),l=function(){a.shadowOffsetX=2;a.shadowOffsetY=2;a.shadowBlur=10;a.shadowColor="rgba(188, 143, 143, 0.45)"};l();a.save();n=0>n?Math.abs(b.minValue-n):0<b.minValue?n-b.minValue:Math.abs(b.minValue)+n;a.rotate(e(45+n/((b.maxValue-b.minValue)/270)));a.beginPath();a.moveTo(-r,-d);a.lineTo(-k,
0);a.lineTo(-1,c);a.lineTo(1,c);a.lineTo(k,0);a.lineTo(r,-d);a.closePath();a.fillStyle=g(b.colors.needle.start,b.colors.needle.end,c-d);a.fill();a.beginPath();a.lineTo(-0.5,c);a.lineTo(-1,c);a.lineTo(-k,0);a.lineTo(-r,-d);a.lineTo(r/2-2,-d);a.closePath();a.fillStyle="rgba(255, 255, 255, 0.2)";a.fill();a.restore();l();a.beginPath();a.arc(0,0,m,0,2*Math.PI,!0);a.fillStyle=g("#f0f0f0","#ccc",m);a.fill();a.restore();a.beginPath();a.arc(0,0,h,0,2*Math.PI,!0);a.fillStyle=g("#e8e8e8","#f5f5f5",h);a.fill()}
function L(){a.save();a.font=40*(f/200)+"px Led";var b=x(y),h=a.measureText("-"+x(0)).width,c=f-33*(f/100),g=0.12*f;a.save();var d=-h/2-0.025*f,e=c-g-0.04*f,h=h+0.05*f,g=g+0.07*f,k=0.025*f;a.beginPath();a.moveTo(d+k,e);a.lineTo(d+h-k,e);a.quadraticCurveTo(d+h,e,d+h,e+k);a.lineTo(d+h,e+g-k);a.quadraticCurveTo(d+h,e+g,d+h-k,e+g);a.lineTo(d+k,e+g);a.quadraticCurveTo(d,e+g,d,e+g-k);a.lineTo(d,e+k);a.quadraticCurveTo(d,e,d+k,e);a.closePath();d=a.createRadialGradient(0,c-0.12*f-0.025*f+(0.12*f+0.045*f)/
2,f/10,0,c-0.12*f-0.025*f+(0.12*f+0.045*f)/2,f/5);d.addColorStop(0,"#888");d.addColorStop(1,"#666");a.strokeStyle=d;a.lineWidth=0.05*f;a.stroke();a.shadowBlur=0.012*f;a.shadowColor="rgba(0, 0, 0, 1)";a.fillStyle="#babab2";a.fill();a.restore();a.shadowOffsetX=0.004*f;a.shadowOffsetY=0.004*f;a.shadowBlur=0.012*f;a.shadowColor="rgba(0, 0, 0, 0.3)";a.fillStyle="#444";a.textAlign="center";a.fillText(b,-0,c);a.restore()}Gauge.Collection.push(this);this.config={renderTo:null,width:200,height:200,title:!1,
maxValue:100,minValue:0,majorTicks:[],minorTicks:10,strokeTicks:!0,units:!1,valueFormat:{"int":3,dec:2},majorTicksFormat:{"int":1,dec:0},glow:!0,animation:{delay:10,duration:250,fn:"cycle"},colors:{plate:"#fff",majorTicks:"#444",minorTicks:"#666",title:"#888",units:"#888",numbers:"#444",needle:{start:"rgba(240, 128, 128, 1)",end:"rgba(255, 160, 122, .9)"}},highlights:[{from:20,to:60,color:"#eee"},{from:60,to:80,color:"#ccc"},{from:80,to:100,color:"#999"}]};var y=0,E=this,n=0,I=0,H=!1;this.setValue=
function(a){n=b.animation?y:a;var d=(b.maxValue-b.minValue)/100;I=a>b.maxValue?b.maxValue+d:a<b.minValue?b.minValue-d:a;y=a;b.animation?k():this.draw();return this};this.setRawValue=function(a){n=y=a;this.draw();return this};this.clear=function(){y=n=I=this.config.minValue;this.draw();return this};this.getValue=function(){return y};this.onready=function(){};l(this.config,b);this.config.minValue=parseFloat(this.config.minValue);this.config.maxValue=parseFloat(this.config.maxValue);b=this.config;n=
y=b.minValue;if(!b.renderTo)throw Error("Canvas element was not specified when creating the Gauge object!");var z=b.renderTo.tagName?b.renderTo:document.getElementById(b.renderTo),a=z.getContext("2d"),A,C,D,t,u,f,B;q();this.updateConfig=function(a){l(this.config,a);q();this.draw();return this};var M={linear:function(a){return a},quad:function(a){return Math.pow(a,2)},quint:function(a){return Math.pow(a,5)},cycle:function(a){return 1-Math.sin(Math.acos(a))},bounce:function(a){a:{a=1-a;for(var b=0,
c=1;;b+=c,c/=2)if(a>=(7-4*b)/11){a=-Math.pow((11-6*b-11*a)/4,2)+Math.pow(c,2);break a}a=void 0}return 1-a},elastic:function(a){a=1-a;return 1-Math.pow(2,10*(a-1))*Math.cos(30*Math.PI/3*a)}},G=null;a.lineCap="round";this.draw=function(){if(!A.i8d){B.clearRect(-t,-u,C,D);B.save();var g={ctx:a};a=B;p();N();J();d();s();b.title&&(a.save(),a.font=24*(f/200)+"px Arial",a.fillStyle=b.colors.title,a.textAlign="center",a.fillText(b.title,0,-f/4.25),a.restore());b.units&&(a.save(),a.font=22*(f/200)+"px Arial",
a.fillStyle=b.colors.units,a.textAlign="center",a.fillText(b.units,0,f/3.25),a.restore());A.i8d=!0;a=g.ctx;delete g.ctx}a.clearRect(-t,-u,C,D);a.save();a.drawImage(A,-t,-u,C,D);if(Gauge.initialized)L(),K(),H||(E.onready&&E.onready(),H=!0);else var e=setInterval(function(){Gauge.initialized&&(clearInterval(e),L(),K(),H||(E.onready&&E.onready(),H=!0))},10);return this}};Gauge.initialized=!1;
(function(){var b=document,l=b.getElementsByTagName("head")[0],q=-1!=navigator.userAgent.toLocaleLowerCase().indexOf("msie"),v="@font-face {font-family: 'Led';src: url('fonts/digital-7-mono."+(q?"eot":"ttf")+"');}",k=b.createElement("style");k.type="text/css";if(q)l.appendChild(k),l=k.styleSheet,l.cssText=v;else{try{k.appendChild(b.createTextNode(v))}catch(e){k.cssText=v}l.appendChild(k);l=k.styleSheet?k.styleSheet:k.sheet||b.styleSheets[b.styleSheets.length-1]}var g=setInterval(function(){if(b.body){clearInterval(g);
var e=b.createElement("div");e.style.fontFamily="Led";e.style.position="absolute";e.style.height=e.style.width=0;e.style.overflow="hidden";e.innerHTML=".";b.body.appendChild(e);setTimeout(function(){Gauge.initialized=!0;e.parentNode.removeChild(e)},250)}},1)})();Gauge.Collection=[];
Gauge.Collection.get=function(b){if("string"==typeof b)for(var l=0,q=this.length;l<q;l++){if((this[l].config.renderTo.tagName?this[l].config.renderTo:document.getElementById(this[l].config.renderTo)).getAttribute("id")==b)return this[l]}else return"number"==typeof b?this[b]:null};function domReady(b){window.addEventListener?window.addEventListener("DOMContentLoaded",b,!1):window.attachEvent("onload",b)}
domReady(function(){function b(b){for(var e=b[0],d=1,g=b.length;d<g;d++)e+=b[d].substr(0,1).toUpperCase()+b[d].substr(1,b[d].length-1);return e}for(var l=document.getElementsByTagName("canvas"),q=0,v=l.length;q<v;q++)if("canv-gauge"==l[q].getAttribute("data-type")){var k=l[q],e={},g,p=parseInt(k.getAttribute("width"),10),w=parseInt(k.getAttribute("height"),10);e.renderTo=k;p&&(e.width=p);w&&(e.height=w);p=0;for(w=k.attributes.length;p<w;p++)if(g=k.attributes.item(p).nodeName,"data-type"!=g&&"data-"==
g.substr(0,5)){var d=g.substr(5,g.length-5).toLowerCase().split("-");if(g=k.getAttribute(g))switch(d[0]){case "colors":d[1]&&(e.colors||(e.colors={}),"needle"==d[1]?(d=g.split(/\s+/),e.colors.needle=d[0]&&d[1]?{start:d[0],end:d[1]}:g):(d.shift(),e.colors[b(d)]=g));break;case "highlights":e.highlights||(e.highlights=[]);g=g.match(/(?:(?:-?\d*\.)?(-?\d+){1,2} ){2}(?:(?:#|0x)?(?:[0-9A-F|a-f]){3,8}|rgba?\(.*?\))/g);for(var d=0,J=g.length;d<J;d++){var s=g[d].replace(/^\s+|\s+$/g,"").split(/\s+/),x={};
s[0]&&""!=s[0]&&(x.from=s[0]);s[1]&&""!=s[1]&&(x.to=s[1]);s[2]&&""!=s[2]&&(x.color=s[2]);e.highlights.push(x)}break;case "animation":d[1]&&(e.animation||(e.animation={}),"fn"==d[1]&&/^\s*function\s*\(/.test(g)&&(g=eval("("+g+")")),e.animation[d[1]]=g);break;default:d=b(d);if("onready"==d)continue;if("majorTicks"==d)g=g.split(/\s+/);else if("strokeTicks"==d||"glow"==d)g="true"==g?!0:!1;else if("valueFormat"==d)if(g=g.split("."),2==g.length)g={"int":parseInt(g[0],10),dec:parseInt(g[1],10)};else continue;
e[d]=g}}e=new Gauge(e);k.getAttribute("data-value")&&e.setRawValue(parseFloat(k.getAttribute("data-value")));k.getAttribute("data-onready")&&(e.onready=function(){eval(this.config.renderTo.getAttribute("data-onready"))});e.draw()}});window.Gauge=Gauge;
<!-- Gauge Code Ends -->
        
		// function called periodically to get analog value from Arduino using Ajax
		function GetArduinoInputs()
		{
			nocache = "&nocache=" + Math.random() * 1000000;
			var request = new XMLHttpRequest();
			request.onreadystatechange = function()
			{
				if (this.readyState == 4) {
					if (this.status == 200) {
						if (this.responseXML != null) {
						        document.getElementById("input3").innerHTML =
								this.responseXML.getElementsByTagName('analog')[0].childNodes[0].nodeValue;
							    document.getElementById("input4").innerHTML =
								this.responseXML.getElementsByTagName('analog')[1].childNodes[0].nodeValue;	
							 // Analog input from A2, A3
								data_val = this.responseXML.getElementsByTagName('analog')[0].childNodes[0].nodeValue;
								data_val2 = this.responseXML.getElementsByTagName('analog')[1].childNodes[0].nodeValue;
								data_val3 = this.responseXML.getElementsByTagName('analog')[1].childNodes[0].nodeValue;
								data_val4 = this.responseXML.getElementsByTagName('analog')[1].childNodes[0].nodeValue;
								data_val5 = this.responseXML.getElementsByTagName('analog')[1].childNodes[0].nodeValue;
								A1_val = this.responseXML.getElementsByTagName('analog')[0].childNodes[0].nodeValue;
								A2_val = this.responseXML.getElementsByTagName('analog')[1].childNodes[0].nodeValue;
								// calculate voltage
								//volts = data_val * 5 / 1023; not required in this version
								// Calibration for guage display
								data_val  = ((data_val * 5.0 / 1024.0) - 0.5) / 0.01;
                                data_val2 = ((data_val2 * 5.0 / 1024.0) - 0.5) / 0.01;
								data_val3 = ((data_val3 * 5.0 / 1024.0) - 0.5) / 0.01;
								data_val4 = ((data_val4 * 5.0 / 1024.0) - 0.5) / 0.01;
								data_val5 = ((data_val5 * 5.0 / 1024.0) - 0.5) / 0.01;
								// Calibration for sensor output
								sensor1 = A1_val * 150 / 1023;
								sensor2 = A2_val * 150 / 1023;
								// only send data to ThingSpeak every 20 seconds or 100 x 200ms
								if (num_updates >= 100) {
									num_updates = 0;
									// send Data to ThingSpeak
									ThingSpeakSend("xxxxxxxxxxxxxxxx");	// insert your ThingSpeak Write API Key here
								}
								num_updates++;
						}
					}
				}
			}
			request.open("GET", "ajax_inputs" + nocache, true);
			request.send(null);
			setTimeout('GetArduinoInputs()', 3000);	// send the request for Arduino analog data every 200ms
			
		}
		// function to send data to ThingSpeak
		function ThingSpeakSend(api_write_key, temperature)
		{
			var ts_req = new XMLHttpRequest();
			// GET request string - modify if more fields are needed
			var req_str = "http://api.thingspeak.com/update?key=" + api_write_key + "&field1=" + sensor1 + "&field2=" + sensor2;
			ts_req.onreadystatechange = function()
			{
				// not doing anything with response from ThingSpeak
			}
			// send the data to ThingSpeak
			ts_req.open("GET", req_str, true);
			ts_req.send(null);
		}
	</script>
    </head>
    <body onload="GetArduinoInputs()">
	<center>
        <h1>Temperature Display</h1>
	
   <center>
	<table id="table1"><tr>
	<h1><i><p>My_Arduino</p></i></h1>
	</tr></table>
	<table id="table2"><tr>
      <td><canvas id="an_gauge_1" data-title="Tank_R1" data-units="Temp. &deg;C" width="200" height="200" data-major-ticks="-40 -30 -20 -10 0 10 20 30 40 50 60 70 80 90 100 110 120 130 140 150" data-type="canv-gauge" data-min-value="-40" data-max-value="150" data-highlights="-40 0 #4D89F2, 0 10 #25B8D9, 10 30 #0BB950, 30 40 #cc5, 40 150 #f33" data-onready="setInterval( function() { Gauge.Collection.get('an_gauge_1').setValue(data_val);}, 200);"></canvas>
          <canvas id="an_gauge_2" data-title="Roof" data-units="Temp. &deg;C" width="225" height="225" data-major-ticks="-40 -30 -20 -10 0 10 20 30 40 50 60 70 80 90 100 110 120 130 140 150" data-type="canv-gauge" data-min-value="-40" data-max-value="150" data-highlights="-40 0 #4D89F2, 0 10 #25B8D9, 10 30 #0BB950, 30 40 #cc5, 40 150 #f33" data-onready="setInterval( function() { Gauge.Collection.get('an_gauge_2').setValue(data_val2);}, 200);"></canvas>
          <canvas id="an_gauge_3" data-title="Tank_R2" data-units="Temp. &deg;C" width="200" height="200" data-major-ticks="-40 -30 -20 -10 0 10 20 30 40 50 60 70 80 90 100 110 120 130 140 150" data-type="canv-gauge" data-min-value="-40" data-max-value="150" data-highlights="-40 0 #4D89F2, 0 10 #25B8D9, 10 30 #0BB950, 30 40 #cc5, 40 150 #f33" data-onready="setInterval( function() { Gauge.Collection.get('an_gauge_3').setValue(data_val3);}, 200);"></canvas></td>
    </tr></table>
	
    <table id="table3"><tr>
    <td>  <canvas id="an_gauge_4" data-title="Greenhouse" data-units="Temp. &deg;C" width="200" height="220" data-major-ticks="-40 -30 -20 -10 0 10 20 30 40 50 60 70 80 90 100 110 120 130 140 150" data-type="canv-gauge" data-min-value="-40" data-max-value="150" data-highlights="-40 0 #4D89F2, 0 10 #25B8D9, 10 30 #0BB950, 30 40 #cc5, 40 150 #f33" data-onready="setInterval( function() { Gauge.Collection.get('an_gauge_4').setValue(data_val4);}, 200);"></canvas>
          <canvas id="an_gauge_5" data-title="Garage" data-units="Temp. &deg;C" width="200" height="220" data-major-ticks="-40 -30 -20 -10 0 10 20 30 40 50 60 70 80 90 100 110 120 130 140 150" data-type="canv-gauge" data-min-value="-40" data-max-value="150" data-highlights="-40 0 #4D89F2, 0 10 #25B8D9, 10 30 #0BB950, 30 40 #cc5, 40 150 #f33" data-onready="setInterval( function() { Gauge.Collection.get('an_gauge_5').setValue(data_val5);}, 200);"></canvas></td>
    </tr></table>
	</center>
	<center><a href="http://overclocxxxdoc.com/graph/grxxhs.xxx">Temperature Graphs</a>
	<center>
	<p>Sensor1-Analog_A2_: <span id="input3">...</span>_Raw_value&&Sensor2-Analog_A3_: <span id="input4">...</span>_Raw_value<p>
		
	</center>	
	</body>
</html>

Post Reply