Accessor: js

Accessor that provides a user interface based on HTML5 on the local host. The initial content on the page may be specified using the content parameter and HTML header content may be specified using header.

Whatever text is received on the html input port will replace the content of the web page. Normally, this will be HTML text without any DOCTYPE or header and without a body tag. Each time new text is received, the content of the page will be replaced.

The page will be opened upon initialize if content is not empty. Otherwise, it will be opened when the first html input is received.

The resources input can be used to provide resources, such as images, that will be used by the HTML content provided on the html input. Note that you probably will also have to provide an update input (see below) to force the user interface to update the page using the specified resource.

The update input can be used to instruct the user interface to replace content within the page, vs. the html input which replaces the entire page. The value of an update input is expected to be an object with three properties, id, property, and content.

The id property refers to a the ID of a DOM element in the content of the page, where the content has been provided either via the content parameter or the html input. For example, your page may include:

    <div id="foo"></div>
 

    <img id="bar" src="image.jpg"/>
 

• @param id The ID. The property field specifies what property of the DOM element with the specified ID is to be updated. If property is "html", then the DOM object is updated by invoking the jQuery html() function with the specified content as an argument. For example, if id is "foo", property is "html", and content is "Hello World!", then the above div will be populated with the text "Hello World!" on the web page. The content can include any HTML markup or even scripts, which will be executed.

  If property is anything other than 'html', then the DOM element's property attribute will be assigned the value of content. A property value of 'src', however, is treated specially. A property value of 'src' can be used, for example, to replace the image in the above img tag. Just send the updated image to the resources input and send this to the update input:

  {'id':'bar', 'property':'src', 'content':'image.jpg'}
  

  Note that to get the user interface to actually replace the image, we may have to play some tricks. If the user interface is implemented by a browser, then the browser normally caches an image that it has previously retrieved and it will use the cached version of the image rather than obtaining the new image from the server. To force the user interface to refresh the image, this accessor treats a property value of 'src' specially. Specifically, it appends to the content a suffix of the form '?count=n', where n is a unique number. This forces the user interface to retrieve the image from the server rather than use its cached version because the URI is different from that of the cached version. The server, on the other hand, ignores the parameter 'count' that has been appended to this URI and simply returns the updated image.

  The way this accessor works on most hosts is that it starts a web server on localhost at the specified port that serves the specified web page and then instructs the system default browser to load the default page from that server. The page served by the server includes a script that listens for websocket connections that are used to provide HTML content and udpates to display on the page. Some hosts, however, such as the cordova and browser hosts, natively use a browser as part of the host, so in these cases, no web server nor socket connection is needed and the port parameter will be ignored.