I plotted a bunch of things in a dash layout. I want to save them to an html file so I can look at them later. when I reopen the saved html file, I first see everything correctly. However, within <1s, the page goes blank and I get an error: “Error loading layout”. (see gif below)
How can this be fixed?
Thanks!
This solution is not fully working:
You have to save your Webpage complete.
To prevent the javascript creating any errors
i have removed the bundle(2).js file.
This file contains the function dash_renderer which tries to interact with the server and creates issues.
<footer>
<script id="_dash-config" type="application/json">{"url_base_pathname": "/", "requests_pathname_prefix": "/"}</script>
<script src="./Dash_files/react.min.js"></script>
<script src="./Dash_files/react-dom.min.js"></script>
<script src="./Dash_files/bundle.js"></script>
<script src="./Dash_files/plotly-1.38.0.min.js"></script>
<script src="./Dash_files/bundle(1).js"></script>
<!-- <script src="./Dash_files/bundle(2).js"> --></script>
</footer>
The result is the same page as you can see for ~1s.
Big disadvantage: The interactivity from plotly is lost.
A Dash app layout is serialized as JSON and served to the front-end by the Dash server (an extension of a Flask server).
All Dash components included in your layout are bundled as JS/CSS files. These bundles are also served by the Dash server to the front-end.
Without the server, there is no one to send JSON, JS, CSS bundles to the front-end, so nothing will be rendered.
I'm not sure why you can see your app for a brief moment. My guess is that Dash saves a PNG image of your app every time you run it. Think of it like a splash screen you see before the real, reactive app shows up.
Have a look at this high-level overview on how Dash works under the hood.
Related
I am trying to get HTML/webpage interface to run a python script I wrote that generates a graph and saves it in a local directory. I would like to click a single button and have the python code run, generate the graph and save it in a folder which then HTML could embed it on the HTML page. My issue is this code isn't working, the code is not run and no new graph is generated. Both the HTML and Python file (Create_Chart.py) are in the same folder.
Python code
globals().clear()
import numpy as np
import matplotlib.pyplot as plt
import os
rand=np.random.normal(100,1,size=[100,1])
chart=plt.plot(rand)
plt.savefig(r'C:\Users\...\example_chart.png')
HTML/Javascript code
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<input type="button" id='script' name="scriptbutton" value=" Run Script " onclick="goPython()">
<script src="http://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script>
function goPython(){
$.ajax({url: "Create_Chart.py",context: document.body}).done(function() {alert('finished python script');;});
}
</script>
</body>
</html>
I am trying to follow the example from this other stackoverflow thread. What am I doing wrong?
How can I execute a python script from an html button?
The javascript code is being called from the following link 'http://code.jquery.com/jquery-3.3.1.min.js'. Do I need to install Jquery on my local computer?
You'll need a webserver software (as in nginx) which understands how to run python scripts (as in a WSGI application). The script then needs to be something that understands HTTP. Your script needs then to answer with an HTTP response.
Since you're asking a question on that level, these are many concepts. I suggest you to watch into Django or FastAPI (Python web frameworks; google them). Those come with inbuild test webservers and get you started.
I have a basic question regarding Python and Flask for web development.
In my html template file, I have a line to display an image, shown as below:
<img width="600" height="451" src="static/graph_1.png">
The image is in the static folder. When I update this image but using the same name 'graph_1.png", the web still shows the old image, not the updated one. I think the browser somehow remembers the old image with the same name. But I didn't really want to change the name of the image. I learned it has something to do with "Catche-Control"? Please advice on how I can solve this problem. Thanks in advance!
User cmd+shft+r on mac or ctrl+shift+r on a pc to load the page without using cache.
off topic, but you might want to look into the flask documentation on templates. A better approach to adding the path to the html is using jinja to inject the path. The nice thing about this is if you ever change the file structure, as long as the file name remains the same you're golden!
<img width="600" height="451" src="{{ url_for('static', filename='graph_1.png' }}>
You can find more info here
I'm having a little trouble implementing a webpage that uses AJAX to update the bokeh plot embedded within an html page.
See below specific file where I'm trying to implement it:
https://github.com/hhprogram/PyramidSite/blob/master/webgraphing/views/ajaxView.py
You should be able to just clone the whole webgraphing repo to your machine to run the pyramid webpage locally. You can then run the pyramid serve using pserve deveopment.ini and then navigate to 'localhost:6543/bokehAJAX' in your browser. Looking at the javascript console it seems to be embedding the bokeh div in my html except the div has width of zero.
The ultimate goal is there should be a bokeh line graph figure on the page that periodically updates and adds data to the line graph. I'm not really too sure what I'm doing wrong here - any push in the right direction would be much appreciated. Note: I've tried looking at examples like: Flask + Bokeh AjaxDataSource but to no avail.
Problem was in my python code ajaxView.py file in the bokeh_ajax method, i was missing:
from bokeh.resources import INLINE
...
jsResources = INLINE.render_js()
...
return {..., 'jsResources': jsResources}
Then in my html / jinja2 template needed to add:
<head>
...
{{ jsResources | safe }}
...
</head>
Hope this helps someone else!
I am using flask and Jinja templates. None of my CSS is being applied, except for bootstrap which is being downloaded from an external host.
Here is the line in my base template for my own stylesheet:
<link rel=”stylesheet” type=”text/css” href="{{ url_for('static', filename='style/stylesheet.css') }}">
And then when I open the page in chrome I can follow the link, and it opens up the file successfully. However when I look in the frames I cannot see my stylesheet under the stylesheets section:
Here is the request from the server: GET /static/style/stylesheet.css HTTP/1.1" 200 -
It looks likes it's not being recognized as a css file ? I'm not great with web stuff so hopefully this is something simple.
I have no idea what was happening here. This issue has been ongoing for days.
To fix it I simply copied the line that loads the CSS, saved my project, pasted it back in, and ran the server. Mass confusion.
For anyone else still having issues with this I found this that suggests the CSS is not being "hard refreshed".
I fixed this issue on my Mac in Chrome by holding down both ⌘ Cmd+⇧ Shift and pressing R.
I have a bigger project to handle, so this is what I want to do:
I have a Server with an MySQL database and Apache webserver running on. I save some machine information data in the database and want to create a web app to see, e. g. if the machine is running.
The web app should be designed responsive, i. e. changing design in accordance to the screen resolution of the current used device. This is important because the app will be used from smartphones and tablets mainly, but should also work on a normal pc.
I wrote a Python programm for my machine to get the data, and another Python programm on my server receiving information and saving in the database.
So my job now is to create the "responsive website" for my smartphone etc.
Then I want to broadcast this with my webserver.
Another Point is, that the web app should be build dynamically.
If I add another machine to my database, it should appear on my web app to be clickable and then show the related information.
First I thought about doing this in HTML5 and CSS3, with the use of jQueryMobile.
But I never used javascript. I'm just experienced in the "old" HTML and CSS.
Is Django a better choice, since I'm quite experienced in Python?
Or do I need both perhaps?
I haven't worked with any webframework yet, please help me choosing.
Or do I need one at all?
It looks like your server layer is OK for getting server informations and storing informations in database. Done with python.
And now, if I can resume, you need :
a reponsive web client
notification features
dynamically able to display new set for html elements
Based on this, I doubt in the fact that you will find a complete already packaged solution. Django should have this kind of features but it is not my favorite approach for such custom requirements.
If I have to do this I would use :
NodeJS for serverside code managing notifications
AngularJS for clientside managing client (!) and clean dynamic DOM manipulation with directives.
CSS Framework like Foundation or Bootstrap where responsive is native
What I would do is :
Init Phase
install nodejs and yeoman
initialize an angular app
write basic nodeJS server with a basic HTTP service
test your HTTP service with curl & your app with chrome or FF
Integration Phase
write basic angular HTTP call to this service
add communication between Node and Python (See
Combining node.js and Python
or something like this)
Client & Look and feel phase
add CSS framework for responsive and use it (navbar, table...)
look at Angular directives, develop a directive for adding new DOM elements
Finish / Clean your code and rollout
My solution now is as follows:
I will use the bottle microframework for generating serverside dynamic html-pages on request.
This will cause me to reload the page everytime I want to see new machine information, but for now it is enough for me.
Later I can add AJAX for live monitoring (I know this is javascript, I think I have to learn it anyway.)
Thanks for your solutions though.
You can put Bootstrap too for making responsive website.
Follow the code below code in your index.html in Django template.
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
{% block head %}
:
:
{% endblock %}
{% block body %}
.
.
.
{% endblock %}
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
crossorigin="anonymous"></script>
</html>