ScrollableText prototype for Tiny Mobile Widget

ScrollableText is composed of:

two layers to do the scroll
a title in the page: do not confuse with Title set by manager. Title can take some lines because it is a WrapText element
an image: under the title, is not mandatory
the text: under the image, can take some lines because its is a WrapText element
a scrollbar at right of the page: cursor or the slide

All these graphical elements constitutes the complete ScrollableText.

Scrolling can be activated /disabled using 'enabled' boolean

PROTO ScrollableText [
 exposedField MFString title "" 
 exposedField MFString content "" 
 exposedField MFString image "" 
 exposedField SFColor titleColor 1 0.4 0
 exposedField SFColor textColor 0 0 0
 exposedField SFVec2f size 128 100
 exposedField SFBool enabled FALSE
 exposedField SFBool rtl FALSE
]

Data Parameters

MFString title - Title set at top of the ScrollableText page (do not confuse with Title set by manager)
MFString content - Title set at end of the ScrollableText page
MFString image - Image displayed by ScrollableText between title and content

Style parameters

SFColor textColor - Text color
SFColor titleColor - Title color

Display parameters

SFVec2f size - Size of list and scrollableText pages
SFBool enabled - Enable/Disable user to scroll
SFBool rtl - Set text display from right to left (arabic)

#VRML V2.0 utf8
# File to test the scrollable text proto
# component used to display long text, may also display a picture with the text
EXTERNPROTO ScrollableText [] "ScrollableText.wrl"

DEF SIZE_CHANGED Message {
    url "MEMOPLAYER"
}

DEF EXIT Anchor {
    url "" parameter "self"
}

Shape {
    appearance Appearance {
        material Material2D {
            emissiveColor 1 1 1
        }
    } geometry DEF BG_REC Rectangle {
        size 128 128
    }
}

# the message to communicate with adapter scene
DEF MESSAGE Message {
    url "Board"
}

DEF TEXT ScrollableText {
    enabled TRUE #enable scroll or not
    size 128 100
    title ["Gérard de Nerval - Les Chimères"]
    image ["ebay.png"]
    content [
        "Je suis le Ténébreux, le Veuf, l'Inconsolé,
        Le prince d'Aquitaine à la tour abolie :
        Ma seule étoile est morte, et mon luth constellé
        Porte le soleil noir de la Mélancolie.
        
        Dans la nuit du tombeau, toi qui m'as consolé,
        Rends-moi le Pausilippe et la mer d'Italie,
        La fleur qui plaisait tant à mon coeur désolé,
        Et la treille où le pampre à la rose s'allie.
        
        Suis-je Amour ou Phébus ?... Lusignan ou Biron ?
        Mon front est rouge encore du baiser de la reine ;
        J'ai rêvé dans la grotte où nage la sirène...
        
        Et j'ai deux fois vainqueur traversé l'Achéron :
        Modulant tour à tour sur la lyre d'Orphée
        Les soupirs de la sainte et les cris de la fée."
    ]
}

Shape {
    appearance Appearance { 
        material Material2D { 
            emissiveColor 0 0 0 
            filled FALSE
        } 
    } geometry DEF BORDER_REC Rectangle {
        size 128 100 
    }
}

DEF SCRIPT Script {
    eventIn MFString data_changed
    eventIn MFString sizeHandler
    
    field SFNode exit USE EXIT
    field SFNode bgRec USE BG_REC
    field SFNode text USE TEXT
    field SFNode borderRec USE BORDER_REC
    field SFVec2f tmpSize -1 -1
    field SFString tmpImg ""
    
    url "javascript:
        function initialize() {
            tmpImg = text.image[0];
            Browser.sendMessage ('Board', 'INIT', 'Test ScrollableText', 'Without image', 'Quit');
            updateScreenSize();
        }
        
        function sizeHandler () {
            if (sizeHandler[0] == 'SIZE_CHANGED') {
                updateScreenSize ();
            }
        }
        
        function updateScreenSize () {
            if (Browser.getWidth() > 128) {
                bgRec.size.x = Browser.getIntCooky('widgetWidth');
                bgRec.size.y = Browser.getIntCooky('widgetHeight');
                tmpSize.x = bgRec.size.x * 0.8;
                tmpSize.y = bgRec.size.y * 0.8;
                text.size = tmpSize;
                borderRec.size = tmpSize;
            }
        }
        
        function data_changed (val, now) {
            Browser.print ('test ScrollableText: new message: ' + String.join (data_changed));
            if (data_changed[0] == 'RSK') {
                Browser.print('Right SK clicked at '+now);
                exit.activate = true;
            } else if (data_changed[0] == 'LSK') {
                if (String.length(text.image[0]) == 0) {
                    Browser.print('Display image');
                    text.image[0] = tmpImg;
                    Browser.sendMessage ('Board', 'INIT', 'Test ScrollableText', 'Without image', 'Quit');
                } else {
                    Browser.print('Do not display image');
                    text.image[0] = '';
                    Browser.sendMessage ('Board', 'INIT', 'Test ScrollableText', 'With image', 'Quit');
                }
            }
        }
    "
}
ROUTE TEXT.size TO BORDER_REC.size
ROUTE MESSAGE.data_changed TO SCRIPT.data_changed
ROUTE SIZE_CHANGED.data_changed TO SCRIPT.sizeHandler