Hallo Ich habe auf einem Raspberry3 einen WEbserver laufen. Ein Python Script übergibt dabei eiinge Variable. Im html file werden sie dann so ausgegeben: ... <h2>Spannung 1: {{ tens_a }}V</h2> ... dies funktioniert auch soweit. ich möchte nun eine if Abfrage einbauen, die je nach Wert der Variabel ein anderes jpg einblendet. Spannung über 12V ein Grüner Haken, unter 12V bis 11V ein gelbes Warndreieck und unter 11V ein rotes Error Symbol Ich mach erst meine ersten Schritte in html, aber grad hier steh ich momentan auf der Leitung..
wieso die if-abfrage nicht im Python schreiben? das (alte) html hat keine If-Abfragen, weil es keine turing-vollständige Programmiersprache ist. Ist aber nicht auszuschließen, dass das heutzutage auch im html geht, z.B. html5 - ich habe mich damit schon länger nicht mehr auseinandergesetzt. Eine Alternative wäre Javascript.
:
Bearbeitet durch User
Also mit html selber gehts wahrscheinlich nicht, aber js kann das, ich würde es aber auch in Python machen
Ach und BTW html ist nicht nur keine Turing-vollständige Programmiersprache, es ist garkeine Programmiersprache.
So etwas geht mit Javascript. Ich schalte auf meiner Webseite z.B. Ei Foto in Abhängikeit von der Tageszeit um. In Javascript sieht das dann so aus:
1 | if ( Stunden >= 6 && Stunden < 9 ){ |
2 | document.getElementById('PICTURE').style.backgroundImage = 'url(./foto/morgen_1.jpg)'; |
3 | } else if ( Stunden >= 9 && Stunden < 18 ){ |
4 | document.getElementById('PICTURE').style.backgroundImage = 'url(./foto/tag.jpg)'; |
5 | } else if ( Stunden >= 18 && Stunden < 20 ){ |
6 | document.getElementById('PICTURE').style.backgroundImage = 'url(./foto/abend_1.jpg)'; |
7 | }else{ |
8 | document.getElementById('PICTURE').style.backgroundImage = 'url(./foto/nacht_1.jpg)'; |
9 | };
|
Der zugehörige Abschnitt im HTML Teil der Seite sieht dann so aus:
1 | <div id="PICTURE" class="hBox w33" style="margin:0; background-image:url(./foto/morgen.jpg); background-size : 100%; background-repeat:no-repeat"> |
Du mußt also Deinem HTML Element, welches Dein Bild darstellen soll eine eindeutige ID geben. Über diese ID sprichst Du das dann an. An Stelle der Zeitabfrage in meinem Beispiel mußt Du halt Deine Variable abfragen. Ansonsten solltest Du Dich hier https://wiki.selfhtml.org belesen
Py schrieb: > Ach und BTW html ist nicht nur keine Turing-vollständige > Programmiersprache, es ist garkeine Programmiersprache. CSS bewegt sich allerdings in großen Schritten in diese Richtung! :D
Rolli schrieb: > ... > <h2>Spannung 1: {{ tens_a }}V</h2> > ... wenn das Python mit jinja2 das html rendert, denn teil hast du leider nicht erwähnt.
1 | {% if tens_a >= 12 %} |
2 | <img src="okay.png" alt="grüner Haken"> |
3 | {% else %} |
4 | <img src="error.png" alt="rotes kreuz"> |
5 | {% endif %} |
Zeno schrieb: > Ich schalte auf meiner Webseite z.B. Ei Foto in Abhängikeit von der > Tageszeit um. In Javascript sieht das dann so aus: ich habe dein Beispiel hier als Grundlage genommen, leider wird weder image1.jpg noch image2.jpg angezeigt: index.html
1 | <!doctype html>
|
2 | <html lang="en"> |
3 | <head>
|
4 | <meta charset="UTF-8"> |
5 | <title>Rolli</title> |
6 | <meta http-equiv="refresh" content="5"> |
7 | <link rel = "stylesheet" href = "./static/css/style.css"> |
8 | <script type = "text/javascript" src = "./static/js/jquery.min.js" ></script> |
9 | <script type = "text/javascript" src = "./static/js/rol.js" ></script> |
10 | </head>
|
11 | |
12 | |
13 | <body>
|
14 | |
15 | <div id="PICTURE" |
16 | class="hBox w33" style="margin:0; background-image:url(./static/foto/background.img); background-size : 100%; background-repeat:no-repeat"> |
17 | </div>
|
18 | |
19 | </body>
|
20 | </html>
|
und unter /static/js/rol.js habe ich rol.js
1 | if ( Stunden >= 6 && Stunden < 9 ){ |
2 | document.getElementById('PICTURE').style.backgroundImage = 'url(./static/foto/image1.jpg)'; |
3 | } else if ( Stunden >= 9 ){ |
4 | document.getElementById('PICTURE').style.backgroundImage = 'url(./static/foto/image2.jpg)'; |
5 | } |
Bitte melde dich an um einen Beitrag zu schreiben. Anmeldung ist kostenlos und dauert nur eine Minute.
Bestehender Account
Schon ein Account bei Google/GoogleMail? Keine Anmeldung erforderlich!
Mit Google-Account einloggen
Mit Google-Account einloggen
Noch kein Account? Hier anmelden.