JSignage:Group layers

This page is related to jSignage layers.

Description

Group layers can be used to either group other layers, or to define an area where to insert other media. The group layer is not visible, but can be used to control the position and timing of other layers.

Use $.g() to create a group.

The group layer is part of the basic layer types, along with text area and media layers.

Specific attributes

The group layer do not have any specific attribute.

See the list of common set of attributes to work with layers.

Specific functions

The group layer do not have any specific function.

See the list of functions to work with layers.

Examples

Add a rounded frame to a video

The example below defines an area in the center of the screen using a group. The area is then used to add a rounded rectangle background to a video.

$(function(){ 
   var myGroup = $.g({
     width: '80%',
     height: '80%',
     top:'10%',
     left: '10%',
   }).addTo('svg');
   $.media( { href: 'media/SpinetiX.jpg', 
              frame: { shape: 'round', backColor: 'grey', frameColor: 'black', screenColor:' white' } 
          } ).addTo( myGroup );
   $.media( { id: 'movie1', width: '50%', height: '50%', top:'25%', left: '25%', 
              href: 'media/hmp200_sd.mp4' 
          } ).addTo( myGroup );
});

Note:

• A frame is used to draw a rectangle around the video.

Add an effect to a group

Group can be used to add an effects on multiple layers on the same time. The example bellow shows a group with four images. The fly-in effect is added to the group to create the visual effect that the 4 images will fly inside the area simultaneously as a single element.

$(function(){ 
   $.g( { width: '80%', height: '80%', top:'10%', left: '10%'})
       .add([
             $.image({ href: 'images/1.jpg', id: 'img1', width: '50%', height: '50%', top: '0%', right: '0%' }),
             $.image({ href: 'images/2.jpg', id: 'img2', width: '50%', height: '50%', top: '50%', right: '0%' }),
             $.image({ href: 'images/3.jpg', id: 'img3', width: '50%', height: '50%', top: '0%', right: '50%' }),
             $.image({ href: 'images/4.jpg', id: 'img4', width: '50%', height: '50%', top: '50%', right: '50%' })
         ])
       .flyIn({ dur: '2s', direction: 'leftToRight' })
       .addTo('svg');	
});

Group timing

Timing can be used on group. In the example below a group is created. It will be visible for 4 seconds, starting 1 second after the document is opened.

• The first image is visble for the same duration as the group, i.e. appear at 1s and disapear at 5s.
• The second image is visble 1 second after the group and for the same duration as the group, i.e. appear at 2s and disapear at 5s.
• The third image is visble for 2 seconds, i.e. appear at 1s and disapear at 3s.
• The foutth image should be visble for 6 seconds but cannot be shown no longer than the group, i.e. appear at 1s and disapear at 5s.

$(function(){ 
    $.g( { begin:1, dur: 4 })
       .add([
             $.image({ href: 'images/1.jpg', id: 'img1', width: '50%', height: '50%', top: '0%', left: '0%' }),
             $.image({ href: 'images/2.jpg', id: 'img2', begin: 1, width: '50%', height: '50%', top: '50%', left: '0%' }),
             $.image({ href: 'images/3.jpg', id: 'img3', dur: 2, width: '50%', height: '50%', top: '0%', left: '50%' }),
             $.image({ href: 'images/4.jpg', id: 'img4', dur: 6, width: '50%', height: '50%', top: '50%', left: '50%' })
           ])
       .addTo('svg');	
});

Controlling the group ending

When the group doesn't have an explicit duration, you can force the group to end based on the end-event of another element by using the .endsWith() function. This will allow to trigger a group out-effect (see the example below), to switch to the next slide of a slideshow (see example) etc.

$(function(){ 
   var image = $.image({ href: 'image/1.jpg' });
   var video = $.media({ top: '10%', left: '10%', width: '80%', height: '80%', href: 'video/1.avi' });

   $.g().add( [ image, video] ) // add two media to the group
        .endsWith( video )      // set the group to finish when the video ends
        .flyOut()               // apply an out-effect at the end
        .addTo('svg');
});

See also the Conditional ending page.