Running Javascript animation using Flask with Post method

Question

I have tried developing JS animation that should run when I press the start button and stop when I press the stop button along with the stepper motor that is been controlled in the backend by pressing the buttons such that when start button is pressed the motor should start along with the animation and motor should stop along with the animation when stop button is pressed

I have already connected the motor and it can start and stop with the click of the buttons on my webpage but I am unsure about how to call the Javascript function to control the animation on my flask server such that it should work simultaneously along with the motor rotation. I have referred to this answer to run the motor using javascript and python (How to connect JavaScript to Python script with Flask?)) When I try to run the animation with the press of the buttons the animation doesn't work . My code looks like this

Python Flask : app.py
from flask import Flask, render_template, request, jsonify, redirect, url_for,session
import os
import json

app = Flask(__name__)

app.secret_key = os.urandom(24)

#function to start motor
def fcn_start_motion(stepper_velocity):
return(stepper_velocity)

#function to stop motor
def fcn_stop_motion():

@app.route("/live_view", methods = ['GET','POST'])
def live_view():
   if request.method == 'POST':
        if 'start_clk' in request.form:
          velocity = int(request.form['velocity'])
          fcn_start_motion(velocity)
       elif 'stop' in request.form:
          fcn_stop_motion()
 return render_template('live_view.html')

if __name__ == "__main__":
   app.run(host='0.0.0.0', port=80, debug=True)


HTMl: live_view.html
<html>

  <head><br><br><br>
<body>
<canvas id="myCanvas" width="750" height="500" style = "border:1px solid #d3d3d3;"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");


        var image = new Image();

    image.onload = function() {

    ctx.drawImage(image , 0, 0); 

    }


let y = 0;

let startTime;

let Id;

let speed;



function animateCanvas(){

    ctx.clearRect(0, 0, canvas.width, canvas.height);

       ctx.drawImage(image, 0, y)


        const currentTime = new Date().getTime();

        distance = (currentTime - startTime) / 1000 * 20; 

        speed = 50/60

        y -= speed;


        document.getElementById("time").innerHTML = (currentTime - startTime) / 1000 + " s";

        document.getElementById("distance").innerHTML = distance + " cm";

      
        if (currentTime - startTime >= 50000 ){

          cancelAnimationFrame(Id);

          

          canvas.height = 500;

          ctx.clearRect(0, 0, canvas.width, canvas.height);

            
            ctx.drawImage(image, 0, y);}


          document.getElementById("time").innerHTML = (currentTime - startTime)/1000 + " s";

          document.getElementById("distance").innerHTML = distance

        }else {

            Id = requestAnimationFrame(animateCanvas);}

      }

      function stopAnimation(){

          Id = requestAnimationFrame(animateCanvas);

          cancelAnimationFrame(Id);


          ctx.clearRect(0, 0, canvas.width, canvas.height);

       ctx.drawImage(image, 0, y);



        const currentTime = new Date().getTime();

        distance = (currentTime - startTime) / 1000 * 20; // pixels per second

          document.getElementById("time").innerHTML = (currentTime - startTime)/1000 + " s";

          document.getElementById("distance").innerHTML = distance }



      function startAnimation() {

        startTime = new Date().getTime();

        Id = requestAnimationFrame(animateCanvas);    }

    


    </script>

    <form method="post">

        Enter the motor speed: <input type="number" name="velocity"><br>

        <button name="start_clk" type = "submit" onclick = "startAnimation()" >Start Clockwise</button>


        <button name="stop" type = "submit" onclick = "stopAnimation()">Stop</button>
        
    </form>

         <p>Time: <span id="time">0 s</span></p>
    <p>Distance: <span id="distance">0 cm</span></p>

      </head>

    </body>

</html>

How do I run my animation along with the motor using javascript and flask together with POST method

Running Javascript animation using Flask with Post method

0 Answers0