Fullscreen HTML5Med Res (??MB)HTML4

Flowcode G raph ical Programming Flowcode C void interrupt(void) { if (intcon & 4) { clear_bit(intcon, 2); FCM_INTERRUPT_TMR o(); Assembly movlw D′7′ bsf STATUS, RP0 bcf STATUS, RP1 movwf _adcon1 movlw D′192′ movwf _option_reg Hex :040000008A01122837 :08000800F000F00S030 EF10000 :10001000040EF2000A0 EF300BA110A122928352 86C :2000200D928FE28073 Programming with Flowcode: RedBoard and PICs – Part 1 I n the September 2021 issue of PE, I introduced you to Flowcode, an integrated development environment (IDE) for programming microcontrollers such as Arduino, Raspberry Pi, many 8, 16 and 32-bit PICs and ARM devices. It achieves this by using flowcharts instead of text-based languages, which has the double benefit of making programming simpler and faster. Flowcode contains hundreds of premade component libraries, allowing users to interface with a host of sensors, inputs, outputs, displays and electromechanical devices. Despite its simplicity and ease of use, Flowcode is a powerful tool, allowing users to develop even the most complex of embedded systems. Flowcode supports both third-party hardware (including PICs, Arduinos, ESP32, ARM and Raspberry Pi) and also its own Matrix products. This powerful design tool is compatible with a huge number of ‘targets’ (the device being programmed). To get an idea of how many there are, just take a look here: https://flowcode.co.uk/embedded/targets/ Although modern devices are supported – eg, the PIC16(L)F15325 – in this series I have deliberately chosen a couple of popular older devices: 1. SparkFun RedBoard (an Arduino Uno clone) – USB powered 2. A PIC, the 16F88 I/P – needs a 5V external supply. The great advantage of these two is that they are part of Flowcode’s time-unlimited free-to-use package. This means you can follow along at your own pace without worrying that you are limited with a 30-day trial. (See the box at the end for details on using Flowcode for free.) Building our first RedBoard project In our first project we will provide an overview of the Flowcode IDE and use it as a vehicle to demonstrate how users interact with the environment and add components to the simulation panel. To do this we are going to create a traffic light flowchart, make sure it simulates correctly and then build the traffic light with real hardware. Finally, we will compile the flowchart to the microcontroller and watch it operate on the hardware. We will go into quite a lot of detail about using the software to set you up for more advanced projects later in the series. Let’s start by looking at what we’ll need. First and foremost, you will of course need a Windows-based PC with a copy of Flowcode 9 installed. The hardware for our RedBoard project is simple: n Red, orange/yellow and green LED – one of each, use cheap 5mm devices n 330Ω current-limiting resistors, 3 off – any 0.25W type will do n Solderless breadboard n SparkFun RedBoard (DEV-13975) or Arduino Uno n Male-to-male jumper wires, 5 to 8 off, depending on what target device is used n Tactile switch, suitable for mounting on the breadboard (push-to-make type) n USB cable to both power and program the RedBoard/Arduino Uno. Fig.3. Selection of a new target project. favoured destination, then you will also need to invest in a PIC programmer. We recommend the PICKit 4, but if you know your way around the PICkit 3 or other PIC programmers then they should be fine too. Our first task is to download and install Flowcode V9 plus the correct Toolchains (compilers, rules and useful target-specific files for working with the ‘AVR/ Arduino’ and ‘8-bit PIC’) from Matrix TSL at: www.flowcode.co.uk/download Before we proceed, it’s well worth knowing that you can find out much more about specific Flowcode items at the Flowcode Wiki: www.flowcode.co.uk/wiki First steps Once Flowcode and the Toolchains are installed, run Flowcode and select ‘Library Updates’. In the Updates pop-up window, select ‘Download’. When all updates have been downloaded, click ‘OK’ and then ‘Exit’. Next, select ‘New Project’. To select our target device, right-click on any target below the ‘Choose a Target’ tab. Fig.1 shows you can use a built-in search option. Select search and use ‘Find’ to enter the partial name of the required target – we type ‘red’, and click ‘Find Next’ to bring up the RedBoard (see Fig.2). At the top of the New Project tab, you should see the new target device to select, as shown in Fig.3. Click on this option and save your project from: File > Save As. You will need to name the project since this is the first time of saving – I saved/named mine as ‘LED Traffic Light’. One-second flasher What about programming a PIC? – we will come to that later, but if PICs are your Fig.1. Using the Search function to find the target device. Before starting any project, you will save a lot of time and headaches if you first create a basic one-second flasher. The purpose of this is to check the ‘Project Options’ match the hardware – in other words, the target’s ‘setFig.2. The Find Next option will bring up matching items – just tings’ are right. If they don’t match, then you entering ‘red’ for ‘RedBoard’ will work. Practical Electronics | January | 2022 39 Fig.4. Dragging a continuous Loop to the flowchart. will never get your project to work and the LED will either remain on, off or flash at the wrong rate. By testing the Options on the simplest of projects (ie, a single-LED flasher) we can check important parameters without setting up a complicated program that is doomed to fail. We will run through this exercise for the RedBoard, even though the Project Options match hardware by default for this particular target. Do be aware that for other targets, especially PICs, you will need to make some choices manually. First, go to ‘Project Explorer’ and add a Loop in our flowchart to make our microcontroller execute code indefinitely. (This loop condition means that whatever code is placed within our loop will execute forever.) We click and drag a Loop over to the flowchart, as shown in Fig.4. By default, the loop command is set to be a while(1) Loop, so it does not need any further configuration. (Note: the red star next to ‘Loop’ in Fig.4 means your project has not been saved since the last modification. Do get into the habit of saving regularly, or better still, set up Autosave from: View ribbon > Global Settings > Application tab.) Outputs The next icon we will add (drag to the flowchart working area) is called an ‘Output’. These are used to set the state Fig.5. Set the Output to pin 13. 40 Fig.6. Dragging a Delay to the flowchart. of a target device’s pins to high or low – hence the name, ‘Output’. We set the output pin number choice in Properties, and the value can either be fixed in properties (high or low) or can be a variable, where the high/low value is determined by program operation. Next, we need to configure the Output. This is done by double-clicking its Icon to view its Properties. We will use the RedBoard’s pin 13 to drive the LED that is built onto the RedBoard, and configure our Output’s Properties to match this. To use pin 13 in this way, ensure the ‘Use Chip References’ box is unticked. If you leave it ticked then it will use the board’s IC pin name instead; for example, PORTB5. (See Fig.5.) Next, we want to turn the LED on, which is achieved by writing a value of 1 in the ‘Variable or value’ box. Of course, to make an LED flash, we must turn it on and off. Place another Output icon on your flowchart, below the first one, and configure it as before – except this time write a value of 0 to turn the LED off. Adding Delays LED on for 1s, and then we turn it off. However, we do not hold the LED off, which means it will turn on again so fast that it appears to be permanently on. We need to add another Delay icon after we turn the LED off, as show in Fig.8. This completes the flowchart, and the simple LED flasher is now finished. Simulation The next step is to run our program in simulation to check it works as required. Then we will write it to hardware and make an actual LED flash. To simulate, we first add an LED to the 2D Dashboard Panel from: Components Libraries > Outputs > LED Section. Choose the device called ‘5mm, Panel’ – again, we choose this particular component because it’s guaranteed to be available if you are using the free version of Flowcode. When you add components, they will automatically be added to the centre of the 2D Panel. If you can’t see the component after it has been added, it might be too small (so zoom in), or it could have ended up in the wrong panel (ensure you do not use the 3D panel) or underneath another component (rearrange with your mouse). (To zoom, use the middle mouse wheel when the 2D Panel has been selected.) Viewing the LED component’s Properties window can be enabled via the View ribbon > Component properties, or just right-click on the component on the 2D Panel and select ‘Properties’ (Fig.9a). Our final step is to add delays. Microcontrollers operate at very high speeds (a 16MHz crystal is used on the RedBoard as standard). The default 16MHz crystal makes the PIC operate at four million instructions per second. If it were to turn the LED on and off at that speed, we would not be able to see the change occurring. Therefore, we’ll add a simple one-second delay, as shown in Fig.6. Now drag a Delay between the two outputs, double click the Delay icon and configure its Properties for a 1s delay – don’t forget to select seconds, not milliseconds or microseconds (see Fig.7). Are we finished? Not quite – as things stand, we turn our Fig.7. The Delay Properties window. Practical Electronics | January | 2022 (L) Fig.10. Simulation control buttons. (R) Fig.11. Simulated flashing LEDs. manually step through each icon to check that our program is working correctly. If we run our simulator, we will see that our LED flashes on for 1s and then off for 1s, as shown in Fig.11. Now, we’ll move on to the next stage and transfer our code to hardware. Transferring code to the RedBoard Fig.8. Completed one-second flasher. Once you have the LED’s Properties visible, select the spanner icon and note that the value $PORTA.0 is the default Connection setting. When using an Arduino Uno / RedBoard, I prefer the connection property to state the number marked on the PCB – in our case ‘13’. To do that, select $PORTA.0 and untick ‘Use Chip References’. Now select ‘pin13’ from the drop-down (Fig.9b) and the connection property becomes $pin13 (Fig.9c). Run the simulation We’re now ready to simulate the LED flasher. To do that, use the buttons from the Debug ribbon (see menus top of window), as shown in Fig 10. The ‘Go’ (ie, ‘play’) button begins the simulation. Once in play mode, we can pause or stop our simulation. The two icons on the very right allow us to manually step through our program. As previously mentioned, microcontrollers operate at very high speeds – much faster than we can see – so we often need to The RedBoard/Arduino Uno are easyto-program targets. If you are using a DIP Uno (microcontroller plugged into a holder), then the Windows drivers should work. If you are using a nonDIP (ie, surface-mount QTFP-type board), including the RedBoard, you will need to download CH340 drivers from: https://bit.ly/pe-jan22-CH340 Now check which port the board is connected to when plugged into your PC USB socket. Run the Device Manager (Windows icon, within the search window, enter device manager) and expand Ports (COM & LPT), as shown in Fig.12. This show which port has been assigned to the RedBoard. In my case, the connected RedBoard uses COM7. If I had the Uno connected and did not have Arduino IDE installed, I would just see ‘USB Serial Device’ as the device name. To transfer the code to the hardware, select Build ribbon > Project Options, as shown in Fig.13a, which will open up the window in Fig.13b. You should already have the correct target selected, as we did that at the beginning. The clock speed is fixed for the RedBoard or Arduino, so you won’t be able to adjust that. At the bottom of the Project information section, you will see ‘Programmer Port’ – select the correct port from the drop-down list (according to your Device Manager list), then select ‘Modify’. Finally, select ‘Compile to Target’ (Fig.13a). After a short time, the code will be compiled and sent to the RedBoard, which will then start running it automatically and the built-in LED should be flashing on then off each second. Let’s just pause for a moment and consider what we’ve done. Without writing a line of code we have created a RedBoard/ Arduino program, tested it in simulation, (hopefully!) verified that it works and then transferred the validated code to hardware and set it running. The program might be simple, but it’s the process that counts – quite an achievement! Developing the traffic light Now that we’ve validated our Project Options with the simple LED flasher let’s move on to something a little more ambitious – our traffic light design. Before you start, make sure the simulation is not running – you should see a bold run icon (Fig.10) and greyed-out stop and pause Icons. Our first goal is to create a traffic light simulation that looks like the one in Fig.14. (Remember, if the 2D Dashboard Panel is not showing, just select View ribbon > 2D Dashboard Panel to open it.) First, we’ll change the background to a darker blue. On the top of the 2D panel, select the paint icon (a brush) then Background colour. Select the blue next to yellow on the bottom row. Next, for the traffic light shape, select: Components Libraries ribbon > Creation, Fig.12. COM ports in the Windows Device manager. Fig.9. (L-R): a) Default properties; b) Choosing pin 13; c) Amended Properties display. Practical Electronics | January | 2022 41 Fig.13. Accessing the Project Options window. then select ‘Rectangle’ from the 2D shapes section, then Add to 2D dash panel. Next, select the rectangle component on the 2D panel, then right-click and select properties – there are now three icons to choose from: ‘Properties’, ‘Position’ and ‘Macros’ (see Fig.15a). For setting the rectangle’s colour, we choose Properties. Change the colour by selecting the current colour Custom Tab, then change RGB values to 29, 29, 29 (a dark grey) – see Fig.15b. Next, we want to create a second rectangle – select the rectangle you just created, right-click it, copy, then paste. Now we have two identical shapes called shape_rectangle1 and shape_rectangle2 (you can check which is which by examining their ‘Handle’ (ie, name) in Properties). Fig.15. a) (above) Selecting a shape’s Properties window; b) setting its RGB colour. Let’s create the top section of the traffic light. Select shape_ rectangle1, then right-click and open its Properties. (Note: you can also use the top drop-down within Properties to select each component/shape.) Next, select the ‘Position’ icon, which allows you to enter both the shape’s position and size, and enter the following: World Coordinates X, Y, Z: 0, 164, 0 World Size Width, Height, Depth: 150, 271, 0 Now create the traffic light pole. Select shape_rectangle2 and enter the following: World Coordinates X, Y, Z: 0, –183, 0 World Size Width, Height, Depth: 30, 423, 0 Next, we add the lights. You will already have one LED on the pane called led_5mm_clip1. This will be the green traffic light bulb. Select the LED from Properties and change the required position and size values: World Coordinates X, Y, Z: 0, 82, 0 World Size Width, Height, Depth: 96, 83, 100 Now select the spanner icon; you will see that the Connection shows $PORTA.0 as the default setting. As explained earlier, when using the Arduino Uno / SparkFun RedBoard I prefer to use the numbers that are silkscreened on the PCB. To do that, select $PORTA.0, and in the pop-up window untick Use Chip References and select pin10 from the drop-down, so that the LED’s Connection Properties become: $pin10. Then, set the following additional properties: Fig.14. Traffic light model created on the 2D panel. 42 Polarity = Active_high Color = 00FF00 (click Custom tab and enter RGB = 0, 255, 0) (Note: in the Properties panel, the Color value is in hex and displayed ‘in reverse’ using the BGR (blue-green-red) format, ie, BBGGRR. In the custom panel you enter decimal values, Practical Electronics | January | 2022 for example to create FF, you enter 255. If you don’t know the decimal equivalent of a hex number, say BF, then use the Windows calculator in Programmers mode. Select HEX and enter BF. The calculator will display the decimal equivalent of hex BF, which is 191.) Next we will set the LED’s ‘Label’ to blank so that it’s not superimposed on the traffic light Fig.16. Green LED Properties. simulation (note: since the Label is not displayed, you can ignore all of the other Label properties): Label, Show = None Finally, change the LED’s ‘Handle’ from led_5mm_clip1 to something more user friendly: Green. These Properties are summarised in Fig.16, and the 2D Panel result is shown in Fig.17 with the Green light added to the rectangle shapes. All we need to do now is add the other two LEDs. Select and copy the Green LED and paste twice. To avoid confusion, rename the Handles of the two new LEDs Red and Amber. Then, for the Red LED we set the following Properties: Color = 0000FF (Custom tab RGB = 255, 0, 0) Connection = $pin12. World Coordinates X, Y, Z = 0, 246, 0 Next, for the Amber LED: Color = 00BFFF (Custom tab RGB = 255, 191, 0) Connection = $pin11. World Coordinates X, Y, Z = 0, 164, 0 That’s the traffic light simulator almost finished. The final Component to add is a switch, located in Components > inputs. The name of the switch is Switch (Push Panel). (As before, I chose a free part.) Place it on the 2D Dashboard with the following Properties: Connection = $pin2. World Coordinates X, Y, Z = –95, –68, 0 I added a label displaying the word ‘Push’ below the switch using ‘Static Text’. To do this, I used the search feature found on the far left of the Components Libraries ribbon. Click on the magnifying glass and enter ‘static’. The results show static text is found in: Components > Creation > 2D Shapes. Now add that to the 2D Dashboard panel. Drag, resize and 2D/camera views Last, a quick note about using the 2D Panel. All the items added to the panel can be dragged or resized with these tools: Fig.17. Traffic light with just If the symbols are different to what’s shown the Green LED here, then you are in camera mode. To change added .back to 2D Panel mode click this icon: Next month We’ve covered a lot of detailed, but important ground in this article. Next month, we will complete this mini project by creating our traffic light flowchart, running it in simulation mode and then on actual hardware – both the RedBoard and a PIC. Martin Whitlock is Applications Engineer at Matrix TSL – the company behind Flowcode. Try Flowcode for free! We hope you’ve found this article interesting. If you’d like to try Flowcode for free then just go to https ow ode. o.u download and download the code. You’ll get a 30-day free trial of the full version – but that’s not all. Even after the 30 days are up your copy of Flowcode will continue to work, but at a reduced level with a limit on the size of program you can run and access to a more basic set of parts. However, for beginners it is still an ideal platform with which you can Practical Electronics | January | 2022 build and run programs, on for example, the Arduino Uno/ RedBoard or a PIC 16F88 that we are using in this project. Only when you are really sure that you want to use Flowcode do you need to buy inexpensive access to say a Raspberry Pi or Bluetooth module. (See: https ow ode. o.u buy pro ess for all the modules available and what they contain.) What’s more, as soon as you buy any module, the restrictions on the size of your code are removed. Flowcode C void interrupt(void) { if (intcon & 4) { clear_bit(intcon, 2); FCM_INTERRUPT_TMR o(); Assembly movlw D′7′ bsf STATUS, RP0 bcf STATUS, RP1 movwf _adcon1 movlw D′192′ movwf _option_reg Hex :040000008A01122837 :08000800F000F00S030 EF10000 :10001000040EF2000A0 EF300BA110A122928352 86C :2000200D928FE28073 If you get stuck with anything relating to Flowcode (installation, software, creating flowcharts, compiling to hardware, hardware not working… then there are forums set up to help you: https www. ow ode. o.u oru s dis ount One more thing – Flowcode is deliberately designed to be inexpensive, but PE readers can get a further 20% discount when they use the code PE20 at checkout. 43