Welcome to nfinityXID
This application allows users to create templates and presentations, which can be used within playlists or interactive presentations published to an nfinityX media device. Create single page dynamic presentations that allow you to connect to live data feeds. This is very useful for menus, business information and airport flight information screens. The XID user interface presents the user with a set of controls allowing him/her to create engaging visual presentations.
The XID interface has three sections
1. Horizontal Menu Bar
Project Name
Once you have saved your XID project, the project name will display in the top left corner of the screen.
Save As & Save
When you create your project, you will save it as the title you want to give it. The next time you open it, the Save button will appear for you to simply save your changes.
Project Settings
Select the aspect ratio, you require your XID project to be, from the drop-down menu. Your options are 16:9, 9:16 and 4:4. The aspect ratio can also be customized. Projects can be renamed or deleted from this window as well.
Edit
The edit menu offers the user the convenience of the following actions Undo, Redo, Cut, Copy, Paste, Stretch, Crop, Duplicate and Delete.
Preview
Clicking on preview allows you to view your design. You are also able to test your interactive projects by navigating through your customer journey.
Snapshot
This allows you to capture a snapshot of your page design.
Api Manager
The Api Manager enables the user to attach live data to the project. This can be done via Google Sheets, json files or REST API’s.
Script Editor
This is where you would go to add and edit custom Javascript scripts.
Location-based
When you click on Location-based, a window will open. This is where you will set up locations that are used for dynamic text.
Share
Share the project that you are working on with other users by making them project owners.
2. Toolbars (Left panel)
Add Page
Click on the Add Page button to create a new page.
Remove page
Click on the Remove Page button to delete a page.
duplicate page
Click on the Duplicate Page button to create a copy of a page.
ADD TEXT
Click on the Add Text button to add text to a page.
ADD SHAPES
Click on the pyramid icon to add shapes to your presentation.
HOTSPOTS
Add a Hotspot (transparent overlay) to your project by clicking on the flame icon.
ADD A WEBPAGE
Click on Add a Webpage to add a web component using a URL. It is important to note that the site needs to allow CORS.
TICKER
Add animated text or an image feed to your project.
DYNAMIC SMART OBJECTS
INTERACTIVE MODE
Create interactive presentations allowing users to navigate to different pages in the presentation by using Interactive Mode.
ADD IMAGE MODAL
Click on Add Image Modal to add further information to screens.
DUPLICATE ELEMENT
Click on the Duplicate Element icon to duplicate elements.
DELETE ELEMENT
Click on the Delete Element icon to delete elements.
PEXEL LIBRARY
Import Pexel images directly into your XID project.
3. XID image and control panels
Design tab
The Design tab contains all functions related to the designing of your project. I.e. pages, fonts, elements & animations.
Layers tab
The Layers tab expands the different layers that make up the page that you are on.
Position elements in the foreground or background by dragging the layers up/down.
Advanced tab
The Advanced tab contains toggles where you can switch the Hot Spots and Template Timeout on & off.
Page Control – Pages
Page Name
Displays the name of the page that you are on.
Background
Change the background colour of the page that you are on by clicking on the block & selecting the colour you want your page to be from the colour picker.
Go To Page
This is where you select to which page your project must transition.
Timeout
This refers to the duration of the page you are on before it transitions to the next specified page.
Add Page & Remove
Add new pages & remove existing ones from this panel.
Text Control – Text
Text Tools
Font
Font Size
Text Aligment
Text Style
Bold & Underline
Remove Font Style
Background- & Foreground Colour
Unordered List
Ordered List
Table
Link
Full Screen
Element Control – Element
Name
Displays the name of the element.
Element Control – Appearance
Color
Change the colour of your element.
Background
Change the colour of your element’s background.
Border
Give your element a coloured border.
Element Control – Transform & Position
STRETCH TO FILL
When inserting a background image into your presentation, you will use Stretch To Fill to make the background full screen.
SHRINK ELEMENT
Shrink Element will do the opposite to Stretch to Fill. It will take a full screen image and shrink it down to its original size.
STRETCH TO FILL HEIGHT
Using Stretch To Fill Height will stretch the element to fill the height of your presentation canvas.
STRETCH TO FILL WIDTH
Using Stretch To Fill Width will stretch the element to fill the width of your presentation canvas.
FLIP VERTICALLY
Flip the element vertically by clicking on this icon.
FLIP HORIZONTALLY
Flip the element horizontally by clicking on this icon.
CROP
Crop the image by clicking on this icon.
Attributes
Rotate Shape – Rotate Shape is literally used to rotate elements.
Opacity – Control how transparent your elements are with the Opacity scrollbar.
Horizontal Shadow – Move the element’s shadow left or right using the Horizontal Shadow scrollbar.
Vertical Shadow – Move the element’s shadow up or down using the Vertical Shadow scrollbar.
Blur Shadow – Blur the element’s shadow using the Blur Shadow scrollbar.
Shadow Opacity – Increase or decrease the opacity of your element’s shadow by dragging the scrollbar left or right.
Edge Roundness – Set the roundness of the edges of your element’s background using the Edge Roundness scrollbar.
Padding – Add padding to your element’s background using the Padding scrollbar.
Border Width – Increase and decrease the width of the border around your element.
SNAP TO GRID
SNAP TO ELEMENTS & RULERS
Animation Control – Animations
Animation In
Pulse
The element will pulse in and out.
Floating
The element will float up and down.
Tossing
The element will sway from side to side in its position.
Spin
The element will turn in circles.
Slide Down or Slide Up
The element will either slide into its position from the top down or the bottom up.
Slide Left or Slide Right
The element will slide into its position either from the right to the left or left to the right.
Pull Up or Pull Down
The element will reveal in its position by either pulling up or down.
Stretch Left or Stretch Right
The element will reveal in its position by either stretching to the left or the right. It is similar to pulling up or down, but just horizontally.
Slide Expand Up or Expand Up
The element will slide into position from the bottom and expand horizontally or vertically.
Fade In
The element will fade in after a set duration.
Expand Open
The element will expand outwards and contract to its original state after a set duration.
Big Entrance
The element expands outwards as it reveals.
Hatch
The element expands upwards in its position and wiggles from side to side.
Bounce
The element will bounce up and land in its position.
Animation Out
None
There is no animation out.
Fade Out
The element will fade out.