Guide for the web designer for displays
or right click design version in cloud
TABLE OF CONTENTS
- Login step2:
- Entering the Editor (overview)
- Open new layout:
- Text Element:
- Barcode and QR code:
After accessing the URL the user is met with the login page
User will add username credentials and click “Get started”
The system will now try the combination of the username and password on the various cloud systems:
(Delfi own and private clouds)
After checking accessibility on the various systems the user now get a list of the systems the user has access to.
If user has been logged on before then the user needs to state if he/she wants to continue the last session or start over.
User will select system, installation group (this can be skipped), installation.
The user now needs to either open existing design from cloud or from local storage or create a new design.
When opening existing design from cloud – version must also be selected.
Create new (Package name is optional):
Open existing (User needs to select a local JSON file (new design) or BDM file (old design/keyframe file)
Entering the Editor (overview)
- Create Elements bar: Crete various elements by clicking and draw in canvas area.
- Quick properties bar: Change to most common properties here
- Elements list: List of the elements added to the design
- Element properties area: Here all the properties of the single element can be changed
- Preview: After adding elements to the canvas area it is possible to see how it would look like with product data.
- Upload to cloud: By entering the menu it is possible to upload the design to cloud and make it work on displays.
- Layouts list: List of possible layout to be designed (The list is configured in cloud under “Definitions”).
Upload to cloud:
Here can download the keyframe file (BDM file) to local storage.
Upload the design and keyframe file to installation.
Upload the design and keyframe file to installation group.
The user can choose to publish upon upload.
File -> Save (Top left)
Stretch and align the textbox
Open new layout:
When creating/opening a design the designer will open the default layout for Chroma21.
To open other layouts to make design for them then the user must click “Design” and open the wanted layout:
Autosize: the user can select between Autosize font or Autosize Box
Autosize font will make sure the text will keep inside the box. If more text the smaller font is added the text. Autosize box will resize the box so it matches the text.
If auto size font is used and Priceformat is enabled then the user can use the autosizefont factor.
Using a decimal from 1-3.9 will change the superscript hight in comparison to the whole number price.
The larger the factor the smaller the superscript
When assigning a product value to a text element:
It is possible to change the format (if input variable is a price)
and/or make advanced value where the user combines static text and variables from product.
Make condition (Dependency) to element:
Here you can make the element show only if a certain condition is met.
e.g. only show former price if an on-sale price is present.
Barcode and QR code:
When user creates a barcode then the user can select from the dropdown what type of barcode it needs to be.
Use the preview function to see how the design would look on a display.
Preview can be found in the top right corner of the editor
After opening the preview the system will automatically auto fill the products with products from the installation on cloud.
The number of product is determined by the opened layouts. If some layouts are expecting multiple products (e.g. dual layout) then the system will show that.
The user can search for other product and change the input product(s). Just like when assigning products to display.
The designer will load the values of the product into the preview function. If the user wants to change some values (e.g. to trick some functionality) – then the user can do the in the Data section.
After clicking “OK” the preview will be presented. The user can toggle between the opened layouts at the bottom of the preview.