Toon posts:

Python flask live update

Pagina: 1
Acties:

Onderwerpen

Vraag


  • jneefs
  • Registratie: December 2017
  • Laatst online: 07-03-2022
Hey,
Voor mijn eindwerk op school moet ik een dashboard maken voor een elektrische kart. Ik heb sensoren geplaatst die ik inlees met een arduino en doorstuur via seriële communicatie naar een raspberry. Op de raspberry draai ik een flask server die een html pagina weergeeft waarop tellers staan voor de snelheid en voor het toerental, ook staat hier nog wat extra informatie op van een aantal sensoren.
De bedoeling van dit project is dat de waardes van mijn sensoren live worden weergegeven in de webpagina.

Relevante software en hardware die ik gebruik:
Ik gebruik python3 en de module Flask

Wat ik al gevonden of geprobeerd heb:
Ik heb geprobeerd om in mijn html mijn pagina constant te refreshen, het probleem is dat als ik mijn pagina refresh mijn tellers oplopen van 0 tot de toegewezen waarde. Mijn teller blijft dus constant van 0 oplopen dus dit is geen oplossing.

Ik heb opgezocht hoe je in html een live data view kunt doen en dit gebeurd meestal met ajax. Ik heb dit eens bekeken maar kom er niet dadelijk uit hoe het juist zit om dan mijn data van mijn sensoren weg te sturen.

Ik heb iets half werkende gekregen maar het probleem is dat ik mijn html pagina moet refreshen om de nieuwe waarde weer te geven. Het python programma stuurt dus wel live de waardes door alleen refresht mijn html pagina niet.


Hieronder de code die ik gebruik:
Dit is de test die ik gebruik om te kijken of het werkt, dit is niet mijn uiteindelijke project.

HTML: home.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>Hello World</title>
  <link href="{{ url_for('static', filename='main.css', version=time)}}" rel="stylesheet" type="text/css" />
</head>

<body>
  <h1 class="hello-color">
    {{ message }}
    {{ time }}
  </h1>
</body>

</html>


Python: app.py
1
2
3
4
5
6
7
8
9
10
from flask import Flask, render_template
from datetime import datetime
app = Flask(__name__)


@app.route("/")
def hello():
    now = datetime.now()
    time = now.strftime("%H:%M:%S")
    return render_template('home.html', message="Hello !", time=time)


Python: main.py
1
2
3
4
5
6
from app import app
from livereload import Server

if __name__ == '__main__':
    server = Server(app.wsgi_app)
    server.serve()


Hier is het probleem dat de tijd pas weergegeven word als je refresht.
Ik krijg dus geen foutmeldingen maar ik kom er gewoon niet uit hoe ik dit klaar krijg.

[Voor 28% gewijzigd door jneefs op 22-04-2021 20:37]

Alle reacties


  • RobIII
  • Registratie: December 2001
  • Laatst online: 19:11

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

jneefs schreef op donderdag 22 april 2021 @ 17:23:
... ik heb dit eens bekeken maar kom er niet dadelijk uit hoe het juist zit om dan mijn data van mijn sensoren weg te sturen
Nou, vertel eens concreet waar je niet uit komt en toon eens relevante(!) stukjes code, laat foutmeldingen zien, vertel wat je hebt geprobeerd om dit probleem zelf op te lossen enz.
jneefs schreef op donderdag 22 april 2021 @ 17:23:
Ik heb iets half werkende gekregen
Geef eens aan hoe precies dan?
jneefs schreef op donderdag 22 april 2021 @ 17:23:
Ik wou de code erbij zetten maar ik weet niet hoe ik dit het beste kan doen
Daar hebben we code tags voor, maar, nogmaals: beperk je tot relevante(!) stukken code. Als je complete bestanden, tientallen regels code moet gaan posten dan is er ergens iets mis. Maak desnoods een testcase en plaats die code hier (m.b.v. voorgenoemde code tags; dus géén link naar een pastebin of github repo o.i.d.) en dan kunnen wij je vast aanwijzen waar de fout zit, wat je verkeerd doet of wat je verkeerd begrepen hebt.
jneefs schreef op donderdag 22 april 2021 @ 17:23:

Als er nog vragen zijn [...] laat het dan maar weten.
Dat hoef je niet steeds erbij te zeggen, als er nog vragen zijn stellen we ze heus wel ;)


Edit: Waarom heb je in hemelsnaam de categorie "Laptops en Systemen" gekoppeld? :D Ik heb er maar "Python" van gemaakt ;)

[Voor 14% gewijzigd door RobIII op 22-04-2021 18:40]

There are only two hard problems in distributed systems: 2. Exactly-once delivery 1. Guaranteed order of messages 2. Exactly-once delivery.

Roses are red Violets are blue, Unexpected ‘{‘ on line 32.

Over mij


Acties:
  • +1Henk 'm!

  • DaFeliX
  • Registratie: December 2002
  • Laatst online: 26-01 13:40

DaFeliX

Tnet Devver
Voor AJAX heb je twee endpoints nodig, de pagina die de data serveert (die heb je nu al), en een endpoint met de data zelf. Die laatste kun je steeds in de achtergrond aanroepen om je HTML aan te passen met de meest recente data.

Bijvoorbeeld:

Python: app.py
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
from flask import Flask, render_template
from datetime import datetime
app = Flask(__name__)

@app.route("/")
def hello():
    now = datetime.now()
    time = now.strftime("%H:%M:%S")
    return render_template('home.html', message="Hello !", time=time)

@app.route("/ajax")
def ajax():
    now = datetime.now()
    time = now.strftime("%H:%M:%S")
    return render_template('data.html', time=time)


Vervolgens kun je met wat javascript de AJAX call zelf uitvoeren:

HTML: home.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>Hello World</title>
  <link href="{{ url_for('static', filename='main.css', version=time)}}" rel="stylesheet" type="text/css" />
</head>

<body>
  <h1 class="hello-color">
    {{ message }}
  </h1>
  <div id="time">{{ time }}</div>
<script>

function reqListener () {
  document.getElementById('time').innerHTML = this.responseText;
}

function ajaxCall() {
  var oReq = new XMLHttpRequest();
  oReq.addEventListener("load", reqListener);
  oReq.open("GET", "/ajax");
  oReq.send();
}

window.setInterval(ajaxCall, 1000); // Roep ajaxCall elke seconde aan
</script>
</body>
</html>

Einstein: Mijn vrouw begrijpt me niet


  • jneefs
  • Registratie: December 2017
  • Laatst online: 07-03-2022
Ik heb een javascript die een toerenteller kan aanmaken. Nu is mijn probleem dat ik mijn waarde niet hier in krijg.

Dit is de code die word gebruikt om de teller aan te maken.
Het probleem is dat je bij data-value: de waarde moet ingeven maar dit specifiek element heeft geen id.
Hoe moet ik mijn waarde hierin krijgen?
HTML: home.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<td class="columnSpeed" colspan="2">
            <canvas data-type="radial-gauge"
                    data-width="300"
                    data-height="300"
                    data-units="Km/h"
                    data-title="Snelheid"
                    data-min-value="0"
                    data-max-value="50"
                    data-value={{speed}}
                    data-animate-on-init="true"
                    data-major-ticks="0,5,10,15,20,25,30,35,40,45,50"
                    data-minor-ticks="5"
                    data-stroke-ticks="true"
                    data-highlights='[{"from": 40, "to": 50, "color": "rgba(200, 50, 50, .75)"}]'
                    data-color-plate="#222"
                    data-color-major-ticks="#f5f5f5"
                    data-color-minor-ticks="#ddd"
                    data-color-title="#fff"
                    data-color-units="#ccc"
                    data-color-numbers="#eee"
                    data-color-needle-start="rgba(240, 128, 128, 1)"
                    data-color-needle-end="rgba(255, 160, 122, .9)"
                    data-value-box="true"
                    data-font-value="Repetition"
                    data-font-numbers="Repetition"
                    data-animated-value="true"
                    data-borders="false"
                    data-border-shadow-width="0"
                    data-needle-type="arrow"
                    data-needle-width="2"
                    data-needle-circle-size="7"
                    data-needle-circle-outer="true"
                    data-needle-circle-inner="false"
                    data-animation-duration="1500"
                    data-animation-rule="linear"
                    data-ticks-angle="250"
                    data-start-angle="55"
                    data-color-needle-shadow-down="#333"
                    data-value-box-width="45"
                    id="speedGauge"
            ></canvas>
          </td>

  • DaFeliX
  • Registratie: December 2002
  • Laatst online: 26-01 13:40

DaFeliX

Tnet Devver
jneefs schreef op vrijdag 23 april 2021 @ 12:36:
Ik heb een javascript die een toerenteller kan aanmaken. Nu is mijn probleem dat ik mijn waarde niet hier in krijg.

Dit is de code die word gebruikt om de teller aan te maken.
Het probleem is dat je bij data-value: de waarde moet ingeven maar dit specifiek element heeft geen id.
[...]
Dat element heeft toch een id?

Om data (ipv de inhoud) te updaten kun je gebruik maken van dataset:

code:
1
  document.getElementById('speedGauge').dataset.value = this.responseText;


Gezien je vragen; het lijkt met goed dat je 'ns een (begin)cursus javascript doet als je hier verder mee wilt. De vragen die je stelt zijn volgens mij prima door jezelf te beantwoorden met een basis-kennis javascript :)

Einstein: Mijn vrouw begrijpt me niet


  • The Eagle
  • Registratie: Januari 2002
  • Nu online

The Eagle

I wear my sunglasses at night

Wat is het waar jeop beoordeeld wordt? Werkende functionaliteit, of het feit dat je het zelf geprogrammeerd hebt? En welk niveau school praten we over?

Ik zou zoiets zelf denk ik oplossen door iets als Grafana icm influxdb in te zetten. Die combi snapt ook live dashboards, voorbeelden zat te vinden. Moet denk ik ook op een pi draaien :)

Al is het nieuws nog zo slecht, het wordt leuker als je het op zijn Brabants zegt :)


  • jneefs
  • Registratie: December 2017
  • Laatst online: 07-03-2022
Ik word uiteindelijk beoordeeld op het werkende project. Ik zit in mijn laatste jaar middelbaar.

als ik deze regel gebruik:
document.getElementById('speedGauge').dataset.value = this.responseText;
dat komt de data hier te staan bij het refreshen maar daarna verdwijnt deze.

Ik heb nog maar tot eind mei dus echt een cursus volgen is moeilijk.
Pagina: 1


Tweakers maakt gebruik van cookies

Tweakers plaatst functionele en analytische cookies voor het functioneren van de website en het verbeteren van de website-ervaring. Deze cookies zijn noodzakelijk. Om op Tweakers relevantere advertenties te tonen en om ingesloten content van derden te tonen (bijvoorbeeld video's), vragen we je toestemming. Via ingesloten content kunnen derde partijen diensten leveren en verbeteren, bezoekersstatistieken bijhouden, gepersonaliseerde content tonen, gerichte advertenties tonen en gebruikersprofielen opbouwen. Hiervoor worden apparaatgegevens, IP-adres, geolocatie en surfgedrag vastgelegd.

Meer informatie vind je in ons cookiebeleid.

Sluiten

Toestemming beheren

Hieronder kun je per doeleinde of partij toestemming geven of intrekken. Meer informatie vind je in ons cookiebeleid.

Functioneel en analytisch

Deze cookies zijn noodzakelijk voor het functioneren van de website en het verbeteren van de website-ervaring. Klik op het informatie-icoon voor meer informatie. Meer details

janee

    Relevantere advertenties

    Dit beperkt het aantal keer dat dezelfde advertentie getoond wordt (frequency capping) en maakt het mogelijk om binnen Tweakers contextuele advertenties te tonen op basis van pagina's die je hebt bezocht. Meer details

    Tweakers genereert een willekeurige unieke code als identifier. Deze data wordt niet gedeeld met adverteerders of andere derde partijen en je kunt niet buiten Tweakers gevolgd worden. Indien je bent ingelogd, wordt deze identifier gekoppeld aan je account. Indien je niet bent ingelogd, wordt deze identifier gekoppeld aan je sessie die maximaal 4 maanden actief blijft. Je kunt deze toestemming te allen tijde intrekken.

    Ingesloten content van derden

    Deze cookies kunnen door derde partijen geplaatst worden via ingesloten content. Klik op het informatie-icoon voor meer informatie over de verwerkingsdoeleinden. Meer details

    janee