JSignage:InteractiveTutorial3

Description

Virtual museum navigation

• Virtual museum application demonstrating interactive navigation with menus and the multipage layer.
• The application's data is in an external database which is queried via $.getJSON() at startup.

Source code

$.uiStyle = 'manzana';

// State variables
var gallery = null, page = 0;

// Action handlers

function gallery_clicked( new_gallery ) {
  gallery = new_gallery;
  page = 0;
  show_paintings();
}

function previous_clicked() {
  page -= 1;
  show_paintings( $.push({direction: 'leftToRight', dur: 0.5}) );
}

function next_clicked() {
  page += 1;
  show_paintings( $.push({direction: 'rightToLeft', dur: 0.5}) );
}

// Application layers

var paintings = $.multiPage({
  left: '30%',
  height: '80%',
  defaultTransition: $.page({ dur: 0.5 })
});

var previousPage = $.pushButton({
  begin: 'indefinite',
  direction: 'left',
  left: '33%',
  top: '85%',
  height: '8%',
  width: '10%',
  fontWeight: 'bold'
}, 'Back' );

previousPage.click( previous_clicked );
previousPage.fadeIn({ dur:0.5 }).fadeOut({ dur:0.5 });

var nextPage = $.pushButton({
  begin: 'indefinite',
  direction: 'right',
  right: '3%',
  top: '85%',
  height: '8%',
  width: '10%',
  fontWeight: 'bold'
}, 'More' );

nextPage.click( next_clicked );
nextPage.fadeIn({dur:0.5}).fadeOut({dur:0.5});

$('svg').add([ paintings, previousPage, nextPage ]);

// Page drawing logic

function show_paintings( transition ) {
  var width = 100, height = 100;
  if ( gallery.aspect > 1 )
    height = 100/gallery.aspect;
  else
    width = 100*gallery.aspect;
  paintings.switchPage( $.table({
    columns: 3,
    rows: 2,
    cellPadding: 30,
    renderToSVG: function( col, row ) {
      var idx = page*6+row*3+col+1;
      if ( idx > gallery.count )
        return null;
      return $.g().add( $.image({
        left: (100-width)/2+'%',
        width: width+'%',
        top: (100-height)/2+'%',
        height: height+'%',
        mediaFit: 'fill',
        href: 'media/'+gallery.folder+'/mini/'+idx+'.jpg',
        frame: { frameColor: 'white', frameSize: 20 }
      }));
    },
  }), transition );

  previousPage.setVisible( page > 0 );
  nextPage.setVisible( gallery.count > page*6+6 );
}

$.getJSON( 'media/paintings.json', function( galleries ) {

  $.table({
      left: 0,
      width: '30%',
      height: '50%',
      columns: 1,
      rows: 3,
      cellPadding: 30,
      data: galleries,
      renderToSVG: function( col, row, entry ) {              
        return $.pushButton( { fontWeight: 'bold' }, entry.artist ).click( function() { gallery_clicked(entry); } );
      }
  }).addTo('svg');

  gallery = galleries[0];
  page = 0;
  show_paintings();

});