CODEWITHSUNDEEP
jquerypythonhtmliframeflask
krishna
krishna

Reputation: 21

Python Flask- using Iframe in my template in my project

I stuck at here, I am doing a project in Banana Pi board and installed Debian related OS Using Python 2.7. I had four html pages they are:

I am using Flask application to run the main.html which contains all the other pages in iframe's in main.html

my code for app.py is

    from flask import Flask,render_template
    app = Flask(__name__)

    @app.route('/')
    def index():
   return render_template('main.html')    
    if __name__ == "__main__":
       app.run(debug=True)

main.html is as follows:

    <!DOCTYPE html>
    <html>
    <head>
    <title>Pi Board</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <script>
    function myFunc(){
       setTimeout("location.reload(true);",60000);
    }
    myFunc();
    </script>
    <style>
     body {background-color : lightgray;}
     #frame1,#frame2{width: 300px; height : 200px; float: absolute;}

    </style>
    </head>
    <body  >
    <header><h2>XYZ Automation</h2></header>
    <iframe id="frame1" src="motor1.html"></iframe>
    <iframe id="frame1" src="sensor1.html"></iframe><br>
    <iframe id="frame2" src="motor2.html"></iframe>
    <iframe id="frame2" src="sensor2.html"></iframe>
    </body>
    </html>

and I kept all the files in folders as follows: project(MainFolder):-> templates app.py templates(Subfolder):-> main.html , motor1.html , motor2.html , sensor1.html , sensor2.html , script.js. , style(folder) style(folder):-> styles.css,

Here are the images while I am running the code: in commandline in browser

PS: I started working with Flask for the first time and I had no knowledge in these server things.. and this is a project given by my sir.. please help me.

Regards,

Krishna.

Upvotes: 1

Views: 4113

Answers (1)

Sergey Shubin
Sergey Shubin

Reputation: 3257

You need to create app.route entries for the pages motor1, motor2, sensor1 and sensor2 in app.py file like this:

@app.route('motor1')
def motor1():
    return render_template('motor1.html')

@app.route('motor2')
def motor2():
    return render_template('motor2.html')

@app.route('sensor1')
def sensor1():
    return render_template('sensor1.html')

@app.route('sensor2')
def sensor2():
    return render_template('sensor2.html')

Iframe sources in main.html don't need .html endings:

<iframe id="frame1" src="motor1"></iframe>
<iframe id="frame2" src="sensor1"></iframe>
<iframe id="frame3" src="motor2"></iframe>
<iframe id="frame4" src="sensor2"></iframe>

Upvotes: 2

Related Questions