Exercise - Create an LED Component

Creating a graphic

• Open a new Flowcode flowchart.

• Make sure that the System Panel and Properties Panel are visible.

• If they are not, then select them in the View Menu.

• Click on the hemisphere shape in the Shapes menu and drag one onto the Systems Panel.

500px

• The blue dotted square around it shows that this object is currently selected.

• Change the name of the component to 'LEDcomponent'.

To do this:

• Find the 'handle' of the component at the top of the Panel Properties.
• Click on the name 'shape' (the default name).
• Change it to 'LEDcomponent'.

Adding properties

• Next, add two properties to the LED. The first allocates a color. The second sets up a connection from the LED to the controlling microcontroller.

• First add a default color to the component, using a new property called 'color'.

To do this:

• De-select the hemisphere by clicking anywhere outside it in the Systems Panel.
• Hover over the icon to the right of the 'Properties' label.
• Click on the down-arrow that appears.
• Click on 'Add new'.
• In the 'Cosmetic name' box type "LEDcolor".
• Select 'Color picker' for the 'Property type'.
• Type "color" for the 'Property variable' name.

• In the same way, then add another new property to specify the default connection. Give it a Cosmetic name "Connection", with Property type 'Single digital pin' and a Property variable name "pin".

• Finally, configure these properties. To do this:

• Click on the color shown for the 'color' property.
  
• Select a color from the color chart that appears.
• Click on the word 'Unconnected', alongside the 'pin' property.
• Select an appropriate pin, such as RA0, from the chip pin layout.

Updating when properties change

The Property change event is triggered when any property you have added to your component changes.

• Open the Project Explorer from the View menu.

• Double-click on the item 'Connection -> PinChange'. The 'Add event' dialogue box opens.

• Hover over the icon to the left of the 'Macro' label. A drop-down arrow appears.

• Click on the arrow and select the option 'Add new'. The 'Edit Macro Details' dialogue box opens.

• Change the name of the macro to 'PinChange'.

• Click on 'OK'.

Updating when a pin changes

Because your component is connected to a pin, you want to run a flowchart when that pin changes. To do this, you can use the PinChange event.

To complete