Using Applications for Building Touch Screens

Contents

When using the Applications module to create touchscreen, it’s important to remember that touchscreen content will be built around your design work that is created outside of the software (i.e. Photoshop, PowerPoint). Mapping your content, from your backgrounds, buttons, pages, widgets; etc. should be planned out in advance so you have the framework in place before you start building your touchscreen in the software.

Please also see our step-by-step video series for Basic Training for building Touchscreen Applications.

There are three sections under the ‘Applications‘ module that are required for building a touchscreen:

Applications – Applications allows you to manage the overall application. This section will also provide direct links to touchscreen page Properties, Designer and Previews. Once your design work is complete, the Application is what is assigned to your Player(s).

Templates – These are the master templates that will provide the framework for your Applications; design elements that you want to show in the same place on multiple pages: Main background, navigation buttons and links to various ‘Pages’.

Pages – These are the individual touchscreens or “pages” of your overall Application. Much like pages on a website. These pages will contain design elements that are separate from the main template: Text zones, widgets, images or videos, playlists, event tables, products tables; etc..

Templates

Templates will provide the framework for your Application; design elements that you want to show in the same place on multiple pages: Main background, navigation buttons and links to various Pages. If some of your pages require a different background with different buttons, multiple templates can be created and added to your Application properties:

1) Under Templates, click on the ‘Create New’ button

2) Name the template and modify the Width and Height if needed. By default, the template resolution will be 1920×1080 for landscape displays. For portrait, change to 1080×1920:

3) Click Save.

4) From the main Applications page, click on the Designer icon for the template:

5) From the Designer we can upload and add our background and buttons from the ‘Add Image’ icon:

Once you’re happy with your main template, click back on the ‘Applications‘ icon from the mini navigation or from the Home page (the Designer will save all of your work automatically).

Pages

Pages are the various layouts or pages of the overall application. This section is where you will build and manage content for each page.

1) From the Applications page, click on the ‘Create New’ button under Applications. When naming your Pages, provide as much detail as possible so you can quickly identify the layouts when linking them to the Template.

2) Give your page a name. Modify the Width and Height if needed. By default, the template resolution will be 1920×1080 for landscape displays. For portrait, change to 1080×1920 (the resolution should match your Template):

3) Select the Template this page should use.

4) If needed, set a Timeout Time (this allows the screen to time out and return to the Timeout Touchscreen you define after a certain amount of time).

5) Select the Timeout you would like the application to default to after the timeout.

6) The Timeout Mode will allow you to specify how you would like the timeout to respond.

7) Once you’ve created all of your Pages, you will need to go back to the Template by clicking on the Designer:

8) From the designer, right click on your buttons and select ‘Link to Page’:

9) From the Page drop down, select the page you would like to link to the button:

10) Click ‘Save’ to save this action. Or click ‘Save and Design’ to save the link and go to the page to make edits to that page.

11) You can also Create a new page from the ‘New Page’ field:

12) You can also select which template the link should be associated with if you have multiple Templates. Or ‘Save and Design’ to create a new template:

As you’re building your pages, you can preview your work at any time, click on the ‘Preview’ icon for the Application. This will open the application in the same tab. You will need to click the back arrow in your browser to go back to the Applications module:

Applications

When you’re ready to deploy your application content to you Player(s), click on the ‘Players‘ icon from the home page and click on the player you would like to assign the application to:

1) Click on the ‘Application’ drop down and select the application:

2) Click ‘Save’

3) As long as the player is online and performing a health check, content will start to download to the live screen.

You can manage your touchscreens Properties, Designer and view the Preview by clicking on the ‘Properties’ icon for your Application.