Difference between revisions of "NexUI"

From Second Life Wiki
Jump to navigation Jump to search
m
 
Line 9: Line 9:


The User Interface Project is to create a UI that can be used in-world as well as on the HUD, providing pseudo-dynamic graphical feedback to the user(s).
The User Interface Project is to create a UI that can be used in-world as well as on the HUD, providing pseudo-dynamic graphical feedback to the user(s).
Update: Due to issues with high size due to compiled code being quite extensive due to number of helper functions stacking up as well complexity of functions generally, as well as for general ease-of-use, I will be re-designing the project into an API.


== Design, Components ==
== Design, Components ==
Line 27: Line 29:
|-
|-
| 3
| 3
| ''get'' values
|-
| 4
| ''set'' values, refresh graphics
| ''set'' values, refresh graphics
|-
|-
| 4
| 5
| ????
| ''initalize'', set default values, refresh
|}
|}


Line 66: Line 71:


== Setup ==
== Setup ==
Rez a object to serve as root, recommended as the menu-background of the UI.
new script, name as 'uiMaster'. This is the default basic setup:
<lsl>
default{
    state_entry(){
        uiInit();
        llMinEventDelay( 0.10 );
    }
   
    touch_start( integer dn ){
        integer lLink = llDetectedLinkNumber( 0 );
        string lName = llGetLinkName( lLink );
        integer x = llListFindList( uiNm, [lName] );
        if( ~x ) Lnk = llList2Integer( uiLnk, x );
       
        if( lName == "My UI Element #1" ){
            // uiFunction( 0 );
        }
    }
   
    touch( integer dn ){
        integer lLink = llDetectedLinkNumber( 0 );
        string lName = llGetLinkName( lLink );
        integer x = llListFindList( uiNm, [lName] );
        if( ~x ) Lnk = llList2Integer( uiLnk, x );
       
        if( lName == "My UI Element #1" ){
            // uiFunction( 1 );
        }
    }
   
    touch_end( integer dn ){
        integer lLink = llDetectedLinkNumber( 0 );
        string lName = llGetLinkName( lLink );
        integer x = llListFindList( uiNm, [lName] );
        if( ~x ) Lnk = llList2Integer( uiLnk, x );
       
        if( lName == "My UI Element #1" ){
            // variable = uiFunction( 2 );
        }
    }
}
</lsl>
new scripts (4 total), name as 'uiSlave:0', 'uiSlave:1', 'uiSlave:2' and 'uiSlave:3', which serve to speed up feedback significantly of the pseudo dynamic graphics.
<lsl>
integer x;
default{
    state_entry(){
        x = (integer)llList2String( llParseString2List( llGetScriptName(), [":"], [] ), 1 );
        state Main;
    }
}
state Main{
    link_message( integer sn, integer n, string str, key k ){
        if( n == x ){
            list t = llParseString2List( str, ["|"], [] );
            llSetLinkPrimitiveParams( (integer)llList2String(t,0),
                [(integer)llList2String(t,1),
                (integer)llList2String(t,2),
                    (key)llList2String(t,3),
                  (vector)llList2String(t,4),
                  (vector)llList2String(t,5),
                  (float)llList2String(t,6)] );
        }
    }
}
</lsl>


== uiFunctions ==
== uiFunctions ==
<!--############# INITIALIZATION #############-->
{|cellspacing="0" cellpadding="3" border="1" style="border: 1px solid #aaaaaa; margin: 1em 1em 1em 0pt; background-color: #ffffff; border-collapse: collapse" width="80%"
!style="color: #000000; background-color: #aaaaff;" height="20px"|
Initialization
|-
|
Initializes UI Elements into lists. Goes through all child prims to identify them as being a UI element by their prim description.
And includes them into global lists of link number, name and their UI type for:
* use in other functions
* debug
* saving time from re-searching entire linksets again and;
* preventing objects having hard-coded scripts which would defy the point of flexibility.
<lsl>
uiInit(){
    integer y = llGetNumberOfPrims();
    while( --y-1 ){
        list Dat = llGetObjectDetails( llGetLinkKey( y ), [OBJECT_NAME,OBJECT_DESC] );
        string lDesc = llList2String( Dat, 1 );
        if( llGetSubString( lDesc, 0, 2 ) == "UI_" ){
            uiLnk = (uiLnk = []) + uiLnk + y;
            uiNm = (uiNm = []) + uiNm + llList2String( Dat, 0 );
            uiType = (uiType = []) + uiType + lDesc;
        }
    }
}
</lsl>
{|cellspacing="0" cellpadding="6" border="1" style="border: 1px solid #aaaaaa; margin: 1em 1em 1em 0pt; background-color: #e0e0ff; border-collapse: collapse"
!style="background-color: #d0d0ee" | Process
!style="background-color: #d0d0ee" | Description
|-
| uiInit
| Initializes by assorting all the child prims
|}
<div style="float:right;font-size: 80%;">
By Nexii Malthus</div>
|}
<!--############# SLIDER #############-->
{|cellspacing="0" cellpadding="3" border="1" style="border: 1px solid #aaaaaa; margin: 1em 1em 1em 0pt; background-color: #ffffff; border-collapse: collapse" width="80%"
!style="color: #000000; background-color: #aaaaff;" height="20px"|
Slider
|-
|
Slider script.
<lsl>
list uiSlider1( integer Mode, key kTexture ){
if( llDetectedTouchFace( 0 ) != 0 ) return [];
if( Mode == 0 ){ // START //
   
} else if( Mode == 1 ){ // TOUCH //
    vector Scale = < 1.0, 0.5, 0.0 >;
    vector Offset; vector ST = llDetectedTouchST( 0 );
    if( ST.y > 0.98 ){Offset.y = -0.25;ST.y = 1.0;}
    else if( ST.y < 0.02 ){Offset.y = 0.25;ST.y = 0.0;}
    else Offset.y = 0.25 - ST.y/2;
   
    llMessageLinked( LINK_THIS, Smoother, llDumpList2String( [Lnk,PRIM_TEXTURE,0,kTexture,Scale,Offset,0], "|" ), "" );
    if( ++Smoother > 3 ) Smoother = 0;
    return [ST.y];
} else if( Mode == 2 ){ // END //
    vector ST = llDetectedTouchST( 0 );
    if( ST.y > 0.98 ) ST.y = 1.0;
    else if( ST.y < 0.02 ) ST.y = 0.0;
    return [ST.y];
} return []; }
</lsl>
Textures
<lsl>
key kTextureSlide1 = "05d64d5d-a42e-2c91-3088-6e7f4851c458";
key kTextureSlide2 = "2f0f4512-d804-9e3e-61a2-222bf4270b2f";
</lsl>
{|cellspacing="0" cellpadding="6" border="1" style="border: 1px solid #aaaaaa; margin: 1em 1em 1em 0pt; background-color: #e0e0ff; border-collapse: collapse"
!style="background-color: #d0d0ee" | Input
!style="background-color: #d0d0ee" | Description
|-
| integer Mode
| Mode of uiFunction, 0 - Touch Start, 1 - Touch, 2 - Touch End
|-
!style="background-color: #d0d0ee" | Output
!style="background-color: #d0d0ee" | Description
|-
| return list uiSlider1( 1, key kTexture )
| Returns list with value [Range], 0.0 - 1.0 of slider. Empty list on error.
|-
| return list uiSlider1( 2, key kTexture )
| Returns list with value [Range], 0.0 - 1.0 of slider. Empty list on error.
|}
<div style="float:right;font-size: 80%;">
By Nexii Malthus</div>
|}


<!--############# TURN #############-->
<!--############# TURN #############-->
{|cellspacing="0" cellpadding="3" border="1" style="border: 1px solid #aaaaaa; margin: 1em 1em 1em 0pt; background-color: #ffffff; border-collapse: collapse" width="80%"
{|cellspacing="0" cellpadding="3" border="1" style="border: 1px solid #aaaaaa; margin: 1em 1em 1em 0pt; background-color: #ffffff; border-collapse: collapse" width="80%"
!style="color: #000000; background-color: #aaaaff;" height="20px"|
!style="color: #000000; background-color: #aaaaff;" height="20px"|
Line 247: Line 80:
|-
|-
|
|
Turn component, imagine a turntable, or the iPod menu.
Turn component, imagine a turntable, or the 'iPod' menu.
 
<lsl>
<lsl>
list uiTurn( integer Mode ){
    link_message( integer sender, integer num, string str, key k ){
    integer Face = llDetectedTouchFace( 0 );
         // Example use here..
    if( Face != 0 ) return [];
     }
   
    if( Mode == 0 ){
       
    } else if( Mode == 1 ){
        vector ST = llDetectedTouchST( 0 );
       
        vector Scale = < 0.97, 0.97, 0.0 >;
        vector Offset = < 0.0, 0.0, 0.0 >;
        float Turn = llAtan2( 0.5 - ST.y, 0.5 - ST.x );
       
        llMessageLinked( LINK_THIS, Smoother, llDumpList2String( [Lnk,PRIM_TEXTURE,0,"9ab6a2f8-8f26-0edc-53ba-db786618ce49",Scale,Offset,Turn], "|" ), "" );
        if( ++Smoother > 3 ) Smoother = 0;
        return [Turn];
    } else if( Mode == 2 ){
         vector ST = llDetectedTouchST( 0 );
        return [llAtan2( 0.5 - ST.y, 0.5 - ST.x )];
     } return [];}
</lsl>
</lsl>


{|cellspacing="0" cellpadding="6" border="1" style="border: 1px solid #aaaaaa; margin: 1em 1em 1em 0pt; background-color: #e0e0ff; border-collapse: collapse"
{|cellspacing="0" cellpadding="6" border="1" style="border: 1px solid #aaaaaa; margin: 1em 1em 1em 0pt; background-color: #e0e0ff; border-collapse: collapse"
!style="background-color: #d0d0ee" | Input
!style="background-color: #d0d0ee" | Description
|-
| integer Mode
| Mode of uiFunction, 0 - Touch Start, 1 - Touch, 2 - Touch End
|-
!style="background-color: #d0d0ee" | Output
!style="background-color: #d0d0ee" | Output
!style="background-color: #d0d0ee" | Description
!style="background-color: #d0d0ee" | Description
|-
|-
| return list uiTurn( 1 )
| return link message, num with (TBD)
| Returns list with value [Angle], angle in radians, -PI to 0 to PI, or when multiplied by RAD_TO_DEG it is -180 to 0 to 180. Empty list on error.
| Returns ''Str'' as ''¬'' delimited list with values: [Angle], angle is in radians, -PI to 0 to PI, or when multiplied by RAD_TO_DEG it is -180 to 0 to 180. Empty list on error.
|-
|-
| return list uiTurn( 2 )
| return link message, num with (TBD)
| Returns list with final value [Angle]. Empty list on error.
| Returns ''Str'' as ''¬'' delimited list with values: [Final Angle], Empty list on error.
|}
<div style="float:right;font-size: 80%;">
By Nexii Malthus</div>
|}
 
 
<!--############# CLICK AND DRAG #############-->
 
{|cellspacing="0" cellpadding="3" border="1" style="border: 1px solid #aaaaaa; margin: 1em 1em 1em 0pt; background-color: #ffffff; border-collapse: collapse" width="80%"
!style="color: #000000; background-color: #aaaaff;" height="20px"|
Click and Drag
|-
|-
|
Based on my [[ClickAndDrag|Click and Drag]] script.
<lsl>
list uiCND( integer Mode ){
if( llDetectedTouchFace( 0 ) != 0 ) return [];
if( Mode == 0 ){ // START //
    tData1 = [ llDetectedTouchPos(0), llDetectedTouchNormal(0), llDetectedTouchBinormal(0) ];
    ST1 = llDetectedTouchST( 0 );
} else if( Mode == 1 ){ // TOUCH //
    vector ST2 = llDetectedTouchST( 0 );
    if( ST1 == <-1,-1,0> || ST2 == <-1,-1,0> ) return [];
    if( llVecDist( ST1, ST2 ) > 0.01 ){
        llSetLinkColor( Lnk, < 0.0, 0.0, 1.0 >, 0 ); llSetLinkAlpha( Lnk, 0.2, 0 );
        float relSize = 0.08;//0.084;
        vector selCentre = <1,1,0> - ((ST2+ST1)/2);
        vector selSize = (ST1-ST2); selSize = <llFabs(selSize.x),llFabs(selSize.y),0>;
       
        vector Scale = <relSize/selSize.x,relSize/selSize.y,0>;
        vector Offset = (selCentre-<0.5,0.5,0>);
        Offset = <Offset.x*Scale.x,Offset.y*Scale.y,0>;
        llMessageLinked( LINK_THIS, Smoother, llDumpList2String( [Lnk,PRIM_TEXTURE,0,kTextureDrag,Scale,Offset,0], "|" ), "" );
        if( ++Smoother > 3 ) Smoother = 0;
    }
} else if( Mode == 2 ){ // END //
    tData2 = [ llDetectedTouchPos( 0 ), llDetectedTouchNormal( 0 ), llDetectedTouchBinormal( 0 ) ];
    vector ST2 = llDetectedTouchST( 0 );
   
    if( ST1 == <-1,-1,0> || ST2 == <-1,-1,0> )
        return [];
   
    if( llVecDist( ST1, ST2 ) < 0.01 ){
        llSetLinkColor( Lnk, < 0.0, 1.0, 0.0 >, 0 ); llSetLinkAlpha( Lnk, 1.0, 0 );
        vector Scale = < 1.0, 1.0, 0>;
        vector Offset = < 1.0, 1.0, 0 > - ST1;
        llSetLinkPrimitiveParams( Lnk, [ PRIM_TEXTURE, 0, kTextureClick, Scale, Offset, 0 ]);
        llSetLinkAlpha( Lnk, 0.0, 0 );
        return [0] + tData1;
    } else {
        llSetLinkColor( Lnk, < 0.0, 0.0, 1.0 >, 0 ); llSetLinkAlpha( Lnk, 0.2, 0 );
        float relSize = 0.08;
        vector selCentre = <1,1,0> - ((ST2+ST1)/2);
        vector selSize = (ST1-ST2); selSize = <llFabs(selSize.x),llFabs(selSize.y),0>;
        vector Scale = <relSize/selSize.x,relSize/selSize.y,0>;
        vector Offset = (selCentre-<0.5,0.5,0>);Offset = <Offset.x*Scale.x,Offset.y*Scale.y,0>;
        llSetLinkPrimitiveParams( Lnk, [ PRIM_TEXTURE, 0, kTextureDrag, Scale, Offset, 0 ]);
        llSetLinkAlpha( Lnk, 0.0, 0 );
        return [1] + tData1 + tData2;
    }
} return []; }
</lsl>
Textures
<lsl>
key kTextureClick = "5d431ade-24f3-2390-f1ba-ca404cad2864";
key kTextureDrag = "efc411bc-2005-10ff-da0c-3dda972f6e70";
</lsl>
{|cellspacing="0" cellpadding="6" border="1" style="border: 1px solid #aaaaaa; margin: 1em 1em 1em 0pt; background-color: #e0e0ff; border-collapse: collapse"
!style="background-color: #d0d0ee" | Input
!style="background-color: #d0d0ee" | Input
!style="background-color: #d0d0ee" | Description
!style="background-color: #d0d0ee" | Description
|-
|-
| integer Mode
| link message, num, str, key
| Mode of uiFunction, 0 - Touch Start, 1 - Touch, 2 - Touch End
| Num (TBD) ''OR'''d with ''Mode'' of uiFunction, As follows: 3 - Get or 4 - Set
|-
!style="background-color: #d0d0ee" | Output
!style="background-color: #d0d0ee" | Description
|-
| return list uiCND( 2 )
| Returns list of values, Click [0,World Pos,Normal,Bi-Normal], Drag [1,Pos1,N1,BN1,Pos2,N2,BN2], if on error returns empty list.
|}
|}
<div style="float:right;font-size: 80%;">
<div style="float:right;font-size: 80%;">
By Nexii Malthus</div>
By Nexii Malthus</div>
|}
|}

Latest revision as of 23:22, 18 December 2008

User Interface Project

Project Subject to change at any time due to being currently under development.

A project to try create an efficient, flexible and innovative User Interface in LSL. Without being complex to use or using a ridicolous amount of constants, providing direct results that can be returned and used by the scripter directly in a Master script for efficiency, or used via automation of a UI master to a link-message protocol sent to scripts written by the original scripter.

The User Interface Project is to create a UI that can be used in-world as well as on the HUD, providing pseudo-dynamic graphical feedback to the user(s).

Update: Due to issues with high size due to compiled code being quite extensive due to number of helper functions stacking up as well complexity of functions generally, as well as for general ease-of-use, I will be re-designing the project into an API.

Design, Components

Mode Stuff
0 process touch_start() event, initialization
1 process touch() event, feedback, and get values
2 process touch_end() event and get values
3 get values
4 set values, refresh graphics
5 initalize, set default values, refresh

Design, Menu

Example notecard script 'uiMenu:Test' for child prim named 'Test' 

Menu A{
    Texture: 00000000-0000-0000-0000-000000000000
    Button: Rect : 0.12, 0.20 | 0.20, 0.23 : Goto : Menu B : Transition : Alpha
    Button: Rect : 0.12, 0.15 | 0.20, 0.18 : Return : "Custom String"
    Button: Rect : 0.12, 0.10 | 0.20, 0.13 : Link Msg : LINK_SET : 1024 : "Toggle" : ""
    Button: Rect : 0.12, 0.05 | 0.20, 0.08 : Goto : Menu C : Transition : Alpha
}

Menu B{
    Texture: 00000000-0000-0000-0000-000000000000
    Button: Rect : 0.50, 0.40 | 0.70, 0.44 : Goto : Menu B : Transition : Alpha
}

Menu C{
    Texture: 00000000-0000-0000-0000-000000000000
    Repeats: 0.5, 1.0
    Offset: -0.25, 0.0
    Button: Rect : 0.10, 0.90 | 0.20, 0.95 : Goto : Menu D : Transition : Anim : 1.0
}

Menu D{
    Texture: 00000000-0000-0000-0000-000000000000
    Repeats: 0.5, 1.0
    Offset: 0.25, 0.0
    Button: Rect : 0.80, 0.90 | 0.90, 0.95 : Goto : Menu C : Transition : Anim : 1.0
}

Setup

uiFunctions

Turn

Turn component, imagine a turntable, or the 'iPod' menu. <lsl> 

   link_message( integer sender, integer num, string str, key k ){
       // Example use here..
   }

</lsl>

Output Description
return link message, num with (TBD) Returns Str as ¬ delimited list with values: [Angle], angle is in radians, -PI to 0 to PI, or when multiplied by RAD_TO_DEG it is -180 to 0 to 180. Empty list on error.
return link message, num with (TBD) Returns Str as ¬ delimited list with values: [Final Angle], Empty list on error.
Input Description
link message, num, str, key Num (TBD) OR'd with Mode of uiFunction, As follows: 3 - Get or 4 - Set
By Nexii Malthus
Retrieved from "https://wiki.secondlife.com/w/index.php?title=NexUI&oldid=180353"