Frontend Editor User Guide

1 Introduction

This document serves as a User Manual and provides all essential information necessary for users to effectively use the Frontend Editor. This manual includes a description of the system functions and capabilities, print screens, contingencies and alternate modes of operation, and step-by-step procedures for system access and use.

2 Start guide

In order to access the web-based frontend, the user needs to login in the EFPF platform. The SDK web-frontend overview can be seen in Figure 1. As soon as the SDK web-frontend is launched, the Dashboard page is displayed, as shown in the figure below. The SDK web-frontend is divided in two sections: the main menu displayed on the left side, and the main page.

SDK web-frontend overview Figure 1: SDK web-frontend overview

2.1 Create Workspace

A workspace is where the projects live and run. To create a new Workspace, the user has three options:

  • click on the Create Workspace button displayed on the Dashboard page, or
  • click on the Add Workspace button displayed in the Workspaces page, or
  • click on the Create Workspace item in the menu displayed on the left side of the page.

New Workspace Figure 2: New Workspace

As soon as the user has clicked on Create/Add Workspace, the New Workspace page is displayed, as illustrated in Figure 2.

To create a new Workspace, the user must provide a space name, and make sure that vf-OS stack is selected, as shown above. Once the Create button is pressed, the workspace is created and a pop-up is displayed, to allow the user to open or edit the new created workspace.

2.2 View Workspaces

To view the list of workspaces the user must click on Workspaces item from the left side menu. The Workspaces page is illustrated in Figure 3.

Workspaces list Figure 3: Workspaces list

2.3 Edit and configure workspace

To edit a workspace, the user must select a one from the list displayed in Workspaces tab, and the configuration page will be displayed, as illustrated in Figure 4. At his point, the user can perform different actions, such as: rename the workspace, delete it, add projects to the selected workspace, stop/open the selected workspace, etc.

Workspace configuration page Figure 4: Workspace configuration page

2.4 Delete workspace

To delete a Workspace, the user has two options:

  • click on the Delete button displayed in the Workspace’s configuration page, as shown in Figure 4, or
  • select the workspace in Workspaces page and click on the Delete button, as illustrated in Figure 5.

Workspaces list Figure 5: Workspaces list

As soon as the Delete button is pressed, a pop-up window will be prompted to confirm the erase action.

2.5 Open workspace

To open a Workspace, the user must:

  • click on the Open button displayed in the Workspace’s configuration page, as shown in Figure 4, or
  • select the workspace in Recent Workspaces category displayed on the main menu.

Once the workspace is loaded, as exemplified in Figure 6, the user can create a new frontend module.

Workspace loaded Figure 6: Workspace loaded

2.6 Create new frontend module

To create a new frontend module, the user must right-click on the efShopFloorIntelligence project, and select New > Front-end Module, as shown in Figure 7.

New Frontend Module Figure 7: New Frontend Module

Immediately after, the Frontend Editor page will be displayed, as shown in Figure 8.

Frontend Editor page Figure 8: Frontend Editor page

To create a third-party web application, the user must follow the steps described in Section 3.3.

To export the third-party application, from the workspace eShopFloorIntelligence project, the user must right-click on the views folder and select Download…, as shown in Figure 9. A views.zip folder will be downloaded locally.

Download views Figure 9: Download views

To visualize the exported application, the user must unzip the views folder and open the index.html file. Figure 10 represents the visualization of a third-party application developed with the Frontend Editor.

Visualization of a third-party application developed with the Frontend Editor Figure 10: Visualization of a third-party application developed with the Frontend Editor

3 EFPF SDK Frontend Editor

This chapter provides an overview of the EFPF SDK Frontend Editor from the user’s perspective, including the main components of the dashboard and interactions (use-cases) for the user. The main purpose of this web-frontend is to get information from data-sources (e.g. database) and display it in different components (e.g. tables, charts) in order to provide a better understanding of data, by using various visualizations elements. Each component presents specific data for each requested scenario. The development EFPF SDK frontend is currently in progress and will continue with further functionalities.

3.1 Frontend Editor window

The Frontend Editor overview is exemplified in Figure 11. The entire frontend is customized for a good user experience. Selecting a specific menu-item, a corresponding component (e.g. tables, chart) is loaded into the page. Additionally, some of the components can be configured in more detail by selecting specific parameters.

Frontend Editor overview Figure 11: Frontend Editor overview

The web-frontend consists of four main areas, as exemplified in the above figure. On top of the page, in area A, a button to hide/unhide the menu is displayed. Area B, the central area of the page that serves as a board where the selected components are placed. The elements are shown in the central area as soon as a menu-item was selected.

At the bottom of the Frontend page, in area C, two buttons are displayed. The first button, with a garbage bin icon on it, is designed to erase the entire content on the frontend page (displayed in area B). The second button, with a cloud icon on it, allows users to export the page they already created and visualize it in a web-format.

In the top right corner, in area D, the user can see the EFPF logo. The frontend version is displayed on the bottom right corner. The main menu is displayed in the same area and comprises nine categories components: Add Data Source button, Layout, Controls, Text, Tables, Bar charts, Line charts Radial charts, Point charts, and Samples.

3.2 Main menu components

The main menu, displayed in the D area, comprises nine categories of components, as follows:

  • Add Data Source button, which allows users to add a data source API in order to populate different tables or graphs;
  • Layout category includes the main page layout components such as header, horizontal and vertical tabs, horizontal line, and footer. With these components, users can create customized visualizations;
  • Controls category includes the main elements that provides users ways to trigger an event on the page (e.g. searching for a query on the page). This category comprises five key-components: a button, a select box, a search box, a date picker, and a URL host (iFrame).
  • Text category which contains two text boxes: a paragraph, and a text area. These elements provide users the ability to type and insert text anywhere in the page.
  • Tables category: includes a table element and a Gantt chart. In order to add these elements on the page and populate them with values, the user shall provide a data source and/or select a data source from the list.
  • Bar charts category: includes vertical and horizontal bar charts. To add these elements on the page and populate them with values, the user shall provide a data source.
  • Line charts category which includes two line charts, one static and one dynamic (live). To add these elements on the page and populate them with values, the user shall provide a data source.
  • Radial charts category, which includes the most common-used radial charts: donut, pie, radar and polar. To add these elements on the page and populate them with values, the user shall provide a data source.
  • Point charts category: includes bubble and scatter charts. To add these elements on the page and populate them with values, the user shall provide a data source.
  • Samples category that represents a specific use-case for the Shopfloor Intelligence application and shows users what they can achieve using the Frontend Editor.

3.2.1 Add Data Source

Several elements require a data source to be populated. This button allows users to add data sources in order to populate different components such as tables or graphs. There are two options for adding a new data source: select Add Data Source button in the main menu or select an element that requires a data source (e.g. Table, Gantt Chart). In both cases a pop-up window, as shown in Figure 12, will appear to provide users with the ability to add a source. In the current version, this functionality is only implemented for Tables and Gantt charts, but can be extended for other existing charts in future versions. Add Data Source option requires a descriptive name for the source and the URLs. The saved data source remains available as long as the workspace is active.

Add Data source pop-up Figure 12: Add Data source pop-up

3.2.2 Layout

The Layout category includes the following elements: Header, Horizontal and Vertical Tabs, Horizontal Line and Footer. Each element on the Layout category can be integrated in the main page, as shown in Figure 13, or in Tabs component, as shown in Figure 14.

Component added in main page Figure 13: Component added in main page

Component added in tabs Figure 14: Component added in tabs

The Header is a block that appears at the top and includes the EFPF project name and logo.

Horizontal Tabs and Vertical Tabs allows users to arrange data in a tabular form. A tab is a clickable area at the top of a section that allows users to switch between different areas. To place a tab section on the main page, or in a tab container, the user must provide a container name (used as a future look up reference) and at least one tab name (e.g. H_Tab1, H_Tab2, V_Tab1). The container name must be unique in the editor and the tabs names must be unique per tab container. A tab container can embed other elements from the side-menu, or yet another tab container; each available component can be inserted in a tab container.

The Horizontal Line represents a visual separator or space delimiter between different topics, and its length matches the size of the component where it is integrated.

The Footer is a block with black background that appears at the bottom and contains the EFPF logo in grey, the copyrights, and other relevant links regarding the EFPF platform.

3.2.3 Controls

The Controls category includes the following elements: Button, Select Box, Search Box, Date Picker and URL Host. Similar to Layout category, each element from the Controls category can be integrated in the main page, as shown in Figure 15, or in Tabs component, as shown in Figure 16.

A Button is a clickable area that allows users to perform a certain, predefined action. The current implementation does not support adding a function on the button component. To place a button on the main page, or in a tab container, the user must provide a name for it.

A Select Box is a drop-down list of options that allows users to select a certain option from a range of values. This component is useful to answer multiple choice questions where respondents can scroll through different options. For this component, the user can append several options that can be selected afterwards.

A Search Box is a text box where users can type-in text in order to launch a search on the page. The current implementation does not have a defined functionality. However, in EFPF Frontend Editor v1.06, the search box functionality is available for tables and Gantt charts.

A Date Picker is a graphical user interface that has a calendar attached and allows user to select a data from the calendar. The date can be selected from the attached calendar (graphically), or it can be inserted manually.

The URL Host is a widget that allows users to display the selected source page. This option creates a rectangular window (iFrame). To place an iFrame on the main page, or in a tab container, the user must provide the URL. Due to mixed security elements, the iFrame can embed only HTTPS content on HTTPS pages. Several issues can be encountered while integrating different links:

  • “Page could not be embedded” - the selected page requires a specific header (*X-Frame-Options: ALLOW-FROM https://sdk.efpf.caixamagica.pt OR **);
  • “Page not found” - page doesn’t exist;
  • “Invalid page” - other exceptions.

Controls component added in main page Figure 15: Controls component added in main page

Controls component added in tabs Figure 16: Controls component added in tabs

3.2.4 Text

The Text category comprises only two components, Paragraph and Text Area, that can be integrated in the main page, as shown in Figure 17, or in Tabs component, as shown in Figure 18.

A Paragraph represents a text box which allows users to bring raw content into the main page, or in Tabs component. The Paragraph component provides users with the ability to customize the inserted text, by offering several options to change the colour, the font size, and font style (e.g. bold, italic, underline).

A Text Area is a paragraph component that keeps track of end lines in the inserted text. Similar to the Paragraph component, it allows users to customize the inserted text. The Text Area component can be used to write a more detailed text that can be displayed on multiple lines and formatted accordingly.

Text component added in main page Figure 17: Text component added in main page

Text component added in tabs Figure 18: Text component added in tabs

3.2.5 Tables

The Tables category comprises two components, Table and Gantt Chart, that can be integrated in the main page, as shown in Figure 19, or in Tabs component, as shown in Figure 20. These elements require a data source to be populated.

A Table is a data structure organized usually in rows and columns. To populate the table, the data source must contain key-value pairs in order to use the keys as column headers. This component provides users with the ability to customize the visual representation. Users can select how many rows to display in the table (the default represents 50 rows) and they can select the option to auto-refresh data to a given time interval (seconds) in case the selected source dynamically loads more data. Furthermore, users can add other optional criteria for filtering the data: Select box (based on a table column) to display only data for a specific type, Search box that gives the opportunity to search in the entire table, and a Date picker to select the interval date to display the data (available if exists any date column). Moreover, in the table view, users can view more rows by clicking on the “Load more…” button displayed in the bottom and sort (ascending/descending) the table values by pressing on column headers.

A Gantt Chart is a time series distribution of data visualized as horizontal bars, where each bar supports multiple colours or states. To represent a Gantt chart, the data source must contain at least five columns: a unique identifier which must be an integer, the previous task and nest task fields which must point to previous and nest task items, and activity start and end date (date type) to compute the length/size of each displayed horizontal bar.

Similar to the Table component, it allows users to customize the view by offering similar choices: number of rows to display (the default represents 30 rows), auto refresh, select box and date picker. Also, in the chart view, users can view more rows by clicking on the “Load more…” button displayed in the bottom.

Table component added in main page Figure 19: Table component added in main page

Table component added in tabs Figure 20: Table component added in tabs

3.2.6 Bar charts

The Bar charts category comprises two components, Vertical and Horizontal bar charts, that can be integrated in the main page, as shown in Figure 21, or in Tabs component, as shown in Figure 22. These elements require a data source to be populated, but this functionality is currently not implemented. Bar charts represent a graphical display of data using bars of different heights or lengths proportional to the values that they represent. These charts are usually used to show trend data, and the comparison of multiple data sets side by side but can also represent more complex categories with stacked bar charts or grouped bar charts.

A Vertical Bar chart is a visual representation of data using vertical bars whose length is proportional to quantities they represent. The text-based categories, or data categories, are displayed on the X axis (horizontal axis), and the data values, or numeric information, are displayed on the Y axis (vertical axis). The chart title and legend are displayed on top. To hide/unhide a given Series or Category from the chart, the user shall click on the respective category in the legend.

A Horizontal Bar chart is a visual representation of data using bars that are drawn horizontally and whose length is proportional to quantities they represent. In horizonal charts, all the bars are represented from left to right. The text-based categories, or data categories, are displayed on the Y axis (vertical axis), and the data values, or numeric information, are displayed on the X axis (horizontal axis). Similar to the vertical chart, the title and legend are displayed on top. To hide/unhide a given Data Series or Category from the chart, the user shall click on the respective category in the legend.

Bar charts added in main page Figure 21: Bar charts added in main page

Bar charts added in tabs Figure 22: Bar charts added in tabs

3.2.7 Line charts

The Line charts category comprises two components, Line (static) and Real-time Line (dynamic) charts, that can be integrated in the main page, as shown in Figure 23, or in Tabs component, as shown in Figure 24. These elements require a data source to be populated, but this functionality is currently not implemented. Line chart is a basic type of chart that represents a graphical display of data points connected by straight line segments. These charts are usually used to show trends in data over a time range and observe the comparison of multiple data sets. The static line chart representation is shown in the top of Figures 23 and 24 and the dynamic line chart in the bottom. The chart title and legend are displayed on top. To hide/unhide a given Series or Category from the chart, the user shall click on the respective category in the legend.

Static Line charts category is a visual representation of data using straight line segments drawn chronologically. Line charts are responsive, interactive, customizable, and work with large number of data point. Text-based categories (e.g. data categories) and numeric information (e.g. data values, date-time) can be displayed on both horizontal and vertical axis.

Dynamic Line charts or live charts are similar to static line charts. These charts show live updates and they are used to display data that varies with time.

Line charts added in main page Figure 23: Line charts added in main page

Line charts added in tabs Figure 24: Line charts added in tabs

3.2.8 Radial charts

The Radial charts category consists of four components, Donut, Pie, Radar and Polar charts, that can be integrated in the main page, as shown in Figures 25 and 27, or in Tabs component, as shown in Figures 26 and 28. Similar to Bar charts, these elements require a data source to be populated, but this functionality is currently not implemented. A radial or circular chart is a Bar Chart plotted on a polar coordinate system, rather than on a Cartesian one. Pie and donut charts are the most widely used charts since they are excellent at showing the relational proportions between data. A circular chart is probably the best alternative to choose when displaying data that has stark contrasts in it.

Pie charts show relative sizes of data and how data sets relate to one another. The pieces of the graph are proportional to the quantity it represents, usually resulting in a shape similar to a “slice of pie”. The entire “pie” represents 100% of a whole, while the pie “slices” represent portions of the whole. Pie chart representations are suitable for displaying volume distributions across different topics. The pie chart representation is shown in the bottom of Figures 25 and 26. The chart title and legend are displayed on top. To hide/unhide a given Series or Category from the chart, the user shall click on the respective category in the legend.

A Donut chart is similar to a pie chart with a round hole in the middle. The donut chart representation is shown in the top of Figures 25 and 26. The chart title and legend are displayed on top. To hide/unhide a given Series or Category from the chart, the user shall click on the respective category in the legend.

Pie and Donut charts added in main page Figure 25: Pie and Donut charts added in main page

Pie & Donut charts added in tabs Figure 26: Pie and Donut charts added in tabs

A Radar chart is the graphical method of displaying multivariate data in the form of a two-dimensional chart of three or more quantitative variables represented on axes starting from the same point. The radar chart visualizations are used for comparing the points of two or more different data sets, or for visualizing KPIs by drawing a perimeter defined by the KPI values. The radar chart representation is shown in the top of Figures 27 and 28. The chart title and legend are displayed on top. To hide/unhide a given Series or Category from the chart, the user shall click on the respective category in the legend.

A Polar chart is similar to a pie chart with an additional dimension (radius of slice). In polar chart representations, each segment has the same angle and the radius of the segment differs depending on the value. The polar chart visualizations are used to show a comparison of data, but also the scale of values in a given context. The polar chart representation is shown in the bottom of Figures 27 and 28. The chart title and legend are displayed on top. To hide/unhide a given Series or Category from the chart, the user shall click on the respective category in the legend.

Radar and Polar charts added in main page Figure 27: Radar and Polar charts added in main page

Radar and Polar charts added in tabs Figure 28: Radar and Polar charts added in tabs

3.2.9 Point charts

The Point charts category consists of two components, Bubble and Scatter charts, that can be integrated in the main page, as shown in Figure 29, or in Tabs component, as shown in Figure 30. Similar to other charts, these elements require a data source to be populated, but this functionality is currently not implemented.

A Bubble chart is a multidimensional representation of single data points. These charts help visualize the relationships between categorised circles and can be used to compare data and analyse different patterns. Each bubble on chart has three pieces of data related to it: its X coordinate, its Y coordinate, and its bubble size, and bubbles in one series carry the same colour. The bubble chart representation is shown in the top of Figures 29 and 30. The chart title and legend are displayed on top. To hide/unhide a given category from the chart, the user shall click on the respective category in the legend.

A Scatter chart or plot is a two-dimensional representation used to display variation of data from a trend line. Scatter charts use a collection of points placed using cartesian coordinates to display values from two or more variables. These charts help visualize if a relationship or correlation between the variables exists and see if one variable impacts the other. The Scatter chart representation is shown in the bottom of Figures 29 and 30. The chart title and legend are displayed on top. To hide/unhide a given category from the chart, the user shall click on the respective category in the legend.

Point charts components added in main page Figure 29: Point charts components added in main page

Point charts components added in tabs Figure 30: Point charts components added in tabs

3.3 Third-party web application development

The SDK frontend dashboard allows users to create a third-party web application with various components that can be shown in-page or placed in tab components. The web-frontend is divided in four areas, as presented in Figure 11 from Section 2.1:

  • Area A which contains a button to hide/unhide the menu;
  • Area B, the board where selected components are placed;
  • Area C, with two buttons: one for erase content from the board and one to export the created third-party web application;
  • Area D, the main menu, where the components are displayed.

3.3.1 Hide/unhide menu

To hide the menu displayed on the right side, in area D, the user shall click on the button displayed in Area A, highlighted in Figure 31. As soon as the Hide button was pressed, the user view is exemplified in Figure 32. To see the menu again, the user shall click on the Unhide button, highlighted in Figure 32.

Hide menu button Figure 31: Hide menu button

Unhide menu button Figure 32: Unhide menu button

3.3.2 Add components

The EFPF Frontend Editor allows users to create a third-party web application that contains multiple components which can be shown in-page or placed in tabs.

3.3.2.1 Add data sources

As explained in Section 3.2.1, some frontend components require a data source to be populated (e.g. tables, graphs). Therefore, in order to add a data source, the user has two options:

  • click on the Add Data Source button in the main menu, or
  • select an element from the menu that requires a data source (e.g. Table, Gantt Chart).

In both cases, a pop-up is displayed, allowing users to create data sources. To add a data source, the user must provide a data source name and data source URLs. The user can provide one or more URLs for each data source, as shown in Figure 33.

Add URLs to data source pop-up Figure 33: Add URLs to data source pop-up

As soon as the user clicks on Create button in Figure 33, the data source is saved and remains available as long as the workspace is active. Each data source is checked to be valid first and if at least one is not, an error will be displayed in order to check the data source and change it or remove it.

3.3.2.2 Add elements

The main menu, displayed in the D area, comprises nine categories of components, as described in Section 3.2. Each component from these categories can be placed in the main page of the frontend, in area B, either in the board section, or inserted in a Tab container. To add an element inside a Tab container, the user must first add a Tab component on the page.

In order to place a component on the board section, the user shall simply select the component category (e.g. layout, controls, text, tables, charts) from the menu and click on the respective element.

By using the Layout components, the user can customize the application visualization. Hence, in order to add a header and/or a footer on the board, the user shall click on the Header/Footer component, and this element will be added on the board instantly or in a tab component. Same actions must be followed to add a horizontal line, which can be used to separate different components.

Create Tabs pop-up Figure 34: Create Tabs pop-up

To add a tab on the board, the user must click on the Horizontal Tabs / Vertical Tabs component and a pop-up will be displayed, as shown in Figure 34. Here, the user must provide a container name (e.g. Horizontal Tabs) and at least one tab name (e.g. Tab1, Tab 2). The container name must be unique in the editor and the tabs names must be unique per tab container.

As soon as the user clicks on Create button in Figure 34, the horizontal/vertical tab is added on the board, as shown in Figure 35.

Tabs component in main page Figure 35: Tabs component in main page

Furthermore, as described in Section 3.2.2, a tab container can embed other components, or yet another tab container. Once a tab container was added on the board, the user has the possibility to use this option and add components in the selected tab. Therefore, if a tab container is placed on the board, each time a component is selected, a pop-up will be displayed, as shown in Figure 36. Here, the user has to possibility to select where the component will be added:

  • if the default option is selected (Append in page), the new component will be placed in the main page, beneath the last added component.
  • if the user selects one available tab from the list of options, the new component will be placed in the selected tab.

Component customization pop-up Figure 36: Component customization pop-up

In the Controls category, five key-components: a button, a select box, a search box, a date picker, and a URL host (iFrame) are displayed to provide users ways to trigger an event on the page (e.g. searching for a query). To place one of these components on the board, the user must select a component. If a tab container has been previously added on the board, the user must specify where the selected element should be placed, and provide further information, as follows:

  • To add a button, the user must provide a name for it, as shown in Figure 37.
  • To add a select box, the must enter values for the options menu, as shown in Figure 38.
  • To add a search box or a date picker, the user must select the component (no additional information is required).
  • To add a URL (iFrame), the user must provide a link, as shown in Figure 39. As described, in Section 3.2.3, the iFrame can embed only HTTPS content on HTTPS pages.

Button customization pop-up Figure 37: Button customization pop-up

Select-box customization pop-up Figure 38: Select-box customization pop-up

iFrame customization pop-up Figure 39: iFrame customization pop-up

Using the components from Text category, the user has the ability to insert texts anywhere on the board. Therefore, to place a text or paragraph component on the board, the user must first select the component. If a tab container has been previously added on the board, the user must specify where the selected element should be placed, and insert raw content, as shown in Figure 40 and 41. Here, the user has the ability to customize the inserted text, by providing several options to change the colour, the font size, and font style (e.g. bold, italic, underline).

Paragraph customization pop-up Figure 40: Paragraph customization pop-up

Text area customization pop-up Figure 41: Text area customization pop-up

The Tables category includes two components to add tables and Gantt charts on the board. To place one of these components on the board, the user must select the component, provide a data source (if data source was not added previously), and then specify where the selected element should be placed (e.g. on the main board, or inside a tab container). Furthermore, additional information must be provided, as follows:

  • To add a table, the user must select the data source from the list, as shown in Figure 42. Moreover, users can add other optional criteria for filtering the data (e.g. auto refresh, select box, search box, date picker), and select how many rows to display in the table (the default is set to 50).
  • To add a Gantt chart, the user must select the data source from the list and select the values for the mandatory fields (e.g. unique identifier, previous task, next task, activity start date, activity end date), as shown in Figure 43. Furthermore, users can add other optional criteria for filtering the data (e.g. auto refresh, select box, search box, date picker), and select how many rows to display in the table (the default is set to 30).

Table customization pop-up Figure 42: Table customization pop-up

Gantt chart customization pop-up Figure 43: Gantt chart customization pop-up

To add a chart on the board, the user shall select a component from the following categories, Bar charts, Line charts, Radial charts or Point charts, and specify where the selected element should be placed (e.g. on the main board, or inside a tab container). These elements require a data source to be populated, but this functionality is currently not implemented. Placed on the board, charts components support hover effects and show data on mouseover, as illustrated in Figure 44.

Charts hover effects Figure 44: Charts hover effects

3.3.3 Erase content

To erase content from the board, the user shall click on the Erase button displayed in Area C, highlighted in Figure 45. As soon as the Erase button is pressed, the entire board is cleared out and all components added previously are deleted. To add new elements on the board, the user shall follow the steps described in Section 3.3.2.

Erase content button Figure 45: Erase content button

3.3.4 Export third-party application

To export the created third-party web application, the user shall click on the Export button displayed in Area C, highlighted in Figure 46. As soon as the Export button is pressed, the application is exported and can be visualized in a web-format, as shown in Figure 10. To visualize the exported application, the user must download the project views (follow the steps described in Section 2.6).

Export button Figure 46: Export button

4 Sample use case: Shopfloor Intelligence

This section describes the Shopfloor Intelligence application which target is to retrieve shop floor data from the machines and generate best-practices, recommendations, and other advices.

Manufacturers use a range of data which includes shop floor data from the machines to inform their decision making. Collection and analysis of such data is largely useful in improving efficiency and reducing wastage / losses due to oversight or bad management. For example, by measuring the down time on machines between jobs, the owner can calculate the overall equipment efficiency. And that can further lead to some actions such as trying to bring the Overall Equipment Effectiveness (OEE) to get a better return on the investment in this machine.

Shopfloor Intelligence is a Sample category and shows users what they can achieve using the Frontend Editor.

4.1 Application storyboard

4.1.1 Logic

  • Every time the production starts or stops for longer than x (tbc) seconds, a Production Event will be published on the broker by the Industreweb Factory Connector (FC) with the appropriate status, timestamp and product details.
  • The FC is responsible for determining logic for start and stop of production (events).
  • Events will be saved in the Secure Data Store.
  • The BNI ChangeOverTime (COT) App will provide tools to view and provide BNI on the setup time to switch between different products in a Batch Size One production scenario.
  • The BNI COT App will query the Secure Data Store for the data to visualize and analyse.

Figure 47 illustrates the functional view of the Shopfloor Intelligence application.

Shopfloor Intelligence application functional view Figure 47: Shopfloor Intelligence application functional view

4.1.2 Requirements

4.1.2.1 Data model

{
 "timestamp": 1/1/2020 12:10:15,
 "machineId": "Edge Banding"
 "productionEvent": {
		"event": "Start | Stop",
		"batch": "1234",
		“productId": "abcd123",
		“productTypeCode": "ABC"
 }
}

4.1.2.2 Calculations

  1. ChangeOver Time Duration: Period of time between concurrent production events for the same machine where the productTypeCode changes
  2. Average ChangeOver Time: Mean Average of period of time between concurrent production events for the same machine where the productTypeCode changes
  3. Min ChangeOver Time: Smallest period of time between concurrent production events for the same machine where the productTypeCode changes
  4. Max ChangeOver Time: Largest period of time between concurrent production events for the same machine where the productTypeCode changes
  5. ChangeOver Deviation: Tbc…

4.1.2.3 Views

The required application views are exemplified in Figures 48 - 52.

Historical Production Events (timeline view – initial view) Figure 48: Historical Production Events (timeline view – initial view)

Timeline example Figure 49: Timeline example

Historical Production Events (tabular view) Figure 50: Historical Production Events (tabular view)

Historical Production Events (tabular view 2) Figure 51: Historical Production Events (tabular view 2)

Insights Figure 52: Insights

4.2 Application settings

4.2.1 Setting up

To add the Shopfloor Intelligence application on the board, the user must click on the Samples category and select the Shopfloor Intelligence component.

4.2.2 Datasets description

To populate the different components (e.g. table, charts) of the Shopfloor intelligence application, the following data sources are available for this use case:

4.2.3 Application components

The Shopfloor Intelligence application consists in three parts: the header, the main page, and the footer. The header is a block that appears at the top and includes the EFPF logo and project name. The main page section allows users to view the data either as a graphic or as a text record. The Footer is a block with black background that appears at the bottom and contains a variety of information and links to related to the EFPF project: EFPF logo in grey, the copyrights, and other relevant links regarding the EFPF platform.

As shown in Figures 53, 54, 56, 57, the main page section is structured in three horizontal tabs: Timeline, Changeover, and Insight.

The Timeline tab includes two additional vertical tabs: Graph, as shown in Figure 53 and Data, as shown in Figure 54. The data presented in this tab represents the historical events and it’s retrieved from the following data source: https://efpf.caixamagica.pt/efshopfloorintelligence/api/getHistoricalEvents

Shopfloor Intelligence Timeline – Graph Figure 53: Shopfloor Intelligence Timeline – Graph

In the Graph tab, users can visualize historical events data in a graphical representation. The Gantt chart visualization can be used for monitoring purpose. In a Gantt chart format, the rows are used for the activities and columns are used as the timescale. Users can use different filters to refine the data:

  • Select box - allows users to select the machine ID;
  • Search box - allows users to type-in text in order to display related data;
  • Date picker - allows users to select a time interval and hide rows of data which are not in the selected interval.

Shopfloor Intelligence Timeline_ Data Figure 54: Shopfloor Intelligence Timeline_ Data

In the Data tab, users can visualize historical events data in a table representation. Similar to the Graph tab, users can use different filters to refine the data: Select box, Search box, and Date picker. Additionally, users can export the table representation in a CSV format, as illustrated in Figure 55.

Shopfloor Intelligence Timeline_ Data - CSV format Figure 55: Shopfloor Intelligence Timeline_ Data - CSV format

The data presented in Changeover tab, as shown in Figure 56, represents the historical statistics and it’s retrieved from the following data source: https://efpf.caixamagica.pt/efshopfloorintelligence/api/getHistoricalStatistics

Similar to the Timeline tabs, users can use different filters to refine the data using the Select and Search boxes and can export the table representation in a CSV format.

Shopfloor Intelligence Changeover Figure 56: Shopfloor Intelligence Changeover

As illustrated in Figure 57, the Insight tab consists in three sections:

Shopfloor Intelligence Insight Figure 57: Shopfloor Intelligence Insight

4.2.4 Application generation

To export the Shopfloor Intelligence application, the user shall click on the Export button displayed in bottom of the page. As soon as the Export button is pressed, the application is exported and can be visualized in a web-format, as shown in Figures 58-61. To visualize the exported application, the user must download the project views (follow the steps described in Section 2.6).

Shopfloor Intelligence app - Exported visualization (Timeline Graph) Figure 58: Shopfloor Intelligence app - Exported visualization (Timeline Graph)

Shopfloor Intelligence app - Exported visualization (Timeline Data) Figure 59: Shopfloor Intelligence app - Exported visualization (Timeline Data)

Shopfloor Intelligence app - Exported visualization (Changeover) Figure 60: Shopfloor Intelligence app - Exported visualization (Changeover)

Shopfloor Intelligence app - Exported visualization (Insight) Figure 61: Shopfloor Intelligence app - Exported visualization (Insight)

Previous