mikrocontroller.net

Forum: PC-Programmierung if Abfrage Webseite


Autor: Rolli (Gast)
Datum:

Bewertung
0 lesenswert
nicht 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..

Autor: A. S. (rava)
Datum:

Bewertung
0 lesenswert
nicht 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.

: Bearbeitet durch User
Autor: Py (Gast)
Datum:

Bewertung
0 lesenswert
nicht lesenswert
Also mit html selber gehts wahrscheinlich nicht, aber js kann das, ich 
würde es aber auch in Python machen

Autor: Py (Gast)
Datum:

Bewertung
3 lesenswert
nicht lesenswert
Ach und BTW html ist nicht nur keine Turing-vollständige 
Programmiersprache, es ist garkeine Programmiersprache.

Autor: Zeno (Gast)
Datum:

Bewertung
0 lesenswert
nicht 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:
      if ( Stunden >= 6 && Stunden < 9 ){
        document.getElementById('PICTURE').style.backgroundImage = 'url(./foto/morgen_1.jpg)';
      } else if  ( Stunden >= 9 && Stunden < 18 ){
        document.getElementById('PICTURE').style.backgroundImage = 'url(./foto/tag.jpg)';
      } else if  ( Stunden >= 18 && Stunden < 20 ){
        document.getElementById('PICTURE').style.backgroundImage = 'url(./foto/abend_1.jpg)';
      }else{
        document.getElementById('PICTURE').style.backgroundImage = 'url(./foto/nacht_1.jpg)';
      };


Der zugehörige Abschnitt im HTML Teil der Seite sieht dann so aus:
          <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

Autor: Sven B. (scummos)
Datum:

Bewertung
0 lesenswert
nicht lesenswert
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

Autor: imonbln (Gast)
Datum:

Bewertung
0 lesenswert
nicht 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.

{% if tens_a >= 12 %}
<img src="okay.png" alt="grüner Haken">
{% else %}
<img src="error.png" alt="rotes kreuz">
{% endif %}

Autor: Rolli (Gast)
Datum:

Bewertung
0 lesenswert
nicht 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
<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Rolli</title>
  <meta http-equiv="refresh" content="5">
  <link rel = "stylesheet" href = "./static/css/style.css">
  <script type = "text/javascript" src = "./static/js/jquery.min.js" ></script>
  <script type = "text/javascript" src = "./static/js/rol.js" ></script>
</head>


<body>

<div id="PICTURE" 
class="hBox w33" style="margin:0; background-image:url(./static/foto/background.img); background-size : 100%; background-repeat:no-repeat">
</div>

</body>
</html>

und unter /static/js/rol.js habe ich

rol.js
if ( Stunden >= 6 && Stunden < 9 ){
        document.getElementById('PICTURE').style.backgroundImage = 'url(./static/foto/image1.jpg)';
} else if  ( Stunden >= 9 ){
        document.getElementById('PICTURE').style.backgroundImage = 'url(./static/foto/image2.jpg)';
}

Autor: Rolf M. (rmagnus)
Datum:

Bewertung
0 lesenswert
nicht lesenswert
Wo ist in deinem Javaskript denn die Variable "Stunden" definiert?

Antwort schreiben

Die Angabe einer E-Mail-Adresse ist freiwillig. Wenn Sie automatisch per E-Mail über Antworten auf Ihren Beitrag informiert werden möchten, melden Sie sich bitte an.

Wichtige Regeln - erst lesen, dann posten!

  • Groß- und Kleinschreibung verwenden
  • Längeren Sourcecode nicht im Text einfügen, sondern als Dateianhang

Formatierung (mehr Informationen...)

  • [c]C-Code[/c]
  • [avrasm]AVR-Assembler-Code[/avrasm]
  • [code]Code in anderen Sprachen, ASCII-Zeichnungen[/code]
  • [math]Formel in LaTeX-Syntax[/math]
  • [[Titel]] - Link zu Artikel
  • Verweis auf anderen Beitrag einfügen: Rechtsklick auf Beitragstitel,
    "Adresse kopieren", und in den Text einfügen




Bild automatisch verkleinern, falls nötig
Bitte das JPG-Format nur für Fotos und Scans verwenden!
Zeichnungen und Screenshots im PNG- oder
GIF-Format hochladen. Siehe Bildformate.

Mit dem Abschicken bestätigst du, die Nutzungsbedingungen anzuerkennen.