Use Access Code in a Website

Bevara Access produces a framework that includes a set of Accessor libraries and an HTML tag. See Get Started to set up Bevara Access and generate Accessor frameworks. See HTML Tags and Attributes for an overview of HTML tags and Bevara-specific attributes.

As an example, Bevara Access produces HTML integration code for a sample JPEG-2000 image:

This sample code includes the file path and lists the auxiliary code, the Accessor libraries, that will be needed to display the image:

To display the image in a website the HTML code must be inserted in the site, the Accessor filters must be uploaded to the site, and the filter location specified.  First, use the Download required libraries button to package the filters universal-img_1, solver_1, and openjpeg_1 in a ZIP file and download. Then uncompress and store the files to your site.

Next, use the Copy code to clipboard to make a copy of the HTML code.

Insert the code into your website page. A straightforward method of adding the code is to use code block plugin for your website. Once it is added update the location of the data file, if needed. The example below shows that the data file is located on the Bevara website server in a directory called “demo”. Add the location of the Accessor filters by adding a “script-directory” attribute with the location of the code and add a “script” tag with the main JavaScript code, the library code referenced by the attribute “is”. In this example, the filters universal-img_1, solver_1, and openjpeg_1 were also placed in the “demo” directory:

The libraries are used to decode and display the image on the web page:

HTML Tags and Attributes

Overview

An HTML document is made up of a set of elements, each of which is denoted by one or more tags and, optionally, some content. Elements can also have attributes that are used to provide information about the element, such as specifying content, style, or behavior.

For instance, to display an image you might add the following to your HTML document:

< img src=”my_img.jpg” >

The “< img >” is a tag that will tell the browser to handle an image, it looks for the image at the path and filename specified by the “src” attribute.  As long as a browser successfully finds the image “my_img.jpg” and is able to decode it, the image is displayed. If the image is not available or the browser can’t decode it, you’ll see a broken link icon.

You can add additional attributes to your element. As an example, the img element lets you add on attributes such as “alt” to specify text to be displayed when the image is not available or can’t be decoded, and the dimensions to display the image

< img style=”width: 128px; height: 128px;” src=”my_img.jpg” alt=”Favorite Image” >

Another example is the canvas element, which is essentially a placeholder on the page that can be filled with graphics or other data.

<canvas id=”sample_canvas” style=”sidth:128px;height=128px;”></canvas>

Note that both the opening “<canvas>” and closing “</canvas>” tags are needed to specify the canvas element, and it can have attributes specifying behavior.

Bevara-Specific Tags & Attributes

For multimedia Bevara reuses standard HTML tags: img, audio, video, and canvas.

However, the attributes specify the interface, the extension to the tags, the underlying decoder/interpreter, the location of the data file, and additional performance-related flags.