How do I display a website with html-forms locally using python and collect the user input?

Question

I am a behavorial scientist and usually collect data by letting participants do some tasks on a computer and record their responses (I write the programs using the pyglet wrapper PsychoPy). That is, the program runs locally and the data is stored locally.

Now I would like to know if there is a way to use Python to display a (local) website with html-forms to the user and collect the input (locally). The reason for this idea is that currently whenever I want to display checkboxes, radiobuttons, or input fields I use wxPython. This works quite well, but programming and layouting in wxPython is kind of cumbersome and I would prefer html with forms.

A requirement would be that it would need to rum without any borders, adress field, menu bar, ... The reason is that I need it in kind of fullscreen mode (I currently open a non-fullscreen pygflet window in the size of the screen to hide the desktop) so that participants can do nothing but work on the forms.

So I am looking for a way to (a) display html websites including html form above a pyglet window with no menu bar or whatsoever, (b) collect the input when clicking on the Ok button (i.e., the form is send), (c) control what is presented prior and after viewing this website, and (d) everything of this should happen locally!

My idea would be that the data is collected when participants hit the "Send away" button in the following example pic and the next page is displayed.

example form

Update: I use windows (XP or 7).

You can run a web app locally and point the browser to localhost:portnum, and run the browser in fullscreen mode. It wouldn't stop them from hitting alt+f4 though... — AdamKG
– AdamKG, Commented Apr 12, 2012 at 10:48
@user1313312 If you use QT to display the html it is fine (and if it runs above a pyglet). QT itself would in principal also be fine but is kind of outside the scope of this question that specifically asks for html. — Henrik
– Henrik, Commented Apr 19, 2012 at 21:21
Google App engine will let you do this but the SDK runs a fully-featured webserver so I'm not sure if that's what you're looking for. Once you have the routes mapped, the controllers are specified by creating Handler classes with get() and post() methods. — Evan Plaice
– Evan Plaice, Commented Apr 20, 2012 at 23:01

pwuertz · Accepted Answer · 2012-04-19 22:08:33Z

5

+100

This is a solution using Qt Webkit for rendering HTML. The default navigation request handler is wrapped by a function that checks for submitted form requests. The form uses the "get" method, so the data is included in the url of the request and can be retrieved that way. The original request is declined and you can change the content of the displayed web page as you wish.

from PyQt4 import QtGui, QtWebKit

app = QtGui.QApplication([])
view = QtWebKit.QWebView()

# intercept form submits
class MyWebPage(QtWebKit.QWebPage):
    def acceptNavigationRequest(self, frame, req, nav_type):
        if nav_type == QtWebKit.QWebPage.NavigationTypeFormSubmitted:
            text = "<br/>\n".join(["%s: %s" % pair for pair in req.url().queryItems()])
            view.setHtml(text)
            return False
        else:
            return super(MyWebPage, self).acceptNavigationRequest(frame, req, nav_type)
view.setPage(MyWebPage())

# setup the html form
html = """
<form action="" method="get">
Like it?
<input type="radio" name="like" value="yes"/> Yes
<input type="radio" name="like" value="no" /> No
<br/><input type="text" name="text" value="Hello" />
<input type="submit" name="submit" value="Send"/>
</form>
"""
view.setHtml(html)

# run the application
view.show()
app.exec_()

answered Apr 19, 2012 at 22:08

pwuertz

1,3258 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

username Over a year ago

You can get rid of that border with some css. Qt4 supports css stylesheets. doc.trolltech.com/4.2/stylesheet.html

pwuertz Over a year ago

Webkit is a full featured browser engine, you are free to use Javascript and CSS. Borderless, even partially transparent windows should be no problem for Qt as well.

subiet · Accepted Answer · 2012-04-18 09:04:21Z

4

As AdamKG mentioned, using a webframework would be a good choice. Since Django and similar might be an overkill here, using a micro webframework like 'flask' or 'bottle' would be a great choice.

This link demonstrates via step by step instruction how to make a simple form via a To-DO application. It assumes zero previous knowledge.

You can run it only locally also.

answered Apr 18, 2012 at 9:04

subiet

1,4291 gold badge13 silver badges18 bronze badges

2 Comments

Henrik Over a year ago

I skimmed a little bit the website and it looks promising. Can you provide an example of how to obtain input of html-form elements via POST?

subiet Over a year ago

Sure, check out this link bottlepy.org/docs/dev/tutorial.html#request-routing and specifically the "HTTP Request Methods" [Right below the mentioned hash], it has Login Form created with HTTP get/post request methods. This should be exactly what you need.

fanlix · Accepted Answer · 2012-04-20 12:03:37Z

your want a simple solution, so just write a http server and run your simple page.

using python.BaseHTTPServer, coding a 15 line web server:

import BaseHTTPServer

class WebRequestHandler(BaseHTTPServer.BaseHTTPRequestHandler):
    def do_GET(self):
        if self.path == '/foo':
            self.send_response(200)
            self.do_something()
        else: 
            self.send_error(404)

    def do_something(self):
        print 'hello world'

server = BaseHTTPServer.HTTPServer(('',80), WebRequestHandler)
server.serve_forever()

easy enough,but i suggest using some web frameworks. They are easy too.

for example, web.py. here is what u want in 50 line codes:

install web.py

make a dir with 2 files:

./
|-- app.py
`-- templates
    `-- index.html

index.html

$def with (form, ret)

<html>
<head>
                <title> another site </title>
</head>
<body>
        <h1> hello, this is a web.py page </h1>

        <form action="" method="post">
                $:form.render()
        </form>

        <h2>$:ret</h2>

</body>
</html>

app.py logic file:

import web

### Url mappings

urls = (
     '/', 'Index', )

### Templates 
render = web.template.render('templates')

class Index:
    form = web.form.Form(
        web.form.Textbox('fav_name', web.form.notnull, description="Favorite Name:"),
        web.form.Textbox('cur_name', web.form.notnull, description="Current Name:"),
        web.form.Button('Send Away'),
    )

    def GET(self):
        """ Show page """
        form = self.form()
        return render.index(form, "")

    def POST(self):
        """ handle button clicked """
        form = self.form()
        if not form.validates():
            return render.index(form, "INPUT ERROR")

        # save data by ur method, or do some task
        #pyglet.save_data(form.d.fav_name, form.d.cur_name)
        #pyglet.draw(some_pic)
        #os.system(some_cmd)

        form = self.form()
        return render.index(form, "YOUR DATA SAVED")

app = web.application(urls, globals())

if __name__ == '__main__':
    app.run()

run this server in your windows:

python app.py 9999
open browser: http://127.0.0.1:9999/

by the way, if ur data is only strings, u can save them in web.by by sqlite.

heltonbiker · Accepted Answer · 2012-04-14 17:29:58Z

My suggestion would be:

Use some python server as, for example SimpleHTTPServer. It is needed because the submit button on forms sends the information to a server. There you should manage the received info some way;
Have your browser configured with one of those Kiosk extensions, which disallow even the use of Alt+F4. An example would be Open Kiosk extension for Firefox
Optionally, if you have affinity with scripts in general, you could create a script which, when executed, would at the same time run the python server AND open your html file in the browser. That would ease a lot your setup work for every subject in your group.

EDIT: I've read you need the pyglet over the browser window. That could be included in the script of step 3, using "always on top" option and absolute positioning of the pyglet (I can tell this would probably be simpler on Linux, which could be run from persistent LiveUSB - just a thought!)

EDIT (regarding the posted comment): I think the most reliable option for output would be to disk (file or database) instead or RAM (running python object), then you read the info from file afterwards. Then, in case of a surprise (system hang, power failure), the already-entered data would be there.

The only (and most important) part I don't know HOW to do is to handle the content of the form's "submit" on the server-side. Probably some server-side script file (php, python) shoud be created and left on the server root, so the server would receive an http request containing the info, and send the info to the script, which then handles the processing and file/database storage activities.

This might be of your interest: "The POST request method is used when the client needs to send data to the server as part of the request, such as when uploading a file or submitting a completed form." (from wikipedia on "POST(HTTP)" ENTRY)

In another link, some thoughts on using SimpleHTTPServer itself for handling POST requests: http://islascruz.org/html/index.php/blog/show/Python%3A-Simple-HTTP-Server-on-python..html

Hope this helps.

Actually I want the pyglet window below the browser window, but it is not totally necessary if the browser runs in fullscreen. However, what I need is that everything (i.e., opening the server, opening the html file, collecting the input, returning control to the main python script) is run automatically. So could you elaborate some more on how you would put it in a script? And could this be done in Python only? And I would very much like to have the data in an accessable Python object after the browser is closed.

Community · Accepted Answer · 2020-06-20 09:12:55Z

1

The reason for this idea is that currently whenever I want to display checkboxes, radiobuttons, or input fields I use wxPython. This works quite well, but programming and layouting in wxPython is kind of cumbersome and I would prefer html with forms.

You can combine the ease of HTML and still create native Windows applications using Flex with a Python backend.

If you are averse to Flex, a bit more - involved - but still native windows application generator is Camelot

Edit

Instead of typing it out again - I would suggest the django + flex + pyamf article on Adobe that explains it all with screenshots as well. You can replace django with flask or bottle as they are more lightweight, however the PyAMF library provides native support for django which is why it was used in the example.

PyAMF provides Action Message Format (a binary protocol to exchange object with the flash runtime) support for Python.

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Apr 19, 2012 at 7:10

Burhan Khalid

175k20 gold badges254 silver badges291 bronze badges

1 Comment

Henrik Over a year ago

This also sounds really promising. Do you have a more specific pointer on how to implement something I am interested in (i.e., some example)? That would be awesome (googling flex is a little bit overkill)

Collectives™ on Stack Overflow

How do I display a website with html-forms locally using python and collect the user input?

5 Answers 5

2 Comments

2 Comments

Comments

1 Comment

Edit

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

2 Comments

Comments

1 Comment

Edit

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related