Jump to content

Ser8191

User
 View Profile  See their activity

  • Posts

    34

  • Joined

  • Last visited

 Content Type 

Everything posted by Ser8191

  1. Ser8191
    Здравствуйте. Подскажите пожалуйста в чём дело? function on() { var XHR = ("onload" in new XMLHttpRequest()) ? XMLHttpRequest : XDomainRequest; var xhr = new XHR(); xhr.open('GET', 'http://192.168.0.91/gpio/1', true); xhr.setRequestHeader('Origin','http://192.168.0.39'); xhr.onload = function() { document.getElementById("text").innerText=this.responseText; } xhr.onerror = function() { document.getElementById("text").innerText=this.status; } xhr.send(); } Сервер отвечает HTTP/1.1 200 OK Content-Type:text/html; charset=UTF-8 Access-Control-Allow-Origin: * <!DOCTYPE HTML> .... ..... ...... В консоли браузера Refused to set unsafe header "Origin"
  2. Ser8191
    Здравствуйте. <div id="qaz" class="Pv100" onmousedown="myFunction()" onmouseup="myFunction1()"></div> function myFunction() { document.getElementById("qaz").style.backgroundColor="#FFD800"; } function myFunction1() { document.getElementById("qaz").style.backgroundColor="#FF0000"; } В браузере на компьютере работает как положено, на телефоне если нажать и отпустить только красный цвет, жёлтого нет, почему?
  3. Ser8191
    Уважаемые мастера, подскажите: <!DOCTYPE html> <html> <head> <title>Canvas from scratch</title> <meta charset="utf-8"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script> $(document).ready(function() { var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); var lverx = document.getElementById("lverx"); lverx.onload = function() { ctx.drawImage(lverx, 0, 0, 200, 83); } var pverx = document.getElementById("pverx"); pverx.onload = function() { ctx.drawImage(pverx, 200, 0, 200, 83); } var lniz = document.getElementById("lniz"); lniz.onload = function() { ctx.drawImage(lniz, 0, 83, 200, 83); } var pniz = document.getElementById("pniz"); pniz.onload = function() { ctx.drawImage(pniz, 200, 83, 200, 83); } }); </script> </head> <body> <canvas id="myCanvas" width="400" height="200"></canvas> <img id="lverx" src="01.png" style="display:none;" /> <img id="pverx" src="02.png" style="display:none;" /> <img id="lniz" src="03.png" style="display:none;" /> <img id="pniz" src="04.png" style="display:none;" /> </body> </html> Как при нажатии на, к примеру, эту var lverx = document.getElementById("lverx"); lverx.onload = function() { ctx.drawImage(lverx, 0, 0, 200, 83); картинку выполнить нужную функцию и заменить эту картинку на другую.
  4. Ser8191
    Уважаемые мастера, подскажите пожалуйста. <!doctype htm> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Gauge Test</title> <script src="../gauge.min.js"></script> <style>body { padding: 0; margin: 0; background: #000000 }</style> </head> <body onload="dR()"> <div id="obr"><canvas id="gauge-ob"></canvas></div> <script> var yyy; var o=new XMLHttpRequest(); function dR() { o.open("GET","text.txt?r="+Math.random(),1); o.onload=function(){ var a=this.responseText.replace(/\s*[\r\n=]+\s*/g, "=").replace(/^\s+/,"").replace(/\s+$/,"").match( /([^=]+)/g); for (var i=0, len=a.length; i< len; i+=2) try { document.getElementById(a[i]).innerText=a[i+1]; } catch(e) {}; setTimeout("dR()", 500); gaugeP1S.value = document.getElementById("ob").innerText; yyy =gaugeP1S.value; console.log(yyy); //Выводится значение 4300 (оно указано в text.txt) (соответственно и стрелка кажется 4300) } o.send(); } var gaugeP1S = new RadialGauge({ renderTo: 'gauge-ob', width: 400, height: 400, units: 'Об/мин', minValue: 0, maxValue: 6000, majorTicks: [ '0', '1000', '2000', '3000', '4000', '5000', '6000', ], minorTicks: 10, ticksAngle: 270, startAngle: 45, strokeTicks: true, highlights : [ { from : 0, to : yyy, color : 'rgba(255, 0, 0, 0.3)' }, //Здесь первое число 0 второе число 4300 (переменная yyy) От 0 до 4300 шкала красится в красный цвет, но этого не происходит. //Если в самом начале скрипта указываю var yyy=4300; вместо var yyy; , всё работет. Что я не так сделал? ], valueInt: 3, valueDec: 0, colorPlate: "#000000", colorMajorTicks: "#FF0000", colorMinorTicks: "#FF0000", colorTitle: "#FFFFFF", colorUnits: "#FFFFFF", colorNumbers: "#FFFFFF", valueBox: true, colorValueText: "#FFFFFF", colorValueBoxRect: "#000000", colorValueBoxRectEnd: "#000000", colorValueBoxBackground: "#000000", colorValueBoxShadow: false, colorValueTextShadow: false, colorNeedleShadowUp: true, colorNeedleShadowDown: false, colorNeedle: "#FF0000", colorNeedleEnd: "#FF0000", colorNeedleCircleOuter: "#FF0000", colorNeedleCircleOuterEnd: "#FF0000", borderShadowWidth: 0, borders: 0, borderInnerWidth: 0, borderMiddleWidth: 0, borderOuterWidth: 5, colorBorderOuter: "#FF0000", colorBorderOuterEnd: "#FF0000", needleType: "arrow", needleWidth: 2, needleCircleSize: 7, needleCircleOuter: true, needleCircleInner: false, animationDuration: 1500, animationRule: "dequint", fontNumbers: "Verdana", fontTitle: "Verdana", fontUnits: "Verdana", fontValue: "Led", fontValueStyle: 'italic', fontNumbersSize: 15, fontNumbersStyle: 'italic', fontNumbersWeight: 'bold', fontTitleSize: 24, fontUnitsSize: 22, fontValueSize: 50, animatedValue: false }); gaugeP1S.draw(); </script> <font color="#FFFFFF"><span id="ob"></span></font> </body> </html>
  5. Ser8191
    Здравствуйте многоуважаемые. Подскажите как доработать нижеприведённый мною скрипт: <html> <head> <title>Cool dynamic page!!!</title> <script language="JavaScript"> var img = new Array('off.png','on.png'); var i; function gmi(id,nom) { i=(i==1)?0:1; console.log('Кнопка:'+id+' Значние:'+i); document.getElementById(id).src=img[i]; } </script> </head> <body> <p><img id="km1" src="off.png" onclick="gmi(this.id,0)"></p> <p><img id="im2" src="off.png" onclick="gmi(this.id,1)"></p> <p><img id="im3" src="off.png" onclick="gmi(this.id,2)"></p> </body> </html> Если кнопка km1 = 1 то при нажатии на kn2 сначало i=0 а потом i=1 нуу понятно.. Как мне сделать массив переменной i, т.е. i[1],i[2],i[3]...где 1,2,3 это кнопки (nom)
  6. Ser8191
    <!DOCTYPE html> <html> <head> <title>Arduino Two Temperatures</title> <script> var data_val = 0; var data_val2 = 0; <!-- Gauge Code Starts --> 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 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) { data_val = this.responseXML.getElementsByTagName('analog')[0].childNodes[0].nodeValue; data_val2 = this.responseXML.getElementsByTagName('analog')[1].childNodes[0].nodeValue; data_val = ((data_val * 5.0 / 1024.0) - 0.5) / 0.01; data_val2 = ((data_val2 * 5.0 / 1024.0) - 0.5) / 0.01; } } } } request.open("GET", "ajax_inputs" + nocache, true); request.send(null); setTimeout('GetArduinoInputs()', 200); } </script> </head> <body onload="GetArduinoInputs()"> <h1>Arduino Two Temperatures</h1> <canvas id="an_gauge_1" data-title="Inside" data-units="Temp. &deg;C" width="500" height="500" 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="Outside" data-units="Temp. &deg;C" width="500" height="500" 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> </body> </html> Вот более хороший" скрипт. За показания термометров отвечают переменные data_val data_val2 и т.д. в зависимости от количества термометров. Не понимаю как в Вашем скрипте получить значение в переменную data_val
  7. Ser8191
    Не так выразился. Таких термометров будет несколько. И несколько строк с температурой, цифровой. Нужно чтобы и термометры и цифры казали.
  8. Ser8191
    Great Rash, большое Спасибо. Работает. Только обязательно нужно <p><b>Температура в комнате = <span id="komnata"></span> &#176;C</b></p> если убираю, не работает. А мне надо что-то одно, либо графический, либо цифровой.
  9. Ser8191
    Приветствую. Уважаемы мастера и знатоки своего дела, подскажите пожалуйста или помогите пожалуйста организовать следующее <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Gauge Test</title> <script>var CANV_GAUGE_FONTS_PATH = '../fonts'</script> <script src="../gauge.min.js"></script> </head> <body onload="dR()"> <canvas id="gauge"></canvas> <div id="console"></div> <script> //////////////////Настройки графического термометра////////////////// var gauge = new Gauge({ renderTo : 'gauge', width : 300, height : 300, glow : true, units : 'Km/h', title : false, minValue : 0, maxValue : 1200, majorTicks : ['0','100','200','300','400','500','600','700','800','900','1000','1100','1200'], minorTicks : 2, strokeTicks : false, highlights : [ { from : 0, to : 100, color : 'rgba(0, 255, 0, .15)' }, { from : 100, to : 200, color : 'rgba(255, 255, 0, .15)' }, { from : 200, to : 300, color : 'rgba(255, 30, 0, .25)' }, { from : 300, to : 400, color : 'rgba(255, 0, 225, .25)' }, { from : 400, to : 500, color : 'rgba(0, 0, 255, .25)' }, { from : 500, to : 600, color : 'rgba(0, 0, 255, .25)' }, { from : 600, to : 700, color : 'rgba(0, 0, 255, .25)' }, { from : 700, to : 800, color : 'rgba(0, 0, 255, .25)' }, { from : 800, to : 900, color : 'rgba(0, 0, 255, .25)' }, { from : 900, to : 1000, color : 'rgba(0, 0, 255, .25)' }, { from : 1000, to : 1100, color : 'rgba(0, 0, 255, .25)' }, { from : 1100, to : 1200, color : 'rgba(0, 0, 255, .25)' }, ], colors : { plate : '#222', majorTicks : '#f5f5f5', minorTicks : '#ddd', title : '#fff', units : '#ccc', numbers : '#eee', needle : { start : 'rgba(240, 128, 128, 1)', end : 'rgba(255, 160, 122, .9)' } } }); //Это изначальный вариант как в примере /* gauge.onready = function() { setInterval( function() { gauge.setValue( Math.random() * 1200); }, 1000); };*/ gauge.draw(); /*window.onresize= function() { gauge.updateConfig({ width : document.body.offsetWidth, height : document.body.offsetHeight }); };*/ //////////////////Получаем данные из data.txt////////////////// var o=new XMLHttpRequest(); function dR() { o.open("GET","data.txt?r="+Math.random(),1); o.onload=function(){ var a=this.responseText.replace(/\s*[\r\n=]+\s*/g, "=").replace(/^\s+/,"").replace(/\s+$/,"").match( /([^=]+)/g); for (var i=0, len=a.length; i< len; i+=2) try { document.getElementById(a[i]).innerText=a[i+1]; } catch(e) {}; setTimeout("dR()", 500); } o.send(); } </script> <script type="text/javascript"> //Значение будет не случайным, а моим, которое я получаю из data.txt //Если указать так //gauge.setValue( 120); //то всё работает, стрелка кажет 120 //но если делаю так //gauge.setValue(<span id="komnata"></span>); //то ничего не получается, а очень хотелось бы </script> <!-- <p><b>Температура в комнате = <span id="komnata"></span> &#176;C</b></p> --> </body> </html> Во вложенном архиве три файла example-resize.html, собственно код которого я указал выше gauge.min.js data.txt, в котором всего одна строчка "komnata = 200" (без кавычек) А что не получается указано в коде выше. termo.zip
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept