HTML forms in Vizard

To display HTML forms in Vizard an HTML window is embedded in the graphics window. The HTML can be specified by filename, URL, or a string variable that holds HTML code. A form submission event will get triggered once a form is submitted and data can be collected using a task or callback function. Once a form is submitted, either the HTML window will be hidden or an HTML reply page can be displayed.

Commands

The following commands are related to displaying HTML in the embedded window:

Command

Description

vizhtml.displayURL(filename,

pos = None

size = None)

Displays an HTML file in an embedded HTML window. This will trigger a vizhtml.FORM_SUBMIT_EVENT when a form submission occurs on the page.

filename: The name of the HTML file or the URL to display in the HTML window.

pos: If specified, this sets the position of the HTML window. The position corresponds to the upper left corner of the HTML window relative to the upper left corner of the graphics window. If not specified, the HTML window will be centered in the graphics window.

size: If specified, this sets the size of the HTML window. If not specified, the size will be set to 2/3 the size of the graphics window.

vizhtml.displayCode(code,

pos = None

size = None)

Displays HTML code in an embedded HTML window. This will trigger a vizhtml.FORM_SUBMIT_EVENT when a form submission occurs on the page.

code: A string that contains HTML code to display in the HTML window.

size: If specified, this sets the size of the HTML window. If not specified, the size will be set to 2/3 the size of the graphics window.

vizhtml.setFormReplyURL(filename)

Sets the HTML file that will be displayed after a form submission. If None, the embedded HTML window is hidden after the form submission.

filename: The name of the HTML file or the URL to display.

vizhtml.getFormReplyURL()

Gets the HTML filename that will be displayed after a form submission.

vizhtml.setFormReplyCode(code)

Sets the HTML code that will be displayed after a form submission. If None, the embedded window is hidden after the form submission.

code: A string that contains HTML code.

vizhtml.getFormReplyCode()

Gets the HTML code that will be displayed after a form submission.

Form Definition

To define forms, you must use the HTML <form> tag. All input elements defined within the <form> tag will be included in the data of the form submission event.

A couple important things to note when defining your HTML form:

You must set the method attribute of the form to "post"

If your HTML is specified in an external file/URL, as opposed to embedded in your script, you must set the action attribute to the vizhtml web server (e.g. "http://localhost:8080/vizhtml_form/")

For example, if you want to display a form contained in an external file, your form tag should look something like the following:

Example

The following example displays an HTML form in Vizard and collects the form data once it's submitted:

import viz
import viztask
import vizhtml

viz.go()

def FormTask():

html = """
<html>
<body onload="document.the_form.first_name.focus();">

<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>"""

# Display input form
vizhtml.displayCode(html)

# Wait for form submission
d = yield vizhtml.waitFormSubmit()

# Get data from form
first = d.first_name
last = d.last_name

# Display name
import vizinfo
vizinfo.InfoPanel('Hello {} {}'.format(first,last))

viztask.schedule( FormTask() )

Command	Description
vizhtml.displayURL(filename, pos = None size = None)	Displays an HTML file in an embedded HTML window. This will trigger a vizhtml.FORM_SUBMIT_EVENT when a form submission occurs on the page. filename: The name of the HTML file or the URL to display in the HTML window. pos: If specified, this sets the position of the HTML window. The position corresponds to the upper left corner of the HTML window relative to the upper left corner of the graphics window. If not specified, the HTML window will be centered in the graphics window. size: If specified, this sets the size of the HTML window. If not specified, the size will be set to 2/3 the size of the graphics window.
vizhtml.displayCode(code, pos = None size = None)	Displays HTML code in an embedded HTML window. This will trigger a vizhtml.FORM_SUBMIT_EVENT when a form submission occurs on the page. code: A string that contains HTML code to display in the HTML window. pos: If specified, this sets the position of the HTML window. The position corresponds to the upper left corner of the HTML window relative to the upper left corner of the graphics window. If not specified, the HTML window will be centered in the graphics window. size: If specified, this sets the size of the HTML window. If not specified, the size will be set to 2/3 the size of the graphics window.
vizhtml.setFormReplyURL(filename)	Sets the HTML file that will be displayed after a form submission. If None, the embedded HTML window is hidden after the form submission. filename: The name of the HTML file or the URL to display.
vizhtml.getFormReplyURL()	Gets the HTML filename that will be displayed after a form submission.
vizhtml.setFormReplyCode(code)	Sets the HTML code that will be displayed after a form submission. If None, the embedded window is hidden after the form submission. code: A string that contains HTML code.
vizhtml.getFormReplyCode()	Gets the HTML code that will be displayed after a form submission.