HTML -- What is Supported, and What Is Not

Since the goal is to create a feature-rich graphical interface for embedded devices, and not to browse random web content, Amulet only supports a limited set of standard HTML tags. In general, most presentation tags are supported since they describe how the marked up content is to be visually presented -- presentation tags describe visual appearance. Logical or content tags are NOT typically supported since they aren't meant to describe how the content looks -- logical tags describe WHAT the content is, not HOW it looks.

So, What's Supported

For a complete list of tags and attributes that are supported, see the Matrix of Supported Tags and Attributes. This matrix lists all of the tags and attributes that are supported along with a detailed description of the syntax, behaviors, and useful application tips. If it is not listed in this matrix, it is not supported.

The following list itemizes the general HTML features that are currently supported:

Text style tags -- Bold, Underline, Italic, etc.
Hypertext links to other documents, plus a few Amulet extras.
Tables -- for alignment purposes only (no borders drawn)
Static images and animations -- monochrome only in the JPEG and GIF formats
Client side image maps
Plus scalable Amulet Dynamic UI widgets -- inserted with the Applet tag, but NOT implemented with Java.

And, What's NOT Supported

The HTMLCompiler DOES NOT support the following:

Frames -- Currently not supported, although Amulet is considering support in the future.
Image scaling and text wrap -- You cannot resize images using height and width attributes, and you can only align them with the top, middle, or bottom of the text line (that is, you can't float text around an image).
Color attributes -- Since the EasyGUI LCD is monochrome, all of the color setting attributes for all tags are ignored.
Lists -- Neither OL (ordered lists) nor UL (unordered lists) are supported. You can get more precise list item placement by using a table to organize the list, and custom bullets can be inserted with the <IMG> tag. In addition, lists of hypertext linked objects can be created using the Amulet List Widget.
Forms -- This includes any of the form item tags (<INPUT>, <FIELDSET>, <BUTTON>, <LABEL>, <LEGEND>, <TEXTAREA>, <SELECT>, etc.)
JavaScript -- However, we have been setting the stage for scripting by giving all widgets a variety of methods (functions) that can be called from other widgets. See IWC for more information.

Matrix of Supported <Tags> and Their Associated Attributes

TAG DESCRIPTION

 is ignored.

<A>
Creates a touch sensitive hypertext link. Clicking/touching anything that appears between the <A> and </A> tags will trigger the appropriate hypertext action.

HREF -- Defines the function(s) to be called when the link is triggered. See Appendix B for available functions.

ONTIME If the ONVAR attribute is not used, then this value automatically triggers the hypertext link after a specified time. Use ONTIME="1st number,2nd number", where 1st number specifies the frequency that the HREF function(s) is called (specified in seconds, with a single floating-point number). The range is 0.00 - 655.35. 0.00 means update never. The 2nd number specifies the delay time from when the page is loaded until the initial HREF function(s) is called (specified in seconds, with a single floating-point number). The range is 0.01 - 655.35. If the 2nd number is not specified, then the delay time defaults to the 1st number (frequency) value. If the 2nd number is specified and the 1st number is 0.00, then the function(s) is called after the delay time specified by the second number and does not update again. If the ONVAR attribute is used, then this value specifies the frequency in which the ONVAR function is called.

ONVAR
The value returned by this function call is used to trigger the function(s) in HREF. Use ONVAR="function", where function is called at the frequency specified in ONTIME. See Appendix B for available functions.

TRIGGER

This attribute specifies the value that triggers the HREF function(s). When the value returned from the ONVAR function is equal to the TRIGGER value, the HREF function(s) is called. The trigger value can be a byte, word, InternalRAM byte variable or InternalRAM word variable.

TRIGGER.GT

This attribute specifies the value that triggers the HREF function(s). When the value returned from the ONVAR function is greater than the TRIGGER.GT value, the HREF function(s) is called. The trigger value can be a byte, word, InternalRAM byte variable or InternalRAM word variable.

TRIGGER.LT

This attribute specifies the value that triggers the HREF function(s). When the value returned from the ONVAR function is less than the TRIGGER.LT value, the HREF function(s) is called. The trigger value can be a byte, word, InternalRAM byte variable or InternalRAM word variable.

TRIGGER.NEQ

This attribute specifies the value that triggers the HREF function(s). When the value returned from the ONVAR function is not equal to the TRIGGER.NEQ value, the HREF function(s) is called. The trigger value can be a byte, word, InternalRAM byte variable or InternalRAM word variable.

VALUE

Specifies the intrinsic value of this object. Use VALUE="number" Range is 0 - 65535 (0x00 - 0xFFFF) or InternalRAM byte or word variable.

NAME

Specifies the internal name of this object. Used for Inter-Widget Communication only.

<APPLET> Inserts an Amulet Widget. Amulet Widgets are a group of UI objects common to embedded systems that are not supported by standard HTML. Click for more info on widgets. Although Amulet Widgets are inserted into HTML pages using the Java applet tag, Amulet widgets ARE NOT written in Java.

ALIGN ALIGN="TOP | MIDDLE | BOTTOM" -- Specifies the method for vertically aligning the widget to the surrounding text/objects on the same line. Options are TOP, MIDDLE, or BOTTOM, with the default being BOTTOM.

CODE Specifies which type of widget to be inserted.

HEIGHT Specifies the widget height in pixels -- This is a required Attribute and the HTMLCompiler will generate an error if it is missing.

WIDTH Specifies the widget width in pixels -- This is a required Attribute and the HTMLCompiler will generate an error if it is missing.

<AREA> Defines a touch sensitive hypertext region (hot spot) within the bounds of an image. Clicking/touching the region defined by this tag will trigger the appropriate hypertext action. This tag is only allowed between <MAP>...</MAP> and used for implementing a client-side image map.

COORDS Gives the hot spot coordinates, relative to the upper left corner of the image and specified by the <MAP NAME="..."> tag. Syntax is: COORDS="x1,y1,x2,y2", where (x1,y1) represent the upper left corner of the hot spot and (x2,y2) represent the lower right corner, relative to the upper left corner of the image. A value of (0,0) represents the image origin (the pixel at the upper left corner of the image). All numbers x1,y1,x2,y2 are integers, with x increasing towards the right and y increasing towards the bottom.

HREF Defines the action when the link is triggered. See Appendix B for available functions.

ONTIME If the ONVAR attribute not used, then this value automatically triggers the hypertext link after a specified time. Use ONTIME="1st number,2nd number", where 1st number specifies the frequency that the HREF function(s) is called (specified in seconds, with a single floating-point number). The range is 0.00 - 655.35. 0.00 means update never. The 2nd number specifies the delay time from when the page is loaded until the initial HREF function(s) is called (specified in seconds, with a single floating-point number). The range is 0.01 - 655.35. If the 2nd number is not specified, then the delay time defaults to the 1st number (frequency) value. If the 2nd number is specified and the 1st number is 0.00, then the function(s) is called after the delay time specified by the second number and does not update again. If the ONVAR attribute is used, then this value specifies the frequency in which the ONVAR function is called.

ONVAR

The value returned by this function call is used to trigger the function(s) in HREF. Use ONVAR="function", where function is called at the frequency specified in ONTIME. See Appendix B for available functions.

SHAPE The current version of the HTMLCompiler supports only one shape: rectangle (SHAPE="rect"). Although most Internet browsers allow other shapes, the HTMLCompiler generates an ERROR if SHAPE="circle", or SHAPE="poly" is used.

TRIGGER

This attribute specifies the value that triggers the URL function(s). When the value returned from the ONVAR function is equal to the TRIGGER value, the URL function(s) is called. The trigger value can be a byte, word, InternalRAM byte variable or InternalRAM word variable.

TRIGGER.GT

This attribute specifies the value that triggers the HREF function(s). When the value returned from the ONVAR function is greater than the TRIGGER.GT value, the HREF function(s) is called. The trigger value can be a byte, word, InternalRAM byte variable or InternalRAM word variable.

TRIGGER.LT

This attribute specifies the value that triggers the HREF function(s). When the value returned from the ONVAR function is less than the TRIGGER.LT value, the HREF function(s) is called. The trigger value can be a byte, word, InternalRAM byte variable or InternalRAM word variable.

TRIGGER.NEQ

This attribute specifies the value that triggers the HREF function(s). When the value returned from the ONVAR function is not equal to the TRIGGER.NEQ value, the HREF function(s) is called. The trigger value can be a byte, word, InternalRAM byte variable or InternalRAM word variable.

VALUE
Specifies the intrinsic value of this object. Use VALUE="number" Range is 0 - 65535 (0x00 - 0xFFFF) or InternalRAM byte or word variable.

NAME
Specifies the internal name of this object. Used for Inter-Widget Communication only.

<B> Marks text for displaying in boldface. Same visual effect as the logical <STRONG> tag.

<BIG> Makes text one size bigger than the surrounding text. Similar to <FONT SIZE="+1">, except that nested <BIG> tags have a cumulative effect. So, <BIG><BIG> ... </BIG></BIG> would yield text two sizes larger than the surrounding text.

<BODY> <BODY> ... </BODY> must enclose the main section of a page.

<BR> Used to insert a line break -- equivalent to the combination of a carriage return(0x0D) and a linefeed(0x0A) in DOS.

<CENTER> For horizontally centering text, images, and widgets.

<DEL> Logical equivalent to <STRIKE>. Strikes out text by displaying it with a line through it.

<DIV> Used to specify visual attributes for a whole block of content.

ALIGN For aligning all the text and objects of the given block to the LEFT, CENTER, or RIGHT (default is LEFT). ALIGN="LEFT | CENTER | RIGHT"

<EM> Logical equivalent to <I>. Marks text for displaying in italics.

<FONT> For changing the size and the font of individual letters and words.

SIZE Specifies the font size in one of two ways: Absolute, or Relative. To set a font to a specific size, regardless of the size of the surrounding text, use the Absolute method. To increase, or decrease the font size relative to the surrounding text, use the Relative method. If no size specified, default is 3.

Absolute: SIZE="n", where "n" specifies the absolute font size between 1 and 7 (7 is the largest). Any enclosed text will be displayed at 8, 10, 12, 14, 18, 24, or 36 points for n=1, 2, 3, 4, 5, 6 or 7 respectively. The value of 3 represents a browsers default font size -- 12 point.
NOTE: The default Amulet Sans Serif typeface only has five point sizes, 1-5. Therefore values of 6 and 7 are not supported if using the Amulet Sans Serif font.

Relative: SIZE="+n", where a plus or minus sign before n indicates a size relative to the current font size. <FONT SIZE="+1"> is similar to <BIG>, and <FONT SIZE="-1"> is similar to <SMALL>. However, nested <BIG> or <SMALL> tags have a cumulative effect, while nested relative <FONT> tags do NOT. So, <FONT SIZE="+1"><FONT SIZE="+1"> ... </FONT></FONT> would NOT yield text that is two sizes larger than the surrounding text.

FACE
Specifies which font face (also called a "typestyle") to use for the text between the <FONT> ...</FONT> tags. The corresponding .amf file must be included in the Amulet/Configuration/Fonts folder. See AmuletFontConverter for more information regarding the creation of .amf files. If no FACE specified, default is Amulet Sans Serif.

COLOR

Specifies the font color, either white or black. If no COLOR specified, default is black. COLOR="WHITE|BLACK"

<Hn> <H1> through <H6> can be used to set the size and alignment of text used to display Headings. The smaller the number, the larger the text used. The convention followed by all major browsers is: <Hn> behaves exactly like the <P> paragraph tag except that the enclosed text is displayed in boldface at 8, 10, 12, 14, 18 and 24 points for n=6, 5, 4, 3, 2 and 1 respectively.
NOTE: <H1> is not supported by the Amulet Sans Serif typeface since it does not have a 24-point sized font.

ALIGN For aligning the heading text to the LEFT, CENTER, or RIGHT (default is LEFT). ALIGN="LEFT | CENTER | RIGHT"

<HEAD> Necessary for creating the HEAD section of a page where the document global <META> tags are specified.

<HR> Used to draw a horizontal line with a specified thickness, length, and alignment. The horizontal line does not share a line with any text or objects, it resides on a line by itself.

ALIGN For aligning the horizontal line to the LEFT, CENTER, or RIGHT (default is LEFT). ALIGN="LEFT | CENTER | RIGHT"

NOSHADE Draws the line with a solid color -- Black in most browsers AND on Amulet's EasyGUI LCD. By omitting this attribute, the line will be drawn as 50% gray on Amulet's LCD -- Internet Browsers draw the line with some 3-D effect.

SIZE SIZE="n" sets the thickness of the line to n pixels. Default is 2 pixels.

WIDTH WIDTH="n" sets the length/width to n pixels. Optionally, n may be specified as percentage of the window/table cell width: WIDTH="n%". The default value is 100%.

<HTML> Tells a browser that this is an HTML document

<I> Marks text for displaying in italics. Same visual effect as the logical <EM> tag.

<IMG> For inserting both static and animated bitmap images.

HEIGHT HEIGHT="pixels", specifies the image height in pixels. This attribute is REQUIRED by the HTMLCompiler -- an error will be generated if it is missing.
NOTE: The HTMLCompiler will not scale the image if the actual image dimensions differ from those specified with the HEIGHT and WIDTH attributes.
TIP: You may stretch a 1x1 GIF image by specifying different WIDTH and HEIGHT attributes to effectively nudge the surrounding elements a few pixels down, or to the right. The HTMLCompiler recognizes this as a <SPACER> and does not store the image in the FLASH ROM file, however it is taken into consideration during the layout of the elements on the screen.

SRC SRC="filename", where "filename" is the name of the image file. Only files with a .gif or .jpg extension are allowed by the HTMLCompiler. Remember to include the relative path to the file if it resides in a directory different from the current page. NOTE: The HTMLCompiler assumes that all filenames are relative the directory of the current page.

USEMAP USEMAP="name" identifies the image as a client-side image map and specifies the "name" of the <MAP> that defines the clickable regions and actions.

WIDTH WIDTH="pixels", specifies the image width in pixels. This attribute is REQUIRED by the HTMLCompiler -- an error will be generated if it is missing.
NOTE: The HTMLCompiler will not scale the image if the actual image dimensions differ from those specified with the HEIGHT and WIDTH attributes.
TIP: You may stretch a 1x1 GIF image by specifying different WIDTH and HEIGHT attributes to effectively nudge the surrounding elements a few pixels down, or to the right. The HTMLCompiler recognizes this as a <SPACER> and does not store the image in the FLASH ROM file, however it is taken into consideration during the layout of the elements on the screen.

NAME
NAME="name", specifies the internal name of the Image/Animated Image object. Used for Inter-Widget Communication only.

INVISIBLE
INVISIBLE="True|False", specifies if the Animated Image is to start out invisible or not. If the attribute is not present, then by default the Animated Image is visible. If the Animated Image starts out invisible, the only way to make it visible again is via the IWC method "reappear()". This attribute is only applicable for Animated Images, not static Images.

INITIALCONDITION
INITIALCONDITION="Play|Pause", specifies the initial condition of the Animated Image when the page is loaded; Play specifies the Animated Image starts out animated, Pause specifies the Animated Image starts out paused. This attribute is only applicable for Animated Images, not static Images.

<INS> Logical equivalent to <U>. Displays text with a solid underline.

<MAP> Used to mark and name a collection of <AREA> tags so that they can be referenced via the USEMAP attribute of the <IMG> tag -- for implementing a client side image map.

NAME NAME="name" assigns a unique name to the image map so that it may be linked to an image with <IMG USEMAP="name">. NOTE: The name is case sensitive, so the name "ImageMap1" is not the same as "imagemap1".

<META> This tag appears only in the head of the document (between <HEAD>...</HEAD>) to describe the contents of the HTML document. Most of the META constructs, though, are intended for use by Internet search engines, and therefore are not applicable to the creation of embedded GUI's. There is only one standard META construct that is supported -- the document REFRESH construct. In addition, Amulet has also defined a new META construct for the purpose of specifying non-visible attributes that are necessary for the HTMLCompiler.

HTTP-EQUIV <META HTTP-EQUIV="REFRESH" CONTENT="see Objects document"> -- This meta tag forces the browser to trigger a hypertext link after a specified number of seconds. Amulet has extended this meta tag so its functionality is the same as the <A> tag. REFRESH must be all uppercase. CONTENT fields are described in Objects document:

NAME <META NAME="Amulet" CONTENT="baud=number;timeOut=time;draw=type;transition=type;touch"> -- This Amulet specific META tag specifies (1) The baudrate for communication to a serially-connected device, (2) Time to start displaying the onscreen buffer, (3) When to start displaying the onscreen buffer, (4) The type of screen transition, (5) the communication time-out and (9) if the current page is a touch-screen calibration page. Notice the strange syntax with all of the semi-colon delimited fields enclosed within one set of quotes. Also, the name attribute is case sensitive: Amulet. CONTENT fields are described below:

baud= The baudrate is specified in bits-per-second with one of the following integer values: 9600, 19200, 57600, or 115200. Default is 115200.

timeOut= The amount of time, in seconds, the Amulet waits for a response after sending a message. If there is no response in that time, the Amulet times out and sends the next message in line. Valid range is 0.02-2.55 seconds, in .01 increments. Default is 0.2 (200ms)

draw= draw=BufferFull | Instant -- default = Instant. BufferFull means that the screen goes blank until the next screen is completely rendered to an offscreen buffer. Instant means that the new screen is rendered to the actively displayed buffer. BufferFull is best for slide shows that are created with the REFRESH META tag above. Most user-triggered transitions look best as Instant transitions.

transition= transition=GrayLCD | NoClearLCD | ClearLCD -- default = ClearLCD. GrayLCD means that upon loading the page, gray out the previous page. Can be used if a "pop-up" warning message is desired. NoClearLCD means that upon loading the page, leave the images from the previous page. ClearLCD means that upon loading the page, clear the previous page before drawing this page.

slaveAckRsp
Configures the Amulet to respond with an ACK (0xF0) when sent a "Set" or "Draw" command.

slaveNoRsp
Configures the Amulet to send no response when sent a "Set" or "Draw" command.

UARTDelay
Configures the Amulet to delay a minimum of 2ms between every byte that is transmitted.

nullTerminate
Configures the Amulet to attach a null (0x00) character at the end of every transmission, not just strings.

BasicStamp
Configures the Amulet to delay a minimum of 2ms between every byte that is transmitted AND to attach a null (0x00) character at the end of every transmission.

touch Usually this attribute is omitted. However it must be included on the first touch screen calibration page which contains the first touch target. It must NOT be included on any other page.

NAME <META NAME="initCommands" SRC="filename"> -- This Amulet specific META tag specifies the include file used to initialize the command opcodes the Amulet OS uses for its Amulet Serial Protocol. Should only be specified in the main html page. Only one initialization per project is allowed. The file specified by filename must be located in the same directory as the main html page to be compiled. See documentation for initializing the command opcodes.

NAME <META NAME="initInternalRAM" SRC="filename"> -- This Amulet specific META tag specifies the include file used to initialize the Internal RAM variables. Should only be specified in the main html page. Only one initialization per project is allowed. The file specified by filename must be located in the same directory as the main html page to be compiled. See documentation for initializing the InternalRAM variables.

<P> Marks individual paragraphs. Paragraphs are separated by two line breaks and can each have unique alignment properties.

ALIGN For aligning all the text and objects of the given paragraph to the LEFT, CENTER, or RIGHT (default is LEFT). ALIGN="LEFT | CENTER | RIGHT"

<PARAM> Used to provide arguments to an Amulet Widget. Only allowed between <APPLET>...</APPLET>

NAME NAME=”text” is used to specify the parameter name, which is defined by the widget. Each widget has its own set of parameter names. NOTE: All widget parameter names are case sensitive.

VALUE VALUE="number|text" assigns a value to the parameter identified with the NAME attribute. Depending on the parameter, the value can be numeric or textual. See Widgets.htm for more information.

<S> (Identical to <STRIKE>, and same visual effect as the logical <DEL> tag) -- Strikes out text by displaying it with a line through it.

<SMALL> Makes text one size smaller than the surrounding text. Similar to <FONT SIZE="-1">, except that nested <SMALL> tags have a cumulative effect. So, <SMALL><SMALL> ... </SMALL></SMALL> would yield text that is two sizes smaller than the surrounding text.

<SPACER> (Also known as "pixel-shimming".) Inserts a horizontal or vertical space, specified in units of pixels. This tag is rarely supported by visual authoring tools or internet browsers, but it is very useful for (1) creating custom line spacing between paragraphs (2) creating custom indents, or (3) nudging content down, or to the right by a specific number of pixels.

SIZE SIZE="n", where n is the amount of space, in pixels.

TYPE TYPE="vertical | horizontal". A vertical spacer creates an automatic line-break with the line height specified in the SIZE attribute, and the line width=100% of the window or table cell. A horizontal spacer will have the width specified in the SIZE attribute, but it will assume the height of the current line.

<STRIKE> (Identical to <S>, and same visual effect as the logical <DEL> tag ) -- Strikes out text by displaying it with a line through it.

<STRONG> Logical equivalent to <B>. Marks text for displaying in boldface.

<TABLE> Creates a table for precise positioning of text, images, and widgets. Every page must be contained within at least one table cell. Currently, the HTMLCompiler determines the pixel dimensions of the LCD from the WIDTH and HEIGHT attributes of the outermost table in the HTML document. For this reason, all table dimensions MUST be specified -- an error will be generated if WIDTH or HEIGHT is missing! In addition, the dimensions must be specified in pixels -- percent is NOT allowed and will also generate an error. No borders, or background colors/patterns are drawn, the cell borders are transparent and only used as an aid in layout.

BACKGROUND BACKGROUND="filename", where "filename" is the name of the image file. Only files with a .gif or .jpg extension are allowed by the HTMLCompiler. Currently, background images are not tiled or clipped if their dimensions are not the same as the table they reside in. Remember to include the relative path to the file if it resides in a directory different from the current page. NOTE: The HTMLCompiler assumes that all filenames are relative the directory of the current page.

HEIGHT HEIGHT="pixels" specifies the number of pixels occupied by the table in the vertical direction (top-to-bottom).

WIDTH WIDTH="pixels" specifies the number of pixels occupied by the table in the horizontal direction (left-to-right).

<TD> Creates a display CELL for positioning text, images, and Widgets. Each cell may span several columns and rows. In addition, horizontal and vertical alignment specs will apply only to the contents of the cell. The Amulet HTMLCompiler REQUIRES that all row and column width dimensions be specified -- this is done in the <TD> tag. The row and column height dimensions are optional.

ALIGN ALIGN="LEFT|CENTER|RIGHT" -- Specifies the horizontal text alignment in the cell. The default is LEFT.

BACKGROUND BACKGROUND="filename", where "filename" is the name of the image file. Only files with a .gif or .jpg extension are allowed by the HTMLCompiler. Currently, background images are not tiled or clipped if their dimensions are not the same as the cell they reside in. Remember to include the relative path to the file if it resides in a directory different from the current page. NOTE: The HTMLCompiler assumes that all filenames are relative the directory of the current page.

COLSPAN COLSPAN="n", where n is the number of table columns occupied by the cell. The second row of the 3x3 table below only has two <TD> cells. The first <TD> spans only one column, while the second <TD>, shown in silver, spans the remaining two columns.

COLSPAN=2

HEIGHT HEIGHT="pixels" specifies the number of pixels occupied by the cell in the vertical direction (top to bottom). Optionally, may be specified in percent of the total table height -- HEIGHT="n%".

NOWRAP Indicates that the content of the current cell should not be wrapped. The HTMLCompiler will truncate any line that exceeds the cell width. Internet browsers usually extend the table to fit the text on a single line.

ROWSPAN ROWSPAN="n", where n is the number of table rows occupied by the cell. The 3x3 table below illustrates the concept of both ROWSPAN and COLSPAN. The cell shown in silver spans two columns and two rows.

COLSPAN=2, ROWSPAN = 2

VALIGN VALIGN="TOP|MIDDLE|BOTTOM" -- Specifies the vertical text alignment in the cell. The default is MIDDLE. The following example illustrates the three VALIGN methods:

Text aligned to the TOP of the cell. Text aligned to the MIDDLE of the cell. Text aligned to the BOTTOM of the cell

WIDTH WIDTH="pixels" specifies the number of pixels occupied by the cell in the horizontal direction (left to right). Optionally, may be specified in percent of the total table width -- WIDTH="n%".

<TITLE> Gives the page a title. Not used by Amulet, but tolerated. Windowed Internet browsers use the text marked by this tag to set the window title string.

<TR> Creates a new table row to hold <TD> cells.

<U> Displays text with a solid underline (Same visual effect as the logical <INS> tag).

Back to Welcome - Contact Amulet - Amulet Home