microAJAX для Ардуино

a5021
Offline
Зарегистрирован: 07.07.2013

Евгений, отличную тему вы создали и толково все разъяснили. Взял на заметку. Спасибо.

Sergeyevd
Sergeyevd аватар
Offline
Зарегистрирован: 25.03.2014
#include <EtherCard.h>
static byte mymac[] = { 0x74,0x69,0x69,0x2D,0x30,0x31 };
static byte myip[] = { 192,168,1,100 };
const char website[] PROGMEM = "192.168.1.100";
byte Ethernet::buffer[900];
BufferFiller bfill;

void setup () {
Serial.begin(250000);
ether.begin(sizeof Ethernet::buffer, mymac, 10);
ether.staticSetup(myip);
pinMode(3, OUTPUT);
}

void loop () {

word pos = ether.packetLoop(ether.packetReceive());
if (pos){
// получаем заголовки
 char *data = (char *) Ethernet::buffer + pos;
Serial.print(data);
// проверяем на наличие в заголовках нужных нам строк
 if (strstr(data, "GET /index.htm") || strstr(data, "GET / HTTP/1.1") ) {

  
bfill = ether.tcpOffset();
bfill.emit_p(PSTR(
  "HTTP/1.0 200 OK\r\n"
 "Content-Type: text/html\r\n"
 "\r\n"
"<html>"
"<head>"
"<meta charset=\"utf-8\">"
"<title>Яркость</title>"
"</head>"
"<body onload=\"dR()\">"
"<button onclick=\"yar()\">Установим яркость 10</button>"
"<script>"
//"function yar() {"
"var xhr = new XMLHttpRequest();"
"function dR() {"
"var yarkost = Math.round(Math.random()*255);"
"xhr.open('GET', 'kaka.htm?y='+yarkost, 1);"
"setTimeout(\"dR()\", 1000);"
"xhr.send();"
"}"
"</script>"
"</body>"
"</html>"
));
}


if (strstr(data, "GET /kaka.htm HTTP/1.1")  ) {
analogWrite(3, yarkost);  
bfill = ether.tcpOffset();
bfill.emit_p(PSTR(
"HTTP/1.0 200 OK\r\n"
"Content-Type: text/html\r\n"
"\r\n"
"yarkost"
));
}*/


 ether.httpServerReply(bfill.position());
 }
}

Немного исправил, там ошибка была с запросом.

Как получить эту самую переменную yarkost

Sergeyevd
Sergeyevd аватар
Offline
Зарегистрирован: 25.03.2014

a5021 пишет:

Евгений, отличную тему вы создали и толково все разъяснили. Взял на заметку. Спасибо.

 

Да, Евгений очень помогает, тема отличная.

ЕвгенийП
ЕвгенийП аватар
Offline
Зарегистрирован: 25.05.2015

Sergeyevd пишет:

Как мне при запросе kaka.htm получить только это самое случайное число, разобрать строку

Ну, во-первых, Вы ищете зачем-то больно много. Зачем Вы пишете

if (strstr(data, "GET /kaka.htm?y=10 HTTP/1.1")  )

Достаточно

if (strstr(data, "kaka.htm")  )

А число, так ищите потом "?=" и берите число сразу после. Вот так

int value = atoi(strstr(data, "?=") + 2);

Всё. Число, которое идёт после ?= уже преобразовано в int и сидит в переменной value.

 

Sergeyevd
Sergeyevd аватар
Offline
Зарегистрирован: 25.03.2014
#include <EtherCard.h>
static byte mymac[] = { 0x74,0x69,0x69,0x2D,0x30,0x31 };
static byte myip[] = { 192,168,1,100 };
const char website[] PROGMEM = "192.168.1.100";
byte Ethernet::buffer[900];
BufferFiller bfill;

void setup () {
Serial.begin(250000);
ether.begin(sizeof Ethernet::buffer, mymac, 10);
ether.staticSetup(myip);
pinMode(3, OUTPUT);
}

void loop () {

word pos = ether.packetLoop(ether.packetReceive());
if (pos){
// получаем заголовки
 char *data = (char *) Ethernet::buffer + pos;
Serial.print(data);
// проверяем на наличие в заголовках нужных нам строк
if (strstr(data, "GET /index.htm") || strstr(data, "GET / HTTP/1.1") ) {
bfill = ether.tcpOffset();
bfill.emit_p(PSTR(
"HTTP/1.0 200 OK\r\n"
"Content-Type: text/html\r\n"
"\r\n"
"<html>"
"<head>"
"<meta charset=\"utf-8\">"
"<title>Яркость</title>"
"</head>"
"<body onload=\"dR()\">"
"<button onclick=\"yar()\">Установим яркость 10</button>"
"<script>"
//"function yar() {"
"var xhr = new XMLHttpRequest();"
"function dR() {"
"var yarkost = Math.round(Math.random()*255);"
"xhr.open('GET', 'kaka.htm?='+yarkost, 1);"
"setTimeout(\"dR()\", 1000);"
"xhr.send();"
"}"
"</script>"
"</body>"
"</html>"
));
}


if (strstr(data, "GET /kaka.htm")  ) {
int yarkost = atoi(strstr(data, "?=") + 2);
analogWrite(3, yarkost);  
bfill = ether.tcpOffset();
bfill.emit_p(PSTR(
"HTTP/1.0 200 OK\r\n"
"Content-Type: text/html\r\n"
"\r\n"
"случайное число"
));
}

 ether.httpServerReply(bfill.position());
 }
}

Всё работает 

ЕвгенийП
ЕвгенийП аватар
Offline
Зарегистрирован: 25.05.2015

Теперь Вы знаете как делать связь с сервером. Удачи!

Sergeyevd
Sergeyevd аватар
Offline
Зарегистрирован: 25.03.2014
#include <EtherCard.h>
static byte mymac[] = { 0x74,0x69,0x69,0x2D,0x30,0x31 };
static byte myip[] = { 192,168,1,100 };
const char website[] PROGMEM = "192.168.1.100";
byte Ethernet::buffer[900];
BufferFiller bfill;

void setup () {
Serial.begin(250000);
ether.begin(sizeof Ethernet::buffer, mymac, 10);
ether.staticSetup(myip);
pinMode(3, OUTPUT);
pinMode(6, OUTPUT);
}

void loop () {

word pos = ether.packetLoop(ether.packetReceive());
if (pos){
// получаем заголовки
 char *data = (char *) Ethernet::buffer + pos;
Serial.print(data);
// проверяем на наличие в заголовках нужных нам строк
if (strstr(data, "GET /index.htm") || strstr(data, "GET / HTTP/1.1") ) {
bfill = ether.tcpOffset();
bfill.emit_p(PSTR(
"HTTP/1.0 200 OK\r\n"
"Content-Type: text/html\r\n"
"\r\n"
"<html>"
"<head>"
"<meta charset=\"utf-8\">"
"<title>Яркость</title>"
"<script src=\"/evgeniip.js\"></script>"
"</head>"
"<body onload=\"dR()\">"
"Яркость первого светодиоода:<span id=\"q\"></span><br>"
"Яркость второго светодиода:<span id=\"w\"></span>"

/*"<script>"
//"function yar() {"
"var xhr = new XMLHttpRequest();"
"function dR() {"
"var yarkost = Math.round(Math.random()*255);"
"var yarkost1 = Math.round(Math.random()*255);"
"xhr.open('GET', 'kaka.htm?q='+yarkost+'w='+yarkost1, 1);"
"setTimeout(\"dR()\", 1000);"
"xhr.send();"
"}"
"</script>"*/
"</body>"
"</html>"
));
}

if (strstr(data, "GET /kaka.htm")  ) {
int yarkost = atoi(strstr(data, "q=") + 2);
int yarkost1 = atoi(strstr(data, "w=") + 2);
analogWrite(3, yarkost);  
analogWrite(6, yarkost1);  
bfill = ether.tcpOffset();
bfill.emit_p(PSTR(
"HTTP/1.0 200 OK\r\n"
"Content-Type: text/plain\r\n"
"\r\n"
"q = $D\r\n"
"w = $D\r\n"
),yarkost,yarkost1);
}

 ether.httpServerReply(bfill.position());
 }
}

evgeniip.js

var o=new XMLHttpRequest();
	function dR() {
		var yarkost = Math.round(Math.random()*255);
var yarkost1 = Math.round(Math.random()*255);
		o.open("GET","kaka.htm?r="+Math.random()+"q="+yarkost+"w="+yarkost1,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);

		}
		o.send();
		}

Какие есть замечания?

a5021
Offline
Зарегистрирован: 07.07.2013

У меня страничка сделана на основе кода Евгения, но общая схема немного другая. Страничка и файл с данными лежат на роутере с OpenWRT. Арудина принимает по радио данные от беспроводного сенсора на улице и отправляет их по сети на роутер. Там скриптом данные парсятся и ложаться в data.txt. В конечном счете получается вот так:

Sergeyevd
Sergeyevd аватар
Offline
Зарегистрирован: 25.03.2014

Приветствую.

Евгений, подскажи пожалуйста

На страничке есть

<div id="change" class="article">60</div>

В скрипте

var o=new XMLHttpRequest();
	function dR() {

//yarkost = document.getElementById("qp").value;
yarkost = document.getElementsByClassName("article").value;
yarkost1 = document.getElementById("wp").value;


		o.open("GET","kaka.htm?r="+Math.random()+"q="+yarkost+"w="+yarkost1,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();
		}
		

Не читает значение

ЕвгенийП
ЕвгенийП аватар
Offline
Зарегистрирован: 25.05.2015

Sergeyevd пишет:

 

На страничке есть

<div id="change" class="article">60</div>

В скрипте

var o=new XMLHttpRequest();
	function dR() {

//yarkost = document.getElementById("qp").value;
yarkost = document.getElementsByClassName("article").value;
yarkost1 = document.getElementById("wp").value;


		o.open("GET","kaka.htm?r="+Math.random()+"q="+yarkost+"w="+yarkost1,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();
		}
		

Не читает значение

И не должен. Метод getElementsByClassName, возвращает массив элементов с таким классом, а не отдельный элемент. Для проверки уберите в 5-ой строке .value, а после строки 5 поставьте alert(yarkost.length) - должен показать количество таких элементов в массие. Если у Вас элемент с таким классом 1, то и пожет 1. В этом случае Вы можете  вместо 

document.getElementsByClassName("article").value;

писать 

document.getElementsByClassName("article")[0].value;

Т.е. брать нулевой элемент массива, а не весь массив. Правда,мне здесь ещё .value не нравится. Лучше .innerText

А вообще, чем Вам не угодил метод getElemntById? Работает намного быстрее и никаких заморочек с массивами.

Sergeyevd
Sergeyevd аватар
Offline
Зарегистрирован: 25.03.2014

document.getElementsByClassName("article")[0].value;

Я так пробовал, не работало, вот и думал чтож такое то, а оказалось .innerText, и точно - работает, Спасибо.

А вообще, чем Вам не угодил метод getElemntById? Работает намного быстрее и никаких заморочек с массивами.

В стороннем скрипте регулятора (кручу стрелку мышкой мсеняется значение) вот такой код

 

$('#container').on('change', function (event) {
$("#change").html(event.args.value);

 

ЕвгенийП
ЕвгенийП аватар
Offline
Зарегистрирован: 25.05.2015

В том скрипте change было не ID, а имя события. Кроме того, какой там был элемент? Поди какой-нибудь INPUT? Ну, уж точно не DIV. с DIV такая штука сработает только в MSIE, а во всём остальном с геморроем.

Посмотрите, какой там в итоге элемент используется, тогда поговорим.

Sergeyevd
Sergeyevd аватар
Offline
Зарегистрирован: 25.03.2014

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>jqxKnob with 2 pointers. The minimum range in the sample is 10, the maximum is 90</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdraw.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxknob.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {     
            $('#knob').jqxKnob({
                value: [60, 80],
                min: 0,
                max: 100,
                startAngle: 150,
                endAngle: 510,
                snapToStep: true,
                rotation: 'clockwise',
                style: { fill: '#ebeced' },
                marks: {
                    colorRemaining: '#333',
                    colorProgress: '#66707e',
                    style: 'line',
                    offset: '71%',
                    thickness: 1,
                    size: '6%',
                    majorSize: '9%',
                    majorInterval: 10,
                    minorInterval: 2
                },
                labels: {
                    offset: '88%',
                    step: 10
                },
                changing: function(oldValues, newValues)
                {
                    var range = newValues[1] - newValues[0];
                    if (range < 10)
                        return false;
                    if (range > 90)
                        return false;
                },
                progressBar: {
                    style: [{ fill: '#66707e', stroke: '#66707e', strokeWidth: 0 },
                            { fill: '#66707e', stroke: '#66707e', strokeWidth: 0 }],
                    size: '9%',
                    offset: '58%',
                    background: { fill: '#a2da39', stroke: '#a2da39', strokeWidth: 0 }
                },
                spinner: {
                    style: { fill: '#66707e', stroke: '#66707e' },
                    innerRadius: '0%', // specifies the inner Radius of the dial
                    outerRadius: '58%', // specifies the outer Radius of the dial
                    marks: {
                        colorRemaining: '#a2da39',
                        colorProgress: '#a2da39',
                        type: 'circle',
                        offset: '55%',
                        thickness: 3,
                        size: '1%',
                        majorSize: '1%',
                        majorInterval: 10,
                        minorInterval: 10
                    }
                },
                pointer: [{ type: 'circle', style: { fill: '#a2da39', stroke: '#a2da39' }, size: '5%', offset: '38%', thickness: 20 },
                          { type: 'circle', style: { fill: '#a2da39', stroke: '#a2da39' }, size: '5%', offset: '38%', thickness: 20 }]
            });

            $('#knob').on('change', function (event) {
                $("#change").html("Values: " + event.args.value);
            });
        });
    </script>
</head>
<body>
    <div id='knob'></div>
    <br /><br />
    <div id="change"></div>
</body>
</html>

 

Sergeyevd
Sergeyevd аватар
Offline
Зарегистрирован: 25.03.2014

ЕвгенийП
ЕвгенийП аватар
Offline
Зарегистрирован: 25.05.2015

А, так это не голимый код страницы - это Вы опять какую-то стороннюю библиотеку используете :)))

Не, я этой библиотеки не знаю и разбираться - это полдня - день, ну правда, не могу. Сорри :(((

Поковыряйтесь сами, разберётесь.

Главное, сначала разберитесь на сервере, чтобы ещё аруиновсие проблемы туда не тянуть.

Sergeyevd
Sergeyevd аватар
Offline
Зарегистрирован: 25.03.2014

Так document.getElementsByClassName("article")[0].innerText; работает. Кручу колесо - меняется яркость)

ЕвгенийП
ЕвгенийП аватар
Offline
Зарегистрирован: 25.05.2015

Ну, и здорово! Поздравляю!

Найдите какую-нибудь книжку про dynamic html - научитесь ориентироваться во всех этих innerText'ах

Sergeyevd
Sergeyevd аватар
Offline
Зарегистрирован: 25.03.2014

Евгений здравствуй.

Изучаю innerText'ты

var on ='<img src="on.png">'
var off ='<img  src="off.png">'

var q = document.getElementById("A0").innerHTML;
var a = document.getElementById("A1").innerHTML;
var z = document.getElementById("A2").innerHTML;


document.getElementById("kn1").innerHTML = q;
document.getElementById("kn2").innerHTML = a;
document.getElementById("kn3").innerHTML = z;

Подскажи пожалуйста, почему 

document.getElementById("A01").innerHTML = on; работает

а

document.getElementById("A01").innerHTML = q;  (где q считалось из файла и равно on) не работает

OlegM
Offline
Зарегистрирован: 14.06.2016

больше кода покажи, где читал куда вставлял.

ЕвгенийП
ЕвгенийП аватар
Offline
Зарегистрирован: 25.05.2015

Sergeyevd пишет:
 

document.getElementById("A01").innerHTML = on; работает

а

document.getElementById("A01").innerHTML = q;  (где q считалось из файла и равно on) не работает

Чёт я в коде такого не вижу.

В любом случае, поставьте там alert (а лучше печать в отладочный div или textarea) чтоюы посмотреть чему оно равно перед присваиванием. навернка многое прояснтся.

Sergeyevd
Sergeyevd аватар
Offline
Зарегистрирован: 25.03.2014
<html>
<head>
<title>Cool dynamic page!!!</title>
<script language="JavaScript">
var on ='<img id="on" onclick="myFunction()"  src="on.png">'
var off ='<img id="off" onclick="myFunction()"  src="off.png">'
	  
      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()", 1000);
		
var q = document.getElementById("A0").innerHTML;
var a = document.getElementById("A1").innerHTML;
var z = document.getElementById("A2").innerHTML;

document.getElementById('demo').innerHTML = q ;
//if (q=='on') {
//q=on;
//} else {
//q=off;
//}
document.getElementById('kn1').innerHTML = on ;
document.getElementById('kn2').innerHTML = a ;
document.getElementById('kn3').innerHTML = z ;


}
o.send();
}

</script>
</head>
<body onload="dR()">
   
<p>Demo :<span id="demo"</span></p>    
 
<p>Кнопка 1:<span id="kn1"</span></p> 
<p>Кнопка 2:<span id="kn2"</span></p>
<p>Кнопка 3:<span id="kn3"</span></p>

<p>A0:<span id="A0"</span></p>
<p>A1:<span id="A1"</span></p>
<p>A2:<span id="A2"</span></p>

   </body>
</html>

Sergeyevd
Sergeyevd аватар
Offline
Зарегистрирован: 25.03.2014

data.txt

A0=on
A1=off
A2=on
 
 
 
26,27,28 строки
 
если пишу on или off то показывает картинку, если подставляю соответствующую переменную q,a,z, то выводится текст.
 
Если делаю элементарное условие, то всё работает как надо.
В демо то печатается как положеног, on
Sergeyevd
Sergeyevd аватар
Offline
Зарегистрирован: 25.03.2014

OlegM пишет:

больше кода покажи, где читал куда вставлял.

 

Основной код, - это код Евгения в самом начале темы.

ЕвгенийП
ЕвгенийП аватар
Offline
Зарегистрирован: 25.05.2015

А где закрывающий скобки? у Вас написано в строка 39-43

<p>Demo :<span id="demo"</span></p>    
 
<p>Кнопка 1:<span id="kn1"</span></p> 
<p>Кнопка 2:<span id="kn2"</span></p>
<p>Кнопка 3:<span id="kn3"</span></p>

<p>A0:<span id="A0"</span></p>
<p>A1:<span id="A1"</span></p>
<p>A2:<span id="A2"</span></p>

а должно быть

<p>Demo :<span id="demo"></span></p>    
 
<p>Кнопка 1:<span id="kn1"></span></p> 
<p>Кнопка 2:<span id="kn2"></span></p>
<p>Кнопка 3:<span id="kn3"</span></p>

<p>A0:<span id="A0"></span></p>
<p>A1:<span id="A1"></span></p>
<p>A2:<span id="A2"></span></p>

Видите разницу?

по поводу же что и как Вы ставите. Давайте Вы приведёте два кода, что я ьог их явно сравнить. И кроме того, не пренебрегайте отладочной печатью На Web странице печать делается легко, а она Вам поможет понимать что происходит. Нужен пример организации печати?

OlegM
Offline
Зарегистрирован: 14.06.2016

вот тебе и основной код, скобку забыл в span

Sergeyevd
Sergeyevd аватар
Offline
Зарегистрирован: 25.03.2014
<html>
<head>
<title>Cool dynamic page!!!</title>
<script language="JavaScript">
var on ='<img id="on" onclick="myFunction()"  src="on.png">'
var off ='<img id="off" onclick="myFunction()"  src="off.png">'
	  
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()", 1000);
		
var q = document.getElementById("A0").innerHTML;
var a = document.getElementById("A1").innerHTML;
var z = document.getElementById("A2").innerHTML;

document.getElementById('kn1').innerHTML = q ;
document.getElementById('kn2').innerHTML = a ;
document.getElementById('kn3').innerHTML = z ;
}
o.send();
}

</script>
</head>
<body onload="dR()">
<p>Кнопка 1:<span id="kn1"></span></p> 
<p>Кнопка 2:<span id="kn2"></span></p>
<p>Кнопка 3:<span id="kn3"></span></p>

<p>A0:<span id="A0"></span></p>
<p>A1:<span id="A1"></span></p>
<p>A2:<span id="A2"></span></p>

   </body>
</html>

<html>
<head>
<title>Cool dynamic page!!!</title>
<script language="JavaScript">
var on ='<img id="on" onclick="myFunction()"  src="on.png">'
var off ='<img id="off" onclick="myFunction()"  src="off.png">'
var i;
var q;
var zna = ["A0", "A1", "A2"];
var knopu = ["kn1", "kn2", "kn3"];

      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()", 1000);
		

for (i = 0; i < zna.length; i++) {
q = document.getElementById(zna[i]).innerHTML;
if (q=='on')
{
q=on;
} else {
q=off;
}
document.getElementById(knopu[i]).innerHTML = q ;
}


         }
         o.send();
      }

      </script>
   </head>
   <body onload="dR()">
<p>Кнопка 1:<span id="kn1"></span></p> 
<p>Кнопка 2:<span id="kn2"></span></p>
<p>Кнопка 3:<span id="kn3"></span></p>

<p>A0:<span id="A0"></span></p>
<p>A1:<span id="A1"></span></p>
<p>A2:<span id="A2"></span></p>

   </body>
</html>

Закрывающие скобки да, где т потерял, невнимательность и позднее время суток)

Нужен пример организации печати?

Да, хотелось бы.

OlegM
Offline
Зарегистрирован: 14.06.2016

<script>

alert (q);

document.getElementById("debug").innerHTML = q ;

</script>

<div id="debug"></div>

 

---

Книжек бы почитать, ты же не то что о чем то сложном спрашиваешь, это база, с таким подходом, может оно вам не надо ?

Sergeyevd
Sergeyevd аватар
Offline
Зарегистрирован: 25.03.2014

OlegM пишет:

<script>

alert (q);

document.getElementById("debug").innerHTML = q ;

</script>

<div id="debug"></div>

 

---

Книжек бы почитать, ты же не то что о чем то сложном спрашиваешь, это база, с таким подходом, может оно вам не надо ?

 

Что Вы мне этим показали? В моём посту выше есть проверка полученных данных, алертом проверял аналогично.

<p>Demo :<span id="demo"</span></p>   

В переменных получается текст on/off соответственно. 

 

Sergeyevd
Sergeyevd аватар
Offline
Зарегистрирован: 25.03.2014

Вопрос вовсе иного характера

document.getElementById('kn1').innerHTML = q ;

почему если вместо q написать on/off выводится картинка

если оставить q, которой присвоен текст on/off выводится сам текст

OlegM
Offline
Зарегистрирован: 14.06.2016

Sergeyevd пишет:

Нужен пример организации печати?

Да, хотелось бы.

это пример печати 

<script>

alert (q);

document.getElementById("debug").innerHTML = q ;

</script>

<div id="debug"></div>

---

в 29 строке что находится в q? посмотри alert()

скобки не пропускай как тут <p>Demo :<span id="demo"</span></p>   

--- 

и так на вскидку, не путаешь там on с "on"?

Sergeyevd
Sergeyevd аватар
Offline
Зарегистрирован: 25.03.2014

в 29 строке что находится в q? посмотри alert()

Я же говорю, в q находится on/off в зависимости от того, что находится в файле data.txt

Sergeyevd
Sergeyevd аватар
Offline
Зарегистрирован: 25.03.2014

Sergeyevd
Sergeyevd аватар
Offline
Зарегистрирован: 25.03.2014

в 29 строке что находится в q? посмотри alert()

скобки не пропускай как тут <p>Demo :<span id="demo"</span></p>   

--- 

и так на вскидку, не путаешь там on с "on"?

[/quote]

Скобки скопировал из текста выше,извиняюсь.

как узнать "on" или on? разницу понимаю.

OlegM
Offline
Зарегистрирован: 14.06.2016

почему если вместо q написать on/off выводится картинка

смотри что прилетает в 22 строке в q

 

Sergeyevd
Sergeyevd аватар
Offline
Зарегистрирован: 25.03.2014
var q = document.getElementById("A0").innerHTML;
var a = document.getElementById("A1").innerHTML;
var z = document.getElementById("A2").innerHTML;
alert(q); //выводт off
document.getElementById('kn1').innerHTML = q ;

document.getElementById('kn2').innerHTML = a ;
document.getElementById('kn3').innerHTML = z ;

 

OlegM
Offline
Зарегистрирован: 14.06.2016

var q = document.getElementById("A0").innerHTML;
var a = document.getElementById("A1").innerHTML;
var z = document.getElementById("A2").innerHTML;
alert(q); //выводт off

// ну, а если тут пишешь
if( q == "off") q = '<img id="off" onclick="myFunction()"  src="off.png">';

document.getElementById('kn1').innerHTML = q ; // тут картинка должна быть или с off приходит еще с какими то символами типа \r\n

document.getElementById('kn2').innerHTML = a ;
document.getElementById('kn3').innerHTML = z ;
Sergeyevd
Sergeyevd аватар
Offline
Зарегистрирован: 25.03.2014

Я тоже думал про \r\n

Проверяю

<html>
<head>
<title>Agagagogo</title>
<script language="JavaScript">
var on ='<img id="on" src="on.png">'
var off ='<img id="off"  src="off.png">'
	  

function dR() {
setTimeout("dR()", 1000);
var q = document.getElementById("A0").innerHTML;
//alert(q);
document.getElementById('kn1').innerHTML = q; //ставлю on/off работает, иначе выводи текст off
}

</script>
</head>
<body onload="dR()">
<p>Кнопка 1:<span id="kn1"></span></p> 
<p>A0:<span id="A0">off</span></p>


   </body>
</html>

 

OlegM
Offline
Зарегистрирован: 14.06.2016

в 11 приходит офф текст, то соответственно в 13 тоже будет текст офф, добавь строчку 7 из предыдущего сообщения моего меж 11 и 13 строку

Sergeyevd
Sergeyevd аватар
Offline
Зарегистрирован: 25.03.2014

OlegM пишет:

в 11 приходит офф текст, то соответственно в 13 тоже будет текст офф, добавь строчку 7 из предыдущего сообщения моего меж 11 и 13 строку

 

Так это понятно, так я уже проверял, работает.

Я ж там вверху приводил код с if, всё работает.

OlegM
Offline
Зарегистрирован: 14.06.2016

какой пост, где там ?

Sergeyevd
Sergeyevd аватар
Offline
Зарегистрирован: 25.03.2014
<html>
<head>
<title>Cool dynamic page!!!</title>
<script language="JavaScript">
var on ='<img id="on" onclick="myFunction()"  src="on.png">'
var off ='<img id="off" onclick="myFunction()"  src="off.png">'
var i;
var q;
var zna = ["A0", "A1", "A2"];
var knopu = ["kn1", "kn2", "kn3"];

      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()", 1000);
		

for (i = 0; i < zna.length; i++) {
q = document.getElementById(zna[i]).innerHTML;
if (q=='on')
{
q=on;
} else {
q=off;
}
document.getElementById(knopu[i]).innerHTML = q ;
}


         }
         o.send();
      }

      </script>
   </head>
   <body onload="dR()">
<p>Кнопка 1:<span id="kn1"></span></p> 
<p>Кнопка 2:<span id="kn2"></span></p>
<p>Кнопка 3:<span id="kn3"></span></p>

<p>A0:<span id="A0"></span></p>
<p>A1:<span id="A1"></span></p>
<p>A2:<span id="A2"></span></p>

   </body>
</html>

 

Sergeyevd
Sergeyevd аватар
Offline
Зарегистрирован: 25.03.2014

И для отладки алерт (для меня) неудомен, лучше так:

var q = document.getElementById("A0").innerHTML;
var a = document.getElementById("A1").innerHTML;
var z = document.getElementById("A2").innerHTML;
console.log('Переменная q: '+q);
console.log('Переменная a: '+a);
console.log('Переменная z: '+z);
console.log(''); 
document.getElementById('kn1').innerHTML = q ;
document.getElementById('kn2').innerHTML = a ;
document.getElementById('kn3').innerHTML = z ;

OlegM
Offline
Зарегистрирован: 14.06.2016

сча, скопирую себе и потом проверю, впадло было, но лан...

OlegM
Offline
Зарегистрирован: 14.06.2016

у меня работает, я отбросил лишнее..АЯКС

<head>
<title>Cool dynamic page!!!</title>

</head>
   <body>
   

   
   
<p>Кнопка 1:<span id="kn1"></span></p> 
<p>Кнопка 2:<span id="kn2"></span></p>
<p>Кнопка 3:<span id="kn3"></span></p>

<p>A0:<span id="A0"></span></p>
<p>A1:<span id="A1"></span></p>
<p>A2:<span id="A2"></span></p>
   
  
      <script>
var on ='<img id="on" onclick="myFunction()"  src="on.png" title="on">';
var off ='<img id="off" onclick="myFunction()"  src="off.png" title="off">';
var i;
var q;
var zna = ["A0", "A1", "A2"];
var knopu = ["kn1", "kn2", "kn3"];

      //типа получили данные
      document.getElementById("A0").innerHTML = "on";
      document.getElementById("A1").innerHTML = "off";
      document.getElementById("A2").innerHTML = "on";
		

for (i = 0; i < zna.length; i++)
{
    q = document.getElementById(zna[i]).innerHTML;
    
    if (q=='on')
    {
        q = on;
    } 
    else {
            q = off;
         }
    document.getElementById(knopu[i]).innerHTML = q ;
}

</script>

 </body>
</html>

 

ЕвгенийП
ЕвгенийП аватар
Offline
Зарегистрирован: 25.05.2015

OlegM пишет:

<script>

alert (q);

document.getElementById("debug").innerHTML = q ;

</script>

<div id="debug"></div>

С идеей согласен, по реализации три замечания.

1) лучше +=, т.к при = будет затирать старое и невозможно, например, в цикле печатать

2) лучше innerText, т.к. при innerHTML ,будет пытаться форматировать по правилам HTML

3) нужно добавить проверку типа, и если объект, то печатать список свойств циклом for in

Сегодня в течении дня выложу для ТС, если Вы не опередите 

OlegM
Offline
Зарегистрирован: 14.06.2016

я показал базовый пример пример, в таком случае )) Вам стоит написать целый сриптик дебага ))) для автора

---

для интереса уже взял закинул и data.txt и index.html, у меня работает, автор или что-то в дата тхт не то пишет или х.з. у меня пашет.

ЕвгенийП
ЕвгенийП аватар
Offline
Зарегистрирован: 25.05.2015

OlegM пишет:

у меня работает, автор или что-то в дата тхт не то пишет или х.з. у меня пашет.

да идея-то простая как резистор, чего ей не работать-то?

Sergeyevd
Sergeyevd аватар
Offline
Зарегистрирован: 25.03.2014

std
Offline
Зарегистрирован: 05.01.2012

ЕвгенийП, респект, простой двиг, и можно запихнуть в 328.

Вообще, мне больше нра jQuery, ну просто ей удобно пользоваться (вписываешь id/класс по правилам CSS и вперёд), но тащемта я её использую только для трёх вещей:

1. асинхронный обмен инфой, т. о. AJAX

2. чисто клиентские красивости, т. е. доступ к CSS свойствам и фишки типа fadeOut()

3. JSON, хотя это уже прихоть

Мб удастся понять, что в ней отвечает за css(), attr() и выдрать. К сожалению я сейчас по ноздри в одном проекте (первый на берегу Хэйлунцзян escape room), но потом можно заняться.

Sergeyevd
Sergeyevd аватар
Offline
Зарегистрирован: 25.03.2014

Многоуважаемые друзья, что-то я запутался, никак не соображу..

#include <EtherCard.h>
static byte mymac[] = { 0x74,0x69,0x69,0x2D,0x30,0x31 };
static byte myip[] = { 192,168,1,100 };
const char website[] PROGMEM = "192.168.1.100";
byte Ethernet::buffer[1000];
BufferFiller bfill;

void setup () {
Serial.begin(250000);
ether.begin(sizeof Ethernet::buffer, mymac, 10);
ether.staticSetup(myip);
pinMode(3, OUTPUT);
pinMode(6, OUTPUT);
}

void loop () {

word pos = ether.packetLoop(ether.packetReceive());
if (pos){
// получаем заголовки
 char *data = (char *) Ethernet::buffer + pos;
Serial.print(data);
// проверяем на наличие в заголовках нужных нам строк
if (strstr(data, "GET /index.htm") || strstr(data, "GET / HTTP/1.1") ) {
bfill = ether.tcpOffset();
bfill.emit_p(PSTR(
"HTTP/1.0 200 OK\r\n"
"Content-Type: text/html\r\n"
"\r\n"
"<html>"
"<head>"
"<meta charset=\"utf-8\">"
"<title>Яркость</title>"
"<script src=\"/evgeniip.js\"></script>"
"</head>"
"<body onload=\"dR()\">"
"<input type=\"range\"  min=\"0\" max=\"255\" step=\"5\" id=\"qp\"  value=\"0\"><br>"
"<input type=\"range\" min=\"0\" max=\"255\" step=\"5\" id=\"wp\"  value=\"0\"><br>"
"<br>"
"Яркость первого светодиоода:<span id=\"q\"></span><br>"
"Яркость второго светодиода:<span id=\"w\"></span>"
"<br>"
"</body>"
"</html>"
));
}

if (strstr(data, "GET /kaka.htm")  ) {
int yarkost = atoi(strstr(data, "q=") + 2);
int yarkost1 = atoi(strstr(data, "w=") + 2);
analogWrite(3, yarkost);  
analogWrite(6, yarkost1);  
bfill = ether.tcpOffset();
bfill.emit_p(PSTR(
"HTTP/1.0 200 OK\r\n"
"Content-Type: text/plain\r\n"
"\r\n"
"q = $D\r\n"
"w = $D\r\n"
),yarkost,yarkost1);
}

 ether.httpServerReply(bfill.position());
 }
}

evgeniip.js

var o=new XMLHttpRequest();
function dR() {

var yarkost = document.getElementById("qp").value;
var yarkost1 = document.getElementById("wp").value;

		o.open("GET","kaka.htm?r="+Math.random()+"q="+yarkost+"w="+yarkost1,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);

		}
		o.send();
		}
		

Имею два ползунка, от 0 до 255. Двигаю, всё прекрасно работает. По умолчанию при загрузке страницы яркость обоих равна 0.

Я никак не пойму, хочу селать, скажем три кнопки

value="0"//значение 1 кнопки

value="100"// второй

value="255"// третьей

Как мне осуществить передачу value если Id один