if Abfrage Webseite

Rolli Gast #5757451
Lesenswert?
• ▲
▼ 
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..
Antwort Zitieren Bearbeiten Thread verschieben Thread sperren Anmeldepflicht aktivieren Anpinnen Thread löschen Thread mit anderem zusammenführen Beitrag melden
A. S. #5757465
Lesenswert?
• ▲
▼ 
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.
Antwort Zitieren Bearbeiten Löschen Beitrag melden
Zeno Gast #5757484
Lesenswert?
• ▲
▼ 
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
Antwort Zitieren Bearbeiten Löschen Beitrag melden
imonbln Gast #5757606
Lesenswert?
• ▲
▼ 
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 %}
Antwort Zitieren Bearbeiten Löschen Beitrag melden
Rolli Gast #5757698
Lesenswert?
• ▲
▼ 
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
}
Antwort Zitieren Bearbeiten Löschen Beitrag melden
Thread beobachten

Antwort schreiben

Bitte melde dich an, um einen Beitrag zu schreiben.

Bestehender Account

oder

Mit Google-Account einloggen

Noch kein Account?

Die Registrierung ist kostenlos und dauert nur eine Minute.

Jetzt registrieren