Fullscreen HTML5Med Res (??MB)HTML4

Flowcode Graphical 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 2 L ast month, I explained how to test if Flowcode is properly set up to work with a particular choice of target (microcontroller) by creating a simple one-second LED flasher – a simple but important step in building a project. We then started to create a more advanced LED design – a set of traffic lights – which will demonstrate how to use some of the most common functions in Flowcode. We began by creating a traffic lights graphical simulation element, and now comes the fun part – designing the program and creating the code, but doing this without writing any code in the traditional line-by-line way. Creating the code This is our first proper project, so we’ll keep it simple. The very first step is to decide what we want our program to do – the algorithm. So, before we go any further let’s specify program operation. We want to power up our LED traffic lights hardware and then cycle through the correct lighting sequences, controlled by a single push-button, as follows: 1. Power up circuit, Red on 2. Enter loop, wait for button press 3. Press button Red stays on, Amber on Delay Red off, Amber, off Green on Stop until the next button push 4. Press button Green off, Amber on Delay Amber off, Red on Stop until the next button push 5. Return to 2. Fig.18. User macros. Practical Electronics | February | 2022 Item 1 is our turn-on/initialisation step. Cycles 3 and 4 are two sequences that move the traffic lights from stop to go and from go to stop. (Note that the order defined above is for UK traffic lights and may be subtly different to your local traffic lights. If so, just follow along with our choice, and when you are confident you understand the design process amend it to suit your local lights.) Last month’s one-second LED flasher program has now served its purpose, so all the icons within that program may now be deleted and will be replaced with our traffic lights program. Macros For all types of coding, whether you are using complex languages like C or graphical systems such as Flowcode, it’s good practice to use ‘functions’. In Flowcode, functions are called ‘User Macros’, and we’ll be making a lot of use of these important elements. User Macros unclutter the program, which in Flowcode is called the ‘Main Macro’, and make it much easier to build and follow. Our Main Macro will include three User Macros called InitialState, Go and Stop. (Do notice the format of the name InitialState – it does not use spaces, which are not allowed. However, underscore is valid, so Initial_State could be used instead if that is your preferred style.) I like to use Project Explorer (enabled via View Ribbon) for adding User Macros, Variables, Component Macros or Command Icons – don’t worry, all these new concepts will be covered when we need to add them. To add User Macros, either use Project Explorer > Add New (or if you prefer, go via User Macros Ribbon > New Macro). In the resulting pop-up window add the Macro name (InitialState, Go or Stop) and click OK. At this point, your User Macros are just ‘blank boxes’; later we will add their required functionality. After the InitialState, Go and Stop User Macros have been created, select the Macros icon within Project Explorer and you will see the items shown in Fig.18. You will also see at the top of the working area, above the grid, four tabs, one for Main and three others for our new (blank) User Macros. Variables Programs almost always use elements called ‘variables’. A variable is for holding values that can change. Its range (the values it can take) depend on the type of variable you choose (integer, Boolean, bytes and so on). The larger the range, the more memory the variable takes. Therefore, when deciding what type to use, it’s important to choose carefully to minimise memory usage. In particular, make your choice based on what the maximum value will be. In our traffic lights program, we only need to use one variable, which represents the next traffic lights sequence to be run (from a choice of two, red to green, green to red). I named this variable Sequence. Let’s check what kind of variables are available for assigning to Sequence. The easiest way to do this is to select the Global Variables Icon in the Project Explorer. (You can see this in Fig.19, where I have labelled all the icons you can select within Project Explorer – including Global Variable.) After selecting the Global Variables icon, select Add New, then Add New again in the resulting pop-up window. Fig.20 shows the pop up window variable type options, long with the range of values each one offers. Fig.19. Use these guide to access Project Explorer Icons. 47 Fig.20. (left) Variable labelling and range choices. For our Sequence variable we are only interested in two, essentially binary values or states: 1 or 0, which will drive one of the two traffic lights sequences listed above. This means we choose variable type Bool, for Boolean (in the window of Fig.20). Name the variable Sequence. An initial value is required because otherwise our variable is undefined. Any variable that has not been set an initial value (uninitialised) will start with a random value. We want the Sequence value to start with 0, so place that in the Initial value box and then click OK. Building the program We are now in a position to build our program – the Main Macro, which is the program that is run on power up. Within the Main Macro we will ‘call’ User Macros to implement separate functions, such as initialising the traffic lights with a red light, running a sequence to turn the red light to green and then running a sequence to get back to the red light. In each case, whether building the Main Macro or individual User Macros, we will do this by dragging icons to the working area. (Note that there are separate working areas for each User Macro, accessed via the top tabs. If you have a lot of tabs then it will be easier to select User Macros from the project explorer) When the project is first run, the first thing we want to do is turn on the red light, we do this with the InitialState User Macro. So let’s now build that User Macro, converting it from its current blank condition into one that can perform its intended function, which is simply to turn on the red LED. Adding Component Macros Let’s start by adding a component. At the top of the working area click 48 Fig.21. (right) InitialState User Macro Flowchart. the InitialState tab. Next, recall that at the end of last month’s article (final page) we created three LED components in Flowcode, conveniently called Red, Amber and Green. We now need to drag these three components, which are represented in the program as ‘Component Macros’, into the InitialState User Macro working area. Refer back to Fig.19, click on ‘Components’ and you will see the window in the left of Fig.21. Note that our three LEDs each have two states – on or off. For our InitialState User Macro, we drag over the following: Red-TurnOn, Amber-TurnOFF and Green-TurnOFF. Your flowchart should now look like the one on the right of Fig.21. (Don’t forget to keep saving as you progress through the design build.) Creating the Go User Macro Creating the Stop User Macro For the Stop User Macro, strictly in the following order, add from top to bottom: Green TurnOff Amber TurnOn Delay 2 seconds Amber TurnOff Red TurnOff I might have made a deliberate mistake with the Stop user macro – let’s find out when we debug! That’s it! We’ve created three userfriendly, intuitive User Macros with no hint of C, assembler or any other time-consuming, error-prone coding! Now all we need to do is bring them all together in the Main Macro. I hope you can see the power of using Macros to break down our program into easyto-build chunks. Now for the Go user macro. Click on the Go tab at the top of the window and add, in precisely this order, from top to bottom, the following: Amber TurnOn Delay 2 seconds Red TurnOff Amber TurnOff Green TurnOn The new element here is the Delay icon, which you will also find in the Command Icons section. Drag it to the working area, double click it and enter 2s. (See Fig.7 last month for further details.) The result should look like Fig.22. a) (left) Go user Macro flowchart; b) (right) Stop Fig.22. User Macro flowchart (... but is it corrrect?). Practical Electronics | February | 2022 3. Next, we add a Calculation icon, double click it and assign it with Sequence = !Sequence. The ! is a logical NOT, all it means is toggle the value of Go. If Go is 0 before the calculation, then it will be changed to 1 afterwards, and vice versa. We do this to set up the next block. 4. Now add a Decision branch (from the Command Icons – see Fig.4 from last month). This needs our Sequence variable in the IF input window. Doubleclick on the icon to open the IF window and make the following setting: immediately below IF, replace the 0 with Sequence and click OK. The resulting decision branch has two options: Yes and No. If Sequence (as determined by our switch) is equal to 1, then the Yes branch will be accessed, leading to User Macro Go. If Sequence is equal to 0, then the No branch will be accessed, leading to User Macro Stop. Fig.23. (right) Main Flowchart. Creating the Main Macro The final Macro we need to build is Main. As soon as out target powers up, we need it to call the InitialState user macro. So, we select User Macros from within Project Explorer, and drag the InitialState User Macro to Main. Refer to Fig.23, which shows what we are building. To do this, drag the following, in the correct order, to below the InitialState user macro. 1. A Loop that keeps running forever (just like you did with the one-second LED flasher last month). 2. When we added the switch at the end of last month’s article, I should have mentioned that it had the name sw_push_rnd_pnl1. Our switch has three options for our Main Macro. The one we want is sw_push_rnd_pnl1 WaitUntilHigh – drag it to the first position after the Loop icon. The code will be paused at the switch until it’s detected as being pressed. Next, we need to set some switch properties, double click the switch Component Macro, enter the following and then click OK: Connection = $pin2 Polarity = Active low Debounce = 50 Operation = Momentary Practical Electronics | February | 2022 5. Finally, add the User Macro Go and the User Macro Stop in the two Decision branches. Your Main Macro flowchart should now look like Fig.23. Hurrah! – That’s it, you have now written the program, and I think you’ll agree it involved not one line of ‘written code’. switch as it waits for it to be pushed. (If it doesn’t, you will need to check the switch properties have all been set correctly.) Use the switch by selecting it and holding the left mouse button down, then single step until the red simulation outline is on the calculation icon, then the Sequence value will be 0. Now release the mouse button, and start single-stepping again. Observe what happens after the Calculation icon. The Sequence variable should change from 0 to 1. Keep singlestepping, and the Go User Macro should be accessed, because the Sequence variable will be detected as Yes, and acted upon in the decision icon. Keep single-stepping until you stop at the switch again. Are the lights correct on the traffic light? If not, check your Go user macro. Repeat the simulation again by single-stepping and clicking on the switch to change its state. This time the Stop user macro should be accessed. Check if the correct lights are on. They shouldn’t be! You will need to stop the simulation to change the choice of one of the LED component macro’s states: in the Stop User Macro replace Red TurnOff with Red TurnOn. Now, instead of single-stepping, press F5 or select Go (Run). Left-click the switch for a few traffic lights sequences, which should now run correctly. When you are happy with the simulation, you can move on to start assembling the hardware. Running a simulation and debugging We’ve created our program, so next we need to run it in simulation, and where necessary, debug it. First, Select the Debug ribbon. (Switch on code profiling (Show Code Profiling) to highlight all the icons that are being accessed.) To start the simulation in single-step mode, Press F8. You will notice a new window called Simulation debugger popping up. That will show you the Macro calls – ie, the Main or User Macros. It will also display the value of any variable that has been added. Make sure you can see the traffic lights we drew last month on the 2D Dashboard panel. Press F8 a few times, you will notice that the red light is on and the amber and green lights are off. So far, so good. If you carry on singlestepping it will stop at the Fig.24. Wiring Diagram – add a circuit diagram. 49 C 3 1 0 0 nF +5 V IC 1 P IC 1 6 F 8 8 - I/ P R 4 .7kΩ 6 7 R B 0 / IN T / C C P 1 9 R 2 330Ω R 3 330Ω 1 0 1 1 1 2 D 1 R ed D 2 A mb D 3 1 3 1 7 A N 0 /R A 0 1 8 A N 1 /R A 1 R B 2 / S D O/ R X / D T 1 V r ef–/ C V r ef/ A N 2 / R A 2 R B 3 /P G M /C C P 1 C 1 OU T / V r ef+/ A N 3 / R A 3 R B 4 /S C K /S C L C 2 OU T / T 0 C K I/ A N 4 / R A 4 R B 5 /S S /T X /C K M C L R / V pp/ R A 5 R B 6 /A N 5 /P G C /T 1 C K I C L K OU T / OS C 2 / R A 6 R B 7 / A N 6 / P G D / T 1 OS I C L K IN / OS C 1 / R A 7 2 3 4 1 5 X 1 1 9 .6 6 0 8 M H z 1 6 V S S G rn S 1 Fig.25. Traffic lights on green, after pressing switch. V D D R B 1 / S D I/ S D A 8 R 1 330Ω 1 4 5 C 1 2 2 pF C 2 2 2 pF Fig.27. PIC16F88 circuit diagram to drive traffic lights. Building the hardware The hardware is straightforward – Fig.24 shows how to wire the RedBoard. If you have an Arduino Uno, the connections will be the same. Do note you need to include a pushbutton pull-up resistor, as show in Fig.24 and Fig.27 (Not listed in Part 1). When the wiring is finished you are ready to send the code to the target device, in exactly the same way the one-second flasher was programmed last month. Now power it up. Once the hardware is running, just like the simulation, only the red LED should initially be lit. Then, when you press the button, the traffic lights sequence should change to green, in exactly the same way as real traffic light. This can be seen in Fig.25. Press the button again and it will cycle back to a red light. Change the target to a PIC16F88 Last month, we only programmed a RedBoard, but this month we will demonstrate one of the most important strengths of Flowcode – code that is written for one target will work on other targets. So, this month we will program a PIC, the 16F88. Changing the target device is easy. Just select the Build ribbon, Project Options. You will see a familiar window, as shown in Fig.1, last month, Enter ‘F88’ and choose ‘16F88’. For a PIC, we need to choose our external crystal frequency – we will use a common value, 19.6608MHz (make sure you use a crystal with this frequency). Fig.28. Using View ribbon > Component properties. Now for the ‘Configure’ settings. We need make only one change in the settings. Change the RA5/MCLR Pin Function Select from MCLR to RA5 – this means you don’t need to use a pull-up resistor and you’ll have an extra input-only pin. (Quick tip – if you don’t see the above wording, then make sure the ‘Show descriptive names’ box is ticked. When you have finished you should see what is shown in Fig.26, then select Modify. Finally, we need to make changes to the properties of the LED and the switch Component Macros in Flowcode because the pin connections for a PIC are not the same as the RedBoard/Uno – see the circuit diagram in Fig.27. The new properties that need to be entered are as follows: Red PORTB0 Amber PORTB1 Green PORTB2 Switch PORTB3 To do this, first go View ribbon > Component properties, and you will the window in Fig.28. Next, in this window click on the dropdown (here called ‘Panel’) and you will see the window in Fig.29. Click on the item you want to edit, for example ‘Green’, and you will see the Component Macro’s Properties window (see example of this in Fig.9 last month). Fig.26. PIC16F88 Configuration Settings. Fig.29. The Component Macros. 50 Practical Electronics | February | 2022 PORTA. Next, click on the righthand dropdown box and choose a PORTB connection – for Green, PORTB2. Now repeat the procedure for Amber, Red and the switch. Notice that each time you select a connection the relevant PIC pin is highlighted in green on the IC profile diagram, as shown in Fig.31. Note the pin, so that you connect up the hardware correctly. And that’s it, you have assigned each of the four Component Macros to a PIC pin. It’s worth reinforcing Fig.30. Assigning the PIC16F88 connections. a really important point here. The RedBoard is a fully assembled Now we can edit the Green LED’s conmicrocontroller board based around an nection. Click on the choice box to the ATmega328 microcontroller IC. The right of ‘Connection’. (It may still have PIC16F88 is a single IC from a completethe RedBoard’s connection and say somely different family of microcontrollers, thing like, ‘$pin10’.) Once you’ve clicked, but with just a few minor changes to our you will see a pop-up, as shown in Fig.30. Component Macros we have ported our Notice the two dropdowns: top left and program from one to the other. No code top right. Click on the ‘Unconnected’ rewrite needed. That flexibility is a key dropdown (top left) and it will give advantage of Flowcode. you a choice of PORTA or PORTB. We Next, in Flowcode, select the Build can use either, but we’ll opt for PORTB Ribbon and Compile to Hex. A hex file will because our crystal is connected to be generated in your project folder for you to load via your programmer of choice. We are now ready to program the PIC16F88 using, for example, a PICkit 4 with MPLAB – see Mike Hibbett’s excellent PIC n’ Mix series, especially Part 1-5 (July, September 2020 and January, March, May 2021). Do make sure your board is powered by an external 5V supply before programming. Now test your hardware with a powerup and using the push-button in the same Fig.31. The Green LED assigned to the way you tested the RedBoard circuit. PIC16F88’s pin 8, PORTB2. Fig.32. Traffic lights on green, after pressing switch. Fig.32 shows my PIC circuit operating after programming. We’ve covered a lot of ground, and the first time you use a powerful application like Flowcode there are a lot of ideas and processes to absorb, but I hope you can see that the fundamental nature of programming with Flowcode is quick, simple and intuitive – whatever your target. Next in Flowcode Our next Flowcode challenge will be to connect a 16x2 LCD to a RedBoard and PIC16F88. We will explain how to format and send characters to display a variety of messages. Martin Whitlock is an Applications Engineer at Matrix TSL – the company behind Flowcode. Try Flowcode for free! We hope you found this article interesting. If you’d like to try Flowcode for free then just go to https://flowcode.co.uk/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 Practical Electronics | February | 2022 you can 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 sure that you want to use Flowcode do you need to buy inexpensive access to say a Raspberry Pi or Bluetooth module. (See: https://flowcode.co.uk/ buy/process/ 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. If you get stuck with anything relating to Flowcode use (installation, software, creating flowcharts, compiling to hardware, hardware not working… then there are forums set up to help you: https:// www.flowcode.co.uk/forums PE discount! 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. 51