Python Forum

Full Version: Using range slider in flask webpage to use in python
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
Hi, I am working on my project to control my servo through python and a flask webpage.


I have been looking around for a simple way to constantly send and recieve values from the server and webpage, but have not been able.

Would be awesome if any one with more experience could give me some pointers or show similar projects which I can learn from.


Here is my code:
from flask import Flask
from flask_cors import CORS

app = Flask(__name__)
CORS(app)


@app.route("/")
def helloSlider():
    return '''
<html>

<body>


<div class="slidecontainer">
  <input type="range" min="1" max="100" value="50" class="slider" id="myRange">
  <p>Value: <span id="demo"></span></p>
</div>

<script>
var slider = document.getElementById("myRange");
var output = document.getElementById("demo");
output.innerHTML = slider.value;

slider.oninput = function() {
  output.innerHTML = this.value;
}


</script>

</body>
</html>
'''




if __name__ == "__main__":
    app.run(debug=True)
1) You will have your frontend page with javascript. It looks like you made a start on that. That frontend code will do something like call fetch (https://developer.mozilla.org/en-US/docs...cope/fetch). to make a HTTP request to the server. It can be a GET or POST request, but either way it will contain the new server position.

2) You make a new function (with for example @app.route("/set_servo") to process this servo setpoint given by the frontend. If the server has direct access to the servo (for example, the server is on a raspberry pi and the servo is connected to it), you will use another library to control the servo hardware, and can make this happen right then and there in flask.

3) ... However, If the server is separate from the servo, then the servo stores the position for later (file, db, variable if you can figure out how to get this persistent across flask requests - flask.current_app? dunno) . Then the device that controls the servo needs to communicate with the server. One way to communicate would be to have the servo device repeatedly query the server for the current setpoint with "python requests" (https://requests.readthedocs.io/en/master/). You would set a third flask function (for example with @app.route("get_servo") in flask on the server that would return the current setpoint that you saved earlier.

There may be a way to do this without saving the setpoint temporarily with websockets or something but I don't know.

I recommend you break it into steps if you have not done something like this before. First: Control the servo from python in a script . Second: make the web application.

Good luck
(Jan-17-2021, 02:11 PM)KimPet Wrote: [ -> ]Would be awesome if any one with more experience could give me some pointers or show similar projects which I can learn from.
Can look at how i implement a roundSlider in this post.