Permalänk
Medlem

få en ruta att byta färg

hej
jag håller på med att programera ardunio för att styra min panna hemma. jag har nu gjort ett websida som visar hur värmt det är i pannan samt att jag se om den på eller av jag kan också starta den från websidan. men jag kan inte få en "lampa" (fyrkant som byter färg) att ändra sig hur pannan går typ grön=på rött=av jag får informationen från ardunio via en xml fil
hur skriver man korden på hemsidan för att det ska funka?

Permalänk
99:e percentilen

Det går inte att svara "exakt så här ska du göra" när du ställer frågan på det sättet, utan det faller på dig att koppla ihop olika delar av koden till ett fungerande system.

För att dynamiskt ändra utseende på ett HTML-element kan man använda JavaScript.

HTML:

<div id="statusElement"></div>

CSS:

#statusElement { width: 256px; height: 256px; } .good { background-color: #20A000; /* green */ } .bad { background-color: #D00; /* red */ }

JavaScript:

const CRITICAL_TEMP = 50; const CLASS_GOOD = "good"; const CLASS_BAD = "bad"; const statusElement = document.getElementById("statusElement"); function isCritical(temperature) { return temperature >= CRITICAL_TEMP; } function updateStatus(currentTemperature) { if (isCritical(currentTemperature)) { statusElement.classList.remove(CLASS_GOOD); statusElement.classList.add(CLASS_BAD); } else { statusElement.classList.remove(CLASS_BAD); statusElement.classList.add(CLASS_GOOD); } }

Visa signatur

Skrivet med hjälp av Better SweClockers

Permalänk
Medlem

jag ska nog förytliga mig lite
jag skicka i dag info om hur panna är för status via xml filen och sen skrivit ut status på sidan
via dessa rader
under script
document.getElementById("sspan").innerHTML = this.responseXML.getElementsByTagName('sspan')[0].childNodes[0].nodeValue;
och under html
<p>Pannan är <span id="sspan">***</span></p>
har testa 1 och 0 och sen on och off ser lite tråkigt ut jag skulle vilja ha en "lampa" i stället
så min fråga är hur får man
rutan att byta färg beror på om sspan är 1 eller 0
där jag har tänker mig 1 = grön och 0 = röd

Permalänk
Medlem

hur får in korden i de mörk gråa ruterna i detta forum?

Permalänk
Medlem

jag skulle vilja ha 4 "lampor" som får sina värden från xml

Permalänk
Medlem

vad gör jag för fel

hej
jag försöker att på en fyrkant att byta färg
den styrs av ett värde från en xml fil
här är mitt försök som inte funkar

<!DOCTYPE html>

<html>

<head>

<title>Värmesytem på Angegatan 6</title>

<style>

.IO_box1 {

position: absolute;
top: 0px;
left: 0px;;

margin: 0 20px 20px 0;

border: none;

padding: 0 5px 0 5px;

width:800px;
height: 60px;
}

.IO_box2 {

position: absolute;
top: 100px;
left: 100px;;

margin: 0 10px 20px 0;

border: 1px solid blue;

padding: 0 5px 0 5px;

width: 120px;

height: 250px;
}

.IO_box3 {

position: absolute;
top: 100px;
left: 450px;;

margin: 0 20px 20px 0;

border: 1px solid blue;

padding: 0 5px 0 5 px;

width: 120px;

height: 250px;
}

.IO_box4 {

position: relative;
top: 10px;
left: 38px;;

border: 0px solid blue;

width: 40px;

height: 30px;
}
.IO_box5 {

position: relative;
top: 40px;
left: 38px;;

border: 0px solid blue;

width: 40px;

height: 30px;
}
.IO_box6 {

position: relative;
top: 100px;
left: 38px;;

border: 0px solid blue;

width: 40px;

height: 30px;
}
.IO_box7 {

position: absolute;
top: 150px;
left: 280px;;

margin: 0 20px 20px 0;

border: 1px solid blue;

padding: 0 5px 0 5px;

width: 100px;
height: 80px;
}

.IO_box8 {

position: absolute;
top: 390px;
left: 100px;;

margin: 10px 20px 20px 0;

border: 1px solid blue;

padding: 0 5px 0 5px;

width:600px;
height: 200px;
}

.IO_box9 {

position: absolute;
top: 35px;
left: 10px;;

padding: 0 5px 0 5px;

margin: 0 20px 20px 0;

border: 1px solid blue;

width:180px;
height: 100px;
}

.IO_box10 {

position: absolute;
top: 105px;
left: 230px;;

padding: 0 5px 0 5px;

margin: 0 20px 20px 0;

border: 1px solid blue;

width:100px;
height: 60px;
}

.IO_box11 {

position: absolute;
top: 35px;
left: 230px;;

padding: 0 5px 0 5px;

margin: 0 20px 20px 0;

border: 1px solid blue;

width:100px;
height: 60px;
}

.IO_box12 {

position: absolute;
top: 35px;
left: 370px;;

padding: 0 5px 0 5px;

margin: 0 20px 20px 0;

border: 1px solid blue;

width:150px;
height: 100px;
}

.IO_box13 {

position: absolute;
top: 20px;
left: 5px;;

border: 0px solid blue;

width:50px;
height: 20px;
}

.IO_box14 {

position: absolute;
top: 25px;
left: 70px;;

border: 0px solid blue;

width:100px;
height: 20px;
}

.IO_box15 {

position: absolute;
top: 50px;
left: 5px;;

border: 0px solid blue;

width:50px;
height: 20px;
}

.IO_box16 {

position: absolute;
top: 55px;
left: 70px;;

border: 0px solid blue;

width:100px;
height: 20px;
}

.IO_box17 {

position: absolute;
top: 250px;
left: 600px;
border: 1px solid blue;

width: 110px;
height: 100px;
}

.IO_box18 {

position: absolute;
top: 300px;
left: 230px;;

border: 1px solid blue;

width: 50px;
height: 2px;
background-color: blue;
}

.IO_box19 {

position: absolute;
top: 120px;
left: 230px;;

border: 1px solid red;

width: 220px;
height: 2px;
background-color: red;
}

.IO_box20 {

position: absolute;
top: 340px;
left: 570px;;

border: 1px solid blue;

width: 30px;
height: 1px;
background-color: blue;
}

.IO_box21 {

position: absolute;
top: 260px;
left: 570px;;

border: 1px solid red;

width: 30px;
height: 1px;
background-color: red;
}

.IO_box22 {

position: absolute;
top: 230px;
left: 570px;;

border: 1px solid #de5c40;

width: 140px;
height: 1px;
background-color: #de5c40;
}

.IO_box23 {

position: absolute;
top: 360px;
left: 100px;;

border: 1px solid blue;

width:100px;
height: 30px;
}

.IO_box24 {

position: absolute;
top: 360px;
left: 210px;;

border: 1px solid blue;

width:100px;
height: 30px;
}

.IO_box25 {

position: absolute;
top: 360px;
left: 320px;;

border: 1px solid blue;

width:100px;
height: 30px;
}

.IO_box26 {

position: absolute;
top: 360px;
left: 600px;;

border: 1px solid blue;

width:100px;
height: 30px;
}

.IO_box27 {

position: absolute;
margin: 0 10px 20px 0;

padding: 0 5px 0 5px;

top: 197px;
left: 600px;;

border: 1px solid blue;

width:50px;
height: 30px;
}

.IO_box28 {

position: absolute;
margin: 0 10px 20px 0;

padding: 0 5px 0 5px;

top: 280px;
left: 280px;;

border: 1px solid blue;

width:40px;
height: 40px;
}

.IO_box29 {

position: absolute;
top: 300px;
left: 330px;;

border: 1px solid blue;

width: 120px;
height: 2px;
background-color: blue;
}

.IO_box30 {

position: absolute;
top: 290px;
left: 295px;;

border: 1px solid blue;

width: 20px;
height: 20px;
background-color: gray;
}

.IO_box31 {

position: absolute;
top: 290px;
left: 150px;;

border: 1px solid blue;

width: 20px;
height: 20px;
background-color: gray;
}

h1 {

font-size: 300%;

color: blue;

margin: 0 0 10px 0;
text-align:center;

}

h2 {

font-size: 100%;

color: #5734E6;

margin: 5px 0 5px 0;

text-align:center;
}

p, form, button {

font-size: 80%;

color: #252525;
text-align:center;

}

.small_text {

font-size: 50%;

color: White;

}

</style>

<SCRIPT LANGUAGE="JavaScript">
strLED1 = "";

strLED2 = "";

strLED3 = "";

strLED4 = "";

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) {
// extract XML data from XML file (containing switch states and analog value)
document.getElementById("temptankupp").innerHTML =
this.responseXML.getElementsByTagName('temptankupp')[0].childNodes[0].nodeValue;
document.getElementById("tillpanna").innerHTML =
this.responseXML.getElementsByTagName('tillpanna')[0].childNodes[0].nodeValue;
document.getElementById("temptankmitt").innerHTML =
this.responseXML.getElementsByTagName('temptankmitt')[0].childNodes[0].nodeValue;
document.getElementById("temppanan").innerHTML =
this.responseXML.getElementsByTagName('temppanan')[0].childNodes[0].nodeValue;
document.getElementById("temprokgas").innerHTML =
this.responseXML.getElementsByTagName('temprokgas')[0].childNodes[0].nodeValue;
document.getElementById("temptankner").innerHTML =
this.responseXML.getElementsByTagName('temptankner')[0].childNodes[0].nodeValue;
var spup = this.responseXML.getElementsByTagName('spup')[0].childNodes[0].nodeValue;
document.getElementById("sspan").innerHTML =
this.responseXML.getElementsByTagName('sspan')[0].childNodes[0].nodeValue;
document.getElementById("PanTempGrensTill").innerHTML =
this.responseXML.getElementsByTagName('PanTempGrensTill')[0].childNodes[0].nodeValue;
document.getElementById("PanTempGrensfran").innerHTML =
this.responseXML.getElementsByTagName('PanTempGrensfran')[0].childNodes[0].nodeValue;
document.getElementById("driftlage").innerHTML =
this.responseXML.getElementsByTagName('driftlage')[0].childNodes[0].nodeValue;
document.getElementById("soltak").innerHTML =
this.responseXML.getElementsByTagName('soltak')[0].childNodes[0].nodeValue;
document.getElementById("solin").innerHTML =
this.responseXML.getElementsByTagName('solin')[0].childNodes[0].nodeValue;
document.getElementById("solut").innerHTML =
this.responseXML.getElementsByTagName('solut')[0].childNodes[0].nodeValue;
document.getElementById("tid").innerHTML =
this.responseXML.getElementsByTagName('tid')[0].childNodes[0].nodeValue;
document.getElementById("dag").innerHTML =
this.responseXML.getElementsByTagName('dag')[0].childNodes[0].nodeValue;
document.getElementById("datum").innerHTML =
this.responseXML.getElementsByTagName('datum')[0].childNodes[0].nodeValue;
document.getElementById("rad").innerHTML =
this.responseXML.getElementsByTagName('rad')[0].childNodes[0].nodeValue;
document.getElementById("ute").innerHTML =
this.responseXML.getElementsByTagName('temputomhus')[0].childNodes[0].nodeValue;

if (spup == 0) {
document.getElementById("pknap").style.backgroundColor = "red";
}
if (spup == 1) {
document.getElementById("pknap").style.backgroundColor = "green";
}
if (sspan == 0) {
document.getElementById("bknap").style.backgroundColor = "red";

}
if (sspan == 1) {
document.getElementById("bknap").style.backgroundColor = "green";
}
}
}
}
}
request.open("GET", "ajax_inputs" + strLED1 + nocache, true);

request.send(null);
setTimeout('GetArduinoInputs()', 1000);
strLED1 = "";

strLED2 = "";

strLED3 = "";

strLED4 = "";

}
function GetButton1()

{

strLED1 = "&knap1";

}

function GetButton2()

{

strLED1 = "&knap2";

}

function GetButton3()

{

strLED1 = "&knap3";

}

function GetButton4()

{

strLED1 = "&knap4";

}

function GetButton5()

{

strLED1 = "&knap5";

}

function GetButton6()

{

strLED1 = "&knap6";

}

function GetButton7()

{

strLED1 = "&knap7";

}

function GetButton8()

{

strLED1 = "&knap8";

}
function GetButton9()

{

strLED1 = "&knap9";

}

function GetButton10()

{

strLED1 = "&knap10";

}

function GetButton11()

{

strLED1 = "&knap11";

}

</script>
</head>

<body onload="GetArduinoInputs()">
<div class="IO_box1">

<h1>Agnegatan 6 värmesystem</h1>

</div>
<div class="IO_box2">

<h2>Panna</h2>
<p>Från pannan <span id="temppanan">***</span></p>
<p>Rökgas <span id="temprokgas">***</span></p>
<p>Till pannan <span id="tillpanna">***</span></p>

</div>
<div class="IO_box3">

<h2>Tank</h2>
<div class="IO_box4">

<p><span id="temptankupp">**.**</span></p>

</div>
<div class="IO_box5">

<p><span id="temptankmitt">**.**</span></p>

</div>
<div class="IO_box6">

<p><span id="temptankner">**.**</span></p>
</div>
</div>
<div class="IO_box7">

<p>Pannan är <span id="sspan">***</span></p>
<p>pumpen är <span id="spup">***</span></p>

</div>
<div class="IO_box8">

<h2>Instäningar</h2>
<div class="IO_box9">

<H2>Anlägningen är i </H2>
<p><span id="driftlage">***</span></p>
<button type="button" onclick="GetButton1()"> AUTO </button>
<button type="button" onclick="GetButton2()"> MAN </button>
<button type="button" onclick="GetButton3()"> OFF </button>
</div>
<div class="IO_box10">

<H2>Pump </H2>
<button type="button" onclick="GetButton4()"> ON </button>
<button type="button" onclick="GetButton5()"> OFF </button>
</div>
<div class="IO_box11">

<H2>Bränare</H2>
<button type="button" onclick="GetButton6()"> ON </button>
<button type="button" onclick="GetButton7()"> OFF </button>
</div>
<div class="IO_box12">

<H2>När ska bränaren gå</H2>
<div class="IO_box13">

<p>Till <span id="PanTempGrensTill">***</span></p>
</div>
<div class="IO_box14">

<button type="button" onclick="GetButton8()"> + </button>
<button type="button" onclick="GetButton9()"> - </button>
</div>
<div class="IO_box15">

<p>Från <span id="PanTempGrensfran">***</span></p>
</div>
<div class="IO_box16">

<button type="button" onclick="GetButton10()"> + </button>
<button type="button" onclick="GetButton11()"> - </button>
</div>
</div>

</div>

<div class="IO_box17">

<p>sol tak <span id="soltak">***</span></p>
<p>sol in <span id="solin">***</span></p>
<p>sol ut <span id="solut">***</span></p>

</div>

<div class="IO_box18">

</div>
<div class="IO_box19">

</div>
<div class="IO_box20">

</div>
<div class="IO_box21">

</div>
<div class="IO_box22">

</div>
<div class="IO_box23">

<p><span id="tid">***</span></p>

</div>
<div class="IO_box24">

<p><span id="dag">***</span></p>

</div>
<div class="IO_box25">

<p><span id="datum">***</span></p>

</div>
<div class="IO_box26">

<p>ute <span id="ute">***</span></p>

</div>
<div class="IO_box27">

<p><span id="rad">***</span></p>

</div>
<div class="IO_box28">

</div>
<div class="IO_box29">

</div>
<div id="pknap" class="IO_box30">

</div>
<div id="bknap" class="IO_box31">

</div>

</body>

Dold text
Lagt till spoiler-taggar
Permalänk
Forumledare

@jost1: *trådar sammanfogade, bumpinlägg raderat*

Observera att det är förbjudet att skapa mer än en tråd om samma sak. Det beror på att vi tycker att det är viktigt att alla får samma chans att få sina trådar uppmärksammade. Om någon skapar mer än en tråd, trycks andras trådar undan snabbare, vilket blir orättvist. Den här gången har jag sammanfogat dina trådar åt dig, men kom i fortsättningen ihåg att regeln finns.

Jag har även lagt till spoilertaggar på ditt senaste inlägg samt raderat ett s.k bumpinlägg (§4). Det är tillåtet att skriva flera inlägg i rad så länge de tillför ny information och för diskussionen framåt.

Visa signatur

Forumets regler | Har du synpunkter på hur vi modererar? Kontakta SweClockers/moderatorerna

Jag stavar som en kratta

Gillar lök på discord

Permalänk
Medlem

@NordhNet:
hum jag är nybörjade på detta också så fel blev det av denna anledning
hur fick du in korden i den mörka rutan
och vad bumpinlägg raderat?
jag är nybörjar som ska var

Permalänk
99:e percentilen
Skrivet av jost1:

hur får in korden i de mörk gråa ruterna i detta forum?

Använd BB-taggen [code] till kod (eller [cmd] för inlinekod):

[code]
document.write("Hello world!");
[/code]

Resultat:

document.write("Hello world!");

Visa signatur

Skrivet med hjälp av Better SweClockers

Permalänk
Medlem

@Alling:
tack nu är man lite klockare men huvud problem är kvar tyvärr

Permalänk
99:e percentilen
Skrivet av jost1:

jag ska nog förytliga mig lite
jag skicka i dag info om hur panna är för status via xml filen och sen skrivit ut status på sidan
via dessa rader
under script
document.getElementById("sspan").innerHTML = this.responseXML.getElementsByTagName('sspan')[0].childNodes[0].nodeValue;
och under html
<p>Pannan är <span id="sspan">***</span></p>
har testa 1 och 0 och sen on och off ser lite tråkigt ut jag skulle vilja ha en "lampa" i stället
så min fråga är hur får man
rutan att byta färg beror på om sspan är 1 eller 0
där jag har tänker mig 1 = grön och 0 = röd

OK, här har du lite CSS och JS:

CSS:

.good { background-color: #20A000; /* green */ } .bad { background-color: #D00; /* red */ }

JavaScript:

const CLASS_GOOD = "good"; const CLASS_BAD = "bad"; function update(status, element) { element.classList.remove(CLASS_GOOD); element.classList.remove(CLASS_BAD); element.classList.add(status === true ? CLASS_GOOD : CLASS_BAD); }

Du behöver bara skicka in pannans status (true eller false) och det element som ska ändra färg som argument till update.

Visa signatur

Skrivet med hjälp av Better SweClockers

Permalänk
Medlem

@Alling:
om jag skriver

const CLASS_GOOD = "good"; const CLASS_BAD = "bad"; var spup = this.responseXML.getElementsByTagName('spup')[0].childNodes[0].nodeValue; pknap.classList.remove(CLASS_GOOD); pknap.classList.remove(CLASS_BAD); pknap.classList.add(spup === true ? CLASS_GOOD : CLASS_BAD);

kommer den då att funka? eller blir det fel. jag kommer inte på hur man ska tänka för att förstå java än
om rutan heter pknap och värdet i spup=true
css korden finns redan
för jag behöver väl inte göra en function om den redan kan ligga i samma som tar i mot xml filen

Permalänk
99:e percentilen
Skrivet av jost1:

@Alling:
om jag skriver

const CLASS_GOOD = "good"; const CLASS_BAD = "bad"; var spup = this.responseXML.getElementsByTagName('spup')[0].childNodes[0].nodeValue; pknap.classList.remove(CLASS_GOOD); pknap.classList.remove(CLASS_BAD); pknap.classList.add(spup === true ? CLASS_GOOD : CLASS_BAD);

kommer den då att funka? eller blir det fel. jag kommer inte på hur man ska tänka för att förstå java än
om rutan heter pknap och värdet i spup=true
css korden finns redan
för jag behöver väl inte göra en function om den redan kan ligga i samma som tar i mot xml filen

Varför använder du inte bara min funktion rätt av?

Det är för övrigt JavaScript och inte Java du skriver.

Visa signatur

Skrivet med hjälp av Better SweClockers

Permalänk
Medlem

Här är ett exempel som inte är särskilt snyggt, men kanske det lättaste sättet att få det fungera:

HTML:

<div id="light" style="width: 40px; height: 40px;"></div>

JavaScript:

var status = this.responseXML.getElementsByTagName('sspan')[0].childNodes[0].nodeValue; var light = document.getElementById("light"); if(status == 0) { light.style.backgroundColor = "red"; } else { light.style.backgroundColor = "green"; }

Permalänk
Medlem
Skrivet av Alling:

Varför använder du inte bara min funktion rätt av?

Det är för övrigt JavaScript och inte Java du skriver.

i alla programmering som kan innan inte så mycket att skryta om men
där har jag lär mig att man måste "ropa" på funktion för att den ska köras.
vad är det som gör att den "ropa" på? det är det som gör mig förvirad
och hur får jag in värdet från xml filen?
eller är det så smart att den ropas om värdet ändras?
och då vet också att jag ska skriva JavaScript

Permalänk
Medlem
Skrivet av Tazavoo:

Här är ett exempel som inte är särskilt snyggt, men kanske det lättaste sättet att få det fungera:

HTML:

<div id="light" style="width: 40px; height: 40px;"></div>

JavaScript:

var status = this.responseXML.getElementsByTagName('sspan')[0].childNodes[0].nodeValue; var light = document.getElementById("light"); if(status == 0) { light.style.backgroundColor = "red"; } else { light.style.backgroundColor = "green"; }

ska försöka göra denna lösning här förstår jag vad som händer vart. varför är den ingen snyggt?

Permalänk
99:e percentilen
Skrivet av jost1:

i alla programmering som kan innan inte så mycket att skryta om men
där har jag lär mig att man måste "ropa" på funktion för att den ska köras.
vad är det som gör att den "ropa" på? det är det som gör mig förvirad

Det här är en funktion:

function myFunction() { alert("Hello world!"); }

Den koden säger bara att funktionen myFunction finns och hur den fungerar. Den kommer inte köras förrän man kallar på den, så här:

myFunction();

Visa signatur

Skrivet med hjälp av Better SweClockers

Permalänk
Medlem
Skrivet av Alling:

Det här är en funktion:

function myFunction() { alert("Hello world!"); }

Den koden säger bara att funktionen myFunction finns och hur den fungerar. Den kommer inte köras förrän man kallar på den, så här:

myFunction();

jo så mycket har jag förstått men hur funkar din lösning på mitt problem
jag förstår inte riktigt hur du får in värdet från xml filen?
och vad som gör att den kör din kord. kan du för klara dig lite bättre
jag märker när jag läser javaskript att mycket händer utan att man ser var för det ska hända. därför har jag svårt att hänga med.
och jag ville inte bara skriva av en kord utan att förstå vad som händer också
het plötsligen finns ett värde som bra kommer från något utan att man frågar efter det

Permalänk
Medlem

@jost1:

Koden som Alling skrev gör ingenting om den inte kallas/anropas.

const CLASS_GOOD = "good"; const CLASS_BAD = "bad"; function update(status, element) { element.classList.remove(CLASS_GOOD); element.classList.remove(CLASS_BAD); element.classList.add(status === true ? CLASS_GOOD : CLASS_BAD); }

För att använda denna kod måste du som han skrev kalla på den med status (true/false) och elementet som skall ändras.
Det skulle alltså bli någonting i den här stilen:

var status = this.responseXML.getElementsByTagName('sspan')[0].childNodes[0].nodeValue == 1 ? true : false; var span = document.getElementById("sspan"); update(status, span);

Jag skrev att min kod inte är särskilt snygg t.ex. för att den använder inline styles (height och width borde hellre skrivas i en CSS-fil) och för att det är bra att gruppera kod t.ex. i en funktion, men för det du skall göra så duger koden bra som en början!

Permalänk
Medlem

jag tackar för all hjälp som jag har fått.
jag har använt tazavoo lösning av den enkla anledningen att jag begrep mig på den och fick den att funka
som jag nu använder arduino som webserver så det lite knöligt att testa saker. och man vill ju ha värmt i huset också
min dröm är att ha websidan på en "vanlig" webserver har hittat en lösning på det på nätet. men då måste jag kunna javaskript för att kunna fatta vad som händer och ändra det som jag behöver ändra.
så det blir väl att Lära sig javaskript från grunden
åter igen tack för alla hjälp
Med vänlig hälsning
jost1

Permalänk
Medlem

en rikligt dum fråga
om man bara skriver
<script>
</script>
i ett html fil vad är det för språk man skriver i då mellan dessa rader?

Permalänk
Medlem

@jost1: JavaScript!