Guide for the web designer for displays
https://displaydesigner.breecesystem.com
or right click design version in cloud
TABLE OF CONTENTS
- Login:
- Login step2:
- Entering the Editor (overview)
- Open new layout:
- Text Element:
- Image:
- Barcode and QR code:
- Preview:
Login:
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)
- DEMO
- Prod1
- Prod2
- …
If you are using different password for the various clouds, use the password for the cloud where you want to work.
Login step2:
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)
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.
Uploading to Group will upload the design to all installations on the group
After upload the Cloud will confirm the 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:
The four most recent opened layouts will be shown in the top of the canvas.
If an additional layout is opened, the "oldest" will be replaced in the list.
Text Element:
ProtectText you can make sure that the correct value is visible in the textbox. If some of the text cannot be displayed all the text will be exchanged by the letter X.
WordWrap is used to break long lines of text so that they fit within a given width or length. When a line of text exceeds the available width, WordWrap automatically moves the excess text to a new line, ensuring that the text remains within the defined area and avoids stretching beyond the boundaries.
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.
Function: Price format enable dec
The function “Price format enable dec” in display webdesigner allows you to exchange the decimal value of an input to a custom string.
To enable the function, select your text element, press assign, then press Price format
Make sure the format is set to “Price” and option “Price format enable dec” is left unticked.
In order for the custom string to be shown, the decimal value has to be zero.
See example 1: “10,00”
Custom string: ,-
Input: 10,00
Output: 10,-
Example 1:
If the decimal value does not equal zero, the decimal value will remain, regardless of the custom string.
See example 2: “20,75”
Custom string: ,-
Input: 20,75
Output: 20,75 (decimals uplifted)
Example 2:
If option “Price format enable dec” is ticked, the decimals will be shown regardless of value. This means ,00 will always be shown, even if the input does not include decimals
(when the option is ticked, the custom string field is inactive)
Examples 3 and 4 have different inputs, but the same output.
See example 3: “10,00”
Option “Price format enable dec” ticked.
Input: 10,00
Output 10,00 (decimals uplifted)
Example 3:
See example 4: “10”
Option “Price format enable dec” ticked.
Input: 10
Output 10,00 (decimals uplifted)
Example 4:
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.
Shadow Effect
It is possible to add shadow effect to elements. This is done by selecting the desired element with a text/number value and setting the shadow color, shadow adjustment and shadow placement on the left pane.
To remove the shadow effect, choose the transparent color.
The price has shadow effect, see picture below:
Image:
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.
Tables:
Make a table to the design and deside Columns and Rows
Define Width and Height, if the table is visible and the colour of the borders.
Turn the grid on/off:
Preview:
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
1: Quick Preview - Shows the current designs with the (a.) Last selected product in Preview or (b.) the first product (s)from the Product list.
2: Preview - This lets you choose what product(s) to use in the preview.
- A) You can select what product(s) are to be used here. When a design contains multiple products, a line for each product will be available. The number of product is determined by the opened layouts. If some layouts are expecting multiple products (e.g. dual layout), the system will show two lines.
The arrows lets you scroll through the product list easily.
The user can search for other products in the dropdown menu. Both product name or product number can be used to find a product.
- B) For each product (as selected on the left side), it is possible to change the individuals product variables.
- C) Once the products are selected as desired, click here to generate the image.
Once the image is generated, it will be shown on the right side of this window
- A) The user can toggle between the all layouts in the design in the upper right dropdown menu.
- B) It is possible to send the generated image to a display on the installation that is selected when opening the design. Simply input the display serialnumber and press "Send to display".
---------------
Edit/create system template
Editing a system template is only possible from the webdesigner GUI – not from cloud now.
When logging into to the webdesigner enable the checkmark “Edit / create system template”
and select if you want to edit/create a template for installation or group.
If a system template does not exist, then it will be created. If it does then it will be opened.
Configure default properties for design
Here it is possible to configure e.g. a default text color.
This means that every time a text element is created then the color of the text will automatically be this color.
Simply click “Canvas” and then the “Wheel”
Preview image is now retrieved from cloud
Now we send the design to cloud and use the image generator in cloud to create the preview image.
This means that you will se the exact same image as you would on the display.
Send preview image directly to display
In the preview function it is now possible to send the created preview image to a display on the installation used.
Make sure the display used is the same type as used in the preview function – otherwise you will get error.
Arrows for fine tuning position - keyboard arrowkey input also possible
Arrows has been added in the “Position and Size”-area to change position of an element 1 px at a time
It is also possible to use your keyboard arrowkeys for movement one pixel at a time.
Import and scale layouts
If you have made a design for a Croma21 and want the same design for a Chroma29, then the Chroma21 can easily be imported in the Chroma29 layout.
The import will automatically scale the elements to fit the size of a Chroma29.
Click on “Canvas” element and click the “Import” button – select the layout you want to import from.
Encoding
To set a specific encoding for the layout, press Canvas in the elements list, then change the encoding:
Show or hide elements on canvas
To show or hide elements on canvas, use the "eye" icon to the right of the element in the elements list.
This is useful when you need to move an underlying element on canvas, but another element is in the way.
Group or ungroup elements:
Grouping elements can be useful if you want to move certain elements at the same time.
To group elements, shift left click to mark the desired elements, then right click "Group".
To undo the group, right click the group header in the elements list and choose "Ungroup".
Permissions needed:
To be able to use the webdesigner on your installation your user should have these 3 permissions – please contact Breece support if you need new user/help:
Installation reader, product reader, design adm.