[英]Arduino and JS/Cpp
I have a project "smart house" and I use Arduino Mega with Ethernet Shield. 我有一个项目“ smart house”,并且我将Arduino Mega与Ethernet Shield一起使用。 My problem is connect data from arduino to GUI website (I am beginner in JS). 我的问题是将数据从arduino连接到GUI网站(我是JS的初学者)。 When I press the button, the data is sent to Arduino and my button change color from red to green (light on) -> This is ok. 当我按下按钮时,数据将发送到Arduino,并且我的按钮的颜色从红色变为绿色(点亮)->可以。
Then, if I open the door i would like to div color change from red to green and i dont know how.. 然后,如果我打开门,我想将div的颜色从红色变为绿色,我不知道该怎么做。
This is Arduino code: 这是Arduino代码:
int count; // used by 'for' loops
int sw_arr[] = {30,31,32,33,34,35}; // pins interfaced to switches
for (count = 0; count < 5; count++) {
cl.print("<switch>");
if (digitalRead(sw_arr[count])) {;
cl.print("OFF");
}
else {
cl.print("ON");
}
cl.println("</switch>");
}
On my website the string change from OFF to ON, but i would like to background color change and i think that my problem is Javascript. 在我的网站上,字符串从OFF更改为ON,但是我想更改背景颜色,并且我认为我的问题是Javascript。
This is orginal code from tutorial: 这是教程中的原始代码:
var count;
var num_an = this.responseXML.getElementsByTagName('switch').length;
for (count = 0; count < num_an; count++) {
document.getElementsByClassName("doors")[count].innerHTML =
this.responseXML.getElementsByTagName('switch')[count].childNodes[0].nodeValue;
}
I change this code, but still not working: 我更改了此代码,但仍无法正常工作:
var count;
var num_an = this.responseXML.getElementsByTagName('switch').length;
for (count = 0; count < num_an; count++) {
if(this.responseXML.getElementsByTagName('switch')[count].childNodes[0].nodeValue === "ON") {
$('.doors').css('background', '#989898');
}
else {
$('.doors').css('background', '#FA6900');
}
}
HTML Code: HTML代码:
<div class="item-door light-red doors">
<div id = "door">
<i class="fa fa-key"></i>
<p>Door</p>
</div>
</div>
So summary, I need change DIV background color from red to green instead string ON/OFF. 因此,总之,我需要将DIV背景颜色从红色更改为绿色,而不是字符串ON / OFF。
If someone have a time and could help me I would be very thankful! 如果有人有时间可以帮助我,我将非常感激!
The code $('.doors').css('background', '#989898');
代码$('.doors').css('background', '#989898');
changes the background of all container which contains the class "doors". 更改所有包含“门”类的容器的背景。 In you for statement, if the last iteration changes background for #FA6900
, all your div will get the #FA6900
color. 在for语句中,如果最后一次迭代更改了#FA6900
背景,则所有div都将获得#FA6900
颜色。
If you want to change only one container you have to write : 如果只想更改一个容器,则必须编写:
$( $(".doors").get(count) ).css('background', '#989898')
.` $( $(".doors").get(count) ).css('background', '#989898')
。
There is two time $()
because .get()
return a DOM element and not a jquery element so we need to transform it again if we want to apply the .css()
method. $()
有两次,因为.get()
返回DOM元素而不是jquery元素,因此如果要应用.css()
方法,则需要再次对其进行转换。
Last point : #989898
is grey and #FA6900
is orange 最后一点: #989898
为灰色, #FA6900
为橙色
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.