function onoff(di,st,vb) {
document.getElementById(di).innerHTML=st;//Записываем состояние нажатой кнопки в блок 'Клиент'
//Инвертируем состояние нажатой кнопки
document.getElementById(vb).innerHTML='<img src="k'+st+'.png" onclick="onoff(\''+di+'\','+!st+',\''+vb+'\')">';
//Записываем состояние наждатой кнопки в temp.txt
if (di=='diod1'){
x.open("GET", "h t t p://192.168.1.36/text.php?di1="+st+"&ip=kn1&r="+Math.random(), true);
x.setRequestHeader("Origin:", "h t t p://192.168.1.36/");
x.send(null);
}else{
x.open("GET", "h t t p://192.168.1.36/text.php?di2="+st+"&ip=kn2&r="+Math.random(), true);
x.setRequestHeader("Origin:", "h t t p://192.168.1.36/");
x.send(null);
}
}
<?php
header("HTTP/1.0 200 OK");
header("Content-Type:text/html; charset=UTF-8");
header("Access-Control-Allow-Origin:h t t p://192.168.1.36/");
<script>
var yyy= 2000;
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()", 1000);
gaugeP1S.value = document.getElementById("ob").innerText;
yyy =gaugeP1S.value;
console.log(yyy);//Выводит всё как надо, значение из text.txt
//return yyy;
}
o.send();
}
alert (yyy); //Выводит 2000, а не число из функции
</script>
<font color="#FFFFFF"><span id="ob">1000</span></font>
Так она позже получает значение. Эта функция - обработчик события load (данные пришли с сервера). Когда случается событие отрабатывают строки с 7 по 16 и там у Вас всё правильно. А строка 18 работает сразу, т.е. ещё до того, как данные пришли с сервера.
Ммм, щас бы вызовы асинхронных процессов вне функций писать, найс чё. Ну в общем расклад такой, в подключаемой мной версии gauge.js не существует функции RadialGauge(), и выяснять, как заставить работать эту срань, мне как-то впадлу. Вам ЕвгенийП уже сказал, что ваш вызов происходит одновременно с вызовом запроса, а запрос это растянутый во времени процесс, там анонимную функцию у запроса видно не? ладна, выделю: onload=function(), оно какбе намекает. Щас.
Вот:
Горела жопа от различия версий у меня знатно, так как было потрачено часа 2; но так и быть, расскажу что с этим делать. Объясним это как-нибудь скромно, вроде "сегодня у моей богоподобной, наипиздейшей персоны имеется её особое настроение помогать нуждающимся". Я надеюсь, что оно всё-таки ясно, что работа с данными (работа это всмысле использование значения из yyy) должна делаться после запроса, внутри функции обработчика onload=function(). Действие здесь только одно, gaugeP1S.draw(), но ещё есть конструктор, у конструктора в скобках JSON, содержащий свойства. Конструктор, будем так говорить, запускается от корневого процесса, т. к. перед его вызовом нет никаких имён и точки, и он вне каких-то функций. Значит как страница создастся, так JS и будет ломиться его выполнять, моментально. Ессьсессьно, в то время yyy ещё будет равно undefined. Делаем следующее.
Способ 1. Перед 34й строкой пишем:
function xxx(){
после 107й строки пишем
}
Перед 29й, то есть в последнюю очередь, внутри обработчика, вызываем:
xxx();
Способ 2. Всё то же самое, но без функции:
- вырезаем строки 34...107 в буфер;
- перед 29й строкой вставляем их из буфера.
Сорян что малость резко, я это любя. Так то я стараюсь не агриться, но js выбесил. Мамке автора... а ладно, нахер надо...
Да, ладно Вам! Классный язык! Я Вам точно говорю, я вообще как раз по языкам узкий специалист - это моя работа.
JS писали высококлассные язычники, которых пинали отовсюду и не позволяли лезть своими лапами в приличные языки, а то мол напихаете продвинутых фич и всю производительность нам посадите. А тут эта группа получила заказ сделать простенький скриптовый язычок. Ну, уж ребята дорвались! Они воткнули в JS ВСЁ, что было в тот момент в языковой теории и от чего разработчики промышленных языков шарахались, как чёрт от ладана (типа "невозожно эффективно реализовать", "слишком сложно и для реализации, и для восприятия" и т.п.). Так вот все эти крутейшие и сложнейшие навороты они впихнули в JS.
Там столько всего, чего тому же С++ или там Java и рядом не снилось - дух захватывает! Один только динамический полиморфизм чего стоит! Такого нет ни в одном распространённом языке. Это можно встретить только в специальных языках на которых работаем только мы - язычники (т.е. языки для внутренних научных разработок) и вот в JS. Из языков известных всем, он один такими фичами обладает.
ЕвгенийП, я не про сам JS а про ссаный фреймворк с этими стрелочными индикаторами. Хз, на невозножность воспроизвести проблему мне обычно плевать, но может в этот раз это было слишком для меня важно.
1. не <!doctype htm> а <!doctype html>, тег <font> устарел. Кстати, не background а background-color.
2. да и в общем HTML ужасен.
3. отступы ещё хлеще
4. сценарию нехер делать в документе, есть тег <head>
5. мы упустили из виду, что конструктор будет каждый раз создавать новый объект, то есть жрать память, поэтому у функции xxx() теперь будет запрет повторных запусков
6. функцию можно переименовать более понятно
7. запятая после последнего элемента в массиве - это ошибка
8. запятая после единственного объекта в массиве - тем более ошибка
9. ругань была потому что сценарий ломился изменить значение объекта до того как он создан.
Voodoo Doll, выражаю слова Благодарности. Работает как ча..круг со стрелкой,всё кажет.
Я только эффекта другого ожидал, думал что вот эта полоска будет двигаться вместе со стрелкой, а она прорисовывается только после обновления странички.
Доо, а почему тогда стоит мне изменить php файл в своем макете, который служит провайдером информации (аналог data.txt), стрелка тут же (ну не тут же, с интервалом 3 с) показывает новое положение? Проверяйте целостность функции таймера.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Demo</title>
<script>
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();
}
function off() {
var XHR = ("onload" in new XMLHttpRequest()) ? XMLHttpRequest : XDomainRequest;
var xhr = new XHR();
xhr.open('GET', 'http:// 192.168.0.91/gpio/0', 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();
}
</script>
</head>
<body>
<button onclick="on()">On</button>
<button onclick="off()">Off</button>
<div id="text">text</div>
</body>
</html>
Сервер отвечает
String s = "HTTP/1.1 200 OK\r\nContent-Type: text/html\r\nAccess-Control-Allow-Origin: *\r\n\r\n<!DOCTYPE HTML>\r\n<html>\r\nGPIO is now ";
s += (val)?"high":"low";
s += "</html>\n";
пустые переменные зачем передавать, тип d1=& этого ненадо, там по коду много вопросов, но шлифуй и потом поймешь что лишнее
Пустая, потому что в php скрипте проверка если пусто то не записывать
в пхп проверяет и записывает где не пусто, а если пусто - оставляет прежнее.
if (di=='diod1'){ x.open("GET", "text.php?di1="+st, true); x.send(null); }else{ x.open("GET", "text.php?di2="+st, true); x.send(null); }Вот так мождно наверное
да, так, но если передать ид хоть вася, то запишет в д2, т.е 5 строку сделай else if, а да и r передавай, а то на кеш можешь нарватся.
А смысл делать проверку, если я точно значю что будет передаваться, и ничего лишнего туда не передать, всё ж будет только дома, в домашней сети
Подскажите что можно оптимизировать,исправить.
setTimeout("dR()",1000);При значении менее "500" скрипт тормозит.
index.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="Cache-Control" content="no-cache"> <title>Кнопки</title> <script> var lam1; var lam2; var invla1; var invla2; var o=new XMLHttpRequest(); var x = new XMLHttpRequest(); //Начало.Приём. function dR() { o.open("GET","temp.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) {}; lam1 = document.getElementById("di1").innerText;//Загружаем из файла состояние (true/false) первого диода. lam2 = document.getElementById("di2").innerText;//Загружаем из файла состояние (true/false) второго диода. document.getElementById("la1").src=lam1+'.png';//Картинка первого диода(лампочка). document.getElementById("la2").src=lam2+'.png';//Картинка второго диода(лампочка). //Создаём картинку первой кнопки, инвертировав её значение(если true, при нажатии будет false,и наоборот) //Создаём картинку второй кнопки, инвертировав её значение(если true, при нажатии будет false,и наоборот) invla1 = (lam1=='true') ? false : true; invla2 = (lam2=='true') ? false : true; document.getElementById('kn1').innerHTML='<img src="k'+lam1+'.png" onclick="onoff(\'diod1\','+invla1+',\'kn1\')">'; document.getElementById('kn2').innerHTML='<img src="k'+lam2+'.png" onclick="onoff(\'diod2\','+invla2+',\'kn2\')">'; setTimeout("dR()", 1000); } o.send(); } //Конец.Приём. //Начало. Записываем состяние кнопок. function onoff(di,st,vb) { document.getElementById(di).innerHTML=st;//Записываем состояние нажатой кнопки в блок 'Клиент' //Инвертируем состояние нажатой кнопки document.getElementById(vb).innerHTML='<img src="k'+st+'.png" onclick="onoff(\''+di+'\','+!st+',\''+vb+'\')">'; //Записываем состояние наждатой кнопки в temp.txt if (di=='diod1'){ x.open("GET", "text.php?di1="+st+"&r="+Math.random(), true); x.send(null); }else{ x.open("GET", "text.php?di2="+st+"&r="+Math.random(), true); x.send(null); } } //Конец. Функция записи состояния кнопок </script> </head> <body onload="dR()"> <table border="0" cellspacing="0" cellpadding="0"> <tr> <td rowspan="2" width="70">Свет в</br>зале</td> <td rowspan="2" width="85"><span id="kn1"></span></td> <td rowspan="2" width="37"><img src="false.png" id="la1"></td> <td width="100">Клиент:<span id="diod1"></span></td> </tr> <tr><td>Сервер:<span id="di1"></span></td></tr> <tr> <td colspan="4"> </td> </tr> <tr> <td rowspan="2" width="70">Свет на</br>кухне</td> <td rowspan="2" width="85"><span id="kn2"></span></td> <td rowspan="2" width="37"><img src="false.png" id="la2"></td> <td width="100">Клиент:<span id="diod2"></span></td> </tr> <tr><td>Сервер:<span id="di2"></span></td></tr> </table> </body> </html>text.php
<?php $arr = file('temp.txt'); if(!empty($_GET['di1'])) $arr[0] = 'di1=' . $_GET['di1'] . "\r\n"; if(!empty($_GET['di2'])) $arr[1] = 'di2=' . $_GET['di2'] . "\r\n"; file_put_contents('temp.txt', join('', $arr)); ?>Ещё вопрос, что я не так сделал?
function onoff(di,st,vb) { document.getElementById(di).innerHTML=st;//Записываем состояние нажатой кнопки в блок 'Клиент' //Инвертируем состояние нажатой кнопки document.getElementById(vb).innerHTML='<img src="k'+st+'.png" onclick="onoff(\''+di+'\','+!st+',\''+vb+'\')">'; //Записываем состояние наждатой кнопки в temp.txt if (di=='diod1'){ x.open("GET", "h t t p://192.168.1.36/text.php?di1="+st+"&ip=kn1&r="+Math.random(), true); x.setRequestHeader("Origin:", "h t t p://192.168.1.36/"); x.send(null); }else{ x.open("GET", "h t t p://192.168.1.36/text.php?di2="+st+"&ip=kn2&r="+Math.random(), true); x.setRequestHeader("Origin:", "h t t p://192.168.1.36/"); x.send(null); } }<?php header("HTTP/1.0 200 OK"); header("Content-Type:text/html; charset=UTF-8"); header("Access-Control-Allow-Origin:h t t p://192.168.1.36/");Здравствуйте. Подскажите пожалуйста.
<script> var yyy= 2000; 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()", 1000); gaugeP1S.value = document.getElementById("ob").innerText; yyy =gaugeP1S.value; console.log(yyy);//Выводит всё как надо, значение из text.txt //return yyy; } o.send(); } alert (yyy); //Выводит 2000, а не число из функции </script> <font color="#FFFFFF"><span id="ob">1000</span></font>Так она позже получает значение. Эта функция - обработчик события load (данные пришли с сервера). Когда случается событие отрабатывают строки с 7 по 16 и там у Вас всё правильно. А строка 18 работает сразу, т.е. ещё до того, как данные пришли с сервера.
Суть понял, а как реализовать нет.
alert() внутрь функции переселить же.
Это же не весь код, yyy используется ниже по коду.
<!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()"> <canvas id="gauge-ob"></canvas> <script> var yyy =2500; 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()", 3000); gaugeP1S.value = document.getElementById("ob").innerText; yyy = document.getElementById("ob").innerText; console.log("y="+yyy); } o.send(); } console.log("y="+yyy); 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)' }, ], 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">1000</span></font> </body> </html>Ммм, щас бы вызовы асинхронных процессов вне функций писать, найс чё. Ну в общем расклад такой, в подключаемой мной версии gauge.js не существует функции RadialGauge(), и выяснять, как заставить работать эту срань, мне как-то впадлу. Вам ЕвгенийП уже сказал, что ваш вызов происходит одновременно с вызовом запроса, а запрос это растянутый во времени процесс, там анонимную функцию у запроса видно не? ладна, выделю: onload=function(), оно какбе намекает. Щас.
Вот:
Горела жопа от различия версий у меня знатно, так как было потрачено часа 2; но так и быть, расскажу что с этим делать. Объясним это как-нибудь скромно, вроде "сегодня у моей богоподобной, наипиздейшей персоны имеется её особое настроение помогать нуждающимся". Я надеюсь, что оно всё-таки ясно, что работа с данными (работа это всмысле использование значения из yyy) должна делаться после запроса, внутри функции обработчика onload=function(). Действие здесь только одно, gaugeP1S.draw(), но ещё есть конструктор, у конструктора в скобках JSON, содержащий свойства. Конструктор, будем так говорить, запускается от корневого процесса, т. к. перед его вызовом нет никаких имён и точки, и он вне каких-то функций. Значит как страница создастся, так JS и будет ломиться его выполнять, моментально. Ессьсессьно, в то время yyy ещё будет равно undefined. Делаем следующее.
Способ 1. Перед 34й строкой пишем:
function xxx(){после 107й строки пишем
Перед 29й, то есть в последнюю очередь, внутри обработчика, вызываем:
Способ 2. Всё то же самое, но без функции:
- вырезаем строки 34...107 в буфер;
- перед 29й строкой вставляем их из буфера.
Сорян что малость резко, я это любя. Так то я стараюсь не агриться, но js выбесил. Мамке автора... а ладно, нахер надо...
Всем всего.
js выбесил
Да, ладно Вам! Классный язык! Я Вам точно говорю, я вообще как раз по языкам узкий специалист - это моя работа.
JS писали высококлассные язычники, которых пинали отовсюду и не позволяли лезть своими лапами в приличные языки, а то мол напихаете продвинутых фич и всю производительность нам посадите. А тут эта группа получила заказ сделать простенький скриптовый язычок. Ну, уж ребята дорвались! Они воткнули в JS ВСЁ, что было в тот момент в языковой теории и от чего разработчики промышленных языков шарахались, как чёрт от ладана (типа "невозожно эффективно реализовать", "слишком сложно и для реализации, и для восприятия" и т.п.). Так вот все эти крутейшие и сложнейшие навороты они впихнули в JS.
Там столько всего, чего тому же С++ или там Java и рядом не снилось - дух захватывает! Один только динамический полиморфизм чего стоит! Такого нет ни в одном распространённом языке. Это можно встретить только в специальных языках на которых работаем только мы - язычники (т.е. языки для внутренних научных разработок) и вот в JS. Из языков известных всем, он один такими фичами обладает.
ЕвгенийП, я не про сам JS а про ссаный фреймворк с этими стрелочными индикаторами. Хз, на невозножность воспроизвести проблему мне обычно плевать, но может в этот раз это было слишком для меня важно.
<!doctype htm> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Gauge Test</title> <script src="h t t p : / /stanciya-skorpom.ru/gauge.min.js"></script> <style>body { padding: 0; margin: 0; background: #000000 }</style> </head> <body onload="dR()"> <canvas id="gauge-ob"></canvas> <script> var yyy=1000; var gaugeP1S; 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()", 3000); gaugeP1S.value = document.getElementById("ob").innerText; yyy = document.getElementById("ob").innerText; console.log("y="+yyy); xxx(); } o.send(); } function xxx(){ 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)' }, ], 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">1000</span></font> </body> </html>Voodoo Doll
Спасибо за помощь, очень доступно всё XD
Я так уже делал, у меня ругань
issue-63.html:30 Uncaught TypeError: Cannot set property 'value' of undefined(…)o.onload @ issue-63.html:30
Вот что я думаю.
1. не <!doctype htm> а <!doctype html>, тег <font> устарел. Кстати, не background а background-color.
2. да и в общем HTML ужасен.
3. отступы ещё хлеще
4. сценарию нехер делать в документе, есть тег <head>
5. мы упустили из виду, что конструктор будет каждый раз создавать новый объект, то есть жрать память, поэтому у функции xxx() теперь будет запрет повторных запусков
6. функцию можно переименовать более понятно
7. запятая после последнего элемента в массиве - это ошибка
8. запятая после единственного объекта в массиве - тем более ошибка
9. ругань была потому что сценарий ломился изменить значение объекта до того как он создан.
<!doctype html> <html> <head> <meta charset=utf-8> <title>Gauge Test</title> <script src="h t t p : / /stanciya-skorpom.ru/gauge.min.js"></script> <script> var yyy=1000; var gaugeP1S; var bDone_gauge_create=false; 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()", 3000); yyy=document.getElementById("ob").innerText; gauge_create(); gaugeP1S.value=document.getElementById("ob").innerText; } o.send(); } function gauge_create(){ if (bDone_gauge_create) return; bDone_gauge_create=true; 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)'}], 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> <style> body{ padding: 0; margin: 0; background-color: #000000; } #ob{ color: #ffffff; } </style> </head> <body onload="dR()"> <canvas id="gauge-ob"></canvas> <span id="ob">1000</span> </body> </html>В общем... да похер...
Voodoo Doll, выражаю слова Благодарности. Работает как ча..круг со стрелкой,всё кажет.
Я только эффекта другого ожидал, думал что вот эта полоска будет двигаться вместе со стрелкой, а она прорисовывается только после обновления странички.
Доо, а почему тогда стоит мне изменить php файл в своем макете, который служит провайдером информации (аналог data.txt), стрелка тут же (ну не тут же, с интервалом 3 с) показывает новое положение? Проверяйте целостность функции таймера.
Стрелка да, кажет, так и было.
highlights: [{from: 0, to: yyy, color:'rgba(255, 0, 0, 0.3)'}],Вот эта полоска по кругу прорисовывается только после обновления странички.Если бы вместе, вообще красиво было )))
Здравствуйте.
Снова нужна Ваша помощь.
Плата NodeMCU, пример вебсервера.
Консоль браузера выдаёт ошибку
Refused to set unsafe header "Origin"