The Breece Designer software enables you to create and edit designs for all the Breece ELS displays. When connected to a Breece System you can easily test the designs and make sure that everything is looking as it should. 

Breece Designer Login

To use the Breece Designer you need to have a running Breece System. Either Breece Cloud or Breece On-premises.

Alternatively, you can use the Offline mode if you don’t have access to a Breece System but this will limit the functionality of the Designer.

Breece Standard

When you open the Breece Designer, you need to connect to your own Breece System. If you have a Breece On-premises setup select Breece Standard.

In the Server field, you need to locate your Breece Server. If the Designer is installed on the Breece server, use the Default IP-address 127.0.0.1. If you have installed the Designer on your local desktop, write the IP-address on the server.

The Default User for the Breece system is

Press connect.

Breece Cloud

If you have a Breece Cloud setup, select the Breece Cloud Tab.

In the Cloud API field, you write the web address where your Breece Cloud Service is hosted.

You will need a username and password to log in.

When you have successfully connected to the Breece Cloud, you need to select an installation.

Now select the design you want to edit or create a new.

Design Explorer

You can use the Design Explorer to navigate your designs. The icon to the left indicates the type of designer object. 

When selecting a layout you can set general properties in the properties window. 

Root layout properties

• Encoding
  • ISO-8859-1
  • ISO-8859-2

  • ISO-8859-15

  • UTF-8

  • UTF-16

  • windows-1250

  • windows-1251

  • windows-1252

    
    

Change Encoding on the layout if you expirence that some characters that can't de encoded by the default encoding.  

• Renderer Version
• Full Name
• Full Path

Layout properties

• Display Name
• Display Size
• File Name
• Renderer Version

Template –

In the template, you will find templates for the different displays. If you change the template, it will affect all designs on the system. In most cases, you do not need to edit the template.

One example on when to edit the template is when you are using the multiproduct functionality. In the template you can edit the full layout definition. For example, make bars between the different cells. In the Layout definition in the design file, you can only edit one on the cells and this will be copied to the other cells. 

Layout definition for Chroma 42 2x1	Preview

Here the template is empty.  If I want to have a line between the cells I need to edit the template.

Template for Chroma 42 2x1	Preview

If we look at the Layout definition for Chroma 42 2x1 we can you can see that the changes we made in the template is grayed out and can’t be edited.

Design file - 

When you create a new design, the designer will load all layout definitions. This give you easy access start designing for the different displays.

The design files is .bdm files. The .bdm file will hold the design for each display. When you open a design file in the Designer, you will see that all the displays is loaded from the layout definitions. This makes it easy to start designing a new layout. Because all the displays have different formats or colors you, need to make layouts for each display you are using.

Display layout collection - 

Default you will have access to a 1x1-landscape definition for each display. However, you have the option to have multiple layout definitions for each display. To get access to a new layout definition you need to add it to your Breece system and restart the Breece Designer.

When you have made a change to design in the layout collection the icon will change color to black. ,

If you have made changes in one off the designs but haven’t saved yet there will be a pencil on the icon. 

Layout definition - 

Double click the layout you wish to edit and it will open in the Design Window.

When you have made changes to the design, the icon will change color to black. 

If you have made changes in the design but haven’t saved yet, there will be a pencil on the icon.

Create a new design

You can create a new design by·

• Pressing the “Create new design” icon
  
• In the “File” tab select “New”.
  
• Press CTRL + N on the keyboard.
  

Open existing design

You can open an existing design by

• Pressing the “Open design file” icon
  
• In the “File” tab select “Open”.
  
• Press CTRL + O on the keyboard.
  

Preview

In the preview window, you can see a preview of the selected design. If you have selected a variable, the preview will use these.

You will see the preview in the same format as the display. Note that at some point you will need to view the layout on a real display because the preview is only a preview and there may be changes when you load the design on to a display.

You can refresh by clicking on the “Refresh” icon 

Send preview to display

If you want to see the layout on a display, you can send the layout directly to the display. This function will send the layout as shown in the preview. The Designer uses the Breece System to send the layout. This means that the Breece system needs to be running and the display has to be in the Breece system.

1. Click “Refresh”.

2. Click “Send” icon 

3. Scan or type serial number on display.

4. Click send.

Note: This can take a while.

Take in mind that this function does not attach a product to the display. It only overwrites the image. If you want the display to update continuously when the system receives product updates then see how to attach a display to a product in the Breece System User Guide.

Variables

If you have made your design with variables, you can test the Layout with different products. The change will occur in the preview window only. Make sure you have updated the preview and select the desired product. The Preview will display the design with the information from the product inserted into the design.

=========Screen Shot===========

When selecting a product you can see all the name/Value pairs of the selected product. This can give you an overview off what the different variable values. To use a variable write the name off the variable in square brackets [Variable Name] in a value property on an object.

The Edit text box also have a dropdown with all variables. Select a variable from the dropdown and click add. You can add multiple variables. To enter the Edit text box click a Value property on an object and click on the icon.

Design Window

The Design window is in the middle. It consists on an arear where you can edit the layout and at the top, you have all your open designs.

The blue square indicates the arear of the display. We call this the Drawing Arear and only the design inside this square will be visible on the display. 

In the Drawing Arear properties, you can see the some info on the selected layout.

Tools

There are eight different tools you can use to create your designs.  To use a tool select it from the tools bar in the top off the screen.

Pointer 

Select an object

Move the Pointer to the desired object and left click

When selecting an object, squares appear on the corners and sides of the object.

See red markings

You can move a selected object one pixel at a time with arrows or move it by click and holding the left mouse button and then move the mouse.

Select multiple objects

Select an object. Hold SHIFT and select the next object.

Right click on an object

General Properties

Name

When you are working on a layout with many objects, it can be a good idea to name the different objects. This will help you to differentiate between the different objects. At the top of the properties window there is a drop down that lists all objects in the layout. By default, the name property is empty and the objects are differentiated by type.

You can see and select all off the object by clicking the dropdown in the top of the properties window.

Line 

Press and hold the left mouse button at the startposition on the layout. Drag the mouse curser to the end position. Release the mouse button. 

Appearance

Position

Rectangle 

To draw a Rectangle select the Rectangle tool in the toolbar.

Press and hold the left mouse button at the start position on the layout. Drag the mouse curser to the end position. Release the mouse button. 

Appearance

FillColor sets the color inside the rectangle. This will only affect the design if the Fill Type has been selected.

With the FillType you can select witch type of fill you want in the rectangle. Here are some exsamples of the different types of fill. There are more than 40 different fill types.

With the Stroke Color property you can choose color, on the border, depending on the display you are designing a layout for.

The StrokeWidth property determines to width of the border.

Position

Location property will always be the position of the top left corner. The Size will determine the height and width of the rectangle.

Ellipse 

To draw a ellipse select the Elipse tool in the toolbar.

Press and hold the left mouse button at the start position on the layout. Drag the mouse curser to the end position. Release the mouse button. 

Appearance

FillColor sets the color inside the ellipse. This will only affect the design if the Fill Type has been selected.

With the FillType you can select which type of fill you want in the rectangle. Here are some examples of the different types of fill.

With the Stroke Color property, you can choose color, on the border, depending on the display you are designing a layout for.

The StrokeWidth property determines to width of the border.

Position

Location property will always be the position of the top-left corner of the object. The Size will determine the height and width of the Ellipse. 

Pencil 

With the pencil, you can draw freehand in the layout.

Press and hold the left mouse button. When you move the mouse, it will draw a line in its path. When you are done release the button.

Appearance

FillColor sets the color inside the figure you have drawn. This will only affect the design if the Fill Type has been selected.

With the FillType you can select which type of fill you want in the drawing.

With the Stroke Color property, you can choose color depending on which display you are designing a layout.

The StrokeWidth property determines to width of the stroke.

Image 

With the image tool, you insert images into the design.

Dependency

With dependency, you can control if the image is visible or not. If the depended field meets the specific criteria set in the dependency settings, the object will not be visible.

You can set the value of the Depended field as a variable. A variable is inserted by using [variable name]

Dependency settings options

• Is empty
• Is not empty
• Is 0
• Is 1
• Is false
• Is true 

Example

The dependency asks, "Is the dependency field 0?"

If the depended field is “1” the answer is no and the image will be visible.

If the depended field is “0” the answer is yes and the image will NOT be visible.

Image 

With the DynamicValue you can insert images dynamically by referring to an image that is imported into Breece as a dynamic image. Place the image in the import folder under design > DynamicImages 

Write the name off the image in the DynamicValue. 

HorizontalAlignment determines where the image is placed inside the object horizontally.  

With the image property, you can select a specific image to use in your design.  

Select the image property and click. Find the image and press Open. You can now see the image in the image object in your design. 

With Image color, you can select a specific color or have the designer auto detect the color of the image.the default value is auto detect. 

In the Original Size field, you can see the original size of the image.  

note: This cannot be changed.

PreserveAspecRatio lets you decide if you want to preserve the aspect ratio of the original image or you want to be able to change it.  

• True = you can’t change the image aspect ratio 
• False = you can change the image aspect ratio 

VerticalAlignment determines where the image is placed inside the object vertically.  

Position

Location property will always be the position of the top left corner. The Size will determine the height and width of the image. 

Textbox 

Appearance

GroupSeparator will enable the default group separator configured on the system. This means that instead off 1000000, it will add the group separator to the number 1.000.000.

The Inverted property will invert the text/stroke coler and the background color.

With 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.

The "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. 

With WordWrap you can turn word wrap on and off.

With TextBorder you can enable a white border around the text. Default this is turned off.

Epop/Aura specific Appearance

Stroke Color sets the color off the text. Either black or white.

Chroma specific Appearance

The Background color property sets the background color on the textbox object. It can be Red, Black, White and none(Default)

Text color sets the color off the text. Either Balck, White or Red.

Dependency

With dependency, you can control if the textbox is visible or not. If the depended field meets the specific criteria set in the dependency settings, the object will not be visible.

You can set the value off the Depended field as a variable. A variable is inserted by using [variable name].

Example

The dependency asks, "Is the dependency field 0?"

If the depended field is “1” the answer is no and the image will be visible.

If the depended field is “0” the answer is yes and the image will NOT be visible.

Position

The Position is a series of points that are connected. You can change the shape of the figure by changing the location of the points.

Text

Alignment determines where the text is placed inside the object horizontally.

AlternativeFont is only used when the format is different from normal. When price format is selected this specify the font of the minor part of the price.

VerticalAlignment determines where the text is placed inside the object vertically.  

Format Changes how the content of the field should be formatted. You can select between three formats.  

• Normal (Default): No formatting is applied; the text is shown exactly as it is in the system. 
• Price: If the content can be interpreted as a price, the content is formatted as a price where the minor part of the currency is smaller font and raised from the major part.  
• PriceMinor: If selected, the value is divided by 100. 

With Autosize property, you can automate the size selection for the text. You have three options

• None (Default): No auto size, if the text is unable to fit into the rectangle, the text will be cut off.
• AutoSizeBox: The rectangle will always adjust to the selected font and size. This ensures the box will auto.
• AutoSizeFont: The font will automatically adjust up or down to the biggest possible font size for the text to fit inside the rectangle 

With AutoSizeFontFactor you can Set the factor between main font and minor font when AutoSizeFont is AutoSizeFont and Format is Price. The default value is 2.0, Possible values are from 1.0 to 3.9.

The Font specifies the font for the text. Including font name, font size, font weight, font style, underline & strikeout.

With MaxTextLength you can make sure that value in the textbox does not exceed the boundary set in the MaxTextLength. The property will not cut the text exactly at the max length but cut the text at the nearest space.

Example

Green Example

MaxTextLength = 12

Value displayed: This is a

Blue Example

Blue MaxTextLength = 6

Value displayed: This

With the PriceFormatEnableDecimals you can configure how you want to view the decimals when Format is price or priceminor. If it is true, two decimals will always be shown. If false, you have the option to use the PriceFormatCustomText property. Here you can define the symbols that will show if there are not any decimals.

Example

PriceFormatEnableDecimals True

PriceFormatEnableDecimals False

The Value property indicates the actual value to be shown on the display. The content can both be fixed text or a variable. A variable is inserted by using [variable name]. Click on the ellipsis to select the variable from a list from the product data base.

Barcode 

The barcode object generates a barcode from a given value.

Barcode

The BarcodeType determins the type of barcode.

Different barcodes

• Code39
• EAN8
• EAN13
• Interleaved2of5
• QRCode
• UPCA
• UPCE
• ITF14

The BarRatio sets the ratio of the barcode. This is a predefined value and cannot be changed.

With BarWidth you can control the width of the barcode. The default value is 1.

With the HumanReadable property, you can set if the value of the barcode should be visible in the Barcode object. When the property is set to true the value will be visible underneath the barcode.

Position

Location property will always be the position of the top left corner. You can only set the height of the barcode.

QR code

With QR Code scale, you scale the QR code up or down. The default value is 1.

The QR Code version determines the amount of data the QR code can contain. The default value is Auto. This enables the QR code to change version depending the amount of data in the value property. It will select the lowest version possible

Text

The DesignerValue is the value that will generate the barcode in the design window.

The Value is the value that will generate the barcode in the preview or on the display.

Rotate / zoom / Grid 

With the rotate function, you can rotate a selected object either clockwise or counterclockwise.

With zoom, you can zoom in and out on the design window.

The grid function will show a grid inside the blue square. The grid are only for reference and will not be shown on the preview or display.