Displaying calendar events

From SpinetiX Support Wiki

Jump to: navigation, search

Introduction

Final result

This tutorial explains how to display a set of calendar events as part of a layout. The tutorial is based on the Create a master playlist tutorial and assume it has already been followed.

In this tutorial we will create a Layout and use the Calendar widgets to display the event of a calendar exported from Outlook.

One of the key feature of Elementi is to provide a set of Widgets ready to be use in the Library to display data from files or servers.

You can download the project resulted after following this tutorial from the link below.

Video


Tutorial

  • Difficulty: Easy.
  • Total duration: 10-15 minutes.
  • Requirements:
    • Elementi 2015 or later. (The latest version is recommended.)
    • (Optional) One or more HMP devices using firmware 3.2.0 or later for the publishing part of the tutorial. (The latest version is recommended.)

Calendar event file

Calendar editing

First, let's create the calendar events to be displayed in the layout.

  1. Open Office Outlook and go to the calendar view
    • You can either create a new calendar (Open Calendar -> Create New Blank Calendar) or use an existing one. In this tutorial we will create a new calendar and call it "fitness";
    • Note that exporting a calendar from Office Online is possible but is outside the scope of this tutorial.
  2. Enter all the events that you want to appear on your calendar
    • You can use any of the field of the events but formatting and inserted media will not be kept when exporting to an ics file.
  3. Go File -> Save Calendar and select a location on your local hard drive to save the file. Enter "calendar.ics" for the file name
  4. Select "iCalendar Format (*.ics) as document type.
  5. Press the "Save" button.

Your calendar events are now ready to be imported in the Project.

Getting started

To get started, follow Create a master playlist tutorial. Once done, make a copy of that project, rename the copy to "Datafeed-calendar" and then open it.

  1. Create a new layout and call it "Calendar", select a 16:9 format, a white background and make sure the last check-box is not checked.
  2. Double-click on the layout icon to open it. Double click on the "index.svg" file to open it in the Preview panel.
  3. Import the background image.
  4. Drag & drop the image from the browse panel into the preview panel (or into the edit panel) to create a media layer. Click on the "Fit Screen" button on the toolbar to make sure the background layer occupies the entire screen.
  5. Change the transparency of the background using the edit panel and clicking on Elementi Icons Layer Properties.png (the "Layer Properties" button) next to the text layer. This opens the Layer Properties dialog and let you change the Opacity of the layer to 0.3.
  6. Lock the layer by clicking on the "Lock" icon within the edit panel.
  7. Import the calendar file.
    • The calendar file will be copied from your local hard drive into the project. If you update the calendar events using Outlook, it will need to be imported again.
    • Importing a calendar file is done the same way as for any media file (See this video about importing media in case of need).

Importing Table widget

Table widget

Next, let's import the Table widgets into the current layout.

  1. Click on the "Library" tab within the browse panel. This opens the Elementi Library.
  2. Open the "Calendars" folder and find the "Table.svg" widget.
  3. Drag & drop the widget from the browse panel onto the preview panel. A new media layer is added on top of the other layers.
  4. Go back to the project by clicking on the "Datafeed-calendar" tab in the browse panel.
  5. Position the widget to occupy all the layout using "Fit Screen".
  6. Open the Elementi Icons Layer Properties.png (the "Layer Properties" button) next to the text layer. This opens the Layer Properties dialog.
    • Click on the "Box Format" tab.
    • Select the Padding option and set its value to 86.
    • Press on OK to leave the dialog.

Note that the widget file was automatically copied into the current project upon import.

Configuring Data source

Data Feed Properties
Configuring ICS Parser
Testing data feeds

Next, let's change the widget data source from the default one pointing to the SpinetiX server (i.e. displaying the "Lorem ipsum ..." # Double-click on the "Table.svg" layer within the edit panel. This opens the widget within the main layout context (i.e. without closing index.svg document).

  1. Click twice on the "Data source" property. This opens the "Data Feed Properties" dialog.
  2. Enter the name of the calendar file to be displayed ("calendar.ics")
  3. Click on the ICS parser tab
  4. Configure the From and To filter on the calendar event.
    • These options let you configure which events from the calendar need to be displayed at any time.
    • You can use absolute or relative dates, both for the starting and ending limits. In this tutorial we will show only the events for today and tomorrow.
  5. Click on the "Test..." button to verify the results.
    • All the available data from the calendar file are shown in the test box. The standards ones are "title", "description", "location", "startDate" and "endDate".
  6. Click on the "OK" button to save the changes to the data source.

Configuring Calendar widget

Configuring table widget
Layout of the table widget

Next, let's modify the configuration of the widget.

  • Change the number of row to be displayed to 4
  • Add a Delay per cell of 0.1s to add some animation on the table.

The Table widgets and the Slideshow widgets have a more complex structure than the other Calendar_widgets because it is possible to configure the layout of the data inside the widget like it is the case for any normal Layout.

Let's setup the layout of the table cell.

  1. Click on the "Layer" tab in the Edit panel.
    • Two default layers are present on this tab. The first one display a set of text entry from the calendar event, the second one an image whose link that may be present in the calendar event.
    • Remove the second layer, as there are no images in our example.
  2. Select the first layer in the Edit panel and click on the Copy and Paste on the toolbar.
    • Instead of starting a new layer from scratch we will use the existing layers as a base for our work.
  3. Click on the Preview panel.
    • This will pause the playback of the content and enter into the "Edit mode"
    • The content of the preview is replaced by a set of placeholders such as [[title]] or [[startDate>SHORT_DATE]] that will be replaced by the data of the calendar event, i.e to display the field "location" from the event, use the syntax "[[location]]". The names are case sensitive.
    • Because we have change the number of line to be displayed, the current layout is not displayed correctly.
  4. Select the first layer and open the "Layer Properties" using Elementi Icons Layer Properties.png.
    1. Set the coordinates of the layer to Left=0, Top=16, Width=640 and Height=144
    2. Set the alignment of the text to "Top" and "Left"
    3. Go to the "Edit Text" tab and keep only the [[title]] and [[location]].
    4. Go to the "Box Format" tab and the the Opacity of the Mat to 0.6 and its color to #00417F.
    5. Press OK to apply your changes.
  5. Select the second layer and open the "Layer Properties" using Elementi Icons Layer Properties.png.
    1. Set the coordinates of the layer to Left=640, Top=16, Width=640 and Height=144
    2. Set the alignment of the text to "Bottom" and "Right"
    3. Go to the "Edit Text" tab and keep only the [[startDate>SHORT_DATE]] on the first line and [[startDate>SHORT_TIME]] - [[endDate>SHORT_TIME]].
    4. Change the syntax of the date from [[startDate>SHORT_DATE]] to [[startDate>LONG_DATE]].
      See Data mapping and Date and time formats for detailed explanation on the date formatting.
    5. Go to the "Box Format" tab and the the Opacity of the Mat to 0.6 and its color to #00417F.
    6. Press OK to apply your changes.
  6. Press the play button to see your formatting applied to the event data.

Save your work, the layout is completed.

Master playlist

Add to master playlist

Finally, let's add the new layout to the master playlist and insure that all the advice are displayed.

  1. Go back to the root of the project by clicking on the "Datafeed-calendar" name in the breadcrumb.
  2. Double click on the project master file "index.svg" to open it in the Preview panel.
  3. Double-click on the playlist layer inside the preview panel (or edit panel) to open the playlist within the main layout context (i.e. without closing index.svg document). See more details about editing within layout.
  4. Drag & drop the "Calendar" Layout from the browse panel into the edit panel.

Save your work.

See also

The following video tutorials are covering the same subject as the one presented on this page:

This page was last modified on 2 May 2017, at 09:22.