PicFlow Web Application User Guide

1. Click on the “+” Sign to the right of Folders.

2. Enter your folder name in the text field.

3. Click on the red “Create Folder” button.

You have now created an empty folder.

Select a folder

You can select the folder by clicking on it. The red frame should appear as in the image below, signaling you folder is selected.

Create a folder inside another folder

Select a folder (1), as instructed above, and then repeat steps 1 to 3 for folder creation (2), to create a subfolder inside your selected folder.

All folders will be available on the left side of the screen under the “Folders” section. You will see the number of templates a folder has by the template icon in the bottom right corner of each folder. Example:

This folder is called Register and contains 4 templates.

Edit or Delete a folder

Click on the 3 vertical dots on each folder to either delete or edit a folder.

• When you click on “Delete,” a pop-up screen will show up where you will need to click the red “Delete” button to confirm deletion, or click “Cancel” to close the pop-up without deleting the folder.
• When you click on “Edit,” a pop-up screen will show up where you will be able to modify the name of the folder. Click on the red “Accept” button to save your changes or “Cancel” to discard them and close the pop-up.

In case of existing templates outside of any folder, these will be visible by placed in  ”Templates without folder”, which can be found on the left side of the screen, right above the list of your folders. If you click ”Templates without folder”, templates will appear on the right side of the screen.

Moving one template

1. Select an individual template (1). The red frame will appear around the template, indicating that the template is selected, and a sidebar will appear on the right side of the screen. Click “Move Template” in the bottom of this sidebar (2).

2. A pop-up will appear where you can select the folder you would like to move your template to.

3. Once you have selected the folder, click the red “Accept” button to finish moving your template, or click “Cancel” to close the window without moving your template.

Moving multiple templates

1. Click on the small square icon (1) on the Templates section on the right side of the screen, right below the “+” icon.

2. Select all the templates you want to move by clicking them (2). A red frame will appear around the selected templates, and a number of selected templates will be visible in the sidebar at the right side of the screen.

3. When you are happy with your selection, click on the “Move Template” button at the bottom of the right sidebar (3).

4. A pop-up screen will show up, where you select the folder to which you want to move your templates.

5. When you have selected the folder, click the red “Accept” button to finish moving your templates, or click “Cancel” to close the window without moving your templates.

Click on the magnifier icon right below the “Folders” heading to open an input field. If your input is part of a folder name, then it will be shown in the results list.

In the editing view, you have access to a toolbar at the top of the screen, as well as an editing sidebar will on the right side of the screen.

Toolbar

The top toolbar gives you the option to display a grid on your template and activate a snapping tool which helps you with the placement of your widgets. Click each icon to activate the feature. When activated, the icon will turn red. Both features can be activated at the same time.

The settings symbols navigates to the settings of your templates.

The red “Save Changes” button is for saving your changes, when you are happy with your template.

If you click the there vertical dots, you get the option to delete your template.

Sidebar

Add a widget to Template

On the top of the sidebar, you are given the option to add widgets to you templates. This user guide goes through each of these widgets in detail further down on the site. To navigate directly to a certain widget guide, use the menu on the left. 

Parameters

In the Parameters section you can edit the name, the dimensions, the grid sizing and background color of your template. To edit the parameters of an widget instead, select the widget by clicking on it.

Layers

In the Layers section, you can see all the widgets on your template as layers, providing you full control over what is included on your template.

In this example the template has three different widgets visible as layers. One image “grafik-liggande-3.jpg” , and two text fields “Text”  and “Heading”.

Managing widgets

When adding and managing widgets on your template, you will see a smaller toolbar appear right above the widget. Hover each symbol in the toolbar in PicFlow to see a short indicator of what functionality it holds, or continue reading this section for further explanation.

In this example we have added a text field to the template. Using the arrows, you can adjust the order of the layers, moving them closer to the front or further to the back. You will see the changes in order in the Layers section of the sidebar.

You can also delete a widget by clicking the bin icon. The lock icon allows you to lock the widget in place, preventing any changes to its position or dimensions. To unlock the widget, simply click the lock icon again.

The duplicate icon creates a copy of the widget.

By clicking the eye icon, you can hide or unhide the widget in the player, meaning you can still see the widget on your template, but it will not be shown on the screen. This is useable for audio widgets for example.

Click “Layer” on the top right of the screen. A layer widget will appear in the top left corner of your template.

One click will add one layer. If you want to add more than one item, just click the option as many times as you want to add widget to the template (e.g., click the “Layer” button three times to add three different layers will be added to the template).

Select the widget by clicking on it. Use the sidebar on the right side of the screen to change the parameters of the layer.

Change the layer name by writing a new name in the input field under “Name.”

Change the position of the layer in the template by clicking the layer and holding the click to drag and drop it into the position that you want, or writing directly into the X/Y coordinates input fields in the sidebar on the right side of the screen.

Change the layer dimensions by clicking on the layer and holding the click on any of the red squares to adjust its size using the mouse, or by writing directly into the W/H input fields indicating the desired width and height or

Change the background color by clicking on the color picker and selecting the color you want or just writing the HEX or RGB code of the color. You can also add transparency in the next field from values 0 to 100, where 0 is fully transparent and 100 is fully solid.

Click the “Use Link” toggle to enable more options, where you can add a link to a website and specify the refresh rate.

Click the red “Save Changes” button to confirm all the changes done in your template.

Select the widget by clicking on it. Use the sidebar on the right side of the screen to change the parameters of the button.

Change the button name by writing a new name in the input field under “Widget Name.”

Change the position of the button in the template by writing directly into the X/Y coordinates input fields or by clicking the button and holding the click to drag and drop it into the position that you want.

Change the button dimensions  by clicking on the button, and then hold the click on any of the red squares to adjust its size, or by writing directly into the W/H input fields indicating the desired width and height.

Select either “Button” or “Image” for the widget type. If you select “Image”, then you will have the option to load an image as a button and will be able to change the picture display mode.

Change the caption for the button using the input field under “Button Caption”. You can also change the background color and border color by clicking on the color picker and selecting the color you want or just writing the HEX or RGBA codes for the color.

Select the desired font for the button text using the “Font” select box. Change the font size, weight, and color with the options below, which includes an input field where you can write the number of the “Text Size” in pixels, select the “Font Weight,” and change the text color by clicking on the color picker and selecting the color you want or just writing the HEX or RGBA codes for the color.

Give you button round corners of the button by using the “Corner Radius” slider.

Turn on/off the button border with the toggle button, and adjust the border width with the “Border” slider.

Choose between “Flat” or “Embossed” effect depending on the desired effect for the button.

Enable or disable a shadow for the button using the “Shadow” toggle. You can adjust the shadow color with the color picker, or write in HEX or RGBA. You can also add transparency in the next field from values 0 to 100 where 0 is fully transparent and 100 is fully solid. Add blur to the shadow with the “Blur” slider.

Click on “Pop-up content” to see the different options to open with the button, which are: Image, Video, and URL.

Click the red “Save Changes” button to confirm all the changes done in your template.

Click “Image” on the top right of the screen.

Select the image that you would like to add from your Media Library. You can add images to your Media Library in the content tab. Click on the image, and then click the red “Save” button to have the image be part of your template.

Select the widget by clicking on it. Use the sidebar on the right side of the screen to change the parameters of the image.

The image name will be shown in the input field under “Name,” it cannot be changed.

Change the position of the image in the template by clicking the image and holding the click to drag and drop it into the position that you want, or by writing directly into the X/Y coordinates input fields.

Change the image dimensions by clicking on the image and then holding the click on any of the red squares to adjust its size using the mouse, or by writing directly into the W/H input fields indicating the desired width and height.

You can change to another image by clicking the “Replace Image” button. After selecting your new image, just click the red “Save” button to confirm.

Select how your image will be displayed below “Display Mode,” which can be: Original, Contain, Fill, or Fit.

Original: Displays the image in original size and format, without any adjustments. If the image is larger than the container, part of the image may be cropped. If it’s smaller, there may be empty space around the image.

Contain: Scales the image to ensure the entire image fits within the container. This means the whole image will be visible, but there may be empty space around it if the image aspect ratio does not perfectly match the container.

Fill: Scales the image to fill the entire container. The goal is to make sure there is no empty space, even if the image proportions does not match the container. When using fill the image may appear stretched or distorted if the aspect ratios of the image and the container differ significantly.

Fit: Scales the image to fit within the container while maintaining its original proportions. If the container is smaller than the image, parts of the image will be cropped to ensure it fits within the container without distorting its proportions.

Change the value of the image opacity percentage if desired. 100 is fully solid and 0 is fully transparent.

Click the red “Save Changes” button to confirm all the changes done in your template.

Click “Text” on the top right of the screen. One click will add one textfield, multiple clicks will add multiple text fields.

Select the widget by clicking on it.

Use the sidebar on the right side of the screen to change the parameters of the text.

Change the text field name by writing a new name in the input field under “Name” in the sidebar on the right side of the screen.

Change the position of the text in the template by clicking the text field and holding the click to drag and drop it into the position that you want, or by writing directly into the X/Y coordinates input fields.

Change the text field dimensions by clicking on the text and then holding the click on any of the red squares to adjust its size using the mouse, or by writing directly into the W/H input fields indicating the desired width and height.

In the sidebar to the right you also have the option to import fonts, by clicking “Import fonts” and upload your font in the pop-up screen.

Double-click the text field on the template to edit the content and format of the text. A toolbar will appear at the top of the text field, offering several options to adjust the text format, explained in the following paragraphs.

The text editor is a “WYSIWYG” editor, which means what you see is what you get. This is like using Microsoft Word or Google Docs, it’s the most known text editor.

Select the desired font in the toolbar above the text field, using the “Font” select box. Your imported fonts will appear in the font list.

Adjust the font size using the plus and minus signs. Please note that for existing text, you need to highlight the text in the text field in order for the size change to take effect, just like you would in a Word or Docs document.

Change the font color of the body text by clicking on the color picker and selecting the color you want, or writing the HEX or RGBA code.

Change the font style by clicking the symbols to activate bold, italic, or underlined text. The symbol will turn red when activated.

Adjust the text alignment by clicking on the alignment symbol, and choose one of the 3 options available: left, center or right.

Click the line height symbol to adjust both letter spacing and line height. Line height refers to the vertical space between lines of text, while letter spacing controls the horizontal space between the letters.

The crossed-out T symbol allows you to clear the formatting of the text field, resetting it to the default font style, size, and color.

The moon symbol will apply a darker background to the text field in edit mode. This effect disappears once the text field is deselected. Its purpose is to enhance visibility and ease of use, especially when the background is very light or detailed.

Click the red “Save Changes” button to confirm all the changes done in your template.

Click “Video” on the top right of the screen.

Select the video that you would like to add from your Media Library, click on the video, and then click the red “Save” button to have the video be part of your template.

Select the video widget by clicking on it. Use the sidebar on the right side of the screen to change the parameters of the video.

The video name will be shown in the input field under “Name,” it cannot be changed.

Change the position of the video in the template by clicking the video and holding the click to drag and drop it into the position that you want, or by writing directly into the X/Y coordinates input fields or .

Change the video dimensions by clicking on the video and then holding the click on any of the red squares to adjust its size using the mouse, or by writing directly into the W/H input fields indicating the desired width and height.

You can change your video by clicking the “Replace Video” button. After selecting your new video, just click the red “Save” button to confirm.

Select how your video will be displayed below “Display Mode,” which can be: Original, Contain, Fill, or Fit.

Original: Displays the video in original size and format, without any adjustments. If the video is larger than the container, part of the video may be cropped. If it is smaller, there may be empty space around the video.

Contain: Scales the video to ensure the entire video fits within the container. This means the full video will be visible, but there may be empty space around it if the video aspect ratio does not perfectly match the container.

Fill: Scales the video to fill the entire container. The goal is to make sure there is no empty space, even if the video proportions does not match the container. When using fill the video may appear stretched or distorted if the aspect ratios of the video and the container differ significantly.

Fit: Scales the video to fit within the container while maintaining its original proportions. If the container is smaller than the image, parts of the image will be cropped to ensure it fits within the container without distorting its proportions.

Click the red “Save Changes” button to confirm all the changes done in your template.

Click “Audio” on the top right of the screen. Select the video that you would like to add from your Media Library, click on the audio file, and then click the red “Save” button to have the video be part of your template.

The audio file will appear as a grey container on your template. On the actual screen it will only appear as a media player bar. If you do not want any indication of playing audio on the screen, use the eye icon on the widget top toolbar, to hide the widget on the screen. Your audio will still play, but there will be no visible representation of it on the screen.

Select the widget by clicking on it. Use the sidebar on the right side of the screen to change the parameters of the audio.

Change the position of the audio file in the template by clicking the audio file and holding the click to drag and drop it into the position that you want, or by writing directly into the X/Y coordinates input fields or .

Change the video dimensions by clicking on the audio file and then holding the click on any of the red squares to adjust its size using the mouse, or by writing directly into the W/H input fields indicating the desired width and height.

You can change your audio file by clicking the “Replace Audio” button. After selecting your new audio file, just click the red “Save” button to confirm.

You can adjust the maximum volume of the audio using the “Volume” slider.

Click the red “Save Changes” button to confirm all the changes done in your template.

Click “Moving Text” on the top right of the screen. One click will add one textfield, multiple clicks will add multiple text fields.

A text field will appear in the top left corner of your template. Select the text field by clicking on it.

The Moving Text editor works a bit different than the editor for the ordinary Text widget. You make all the changes for your text field in the sidebar at the right side of the screen.

Change the text field name by writing a new name in the input field under “Name” in the sidebar on the right side of the screen.

Toggle “Ticker” to activate the moving text. It will not be visible on your template yet.

Change the position of the text in the template by clicking the text field and holding the click to drag and drop it into the position that you want, or by writing directly into the X/Y coordinates input fields.

Change the text field dimensions by clicking on the text and then holding the click on any of the red squares to adjust its size using the mouse, or by writing directly into the W/H input fields indicating the desired width and height.

Choose a font for your Moving Text in the “Font” select box. You also have the option to import fonts, by clicking “Import fonts” and upload your font in the pop-up screen. You can only use one font for each Moving Text text field.

If you would like your Moving Text to have a heading, use the “Moving Text” toggle. This makes various options for your heading visible. In the Content field, you write the text you want as your heading. Below you can adjust font color, opacity, distance between heading and the text paragraph, heading padding (space around the heading) , font size, text alignment as well as heading background color and opacity.

In the Body section you adjust the text paragraph of the Moving Text widget. You are able to adjust font color, opacity, background color and background opacity. You are also able to add padding (space around the heading) and adjust text alignment.

Below these settings, there is a text field where you write the content of your text paragraph. In the “Text size” field you can increase or decrease the size of your text paragraph.

Toggle “Marquee mode” and you should see your text moving on your template. Adjust the Speed using the slider below.

Click the red “Save Changes” button to confirm all the changes done in your template.

Click “PDF” on the top right of the screen.

Select the PDF file that you would like to add from your Media Library, click on the pdf file, and then click the red “Save” button to have the pdf be part of your template.

Select the widget by clicking on it. Use the sidebar on the right side of the screen to change the parameters of the pdf.

The image name will be shown in the input field under “Name,” it cannot be changed.

Adjust the duration by modifying the number value of the input field; this is in seconds.

Change the position of the image in the template by clicking the image and holding the click to drag and drop it into the position that you want, or by writing directly into the X/Y coordinates input fields.

Change the image dimensions by clicking on the image and then holding the click on any of the red squares to adjust its size using the mouse, or by writing directly into the W/H input fields indicating the desired width and height.

Select the “Display Mode,” which can be: Original, Contain, Fill, or Fit.

Select how your PDF will be displayed below “Display Mode,” which can be: Original, Contain, Fill, or Fit.

Original: Displays the PDF in original size and format, without any adjustments. If the video is larger than the container, part of the video may be cropped. If it is smaller, there may be empty space around the video.

Contain: Scales the video to ensure the entire video fits within the container. This means the full PDF will be visible, but there may be empty space around it if the video aspect ratio does not perfectly match the container.

Fill: Scales the PDF to fill the entire container. The goal is to make sure there is no empty space, even if the video proportions does not match the container. When using fill the video may appear stretched or distorted if the aspect ratios of the video and the container differ significantly.

Fit: Scales the PDF to fit within the container while maintaining its original proportions. If the container is smaller than the PDF, parts of the PDF will be cropped to ensure it fits within the container without distorting its proportions.

You can change your PDF file by clicking the “Replace File” button. After selecting your new PDF, just click the red “Save Changes” button to confirm.

Click the red “Save Changes” button to confirm all the changes done in your template.

Click “Clock” on the top right of the screen.

A clock widget will appear in the top left corner of your template. Select the widget by clicking on it. Use the sidebar on the right side of the screen to change the parameters of the clock widget.

Change the clock widget name by writing a new name in the input field under “Name” in the sidebar on the right side of the screen.

Use the “Show Date” toggle to disable or enable the display of the date in the clock widget.

Change the position of the clock widget in the template by clicking the clock and holding the click to drag and drop it into the position that you want, or by writing directly into the X/Y coordinates input fields.

Change the clock widget dimensions by clicking on the clock and then holding the click on any of the red squares to adjust its size using the mouse, or by writing directly into the W/H input fields indicating the desired width and height.

Change the text color of the text by clicking on the color picker and selecting the color you want, or writing the HEX or RGBA code of the color. You can also add transparency in the next field from values 0 to 100 where 0 is fully transparent and 100 is fully solid.

Change the text size by writing the value in pixels for the font size in the next input field.

Change the background color of the clock widget by clicking on the color picker and selecting the color you want, or writing the HEX or RGBA code of the color. You can also add transparency in the next field from values 0 to 100 where 0 is fully transparent and 100 is fully solid.

Please note that when displayed on the actual screen, the am/pm will be removed from your clock widget.

Click the red “Save Changes” button to confirm all the changes done in your template.

You are able to add apps to your template in PicFlow. Click “APP” on the top right of the screen and choose the app to include from your Media Library.

If you want to create a new app, please navigate to the tab Applications  in the yellow sidebar on the right side of the screen.

You will be able to add 3 different types of applications, which are:

• RSS
• Tenants
• Weather

Each application will have its own configuration settings, but all of them will share the general ones where you can adjust the size and position of each widget by either clicking on it and adjusting the position and size with the mouse, or modifying the values of the X/Y coordinates and the W/H properties.

RSS app

Duration: The amount of time in seconds that the post is going to be shown before changing.

Title: The font size in pixels of the post title that is being displayed in the feed.

Spacing: The gap/separation in pixels between the title and post content.

Padding: The general gap/separation around the article content in your application.

Feed name toggle button: Activate or deactivate this option to show/hide the title of the RSS feed. You are also able to change the font size for the title.

Post content toggle button: Activate or deactivate this option to show/hide the content of each post from the RSS feed. You are also able to change the font size for the content.

Characters limit: How many characters will be shown before cutting off the post content with “…”

Feed image toggle button: Activate or deactivate this option to show/hide the image of the RSS feed. You can change display mode for the image, which has a select box. Choose between Original, Contain, Fill, or Fit.

Original: Displays the image in original size and format, without any adjustments. If the image is larger than the container, part of the image may be cropped. If it’s smaller, there may be empty space around the image.

Contain: Scales the image to ensure the entire image fits within the container. This means the whole image will be visible, but there may be empty space around it if the image aspect ratio does not perfectly match the container.

Fill: Scales the image to fill the entire container. The goal is to make sure there is no empty space, even if the image proportions does not match the container. When using fill the image may appear stretched or distorted if the aspect ratios of the image and the container differ significantly.

Fit: Scales the image to fit within the container while maintaining its original proportions. If the container is smaller than the image, parts of the image will be cropped to ensure it fits within the container without distorting its proportions.

Use the Image width slider, to adjust the size of your image.

Weather app

Location: Change the display name of the location in the app in the text field. This change only affects how the location name is displayed on your app. To change the actual location, click “Change Location” below the input field.

Widget name: Change the widget name by writing a new name in the input field.

Widget type: You can customize the appearance of your widget by selecting between the current weather, or a forecast of either the next 7 hours or the next 5 days.

Language: Change the language used in the weather widget.

Font: To change the font family, use the select box. The icons below allow you to adjust the font color, background color, and the color of the weather symbols in your widget. Click on the icons to access the color picker.

Temperature: Choose between Celsius and Fahrenheit.

Time Format: This option is only available if you are using “The next 7 hours” as your Widget Type. Choose between 24 hour format and 12. hour format.

Weekday Format: This option is only available if you are using “The next 5 days” as your Widget Type. Customize how the weekdays are displayed in your widget. Choose between a shortened weekday name (Mon-Sun), the full weekdays names (Monday-Sunday) or just the dates for each day (1st-30th).

Click “Trafiklab” on the top right of the screen.

A pop-up screen will appear on your screen, giving you the option to give your widget a name, as well as select the stop for which you’d like to display the departures. The “Stop Name” field is a search field, write the name of the stop and select the stop in the list that appears.

Click the red “Accept” button.

The Trafiklab widget will appear at the top left of your template. Select the widget by clicking on it. Use the sidebar on the right side of the screen to change the parameters of the Trafiklab widget.

The video name you selected when creating the widget will be shown in the input field under “Name”, it cannot be changed.

Change the position of the widget in the template by clicking the widget on the template and holding the click to drag and drop it into the position that you want, or by writing directly into the X/Y coordinates input fields.

Change the widget dimensions by clicking on the widget and then holding the click on any of the red squares to adjust its size using the mouse, or by writing directly into the W/H input fields indicating the desired width and height.

Your selected stop will be shown in the input field under “Stop Name”, it cannot be changed. To change the stop, click “Change Stop” below the disabled input field. When clicked, you are able to search for a new stop in the input field, just like you did when creating the Trafiklab widget.

Play time

Change the language used in the Trafiklab widget, under “Language”.

You are able to hide departures that depart within a certain time frame. The default value is 1 minute, to change this you can adjust this by increasing or decreasing the value in the number field below “Hide Departures”.

Select what types of traffic you would like to show, by toggling either Bus och Trams.

For appearance you can make various adjustments. Under “Line Box” you can adjust background color and text color for your widget.

For title you are able to change the font, the text color and the text size.

For content you are able to change the font, the text color and the text size.

You can also customize the background colors in the widget. For the Departures Background, there are separate even and odd colors to distinguish the rows of departures. Additionally, you can modify the background color for the entire widget.

Click the red “Save Changes” button to confirm all the changes done in your template.