Seite 1 von 1
Flask slider
Verfasst: Sonntag 6. März 2022, 13:43
von toper
Hallo zusammen,
ich versuche gerade, mit Python und Flask eine Website zu erstellen.
In meiner HTML steht:
Code: Alles auswählen
<form action="/regler" method="POST">
<input type="range" min="0" max="255" step="1.0" value="0" name="schieber" class="slider">
<input type="submit" value="submit" />
</form>
In der CSS:
Code: Alles auswählen
input[type="range"]::-moz-range-progress {
background-color: #FF0000;
}
input[type="range"]::-moz-range-track {
background-color: #000000;
}
input[type="range"]{
background-color: #999999;
}
Wenn ich die HTML manuell starte, sieht der Regler so aus, wie ich es in der CSS festgelegt habe.
Wenn ich aber das Python-Script starte, sieht er wieder so aus wie ohne CSS.
Mein Python Script:
Code: Alles auswählen
@app.route('/home')
def home():
return render_template("index.html")
@app.route('/regler', methods=["POST"])
def regler():
schieber = request.form.get('schieber')
print(schieber)
return redirect(url_for('home'))
app.run(debug=False, host="0.0.0.0", port=80)
Weiß jemand, wie ich das lösen kann?
Re: Flask slider
Verfasst: Sonntag 6. März 2022, 13:58
von __deets__
Das style sheet muss vom server ausgeliefert werden. Ich sehe keinen static file handler. Das ist ein Standard Problem, du musst einfach schauen , wie man das in flask macht.
Re: Flask slider
Verfasst: Sonntag 6. März 2022, 14:01
von toper
Ich habe jetzt noch oben folgendes eingefügt:
app = Flask(__name__, template_folder='templates', static_folder='static')
und unten:
app.run(debug=False, host="0.0.0.0", port=80)
Im templates Ordner ist die HTML und im static Ordner die CSS.
Es ist aber immer noch dasselbe Problem
Re: Flask slider
Verfasst: Sonntag 6. März 2022, 14:09
von Sirius3
Wie sieht Dein Code jetzt aus? Wie sieht das komplette index.html aus? Passen die Pfade?
Was gibt Flask auf der Konsole aus?
Re: Flask slider
Verfasst: Sonntag 6. März 2022, 14:10
von __deets__
Liegt aber trotzdem daran. Schau es dir im Browser debugger an, du wirst sehen, die wird nicht geladen. Und du musst auch den Pfad ändern, ist dir klar?
Re: Flask slider
Verfasst: Sonntag 6. März 2022, 14:11
von toper
Welchen Pfad?
Re: Flask slider
Verfasst: Sonntag 6. März 2022, 14:14
von __deets__
Den des CSS. Darueber reden wir doch. Welcher sonst?
Re: Flask slider
Verfasst: Sonntag 6. März 2022, 14:18
von toper
Also mein Python Code sieht so aus:
Code: Alles auswählen
from flask import Flask, render_template, url_for, redirect, request
app = Flask(__name__, template_folder='templates', static_folder='static')
@app.route('/home')
def home():
return render_template("index.html")
@app.route('/regler', methods=["POST"])
def regler():
schieber = request.form.get('schieber')
print(schieber)
return redirect(url_for('home'))
def website():
app.run(debug=False, host="0.0.0.0", port=80)
if __name__ == '__main__':
website()
Meine HTML:
Code: Alles auswählen
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../static/index.css">
</head>
</html>
<body>
<div class="headder">Website</div>
<form action="/blocken" method="POST">
<button class="button">test</button>
</form>
<form action="/regler" method="POST">
<input type="range" min="0" max="255" step="1.0" value="0" name="schieber" class="slider">
<input type="submit" value="submit" />
</form>
</body>
Meine CSS:
Code: Alles auswählen
body {
margin: 1%;
background-color: #000000;
}
.headder {
position: relative;
background-color: #555555;
color: red;
font-size: 400%;
text-align: center;
color: red;
width: 100%;
}
.button{
position: relative;
background-color: #999999;
color: red;
margin-top: 10vh;
width: 100%;
font-size: 80px;
text-align: center;
}
input[type="range"]::-moz-range-progress {
background-color: #FF0000;
}
input[type="range"]::-moz-range-track {
background-color: #000000;
}
input[type="range"]{
background-color: #999999;
}
Re: Flask slider
Verfasst: Sonntag 6. März 2022, 14:28
von __deets__
Das HTML ist falsch, das HTML-Tag muss um das GESAMTE Dokument herum. Und der Pfad ../static ist falsch, hier steht, wie man Flask das berechnen laesst:
https://flask.palletsprojects.com/en/2. ... al/static/
Re: Flask slider
Verfasst: Sonntag 6. März 2022, 14:33
von toper
Er findet die CSS bereits. Die Buttons und der Headder werden korrekt formatiert. Nur der Slider ist falsch.
Re: Flask slider
Verfasst: Sonntag 6. März 2022, 15:14
von __deets__
Dann ist das CSS falsch, bzw. passt nicht zum HTML. Die Gruende, warum das in Flask nicht geht, aber lokal, haben wir dir genannt. Wenn das jetzt geladen wird, liegt der Rest dann im HTML und CSS verborgen, und das musst du dann entwanzen.
Re: Flask slider
Verfasst: Sonntag 6. März 2022, 15:41
von toper
Und genau das ist das Problem. Ich finde den Fehler nicht.
Deshalb ja die Frage.
Re: Flask slider
Verfasst: Sonntag 6. März 2022, 16:05
von noisefloor
Hallo,
was bei sowas immer hilft: Entwicklertools im Browser aufrufen und dann den Debugger, CSS Inspektor und was Chrome bzw. Firefox sonst so standardmäßig an Bord haben nutzen. Das Problem liegt ja ziemlich sicher im HTML oder CSS, also musst du das Debuggen. Das liegt nicht an Flask wenn du sicher bist, dass Flask alles ausliefert, was auszuliefern ist.
Gruß, noisefloor