ich habe etwas mit Flask gearbeitet und stehe an einer Stelle, an der ich nicht weiter komme.
Dazu habe ich ein Minimalbeispiel erstellt.
Ich würde gern etwas in einem HTML-Canvas zeichen und die Zeichnung in Abhängigkeit von Slider-Werten verändern.
Das Auslesen der Slider-Werte und die direkte Weiterleitung an Python habe ich schon implementiert. Auf dieser Basis werden mittels Python Koordinaten neu berechnet und an die HTML Zeichnung zurückgegeben. Die Rückgabe funktioniert allerdings nicht und ich weiß auch nicht, wie ich es lösen soll.
Zudem habe ich noch einige Fragen bzgl. Javascript, aber die passen dann besser in ein anderes Forum.
Im Minimalbeispiel sollen die aktuellen Slider-Werte von Python an das HTML-Canvas gesendet und angezeigt werden.
Könnt ihr mir da weiter helfen?
app.py
Code: Alles auswählen
from flask import Flask, render_template, request
import json
app = Flask(__name__)
dict_default = {}
dict_default['A'] = 0.1
dict_default['B'] = 0.2
dict_default['C'] = 0.3
@app.route('/', methods=['GET', 'POST'])
def index():
print('Startseite')
print(dict_default)
return render_template('index.html', dict_default=dict_default, dict_default_json=json.dumps(dict_default))
@app.route('/update', methods=['POST', 'GET'])
def update():
print('Update')
data = json.loads(request.data)
for key, value in data.items():
dict_default[key] = value
print(dict_default)
return render_template('index.html', dict_default=dict_default, dict_default_json=json.dumps(dict_default))
if __name__ == '__main__':
app.run(debug=True, port=5000)index.html
Code: Alles auswählen
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<form>
<p>
<canvas id="canvas1" width="200" height="200"></canvas>
</p>
{% for key, value in dict_default.items() %}
<p>
<label>{{ key }}: <span class="bold" id="{{ 'val' ~ loop.index }}"> {{ value }} </span></label>
<input type="range" min="0" max="1" value="{{ value }}" step="0.1" class="myslider" id="{{ 'rs' ~ loop.index }}">
{% endfor %}
</form>
<meta id="my-data" data-default="{{ dict_default_json }}">
<script>
function createVariablesSlider(json_count){
var rangeslider = [];
for (var i = 1; i <= json_count; ++i) {
rangeslider[i] = document.getElementById('rs'.concat(i.toString()));
}
return rangeslider;
}
function createVariablesOutput(json_count){
var output = [];
for (var i = 1; i <= json_count; ++i) {
output[i] = document.getElementById('val'.concat(i.toString()));
}
return output;
}
const Http = new XMLHttpRequest();
var json_default = $('#my-data').data("default");
var json_count = Object.keys(json_default).length;
var current;
const sliders = document.getElementsByClassName("myslider");
const canvas = document.getElementById("canvas1");
const ctx = canvas.getContext("2d");
var boxwidth = canvas.width;
var boxheight = canvas.height;
ctx.clearRect(-canvas.width/2, -canvas.height/2, canvas.width, canvas.height);
ctx.fillText('A: ' + json_default['A'], 100, 60)
ctx.fillText('B: ' + json_default['B'], 100, 80)
ctx.fillText('C: ' + json_default['C'], 100, 100)
rangeslider = createVariablesSlider(json_count);
output = createVariablesOutput(json_count);
// Loop?
rangeslider[1].oninput = function() {
current = this.value;
output[1].innerHTML = current;
Http.open('POST', '/update');
var obj = new Object();
// Loop?
obj.A = sliders[0].value;
obj.B = sliders[1].value;
obj.C = sliders[2].value;
Http.send(JSON.stringify(obj));
}
rangeslider[2].oninput = function() {
current = this.value;
output[2].innerHTML = current;
Http.open('POST', '/update');
var obj = new Object();
// Loop?
obj.A = sliders[0].value;
obj.B = sliders[1].value;
obj.C = sliders[2].value;
Http.send(JSON.stringify(obj));
}
rangeslider[3].oninput = function() {
current = this.value;
output[3].innerHTML = current;
Http.open('POST', '/update');
var obj = new Object();
// Loop?
obj.A = sliders[0].value;
obj.B = sliders[1].value;
obj.C = sliders[2].value;
Http.send(JSON.stringify(obj));
}
</script>
</body>
</html>
