HTML5 Editor

The HTML5 Editor allows you to create your own screens, edit them or customize existing templates for your own purposes.

In the following chapter you will find:

1. Structure of the HTML5 Editor
2. Create a New Screen
3. Open Screen Template

Note:
You need the appropriate user rights to use the HTML5 Editor. As an administrator, you can activate the right for your sub-users via the User Management.

1. Structure of the HTML5 Editor

  • Structure of the editor interface
  • Upper function bar
  • Mode
  • Lower function bar

The template editor is divided into the following areas:

  1. Function Bars
    - Upper function bar
    - Lower function bar
  2. Page Information and Elements 
  3. Screen Design 
  4. Settings

Function Bars

Upper Function Bar

The upper function bar provides you the following functions:

  1. Preview
  2. Reload
  3. Undo - Redo 
  4. Zoom in - Zoom out
  5. Mode
  6. Lock screen

Mode

This function allows you to switch from administrator mode (= full range of editing functions and properties features) to sub-user mode (= selection of fewer functions depending on user settings). In this way, you can also check the edits in administrator mode in sub-user mode.

Lower Function Bar

On the left side of the lower function bar, you will see the user name you have used to log in to your account. On the right are the Save and Close functions. First click on Save to save your edits and then on Close, if you want to leave the editor.

2. Create New Screen

  • Open HTML5 Editor
  • Input Window

Open HTML5 Editor

  1. In the My templates bar, click on → New Screen.
  2. Open the context menu by right-clicking in the My templates area and click on the menu item → New Screen.
  1. On the Home screen, click → Playlists. In the Playlist Management, click on the Plus Symbol →  and then on the menu item → New Screen, which you will find at the top of the open context menu.

Input Window

This first opens a window in which you need to specify a name for the new screen → this is a mandatory entry. Below this, you can define properties such as height/width, playback duration and background color → these entries are stored in the program by default and can be optionally changed here. The subsequent click on Save then takes you to the HTML5 Editor, accepting the entries you have made

3. Open Screen Template

In addition to the option to create a new screen, templates are available that you can modify to suit your own requirements. Drag and drop the desired template into the currently opened playlist. Right-click on the element you have just inserted and then click on → Edit template to make individual adjustments.