Open topic with navigation

Vizard 7 » Reference » Graphical user interfaces (GUIs) » HTML and web browsers » HTML forms in a remote browser
7.7

HTML forms in a remote browser

In order to collect data from an HTML form displayed in a remote browser, a page containing HTML content needs to be registered with vizhtml's local HTTP server. A form submission event will get triggered once a form is submitted and data can be collected using a task or callback function.

 

The following commands register pages with HTML content:

Command

Description

vizhtml.registerFile(url,

                          filename,

                          directory=None)

Registers a page with the vizhtml server that uses an HTML file for content.

 

url: The path portion of the page's URL. See the server and URL section for further details about URLs.

 

filename: The name of the HTML file.

 

directory: The directory where page resources are saved.

vizhtml.registerCode(url,

                            code,

                            directory=None)

Registers a page with the vizhtml server that uses HTML code for content.

 

url: The path portion of the page's URL. See the server and URL section for further details about URLs.

 

code: A string that contains HTML code.

 

directory: The directory where page resources are saved.

In the following example, HTML code that contains a form is registered with the server. Once the form is submitted from a browser, it's data is collected in Vizard.

 

For testing on a local browser use 'localhost' or the loopback address:

 

http://localhost:8080/vizhtml/form_submit

http://127.0.0.1:8080/vizhtml/form_submit

 

For remote browsers replace computer name or IP address with the Vizard machine's name or address

 

http://computer name:8080/vizhtml/form_submit

http://IP Address:8080/vizhtml/form_submit

import viz
import vizhtml

viz.go()

code = """
<html>
<head>
    <title>vizhtml Form Submit Example</title>
</head>
<body>
<form name="the_form" method="post">
            <table>
                <tr>
                    <td>First Name</td>
                    <td><input type="text" name="first_name"></td>
                </tr>
                <tr>
                    <td>Last Name</td>
                    <td><input type="text" name="last_name"></td>
                </tr>
                <tr>
                    <td></td>
                    <td><input type="submit" value="Submit"></td>
                </tr>
            </table>
        </form>
</body>
</html>
"""

vizhtml.registerCode('form_submit',code)

def HandleForm(e):
    print(e.first_name,e.last_name)
vizhtml.onFormSubmit(HandleForm)

Custom handlers

When an HTTP request (e.g. page request, resource request, form submission) arrives at vizhtml's HTTP server, it get's handled so the appropriate action is taken.

 

By registering your own handler with the server you can have perform custom actions when a request arrives. The handler will be passed a request object that provides information about the browser's request and methods to send content back to the browser.

 

The following command registers a handler with the server:

Command

Description

vizhtml.registerHandlerClass(url,

                                      handler_class

                                      directory=None)

Registers a custom handler class with the vizhtml server.

 

url: The path portion of the URL. See the server and URL section for further details about URLs.

 

handler_class: A custom handler class that extends the vizhtml.PageRequestHandler class.

 

directory: The directory where page resources are saved.

The custom handler should inherit from vizhtml.PageRequestHandler and override it's handle_request method. This method is passed a request object that is an instance of vizhtml.VizardHTTPRequestHandler.

Note: The handle_request method is called from a separate thread than the main thread.

 VizardHTTPRequestHandler inherits from Python's BaseHTTPRequestHandler class and adds the following methods and attributes:

Attribute

Description

<VizardHTTPRequestHandler>.form_event

The form event if the request is from a form submission, otherwise None.

<VizardHTTPRequestHandler>.resource_path

The relative path of a resource request from custom page (e.g. images).

 

Method

Description

<VizardHTTPRequestHandler>.send_html_code(code)

Sends the specified HTML code to the browser.

<VizardHTTPRequestHandler>.send_html_file(filename)

Sends the specified HTML file to the browser.

<VizardHTTPRequestHandler>.send_local_resource(filename,

                                                                    mimetype=None)

Sends the specified resource file to the browser.

 

mimetype: If this is None it will be guessed from the filename. Otherwise it must be a 2-item tuple containing the HTTP content type and content encoding strings.

The example code below uses a custom handler to update content on a web page after a form submission. The data retrieved from the form's  text field is placed back into the page and Vizard's frame count is displayed.

 

For testing on a local browser use 'localhost' or the loopback address:

 

http://localhost:8080/vizhtml/custom_handler

http://127.0.0.1:8080/vizhtml/custom_handler

 

For remote browsers replace computer name or IP address with the Vizard machine's name or address

 

http://computer name:8080/vizhtml/custom_handler

http://IP Address:8080/vizhtml/custom_handler

import cgi
import viz
import vizinfo
import vizhtml

viz.go()

# Display form submitted message on screen
info = vizinfo.InfoPanel('')

code = """
<html>
<head>
    <title>vizhtml Custom Handler Example</title>
</head>
<body onload="document.the_form.message.focus();">
<img src='ball.jpg'>
<form name="the_form" method="post">
    <table>
        <tr>
            <td>Frame Number:</td>
            <td>{frame}</td>
        </tr>
        <tr>
            <td>Message:</td>
            <td><input type="text" name="message" value="{message}"></td>
        </tr>
        <tr>
            <td></td>
            <td><input type="submit" value="Submit"></td>
        </tr>
    </table>
</form>
</body>
</html>
"""

class ExampleRequestHandler(vizhtml.PageRequestHandler):

    def handle_request(self,request):
        """@args vizhtml.VizardHTTPRequestHandler()"""

        # If request is for a resource (e.g. image), then let vizhtml handle it
        if request.resource_path:
            return

        # If form was submitted, put message back into page
        if request.form_event:
            message = cgi.escape(request.form_event.message,True)
        else:
            message = ''

        # Send html code with dynamic content
        request.send_html_code(code.format(frame=viz.getFrameNumber(),message=message))

vizhtml.registerHandlerClass('custom_handler',ExampleRequestHandler,directory='.')

def HandleForm(e):
    info.setText(e.message)
vizhtml.onFormSubmit(HandleForm)

vizhtml introduction

HTML Forms in Vizard

HTML Forms in a remote browser

Collecting form data

Local HTTP server and URLs

WebSockets

Copyright © 2001-2024 WorldViz. All rights reserved.