Important aspects to creating graphical or media surfaces

When creating graphical or media surfaces, both for Surface Applications, described in this chapter, and Messages, there are a few things that you should keep in mind.

In this section we will describe a few points of consideration, that may help you improve the quality of your graphical profile or marketing material.

Components available in the Surface Editor

The following components can be inserted, by drag and drop, and they have properties that can be set.

There are three small buttons on each component: Delete, Send to back and Bring to front.

Almost all components have location and size that can be set both by dragging them and their corners and by directly editing their numerical coordinates and dimensions (Zoom set to 100%).

Since the fonts are not exactly the same on a PC screen and an Information Surface, there can be some discrepancies between the preview and the actual page on a Surface.

Background

• Positional Display

• Background color - select a background color by clicking on the checkered box and selecting the wanted color in the window that is opened:

• Background image - Click Edit if you want to add a background image. The following window will be opened:

Here you can select if the image should be repeated over the background and how it should be aligned, horizontally (left/center/right) and vertically (top/center/bottom). It is also possible to remove a background image that has been added earlier.

• Page locale - select the language for the page here.

• Return to start page - number of seconds for returning to start page.

Button

• Service - select which Service to connect to, from a drop-down list.

• Text - the text that should be displayed on the button. If a Service has been selected, there is an Override check box. If it is checked, it is possible to use the text in the Text box instead of the external name of the Service, which is used by default.

• Image - image for the button (a default one is available, but it is possible to select another image of your choice). Accepted formats are: jpg, jpeg, png and bmp. We recommend images with a transparent background.

• Link to page - link to another page.

• Text color - select the wanted color of the text here.

• Text position - enter the position (top and left) of the text on the button.

• Font - default is Arial, but other fonts may be added.

• Align - select, from a drop-down list, if the text should be aligned Left, Right, Center or Justify.

• Background color - color of the background area of the button.

• Keep image aspect ratio - if this check box is checked, then the width and height of the image, i.e the relative horizontal and vertical sizes, are kept. For example, if a graphic has an aspect ratio of 2:1, it means that the width is twice as large as the height. When resizing graphics, it is important to maintain the aspect ratio to avoid stretching the graphic out of proportion.

• Image scaling - Center, Fill, Fit, or Stretch.

Extended button

This component should be used when you want a Button with several lines of text.

Since each button has a permanent unique id, such as button_extended_0, it is possible to dynamically set the text content of the button via a widget. This facilitates the use of different languages etc.

To update text in buttons from a widget, in this example for extended button with id button_extended_0, update the following:

$(window.parent.document.getElementById('button_extended_0')).find('.text_single_element').text('First row');

$(window.parent.document.getElementById('button_extended_0')).find('.text_element_2').text('Second row');

$(window.parent.document.getElementById('button_extended_0')).find('.text_element_3').text('Third row');

• Service - select which Service to connect to, from a drop-down list.

• Text - the text that should be displayed, as main text, on the button. If a Service has been selected, there is an Override check box. If it is checked, it is possible to use the text in the Text box instead of the external name of the Service, which is used by default.

• Image - image for the extended button (a default one is available, but it is possible to select another image of your choice). Accepted formats are: jpg, jpeg, png and bmp. We recommend images with a transparent background.

• Link to page - link to another page.

• Text color - select the wanted color of the text here.

• Text position - enter the position (top and left) of the main text on the button.

• Font - default is Arial, but other fonts may be added.

• Align - select, from a drop-down list, if the main text should be aligned Left, Right, Center or Justify.

• Background color - color of the background area of the button.

• Image scaling - Center, Fill, Fit, or Stretch.

• Text 2 / Text 3 - Here you can edit the settings for the text on row 2 and 3 of the extended button. You can change the Text, Text color, Text position (Top, and Left), Font and how the text should be Aligned (Left, Right, Center, or Justified).

Text

• Text - text to display.

• Text color - select the wanted color of the text here.

• Font - default is Arial, but other fonts may be added.

• Align - select if the text should be aligned Left, Right, Center or Justify.

• Background color - select the wanted background color here.

Image

Please note that rotation of for example images cannot be properly achieved in any layouts made with browsers IE7 / IE8. The rotation property is accessible but results will be unsatisfying.

• Positional Display

• Image - select a new image by clicking the Edit button. Accepted image formats are: jpg, jpeg, png and bmp. We recommend images with a transparent background.

For ticket layouts, it is only possible to add monochrome bitmap (bmp) pictures.

• Image scaling - Center, Fill, Fit, or Stretch.

Vertical Message

• Positional Display

Keep in mind that for a good graphical result, the size of the Vertical Message area should correspond well to the size of the picture that is to be used in the Context Marketing application. The size of the Vertical Message area is adjusted in the bottom left area of the Surface Editor window (as with all other components):

• Background color - select the wanted background color here.

• Time to show - the length of time that the Vertical Message should be shown. If the field is left empty, the Vertical Message is not removed.

Link

• Text - text to display.

• Link to page - link to another page. Select the page from a drop-down list.

• Text color - select the wanted color of the text here.

• Font - default is Arial, but other fonts may be added.

• Background color - select the wanted background color here.

URL

• URL - enter the wanted web address here.

Channel Player

• Positional Display

The playlist for this area is set up in the Playlist Editor in the Context Marketing application.

• Keep image aspect ratio - if this check box is checked, then the width and height of the video, i.e the relative horizontal and vertical sizes, are kept. For example, if a video has an aspect ratio of 2:1, it means that the width is twice as large as the height.

• Muted - check this check box if you want the video to be muted.

Keep in mind that for a good graphical result, the size of the Channel Player area should correspond well to the size of the video, link or image that is to be used in the Context Marketing application.

For more information about accepted video, image and link formats, see “Accepted formats” .

Also see “Available positions” for more information about suitable image positions in the Channel Player area.

Widget

For more information about widgets, please see the Widgets Guide, which can be found on Qmatic World.

• Positional Display

The properties, naturally, depend on which widget you have selected. For a complete list and description of all available widget properties, please see the Widgets Guide, which can be found on Qmatic World

Barcode

• Barcode type - select one of the following types: Interleaved 2/5, ITF-14, Code 39, Code 128, EAN 13 code, DataMatrix (square), DataMatrix (rectangular), and QR Code.

• System information - from a drop-down list, select which system information should be displayed (Custom parameter, Current time, Ticket id, Service name, Mobile Ticket URL, or Current date). If Custom parameter is selected, then a valid Custom parameter name string has to be entered in the field below. These strings are found in the Unit Type template of your printer in your Equipment Profile.

• Custom parameter name - used when Custom parameter is selected as System information. Device parameter strings are defined in the Unit Type template of the applicable printer. Example: The string ticketCount is used for Tickets left.

• Calculate barcode checksum - decide whether or not to use barcode checksum calculation. Note that checksums are not used for all barcode types!

System Information

• System information - from a drop-down list, select which system information should be displayed (Custom parameter, Current time, Ticket id, Service name, Mobile Ticket URL or Current date). If Custom parameter is selected, then a valid Custom parameter name string has to be entered in the field below. These strings are found in the Unit Type template of your printer in your Equipment Profile.

• Font - default is Arial, but other fonts may be added.

• Align - select if the text should be aligned Left, Right, Center or Justify.

• Rotation - from a drop-down list, select if the system information should be rotated 0, 90, 180 or 270 degrees.

• Maximum rows - only applicable for system information of type Custom parameter and Service name. From the drop-down list select 1, 2, or 3. This defines how many rows the text, as a maximum, may stretch over. This is especially useful, if you have very long Service names, Branch names, or other custom system information.

The picture below illustrates how this would work in a ticket surface where the system information is left aligned and not rotated:

So, if you, for example, select Maximum rows: 1 and the text is too long to fit in one row, then it will shrink to fit within the maximum allowed width. The text will however never be smaller than 6pt.

If you selected Maximum rows: 2 or 3, then long text is rendered on multiple lines and the overflow is cropped. In this scenario, long words that overflow will also be cropped, i.e they will not be hyphenated.

• Preview text - here you can enter the wanted text and when you then Save and Preview your ticket surface you can make sure that the text looks as expected.