Aguscao
Posts: 19
Joined: Fri May 07, 2021 9:18 am

Flask: How to make this page not reloading?

Sat Jun 12, 2021 5:32 am

Hello, I have a problem, maybe somebody here could help me out.

I wrote this Flask Python script, and everything works fine except that I don't want the page reloads every time I click a link (in this case an image of a led and the one at the very bottom of the page). How to make the resulting page not reloading every time I click a link? Thank you.

Code: Select all

from flask import Flask
import RPi.GPIO as GPIO
import collections
GPIO.setwarnings(False)

pins = [17, 18, 27, 22]

pin_led_states = [
    [1, 0, -1, -1],  # 1
    [0, 1, -1, -1],  # 2
    [-1, 1, 0, -1],  # 3
    [-1, 0, 1, -1],  # 4
    [1, -1, 0, -1],  # 5
    [0, -1, 1, -1],  # 6
    [1, -1, -1, 0],  # 7
    [0, -1, -1, 1],  # 8
    [-1, 1, -1, 0],  # 9
    [-1, 0, -1, 1],  # 10
    [-1, -1, 1, 0],  # 11
    [-1, -1, 0, 1]   # 12
]

GPIO.setmode(GPIO.BCM)

def set_pin(pin_index, pin_state):
    if pin_state == -1:
        GPIO.setup(pins[pin_index], GPIO.IN)
    else:
        GPIO.setup(pins[pin_index], GPIO.OUT)
        GPIO.output(pins[pin_index], pin_state)

def light_led(led_number):
    for pin_index, pin_state in enumerate(pin_led_states[led_number]):
        set_pin(pin_index, pin_state)
    led_on=led_number    

def led_off():
    set_pin(0, -1)
    set_pin(1, -1)
    set_pin(2, -1)
    set_pin(3, -1)

def find_list_in_list(inputlist, the_list):
    # Flag initialization
    n = -1
    counter=0
    # Using Counter
    for elem in the_list:
        print(elem)
        if collections.Counter(elem) == collections.Counter(inputlist) :
            n=counter
        counter=counter+1    
    return n   

def check_light():
    state=[]
    for n in range(4):
        state.append(GPIO.input(pins[n]))
    return find_list_in_list(state, pin_led_states)

def webpage(led_on):
    a=''
    for n in range(12):
        ledprefix='off'
        if n==led_on:
            ledprefix='on'
        if ((n+1)==1) or ((n+1)==2) or ((n+1)==7) or ((n+1)==8):
            a='{}               <div style="width:100px; height:100px; padding: 10px; float:left"><a href="/{}"><img src="/static/green-led-{}-100px.png" style="border:0px;width:100px;height:100px"></a></div>\n'.format(a,n,ledprefix)
        elif ((n+1)==3) or ((n+1)==4) or ((n+1)==9) or ((n+1)==10):
            a='{}               <div style="width:100px; height:100px; padding: 10px; float:left"><a href="/{}"><img src="/static/blue-led-{}-100px.png" style="border:0px;width:100px;height:100px"></a></div>\n'.format(a,n,ledprefix)
        else:
            a='{}               <div style="width:100px; height:100px; padding: 10px; float:left"><a href="/{}"><img src="/static/red-led-{}-100px.png" style="border:0px;width:100px;height:100px"></a></div>\n'.format(a,n,ledprefix)
        
    return '''<!DOCTYPE html>
<html>
    <head>
        <title>Raspberry Pi Led Interface</title>
    </head>
    <body style="background-color: black; color:white">
        <div style="width:100%">
            <div style="width:100%;text-align:center"><H1>Click to Turn On LED</H1></div>
            <div style="width:240px;height:720px;margin:auto">
{}            </div>
            <div style="width:100%; margin-top:20px; text-align:center; font-size: 20pt;"><a href="/turnoff_all" style="color:white">Turn off all LEDs</a></div>
        </div>
    </body>
</html>'''.format(a)

led_off()

app = Flask(__name__)

@app.route('/')
def home():
    return webpage(-1)
            
@app.route('/<int:ledno>')
def led_no(ledno):
    light_led(ledno)
    return webpage(ledno)

@app.route('/turnoff_all')
def turnoff_all_led():
    led_off()
    return webpage(-1)


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

User avatar
B.Goode
Posts: 12292
Joined: Mon Sep 01, 2014 4:03 pm
Location: UK

Re: Flask: How to make this page not reloading?

Sat Jun 12, 2021 8:51 am

Aguscao wrote:
Sat Jun 12, 2021 5:32 am
Hello, I have a problem, maybe somebody here could help me out.

I wrote this Flask Python script, and everything works fine except that I don't want the page reloads every time I click a link (in this case an image of a led and the one at the very bottom of the page). How to make the resulting page not reloading every time I click a link? Thank you.

Code: Select all

from flask import Flask
import RPi.GPIO as GPIO
import collections
GPIO.setwarnings(False)

pins = [17, 18, 27, 22]

pin_led_states = [
    [1, 0, -1, -1],  # 1
    [0, 1, -1, -1],  # 2
    [-1, 1, 0, -1],  # 3
    [-1, 0, 1, -1],  # 4
    [1, -1, 0, -1],  # 5
    [0, -1, 1, -1],  # 6
    [1, -1, -1, 0],  # 7
    [0, -1, -1, 1],  # 8
    [-1, 1, -1, 0],  # 9
    [-1, 0, -1, 1],  # 10
    [-1, -1, 1, 0],  # 11
    [-1, -1, 0, 1]   # 12
]

GPIO.setmode(GPIO.BCM)

def set_pin(pin_index, pin_state):
    if pin_state == -1:
        GPIO.setup(pins[pin_index], GPIO.IN)
    else:
        GPIO.setup(pins[pin_index], GPIO.OUT)
        GPIO.output(pins[pin_index], pin_state)

def light_led(led_number):
    for pin_index, pin_state in enumerate(pin_led_states[led_number]):
        set_pin(pin_index, pin_state)
    led_on=led_number    

def led_off():
    set_pin(0, -1)
    set_pin(1, -1)
    set_pin(2, -1)
    set_pin(3, -1)

def find_list_in_list(inputlist, the_list):
    # Flag initialization
    n = -1
    counter=0
    # Using Counter
    for elem in the_list:
        print(elem)
        if collections.Counter(elem) == collections.Counter(inputlist) :
            n=counter
        counter=counter+1    
    return n   

def check_light():
    state=[]
    for n in range(4):
        state.append(GPIO.input(pins[n]))
    return find_list_in_list(state, pin_led_states)

def webpage(led_on):
    a=''
    for n in range(12):
        ledprefix='off'
        if n==led_on:
            ledprefix='on'
        if ((n+1)==1) or ((n+1)==2) or ((n+1)==7) or ((n+1)==8):
            a='{}               <div style="width:100px; height:100px; padding: 10px; float:left"><a href="/{}"><img src="/static/green-led-{}-100px.png" style="border:0px;width:100px;height:100px"></a></div>\n'.format(a,n,ledprefix)
        elif ((n+1)==3) or ((n+1)==4) or ((n+1)==9) or ((n+1)==10):
            a='{}               <div style="width:100px; height:100px; padding: 10px; float:left"><a href="/{}"><img src="/static/blue-led-{}-100px.png" style="border:0px;width:100px;height:100px"></a></div>\n'.format(a,n,ledprefix)
        else:
            a='{}               <div style="width:100px; height:100px; padding: 10px; float:left"><a href="/{}"><img src="/static/red-led-{}-100px.png" style="border:0px;width:100px;height:100px"></a></div>\n'.format(a,n,ledprefix)
        
    return '''<!DOCTYPE html>
<html>
    <head>
        <title>Raspberry Pi Led Interface</title>
    </head>
    <body style="background-color: black; color:white">
        <div style="width:100%">
            <div style="width:100%;text-align:center"><H1>Click to Turn On LED</H1></div>
            <div style="width:240px;height:720px;margin:auto">
{}            </div>
            <div style="width:100%; margin-top:20px; text-align:center; font-size: 20pt;"><a href="/turnoff_all" style="color:white">Turn off all LEDs</a></div>
        </div>
    </body>
</html>'''.format(a)

led_off()

app = Flask(__name__)

@app.route('/')
def home():
    return webpage(-1)
            
@app.route('/<int:ledno>')
def led_no(ledno):
    light_led(ledno)
    return webpage(ledno)

@app.route('/turnoff_all')
def turnoff_all_led():
    led_off()
    return webpage(-1)


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



Might that be a consequence of running your Flask application with the debug=True flag set?

ghp
Posts: 2003
Joined: Wed Jun 12, 2013 12:41 pm
Location: Stuttgart Germany
Contact: Website

Re: Flask: How to make this page not reloading?

Sat Jun 12, 2021 10:01 am

Add REST API for switching the LED to the flask app. Many tutorials, e.g https://pythonbasics.org/flask-rest-api/
Add the REST API calls to your web page, this requires javascript. Many tutorials, e.g. https://stackoverflow.com/questions/369 ... javascript or https://www.w3schools.com/xml/dom_http.asp

Aguscao
Posts: 19
Joined: Fri May 07, 2021 9:18 am

Re: Flask: How to make this page not reloading?

Sun Jun 13, 2021 4:43 pm

B.Goode wrote:
Sat Jun 12, 2021 8:51 am
Might that be a consequence of running your Flask application with the debug=True flag set?
Well, I don't think so, it's the same whether or not debug=True or debug=False.

Aguscao
Posts: 19
Joined: Fri May 07, 2021 9:18 am

Re: Flask: How to make this page not reloading?

Sun Jun 13, 2021 4:44 pm

ghp wrote:
Sat Jun 12, 2021 10:01 am
Add REST API for switching the LED to the flask app. Many tutorials, e.g https://pythonbasics.org/flask-rest-api/
Add the REST API calls to your web page, this requires javascript. Many tutorials, e.g. https://stackoverflow.com/questions/369 ... javascript or https://www.w3schools.com/xml/dom_http.asp
Thank you, I'll try rest API. Thanks for pointing to the tutorials.

User avatar
richonguzman
Posts: 124
Joined: Fri Aug 28, 2020 4:38 pm
Location: Chile

Re: Flask: How to make this page not reloading?

Mon Jun 14, 2021 2:17 pm

Aguscao wrote:
Sun Jun 13, 2021 4:44 pm
ghp wrote:
Sat Jun 12, 2021 10:01 am
Add REST API for switching the LED to the flask app. Many tutorials, e.g https://pythonbasics.org/flask-rest-api/
Add the REST API calls to your web page, this requires javascript. Many tutorials, e.g. https://stackoverflow.com/questions/369 ... javascript or https://www.w3schools.com/xml/dom_http.asp
Thank you, I'll try rest API. Thanks for pointing to the tutorials.
did it work for you?

scotty101
Posts: 4262
Joined: Fri Jun 08, 2012 6:03 pm

Re: Flask: How to make this page not reloading?

Tue Jun 15, 2021 8:25 am

I produced this project a while ago to send IR commands to my TV from a web browser but it uses Flask and AJAX requests to send commands back to the server without refreshing the page

https://github.com/scotty3785/pi_tv_remote

The magic happens inside the embedded javascript code https://github.com/scotty3785/pi_tv_rem ... e.html#L38
This sends a request to the flask server.
Electronic and Computer Engineer
Pi Interests: Home Automation, IOT, Python and Tkinter

Return to “Python”