I'm a bad geek who has never built a website.
September 16, 2011 1:46 PM   Subscribe

I'm a bad geek who has never built a website ... not even static HTML. Help me figure out how to build an interactive website with a python backend.

I have some python (2.x) code that uses matplotlib.pyplot to display the result of simple simulations. The user sets the initial conditions and then watches the simulation run. I currently do this using a combination of matplotlib.pyplot.ginput for placing objects in the image and "input" to prompt for text input specifying the simulation parameters.

I would like to be able to give my advisor a URL and let him play with the simulations, rather than the current system of checking my code out and running it locally. Ideally, the website will eventually be polished enough to use to show off my work to others. My goal here is to make this work, as opposed to getting a thorough grounding in designing webpages .... so, I want to piggy-back on existing [whatever]s as much as possible.

I'm pretty sure that my home directory on my university's servers has a folder that will display the contents as a website. However, the cluster that I have access to isn't supposed to be used to run computationally-intensive tasks. So, I'll probably have to host it off my desktop (dual-boot Vista/Ubuntu 10.10. Please tell me I can use Ubuntu for this.)

So ... where do I start?
posted by Metasyntactic to Computers & Internet (9 answers total) 10 users marked this as a favorite
CGI scripting is a really easy way to run server-side scripts to dynamically generate web content. Googling for python cgi scripting apache tutorial should get you started.

It's probably easier to install your own apache web server with Ubuntu than to worry about having a web front end making remote calls to your workstation. The webserver will have to be configured to allow CGI scripts, which is easy to do but is not usually the default, and may not be allowed on your department server. If you do go with the remote solution, you can use ssh to execute remote commands.
posted by qxntpqbbbqxl at 2:08 PM on September 16, 2011

I'm pretty sure that my home directory on my university's servers has a folder that will display the contents as a website.

This kind of home directory website is usually severely limited in what it can serve to stop people from, for example, bringing the server to its knees with a poorly configured script.

Talk to the people running your server - they will tell you what technologies are available. This will give you the boundary conditions for any solution you come up with.

So ... where do I start?

You will obviously need a basic understanding of HTML and a broad outline of HTTP and what a web server does. It doesn't sound like this would be too hard for you. Can you make a simple Hello World page with static results from your calculation?

For a minimal solution, you will need three things:

1) An HTML form for the parameters - simple to build, tons of tutorials out there.

2) Something to handle the form request - your admin will tell you what's allowed/available. This is the part that will eventually call your python code.

3) A way to display the results. This depends on (2), but for the quick and dirty you could, for example, have your executable copy the end result to a standard location where it will be displayed by a simple HTML page.
posted by Dr Dracator at 2:14 PM on September 16, 2011

Just a tiny suggestion, taken from some code I wrote for a "web app" (crunchy) for when you get your code working to display an image:

# Note: we append a random string as a parameter (after a ?) to prevent
# the browser from loading a previously cached image.
file_path = file_path + '?' + str(int(_random.random()*1000000000))

I just remember the frustration at trying to figure out why the bloody new image was not showing...
posted by aroberge at 2:19 PM on September 16, 2011

Dr Dracator - that makes sense for the text input. I also need mouse input ... how to do so?

As an example (not my problem, but a similar flavor):
Imagine that you wanted to simulate a bunch of balls bouncing around a 2D static environment.
A plot showing the environment obstacles pops up, and the user clicks on the plot to place the balls in their starting configurations. 2 text-fields allow the user to specify elasticity and gravity, and a button starts the simulation. The user then watches the balls bounce.

How do I do the "display environment" -> "collect user input in proper coordinate frame" part?
posted by Metasyntactic at 2:26 PM on September 16, 2011

Sorry.... 2 more things:

1) I do have a computer that's always on and connoted to the campus network. If it's easier to use that as the server, I can probably do so.

2) I'd rather not have the user input the starting configuration, wait a few minutes, then view the resulting simulation... If possible, I'd like frames to be displayed as they are calculated.
posted by Metasyntactic at 2:34 PM on September 16, 2011

How do I do the "display environment" -> "collect user input in proper coordinate frame" part?

You can probably do this with javascript (don't quote me), but involving mouse input somewhat ramps up the complexity. It would be simpler, for example, to provide a couple of text fields for X and Y coordinates and "Show Position" button that will place a cursor image at the spot with javascript before final submission. HTML5 is supposed to provide lots of facilities for this kind of thing BTW, you might want to look into it if you want to get fancy.

I'd rather not have the user input the starting configuration, wait a few minutes, then view the resulting simulation... If possible, I'd like frames to be displayed as they are calculated.

Delivering content over the web is not well suited to this kind of thing - the main pattern is that you make a request and get back a response. If you want frames to be delivered as they appear, something will have to tell the web browser to go back to the server and fetch new frames. For a low-tech solution, you can just provide a dynamically generated page with an "Update" button that will reload the page with any new results when the user clicks on it.

A more sophisticated way to do this would be to use javascript to tell the browser to automatically fetch any new results every x seconds - this is essentially what AJAX is about. You're going to need a library to do the plumbing for you if you decide to take this route.
posted by Dr Dracator at 2:46 PM on September 16, 2011

This (the suggestion at the end of this answer) may not be the most secure suggestion... However, it may give you an idea.

Download Crunchy (http://code.google.com/p/crunchy), start it (python crunchy.py) and select "images and dhtml" on the left hand side menu. (Alternatively, just copy this link in your browser url bar:

The third example shows how to create and display a matplotlib graph in your browser ;-)

Your last question is about displaying frames as they are calculated; the fourth and last example on that page simulates just that!

Now ... a quick way to get things working would be to set up crunchy on your home computer and provide the link to a specially crafted web page (which would import your own code and matplotlib) to your advisor.

If you do so, rather than using crunchy in the single user mode (the default), you'd want to use it in the "server" mode and create users and passwords... NOTE that I have never run Crunchy other than on my own computer - but in theory it should work and *should* be safe. However, I can not make any promises and only warn you that, whenever you make your computer available to the outside world, you create a risky situation...
posted by aroberge at 2:50 PM on September 16, 2011

Don't put your computer on the network as a server if you have any kind of sensitive information on it (or if you need for it to be available all the time).
posted by kenliu at 9:59 PM on September 16, 2011

Another option: Here's a page I made with something like the example you mention, minus the obstacles. Click on the rectangle to set the initial location of the balls.

If your simulations are simple, maybe they can be rewritten in JavaScript. The example in the link is all done in JavaScript with the RaphaelJS library. Of course, this would be a lot of extra work and require learning a new language (or three).

There are a few reasons, though, for recommending this approach.
1) It seems there hasn't yet been a suggestion for how to record the user's clicks; at the very least, maybe this example can help with that. (You wouldn't need RaphaelJS for that part.)
2) If you eventually want the website to be polished, that might require you to learn some HTML, CSS, and JavaScript anyway.
3) If you make your simulation page in this way, there would be no need to use your personal computer as a server.

There's a big downside to this approach. Making things in JavaScript/HTML/CSS can be a huge pain. Not nearly as pleasant as Python. (jQuery can help with that, but I haven't jumped on that bandwagon yet.) For instance, I know that the link above doesn't work in Internet Explorer, but I have no idea why, and not enough patience to try to find out. It works just fine in Firefox, Chrome, and Opera.
posted by -jf- at 11:21 PM on September 16, 2011

« Older Trying to find my big bad dad...   |   I'll never know what you'll find when you open up... Newer »
This thread is closed to new comments.