Using HTML to create your projects at compile time allows you to make rich user interfaces quickly and easily. Sometimes, though, the ability to draw graphic primitives like lines, rectangles, filled rectangles and single pixels at runtime, is needed. Amulet's uHTML does not inherently give you the ability to do this.
With the addition of a new communications protocol that allows the external processor to be the master and the Amulet to be the slave comes a way to send unsolicited graphic primitives to the Amulet. The drawing of these graphic primitives is independent of the uHTML that is currently being run on the Amulet. You do need to keep in mind that the uHTML will still be running, so any widgets or objects that write to the LCD might write over the graphics primitive you send to the LCD.
By default, the Amulet will respond to all graphic primitive commands with a response opcode (0xE9-0xEC) and an echo of all other bytes. If it is desired to have the Amulet respond with an ACK(0xF0) or no response at all, a META tag using SlaveAckRsp or Slave NoRsp can be used on the home page of the project. One thing to keep in mind is that the Amulet will use that attribute for all "Set" or "Draw" commands coming from your external processor.
The line primitive draws a line from point 1(x and y coordinates) to point 2(x and y coordinates), that has a line weight of 1-15 and is one of 16 different patterns. The line primitive is drawn by sending out the "Draw line primitive" opcode(0xD9), followed by the x-coordinate of point 1, the y-coordinate of point 1, the x-coordinate of point 2, the y-coordinate of point 2, the line pattern and finally the line weight. The x and y coordinates are 16-bit numbers. The line pattern and line weight are both 4-bit numbers. Because Amulet uses an ASCII protocol, each coordinate that is sent to the Amulet is comprised of four different bytes. For example, if the x-coordinate of point 1 is 0x0020, the 4 bytes that would be sent to the Amulet for that particular coordinate would be 0x30,0x30,0x32,0x30. The line pattern and line weight, when sent to the Amulet, are one byte each. The line pattern byte specifies the desired line pattern. Sixteen different patterns are available, Figure 1. The line weight specifies the thickness of the line, range of 1-15. The entire line primitive message sent to the Amulet is a total of 19 bytes.
The rectangle primitive draws a rectangle with a given starting top left point(x and y coordinates) and a delta x and delta y, plus a line weight and line pattern. The rectangle primitive is drawn by sending out the "Draw rectangle primitive" opcode(0xDA), followed by the x-coordinate of the topleft point, the y-coordinate of the topleft point, the delta x, the delta y, the line pattern and finally the line weight. The x and y coordinates and the delta x and delta y are all 16-bit numbers. The line pattern and line weight are both 4-bit numbers. The delta x is a 16-bit number specifying the length of the rectangle in the x direction and the delta y is a 16-bit number specifying the height of the rectangle in the y direction. The line weight specifies the thickness of the line, range of 1-15. The line pattern specifies the desired line pattern. Sixteen different patterns are available, Figure 1.
The fill rectangle primitive draws a solid rectangle with a given starting top left point(x and y coordinates) and a delta x and delta y, plus a line weight and line pattern. The fill rectangle primitive is drawn by sending out the "Draw fill rectangle primitive" opcode(0xDB), followed by the x-coordinate of the topleft point, the y-coordinate of the topleft point, the delta x, the delta y, the fill pattern and finally the line weight. The x and y coordinates and the delta x and delta y are all 16-bit numbers. The delta x is a 16-bit number specifying the length of the rectangle in the x direction and the delta y is a 16-bit number specifying the height of the rectangle in the y direction. The fill pattern and line weight are both 4-bit numbers. The line weight is not used by this primitive, but the parameter still must be included, range of 1-15. The fill pattern specifies the desired fill pattern. Sixteen different patterns are available, Figure 1.
The pixel primitive draws a single pixel at a given point(x and y coordinates), plus a line weight and line pattern. The pixel primitive is drawn by sending out the "Draw rectangle primitive" opcode(0xDC), followed by the x-coordinate of the point, the y-coordinate of the point, the fill pattern and finally the line weight. The x and y coordinates are 16-bit numbers. The fill pattern and line weight are both 4-bit numbers. The line weight specifies the thickness of the pixel in the x direction, range of 1-15. Using a line weight of 2-15 will result in a horizontal line the length of the line weight, starting from a topleft point specified by the point x,y. The fill pattern specifies the desired fill pattern. Sixteen different patterns are available, Figure 1. When dealing with a single pixel, unexpected results can occur if using a pattern other than black(0) or white(15).
If a graphics primitive is sent that does not fit within the bounds of the given LCD (i.e. a delta x of 380 pixels on a 320 x 240 LCD) the Amulet will just ignore the request. It will respond back serially, but the graphic primitive will not be drawn.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Figure 1. Line, Rectangle and Fill Rectangle line/fill patterns (values 0 through 15).
To draw a line from (0x05,0x07) to (0x65,0x67), line weight of 4 and using line pattern 1(gray), the following would be sent to the Amulet:
0xD9,0x30,0x30,0x30,0x35,0x30,0x30,0x30,0x37,0x30,0x30,0x36,0x35,0x30,0x30,0x36,0x37,0x31,0x34
|
{-----------------} {-----------------} {-----------------} {-----------------}
| |
| pnt
1, x pnt 1,
y pnt
2, x pnt 2, y line
|
draw (0x05) (0x07) (0x65) (0x67) pattern
|
line line
opcode weight
(0x04)
To draw a rectangle that is 0x10C pixels wide, 0x82 pixels tall, has a topleft point at (0x0A,0x05), a line weight of 2 and using line pattern 0 (black), the following would be sent to the Amulet:
0xDA,0x30,0x30,0x30,0x41,0x30,0x30,0x30,0x35,0x30,0x31,0x30,0x43,0x30,0x30,0x38,0x32,0x30,0x32
|
{-----------------} {-----------------} {-----------------} {-----------------}
| |
| pnt
1, x pnt 1,
y delta
x delta y
line |
draw (0x0A) (0x05) (0x10C) (0x82) pattern
|
rectangle line
opcode weight
(0x02)
To draw a filled rectangle that is 0x140 pixels wide, 0xF0 pixels tall, has a topleft point at (0x00,0x00) and using fill pattern 15 (which equals to 0x0F in hex)(white), the following would be sent to the Amulet:
0xDB,0x30,0x30,0x30,0x30,0x30,0x30,0x30,0x30,0x30,0x31,0x34,0x30,0x30,0x30,0x46,0x30,0x46,0x31
|
{-----------------} {-----------------} {-----------------} {-----------------}
| |
| pnt
1, x pnt 1,
y delta
x delta y
fill |
draw (0x00) (0x00) (0x140) (0xF0) pattern
|
fill (0x0F)
line
rectangle weight
opcode
(N/A)
To draw a single pixel at point (0x32,0x54) and using fill pattern 0(black) , the following would be sent to the Amulet:
0xDC,0x30,0x30,0x33,0x32,0x30,0x30,0x35,0x34,0x30,0x31
|
{-----------------} {-----------------} | |
| pnt
1, x pnt 1,
y fill |
draw (0x32) (0x54) pattern
|
pixel (0x00)
line
opcode weight
(0x01)
