banner1.jpg

Juicy Foods

What We Will Achieve in this Tutorial

In this tutorial we will setup a client and create all the necessary components to create a simple menu board that acquires all the dynamic data from an ODBC source. In this tutorial you will learn how to:

  1. Create a Client
  2. Setup a Player
  3. Setup a Channel for the player
  4. Design a professional looking menu board in the Overlay Designer which includes the following elements:
    • Use of a professionally designed reference image
    • Insert images
    • Insert text
    • Connect up elements in your menu board to an ODBC data source
    • Setup a text ticker with a text file
    • Insert and format a date / time object
  5. Schedule the menu board to play at certain times
  6. Upload all media to a Player and play back your menu board

Files Necessary for this Tutorial

All the necessary files are found in ‘C:\Program Files\Isenzo Mediacaster\Samples\Overlays - Juicy Food’

Create Juicy Food Client

The first step will be to create our Juicy Food client. Right click the Clients or Groups menu item on the tree menu and select ‘New’.

This will open the appropriate form which enables you to create a new client.

Enter ‘Juicy Food’ into the description field. As this tutorial is being done on a local machine assuming that you have already setup a Player and FTP server, we put merely enter these details in the IP Address, Username and Password.

The Juicy Food client is created with the full tree structure in place.

Creating the Juicy Food Overlay

The first step will be to create our Juicy Food Overlay. Right click the Overlays menu item on the tree menu and select ‘New’.

This will open the Overlay Designer. To make the task of constructing the overlay easier we use a template file that has ideally been professionally designed. Right click the overlay work area.

Select ‘Select File’ from the popup menu. Browse to the tutorial files (C:\Program Files\Isenzo Mediacaster\Samples\Overlays - Juicy Food) and select ‘Juicy Food Reference.jpg’.

This image will load into the background and enable us to layout all our other elements.

Give your overlay a name by entering ‘Juicy Food Overlay’ into the description field. It would now be a good idea to save your overlay. Click ‘Apply’ button at the bottom. This will apply your changes. ‘The ‘Save’ button will save and close the Overlay Designer. The ‘Apply’ button enables you to save your work without closing the designer.

Inserting the images

Create a picture object by clicking the  icon on the overlay toolbar. Clicking on the object will select it. You can also select the object by clicking on the background and holding the mouse left button down and dragging a selection window around the object.

Use the mouse cursor to place and resize all the image placeholders.

In our example we are creating a menu board for Juicy Foods with five menu items breakfast, sandwiches, burgers, pizza and wraps. Right click on the image place holder images and select ‘Select File’ and browse to the Juicy Food folder. Select the correct file and click ‘Open’. The image loads into the picture object.

Remember to rename all the images appropriately. Do this by entering a name in the (Name) field in the Property grid on the left.

In this way you will be able to manage them more easily in the layers list on the top right hand corner.

Inserting the Prices Using an ODBC Source

Mediacaster makes it possible to insert dynamic values into your overlays. An ideal application of this principle would be prices for menu items. All prices can change centrally in a data source and the Players displaying the menu boards would automatically be updated with the correct values without requiring an update.

You will have to configure an ODBC database before we can reference it in Mediacaster. To do this open control panel in Windows. Double click ‘Administrative Tools’.

Now double click ‘Data Sources (ODBC)’.

Ensure that you click the ‘System DSN’ tab. You can now add your database.

Click on the ‘Add’ button and select the Microsoft Access driver and click ‘Finish’.

Define a Data Source Name by entering ‘Mediacaster’ in the first field. This will be the name we reference in the Mediacaster Manager.

Click the ‘Select’ button and browse to the Juicy Food folder and select ‘mediacaster.mdb’.

This is the Access database file.

Click on the ‘OK’ button.

You now have defined an ODBC Data Source that can be referenced in the Overlay Designer.

Click on the ‘OK’ button and return to the Mediacaster Overlay Designer.

Create a database object by clicking the  icon on the overlay toolbar.

Name the database object and enter the name (‘Mediacaster’) we defined when we set up an ODBC Data Source into the Data Source Name field in the Property grid. We now have to construct a SQL query that will fetch the appropriate data value in the database. To retrieve the price for the Breakfast enter:
SELECT price FROM menu_prices WHERE menu_item = 'breakfast'
into the SQL field. The price is automatically displayed. All we have to do now is configure the font properties of the price to display correctly in the design.

Please note: The Overlay Designer is a guide only. You may have to tweak the positions of your elements to conform to the final resolution of the Player display screen. Always ensure therefore your preview the design on a Player screen before approval.

Right click the database object and select ‘Font’.

Select font properties as below:

Use the background reference image to make final tweaks to the font size.

You know have to change the font color to reflect the blue in the Juicy Food logo. You can easily select this color by left clicking the reference image in the area that is blue in the logo. This will change the color in the color reference block.

You can lock the color when you are happy with it. This will prevent the color from being overridden if you click any other part of the image by mistake. Right click on the database object and select ‘Use Color’. This will change the font color to the active color.

Add a database object for all the prices. The SQL statements for all the prices are:

  1. Breakfast -  SELECT price FROM menu_prices WHERE menu_item = ’breakfast’
  2. Sandwiches - SELECT price FROM menu_prices WHERE menu_item = ’sandwiches’
  3. Burgers - SELECT price FROM menu_prices WHERE menu_item = ’burgers’
  4. Pizza - SELECT price FROM menu_prices WHERE menu_item =’pizzas’
  5. Wraps - SELECT price FROM menu_prices WHERE menu_item =’wraps’

Position the images and database objects correctly.

Insert the Promotional Ticker

In this tutorial you will be using a text file for the Juicy Food overlay.

Create a text file object by clicking the  icon on the overlay toolbar. Right click on the text file object and select ‘Select File’.

Browse to the Juicy Food folder and select and open ‘ticker news.txt’. Change the scrolling property of the Text File object in the property grid on the left to ‘Yes’.

The text object now stretches across the width of the overlay and the text begins to scroll from right to left. You’ll notice the text has an opaque background by default. To change this, set the transparency of the Text File object to 100% in the property grid.

Adjust the font properties as you did with the ODBC objects until you are happy with the font color and size.

Adding Text and Time to the Top Right Corner

Lastly we need to add two more object types to finish the Juicy Food Overlay.

The first thing to do is add a text object by clicking the  icon on the overlay toolbar.

You will be adding three text objects with the following text strings.

  1. ‘It’s’
  2. ‘.’
  3. It’s a good time for a great meal!’

Add the text stings to the ‘Text’ field of the properties grid and ensure the text’s anti aliased property is set to ‘Yes’.

Using the reference background image alter the text’s font, color, transparency and antialias. The Text object’s transparency property is set by right click on the text object and selecting ‘Use Transparent Background’.

We will now add the time object. Create a date and/or time object by clicking the  icon on the overlay toolbar. The time format shown is constructed using the ‘Text’ field in the properties grid. The time display is designed to look like 12:00:00 Thursday, 24/02/2009 depending on the date and time. To achieve this enter HH:MM:SS, dddd, mm/dd/yyyy into the ‘Text’ field. For a full explanation of the time expression formats click here.

Using the reference background image alter the text’s font, color and transparency. To  make the text’s background transparent, right click on the text object and select ‘Use Transparent Background’.

Congratulations you have now completed the design of your Juicy Food overlay! There are just a few more simple steps to see the overlay playing in a player.

Inserting the Correct Background

Replace the reference image in the overlay background with ‘Background_main_ticker.jpg’ in the Juicy Food folder.  You should have a fully functioning overlay in the Overlay Designer.

Configure a Player to Display the Juicy Food Overlay

You can configure a local player to run the Juicy Food overlay. To see an explanation of how to do this click here. Once you have a local player configured you must point to this player in Mediacaster Manager. In the Juicy Food client right click ‘Players’ in the tree menu and select ‘New’. This adds a configured Player to the Juicy Food client.

Name the Player configuration and enter the IP address of the Player you configured.

Click ‘Save’.

Assign the Player to a Channel and Allocate the Overlay to a Schedule

Any Players that have been added to a client in Mediacaster must be assigned to a channel. To create a channel right click ‘Channels’ in the Juicy Food client in the tree menu an select ‘New’.

In the form that appears enter a name for the channel and select the player you have just configured. Click the ‘>>’ button to move the Player into the ‘Selected Players’ column.

Click ‘Save’.

We will create a very simple schedule to play the overlay. Right click on ‘Schedules’ on the tree menu under the Juicy Food client and select ‘New’.

In the schedules form that appears enter a name for your schedule in the ‘Description’ field and choose the channel you have just assigned the Player to by clicking the drop down list next to ‘Channel’. You will be presented with a calendar view of the present time.

To add your overlay to the schedule click the ‘New’ button at the bottom of the form.

Click the ‘Overlay’ drop down list in the form that appears. Select the Juicy Foods overlay that you designed, alter the time range of when you would like the overlay to play and click ‘Save’. It should now appear in the overlay list in the schedule view. Click ‘Save’.

Upload the Overlay to the Player

All that needs to be done now before we can see our overlay in action is to upload to the Player. To do this click the ‘Upload Media and Playlists’ icon on the toolbar.

This will open the server manager form.

Make sure the correct client is selected in the ‘Client or Group’ dropdown and then select the correct channel in the ‘Channel’ dropdown. Click the ‘Add’ button. A dialogue appears asking whether you want to upload.

Click ‘Yes’.

A notification will popup informing you of progress.

Open the player in a window to download the media and playlists and check that everything is playing correctly.

The Player should be playing the overlay you have just designed.

AddThis Social Bookmark Button

News

Mediacaster powers Hello Mojo "ii-stations" during 2010 FIFA World Cup™
Thursday, 10 June 2010
Urban media practitioners, Hello Mojo, have selected Isenzo’s digital signage software to power integrated information stations (ii-stations) situated in high traffic locations across South Africa.
Isenzo Releases Mediacaster 3.0 Service Pack 1
Thursday, 03 June 2010
Mediacaster 3.0 Service Pack 1 has been released adding numerous exciting new features as well as fixing some bugs.