JSignage:PushButton

This page is related to jSignage interactive layers.

jSignage.pushButton()

jSignage.pushButton( attributesObject )
jSignage.pushButton( attributesObject, text )
jSignage.pushButton( attributesObject, layer )

Returns: jSignage Object

Description

The push button widget displays a push button frame with an inside layer of text or a custom user layer. This is meant for rapid prototyping of interactive applications. Deployment code will normally use project specific styling for the UI with user provided PNG images rather than this widget. Internally push buttons are implemented using the $.g() layer type and setting a UI type background frame.

The push button is part of the interactive layer type and part of the interactivity framework.

Parameters

• attributesObject

  Type: Plain Object.

  An object containing any of the following attributes:

  • begin, dur, repeatCount, ... , left, top, width, ... , frame, ...

    Any of the common set of layer attributes to define the screen layout and active time interval. Frame decoration can be used to improve the layout of text layers.

  • style

    One of "square", "round", "manzana". Default: $.uiStyle.

  • color

    Color of the button background. Default: $.uiColor.

  • direction

    One of "left", "right", "none". Alter the shape of the button to make it point to one direction. Default: "none".

• text

  Type: String.

  A plain-text label to be displayed on top of the push button layer.

• layer

  Type: jSignage Object.

  A layer to be displayed on top of the push button layer.

Functions

Any common layer function (like .begin(), .end(), .show(), .hide(), .addTo(), etc.) can be used with the push button layer.

Although it doesn't have any specific functions, a .click() handler is typically attached to the push button layer.

If the optional parameter is not used, it is always possible to add an inner layer afterwards using the .add() method.

Examples

Submit button

Create a push button triggering an alert when pressed.

$(function(){
    $.pushButton({
        left: '35%', top: '5%', 
        width: '30%', height: '15%',
        style: 'round'
    }, 'Submit' )
    .click( function() { 
        alert("I have been clicked");
    }).addTo( 'svg' );
});

Counter

Increase a counter and display it each time the button is pressed.

$(function(){
    var cnt = 0;
    var text = $.textArea( { 
        fontSize: 'max'
    } ).text("Click me");

    $.pushButton({
        left: '15%', top: '5%', width: '70%', height: '15%',
        style: 'manzana'
    }, text ).click( function() { 
        text.text("Clicked "+ (++cnt) +" time"+(cnt>1?"s":"") );
    }).addTo( 'svg' );
});

Slideshow

Push button can be used to trigger the display of media and or text.

$(function(){
    var pages = $.multiPage({
        height: '80%',
        defaultTransition: $.fade(),
    }).addTo('svg');
   
    function clicked( ev ) {
        return pages.switchPage( 
            $.headlineTextArea( { 
                scaleMethod: 'uniform'
            } ).text( ev.data ) 
        ); 
    }

    for ( var i=1; i<5; i++ )
        $.pushButton({ 
            left: -22.5+i*25+'%', top: '80%',
            width: '20%', height: '15%', fontSize: 32 
        }, "Button " + i )
        .click( "Button " + i + " clicked", clicked )
        .addTo('svg');
});

Note:

A MultiPage layer is used to display the data depending on the button clicked by the user. In this example a text area is used, however, the same principle can be used to trigger video, images and other media.