How to Use the Layout View (BETA)

Motivation

The purpose of this view is to replace the shiftpace (Doughnut) view from whiteboard. The layout for shiftpace was done through a flash application so now that flash is not longer supported we need to create a new application for the users to design a layout of the plant floor and view the status of the machines in real time.

Previous:

Open

New:

Open

Accessing

Users can access by:

1. Clicking on the New Layout View button at the top right of old Layout View:

OR

2. Accessing from tree view by applying “/layoutbeta=true” to the splat, new icon appears in the tree view

Viewer Mode vs. Designer Mode

These two modes are able to be switched at the top right corner of the screen.

Viewer Mode

Data options

There are two options for deciding the colour of the machines. There is Live Running Status (Colour determined by the current state of each machine) and Current Shift Performance (Colour is determined by the machines OEE for the current shift)

Toggle-able through a pair of radio buttons at the top of the view

Side Panel options

The side panel consists of button for quick toggles. Viewer currently has two options, toggle the display of the legend and toggle full screen mode

Navigation to machine meeting view

• Clicking on any of the displayed machines while in viewer mode will navigate the user to the machines meeting view

Title Bar information

The layout view will always display the current shift only

Legend

• The viewer mode has a legend displayed on the layout which provides details about what each machine colour represents

• Contains a hide button, same action as the toggle legend button, removes the legend from the screen

• The legend will change when switching from live running status to current shift performance as the colours change. For current shift performance the ranges reflect the target values set in the settings

Dark mode

View will display in Light mode by default. However, users can switch to dark mode by going into the setting menu on the top right corner.

Designer Mode

Accessing Designer view

To access designer view there is a dropdown in the top right corner that lets the user toggle between viewer and designer mode

• Designer mode can easy be distinguished by the grid in the background

Side Panel options

The side panel options are different for designer as they contain the toggle for different tools used to design a layout.

Toggle Legend

• Displays or hides the legend, this will carry over to viewer mode

Removed Items

• Opens a popover that will contain a list of any machines that are hidden from the canvas.

• Meant as a quick method of adding related machines that may have previously not been important.

• Clicking on one of the machines in this list will add it to the canvas in the top left corner

Toggle Resize

• Used to enable the resizing of machines

• Other options become disabled while in resize mode, save is also disabled

• Activating will create angular lines in the bottom right of a machine which when clicked can be dragged to expand or shrink the size of the machine

Toggle Link Editing

• Used to enable link editing

• When activated other options are disabled and save is also disabled

• Activating will add 4 nodes to each machine on each side of the box. Clicking one will initiate a link creation and changes the colour of the clicked node. Selecting any node from another machine will complete and draw the link between the two machines

Clear Canvas

• When clicked all machines on the canvas and in removed items will be removed, leaving the user with a blank canvas.

• This action is not saved and can be reversed by refreshing the page

• After clearing the canvas the new component button becomes available

Add Machines to the Canvas

• Click on the +New Component button, a popup modal will display a tree structure with all the machine names;

• Select machines to be displayed (the ones that are not displayed will be found in Removed Items automatically);

Machines Displayed can be resized and relocated within the canvas

Once machines to be displayed added to the canvas, they can be resized and moved around within the canvas as demoed in the video below