[Control] Multi-state button with optional sound effects

[Dave Smart]

Here is a multi-state button object with optional sound effects that some of you might find useful in your apps or as a template for creating your own custom controls.

Thanks go to Stephan Wicki at PlusTherm for allowing us to share this code (developed by the DroidScript team for PlusTherm).

//--- Usage Example -------------------------

app.LoadScript( "MultiButton.js" );

:

:

    //Create tri-state power button.

    var states = "Img/Grey.png,Img/Orange.png,Img/Green.png";

    var sounds = "Snd/ClickOn.ogg,Snd/ClickOff.ogg";

    btnPower = app.CreateMultiButton( states, sounds, 0.3, -1 );

    btnPower.SetOnTouch( btnPower_OnTouch );

    lay.AddChild( btnPower );

:

:

    //Create bi-state heat button.

    var states = "Img/HeatOff.png,Img/HeatOn.png";

    var sounds = "Snd/ClickOn.ogg,Snd/ClickOff.ogg";

    btnHeat = app.CreateMultiButton( states, sounds, 0.3, -1 );

    btnHeat.SetMargins( 0.1,0,0,0 );

    btnHeat.SetOnTouch( btnHeat_OnTouch );

    lay.AddChild( btnHeat );

:

:

//--- MultiButton.js -----------------

//Add button to main app object.

app.CreateMultiButton = function( stateImages, sounds, width, height ) 

{ 

    return new MultiButton( stateImages, sounds, width, height ); 

}

//Multi-state button.

function MultiButton( stateImages, clickSounds, width, height )

{

    //Callbacks.

    var onTouchCb = null;

    

    //Get array of state images.

    var images = [];

    var list = stateImages.split(",");

    

    //Load buttons state images to memory.

    for( var i=0; i<list.length; i++ )

        images.push( app.CreateImage( list[i], width, height ) );

        

    //Create layout to contain button.

    var lay = app.CreateLayout( "Frame" );

    

    //Create visible image control in layout.

    var img = app.CreateImage( list[0], width, height );

    img.SetOnTouchDown( _Cb(this,"OnTouchDown") );

    img.SetOnTouchUp( _Cb(this,"OnTouchUp") );

    lay.AddChild( img );

    

    //Set click sounds if provided.

    var players = [];

    var list = clickSounds.split(",");

    for( var i=0; i<list.length; i++ ) {

    players[i] = app.CreateMediaPlayer();

    players[i].SetFile( list[i] );

    }

    //Squeeze image on touch down.

    this.OnTouchDown = function() {

        img.Scale( 0.9,0.9 ); 

        app.Vibrate( "0,30" );

        if( players[0] ) players[0].Play(0);

    }

    

    //Expand image on touch up.

    this.OnTouchUp = function() 

    {

        setTimeout( function() {

            img.Scale( 1,1 ); 

            app.Vibrate( "0,30" );

            if( players[1] ) players[1].Play(0);

            if( onTouchCb ) onTouchCb();

        }, 100 );

    }

    

    //Allow user to set callback.

    this.SetOnTouch = function( callback ) {

        onTouchCb = callback;

    }

    

    //Set state of button (change image).

    this.SetState = function( num )

    {

        img.SetImage( images[num] );

    }

    

    this.SetMargins = function(left,top,right,bottom) { 

        lay.SetMargins(left,top,right,bottom);

    } 

    

    //Return the layout.

    this.id = lay.id;

}

[Dave Smart]

This is a useful addition:-

//Get state of button (image index).

    this.GetState = function()

    {

        return curImgNum;

    }

[stepha...@gmail.com]

Hi Dave,

I hope you're doing good!
Can you check Multi-state button?
I "reactivated" this code but cannot run it, there is always error message: 

• Script Error: func.apply is not a function, Line 1720, app.js

Or is there meanwhile another "way" to do it?

THX a lot,

Kind regards,
Stephan

[Right2TheV0id]

A similar situation has recieved a solution here:

https://groups.google.com/g/androidscript/c/qWmrlRXiU3A/m/7WzeB_wEAQAJ

[Right2TheV0id]

Here's a working version of the MultiButton Sample adapted to DS 2.57.
Note: I slightly modified it to my taste, I hope I didn't alter it in a wrong way.