System Panel

The System Panel provides a real-world framework on which to load Flowcode components. It then shows how these components perform during simulation of the current program. It can be customised by adding different background layouts, grids, images etc. The System Panel is opened by selecting it in the View menu. When it opens, you see a central coloured square, called the Table top, set against a coloured background. The colours of both are set in the General Options area (show icon.) This area also allows you to add shadow to the Table top and to objects to make them look more realistic, and to set the size of the Table top. The Table top provides a 'surface' on which components are placed. It is a flat plane that objects can be placed on. When locked to the Table top, all objects sit on top of it and interact as solid objects. It is also useful as a surface for shadows, giving a sense of depth. Electronic devices can be added to the System Panel from the Components Toolbar. Then, input devices like switches can be operated to control the progress of the simulation, while output devices, like LEDs show the result. The 'camera' (viewpoint) can be panned or rotated around different axes using the three icons shown. (Show icons.) These work in conjunction with the Ctrl key and the 'handles' that appear on an object when it is selected, and with the three coloured arrow heads that show the camera orientation. For example, clicking on the blue arrow gives a top-down view – looking down the ‘Z’ axis. Clicking on one of the other coloured arrows rotates the object about that axis. Pressing the Ctrl key reveals a viewpoint icon (show icon.) Clicking the mouse on one of the 'handles', or on one of the arrow heads, now rotates the camera rather than the object. There is also a zoom facility, operated by pressing the Ctrl key and moving the cursor over the viewpoint icon. Clicking the mouse button and dragging downwards causes the view to zoom out. Dragging upwards causes the view to zoom in. The coordinates of the cursor are shown in the status bar at the bottom of the screen. Using this information can help you to position objects. First of all, move the cursor to the desired position, to find its coordinates. Then enter these into the 'Position' properties of the object in the Properties Panel. Multiple items can be selected, by holding down the shift key and then clicking on a number of items, one after the other, or by left-clicking the mouse button and dragging over the items. They can then be grouped either by clicking on the ‘group’ icon (show icon) or by selecting the ‘Group’ option from the ‘Selection’ option which appears when you click the right-hand mouse button. In this way, complex structures can be assembled from a number of parts. To ungroup, select the object and then click on the same icon.

Using the controls Three views would be good – set them up and worry later – “You’ve already seen... The System Panel has a Shapes toolbar running vertically down the left-hand side, and a Controls toolbar running horizontally across the top. Looking first at the Shapes toolbar, at the top is a colour selector, which sets the colour of any shape added to the work area. By clicking on the down-arrow, one of a wide range of colours can be selected. Below it is the text icon. This can be used to drag’n drop a single row of alphanumeric characters onto the work area. Afterwards, you can select it, by clicking on it, and configure it using the Properties Panel. In particular, when added, it is displayed as “Please change caption.” You can edit the text displayed using the bottom ‘Text’ control on the Properties Panel. The next fifteen icons allow you to add a variety of shapes - some two-dimensional, others three-dimensional, to the work area. Each takes the colour chosen in the colour selector at the top. Each one can be configured using the Properties Panel, to determine the position, size and rotation of the shape, for example. Mesh... Electronic devices can also be added to the System Panel. They are located in the Components toolbox, which is divided into sections such as ‘Inputs’, ‘Outputs’, ‘Storage’ etc. Find the device that you need, move the cursor over it and a down-arrow appears, allowing you to add the device to either the System Panel or the Dashboard Panel. Click on the one you want. Looking at the Controls toolbar, the first four controls operate on the size, position and rotation of the component. The left-hand end control (show icon) allows you to move the selected object around the work area. Multiple items can be selected, by holding down the shift key and then clicking on a number of items, one after the other, or by left-clicking the mouse button and dragging over the items. They can then be grouped either by clicking on the ‘group’ icon (show icon) or by selecting the ‘Group’ option from the ‘Selection’ option which appears when you click the right-hand mouse button. Moving to the right, the next control (show icon) allows you to re-position a single point on an item. When you select an object and click on this control, pink ‘handles’ appear on the object. Selecting one of these allows it to be moved to a new position on the work area. The effect is to change the appearance, size or rotation of the object. The next control (show icon) allows you to change the size of the object. After selecting an object and clicking on this control, a number of blue ‘handles’ appear on the object. Any of these can be ‘grabbed’ and moved to re-size that particular dimension of the object. (Handles at the corners affect size in two dimensions.) The next control (show icon) allows you to rotate an object. After selecting it and clicking on this control, a number of yellow ‘handles’ appear on the object. These allow the object to be rotated around different axes.

To see these three controls in action: • Add a cuboid shape to the Table top. • Select it by clicking on it, and choose the ‘Centre all objects’ option from the right-click menu. • On the Properties Panel: • Notice the default settings: • Scale - W = 32, H = 32, D = 32; • Coordinates - X = 0, Y = 0, Z = 0; • Zero all the ‘Rotation’ settings. • Click on the cuboid to select it and then click on the first control, (show icon.) Use the mouse to drag the cuboid around. Notice that when you release it, the X, Y and Z coordinates have changed. • Cancel this action by: • clicking on the ‘Undo’ arrow, • selecting Undo from the Edit menu • or pressing the Ctrl+ Z keys. • Now click on the second icon, (show icon.) Grab one of the handles that appear and move it around with the mouse. Notice that you can move it in any direction. When you release it, the ‘Coordinates’, ‘Scale’ and ‘Rotation’ settings have probably all changed. • Cancel this action as before. • Now click on the third icon, (show icon.) Grab one of the handles that appear on the side of the cuboid and move it with the mouse. Notice that it will only move in one dimension. When you release it, the ‘Coordinates’,and ‘Scale’ settings for that dimension have changed. • Cancel this action as before. • Next, grab one of the corner handles and move it with the mouse. Notice that it affects the size of the component in two dimensions. When you release it, the ‘Coordinates’,and ‘Scale’ settings for both dimensions have changed. • Cancel this action as before. • Now click on the fourth icon, (show icon.) Notice what happens when you grab one of the handles and move it with the mouse. Each handle allows you to rotate the component around one axis only. When you release it, the ‘Rotation’ settings for that axis have changed.

The next three controls determine the camera (viewpoint) behaviour. The first allows the camera to pan left / right / up / down. The second allows the camera to rotate around a vertical axis. The third allows the camera to rotate about a horizontal axis. To see this: • Add a cuboid shape to the Table top. • Select it by clicking on it, and choose the ‘Centre all objects’ option from the right-click menu. • Click on the first camera control, the ‘pan control’ (show icon.) • Hold down the Ctrl key while clicking and dragging with the mouse. Notice that the properties of the cuboid, shown on the Properties panel, do not change. However, the viewpoint has panned to one side. • Do the same with the other two camera controls, (show two icons.)

The next control (show icon) determines what happens when two objects ‘collide‘. The options are that they move through, move around or move over each other. To see these effects: • Make sure that the System Panel is visible. • Make sure that the ‘Snap to’ options are all cleared. • Set the Table top size to 20, and choose contrasting colours for the Table top and Background. • Adjust the zoom so that all the edges of the Table top are visible. • Add a sphere and centre it on the Table top, (by selecting it and using the right-click menu option ‘Centre all objects’.) Colour it red. • Add a second sphere so that it sits on the table top, (coordinate Z = 16 if using the default sphere size. Colour it blue. • Set the ‘Collision’ control’ to ‘Move through. • Move the blue sphere past the red one and notice what happens. • Now rotate the Table top to give an ‘end-on’ view, by clicking on the tip of the green arrow. Move the blue sphere past the red one again, and see the effect. • Now change the ‘Collision’ control’ to ‘Move around’. • Repeat the sequence of moves, viewing from both the ‘top-down’ and ‘end-on’ viewpoints. • Finally, do the same with the ‘Collision’ control’ set to ‘Move over’.

The next icon (show icon) is used to align the camera with the selected object. More...