I have written a game in Python using the PyGame library that I am trying to embed into an HTML page to allow me to play in a web browser.
I am attempting to do this using the JavaScript library Skulpt. I have attached a test script below that successfully outputs the print statement below.
skulpt.html
<html>
<head>
<script src="assets/skulpt/skulpt.js" type="text/javascript"></script>
</head>
<body>
<textarea id="pythonCode">
print "I am python."
</textarea><br />
<pre id="output"></pre>
<script type="text/javascript">
function outf(text) {
var mypre = document.getElementById("output");
mypre.innerHTML = mypre.innerHTML + text;
}
var code = document.getElementById("pythonCode").value;
Sk.configure({output:outf});
eval(Sk.importMainWithBody("<stdin>",false,code));
</script>
</body>
</html>
Output of skulpt.html:
The issue that I am having is that when I use my game code instead of the simple print statement shown above it produces the error seen below;
I have included all relevant images to my web servers' directory at the correct path. I am unsure of why this error is being produced. Any help would be much appreciated, thanks!
Also, here is the attached Python game code (and a live demo of the error):
http://nicolasward.com/portfolio/skulpt.html
You have a lot of indentation on line 1 -> remember, in python, indentation always matters. Take away all those spaces/tabs on the first line and it should run.
Related
knowing that with <py-config> and <py-script> can execute python code in html
However, importing own function facing error
(PY1001): Unable to install package(s) 'bread'. Reason: Can't find a pure Python 3 Wheel for package(s) 'bread'. See: https://pyodide.org/en/stable/usage/faq.html#micropip-can-t-find-a-pure-python-wheel for more information.
html script
<html>
<head>
<link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
<script defer src="https://pyscript.net/latest/pyscript.js"></script>
</head>
<body>
<b><p>title <u><label id="AAA"></label></u> </p></b>
<br>
<py-config>
packages = ["bread"]
</py-config>
<py-script>
import bread.py
bread.fun_1()
</py-script>
</body>
</html>
own python script "bread.py"
def fun_1():
print("this is bread")
(pic) the result screenshot for above code
if I import my own function in another .py script is working, but do the same thing into html not works
(pic) the result that import my own function in another .py script is fine
I read through the link system recommend link, and link but I can't find out the solution myself, that I need a hand for this problem, thanks
The reason you are getting the error is that PyScript thinks you want to import a third-party package.
To import your custom modules, use [[fetch]] in your <py-config> and replace packages with files.
<py-config>
[[fetch]]
files = ["./bread.py"]
</py-config>
follow by discussion Get output of python script from within python script
I create online webpage (.html) run other .py script result, but face model not found error
logically seems the python code is fine, might the setting error or other issue I don't come up myself
printbob.py
#!/usr/bin/env python
import sys
def main(args):
for arg in args:
print(arg)
if __name__ == '__main__':
main(sys.argv)
test_0109_003.html
<html>
<head>
<link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
<script defer src="https://pyscript.net/latest/pyscript.js"></script>
</head>
<body>
<b><p>title test 1.10-test_get_ print </p></b>
<br>
<py-script>
import printbob
printbob.main('arg1 arg2 arg3 arg4'.split(' '))
</py-script>
</body>
</html>
(pic 01) the result website showing
(pic 02) I put .py and .html script in WinSCP, online host system
so how to solve this problem, I locate that there might be the resaon
my winscp ip port is private that public cannot access to private's file, I'm not sure if this the reason, and if so, how to deal with it?
I found this CGI Module, its letting me use HTML tags inside a python script.
ive seen some topics in here that shows how to use it, but when im using it it doesnt works.
import cgi
print ("""
<html>
<body>
Hello
</body>
</html>
""")
and this is the output when im running the script:
<html>
<body>
Hello
</body>
</html>
how can i use this properly?
thanks.
If you have your CGI script already hooked up to a web server, you will need to emit the HTTP headers too, e.g.
print("Content-Type: text/html") # HTML is following
print() # blank line, end of headers
print ("""
<html>
<body>
Hello
</body>
</html>
""")
Note that the cgi module is not being used in any way to achieve this; just simple calls to print(). The module is useful when you want to process form data submitted by a client through a HTML form.
I am in the process of creating a Django web application that reads a URL and outputs selected data from the page. I have written the code in Python that parses the web page and it currently returns the information that I need to display in the Django app as desired.
Before I dive in I just want to confirm what I have researched is correct as I only have a limited time to complete the project.
To summarise my python code, it is in the src folder in a class called "manage.py"
I have created print statements that print the information that I need to display (I did this to ensure it was returning the correct data)
print(variable1)
print("some text" + variable2)
Can I create the Django app code in the same file, "manage.py"? (The project has already been created as a Django app in Eclipse when I started building the project)
Would I build the Django code as I've estimated below if I'm using the variables defined from the Python code above?
<!DOCTYPE>
<html>
<head>
<title>{% block title %}Title of website{% endblock %}</title>
</head>
<body>
<h1>Web page report</h1>
<h2>Summary of web page</h2>
<h3>Title of document</h3>
<p>{{variable1}}</p>
<h3>The file size of the document</h3>
<p>{"Some text" + {variable2}}</p>
</body>
</html>
Django has strict rules about where to place which information. You can not write everything into manage.py. Answering requests from the browser is for example done using view functions.
I've found the mpld3 package to be brilliant for exporting a matplolib plot to HTML and displaying this via a flask app.
Each export comes with a lot of JS which seems unnecessary duplication if you want to display multiple plots within a single page. However I'm not well enough versed in JS to extract the relevant components and then loop through them. The .fig_to_dict method gives the necessary JSON to display each chart but then I'm left wondering what JS/ template work is needed to display each chart in turn.
I considered just stacking each plot into a single big figure but I'd like to layout the charts in separate DIVs and so this isn't the right solution.
I think I can see what the JS is doing to display them but I don't have enough knowledge to modify the functions to suit the purpose.
I haven't included code as I'm expecting this only to be relevant to someone with mpld3 experience but can supply some sample code if needed.
Sample HTML output for mpld3.fig_to_html(fig, template_type="simple"):
<script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
<script type="text/javascript" src="http://mpld3.github.io/js/mpld3.v0.1.js"></script>
<style>
</style>
<div id="fig136845463888164451663379"></div>
<script type="text/javascript">
var spec136845463888164451663379 = { <snip JSON code> };
var fig136845463888164451663379 = mpld3.draw_figure("fig136845463888164451663379", spec136845463888164451663379);
</script>
I'd thought it would be as simple as linking the two core scripts from the template header and then creating a new script for each JSON export. But that hasn't worked for me.
You're half-way there with your answer. I think what you want to do is something like this, which will embed three figures on the page:
<script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
<script type="text/javascript" src="http://mpld3.github.io/js/mpld3.v0.1.js"></script>
<style>
</style>
<div id="fig01"></div>
<div id="fig02"></div>
<div id="fig03"></div>
<script type="text/javascript">
var json01 = { <snip JSON code> };
var json02 = { <snip JSON code> };
var json03 = { <snip JSON code> };
mpld3.draw_figure("fig01", json01);
mpld3.draw_figure("fig02", json02);
mpld3.draw_figure("fig03", json03);
</script>
The json code for each figure can be created in Python by running
import json
# ... create matplotlib figure
json01 = json.dumps(mpld3.fig_to_dict(fig))
Embed this string at the appropriate place in the HTML document you're creating, and you should be good to go. I hope that helps!
Note that since jakevdp's answer was posted mpld3 has had a new release. As of today (September 2014) the mpld3 include has to be:
<script type="text/javascript" src="http://mpld3.github.io/js/mpld3.v0.2.js"></script>