NORITAKE ITRON

Styles

Description

Styles enable you to maintain a common theme throughout your application and reduce the number of parameters required to be passed in the Page, text, draw, image and key commands. A style is only used during the creation of an entity. When updating a text or an image, the style is omitted from the command.

Options

Updating
Style parameters can be updated using the dot operator except sizes and watchdog values.
LOAD(ADC1.calib1,0.75);
changes the calibration value for the analogue input ADC1.

Inherited Styles - 47.24
Style inheritance using previously defined style
> style(styleA,text){...}
> style(styleB,styleA){...} <- firstly copy style from styleA then apply new style parameters

Style with Floats - v49.02
Style parameters now except floats (rather than throwing an error).
Floats are rounded to ints where applicable.

Centre/Center - v49.16
Added support for accepting both "centre" and "center" in parameters.

STYLE Handling Improvements - v49.37
* Maximum style parameter value length now 128 chars (was 64).
* Maximum number of settable params in one STYLE() command is now 17 (was 16).
* Improved style creation algorithm.

Colours of "none" or "transparent" - v49.37
* The value of "none" or "transparent" can now be used for all colours in the styles.

Image Rotation (90 degree steps) in STYLE - v49.42
* Images can now be rotated using the style parameter:
STYLE(stImg,IMAGE){rotate=90;} and
LOAD(stImg.rotate,90);
* Supported angles: 0, 90, 180, 270. Image is rotated clockwise.
* Transparency is set with the back=colour property.

Image Scaling in STYLE - v49.42
* Images can now be scaled using the style parameter:
STYLE(stImg,IMAGE){scale=75;} and
LOAD(stImg.scale,75);
* Supported scaling in 1% steps.
* PNG Alpha Transparency is only supported with 100% scaled images.
* Transparency is set with the back=colour property.

Style switching LOAD(text.style,newstyle); - v49.46
* Added functionality to allow the style of an entity to be changed to another.
LOAD(entName.style,newStyle);

eg
STYLE(stText1,TEXT){ font=Ascii16; col=blue; back=dimgrey; }
STYLE(stText2,TEXT){ font=Ascii8; col=green; back=mistyrose; }
...
TEXT(txtTest,"This is a test",stText1);
...
LOAD(txtTest.style,stText2);;

* Works with STYLES: TEXT, DRAW, IMAGE, PAGE, KEY.

Built-In TEXT, PAGE, DRAW, and IMAGE Styles - v49.51
A larger range of "default" styles has been added.
The built-in styles are prefixed by four characters as follows:
* Text Styles are prefixed by "DST_"
* Page Styles are prefixed by "DSP_"
* Draw Styles are prefixed by "DSD_"
* Image Styles are prefixed by "DSI_"
The styles are not created at start up. The style is only created the first time it is referenced from the users' project.

The style are created from the parameters within the style name itself, ie the colour black is taken from the actual name DSP_BLACK, so DSP_PINK would create a colour pink. These colours are from the colour table on the website.

The only limitations to this method is that the style name needs to fit within the 18 character entity name limit.

Colours
Where the styles take a colour for a parameter, then the value can be represented in one of three ways.
* The name of the colour can be specified as in the colour chart on the website, eg BLACK, BLUE, GOLD etc
* A 6 digit hexadecimal number can be used, eg 123ABC which converts to \\123ABC
* A 3 digit hexadecimal number can be used, eg FD0 which converts to \\FFDD00

Fonts
Where the style takes a font for a parameter, then one of two options are assumed.
* If the value is either 8, 16, or 32 then the built-in fonts Ascii8, Ascii16 or Ascii32 are used
* Otherwise the value is assumed to be the name of a font loaded by the LIB command, eg fnt64 from LIB(fnt64,"SDHC/name.fnt");

The rules/examples for each can be found in the appropriate sections below

Built-In KEY Style - v49.52
Added built-in touch key style:
DSK_act_deb_del_rep_cur
Where
act = 'action'
deb = 'debounce' in milliseconds
del = 'delay' in milliseconds
rep = 'repeat' in milliseconds
cur = 'curRel'
Examples
KEY(key1,func,100,20,DSK_D_9_500_200_CC); // Create Key, action = down; debounce = 9; delay = 500; repeat = 200; curRel = CC
KEY(key2,func,100,100,DSK_C____TL); // Create Key, action = change; curRel = TL
Built-In Styles - Parameters Are Optional - v49.52
Modified "built-in" styles to make parameters optional. Simply miss out the parameter between the underscores.

TEXT(txt4,"",DST___128__CC); // Create Text with only maxLen and curRel changed from defaults
PAGE(pg3,DSP__libBg){...} // Create Page with only image changed from defaults;
DRAW(dr4,40,40,DSD_B__RED__BR); // Create Draw, type = box; only specifying some parameters
KEY(key2,func,100,100,DSK_C____TL); // Create Key, action = change; curRel = TL

VAR Data Styles - VAR(Name,Value,Style)

Description

Specify your own style for integer, float, pointer or text or use a built in style name.

Syntax/Parameters

STYLE(stVar, Data)
{
type = U8;     // U8, U16, U32 - unsigned 8, 16 and 32 bit integer
                     // S8, S16, S32 - signed 8, 16, 32 bit integer
                     // TEXT for text strings
                     // FLOAT for higher resolution calculation
                     // POINTER for use with images
length=64;    // For text, specify the length from 1 to 8192, default =32
decimal=3;    // Specify the number of decimal places when type is float. Range 0 to 7, default=2
format="dd mm YY";   //Specify RTC format. see RTC page for format character types
location=SDRAM;        //Specify the data location as SDRAM (default) or EEPROM
}

Options

Built In Styles (Add E for EEPROM types Example FLT4E)
The following pre defined 'built in' style names are available
U8/U8E - type = U8, U16/U16E - type = U16, U32/U32E - type = U32
S8/S8E - type = S8, S16/S16E - type = S16, S32/S32E - type = S32
PTR/PTRE - type = pointer, TXT/TXTE - type = TEXT, length=32
FLT1/FLT1E - type = float, decimal = 1, FLT2/FLT2E - type = float, decimal = 2
FLT3/FLT3E - type = float, decimal = 3, FLT4/FLT4E - type = float, decimal = 4

Read-Only VARs (Constants) - v49.32
Variables can be designated read-only (constants) by specifying readonly=y; in the data style:
> STYLE(U8C,data){type=u8;readonly=y;}
A system error will occur if modification to a read-only variable is requested.
Checking is performed in LOAD(), VAR() and CALC() commands only.

Built-in "Constant" styles created:
U8C, U16C, U32C, S8C, S16C, S32C, PTRC, FLT1C, FLT2C, FLT3C, FLT4C, TXT4C, TXT16C, TXTC, TXT64C, TXT128C.

Extra Built-In Data Styles TXT and FLT - v49.51
* Added TXTn, TXTnE and TXTnC data styles of type text where n is the maxLen value allocated for the data between 1 and 8192. If the name ends in an 'E' then it stored in EEPROM. If the name ends in 'C' then it is a constant (ie read-only). Examples TXT42, TXT27E, TXT32C.
* Added FLTn, FLTnE and FLTnC data styles of type float where n is the number of displayed decimal places between 0 and 17. If the name ends in an 'E' then it stored in EEPROM. If the name ends in 'C' then it is a constant (ie read-only). Examples FLT5, FLT7E, FLT4C.

VAR(v1,"",TXT1);
STYLE(TXT1,DATA){type=text;maxLen=1;}
VAR(v2,"",TXT8192);
STYLE(TXT8192,DATA){type=text;maxLen=8192;}

VAR(v4,"",TXT128C);
STYLE(TXT128C,DATA){type=text;maxLen=128;readonly=y;}

VAR(v5,"",TXT48E);
STYLE(TXT48E,DATA){type=text;maxLen=48;locate=eeprom;}

VAR(v6,3.141,FLT7);
STYLE(FLT7,DATA){type=float;decimal=7;}

VAR(v7,1.23,FLT8C);
STYLE(FLT8C,DATA){type=float;decimal=8;readonly=y;}

VAR(v8,2.34,FLT12E);
STYLE(FLT12E,DATA){type=float;decimal=12;locate=eeprom;}

Page Styles - PAGE(Name,Style) {…….}

Description

The style defines the page size, position and background.

Syntax/Parameters

STYLE(stPage,Page) //create a style name and define as type Page
{
sizeX=480;        //specify width of page 1 to 3* LCD width
sizeY=272;        //specify height of page 1 to 3* LCD height
posX=0;            //specify the absolute X position of page on screen. -4 * LCD width to 4 * LCD width
posY=0;            //specify the absolute Y position of page on screen. -4 * LCD height to 4 * LCD height
back=black;       //specify background colour of page as hex \\000000 to \\FFFFFF or colour name
image=pageimg; //specify background image of page as SDHC path or entity name using LIB.
}

Options

Pop-Up Pages - v49.03
Page style parameter "type=popUp;" or "type=p;" added to define a page as a pop-up.
Default is "type=normal;" or "type=n;" for non-pop-up page.
This allows pages the same size as the screen to be defined as a pop-up.
Pages smaller than the screen size will still always be declared as pop-ups; the "type" parameter is ignored in this case.

Built-In PAGE Styles - v49.51
Add a default PAGE style
DSP_
DSP_col
DSP_col_img
DSP_col_img_cur
Where
col = 'col' name or 3-digit hex or 6-digit hex (see "Colours" below)
img = 'image' image name
Examples
PAGE(pg1,DSP_BLACK){…} // Create Page, back = black;
PAGE(pg2,DSP_AB0056_libBg){…} // Create Page, back = \\AB0056, image = libBg;

Text Styles - TEXT(Name,Text,Style)

Description

Fonts are available using single byte, 2 byte and UTF8 multi-byte coding.
Built in ASCII fonts have the reserved names Ascii8, Ascii16, Ascii32 (case sensitive).
Other library fonts are uploaded using the LIB command and have file type .FNT
These are available for download from the character fonts web page at www.itrontft.com.

Syntax/Parameters

STYLE(Txt32ASC16,TEXT) //assign a name for the style like Txt32ASC16
{
font="ASC16B,16THAI";    //define fonts using built in or preloaded .FNT files via LIB command
size=2;             //a 24x24 font is expanded to a 48x48 font. default=1
col=white;         //“\\000000” to “\\FFFFFF” or reserved words from the colour chart.
maxLen=64;     //maximum length of text. default =32, maximum=512
maxRows=4;    //maximum number of rows=32 where new line code \\0D\\0A is used.
rotate=90;        //rotation relative to screen 0, 90, 180, 270. default=0
curRel=CC;      //specify placement relative to cursor. CC Centre Centre , TC Top Centre,
}                     //BC Bottom Centre, LC Left Centre, RC Right Centre, TL Top Left,
                        //BL Bottom Left, TR Top Right, BR Bottom Right

Options

Unique Font Overlay
It is possible to overlay one font over another to enable single byte operation with ASCII from 20H to 7FH and Cyrillic, Greek, Hebrew, Bengali, Tamil, Thai or Katakana from 80H to FFH. The LIB command is used to load the extended font at 0080H instead of it's normal UNICODE location. The style for a text can then specify font="MyASCII,MyThai"; causing the Thai to overlap the ASCII from 80H to FFH.

Text Alignment - v49.00
To support "monospaced" fonts (ie those that have the same x-advance), the text style parameter xtrim=Y|N has been added.
The default is Y which makes text boxes fit to the width of the visible text. However, for monospaced fonts (eg numbers) this can cause problems with the numbers 'shifting' left and right (eg number 1 is narrower than 2). To stop this, set xtrim=N;

Opacity - v49.00
Added opacity to text.
   STYLE( st, text )
   {   ...
   opacity = n; // n = 0..100 where 0=transparent..100=opaque (default=100)
   ...   }
   LOAD( st.opacity, num ); // Dot operator also supported.

Text justification - v49.14
Added text justification style property for displaying multiple lines in text box:
   justify = left; (or L) // Justify left (default)
   justify = right; (or R) // Justify right
   justify = centre; (or C) // Justify centre
Example1: STYLE( stText, text ) { font=Ascii16; col=blue; justify=right; }
Example2: LOAD( stText.justify, centre );

Built-In TEXT styles- v49.51
DST_
DST_col
DST_col_fnt
DST_col_fnt_len
DST_col_fnt_len_row
DST_col_fnt_len_row_cur
Where
col = 'col' name or 3-digit hex or 6-digit hex (see "Colours" below)
fnt = 'font' 8, 16, 32 for Ascii8, Ascii16, Ascii32 or font name (see "Fonts" below)
len = 'maxLen'
row = 'maxRows'
cur = 'curRel'
Examples
TEXT(txt1,"Hello",DST_BLACK_16); // Create Text, colour = black; font = built-in Ascii16;
TEXT(txt2,"",DST_F30_fnt32_8_4); // Create Text, colour = \\FF3300, font = fnt32; maxLen = 8; maxRows = 4
TEXT(txt3,"",DST_RED_F32_8_4_TL); // Create Text, colour = \\FF3300, font = F32; maxLen = 12; maxRows = 4; curRel = TL

Draw Styles - DRAW(Name,X,Y,Style)

Description

Draw or update a Line, Box or Circle of size X,Y or Pixel at X,Y. The entities can be an outline or filled.

Syntax/Parameters

STYLE(stCircleRed,DRAW)
{
type=B;           //Specify the type of shape to draw. type = B or Box , C or Circle, L or Line, G or Graph
col=red;           //Specify the border colour of the shape. Use hex, colour name + alpha
back=\\00FF66; //Specify the fill colour of the shape. Use hex, colour name + alpha
maxX=160;      //Declare the maximum width allowing for rotation
maxY=40;        //Declare the maximum height allowing for rotation
rotate=0;         //Specify the rotation of the shape with respect to the screen. 0,90,180,270
curRel=CC;      //specify placement relative to cursor. CC Centre Centre , TC Top Centre
}                     //BC Bottom Centre, LC Left Centre, RC Right Centre, TL Top Left,
                       // BL Bottom Left, TR Top Right, BR Bottom Right

Options

Alpha blending
It is possible to specify transparency values with colours if the colour is entered as a 32-bit hex number the top 8 bits specify the alpha blending level.
col = \\aarrggbb; back = \\aarrggbb; where aa = alpha level.
For example, col = \\80FFFF00; gives 50% transparent yellow.

Graphs - 47.00
A number of graph styles now exist as draw types:
type=p; type=pixel; // Pixel Scatter - places a point at x,y
type=t; type=trace; // Trace/Line - joins the dots between current point and previous point.
type=y; type=yBar; // Bar Y - draws vertical line from 0 to y and clears from y+1 to ymax
type=x; type=xBar; // Bar X - draws horizontal line from 0 to x and clears from x+1 to xmax
The origin on the graph can be changed
xOrigin=val; // (default=0)
yOrigin=val; // (default=0)
The scaling of pixels can be set:
xScale=val; // (default=100.0) [val can be float and is a percentage]
yScale=val; // (default=100.0) [val can be float and is a percentage]
Note to draw graph with 0,0 at top and n,n at bottom, use yScale=-100;

The graph can be made to scroll (currently right-to-left only supported)
xScroll=val; // where val=0 (default - no scroll); val=n (scroll left n pixels before each plot
   STYLE(gstyle,DRAW) {
   type=trace;
   maxX=100;
   maxY=100;
   col=green;
   back=black;
   width=3;
   curRel=cc;
   xOrigin=50;
   yOrigin=50;
   xScale=200;
   yScale=200;
   xScroll=1;
   }

Opacity - v49.00
Added opacity to drawing objects.
   STYLE( st, draw)
   {   ...
   opacity = n; // n = 0..100 where 0=transparent..100=opaque (default=100)
   ...   }
   LOAD( st.opacity, num ); // Dot operator also supported.

Built-In DRAW styles- v49.51
DSD_
DSD_typ
DSD_typ_wid
DSD_typ_wid_col
DSD_typ_wid_col_fil
DSD_typ_wid_col_fil_cur
Where
typ = 'type' of shape (best to use the single letter here)
wid = 'width' of border
col = 'col' colour of border (see "Colours" below)
fil = 'back' colour of fill (see "Colours" below)
cur = 'curRel'
Examples
DRAW(dr1,100,20,DSD_BOX); // Create Draw, type = box;
DRAW(dr2,120,DSD_C_2_RED); // Create Draw, type = circle; width = 2; border colour = red;
DRAW(dr3,60,40,DSD_B_1_RED_FD0_TL,20,40); // Create Draw, type = box; width = 1; border = red; back = \\FFDD00; curRel = TL;

Image Styles - IMG(Name,Source,Style)

Description

The image may be larger than the size specified so it is necessary to define how it will be scaled.

Syntax/Parameters

STYLE(MyImage,Image)
{
scale=100;     //The image is scaled down or up by a percentage.
                      //Supports 5% steps below 100 and 100% steps above 100.
maxX=160;    //Declare the maximum width allowing for rotation
maxY=40;      //Declare the maximum height allowing for rotation
rotate=0;       //Specify the rotation of the shape with respect to the screen. 0,90,180,270
curRel=CC;    //specify placement relative to cursor. CC Centre Centre , TC Top Centre,
                      //BC Bottom Centre, LC Left Centre,RC Right Centre, TL Top Left,
                      //BL Bottom Left, TR Top Right, BR Bottom Right
}

Options

Image Action - 47.12
The way in which an image is displayed can be changed for slideshows.
   STYLE(imgSt,Image){ action=type; step=pixels; }
> action type options are:
- i or instant = Instant (default);
- u or up = Move Up;
- d or down = Move Down;
- l or left = Move Left;
- r or right = Move Right;
- ur or ru or upright = Move Diagonal Up-Right
- dr or rd or downright = Move Diagonal Down-Right
- ul or lu or upleft = Move Diagonal Up-Left
- dl or ld or downleft = Move Diagonal Down-Left
- a or all = Sequence through all (except instant);
> step pixels defaults to 20 pixels (value 1 to minimum of lcd width or lcd height)

Opacity - v49.00
Added opacity to images.
   STYLE( st, image)
   {
   ...
   opacity = n; // n = 0..100 where 0=transparent..100=opaque (default=100)
   ...
   }
   LOAD( st.opacity, num ); // Dot operator also supported.
Restrictions: Not supported for library images with bits=16.

Built-In IMG styles- v49.51
DSI_
DSI_cur
Where
cur = 'curRel'
Examples
IMG(img1,libImg1,DSI_TL); // Create Image, curRel = TL;

Key Styles - KEY(Name,Function,X,Y,Style)

Description

Specify the source of key data. Touch keys are dependent on certain SYSTEM parameters.
If you require a dual action, specify 2 keys at the same location, one with action D and one with U.

Syntax/Parameters

STYLE(myTouch,key)
{
type=touch;      //specify 'touch' screen or external 'keyio'
debounce=250; //Specify the time delay to allow a key press to stabilise. Value in milliseconds.
delay=1000;     //Specify the time delay before auto repeat occurs. Value in milliseconds. 0=off.
repeat=500;     //Specify the repeat period if the key is held down. Value in milliseconds
action = D;       // Specify D or Down and U or Up. Specify the up or down action for the key.
curRel=CC;      //specify touch key placement relative to cursor. CC Centre Centre,
}                     //BC Bottom Centre, LC Left Centre, RC Right Centre, TL Top Left,
                        // BL Bottom Left, TR Top Right, BR Bottom Right, TC Top Centre.

Options

KEY style event handler - v49.27
Added an additional parameter to the key style. evfunc allows a function to be called when any key using that style is pressed.
This function is run before the function specified in the KEY entity.
A typical use for this would be to provide a method to add a key beep.

   STYLE(myTouch,key)
   {
   .
   evfunc = fncBeep;
   .
   }

   FUNC(fncBeep)
   {
   LOAD(BUZZ, 100);
   }

Built-In KEY Style - v49.52
Added built-in touch key style:
DSK_act_deb_del_rep_cur
Where
act = 'action'
deb = 'debounce' in milliseconds
del = 'delay' in milliseconds
rep = 'repeat' in milliseconds
cur = 'curRel'
Examples
KEY(key1,func,100,20,DSK_D_9_500_200_CC); // Create Key, action = down; debounce = 9; delay = 500; repeat = 200; curRel = CC
KEY(key2,func,100,100,DSK_C____TL); // Create Key, action = change; curRel = TL

ITRON (U.K.) Limited

Useful Links

For Customers

Internal Links

Our Social Networks