BIld statt Textanzeige

binderj1 · 11. Dez. 2018

Hallo Leute
Ich brauche eure Hilfe.

document.getElementById("LED4").innerHTML = "LED 4 is OFF (D9)";

Wie kann ich im obigen Code anstatt des Textes "LED 4 is OFF (D9)" ein Bild anzeigen?

lG
Johannes

mikdoe · 11. Dez. 2018

Ich würde mittels document.createElement() eine Image Node erzeugen und mittels document.getElementById("LED4").appendChild() ins DOM einhängen

binderj1 · 11. Dez. 2018

so etwa?

var bild1 = document.createElement(bild1.png);
document.getElementById("LED4").appendChild(bild1);

mikdoe · 12. Dez. 2018

Nein. Doku: https://developer.mozilla.org/de/docs/Web/API/Document/createElement

Konkret für diesen Fall hier:

HTML:

var bild = document.createElement('img');
bild.src = 'bild1.png'; // ggf. mit Pfad
document.getElementById('LED4').appendChild(bild);

binderj1 · 23. Dez. 2018

Hallo mikdoe
vielen Dank für deine schnelle Antwort. Leider habe ich erst jetzt wieder Zeit um an meinem Proj. (WEBVISU meine Heizung) weiter zumachen.
Ich habe jedoch noch eine Frage, und zwar.
Wenn ich den Button drücke um den Heizkreis frei zu geben, (HKDG=on) werden mir beide Bilder im Button angezeigt, und wenn (HKDG=off) ist, werden mir beide Bilder in umgekehrter Reihenfolge angezeigt.
Wie kann ich das ändern?

HTML:

if (this.responseXML.getElementsByTagName('HKDG').childNodes[0].nodeValue === "on") {
								document.getElementById("DG_ON").appendChild(bild2);
								DG_state = 1;
							}
							else {
								document.getElementById("DG_OFF").appendChild(bild3);
								DG_state = 0;
							}

lG

mikdoe · 24. Dez. 2018

Durch .appendChild() hängst du an den bestehenden Inhalt zusätzlichen an. Du willst aber - so habe ich es verstanden - nicht anhängen sondern ersetzen. Deshalb die Zielnode vorher leer machen z. B. mit .removeChild().
Ein vorheriges .innerHTML = '' wäre hier wahrscheinlich auch vertretbar.

binderj1 · 27. Dez. 2018

Hallo mikdoe

ich hätte eine Frage, und zwar warum sind da if (this.responseXML.getElementsByTagName('HKDG').childNodes[0].nodeValue === "on")
drei === Gleichheitszeichen?

P.S. vielen Dank für deine Antworten!

lG
bindrj1

mikdoe · 28. Dez. 2018

Ganz grob: bei 3 wird auch verglichen ob der Datentyp gleich ist. Meistens ist das wichtig bei der Unterscheidung zwischen Zahlen und Nichtzahlen. Nur ganz grob formuliert. Das Thema ist komplexer aber hier wahrscheinlich in dieser Vereinfachung ausreichend. Oder?

binderj1 · 29. Dez. 2018

Ja
Danke

mikdoe · 29. Dez. 2018

gerne

binderj1 · 06. Jan. 2019

Wenn im folgendem Code mi Bereich "Freigabe WZ" bild1 gestzt wird, so wird es angezeigt, kommt aber im Bereich "Freigabe EZ" auch bild1 zur Anzeige, so wird bild1 im "WZ-Bereich" gelöcht.
Was muss ich ändern damit die bilder immer angezeigt werden?

HTML:

	// ***********************Freigabe WZ *************************************

							if (this.responseXML.getElementsByTagName('WZ')[0].childNodes[0].nodeValue === "bild0") {
								document.getElementById("WZ").innerHTML="";
								document.getElementById("WZ").appendChild(bild0);
							}
							if (this.responseXML.getElementsByTagName('WZ')[0].childNodes[0].nodeValue === "bild1") {
								document.getElementById("WZ").innerHTML="";
								document.getElementById("WZ").appendChild(bild1);
							}
							if (this.responseXML.getElementsByTagName('WZ')[0].childNodes[0].nodeValue === "bild2") {
								document.getElementById("WZ").innerHTML="";
								document.getElementById("WZ").appendChild(bild2);
							}
							if (this.responseXML.getElementsByTagName('WZ')[0].childNodes[0].nodeValue === "bild3") {
								document.getElementById("WZ").innerHTML="";
								document.getElementById("WZ").appendChild(bild3);
							}
	// ***********************Freigabe WZ *************************************

	// ***********************Freigabe EZ *************************************

							if (this.responseXML.getElementsByTagName('EZ')[0].childNodes[0].nodeValue === "bild0") {
								document.getElementById("EZ").innerHTML="";
								document.getElementById("EZ").appendChild(bild0);
							}
							if (this.responseXML.getElementsByTagName('EZ')[0].childNodes[0].nodeValue === "bild1") {
								document.getElementById("EZ").innerHTML="";
								document.getElementById("EZ").appendChild(bild1);
							}
							if (this.responseXML.getElementsByTagName('EZ')[0].childNodes[0].nodeValue === "bild2") {
								document.getElementById("EZ").innerHTML="";
								document.getElementById("EZ").appendChild(bild2);
							}
							if (this.responseXML.getElementsByTagName('EZ')[0].childNodes[0].nodeValue === "bild3") {
								document.getElementById("EZ").innerHTML="";
								document.getElementById("EZ").appendChild(bild3);
							}
	// ***********************Freigabe EZ *************************************

mikdoe · 07. Jan. 2019

Ich tippe mal darauf, dass dein responseXML nicht so ist wie es sein müsste, damit das von dir erwartete Verhalten eintritt. Denn im gezeigten JS ist ja jede Bedingung eindeutig.

binderj1 · 07. Jan. 2019

HTML:

<!DOCTYPE html>
<html>
    <head>
        <title>Arduino Ajax I/O</title>
        <script>
		strWZ = "";
		strEZ = "";
		strSZ = "";
		strAZ = "";
		
		var bild0 = document.createElement('img');
		bild0.src = 'http://ff-windigsteig.bplaced.net/heiz050.jpg';
		var bild1 = document.createElement('img');
		bild1.src = 'http://ff-windigsteig.bplaced.net/heiz150.jpg';
		var bild2 = document.createElement('img');
		bild2.src = 'http://ff-windigsteig.bplaced.net/heiz250.jpg';
		var bild3 = document.createElement('img');
		bild3.src = 'http://ff-windigsteig.bplaced.net/heiz350.jpg';	
		function GetArduinoIO()
		{
			
			var request = new XMLHttpRequest();

        request.onreadystatechange = function()
			{
            if (this.readyState == 4) {
                if (this.status == 200) {
                       	if (this.responseXML != null) {
	//*********************** Analogeingang*****************************************
						
								document.getElementsByClassName("analog")[0].innerHTML =
									this.responseXML.getElementsByTagName('analog')[0].childNodes[0].nodeValue;
							
	//********************* Schalteingang Sicherheitsthermostat*********************************
							
								document.getElementsByClassName("switches")[0].innerHTML =
									this.responseXML.getElementsByTagName('switch')[0].childNodes[0].nodeValue;
						
	// ***********************Freigabe WZ *************************************

							if (this.responseXML.getElementsByTagName('WZ')[0].childNodes[0].nodeValue === "bild0") {
								document.getElementById("WZ").innerHTML="";
								document.getElementById("WZ").appendChild(bild0);
							}
							if (this.responseXML.getElementsByTagName('WZ')[0].childNodes[0].nodeValue === "bild1") {
								document.getElementById("WZ").innerHTML="";
								document.getElementById("WZ").appendChild(bild1);
							}
							if (this.responseXML.getElementsByTagName('WZ')[0].childNodes[0].nodeValue === "bild2") {
								document.getElementById("WZ").innerHTML="";
								document.getElementById("WZ").appendChild(bild2);
							}
							if (this.responseXML.getElementsByTagName('WZ')[0].childNodes[0].nodeValue === "bild3") {
								document.getElementById("WZ").innerHTML="";
								document.getElementById("WZ").appendChild(bild3);
							}
	// ***********************Freigabe WZ *************************************

	// ***********************Freigabe EZ *************************************

							if (this.responseXML.getElementsByTagName('EZ')[0].childNodes[0].nodeValue === "bild0") {
								document.getElementById("EZ").innerHTML="";
								document.getElementById("EZ").appendChild(bild0);
							}
							if (this.responseXML.getElementsByTagName('EZ')[0].childNodes[0].nodeValue === "bild1") {
								document.getElementById("EZ").innerHTML="";
								document.getElementById("EZ").appendChild(bild1);
							}
							if (this.responseXML.getElementsByTagName('EZ')[0].childNodes[0].nodeValue === "bild2") {
								document.getElementById("EZ").innerHTML="";
								document.getElementById("EZ").appendChild(bild2);
							}
							if (this.responseXML.getElementsByTagName('EZ')[0].childNodes[0].nodeValue === "bild3") {
								document.getElementById("EZ").innerHTML="";
								document.getElementById("EZ").appendChild(bild3);
							}
	// ***********************Freigabe EZ *************************************

	// ***********************Freigabe SZ *************************************

							if (this.responseXML.getElementsByTagName('SZ')[0].childNodes[0].nodeValue === "bild0") {
								document.getElementById("SZ").innerHTML="";
								document.getElementById("SZ").appendChild(bild0);
							}
							if (this.responseXML.getElementsByTagName('SZ')[0].childNodes[0].nodeValue === "bild1") {
								document.getElementById("SZ").innerHTML="";
								document.getElementById("SZ").appendChild(bild1);
							}
							if (this.responseXML.getElementsByTagName('SZ')[0].childNodes[0].nodeValue === "bild2") {
								document.getElementById("SZ").innerHTML="";
								document.getElementById("SZ").appendChild(bild2);
							}
							if (this.responseXML.getElementsByTagName('SZ')[0].childNodes[0].nodeValue === "bild3") {
								document.getElementById("SZ").innerHTML="";
								document.getElementById("SZ").appendChild(bild3);
							}
	// ***********************Freigabe SZ *************************************

						}
					}
				}
			}
			// send HTTP GET request with LEDs to switch on/off if any
			request.open("GET", "ajax_inputs" + strWZ + strEZ + strSZ, true);
			request.send(null);
			setTimeout('GetArduinoIO()', 1000);
			strWZ = "";
			strEZ = "";
			strSZ = "";
			strAZ = "";
		}
		
		
		
		function GetButtonWZ()
		{
			var x = document.getElementById("ButtonWZ");
					if (x.innerHTML === "enableWZ")
					{
						x.innerHTML = "notenableWZ";
						strWZ = "&enableWZ=0";
					}
					else
					{
						x.innerHTML = "enableWZ";
						strWZ = "&enableWZ=1";

					}
		}

		function GetButtonEZ()
		{
			var y = document.getElementById("ButtonEZ");
					if (y.innerHTML === "enableEZ")
					{
						y.innerHTML = "notenableEZ";
						strEZ = "&enableEZ=0";
					}
					else
					{
						y.innerHTML = "enableEZ";
						strEZ = "&enableEZ=1";
					}
		}
		function GetButtonSZ()
		{
			var z = document.getElementById("ButtonSZ");
					if (z.innerHTML === "enableSZ")
					{
						z.innerHTML = "notenableSZ";
						strSZ = "&enableSZ=0";
					}
					else
					{
						z.innerHTML = "enableSZ";
						strSZ = "&enableSZ=1";
					}
		}

	</script>
	<style>
		.IO_box {
			float: left;
			margin: 0 20px 20px 0;
			border: 1px solid blue;
			padding: 0 5px 0 5px;
			width: 120px;
		}
		h1 {
			font-size: 120%;
			color: blue;
			margin: 0 0 10px 0;
		}
		h2 {
			font-size: 85%;
			color: #5734E6;
			margin: 5px 0 5px 0;
		}
		p, form, button {
			font-size: 80%;
			color: #252525;
		}
		.small_text {
			font-size: 70%;
			color: #737373;
		}
	</style>
    </head>
    <body onload="GetArduinoIO()">
        <h1>Arduino Ajax I/O</h1>
        <div class="IO_box">
			<h2>Analog Inputs</h2>
			<p>A2: <span class="analog">...</span></p>
		</div>
		<div class="IO_box">
			<h2>Switch Inputs</h2>
			<p>Wohnzimmer : <span class="switches">...</span></p>
			<p class="small_text">Wohnzimmer</p>
			<button type="button" id="WZ" onclick="GetButtonWZ()"></button><br /><br />

			<p class="small_text">Esszimmerzimmer</p>
			<button type="button" id="EZ" onclick="GetButtonEZ()"></button><br /><br />
			<p class="small_text">Schlafzimmer</p>
			<button type="button" id="SZ" onclick="GetButtonSZ()"></button><br /><br />
		
		</div>
		<div class="IO_box">
        <p class="small_text">Test</p>
        <p id="ButtonWZ"</p>
		<p id="ButtonEZ"</p>
        <p id="ButtonSZ"</p>
		</div>
          

    </body>
</html>

Das ist der gesamte Code.

- - - Aktualisiert - - -

Hallo
... und das sind die XML-Daten vom Arduino

Code:

<?xml version = "1.0" ?>
<inputs>
<analog>15.94</analog>
<switchWZ>OFF</switchWZ>
<switchEZ>OFF</switchEZ>
<switchSZ>OFF</switchSZ>
<WZ>bild0</WZ>
<EZ>bild0</EZ>
<SZ>bild2</SZ>
</inputs>

mikdoe · 08. Jan. 2019

Sieht aus wie vermutet. Es werden wahrscheinlich immer alle drei Bildsteuerfelder ausgeliefert. Dann wäre die Frage, wie der Browser die richtige Steuerung erkennen soll. Wie sehen denn die XML Daten aus, wenn der gefragte Fall eintritt?

BIld statt Textanzeige

binderj1

New member

mikdoe

Moderator

binderj1

New member

mikdoe

Moderator

binderj1

New member

mikdoe

Moderator

binderj1

New member

mikdoe

Moderator

binderj1

New member

mikdoe

Moderator

binderj1

New member

mikdoe

Moderator

binderj1

New member

mikdoe

Moderator