Skip to Content

Registrieren Anmelden

Industry Online Support

Technical Forum

Navigation

HTML via Webserver

Erstellt von: techniker_basti am: 01.03.2017 09:27 (2 Antworten)

Bewertung (0)

Dank 0

3 Einträge

01.03.2017 09:27	Bewerten (0)
techniker_basti Beiträge: 4 Bewertung: (0)	Liebe Gemeinde, ich hoffe es findet sich hier jemand der mir weiter helfen kann. Ich habe mit einer S7 1200 eine kleine Automatisierungslösung aufgebaut. Als Visualisierung dient dabei der integrierte Webserver. Leider sind meine HTML-Kennnisse beschränkt, ich bin aber nun soweit, dass ich Buttons zum setzen von Ein- und Ausgängen bzw. Merkern auf der Website realisiert habe. Es funktioniert soweit tadellos. Nun möchte ich eine Grafik, in Abhängigkeit einer bestimmten Variable z.B. M123 (0 oder 1) sichtbar bzw. unsichtbar darstellen. Kann mir jemand sagen wie der APW-Befehl in der Kopfzeile, und der dazu gehörige HTML Code in diesem Fall aussehen muss? Liebe Grüße Sebastian
techniker_basti Beiträge: 4 Bewertung: (0)
Vorschlag Bedanken Zitat Antwort

01.03.2017 22:57	Bewerten (0)
MicTsc Gold-Mitglied Beigetreten: 16.11.2012 Letzter Bes: 01.10.2024 Beiträge: 307 Bewertung: (52)	So sollte das funktionieren: <!doctype html> <html> <head> <meta charset="utf-8"> <title>Sichtbar/Unsichtbar</title> <style> #M123-0 { visibility: hidden; } #M123-1 { visibility: visible; } </style> </head> <body> <section> <h1>Beispiel Sichtbar/Unsichtbar</h1> <p id="M123-:="M123":">Sichtbar?</p> <img id="M123-:="M123":" alt="" src="pfadzumbild/bild.jpg"> </section> </body> </html> Zur Erklärung: die ID des <p> Tags setzt sich aus deiner Variabel M123 und dem Wert dieser Variabel zusammen: M123-:="M123": Wenn die Variabel also den Wert 0 hat, dann ist die ID M123-0, ist der Wert der Variabel 1, dann ist die ID M123-1. Im <head> Bereich habe ich ein CSS Style definiert. Dort habe ich definiert, dass die ID M123-0 den Text versteckt, und die ID M123-1 den Text sichtbar macht. Wobei der Teil im CSS Style für das Sichtbar machen des Textes nicht notwendig ist. Man könnte diesen Teil allerdings dazu verwenden, um den Text extra zu Formatieren, wie z.B. Farbe, Schriftart, etc. Das funktioniert auch mit Grafiken, wenn dem <img> Tag die entsprechende ID mitgegeben wird.
	Zuletzt bearbeitet von: MicTsc am: 01.03.2017 23:01:38 Zuletzt bearbeitet von: MicTsc am: 01.03.2017 23:12:07
Vorschlag Bedanken Zitat Antwort

07.05.2020 10:42	Bewerten (0)
Marcus1988 Beiträge: 12 Bewertung: (0)	Zwar etwas spät aber ich hab es etwas anders gelöst, mit einem Script ändere ich die CSS Eigenschaften JS als externe Datei eingebunden im Header <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <script src="Scripts/Funktionen.js" type="text/javascript"> </script> <style> .Buttons {-webkit-border-radius:0; -webkit-appearance:none;} // für ios Geräte bzw. keine // Abrundung der Ecken im Safari (ohne webhet Befehl sehen sie aus wie in Buttons_Safari.png, Seite war da noch im Anfangssatidium) </style> </head> Auzug aus Funktionen.js ( Insgesamt mehrere Funktionen ) values0 und values1 ist der Buttontext Status_Hand_Auto (Sperre der Buttons wenn Automatik ein ist ) elementName ID des Elements function SetStatus(Status_Hand_Auto, Status, elementName, values0, values1) { var buttonElement = document.getElementById(elementName); var submitElement = document.getElementById(elementName+".Value"); if (Status == '0') { if (Status_Hand_Auto == '0') { submitElement.value = "1"; } buttonElement.value = values0; buttonElement.style.borderStyle = "outset"; } if (Status == '1') { if (Status_Hand_Auto == '0') { submitElement.value = "0"; } buttonElement.value = values1; buttonElement.style.background = "#00ff00"; buttonElement.style.borderStyle = "inset"; } } Scriptaufruf am Ende des Html Codes </body> </html> <script> // kein Automatik SetStatus("0", ":="Db_fuer_Webpage".Christbaum.Read:", "Christbaum", "Chrisbaum einschalten", "Christbaum ausschalten"); ...........//weitere Buttons // mit Automatik SetStatus(":="Db_fuer_Webpage".Hand_Automatik_Keller.Read:", ":="Db_fuer_Webpage".Solar_West.Read:", "Solar_West", "Solar West einschalten", "Solar West ausschalten"); </script> // Kommentare zur Erkärung hier ergänzt Momentan Plage ich mich mit Responsiven Webeitendesign rum da, im R & I die Buttons auch neben den Objekt sein sollen und es mit SVG dynamischer werden soll als wie mit den Bildern ursprünglich (deshalb auch so viele PoolschemaX.html Dateien), und Reload soll nicht immer die ganze Seite neu laden (nur Inhalte refreshen) Des weiteren sollen Auch CSV von einem NAS gelesen werden (Browser meldet da leider ein CORS Problem) https://de.wikipedia.org/wiki/Cross-Origin_Resource_Sharing (Lösung noch austehend ) Mir hat auch die Bib von Siemens für die CSV nicht gefallen (html12_graph Demo) benutze da eine andere. https://c3js.org/gettingstarted.html Zisterne dient der Gartenbewässerung, die mal Automatisiert ablaufen soll, und es kommen ständig neue Sachen hinzu (Bsp. Stromzähler Lastmanagment usw.) Dateianhang Heizung26032020.zip (355 Downloads)
Marcus1988 Beiträge: 12 Bewertung: (0)	Zuletzt bearbeitet von: Marcus1988 am: 05/07/2020 10:45:32 Zuletzt bearbeitet von: Marcus1988 am: 05/07/2020 11:29:23 html Quellcode und nicht mehr ganz aktuelle Bilder ergänzt (Anhang) Zuletzt bearbeitet von: Marcus1988 am: 05/07/2020 11:31:35 Zuletzt bearbeitet von: Marcus1988 am: 05/07/2020 11:34:25
Vorschlag Bedanken Zitat Antwort

|

Teile diese Seite:

Teile diese Seite auf...

Folgen Sie uns auf