Шаблон класса / Class Template

Новые релизы, обновления и т.п.

Модератор: immortal

NightShock
Сообщения: 44
Зарегистрирован: Пт авг 24, 2018 6:09 pm
Благодарил (а): 7 раз
Поблагодарили: 23 раза

Re: Шаблон класса / Class Template

Сообщение NightShock » Пт авг 31, 2018 2:52 am

Шаблон кидал я в группу. Но что самое забавное - обратная связь у меня не работает)))
https://youtu.be/EfaGFYu2m9E
СпойлерПоказать
Изображение
Аватара пользователя
nick7zmail
Сообщения: 7573
Зарегистрирован: Пн окт 28, 2013 8:14 am
Откуда: Екатеринбург
Благодарил (а): 121 раз
Поблагодарили: 2010 раз

Re: Шаблон класса / Class Template

Сообщение nick7zmail » Пт авг 31, 2018 6:18 am

tarasfrompir1 писал(а):
Чт авг 30, 2018 12:19 pm
по поводу обратной связи - https://youtu.be/xZJi5J-Msv4 - вот видео
Див не дергается - только заменяется картинка лампочки
В чем я туплю...???
Это не картинка меняется...это по-моему тоже div обновляется. Просто он это делает быстро, и по-этому разницы нет. Попробуйте привязать любой jquery индикатор/прогресс бар с анимацией начального простроения. Эта анимация начинается с нуля при изменении свойства если хоть в 1 месте есть конструкция %Объект.свойство%. Для изменения таких индикаторов в них как правило есть функции, которые так же адекватно анимируют изменение значение, но через, опять же, %объект.свойство% я не могу вытащить значение, т.к. начинает дёргаться div. Пример, который прописан в теме вебсокетов в первом сообщении - тоже не хочет работать. Как забрать в функцию перестроения соответствующее значение без конструкции %Объект.свойство%, либо с конструкцией, но без перестроения div - я не представляю.
Raspberry Pi3+Broadlink+esp8266 (blynk)+AMS
Если вам помогло какое-либо сообщение - не забывайте пользоваться кнопкой "СПАСИБО".
:arrow: Услуги в профиле коннект
>>>>>Мой новый канал на ютутбе, подписывайтесь!<<<<<
Аватара пользователя
tarasfrompir
Сообщения: 3216
Зарегистрирован: Ср мар 02, 2016 8:18 pm
Откуда: Украина Пирятин
Благодарил (а): 223 раза
Поблагодарили: 815 раз

Re: Шаблон класса / Class Template

Сообщение tarasfrompir » Пт авг 31, 2018 8:00 am

<tr>
<td align="left"><div class="vov-cont"><s_><progress value="%TempSensor01.value%" max="100"></progress></s_></div></td>
<td>&nbsp;<span style="font-size:12px; color:orange;">%TempSensor01.value%</span>&nbsp;%</td>
</tr>
такая конструкция работает прекрасно ....
Спасибо нам ПОМОЖЕТ..!
sega6549
Сообщения: 530
Зарегистрирован: Чт авг 20, 2015 11:32 am
Откуда: Ярославль
Благодарил (а): 61 раз
Поблагодарили: 75 раз
Контактная информация:

Re: Шаблон класса / Class Template

Сообщение sega6549 » Пт авг 31, 2018 9:22 am

NightShock писал(а):
Пт авг 31, 2018 2:52 am
Шаблон кидал я в группу. Но что самое забавное - обратная связь у меня не работает)))
https://youtu.be/EfaGFYu2m9E
СпойлерПоказать
Изображение
вот смущает меня что объекты по русски прописаны, хотя не уверен что это влияет
Тут можно задать вопрос по MajorDoMo VK
Канал по MajorDoMo youtube
sega6549
Сообщения: 530
Зарегистрирован: Чт авг 20, 2015 11:32 am
Откуда: Ярославль
Благодарил (а): 61 раз
Поблагодарили: 75 раз
Контактная информация:

Re: Шаблон класса / Class Template

Сообщение sega6549 » Пт авг 31, 2018 9:23 am

как бы сюда знающих людей то заманить...
Тут можно задать вопрос по MajorDoMo VK
Канал по MajorDoMo youtube
Аватара пользователя
tarasfrompir
Сообщения: 3216
Зарегистрирован: Ср мар 02, 2016 8:18 pm
Откуда: Украина Пирятин
Благодарил (а): 223 раза
Поблагодарили: 815 раз

Re: Шаблон класса / Class Template

Сообщение tarasfrompir » Пт авг 31, 2018 3:29 pm

Попробовал прикрутить вот эту штуку - https://majordomo.smartliving.ru/forum/ ... ilit=jqery
работает , но теперь понимаю nick7zmail почему писал что рендерит все время..
Действительно там сделано так что постоянного происходит рендеринг всего табло а не только стрелки...
Даже теперь показометр на ноль не прыгает, но вреравно рендерит весь показометр

Код: Выделить всё

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script>
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 p(){y.width=b.width;y.height=b.height;z=y.cloneNode(!0);A=z.getContext("2d");C=y.width;D=y.height;w=C/2;x=D/2;f=w<x?w:x;z.i8d=!1;A.translate(w,x);A.save();a.translate(w,x);a.save()};
function B(a){var b=new Date;E=setInterval(function(){var c=(new Date-b)/a.duration;1<c&&(c=1);var d=("function"==typeof a.delta?a.delta:J[a.delta])(c);a.step(d);1==c&&clearInterval(E)},a.delay||10)};
function r(){E&&clearInterval(E);var a=F-t,c=t,d=b.animation;B({delay:d.delay,duration:d.duration,delta:d.fn,step:function(d){t=parseFloat(c)+a*d;b.updateValueOnAnimation?s.setRawValue(t):s.draw()}})};
function c(a){return a*Math.PI/180}
function d(b,c,d){d=a.createLinearGradient(0,0,0,d);d.addColorStop(0,b);d.addColorStop(1,c);return d}
function m(a){var c=!1;a=0===b.majorTicksFormat.dec?Math.round(a).toString():a.toFixed(b.majorTicksFormat.dec);
return 1<b.majorTicksFormat["int"]?(c=-1<a.indexOf("."),-1<a.indexOf("-")?"-"+(b.majorTicksFormat["int"]+b.majorTicksFormat.dec+2+(c?1:0)-a.length)+a.replace("-",""):""+(b.majorTicksFormat["int"]+b.majorTicksFormat.dec+1+(c?1:0)-a.length)+a):a};
function u(a){var c=b.valueFormat.dec,d=b.valueFormat["int"];a=parseFloat(a);var e=0>a;a=Math.abs(a);if(0<c){a=a.toFixed(c).toString().split(".");c=0;for(d-=a[0].length;c<d;++c)a[0]="0"+a[0];a=(e?"-":"")+a[0]+"."+a[1]}else{a=Math.round(a).toString();c=0;for(d-=a.length;c<d;++c)a="0"+a;a=(e?"-":"")+a}return a};
function e(a,b){var c=Math.sin(b),d=Math.cos(b);return{x:0*d-a*c,y:0*c+a*d}};
function v(){var e=f/100*b.needle.circle.size,H=0.75*f/100*b.needle.circle.size,q=f/100*b.needle.end,h=b.needle.start?f/100*b.needle.start:0,k=20*(f/100),G=f/100*b.needle.width,n=f/100*b.needle.width/2,m=function(){a.shadowOffsetX=2;a.shadowOffsetY=2;a.shadowBlur=10;a.shadowColor=b.colors.needle.shadowDown};m();a.save();t=0>t?Math.abs(b.minValue-t):0<b.minValue?t-b.minValue:Math.abs(b.minValue)+t;a.rotate(c(b.startAngle+t/((b.maxValue-b.minValue)/b.ticksAngle)));"arrow"===b.needle.type?(a.beginPath(),a.moveTo(-n,-k),a.lineTo(-G,0),a.lineTo(-1,q),a.lineTo(1,q),a.lineTo(G,0),a.lineTo(n,-k),a.closePath(),a.fillStyle=d(b.colors.needle.start,b.colors.needle.end,q-k),a.fill(),a.beginPath(),a.lineTo(-0.5,q),a.lineTo(-1,q),a.lineTo(-G,0),a.lineTo(-n,-k),a.lineTo(n/2-2,-k),a.closePath(),a.fillStyle=b.colors.needle.shadowUp):(a.beginPath(),a.moveTo(-n,q),a.lineTo(-n,h),a.lineTo(n,
h),a.lineTo(n,q),a.closePath(),a.fillStyle=d(b.colors.needle.start,b.colors.needle.end,q-k));a.fill();a.restore();b.needle.circle&&(m(),b.needle.circle.outer&&(a.beginPath(),a.arc(0,0,e,0,2*Math.PI,!0),a.fillStyle=d(b.colors.needle.circle.outerStart,b.colors.needle.circle.outerEnd,e),a.fill(),a.restore()),b.needle.circle.inner&&(a.beginPath(),a.arc(0,0,H,0,2*Math.PI,!0),a.fillStyle=d(b.colors.needle.circle.innerStart,b.colors.needle.circle.innerEnd,H),a.fill()))}Gauge.Collection.push(this);this.config=
{renderTo:null,width:200,height:200,title:!1,maxValue:100,minValue:0,majorTicks:[],minorTicks:10,ticksAngle:270,startAngle:45,strokeTicks:!0,units:!1,updateValueOnAnimation:!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)",circle:{outerStart:"#f0f0f0",outerEnd:"#ccc",
innerStart:"#e8e8e8",innerEnd:"#f5f5f5"},shadowUp:"rgba(2, 255, 255, 0.2)",shadowDown:"rgba(188, 143, 143, 0.45)"},valueBox:{rectStart:"#888",rectEnd:"#666",background:"#babab2",shadow:"rgba(0, 0, 0, 1)"},valueText:{foreground:"#444",shadow:"rgba(0, 0, 0, 0.3)"},circle:{shadow:"rgba(0, 0, 0, 0.5)",outerStart:"#ddd",outerEnd:"#aaa",middleStart:"#eee",middleEnd:"#f0f0f0",innerStart:"#fafafa",innerEnd:"#ccc"}},needle:{type:"arrow",start:0,end:77,width:4,circle:{size:10,inner:!0,outer:!0}},circles:{outerVisible:!0,
middleVisible:!0,innerVisible:!0},valueBox:{visible:!0},valueText:{visible:!0},highlights:[{from:20,to:60,color:"#eee"},{from:60,to:80,color:"#ccc"},{from:80,to:100,color:"#999"}]};var g=0,s=this,t=0,F=0,I=!1;this.setValue=function(a){t=b.animation?g:a;
var c=(b.maxValue-b.minValue)/100;F=a>b.maxValue?b.maxValue+c:a<b.minValue?b.minValue-c:a;g=a;b.animation?r():this.draw();return this};
                                                                                           
this.setRawValue=function(a){t=g=a;this.draw();return this};
            
this.clear=function(){g=t=F=this.config.minValue;this.draw();return this};

this.getValue=function(){return g};
this.onready=function(){};
l(this.config,b);
b.startAngle=parseInt(b.startAngle,10);
b.ticksAngle=parseInt(b.ticksAngle,10);isNaN(b.startAngle)&&(b.startAngle=45);isNaN(b.ticksAngle)&&(b.ticksAngle=270);
360<b.ticksAngle&&(b.ticksAngle=360);
0>b.ticksAngle&&(b.ticksAngle=0);
0>b.startAngle&&(b.startAngle=0);
360<b.startAngle&&(b.startAngle=360);
this.config.minValue=parseFloat(this.config.minValue);
this.config.maxValue=parseFloat(this.config.maxValue);
b=this.config;
t=%TempSensor01.value%;
g=%TempSensor01.value%;
if(!b.renderTo)throw Error("Canvas element was not specified when creating the Gauge object!");
var y=b.renderTo.tagName?b.renderTo:document.getElementById(b.renderTo),a=y.getContext("2d"),z,C,D,w,x,f,A;p();this.updateConfig=function(a){l(this.config,a);p();this.setRawValue(g||0);return this};
var J={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)}},E=null;a.lineCap="round";this.isWaitingForInitialization=!1;
 
 this.drawWhenInitialized=function(){if(!Gauge.initialized)return this.isWaitingForInitialization=!0,!1;this.isWaitingForInitialization=!1;if(b.valueText.visible){a.save();a.font=40*(f/200)+"px Led";var c=u(g),d=f-33*(f/100);a.save();if(b.valueBox.visible){var e=0.12*f,h=a.measureText("-"+u(0)).width,k=-h/2-0.025*f,m=d-e-0.04*f,h=h+0.05*f,e=e+0.07*f,n=0.025*f;a.beginPath();a.moveTo(k+n,m);a.lineTo(k+h-n,m);a.quadraticCurveTo(k+h,m,k+h,m+n);a.lineTo(k+h,m+e-n);
   a.quadraticCurveTo(k+h,m+e,k+h-n,m+e);a.lineTo(k+n,m+e);a.quadraticCurveTo(k,m+e,k,m+e-n);a.lineTo(k,m+n);a.quadraticCurveTo(k,m,k+n,m);a.closePath()}k=a.createRadialGradient(0,d-0.12*f-0.025*f+(0.12*f+0.045*f)/2,f/10,0,d-0.12*f-0.025*f+(0.12*f+0.045*f)/2,f/5);k.addColorStop(0,b.colors.valueBox.rectStart); k.addColorStop(1,b.colors.valueBox.rectEnd);a.strokeStyle=k;a.lineWidth=0.05*f;a.stroke();a.shadowBlur=0.012*f;a.shadowColor=b.colors.valueBox.shadow;
   a.fillStyle=b.colors.valueBox.background;a.fill();a.restore();a.shadowOffsetX=0.004*f;a.shadowOffsetY=0.004*f;a.shadowBlur=0.012*f;a.shadowColor=b.colors.valueText.shadow;a.fillStyle=b.colors.valueText.foreground;a.textAlign="center";a.fillText(c,-0,d);a.restore()}v();I||(s.onready&&s.onready(),I=!0);return!0};
 
 this.draw=function(){if(!z.i8d){A.clearRect(-w,-x,C,D);A.save();var t={ctx:a};a=A;var g=93*(f/100),q=f-g,h=91*(f/100),k=88*(f/100),s=85*(f/100);a.save();b.glow&&(a.shadowBlur=q,a.shadowColor=b.colors.circle.shadow);b.circles.outerVisible&&(a.beginPath(),a.arc(0,0,g,0,2*Math.PI,!0),a.fillStyle=d(b.colors.circle.outerStart,b.colors.circle.outerEnd,g),a.fill());a.restore();b.circles.middleVisible&&(a.beginPath(),a.arc(0,0,h,0,2*Math.PI,!0),a.fillStyle=d(b.colors.circle.middleStart,b.colors.circle.middleEnd,h),a.fill());
   b.circles.innerVisible&&(a.beginPath(),a.arc(0,0,k,0,2*Math.PI,!0),a.fillStyle=d(b.colors.circle.innerStart,b.colors.circle.innerEnd,k),a.fill());a.beginPath();a.arc(0,0,s,0,2*Math.PI,!0);a.fillStyle=b.colors.plate;a.fill();a.save();a.save();g=81*(f/100);
   q=g-15*(f/100);h=0;for(k=b.highlights.length;h<k;h++)
    {var s=b.highlights[h],n=(b.maxValue-b.minValue)/b.ticksAngle,p=c(b.startAngle+(s.from-b.minValue)/n),n=c(b.startAngle+(s.to-b.minValue)/n);a.beginPath();a.rotate(c(90));a.arc(0,0,g,p,n,!1);a.restore();a.save();var l=e(q,p),r=e(g,p);a.moveTo(l.x,l.y);a.lineTo(r.x,r.y);
    var r=e(g,n),u=e(q,n);a.lineTo(r.x,r.y);a.lineTo(u.x,u.y);a.lineTo(l.x,l.y);a.closePath();a.fillStyle=s.color;a.fill();a.beginPath();a.rotate(c(90));a.arc(0,0,q,p-0.2,n+0.2,!1);a.restore();a.closePath();a.fillStyle=b.colors.plate;a.fill();a.save()}g=81*(f/100);a.lineWidth=1;
    a.strokeStyle=b.colors.minorTicks;a.save();q=b.minorTicks*(b.majorTicks.length-1);for(h=0;h<q;++h)a.rotate(c(b.startAngle+h*(b.ticksAngle/q))),a.beginPath(),a.moveTo(0,g),a.lineTo(0,g-7.5*(f/100)),a.stroke(),a.restore(),a.save();g=81*(f/100);a.lineWidth=2;a.strokeStyle=b.colors.majorTicks;a.save();
    if(0===b.majorTicks.length){q=(b.maxValue-b.minValue)/5;for(h=0;5>h;h++)b.majorTicks.push(m(b.minValue+q*h));b.majorTicks.push(m(b.maxValue))}for(h=0;h<b.majorTicks.length;++h)a.rotate(c(b.startAngle+h*(b.ticksAngle/(b.majorTicks.length-1)))),a.beginPath(),a.moveTo(0,g),a.lineTo(0,g-15*(f/100)),a.stroke(),a.restore(),a.save();
    b.strokeTicks&&(a.rotate(c(90)),a.beginPath(),a.arc(0,0,g,c(b.startAngle),c(b.startAngle+b.ticksAngle),!1),a.stroke(),a.restore(),a.save());g=55*(f/100);q={};for(h=0;h<b.majorTicks.length;++h)k=b.startAngle+h*(b.ticksAngle/(b.majorTicks.length-1)),s=e(g,c(k)),360===k&&(k=0),q[k]||(q[k]=!0,a.font=20*(f/200)+"px Arial",a.fillStyle=b.colors.numbers,a.lineWidth=0,a.textAlign="center",a.fillText(b.majorTicks[h],s.x,s.y+3));
    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());z.i8d=!0;a=t.ctx;delete t.ctx}a.clearRect(-w,-x,C,D);a.save();a.drawImage(z,-w,-x,C,D);this.drawWhenInitialized()}};Gauge.initialized=!1;

 (function(){function b(){Gauge.initialized=!0;for(var b=0;b<Gauge.Collection.length;++b)Gauge.Collection[b].isWaitingForInitialization&&Gauge.Collection[b].drawWhenInitialized()};
function l(){var d=p.getElementsByTagName("head")[0],l="@font-face { font-family: '"+c+"'; src: "+r+"; }",e=p.createElement("style");e.type="text/css";if(B)d.appendChild(e),d=e.styleSheet,d.cssText=l;else{try{e.appendChild(p.createTextNode(l))}catch(v){e.cssText=l}d.appendChild(e);d=e.styleSheet?e.styleSheet:e.sheet||p.styleSheets[p.styleSheets.length-
1]}var g=setInterval(function(){if(p.body){clearInterval(g);var d=p.createElement("div");d.style.fontFamily=c;d.style.position="absolute";d.style.height=d.style.width=0;d.style.overflow="hidden";d.innerHTML=".";p.body.appendChild(d);

setTimeout(function(){b();d.parentNode.removeChild(d)},250)}},1)}var p=document,B=-1!=navigator.userAgent.toLocaleLowerCase().indexOf("msie"),r="url('"+(window.CANV_GAUGE_FONTS_PATH||"fonts")+"/digital-7-mono."+(B?"eot":"ttf")+"')",c="Led";if(void 0===document.fonts)l();
else{var d=new window.FontFace(c,r);document.fonts.add(d);d.load().then(function(c){b()},function(b){window.console&&window.console.log(b);l()})}})();Gauge.Collection=[];

Gauge.Collection.get=function(b){if("string"==typeof b)for(var l=0,p=this.length;l<p;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 c=b[0],d=1,e=b.length;d<e;d++)c+=b[d].substr(0,1).toUpperCase()+b[d].substr(1,b[d].length-1);return c}for(var l=document.getElementsByTagName("canvas"),p=0,B=l.length;p<B;p++)if("canv-gauge"==l[p].getAttribute("data-type")){var r=l[p],c={},d,m=parseInt(r.getAttribute("width"),10),u=parseInt(r.getAttribute("height"),10);c.renderTo=r;m&&(c.width=m);u&&(c.height=u);m=0;for(u=r.attributes.length;m<u;m++)if(d=r.attributes.item(m).nodeName,"data-type"!=d&&"data-"==
d.substr(0,5)){var e=d.substr(5,d.length-5).toLowerCase().split("-");if(d=r.getAttribute(d))switch(e[0]){case "needle":c.needle||(c.needle={});"circle"==e[1]?(c.needle.circle||(c.needle.circle={}),e[2]?c.needle.circle[e[2]]="false"===d?!1:d:c.needle.circle="false"==d?!1:d):c.needle[e[1]]=d;break;case "ticksangle":c.ticksAngle=parseInt(d,10);360<c.ticksAngle&&(c.ticksAngle=360);0>c.ticksAngle&&(c.ticksAngle=0);break;case "startangle":c.startAngle=parseInt(d,10);360<c.startAngle&&(c.startAngle=360);
0>c.startAngle&&(c.startAngle=0);break;case "colors":if(e[1])if(c.colors||(c.colors={}),c.colors.needle||(c.colors.needle={}),"needle"==e[1]){if(e[2])switch(e[2]){case "start":c.colors.needle.start=d;break;case "end":c.colors.needle.end=d}else{var v=d.split(/\s+/);v[0]&&v[1]?(c.colors.needle.start=v[0],c.colors.needle.end=v[1]):c.colors.needle.start=d}if(e[2])switch(c.colors.needle.circle||(c.colors.needle.circle={}),e[2]){case "circle":switch(e[3]){case "outerstart":c.colors.needle.circle.outerStart=
d;break;case "outerend":c.colors.needle.circle.outerEnd=d;break;case "innerstart":c.colors.needle.circle.innerStart=d;break;case "innerend":c.colors.needle.circle.innerEnd=d;break}case "shadowup":c.colors.needle.shadowUp=d;break;case "shadowdown":c.colors.needle.shadowDown=d}}else if("valuebox"==e[1]){if(c.colors.valueBox||(c.colors.valueBox={}),e[2])switch(e[2]){case "rectstart":c.colors.valueBox.rectStart=d;break;case "rectend":c.colors.valueBox.rectEnd=d;break;case "background":c.colors.valueBox.background=
d;break;case "shadow":c.colors.valueBox.shadow=d}}else if("valuetext"==e[1]){if(c.colors.valueText||(c.colors.valueText={}),e[2])switch(e[2]){case "foreground":c.colors.valueText.foreground=d;break;case "shadow":c.colors.valueText.shadow=d}}else if("circle"==e[1]){if(c.colors.circle||(c.colors.circle={}),e[2])switch(e[2]){case "shadow":c.colors.circle.shadow=d;break;case "outerstart":c.colors.circle.outerStart=d;break;case "outerend":c.colors.circle.outerEnd=d;break;case "middlestart":c.colors.circle.middleStart=
d;break;case "middleend":c.colors.circle.middleEnd=d;break;case "innerstart":c.colors.circle.innerStart=d;break;case "innerend":c.colors.circle.innerEnd=d}}else e.shift(),c.colors[b(e)]=d;break;case "circles":c.circles||(c.circles={});if(e[1])switch(e[1]){case "outervisible":c.circles.outerVisible="true"===d.toLowerCase();break;case "middlevisible":c.circles.middleVisible="true"===d.toLowerCase();break;case "innervisible":c.circles.innerVisible="true"===d.toLowerCase()}break;case "valuebox":c.valueBox||
(c.valueBox={});if(e[1])switch(e[1]){case "visible":c.valueBox.visible="true"===d.toLowerCase()}break;case "valuetext":c.valueText||(c.valueText={});if(e[1])switch(e[1]){case "visible":c.valueText.visible="true"===d.toLowerCase()}break;case "highlights":if("false"===d){c.highlights=[];break}c.highlights||(c.highlights=[]);e=d.match(/(?:(?:-?\d*\.)?(-?\d+){1,2} ){2}(?:(?:#|0x)?(?:[0-9A-F|a-f]){3,8}|rgba?\(.*?\))/g);d=0;for(v=e.length;d<v;d++){var g=e[d].replace(/^\s+|\s+$/g,"").split(/\s+/),s={};g[0]&&
""!=g[0]&&(s.from=g[0]);g[1]&&""!=g[1]&&(s.to=g[1]);g[2]&&""!=g[2]&&(s.color=g[2]);c.highlights.push(s)}break;case "animation":e[1]&&(c.animation||(c.animation={}),"fn"==e[1]&&/^\s*function\s*\(/.test(d)&&(d=eval("("+d+")")),c.animation[e[1]]=d);break;default:e=b(e);if("onready"==e)continue;if("majorTicks"==e)d=d.split(/\s+/);else if("strokeTicks"==e||"glow"==e)d="true"==d?!0:!1;else if("valueFormat"==e)if(d=d.split("."),2==d.length)d={"int":parseInt(d[0],10),dec:parseInt(d[1],10)};else continue;
c[e]=d}}c=new Gauge(c);r.getAttribute("data-value")&&c.setRawValue(parseFloat(r.getAttribute("data-value")));r.getAttribute("data-onready")&&(c.onready=function(){eval(this.config.renderTo.getAttribute("data-onready"))});c.draw()}});window.Gauge=Gauge;

</script>
</head>
<body>
	<canvas id="gauge" value="0"></canvas>
	<div id="console"></div>
<script>
 
 
var gauge = new Gauge({
	renderTo    : 'gauge',
	width       : 150,
	height      : 150,
	glow        : true,
	units       : '°C',
	title       : 'Темп. котла',
	minValue    : -50,
	maxValue    : 50,
	majorTicks  : ['-50','-40','-30','-20','-10','0','10','20','30','40','50'],
	minorTicks  : 10,
	strokeTicks : false,
	highlights  : [
		{ from : -50, to : 0, color : 'rgba(0,   0, 255, .3)' },
		{ from : 0, to : 50, color : 'rgba(255, 0, 0, .3)' }
	],
	colors      : {
		plate      : '#f5f5f5',
		majorTicks : '#000',
		minorTicks : '#222',
		title      : '#222',
		units      : '#666',
		numbers    : '#222',
		needle     : { start : 'rgba(240, 128, 128, 1)', end : 'rgba(255, 160, 122, .9)' }
	},
	animation : {
		delay : 25,
		duration: 500,
		fn : 'bounce'
	}
});
 
gauge.onready = function() {
	gauge.setValue(%TempSensor01.value%);
};
 
gauge.draw();
</script>
</body>
</html>
Спасибо нам ПОМОЖЕТ..!
NightShock
Сообщения: 44
Зарегистрирован: Пт авг 24, 2018 6:09 pm
Благодарил (а): 7 раз
Поблагодарили: 23 раза

Re: Шаблон класса / Class Template

Сообщение NightShock » Пт авг 31, 2018 3:41 pm

sega6549 писал(а):
Пт авг 31, 2018 9:22 am
NightShock писал(а):
Пт авг 31, 2018 2:52 am
Шаблон кидал я в группу. Но что самое забавное - обратная связь у меня не работает)))
https://youtu.be/EfaGFYu2m9E
СпойлерПоказать
Изображение
вот смущает меня что объекты по русски прописаны, хотя не уверен что это влияет
Забавно, но влияет :shock:
Аватара пользователя
nick7zmail
Сообщения: 7573
Зарегистрирован: Пн окт 28, 2013 8:14 am
Откуда: Екатеринбург
Благодарил (а): 121 раз
Поблагодарили: 2010 раз

Re: Шаблон класса / Class Template

Сообщение nick7zmail » Пт авг 31, 2018 6:26 pm

tarasfrompir1 писал(а):
Пт авг 31, 2018 3:29 pm
работает , но теперь понимаю nick7zmail почему писал что рендерит все время..
Действительно там сделано так что постоянного происходит рендеринг всего табло а не только стрелки...
Именно))
либо middle-connector от алекса прикручивать что уж совсем несовременно, не круто, и задержки. Либо как то по-нормальному к вебсокетам прицепится, о чем я и спросил в теме вебсокетов. Пример из 1го сообщения Сергея это бы решил...но увы - он тоже не завёлся. Надо трясти код, как работают вебсокеты, но мне пока лень...ну или проще - спросить у разработчика)))
Raspberry Pi3+Broadlink+esp8266 (blynk)+AMS
Если вам помогло какое-либо сообщение - не забывайте пользоваться кнопкой "СПАСИБО".
:arrow: Услуги в профиле коннект
>>>>>Мой новый канал на ютутбе, подписывайтесь!<<<<<
Аватара пользователя
tarasfrompir
Сообщения: 3216
Зарегистрирован: Ср мар 02, 2016 8:18 pm
Откуда: Украина Пирятин
Благодарил (а): 223 раза
Поблагодарили: 815 раз

Re: Шаблон класса / Class Template

Сообщение tarasfrompir » Пт авг 31, 2018 8:04 pm

nick7zmail писал(а):
Пт авг 31, 2018 6:26 pm
tarasfrompir1 писал(а):
Пт авг 31, 2018 3:29 pm
работает , но теперь понимаю nick7zmail почему писал что рендерит все время..
Действительно там сделано так что постоянного происходит рендеринг всего табло а не только стрелки...
Именно))
либо middle-connector от алекса прикручивать что уж совсем несовременно, не круто, и задержки. Либо как то по-нормальному к вебсокетам прицепится, о чем я и спросил в теме вебсокетов. Пример из 1го сообщения Сергея это бы решил...но увы - он тоже не завёлся. Надо трясти код, как работают вебсокеты, но мне пока лень...ну или проще - спросить у разработчика)))
не тут все очень просто - изначально надо фон переделать в картинку и не трогать и рендерить только стрелку.....
Спасибо нам ПОМОЖЕТ..!
Аватара пользователя
nick7zmail
Сообщения: 7573
Зарегистрирован: Пн окт 28, 2013 8:14 am
Откуда: Екатеринбург
Благодарил (а): 121 раз
Поблагодарили: 2010 раз

Re: Шаблон класса / Class Template

Сообщение nick7zmail » Пт авг 31, 2018 8:29 pm

А стрелка если с анимацией - будет рендерить анимацию с нуля...так что не особо помогает.
Последний раз редактировалось nick7zmail Пт авг 31, 2018 8:33 pm, всего редактировалось 1 раз.
Raspberry Pi3+Broadlink+esp8266 (blynk)+AMS
Если вам помогло какое-либо сообщение - не забывайте пользоваться кнопкой "СПАСИБО".
:arrow: Услуги в профиле коннект
>>>>>Мой новый канал на ютутбе, подписывайтесь!<<<<<
Ответить