i Have python server with flask running on it
from flask import Flask,render_template
app = Flask(__name__)
#app.route("/")
def main():
return render_template('index.html')
if __name__ == ("__main__"):
app.run(debug = True, host = "0.0.0.0", port =80)
this is index.html there is simple form and send button
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>whatl0ol</title>
<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
</head>
<body>
<div class="login">
<div class="heading">
<h2></h2>
<form action="#">
<div class="input-group input-group-lg">
<span class="input-group-addon"><i class="fa fa-user"></i></span>
<input type="text" class="form-control" placeholder="">
</div>
<button type="submit" class="float">check</button>
</form>
</div>
</div>
</body>
</html>
i need solution to when user sends from index page, take it from python send to API.
need advices about site bandwith also.
thanks
make sure you have css files at this path
/your-project/static/css/style.css
also change your css in template to load it from static folder
<link href="{{ url_for('static', filename='css/style.css') }}" />
Related
I have some function, which can be running for a continuous period of time, I run it using FastAPI background tast like that:
background_tasks.add_task(my_func)
after that returning template with progressbar using
return templates.TemplateResponse('progressbar.html', context={"request": request})
How can I define the length of a progressbar iteration and send values to show progress?
progressbar.html:
<html>
<head>
<title>Upload data</title>
<link href="{{ url_for('static', path='/styles.css') }}" rel="stylesheet">
<link href="{{ url_for('static', path='/progressbar.css') }}" rel="progressbar">
</head>
<body>
<a>Uploading</a>
<div>
<progress id="progressbar"></progress>
</div>
<form action="/final" method="get" >
<h1>
<input type="submit" value="Start upload">
</h1>
</a>
</form>
<p>Return to home page home page</p>
</body>
</html>
This question already has answers here:
How to serve static files in Flask
(24 answers)
Closed 11 months ago.
I created a Flask app to upload an image to predict its label. This is the code of the relevant part of app.py:
#app.route("/", methods=['GET', 'POST'])
def main():
return render_template("index.html")
#app.route("/submit", methods = ['GET', 'POST'])
def get_output():
if request.method == 'POST':
img = request.files['my_image']
licenseplate = "static/" + img.filename
img.save(licenseplate)
p = predictLicensePlate(licenseplate)
This is the index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Number Plate Recognition</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h1 class="jumbotron bg-primary">Number Plate Recognition</h1>
<br><br>
<form class="form-horizontal" action="/submit" method="post" enctype="multipart/form-data">
<div class="form-group">
<label class="control-label col-sm-2" for="pwd">Upload Your Image :</label>
<div class="col-sm-10">
<input type="file" class="form-control" placeholder="Hours Studied" name="my_image" id="pwd">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-success">Submit</button>
</div>
</div>
</form>
{% if prediction %}
<img src="{{img_path}}" height="200px" width="300px">
<h2> Your Prediction : <i> {{prediction}} </i></h2>
{% endif %}
</div>
</body>
</html>
But when I upload an image I only get a placeholder image there as you see below. Can you figure out what is wrong with my code? The format of my image is png and the prediction works fine.
You need to set the img_path variable in your template:
<img src="{{img_path}}" height="200px" width="300px">
Hi, I am having a problem to send data from python script to a web page via flask. After runnung code on my webpage it displays information: "none". The server is responding but I think there is a problem with sending data using get. I know that at this stage i can generate data in flask but my goal is to send arduino data from python script to flask and display it on website
script sending data:
import requests
import serial
import time
while True:
payload = {'c1_temp': '20', 'c1_press': '1013', 'c1_humid': '30', 'c1_gleba': '60'}
r = requests.get("http://127.0.0.1:5000/czujnik1", params=payload)
print(r)
time.sleep(5)
flask:
from flask import Flask, render_template, request
import requests
import time
app = Flask(__name__)
#app.route('/')
def index():
return render_template('index.html')
return render_template("style.css")
#app.route('/czujnik1', methods=['GET', 'POST'])
def czujnik1():
data = []
c1_temp = request.args.get('c1_temp')
c1_press = request.args.get('c1_press')
c1_humid = request.args.get('c1_humid')
c1_gleba = request.args.get('c1_gleba')
data.append(c1_temp)
data.append(c1_press)
data.append(c1_humid)
data.append(c1_gleba)
return render_template("czujnik1.html", data = data)
return render_template("style.css")
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
<title>Document</title>
</head>
<body>
<nav>
<div class="logo">KREATYWNA MŁODZIEŻ</div>
<div class="nav-opts">
BACK
Czujnik 1
Czujnik 2
Czujnik 3
</div>
</nav>
<div class="czujnik">
<h1>Czujnik 1</h1>
<div class="czujnik-wrapper">
<div class="czujnik-box">
<h2>Temperatura(℃)</h2>
<p>{{ data.0 }}</p>
</div>
<div class="czujnik-box">
<h2>Ciśnienie(hPa)</h2>
<p>{{ data.1 }}</p>
</div>
<div class="czujnik-box">
<h2>Wilgotność(%)</h2>
<p>{{ data.2 }}</p>
</div>
<div class="czujnik-box">
<h2>Wilgotność gleby(%)</h2>
<p>{{ data.3 }}</p>
</div>
</div>
</div>
</body>
</html>
When I do a command print(r.text)in the sending script i get something like this
html:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/static/css/style.css">
<title>Document</title>
</head>
<body>
<nav>
<div class="logo">KREATYWNA MŁODZIEŻ</div>
<div class="nav-opts">
BACK
Czujnik 1
Czujnik 2
Czujnik 3
</div>
</nav>
<div class="czujnik">
<h1>Czujnik 1</h1>
<div class="czujnik-wrapper">
<div class="czujnik-box">
<h2>Temperatura(℃)</h2>
<p>20</p>
</div>
<div class="czujnik-box">
<h2>Ciśnienie(hPa)</h2>
<p>1013</p>
</div>
<div class="czujnik-box">
<h2>Wilgotność(%)</h2>
<p>30</p>
</div>
<div class="czujnik-box">
<h2>Wilgotność gleby(%)</h2>
<p>60</p>
</div>
<div class="czujnik-box">
<h2>Do wypełnienia</h2>
<input type="text">
</div>
<div class="czujnik-box">
<h2>Do wypełnienia</h2>
<input type="text">
</div>
</div>
</div>
</body>
</html>```
It should be working but it isn't showing like that on the page.
I am trying to dispaly a folium map in a flask web page which consists of a form containing 2 bootstrap selects and a submit button. The form elements work fine before the map is loaded. But when the map is loaded selects are not clickable.
This is my python script
from flask import Flask, render_template, request
import folium
app = Flask(__name__)
#app.route("/home")
def home():
return render_template("home.html")
#app.route("/result", methods =['POST'])
def result():
map = folium.Map(location=[53.3975054,-10.1987964], zoom_start =9, tiles ='Stamen Terrain')
map.save(outfile='templates/countries.html')
return render_template("result.html")
if __name__=="__main__":
app.run(debug = True)
home.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/js/bootstrap-select.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="{{ url_for('static', filename='css/bootstrap-responsive.min.css')}}">
<link rel="stylesheet" href="{{ url_for('static', filename='css/font-awesome.min.css')}}">
<link rel="stylesheet" href="{{ url_for('static', filename='css/main.css')}}">
<link rel="stylesheet" href="{{ url_for('static', filename='css/sl-slide.css')}}">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/css/bootstrap-select.min.css">
</head>
<body>
<section id="about-us" class="container main">
<div class="row-fluid">
<div class="span8" >
<div class="blog">
<div class="blog-item well">
<h2>Heading2</h2>
<form action="{{ url_for('home') }}" method="POST">
<div class="form-group">
<select class="selectpicker" name="select_country" data-live-search="true" data-style="btn-primary">
<option >Country1</option>
<option >Country2</option>
</select>
<select class="selectpicker" name="select_event" data-live-search="true" data-style="btn-primary">
<option >Event1</option>
<option >Event1</option>
</select>
<input type="submit" class="btn btn-info" value="Submit Button">
</div>
</form>
</div>
</div>
</div>
</div>
</section>
{%block content%}
{%endblock%}
</body>
</html>
result.html
{%extends "home.html"%}
<div>
{%block content%}
{%include "countries.html"%}
{%endblock%}
</div>
How can I fix this?
It worked when i used an iframe inside the html file to display the map.
I am trying to build a blog using flask. SimpleMDE is used as post editor(html code below). I want to save the markdown content to local file and render by flask-misaka in jinja2.
In SimpleMDE, I can get raw markdown content by simplemde.value(). But when I pass simplemde.value() to var in javascript. "\n" is missing aftering passing. I think it may have some "magic" tools in javascript. The html code return 2 alert message, first message contains line feed, the second doesn't.
Could somebody give me some hits about this problems?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Editor</title>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<link rel='stylesheet' href='.{{ url_for("static", filename="css/simplemde.min.css") }}'>
<script src='.{{ url_for("static", filename="js/simplemde.min.js") }}'></script>
</head>
<script type='text/javascript'>
function check() {
var raw = simplemde.value();
alert(raw);
document.testform.markdown_raw.value=raw;
alert(document.testform.markdown_raw.value);
}
</script>
<body>
<form method='post' class='form' role='form' name='testform'>
<div class="form-group " style="padding-top:10px">
<input class="form-control" id="post_title" name="post_title" type="text" value="Title?">
</div>
<div class="form-group">
<input class="form-control" id="markdown" name="post_content" type="textarea" value="">
</div>
<div class="form-group" style='display:none'>
<input class="form-control" id="markdown_raw" name="markdown_raw" type="textarea" value="Origin">
</div>
<div>
<input class='btn btn-default' onclick="check();" id='submit' name='submit' type='submit' value='Save'>
<input class='btn btn-default' id='publish' name='publish' type='submit' value='Publish'>
</div>
</form>
<script type='text/javascript'>
var simplemde = new SimpleMDE({ element: document.getElementById('markdown') });
</script>
</body>
</html>
If you want to get raw markdown, just use simplemde.value().
When you put raw markdown into normal textarea, it turns into pure text.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Editor</title>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.css">
<script src="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.js"></script>
</head>
<body>
<form method='post' class='form' role='form' name='testform'>
<div class="form-group " style="padding-top:10px">
<input class="form-control" id="post_title" name="post_title" type="text" value="Title?">
</div>
<div class="form-group">
<textarea class="form-control" id="markdown" name="post_content"></textarea>
</div>
<div>
<input class='btn btn-default' onclick="" id='submit' name='submit' type='submit' value='Save'>
<input class='btn btn-default' id='publish' name='publish' type='submit' value='Publish'>
</div>
</form>
<script type='text/javascript'>
var simplemde = new SimpleMDE({ element: document.getElementById('markdown') });
</script>
</body>
</html>
Get the content:
from flask import Flask, render_template, request
app = Flask(__name__)
#app.route('/', methods=['GET', 'POST'])
def test():
if request.method == 'POST':
raw_md = request.form['post_content']
return render_template('index.html')
if __name__ == '__main__':
app.run(debug=True)