|
|
| (12 intermediate revisions by 3 users not shown) |
| Line 1: |
Line 1: |
| − | <sidebar>Sidebar: Panel Exercises</sidebar>
| + | For an excellent introduction guide, we recommend [https://www.flowcode.co.uk/education/ Introduction to microcontroller programming] |
| − | This exercise starts the process of building the display panel for a car. It sets up the System Panel, with a warning LED.<br /> '''Although specific settings are given, you should play around with alternatives to see the effect.'''
| |
| − | | |
| − | | |
| − | __TOC__
| |
| − | | |
| − | ==New flowchart==
| |
| − | * [[Creating Flowcharts|Start a new Flowcode flowchart]], using the default microcontroller.
| |
| − | | |
| − | * Make sure that the [[System Panel]] is visible. If necessary, click on [[View]] and then select 'System Panel' a check-box will appear next to the option when enabled.
| |
| − | | |
| − | | |
| − | ==General options==
| |
| − | * Click on the 'General options' tab [[File:Gen Panel General Options 01.png|border]]
| |
| − | : Make the following changes:
| |
| − | ::* Move the 'Level of detail' slider fully to the right (to '10').
| |
| − | ::* Select 'Table top' shadow mode.
| |
| − | ::* Choose a 'Background' style of 'Solid color' and set the background color to dark blue, (Red=0, Green=0, Blue=128 on the 'Custom' tab.)
| |
| − | ::* Set the 'Table top' size to '20'.
| |
| − | ::* Choose a 'Table top' style of 'Solid color' and set its color to light blue, (Red=0, Green=70, Blue=255 on the 'Custom' tab.)
| |
| − | | |
| − | | |
| − | | |
| − | ==Grid and snap options==
| |
| − | * Click on the 'Grid and Snap options' tab [[File:Gen Panel Tools 01.png|border]]
| |
| − | : Make the following changes:
| |
| − | ::* Set it to snap to the 'Table top', by clicking on the check-box next to the 'Table top' label.
| |
| − | ::* Leave the 'Show' gridlines box unchecked.
| |
| − | | |
| − | | |
| − | ==Add the LED==
| |
| − | [[File:Gen_Inputs_Components_Toolbar_01.png|right|frameless]]
| |
| − | * Click on the 'Outputs' toolbox and locate an LED such as the 'LED 5mm Panel' component.
| |
| − | | |
| − | * Click on the down-arrow next to the component label and then on 'Add to system panel'.
| |
| − | | |
| − | | |
| − | * Right click anywhere on the System Panel and select the 'Zoom to 100%' option.
| |
| − | : The System Panel should now resemble the one shown below.
| |
| − | [[File:Gen_System_Panel_LED_5mm_01.png|center]]
| |
| − | | |
| − | | |
| − | | |
| − | | |
| − | | |
| − | | |
| − | ==Change the LED properties==
| |
| − | * Click on the LED to select it.
| |
| − | : In the Panel Properties, two properties appear for the LED - 'color' and 'pin'.
| |
| − | | |
| − | * The 'color' property is set as red (0x0000FF). Click on this value, and change it to orange (0x0080FF).
| |
| − | : You may see very little change in the appearance of the LED, as currently it is turned off.
| |
| − | | |
| − | * The 'pin' property determines which pin of the microcontroller the LED is connected to.
| |
| − | : Currently, this is $PORTA,0 (pin 0 of PORTA). Click on the label. A pinout of the microcontroller appears.
| |
| − | : Click on bit 1 (RA1/AN1) to change this connection.
| |
| − | | |
| − | * The Panel Properties also gives information about the size and position of the LED.
| |
| − | : By default, size is shown in terms of 'Scale'.
| |
| − | : Hover the cursor over the folder icon next to the 'Scale' label, and then click on the down-arrow that appears.
| |
| − | : Select 'World size'.
| |
| − | | |
| − | * Click on the 'Width' setting, (which may be shortened to 'Wi...'). Change it to 10mm.
| |
| − | | |
| − | * In similar fashion, change the 'Height' ('He...') to 10mm and the 'Depth' ('De...') to 5mm.
| |
| − | | |
| − | | |
| − | ==Zoom in==
| |
| − | * As a result, the LED now looks very small on the System Panel.
| |
| − | : You can zoom in to make it look larger. To do this:
| |
| − | : Hold down the control 'Ctrl' key on the keyboard. The 'zoom' icon appears. [[File:Gen Panel Camera Zoom 01.png]]
| |
| − | : Move the cursor over this icon. Now when you move the cursor up the screen, the view zooms in, and when you move it down, it zooms out.
| |
| − | : Adjust the zoom so that the 'Table top' fills most of the [[System Panel]], making the LED more visible.
| |
| − | | |
| − | ==Switch on==
| |
| − | * Click and drag an 'Output' icon to your flowchart.
| |
| − | : Double-click on it and change the 'Variable or value' setting from '0' to '255'.
| |
| − | : This sends a logic 1 signal to all pins of PORT A.
| |
| − | : The flowchart resembles the one below:
| |
| − | [[File:gen_exerciseSystemPaneladdobjects_outputprops_01.png|500px|center]]
| |
| − | | |
| − | [[File:gen_exerciseSystemPaneladdobjects_runicon_01.png|200px|right]]
| |
| − | * Run the simulation, by clicking on the 'Run' icon shown opposite.
| |
| − | | |
| − | : The LED will 'turn on'.
| |
| − | | |
| − | * Double-click on the 'Output' icon again, and change the value to '0'.
| |
| − | : Now when you simulate the flowchart, the LED will turn off.
| |
| − | | |
| − | * Save the flowchart as "System_Panel_Add_LED"
| |
| − | | |
| − | ==What next==
| |
| − | The next stage is to mount the LED on the instrument panel. This is covered in the exercise [[Exercise - System Panel - Controlling Shapes|controlling shapes]]
| |
| − | | |
| − | | |
| − | ==Video instructions==
| |
| − | | |
| − | See the [http://www.youtube.com/watch?v=2yT5XTLLX6o&list=PLQDWBb7bxuCgg6aJgPJcfXBMzZdLILceQ Adding Objects to the Panel] video for a demonstration and explanation about adding components and objects to the System Panel.
| |
| − | | |
| − | <div align="center">
| |
| − | {{#ev:youtube|2yT5XTLLX6o|640}}
| |
| − | </div>
| |
