Documentation

Thanks for joining the PixelFree family

The following documentation is intended to assist you in understanding how to navigate our evolutionary software.

version

Version

2.0
version

Author

Fabian Sattler | Melina Wonn
version

Created

17 January, 2022
version

Updated

17 January, 2022

Installation

Follow the steps below to setup PixelFree Studio

Layout

Documentation and examples for Layouts

Anchor Pane

You can find the Anchor pane in the container menu:

anchorpane-img-1

The Anchor Pane holds individual objects firmly in their position. Even if you change the size of the Anchor Pane, the particular objects remain in the position in which they were set. This allows you to work more flexibly. If you resize the Anchor Pane, our tool enables you to do this as far as the individual objects allow. Each object has its size and its place within the Anchor Pane. This means you can only shrink the Anchor Pane as much as the individual objects permit. The advantage of this is that if you find that your Anchor Pane is too big, but your design fits, you can shrink the Anchor Pane without fear of losing your design.

The first object in our stack pane is the image you want to use. We supplement this in our display with four buttons. The objects are added one after the other and keep their order, fort he purposes of manipulating them using the features within our tool.

An anchor pane is always the basis of all designs. The following is our example of a landing area:

anchorpane-img-2 anchorpane-img-4

The Base_Anchorpane is set to 0 in the AnchorPane Constraints Menu at the Top, Left, and Right. This ensures that the landing area is permanently stuck to the sides. When the screen enlarges, the background image automatically enlarges with it.

anchorpane-img-5

The same applies to the Navigation Bar. Only this is located in the Base_Anchorpane.

anchorpane-img-7

The Text V-Box was also set using the AnchorPane constraints since it is located in the Anchor Pane. This will always maintain 200-pixel spacing from the top and 100-pixel spacing from the left, regardless of how big or small you make the screen. To see the landing area on mobile screens, you must set Smart Divisions (see documentation for Smart Divisions) accordingly.

anchorpane-img-7

It is essential to mention that the AnchorPane Constraint values only apply to the selected Anchor Pane. If you drag a new Anchor Pane into your project, you should assign new constraints to those elements. It is especially helpful to do this if you create several sections on one website. If you fail to do so, the values will be taken from the position of the elements in the Anchor Pane and the Anchor Pane will not automatically adjust but, rather, will maintain specific values.

Accordion

The Accordion can be found in the Layout/Container menu:

anchorpane-img-1

An Accordion is a grouping of Titled Panes. Only one Titled Pane can be open at a time. The content of the Titled Pane in an Accordion can be any element. The Accordion is an excellent tool for designing such items as FAQ's, for example:

anchorpane-img-2

The base of an Accordion is an Anchor Pane in which the individual Tideld Panes (as indicated below) are located.

anchorpane-img-4

You can add as many Titled Panes as you like. This is done in the Accordion properties panel.

anchorpane-img-5

The Titeled Pane behaves like all other containers. You can design whatever you want in the Titeled Pane. This is done by simply dragging and dropping individual controls or layout/containers. Since the base of the Accordion is an Anchorpane, you can also change the background color of the Anchorpane.

anchorpane-img-7

If you want to change the background color of the Titled Pane bar. Then this must be collapsed.

anchorpane-img-7

Thus, it is also possible to set the opacity to 0 and create a transparent background.

anchorpane-img-7

If you want to change the background for the content of the Accordion you have to unfold the Titled Pane.

anchorpane-img-7

This makes it very easy to change the respective area of an Accordion in the background menu.

Stack Pane

When using a Stack Pane, the objects are placed on top of each other, just like in a stack. The first object you add is placed at the bottom of the stack, and the next object is placed on top, and so forth.

stack-img-1

In the picture above, we offer a demosntration of what you can create using a Stack Pane, such as adding buttons within an image. However, it can be used for absolutely any object. One handy use of this feature is for landing pages. So, you have quickly create a header area, subheadings and footer of a website with ease.

The first object in our stack pane is the image you want to use. We supplement this in our display with four buttons. The objects are added one after the other and keep their order, fort he purposes of manipulating them using the features within our tool.

In the display menu you have the ability to switch individual objects on and off. So that when you are working with two objects that directly overlap you separately determine their exact position.

The location of the buttons can be changed in the Stack Pane Constraints Menu. This is located on the bottom right corner oft he screen.

stack-img-2

In the Alignment area, you define where exactly the corresponding object should be. The following options are available:

  • Baseline Left
  • Baseline Right
  • Bottom Center
  • Bottom Left
  • Bottom Right
  • Center
  • Center Left
  • Center Right
  • Top Center
  • Top Left
  • Top Right

Then, using the Margin option, you can specify how far you want the margin distance.

Above in the above picture, for example, you can see that we chose an Alignment of Top Center and a Margin of 100. This means that the button is moved tot he center, 100 pixels down from the top of the stack.

Caution: If you change the size of the Stack Pane, all objects lose their position and have to be realigned. The Stack Pane is not a dynamic layout.

In the display menu you have the ability to switch individual objects on and off. So that when you are working with two objects that directly overlap you separately determine their exact position.

stack-img-3

In the Content Alignment Menu you have the option of repositioning the text content of an object.

The following options are available:

  • Top Left
  • Top Center
  • Top Right
  • Center Left
  • Bottom Right
  • Center
  • Center Left
  • Center Right
  • Top Center
  • Top Left
  • Top Right
stack-img-4

Flow Pane

The Flow Pane is a dynamic layout that allows you to arrange the objects in the Flow Pane horizontally or vertically.

The advantage of a dynamic layout is immense. The Flow Pane automatically adjusts its size.

flow-img-1

If you resize a button and make it larger than the Pref Width of the Flow Pane. The Flow Pane automatically adjusts to the Pref Width of the button.

Here in our example belowe we do this using the button labelled Mario.

As you can see, the button now has a Pref Width of 500 pixels. The Flow Pane, on the other hand, only has a Pref Width of 300 in the output settings.

So the Flow Pane takes the width and height data from the individual objects in the Flow Pane itself.

flow-img-2

With a Flow Pane, for example, you can quickly create a side bar

flow-img-3

A simple way to create a Flow Pane ist o drag one from the Layout Menu onto the Canvas of the PixelFree Studio software. In the Anchor Pane Constraints menu at the bottom right, enter 0 for Top, Bottom and Left. This gives the Flow Pane a fixed position. The Flow Pane will always have this position even if you change the size of the page.

A Padding of 10 pixels ensures that the individual objects in the flow pane have a distance of 10 pixels from the edge.

flow-img-4

On the right side of the property panel you will find more settings that can be used for creating the Flow Pane.

flow-img-5

In the Alignment area, you define where exactly the corresponding object should be. The following options are available:

  • The general orientation of the Flow Pane. You have the ability to set (and change) the orientation of the Flow Pane either vertically or horizontally.
  • HGap and VGap. These features enable you to define the distance between objects. Here, in our example, we have set a distance of 25 pixels in the vertical direction. HGap is the Horizonthal Gap and VGap is the Vertical Gap.
  • Row Alignment. Using this option, you can specify how individual objects should be aligned in a row. You can choose between top, center, baseline and bottom.
  • Column Alignment. Here, you have the ability to define how individual objects should behave in a column. You can choose between left, center, and right.
flow-img-6

HBox

The H Box can be found within the containers menu:

hbox-img-1

The H Box arranges objects in a single horizontal row. If the H Box has a frame and/or padding, then the contents are arranged within these inserts.

Since the H Box is a container, you can drag and drop all the controls into it. The individual elements are automatically placed in the horizontal direction.

This can be used, for example, to create a navigation bar for a website.

hbox-img-2

In the Anchor Pane Contraints menu at the bottom right of your screen, you will find options for positioning. Using that feature, you can locate the exact position of an object on the website you are creating.

Enter a 0 for Top, Left and Right. By doing so, the H Box gets attached to the top of the page, completely filling the space up to the left and right side margins.

hbox-img-3

The object will remain there permanently, even if you change the size of the page. Thus, the navigation bar has a fixed position.

In the H Box menu, you can set the distance that all objects in the H Box have in relation to each other. The distance here, for example, is 5 pixels.

hbox-img-4

If you want the elements in the H box to all be centered, you can go to the Display Settings menu and change the desired position by choosing the desired Content Alignment.

hbox-img-5 hbox-img-6

VBox

The V Box can be found within the containers menu:

vbox-img-1

The V Box arranges its objects in a single horizontal row. If the H Box has a frame and/or padding, then the contents are arranged within these inserts.

Since the V Box is a container, you can drag and drop all the controls into it. The individual elements are automatically placed in a horizontal direction.

For example, with the V Box you can design a text section for a landing area.

vbox-img-2

In the Anchor Pane Contraints Menu at the bottom right you will find options for positioning. Using that function you can affix the exact position of an object on the website.

vbox-img-3

In the V Box menu, you can set the distance that all objects in the H Box have in relation to each other. The distance here, for example, is 5 pixels.

If you want the elements in the V Box to be arranged in the center, for example. you go to the Display Setting menu and change the desired position in Content Alignment.

vbox-img-4 vbox-img-5

Password Field

With the Password Field element, you can easily create password fields that can be manually filled in. You can use this feature to create login forms. A backend developer can then intercept the values in the fields.

The Password field can be found in the Control menu.

vbox-img-1

vbox-img-2

The Password Field behaves like a text input field. The only difference is that you can't see the text, which is hidden with dots.

vbox-img-3

Properties Panel Doc

vbox-img-1

The Properties Panel is located on the right side of the screen. The Properties Panel is one of the core elements of PixelFree Studio. It is used to design all controls and layouts.

The Properties Panel constantly adapts automatically to the corresponding control/layout element because each element has unique design flexibility.

Text Settings

You can use this feature to adjust the text of all elements by making adjustments in the text properties within the text settings (as noted below).

vbox-img-1

Display Text: Sets the text that will be displayed

Font Family: Sets the font family. PixelFree Studio recognizes which fonts are installed on your computer and displays them in the selection folder. So, if you want a specific font that is not one of the suggested ones, you can install the corresponding font from your computer.

Text Color: Sets the text color

Font Weight: Sets the font weight to Bold, Extra Bold, Extra Light, Light, Medium, Normal, Semi-Bold, and Thin

Font Size: Sets the font size

Text Alignment: Defines the orientation of the text. If you want a single word to be aligned to the left, for example, you must go to the Display Settings and select "Center-Left" for Content Alignment. But for a Label, for example, Wrap Text must be enabled to generate multiple lines.

Styling: Offers the possibility of defining if the text should be italic or underlined.

Overflow

The text-overflow CSS property sets how hidden overflow content is signaled to users. It can be clipped, display an ellipsis ('…'), or display as a custom string.

vbox-img-1

Clip:

The default for this property. This keyword value will truncate the text at the limit of the content area. Therefore, truncation can happen in the middle of a character. To clip at the transition between characters, you can specify text-overflow as an empty string if that is supported in your target browsers: text-overflow.

Ellipse:

This keyword value will display an ellipsis ('…', U+2026 HORIZONTAL ELLIPSIS) to represent clipped text. The ellipsis is displayed inside the content area, decreasing the amount of text displayed. It gets cut if there is not enough space to display the ellipsis.

Ellipsis String: Specifies how the overflow should appear. The default value is always `...` but can also be changed to `***.`

Wrap Text:

This property breaks the long words and wraps them onto the following line. This property prevents overflow when an unbreakable string is too long to fit in the containing box. This property defines the breaks in the word to avoid overflow when a term is too long to do display in the container.

Size Settings:

vbox-img-1

Using the Size Settings menu, you both set the size of each element and its constraints.

Min Width/Min Height: Sets an element’s minimum width and height. An element can never be smaller than the entered values.

Pref Width/Pref Height: Sets an element’s preferred height and width.

Max Width/Max Height: Sets the main element’s maximum height and width. An element can never be larger than the entered values.

Constraints

Padding:

The default setting fort he Padding feature sets the padding area on all four sides of an element at once. This ensures that all four sides (top, bottom, left, and right) always change in sync. You can also manually apply different padding on each side. For this, you have to click on the padlock, to begin. When this is deactivated the value changes on one side at a time.

Margin:

The Margin default setting sets the margin area on all four sides of an element at once. This ensures that all four sides (top, bottom, left, and right) are changed proportionately.

The Margin con only be activated in the HBox and VBox containers.

You can manually set different margins for each side. For this, you have to click on the padlock. Once this is deactivated the value changes on one side at a time.

Transform Settings:

vbox-img-1

In the Transform menu, you have the option of activating additional sizing options.

Scale:

The default value is always 1. If you set the value to 2, then the size of the element at the x and y coordinates is doubled. With the value 3, the initial size is tripled, and so on.

Translate:

With Translate option, you can move the element very precisely at the x and y coordinates.

Rotate:

The Rotate option allows you to rotate your element with specificty..

Rotation Axis:

With the Rotation Axis, you define the axis at which the element should be rotated. The default value is always set to 1 on the Z axis. You have the ability to rotate all three axes at the same time.

Display Settings:

vbox-img-1

SVG String:

PixelFree enables you to create an element in the form of an SVG. For this, you only have to select the corresponding SVG and add it tot he stage.

Content Alignment:

With the Content Alignment options, you can define how elements are displayed in an HBox and VBox. Or, you can locate where the text should be placed within a button. The PixelFree design tool offers the following options:

- Baseline Center

- Baseline Left

- Baseline Right

- Bottom Center

- Bottom Left

- Bottom Right

- Center

- Center Left

- Center Right

- Top Center

- Top Left

- Top Right

Visible:

Allows you to make an element visible or invisible

Disabled:

Allows you to disable a button if it is not needed yet

Managed:

This function defines whether or not this element layout will be managed by its parent.

Pick On Bounds:

This feature defines how the picking computation is done for this element when triggered by a MouseEvent.

Focus Traversal:

Specifies whether this node should be a part of the focus traversal cycle.

Mouse Transparent:

When enabled, this element (with all its children) is entirely transparent to mouse events.

Opacity:

This feature provides the flexiblity to enable every level of opacity from full color to complete clarity.

Blend Modes:

This function enables blending of your content.

Cursor:

Allows you to select the shape of the mouse icon from a varied array of when hovering over the element.

Border Menu:

Using the Border Menu, you can create an individual border for each element. You can choose between a Base Border, a Custom Border, and an Image Border.

vbox-img-1

vbox-img-1

The rectangle above demonstrates which border the Broder options you can choose from. By default, the padlock is always activated, ensuring that all four borders are processed simultaneously. If you deactivate this feature, you can process each border individually

Base Borderstyle:

vbox-img-1

Border style:

This provides the option to choose which border you want to use. You can choose between Hidden, Solid, Dotted, and Dashed.

vbox-img-1

Yhe icon pictured above sets the border color.

vbox-img-1

vbox-img-1

In the images above, you can see an example of how a border might look.

Utlizing Width, you set the width of the border. The higher you set the Width, the larger the Border will be.

Utilizing Radius, you define how strong the curves of a border will be.

Utilizing Insets, you define how far the border should be from the edge of the element.

vbox-img-1

vbox-img-1

With the Custom Border option, you can create your own individualized borders.

Stroke Type:

The Stroke Type defines where the border is located. You have the following options: Centered, Inside, and Outside. The position of the border changes based on the values you use..

Line Join:

Line Join determines how the corners will appear, e.g., rounded or squared.

Dash Offset:

If the stroke used is a dashing pattern. The Stroke Dash Offset property specifies the offset into a dashing pattern. i.e., the dash phase defines the point in the dashing pattern that will correspond to the beginning of the stroke.

Line Cape:

Defines the shape of the border elements, whether they should abut, be rounded or squared.

Dash Array:

Sets the distance between each border element.

Image Border:

You can also add images as borders to the individual elements.

vbox-img-1

vbox-img-1

Image Path:

Select the image you want to have as a border

Image Repeat:

Specifies whether the image should be repeated and, if so, whether it should be repeated on the x or y-axis.

Filled:

Fills the entire element with the image.

Image Border Width:

This value sets the size of the border.

Image Insets:

This value specifies the distance between the image and the element’s border.

Background Settings:

PixelFree enables you to define a background for each element.

vbox-img-1

vbox-img-1

Background Color:

Sets the background color of the element.

Image Path:

Allows you to set an image as the background to an element.

Image Repeat:

Determines if the background image should be repeated. If yes, you can repeat the image on the x and y axis.

Image Fit:

You can define how the image will behave in the element utilizing Image Fit, using the image to fill the entire container.

Image Size:

Here, you can set the size of the background image. You can choose between pixel and resolution options for setting percentage values.

Radius:

This feature eanbles you to specify whether the background of an element should have rounded corners.

Insets:

Sets the distance of the background from the border of the element.

Radio Button and Checkbox

You can use the Radio Button and the Checkbox for various features on yoru website, such as creating an option for your user to accept Terms of Service.

Both the Radio Button and Checkbox can be found in the control menu.

Both elements behave in the exact same way. The only difference is the design.

PixelFree Studio allows you to design Radio Buttons and Checkboxes for individual use.

vbox-img-1

SVG

PixelFree Studio also supports the importing of SVGs into your project. When exporting your project, the SVGs get converted into the respective programming language you choose, provding both the image and native code fort he SVG in that particular computer language (i.e. HTML, CSS, Java, etc.)

PixelFree Studio allows you to design Radio Buttons and Checkboxes for individual use.

vbox-img-1

vbox-img-1

Preserve Ratio:

Allows you to preserve the media’s aspect ratio (width/height) when scaling it to fit the element.

vbox-img-1

Text Input

Using Text Input feature, you can create text fields that can be filled in. This feature is highly useful for creating forms. A backend developer can then intercept the values input into the text field.

The Text Input option can be found in the Control menu.

vbox-img-1

vbox-img-1

vbox-img-1

The Text Input field can be edited just like all other elements with the basic settings from the properties panel. The Text Input field also has its own panel on the right hand side oft he screen.

vbox-img-1

Prompt Text:

Sets the prompt text.

Font Style:

Sets the font you desire

Editable:

When this field is checked, the user can enter textdirectly into your form

Video

PixelFree allows you to simply add videos directly into your project.

The Video component can be found in the Control Menu.

vbox-img-1

vbox-img-1

vbox-img-1

Preserve Ratio:

Allows you to preserve the media’s aspect ratio (width/height) when scaling it to fit the Element.

Smooth:

vbox-img-1

Prompt Text: