Fusion:Calendar templates

From SpinetiX Support Wiki

Jump to: navigation, search

Introduction

Calendar application are designed to display scheduling information by the HMP. Multiple type of calendar source are supported, such as outlook, google calendar or any other services based on iCalendar files (ics).

Key features:

  • Display data from schedule files
  • Compatible with all services using ics files (see #Calendar sources for examples)
  • Based on HTML5 and JSignage and can be previewed in the browsers
  • Can be edited and modified using HMP Professional for further customization
  • The jComponent.schedule() is used to format the information and display it on the screen

Calendar Week

Screenshot

Specification

  • Category: Calendar
  • Version: 1.0
  • Author: SpinetiX S.A.
  • Rights: GPL Version 2
  • Target: Fusion element
  • Download: Media:Calendar week apps.7z

This application display a timetable of all the event in the calendar for the current week. The application uses European time and date format.

Browser preview. Tested with Firefox 13, Chrome 20, Safari 5.1, Opera 12, IE 9

Configuration

The following parameters can be configured from inside Fusion:

  • Calendar source
    URI of the calendar file to be displayed by the application.
  • Starting date
    Starting date to be displayed. The following are possible:
    • this monday: Start the display of the calendar the Monday of the current week
    • this day: Start the calendar with the current day
    • -1 day: Start the calendar one day in the past (yesterday)
    • -2 day: Start the calendar two days in the past
  • Duration:
    Number of days to display. The following are possible: 3, 5 or 7 days
  • Start time
    Starting time used to display events from the calendar
  • End time
    Ending time used to display events from the calendar

Calendar Day

Screenshot

Specification

  • Category: Calendar
  • Version: 1.0
  • Author: SpinetiX S.A.
  • Rights: GPL Version 2
  • Target: Fusion element
  • Download: Media:Calendar day apps.7z

This application display a timetable of all the event in the calendar for the current day. The application uses US time and date format.

Browser preview. Tested with Firefox 13, Chrome 20, Safari 5.1, Opera 12, IE 9

Configuration

The following parameters can be configured from inside Fusion:

  • Calendar source
    URI of the calendar file to be displayed by the application.
  • Start time
    Starting time used to display events from the calendar
  • End time
    Ending time used to display events from the calendar

Calendar Business

Screenshot

Specification

This application display a timetable of all the event in the calendar for a full week period. The application uses custom backgrounds for each events and constrain the size of the event to a multiple of 3 hours. It always display the events between 8h and 17h. If the number of event for a given day is such that it doesn't fix into the area, an animation is used to switch between the events.

Browser preview. Tested with Firefox 13, Chrome 20 (no animations), Safari 5.1, Opera 12, IE 9 (no animation)

Configuration

The following parameters can be configured from inside Fusion:

  • Calendar source
    URI of the calendar file to be displayed by the application.
  • Format:
    Choice between US and EU date and time formatting. The first day of the week is Sunday for US and Monday for EU.

Calendar Yoga

Screenshot

Specification

  • Category: Calendar
  • Version: 1.0
  • Author: SpinetiX S.A.
  • Rights: GPL Version 2
  • Target: Fusion element
  • Download: Media:Calendar yoga apps.7z

This application display a timetable of all the event in the calendar for the current week. All events are display using the same size regardless of their duration. If there are more than 4 events for a given day, an animation is used to changed the event displayed for the day.

Browser preview. Tested with Firefox 13 (no animations), Chrome 20 (no animations), Safari 5.1, Opera 12, IE 9 (no animations). All browser (day name is not rotated)

Configuration

The following parameters can be configured from inside Fusion:

  • Calendar source
    URI of the calendar file to be displayed by the application.
  • Format:
    Choice between US and EU date and time formatting. The first day of the week is Sunday for US and Monday for EU.
  • Start time
    Starting time used to display events from the calendar
  • End time
    Ending time used to display events from the calendar

Calendar Event

Screenshot

Specification

This application display events from a calendar. Events are displayed one by one. The application can be configured to use 12h or 24h format. Additionally, the Fusion user may configure a logo, image or video together with a small text to be displayed on the right side of the application.

Configuration

The following parameters can be configured from inside Fusion:

  • Calendar source
    URI of the calendar file to be displayed by the application.
  • Format:
    Choice between US and EU date and time formatting. The first day of the week is Sunday for US and Monday for EU.
  • Start time
    Starting time used to display events from the calendar, the following values are supported
    • now: shows events with a starting or ending time in greater than the current time
    • this day: shows events starting the current day
    • -1 day: shows events starting yesterday
    • this week: shows events from the start of the week (Sunday for US, and Monday for EU)
  • End time
    Ending time used to display events from the calendar, the following values are supported
    • now: shows only events in the past
    • this day: shows only event happening before midnight of the current day
    • +1 day: shows only events happening before tomorrow midnight
    • this week: shows only events for the current week (ending on Saturday for US, and Sunday for EU)
  • Side image
    Image or video displayed on the right side. Controlled by Fusion
  • Description
    Some description always present on the screen.

Calendar sources

All the calendar applications presented on this page rely on the same principle - the calendar information is retrieved from an ics file, which can be stored locally on the HMP or hosted on a remote server. The following possibilities are supported:

  • demo: random calendar generated by the application for demonstration purpose
  • ../../../publish/your_calendar_file.ics: file stored locally on the HMP and uploaded using WebDAV.
  • http://your_server/your_calendar_file.ics: file stored on your server.
  • https://www.google.com/calendar/ical/[...]: Goolge private or public calendar address.
  • https://dl.dropboxusercontent.com/[...]: Dropbox public link

See ICS feeds for more on configuring the ICS feed source.

Technical information

This section is intended for developers using HMP Professional and familiar with JSignage, HMD Template Authoring and Fusion template creation

The applications are based on JSignage and the jComponent.


The configurable parameters are controlled in the XML Tree. For instance in the case of the 'Calendar Week' application the following parameters are visible: 

<spx:properties xmlns:spx="http://www.spinetix.com/namespace/1.0/spx">
  <spx:choice choice-01="this monday" choice-02="this day" choice-03="-1 day" choice-04="-2 day" 
              name="Start date" targetAttribute="start-date" ui="enabled" xlink:href="#config"/>
  <spx:choice choice-01="3 days" choice-02="5 days" choice-03="7 days" 
              name="Duration" targetAttribute="duration" ui="enabled" xlink:href="#config"/>
  <spx:choice choice-01="07:00" choice-02="08:00" choice-03="09:00" choice-04="10:00" 
              choice-05="11:00" choice-06="12:00" 
              name="Start time" targetAttribute="start-time" ui="enabled" xlink:href="#config"/>
  <spx:choice choice-01="13:00" choice-02="14:00" choice-03="15:00" choice-04="16:00" 
              choice-05="17:00" choice-06="18:00" name="End time" 
              targetAttribute="end-time" ui="enabled" xlink:href="#config"/>
</spx:properties>
<defs cal-source="demo" duration="5 days" end-time="18:00" start-date="this monday" start-time="08:00" xml:id="config"/>

Start and end time, may use 12h time format (7pm or 7:00pm) or 24h time format (19:00)


The parameters are retrieved using JSignage using the code bellow (from 'Calendar Week'): 

var calSource = $('#config').attr("cal-source");
var startDate = $('#config').attr("start-date");
var duration = $('#config').attr("duration");
var startTime = $('#config').attr("start-time");
var endTime = $('#config').attr("end-time");

Some parameters are not modifiable by the user, but may be edited in the application code. For instance in the 'Calendar Day' application, the day displayed by the application is the current day ("this day"). It may be changed to another day of the week using "this monday" for instance. In this case the event of the Monday of the current week will be displayed. 

var calSource = $('#config').attr("cal-source");
var startTime = $('#config').attr("start-time");
var endTime = $('#config').attr("end-time");
var startDate = "this day";
var duration = "1 day";


The calendar file is retrieved by the player using the following: 

$.get(calSource, draw , "text" );


There is special case for the previews and for the 'demo' calendar, where random data is generated to populate the calendar. 

if ( document.documentElement.previewMode || document.documentElement.previewMode===undefined ||  calSource=="demo" ){
   draw( jComponent.randomSchedule( [...] ) );
}


The calendar is drawn using the schedule() function of the jComponent. 

function draw( icsdata ) {
    var sched = jComponent.schedule( {
		data : icsdata,
		startDate: startDate,
		duration: duration,
		startTime: startTime,
		endTime: endTime,
    } ).addTo( 'svg' );
};

The time and date format used by the calendar can be modified to 12h format using format: "US".


The 'Calendar Business' application modifies how the cells and the space between cells is drawn on the screen, by changing the drawSpace and drawCell callbacks. The size of the event and the space is set using the eventHeight and spaceHeight. Finally, the duration of the event is rounded to a set of predefined values (3, 6 and 9 hours) using eventSet . 

var sched = jComponent.schedule( { 
	[...],
	eventHeight: [ 265, 536, 807 ],
        spaceHeight: [ 265, 536, 807 ],
	separatorHeight: 6, 
        eventSet : [ 3, 6, 9 ],
	drawSpace: function( spaceSetIdx, dayIdx, dayHeight ) { 
		return $.g().add( $.media({ href: "media/event_"+spaceSetIdx+"_off.png" }) ); 
	},
	drawCell: function( eventData, timeSetIdx, dayIdx, dayHeight, format ) { 
		return $.g( ).add( [
			       $.media({ href: "media/event_"+timeSetIdx+"_on.png" }), 
                               [...]
		] ); 
	},
        data : icsdata
    } ) ;

The 'Calendar Yoga' application uses a most 4 event ( set using maxEvents ) of a fixed size ( set using eventHeight ). It also modifies how the cells are drawn on the screen, by changing the drawCell callbacks. 

var sched = jComponent.schedule( { 
	[...],
	maxEvents : 4,
        eventHeight: [ 151 ],
	drawCell: function( eventData, timeSetIdx, dayIdx, dayHeight, format ) { 
		return $.textArea( { top: 5, left: 22, width: 220, height: 151, 
		  		     textAlign: 'start', displayAlign: 'before', lineIncrement: 42 , 
				     fontSize: 32, fill: fillColor[dayIdx] } 
				  ).text( $.tspan( eventData.title ).tbreak()
				           .tspan( eventData.location ).tbreak()
					   .tspan( [...] , { fontSize: 22} ) );
		},
        data : icsdata
    } ) ;
Retrieved from "https://support.spinetix.com/w/index.php?title=Fusion:Calendar_templates&oldid=10116"
This page was last modified on 6 October 2015, at 15:05.