Python Forum
Using range slider in flask webpage to use in python
Thread Rating:
  • 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
Using range slider in flask webpage to use in python
#1
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)
Reply
#2
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
Reply
#3
(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.
Reply


Possibly Related Threads…
Thread Author Replies Views Last Post
  IndexError: list index out of range" & "TypeError: The view function f: Flask Web App joelbeater992 5 3,454 Aug-31-2021, 08:08 PM
Last Post: joelbeater992
  Help using Flask for a countdown on webpage ZenBuddhism 1 2,187 Feb-05-2021, 03:35 PM
Last Post: snippsat
  python 3.7 on windows using flask and flask-sqlalchemy. Alpy 2 3,943 Aug-12-2020, 07:24 PM
Last Post: Alpy
  Python values on a WebPage Petrouil 1 1,879 Apr-01-2020, 05:08 PM
Last Post: ndc85430
  I am having a problem with my Slider Hadad 5 4,826 Jul-24-2019, 01:36 PM
Last Post: Hadad
  reduce volume slider to 0% metulburr 6 3,554 Jun-15-2019, 09:58 PM
Last Post: snippsat
  Access my webpage and download files from Python Pedroski55 7 5,528 May-26-2019, 12:08 PM
Last Post: snippsat
  Read Save RadioButtons from Database in Python Flask Webpage Gary8877 0 7,113 Apr-11-2019, 12:33 AM
Last Post: Gary8877
  display multiple sensors on webpage python flask jinja pascale 6 5,191 Jan-29-2019, 10:10 AM
Last Post: pascale
  flask requests display data from api on webpage with javacript pascale 0 2,742 Oct-25-2018, 08:30 PM
Last Post: pascale

Forum Jump:

User Panel Messages

Announcements
Announcement #1 8/1/2020
Announcement #2 8/2/2020
Announcement #3 8/6/2020