SocketIO vs AJAX for updating Flask webpage - python

So, here's what I have. A very simple Flask app, with one route that listens for POST and GET methods. I have a separate python script that is constantly outputting data. Right now, it is post'ing that data to the flask app, which takes that data, appends it to a list, then when someone visits or refreshed the webpage, the entire list is rendered into a template. I would like to not have to refresh the page to see this, and would rather it be just a live feed of data.
Currently I don't know how to use either SocketIO or AJAX, but I know that one of these is what I should be using. My ask here is which one? There will eventually be more scripts sending data to this app, which will ultimately turn into a dashboard of sorts. Starting small for now and getting just one working how I want. So my ask is, which would be a better solution, or are they both equal given what I want to do?

Related

Running a Python Program in the backend on an HTML button click

I am developing a location based web app/website. The website involves an HTML webpage, which has a button which when clicked by the user should:
Extract the user location coordinates
Run a python Program whose input will be the extracted user location, perform some manipulation.
Finally display real-time results back to the html webpage/ i.e. user computer screen.
The python Program is currently accepting the user location by using geocoder function. The program is successfully running on my system/PC.
I have an AWS EC2 Ubuntu server, to which the location of the vehicle GPS device is being sent.
Finally once everything is set up, I will be hosting/deploying the website so that individual users can test it on their system. I am aware of the hosting part.
Can someone please tell me how do I get along with the task of running the python program on an HTML button click and sending back real time results (which is the output of the python program) back to the html webpage?
To run python code on a buttonClick, you can set a href attribute to a link, which you catch in your flask backend. For example <a href="http://myapp/runthiscode"/> in the HTML and app.rout("/runthiscode") in flask. After that, the manipulation, you can give the updated variables to the page, by redirecting with redirect("/", args=args). args are the updated variables, which you can use in the HTML. For example like this: <a> {{ args }} </a>
The simplest way I can think of doing this is creating a basic API endpoint to do this data processing and return it to your frontend.
The process will look like:
User clicks button
Grab the user's longitutde and latitude (most likely using this, though from the sounds you might be able to do this already)
Submit a POST request to your Flask backend
Render the response in the frontend
Jonas answer gives you a rough sense of what this would look like; the only thing I would add is a tutorial. This one from FreeCodeCamp looks great.

Batch Printing a customized HTML pages in Python

Let me provide a little background.
An organization i am volunteering for delivers meals to people who are unable to come pick them up during the holidays.
They currently have a SQL Server DB that stores the information of all their clients along with the meal information for each year.
Currently a Java desktop application connects to the SQL Server DB and allows several functions to happen.
i.e. Add a client, add meals, remove clients, print delivery sheets.
I am hoping to use python Flask to rewrite the application as a web based application. The one function i am interested in at the moment is the print delivery sheets function.
The way this works is there is a setting for the current year. When you click the print deliveries for year button it will batch print a document for each customer onto an 8.5" x 11.5" paper. The sheet will be split in two with the same exact information on each side. This information includes the customer name, address, number of meals and so forth.
What i am wondering is how/what would be the best way to setup this template so that i could batch print it using python. I was thinking of creating an html template for the page but i am not sure how that would work.
Again i need to pass in every customer within that year into the template and batch print to 8.5" by 11.5" sheet.
What i am asking is.....
How could i create a template for the print that i can pass every customer two.
How would i print that template for every customer in a batch manner for every customer.
I was hoping to do this all in python if possible.
Thank you for your time and help.
If you are already deploying this as a web app, it will probably be easier to design and generate a pdf. You can use an html to pdf converter, which there are several of on PyPI, or there are plenty of resources online, such as:
How to convert webpage into PDF by using Python
https://www.smallsurething.com/how-to-generate-pdf-reports-with-jinja2-and-pyqt/
Once you have found a way to generate PDFs, you can then just use them like any other PDF, and either have the user download them or print them from the browser (this may require a little bit of Javascript, but this shouldn't be that hard since it should pretty much just be a window.open call.
For instance, you can add a button
<button onclick="getPDF()">Download PDF</button>
Which will then call a function called getPDF() which you define, which finds a way to generate the pdf.
function getPDF() {
// Find the uri for the pdf by some method
var urlToPdf = getUrlToPdf();
// Open PDF in new window
window.open(urlToPdf, "_blank");
}
Note Since you are using Flask, you can include the URL for the pdf in the source for the page, even the Javascript using the {{ }} syntax. Then the pdfs are only generated when someone requests that route.
This way you will not have to worry about connecting to a printer yourself at all, just use the browser to handle those kinds of tasks.

How do Bottle and HTML communicate back and forth?

So I am attempting to use bottle.py and twitter bootstrap together to make a small website. I need to be able to insert a reasonable amount of data at various points in the HTML using Python but I am not really sure I understand how the HTML and python are communicating.
Here is an example of twitter and bottle working together.
He mentions linking a couple of .js files in the html and I can see where he does that but I am not really sure how that affects how the python interacts with the html. Is there a callback from the Javascript that the python catches using request.GET.get().strip():?
Also one of the last lines is:
return template('templates/gpio.tpl', colour1=colour1, colour2=colour2, colour3=colour3)
I am not sure how the templates/gpio.tpl is connected to the html he mentions below. I understand that the colour# variables are referenced in the html (I assume this happens with the {{}} syntax) but I am not sure how the html gets called at all.
From what I understand (which so far isnt a whole lot) this is how it goes:
User enters "server:port/gpio" into a webbrowser
The python decorator gets called by bottle and the function is run returning the template at the bottom.
This is where I get confused.
A) How does the python script know to call the html?
B) How does the gpio.tpl template code get sent to the html?
C) Is it safe to assume that the python arguements sent to the template function can be referenced using the {{}} syntax or is there more to it?
D) How does the html call back to the python to update the buttons he shows at the bottom?
D.1) does the JS linked at the top have something to do with this?
Lastly: If anyone has a another/better example of linking bootstrap and bottle I would be very happy to see it.
This is quite a loaded post. Thank you for your patience. :D
You'd really need to first learn how the HTTP protocol works... But let's try to quickly answer your main question:
how the HTML and python are communicating
Quite simply: they don't. What happens is:
your client (usually your browser) send an HTTP request to your site
the front web server (Apache, Nginx, whatever) sends this request to the bottle.py application
the bottle.py app dispatch the request to the right controller function matching the url's path portion and request's method against the defined routes)
the controller function does what it has to do and returns an HTTP response to the front web server
the front web server send this response to your client
Usually - but not necessarily - the HTTP response contains HTML content, generated by the controller using a template. IOW : bottle.py uses the template to generate html that is sent back to the client.
Once the response is sent, there's no more "communication" until the client sends another request.
So if I wanted to make an html button that changed something on the page how would I send that response back to bottle.py regenerate the page with the change?
It depends on what you want to change...
For example, pushing the button could trigger a new HTTP request, you should then define a new feature in your code.
Let's take the previous example, and imagine you want to add a switchOff button.
You have to add the following button somewhere in the gpio.tpl :
<input type="submit" class="btn" name="LedsOff" value="Turn off the leds!">
Then, modify the function gpio() to add a new condition with the following :
elif request.GET.get('LedsOff','').strip():
from quick2wire.gpio import Pin, exported
with exported(Pin(12, Pin.Out)) as out1, exported(Pin(13, Pin.Out)) as out2:
out1.value = 0
out2.value = 0

Display Data In Real Time With Django

I have a simulator application that continuously spits out data, formatted in JSON, to a given host name and port number (UDP). I would like to be able to point the simulator output to a Django web application so that I can monitor/process the data as it comes in.
How do I receive and process data in real time using Django? What tools or packages are available to accomplish this? I did come across this answer: How to serve data from UDP stream over HTTP in Python?, but I don't completely understand.
Ex: Similar to this page: http://money.cnn.com/data/markets/
ALSO, I don't need to store any of the streaming data in a database. I just need to perform lookups based on the streaming data. Maybe it's not a Django issue at all?
Using Javascript.
Create a webpage with all the results, and then use javascript to collect the data from the page, and update it every X seconds.
Have the webpage be the JSON data, and the javascript grab it an interpret it.
get html code using javascript with a url
Then update the page using javascript. ww3 schools has great JS tutorials

Refresh Webpage using python

I have a webpage showing some data. I have a python script that continuously updates the data(fetches the data from database, and writes it to the html page).It takes about 5 minutes for the script to fetch the data. I have the html page set to refresh every 60 seconds using the meta tag. However, I want to change this and have the page refresh as soon as the python script updates it, so basically I need to add some code to my python script that refreshes the html page as soon as it's done writing to it.
Is this possible ?
Without diving into complex modern things like WebSockets, there's no way for the server to 'push' a notice to a web browser. What you can do, however, it make the client check for updates in a way that is not visible to the user.
It will involve writing Javascript & writing an extra file. When writing your main webpage, add, inside Javascript, a timestamp (Unix timestamp will be easiest here). You also write that same timestamp to a file on the web server (let's call it updatetime.txt). Using an AJAX request on the page, you pull in updatetime.txt & see if the number in the file is bigger than the number stored when you generate the document, refresh the page if you see an updated time. You can alter how 'instantly' the changes get noticed but controlling how quickly you poll.
I won't go into too much detail on writing the code but I'd probably just use $.ajax() from JQuery (even though it's sort of overkill for one function) to make the calls. The trick to putting something on a time in JS is setinterval. You should be able to find plenty of documentation on using both of them already written.

Categories