Anzeige Fehler im Webfront bei HTML Box.

Ich versuche im Webfront eine Variable mit HTML Code + CSS einzufügen und bekomme da aber immer eine andere Ansicht als wenn ich die html Seite lokal in einem Browser öffne. Ich hab per Photoshop und Slices ein Bild bearbeitet und als HTML abgespeichert. Wenn ich diese HTML Seite im IE oder Firefox öffne wird alles richtig angezeigt. Wenn ich aber den Code in eine String Variable mit HTML einfüge bekomme ich erst mal gar keine Anzeige im Webfront. Erst wenn ich im CSS Teil in der ersten Table den Parameter „Position:absolute“ entferne wird was angezeigt, leider aber verschoben.
Wenn ich aber eine extra Webserver im IPS direkt auf die HTML Seite zeigen lasse, passt wieder alles.

Hat jemand eine Idee woran das liegen kann?

Richtig:
richtig_new_webserver.PNG

Falsch:

Bilder als Anhang:
Display_html.zip (64.8 KB)


<?
  SetValueString(55964,"<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
<title>Display</title>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
<style type='text/css'>
<!--

div.Table_01 {
	left:0px;
	top:0px;
	width:666px;
	height:386px;
}

div.Display-01_ {
	position:absolute;
	left:0px;
	top:0px;
	width:666px;
	height:41px;
}

div.Display-02_ {
	position:absolute;
	left:0px;
	top:41px;
	width:597px;
	height:39px;
}

div.LED-Stoerung_ {
	position:absolute;
	left:597px;
	top:41px;
	width:14px;
	height:14px;
}

div.Display-04_ {
	position:absolute;
	left:611px;
	top:41px;
	width:55px;
	height:345px;
}

div.Display-05_ {
	position:absolute;
	left:597px;
	top:55px;
	width:14px;
	height:25px;
}

div.Display-06_ {
	position:absolute;
	left:0px;
	top:80px;
	width:563px;
	height:2px;
}

div.Button-Info_ {
	position:absolute;
	left:563px;
	top:80px;
	width:48px;
	height:48px;
}

div.Display-08_ {
	position:absolute;
	left:0px;
	top:82px;
	width:303px;
	height:69px;
}

div.Display_ {
	position:absolute;
	left:303px;
	top:82px;
	width:208px;
	height:78px;
}

div.Display-10_ {
	position:absolute;
	left:511px;
	top:82px;
	width:52px;
	height:304px;
}

div.Display-11_ {
	position:absolute;
	left:563px;
	top:128px;
	width:48px;
	height:68px;
}

div.Display-12_ {
	position:absolute;
	left:0px;
	top:151px;
	width:113px;
	height:235px;
}

div.LED-Heizungspumpe-1_ {
	position:absolute;
	left:113px;
	top:151px;
	width:12px;
	height:12px;
}

div.Display-14_ {
	position:absolute;
	left:125px;
	top:151px;
	width:178px;
	height:137px;
}

div.Display-15_ {
	position:absolute;
	left:303px;
	top:160px;
	width:208px;
	height:52px;
}

div.Display-16_ {
	position:absolute;
	left:113px;
	top:163px;
	width:12px;
	height:37px;
}

div.Button-Entaschen_ {
	position:absolute;
	left:563px;
	top:196px;
	width:48px;
	height:48px;
}

div.LED-Heizungspumpe-2_ {
	position:absolute;
	left:113px;
	top:200px;
	width:12px;
	height:12px;
}

div.Display-19_ {
	position:absolute;
	left:113px;
	top:212px;
	width:12px;
	height:37px;
}

div.Display-20_ {
	position:absolute;
	left:303px;
	top:212px;
	width:85px;
	height:28px;
}

div.Button-Rauf_ {
	position:absolute;
	left:388px;
	top:212px;
	width:48px;
	height:47px;
}

div.Display-22_ {
	position:absolute;
	left:436px;
	top:212px;
	width:75px;
	height:28px;
}

div.Display-23_ {
	position:absolute;
	left:303px;
	top:240px;
	width:31px;
	height:48px;
}

div.Button-zurueck_ {
	position:absolute;
	left:334px;
	top:240px;
	width:48px;
	height:48px;
}

div.Display-25_ {
	position:absolute;
	left:382px;
	top:240px;
	width:6px;
	height:146px;
}

div.Display-26_ {
	position:absolute;
	left:436px;
	top:240px;
	width:6px;
	height:146px;
}

div.Button-Ja_ {
	position:absolute;
	left:442px;
	top:240px;
	width:48px;
	height:48px;
}

div.Display-28_ {
	position:absolute;
	left:490px;
	top:240px;
	width:21px;
	height:146px;
}

div.Display-29_ {
	position:absolute;
	left:563px;
	top:244px;
	width:48px;
	height:44px;
}

div.LED-Boilerpumpe_ {
	position:absolute;
	left:113px;
	top:249px;
	width:12px;
	height:12px;
}

div.Display-31_ {
	position:absolute;
	left:388px;
	top:259px;
	width:48px;
	height:8px;
}

div.Display-32_ {
	position:absolute;
	left:113px;
	top:261px;
	width:12px;
	height:37px;
}

div.Button-runter_ {
	position:absolute;
	left:388px;
	top:267px;
	width:48px;
	height:48px;
}

div.Display-34_ {
	position:absolute;
	left:125px;
	top:288px;
	width:135px;
	height:98px;
}

div.Button-Aendern_ {
	position:absolute;
	left:260px;
	top:288px;
	width:48px;
	height:48px;
}

div.Display-36_ {
	position:absolute;
	left:308px;
	top:288px;
	width:74px;
	height:98px;
}

div.Display-37_ {
	position:absolute;
	left:442px;
	top:288px;
	width:48px;
	height:98px;
}

div.Button-IO_ {
	position:absolute;
	left:563px;
	top:288px;
	width:48px;
	height:48px;
}

div.LED-Pufferpumpe_ {
	position:absolute;
	left:113px;
	top:298px;
	width:12px;
	height:12px;
}

div.Display-40_ {
	position:absolute;
	left:113px;
	top:310px;
	width:12px;
	height:37px;
}

div.Display-41_ {
	position:absolute;
	left:388px;
	top:315px;
	width:48px;
	height:71px;
}

div.Display-42_ {
	position:absolute;
	left:260px;
	top:336px;
	width:48px;
	height:50px;
}

div.Display-43_ {
	position:absolute;
	left:563px;
	top:336px;
	width:48px;
	height:50px;
}

div.LED-Abgasgeblaese_ {
	position:absolute;
	left:113px;
	top:347px;
	width:12px;
	height:12px;
}

div.Display-45_ {
	position:absolute;
	left:113px;
	top:359px;
	width:12px;
	height:27px;
}

-->
</style>
</head>
<body style='background-color:#FFFFFF;'>
<div class='Table_01'>
	<div class='Display-01_'>
		<img id='Display_01' src='user/display_html/images/Display_01.png' width='666' height='41' alt='' />
	</div>
	<div class='Display-02_'>
		<img id='Display_02' src='user/display_html/images/Display_02.png' width='597' height='39' alt='' />
	</div>
	<div class='LED-Stoerung_'>
		<img id='LED_Stoerung' src='user/display_html/images/LED_Stoerung.png' width='14' height='14' alt='' />
	</div>
	<div class='Display-04_'>
		<img id='Display_04' src='user/display_html/images/Display_04.png' width='55' height='345' alt='' />
	</div>
	<div class='Display-05_'>
		<img id='Display_05' src='user/display_html/images/Display_05.png' width='14' height='25' alt='' />
	</div>
	<div class='Display-06_'>
		<img id='Display_06' src='user/display_html/images/Display_06.png' width='563' height='2' alt='' />
	</div>
	<div class='Button-Info_'>
		<a href='http://URL_Info' target='Info_Target'>
			<img id='Button_Info' src='user/display_html/images/Button_Info.png' width='48' height='48' border='0' alt='' /></a>
	</div>
	<div class='Display-08_'>
		<img id='Display_08' src='user/display_html/images/Display_08.png' width='303' height='69' alt='' />
	</div>
	<div class='Display_'>
		<img id='Display' src='user/display_html/images/Display.png' width='208' height='78' alt='' />
	</div>
	<div class='Display-10_'>
		<img id='Display_10' src='user/display_html/images/Display_10.png' width='52' height='304' alt='' />
	</div>
	<div class='Display-11_'>
		<img id='Display_11' src='user/display_html/images/Display_11.png' width='48' height='68' alt='' />
	</div>
	<div class='Display-12_'>
		<img id='Display_12' src='user/display_html/images/Display_12.png' width='113' height='235' alt='' />
	</div>
	<div class='LED-Heizungspumpe-1_'>
		<img id='LED_Heizungspumpe_1' src='user/display_html/images/LED_Heizungspumpe_1.png' width='12' height='12' alt='' />
	</div>
	<div class='Display-14_'>
		<img id='Display_14' src='user/display_html/images/Display_14.png' width='178' height='137' alt='' />
	</div>
	<div class='Display-15_'>
		<img id='Display_15' src='user/display_html/images/Display_15.png' width='208' height='52' alt='' />
	</div>
	<div class='Display-16_'>
		<img id='Display_16' src='user/display_html/images/Display_16.png' width='12' height='37' alt='' />
	</div>
	<div class='Button-Entaschen_'>
		<img id='Button_Entaschen' src='user/display_html/images/Button_Entaschen.png' width='48' height='48' alt='' />
	</div>
	<div class='LED-Heizungspumpe-2_'>
		<img id='LED_Heizungspumpe_2' src='user/display_html/images/LED_Heizungspumpe_2.png' width='12' height='12' alt='' />
	</div>
	<div class='Display-19_'>
		<img id='Display_19' src='user/display_html/images/Display_19.png' width='12' height='37' alt='' />
	</div>
	<div class='Display-20_'>
		<img id='Display_20' src='user/display_html/images/Display_20.png' width='85' height='28' alt='' />
	</div>
	<div class='Button-Rauf_'>
		<img id='Button_Rauf' src='user/display_html/images/Button_Rauf.png' width='48' height='47' alt='' />
	</div>
	<div class='Display-22_'>
		<img id='Display_22' src='user/display_html/images/Display_22.png' width='75' height='28' alt='' />
	</div>
	<div class='Display-23_'>
		<img id='Display_23' src='user/display_html/images/Display_23.png' width='31' height='48' alt='' />
	</div>
	<div class='Button-zurueck_'>
		<img id='Button_zurueck' src='user/display_html/images/Button_zurueck.png' width='48' height='48' alt='' />
	</div>
	<div class='Display-25_'>
		<img id='Display_25' src='user/display_html/images/Display_25.png' width='6' height='146' alt='' />
	</div>
	<div class='Display-26_'>
		<img id='Display_26' src='user/display_html/images/Display_26.png' width='6' height='146' alt='' />
	</div>
	<div class='Button-Ja_'>
		<img id='Button_Ja' src='user/display_html/images/Button_Ja.png' width='48' height='48' alt='' />
	</div>
	<div class='Display-28_'>
		<img id='Display_28' src='user/display_html/images/Display_28.png' width='21' height='146' alt='' />
	</div>
	<div class='Display-29_'>
		<img id='Display_29' src='user/display_html/images/Display_29.png' width='48' height='44' alt='' />
	</div>
	<div class='LED-Boilerpumpe_'>
		<img id='LED_Boilerpumpe' src='user/display_html/images/LED_Boilerpumpe.png' width='12' height='12' alt='' />
	</div>
	<div class='Display-31_'>
		<img id='Display_31' src='user/display_html/images/Display_31.png' width='48' height='8' alt='' />
	</div>
	<div class='Display-32_'>
		<img id='Display_32' src='user/display_html/images/Display_32.png' width='12' height='37' alt='' />
	</div>
	<div class='Button-runter_'>
		<img id='Button_runter' src='user/display_html/images/Button_runter.png' width='48' height='48' alt='' />
	</div>
	<div class='Display-34_'>
		<img id='Display_34' src='user/display_html/images/Display_34.png' width='135' height='98' alt='' />
	</div>
	<div class='Button-Aendern_'>
		<img id='Button_Aendern' src='user/display_html/images/Button_Aendern.png' width='48' height='48' alt='' />
	</div>
	<div class='Display-36_'>
		<img id='Display_36' src='user/display_html/images/Display_36.png' width='74' height='98' alt='' />
	</div>
	<div class='Display-37_'>
		<img id='Display_37' src='user/display_html/images/Display_37.png' width='48' height='98' alt='' />
	</div>
	<div class='Button-IO_'>
		<img id='Button_IO' src='user/display_html/images/Button_IO.png' width='48' height='48' alt='' />
	</div>
	<div class='LED-Pufferpumpe_'>
		<img id='LED_Pufferpumpe' src='user/display_html/images/LED_Pufferpumpe.png' width='12' height='12' alt='' />
	</div>
	<div class='Display-40_'>
		<img id='Display_40' src='user/display_html/images/Display_40.png' width='12' height='37' alt='' />
	</div>
	<div class='Display-41_'>
		<img id='Display_41' src='user/display_html/images/Display_41.png' width='48' height='71' alt='' />
	</div>
	<div class='Display-42_'>
		<img id='Display_42' src='user/display_html/images/Display_42.png' width='48' height='50' alt='' />
	</div>
	<div class='Display-43_'>
		<img id='Display_43' src='user/display_html/images/Display_43.png' width='48' height='50' alt='' />
	</div>
	<div class='LED-Abgasgeblaese_'>
		<img id='LED_Abgasgeblaese' src='user/display_html/images/LED_Abgasgeblaese.png' width='12' height='12' alt='' />
	</div>
	<div class='Display-45_'>
		<img id='Display_45' src='user/display_html/images/Display_45.png' width='12' height='27' alt='' />
	</div>
</div>
</body>
</html>");
?>

Keiner eine Idee oder war die Frage zu schwer? hihi

Das Problem sind die vielen Grafiken. Wenn wir das entschlacken würd es warscheinlich auch sauber in IP-Symcon angezeigt.
Ich schreibe dir den Code mal um so das die meisten Elemente und Grafiken mit CSS gelöst werden.

Das klingt dann für mich aber dann eher so, als ob der IPS Webserver bzw. die HTML BOX sich nicht wie eine „normaler“ Webserver verhält??!

Nein ganz so einfach ist es nicht. Ich schätze auch das dein Konstrukt nicht in allen Browsern das selbe Ergebniss liefert. Generell ist es leider sehr unsauber direkt aus Photoshop html erzeugen zu lassen.
Habs fast fertig :slight_smile:

Dafür kannst du mir mal verraten wie du den Pelletsstand bei dir ausliest? :slight_smile: PM wäre nett.

Ich bin leider nicht ganz fertig geworden, denke aber das es klar ist wie es weiter aufgebaut wird.
Bei mir im System ergaben sich keine Fehler.
Farben und abstände müssen warscheinlich nochmal angepasst werden. Es ist aber so sehr leicht Status Änderungen vorzunehmen und durch das viele CSS entfallen sehr sehr viele Grafiken. Das System läd so schneller.
Schreib ruhig falls du noch Fragen hast.

screenshot.PNG


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Display</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body
{
	margin: 0px;
	font-size: 12px;
}
#content
{
	position: absolute;
	left: 0px;
	top: 0px;
	width: 650px;
	height: 400px;
	background-color: #bbbbbb;
}
#netz
{
	position: absolute;
	left: 30px;
	top: 5px;
	text-align: center;
}
#netz .display
{
	width: 50px;
	height: 50px;
	background-color: #ffffff;
}
#sicherung
{
	position: absolute;
	left: 150px;
	top: 5px;
	text-align: center;
}
#sicherung .display
{
	width: 50px;
	height: 50px;
	background-color: #ffffff;
	-webkit-border-radius: 25px;
	-moz-border-radius: 25px;
	border-radius: 25px;
}
#pumpen
{
	position: absolute;
	left: 20px;
	top: 130px;
	width: 230px;
	height: 250px;
}
#pumpen .hand
{
	float: left;
	height: 100%;
	width: 10px;
	background-color: #ff0000;
}
#pumpen .aus
{
	float: left;
	height: 100%;
	width: 50px;
}
#pumpen .aus div
{
	float: left;
	margin: 5px;
	width: 40px;
	height: 40px;
	background-color: #ffffff;
}
#pumpen .auto
{
	float: left;
	height: 100%;
	width: 10px;
	background-color: #00ff00;
}

#pumpen .pumpen
{
	float: left;
	height: 100%;
	width: 130px;
}
#pumpen .pumpen div
{
	margin-top: 20px;
	margin-bottom: 33px;
}
#pumpen .pumpen .status
{
	float: left;
	margin: 5px;
	width: 6px;
	height: 6px;
	background-color: #ffffff;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
}
#pumpen .pumpen .active
{
	background-color: #00ff00;
}
#steuerung
{
	position: absolute;
	right: 10px;
	top: 10px;
	width: 400px;
	height: 380px;
	background-color: #cccccc;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	font-size: 14px;
}
#steuerung .logo
{
	position: absolute;
	left: 30px;
	top: 20px;
	color: #ff0000;
	font-size: 16px;
}
#steuerung .info
{
	position: absolute;
	left: 50px;
	top: 60px;
	width: 200px;
	height: 80px;
	background-color: #b8dec9;
	border: solid 1px #000000;
	padding: 5px;
}
#steuerung .info .zeit
{
	float: right;
}
#steuerung #status
{
	position: absolute;
	right: 30px;
	top: 20px;
	width: 100px;
	height: 50px;
}
#steuerung #status .betrieb
{
	float: left;
	color: #00ff00;
	width: 65px;
	height: 20px;
}

#steuerung #status .stoerung
{
	float: left;
	color: #ff0000;
	width: 65px;
	height: 20px;
}
#steuerung #status .status
{
	width: 30px;
	height: 30px;
	background-color: #00ff00;
	float: right;
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	border-radius: 15px;
	margin-top: 3px;
}
#steuerung #aendern
{
	position: absolute;
	left: 30px;
	bottom: 40px;
}
#steuerung #zurueck
{
	position: absolute;
	left: 100px;
	bottom: 70px;
}
#steuerung #auf
{
	position: absolute;
	left: 150px;
	bottom: 100px;
}
#steuerung #ab
{
	position: absolute;
	left: 150px;
	bottom: 50px;
}
#steuerung #ja
{
	position: absolute;
	left: 200px;
	bottom: 70px;
}
</style>
</head>
<body>
<div id="content">
	<div id="netz">
		N E T Z<br />
		<div class="display"></div>
	</div>
	<div id="sicherung">
		Sicherung<br />
		<div class="display"></div>
		6,3A
	</div>
	<div id="pumpen">
		<div class="hand"></div>
		<div class="aus"><div></div><div></div><div></div><div></div><div></div></div>
		<div class="auto"></div>
		<div class="pumpen"><div><div class="status active"></div> Heizungspumpe 1</div><div><div class="status"></div> Heizungspumpe 2</div><div><div class="status"></div> Boilerpumpe1</div><div><div class="status"></div> Pufferpumpe</div><div><div class="status"></div> Abgasgebläse</div></div>
	</div>
	<div id="steuerung">
		<div class="logo">ETA-tronic</div>
		<div class="info"><div class="zeit">22:17:08</div>TEMPERATURANZEIGEN <<br />PELL.LES    Warten<br />HOLZK. Ausgeschaltet</div>
		<div id="status"><div class="status"></div><div class="betrieb">BETRIEB</div><div class="stoerung">STÖRUNG</div></div>
		<div id="aendern"><img src="images/Button_Aendern.png" border="0"></div>
		<div id="zurueck"><img src="images/Button_zurueck.png" border="0"></div>
		<div id="auf"><img src="images/Button_Rauf.png" border="0"></div>
		<div id="ab"><img src="images/Button_Runter.png" border="0"></div>
		<div id="ja"><img src="images/Button_Ja.png" border="0"></div>
	</div>
</div>
</body>
</html>

Was für einen Kessel hast du?

Infos zu ETA findest du da:

Also wenn ich diese Code verwende bekomme ich garnichts angezeigt. Ich habe nur die " gegen ’ getauscht, da ich sonst mit der SetValueString Funktion nicht die Variable schreiben kann.

Hallo mistljo,

hast du mit der Steuerung über die Anzeige noch etwas gemacht?
Ich würde das jetzt über IPSView mit Hintergrundbild lösen

Hast du ein Script für das Senden der Steuercodes der Tasten?
Hast du eine Displayanzeigeroutine?

Gruß Konny

Hi,

ich hab sowas umgesetzt - allerdings leider nicht für „IPS“ sondern für ethersex (avr net io)…

Panel (HTML) mit SVG und Ajax, und Kommunikation mit ETA(4Zeilen Regler) in c++

Falls jemand Interesse hat, kanners gern haben. :slight_smile:

Gruß M.