Mobile Widgets

draw text

Introduction
Draw simple text
Automatic fit text
Font style
Rich text
Advanced text component
Create personal font

Introduction

Shape node is used to draw a text.
Use geometry field of Shape node with values:

Draw simple text

Draw a simple text with Text node.

Text {
  MFString string []
  SFNode fontStyle NULL
}

string define the text (array of SFString).
fontStyle define the font style (size, style,... See FontStyle node)

Note:
Use internationalization functions for all text.

Example, display "Hello world" text:

Group {
  children [
    Shape {
      appearance  Appearance {
        material Material2D { emissiveColor 0 0 0 }
      }
      geometry Text { string ["Hello world"] }
    }
  ]
}

We can draw a multi line text with Text node.
Replace "geometry Text { string ["Hello world"] }" by "geometry Text { string ["Hello world" "Line 2" "Line3"] }".

But a long text is not fully visible.
For example, replace text node by "Text { string ["too long string. End of text is not visible."]".
Too long text

Automatic fit text

Text node is easy to use, but, it is restricted.
We can use WrapText node to advanced features.
WrapText node display text using automatic wrap to fit in maxWidth pixels width and using a maximum of maxLines lines of text.

WrapText node interface:

WrapText {
  MFString string []
  SFNode fontStyle NULL
  SFVec2f size_changed 0 0
  SFInt32 maxWidth 0
  SFInt32 maxLines 0
  SFVec2f maxSize 0 0
  SFBool editable FALSE
  SFInt32 set_cursor 0
  SFInt32 cursor_changed 0
}

See WrapText node documentation for more information about fields.

We can display previous text with the WrapText node.

Group {
  children [
    Shape {
      appearance  Appearance {
        material Material2D { emissiveColor 0 0 0 }
      }
      geometry WrapText {
        string ["too long string. End of text is not visible."]
        maxWidth 62
        maxLines 3
      }
    }
  ]
}

Font style

We can define the font style for Text node and WrapText node via the fontStyle field.
FontStyle node interface:

FontStyle {
  SFFloat size 12
  SFString style ""
  MFString justify ["LEFT" "TOP"]
  MFString family ["SYSTEM"]
}

See FontStyle node documentation for more information about fields.

Example of FontStyle node:

Group {
  children [
    Shape {
      appearance  Appearance {
        material Material2D { emissiveColor 0 0 0 }
      }
      geometry Text {
        string [ "Example of text"]
        fontStyle FontStyle {
          size size 16
          style "italic"
          justify ["MIDDLE" "MIDDLE"]
          family ["SANS"]
        }
      }
    }
  ]
}

Text alignment examples (justify field):
Too long text

Text style examples (style field):
Too long text

Text size examples (size field):
Too long text

Text font examples (family field):
Too long text

Rich text

RichText node is a XHTML renderer (with CSS support).
We can display complex document (style, color, picture, ...).
See RichText node documentation for more information about this node.

Example of RichText node :
Too long text

Source code:

Group {
  children [
    Shape {
      appearance  Appearance {
        material Material2D { emissiveColor 0 0 0 }
      }
      geometry RichText {
        size 128 100
        style "h1 { text-align:center; color: red } h2 {color: blue}"
        string [
          "<html>"
          "<body>"
          "    <h1>RichText example</h1><br/>"
          "    <h2>XHTM and CSS renderer node.</h2><br/>"
          "    <b>Bold, </b> <i>Italic, </i>...<br/>"
          "    Image: <img src=\"http://i5.woopic.com/I/Header/loupe.gif\" />"
          "</body>"
          "</html>"
        ]
      }
    }
  ]
}

We use style field to define CSS style.
We use string field to define document (XHTML).

Advanced text component

Mobile Widgets implement text components (via prototypes).

Note:
Prototypes can change between Mobile Widgets and Tiny Mobile Widgets versions.

TextField prototype

TextField prototype interface:

TextField {
  MFString inputTEXT
  MFString outputTEXT
  SFBool lockMode FALSE
  SFInt32 mode 0
  SFInt32 displayMODE 2
  SFInt32 maxChar 40
  SFInt32 numberOfLines 1                                      
  SFBool displayTEXT TRUE
  SFBool isActiveTF TRUE
  SFColor textColor 0 0 0
  SFNode textFont FontStyle { size 12 justify ["LEFT" "TOP"] }
  ...
}

inputTEXT: permit to modify text displayed in Text Field
outputTEXT: event generated each time text of Text field is modified
lockMode: if TRUE, user can not change mode
mode: key selection of mode
0 : abc lower case mode
1 : ABC upper case mode
2 : 123 numeric mode
3 : 0.2 decimal mode / lockMode off, displayMode off, '*' to delete and '#' to put the decimal point '.'
displayMODE: display key selection mode
0 : not displayed
1 : always displayed
2 : displays 1 seconds and disappear
maxChar: max number of characters, 0 for unlimited
numberOfLines: set the number of line, 1 line by default
<= 0 for auto-adaptative according to textLayerSize
> 1 to fix the number of lines
displayTEXT: true : text is displayed / false : password mode, only stars '*' are displayed
isActiveTF: enable/disable Text field proto; if true : cursor is flashing and typing is authorized
textColor: main text color
textFont: main text font node, when using multiline, only use "TOP" "LEFT"
And other attributes (see TextField prototype documentation).

Example with TextField prototype:
TextField example

EXTERNPROTO TextField [] "TextField.wrl"

Group {
  children [
    Shape {
      appearance  Appearance {
        material Material2D { emissiveColor 1 1 1 }
      }
      geometry Rectangle {
        size 256 256
      }
    }
    
    DEF TEXT_INPUT TextField {
      maxChar 60
      textLayerSize 100 24

      borderChoice 0
      borderCornerRadius TRUE

      backgndChoice 0
      backgndFrameColor 0.8 0.9 0.9

      isActiveTF TRUE
    }
  ]
}

ScrollableText prototype

ScrollableText prototype interface:

ScrollableText {
  MFString title []
  MFString images []
  MFString content []
  MFString style ["ScrollableText"]  
  MFString contentStyle ["ScrollableText-content"]
  MFString titleStyle ["ScrollableText-title"]
  SFVec2f size -1 -1
  SFVec2f textScale 1 1
  SFInt32 titleMaxLines 5
  SFInt32 contentMaxLines 30
  SFBool enable TRUE
}

See ScrollableText prototype documentation.

Create personal font

To create font, use fontExtractor utility (present in SDK folder, /tools/compiler/win for Windows, /tools/compiler/lin for Linux and /tools/compiler/mac for Mac).
usage:

fontExtractor [-d] fontname fontsize mapname charList

-d: dump metrics
fontname: Font name (require font file)
fontsize: Size of font
mapname: Map file name (name for png and desc file)
charList: List of extracted characters

Example:

fontExtractor times.ttf 16 times16 abcdefABCDEF123

The TFD file (textual font description) describe the font mapping.
Format:

x y : Max size of characters
nb : Number of characters
Characters list:
c :ASCII code
x y : top left corner position
w h : Character size (width / height)
d1 : Delta to draw character
d2 : Delta to draw next character

example:

# textual font description
14 14
19
32 126 0 14 14 0 14
49 0 0   14 14 0 14
50 14 0  14 14 0 14
51 28 0  14 14 0 14
52 42 0  14 14 0 14
53 56 0  14 14 0 14
54 70 0  14 14 0 14
55 84 0  14 14 0 14
56 98 0  14 14 0 14
57 112 0 14 14 0 14
65 0 14   14 14 0 14
66 14 14  14 14 0 14
67 28 14  14 14 0 14
68 42 14  14 14 0 14
69 56 14  14 14 0 14
70 70 14  14 14 0 14
71 84 14  14 14 0 14
72 98 14  14 14 0 14
73 112 14 14 14 0 14

To use the personal font, we use the =family= attribute of FontStyle node:

Group {
  children [
    Shape {
        appearance Appearance {
            material Material2D { emissiveColor 0 0 0 }
        }
        geometry Text {
            string "AZEaze"
            fontStyle FontStyle {
                family "times16"
                size 16
                justify ["MIDDLE" "MIDDLE"]
            }
        }
    }
  ]
}