diff --git a/assets/img/authors/john-dobson.webp b/assets/img/authors/john-dobson.webp new file mode 100644 index 00000000..023b2e97 Binary files /dev/null and b/assets/img/authors/john-dobson.webp differ diff --git a/content/authors/john-dobson/_index.md b/content/authors/john-dobson/_index.md new file mode 100644 index 00000000..492a9266 --- /dev/null +++ b/content/authors/john-dobson/_index.md @@ -0,0 +1,7 @@ +--- +title: "John Dobson" +--- + +John is an engineer with 40 years of experience in the development and manufacture of electronic products including televisions, satellite receivers, microcontroller development tools and a huge range of educational products. + +John is the founder of Matrix TSL – the UK’s leading engineering education equipment manufacturer. John is also the Project Manager for the Flowcode software development team. \ No newline at end of file diff --git a/content/workshops/_index.md b/content/workshops/_index.md index b3ef950f..13b4b3b8 100644 --- a/content/workshops/_index.md +++ b/content/workshops/_index.md @@ -23,4 +23,4 @@ cascade: showTableOfContents : true --- -Welcome to the Espressif workshops! Here you can find workshops prepared by Espressif to the community. +Welcome to the Espressif workshops! Here you can find workshops prepared by Espressif and partners for the community. diff --git a/content/workshops/flowcode/01-planning/index.md b/content/workshops/flowcode/01-planning/index.md new file mode 100644 index 00000000..6c157a4b --- /dev/null +++ b/content/workshops/flowcode/01-planning/index.md @@ -0,0 +1,201 @@ +--- +title: "Flowcode - M5 Stack Dial Workshop - 1. Planning" +date: 2024-12-09 +series: ["FL001"] +series_order: 1 +showAuthor: false +--- +Ok - let’s be honest. Planning is a bit of a pain. Its boring. Its +not the fun part of the job. At the start of a project we are +itching to get on with the coding, the graphics and get +something working. + +But if you don’t plan then there can be all sorts of pain later: +you end up redoing work, falling out with colleagues and +customers, and it’s a lot less fun later on in the project. + +In part 1 we show you how we plan the project. + +### Specification + +We are going to show you how to make an electronic door lock +based on the M5stack dial with the following features: +- Based on M5 stack dial +- Code entry access using bezel and switch +- Maglock door opener – 24VDC @10A +- Graphical display +- Remote unlock with mobile phone +- Weather information on mobile phone and locally + +{{< figure + default=true + src="../assets/hardware.webp" + >}} + +Actually what we really want to do is teach you how to create a project based on the M5 stack dial. We have come up with the specification above so that we can teach you about the following: + +- [Assignment 1: Planning](../01-planning) +- [Assignment 2: Using the Display](../02-using-the-display) +- [Assignment 3: Switch and I/O Pins](../03-switch-io-pins) +- [Assignment 4: The Bezel Encoder](../04-the-bezel-encoder) +- [Assignment 5: I2C Expansion](../05-i2c-expansion) +- [Assignment 6: Menu System](../06-menu-system) +- [Assignment 7: Connecting to the web](../07-connecting-to-the-web) +- [Assignment 8: Full Project](../08-full-project) + +### Graphic designer’s brief + +Usually we need a graphic designer in a project like this. They just have a knack of making stuff look right. In this case we gave the designer a brief of creating an image that allowed us to teach how to display text, vector graphics, and bitmap graphics in an Electronic safe/door lockproject. This is what he came up with: +Fantastic. + +{{< figure + default=true + src="../assets/m5stack-test-screen-01.webp" + >}} + +From this we get a create colour scheme and a theme for our project. +What we need to do next is analyse this and turn it into information that we can use. The easiest way to do that is to redraw it. We are going to have to do that anyway to plan our menus. + +After doing that we get this: + +{{< figure + default=true + src="../assets/home.webp" + >}} + +As you can see we have taken the opportunity to draw a pixel grid on the diagram and we now understand the colours text sizes and position of all the graphical and text elements. + +We also need to plan our menu and functionality. Once we have the main screen done this easily falls out of the design and we get the following screens: + +When the user presses the bezel from the home screen they +can enter a combination. This graphic defines the elements +on that screen. + +{{< figure + default=true + src="../assets/combo.webp" + >}} + +If the code is incorrect then this screen tells them they have the +wrong combination. They can ring a mobile number and the +door can be unlocked by someone with the mobile phone app. + +{{< figure + default=true + src="../assets/noentry.webp" + >}} + + +If they are successful then this screen is displayed. The door +unlocks and they get a summary of the weather! + +{{< figure + default=true + src="../assets/unlocked.webp" + >}} + + +So that has defined our functionality. We can then show this to colleagues and customers and be really clear about what we are doing before we start. A real time saver! + +Now that we know what we are doing some other elements of the design easily come from this: + +### Colours + +We need to know the colours of all the items on the display. We will declare some constants in the program to save us time as well. So we have a list: + +| Name | R | G | B | Constants | +|------|---|---|---|-----------| +|Purple| 64| 33| 87 |PURPLER, PURPLEG, PURPLEB| +|Light purple| 85| 47| 108| LIGHTPURPLER, LIGHTPURPLEG, LIGHTPURPLEB| +|Orange| 255| 102| 0| ORANGER, ORANGEG, ORANGEB| +|White| 255| 255| 255| WHITER, WHITEG, WHITEB| +|Red| 255| 0| 0| +|Yellow| 255| 255| 0| +|Green| 0| 255| 255| + +### Graphics + +We also have a rough plan for the home screen graphics: +Purple circle background +- Grid at 20 Pixel intervals +- Text Heading and subheading +- Red circles 30, 120 210, 120 22 diameter +- Orange circles 40, 170 200, 170 18 diameter +- Yellow circles 75,205 165, 205 15 diameter +- Green triangle 120, 225 – can’t do triangles so we can use some diminishing rectangles +- Bitmap is 80 x 80 pixels. Top left is 80, 80. + +### Fonts +|Type|Size|Font face|Colour|Font Index|Const| +|-------|----------------|----------|-------|-------|---------| +|Heading| 15 pixels high |Arial bold| Orange| Font 0| HEADINGF| +|Subheading| 24 pixels high| Arial bold| Orange| Font 1| SUBHEADINGF| +|Instructions| 10| pixels high| Arial White| Font 2| INSTRUCTIONSF| +|Combo| 60 pixels high| Arial bold| Orange| Font 3| COMBOF| +|Digit| 35| pixels high| Arial bold| Orange| Font 4| DIGITF| + +We now know roughly what fonts we are gong to use. In Flowcode every font is assigned a number so again we declare constants for the fonts as you can see in the table. That saves us from having to remember what font is what. + +### Bitmaps + +There is only one bitmap. Like fonts in Flowcode bitmaps are represented by numbers, but as there is only 1 - bitmap 0 - its easy enough to remember. + +### Screens + +| Screen| number| Constants| +|-------|-------|----------| +|Home screen| 0| HOMES| +|Code entry screen| 1| CODES| +|Enter screen| 2| ENTERS| +|Denial Screen| 3| DENIALS| + +Each screen is represented by a number in the Flowcode program. We set up Global constants for these numbers so that we don’t have to remember what the numbers are. + +### Connections + +We can also define the connections both inside the M5 stack dial and outside. Flowcode needs the actual processor connections in order to drive the various chips and I/O inside the Dial. This is what we get when we dig into it: +Display is GC9A01A round, 240 x 240 pixel + +SPI bus with the following connections: + +- MOSI A5 (GPIO5) +- MISO A1 (GPIO1) +- CLK A6 (GPIO6) +- CS A7 (GPIO7) +- DC RS A4 (GPIO4) +- Reset A8 (GPIO8) +- Backlight A9 (GPIO9) +- Bezel switch B10 (GPIO5) +- Buzzer A3 (GPIO3) +- Bezel encoder +- A B9 (GPIO41) +- B B8 (GPIO40) +- I2C +- SCL A15 (GPIO15) +- SDA A13 (GPIO13) +- Relay on I/O pin A1 (GPIO1), A2 (GPIO2) + +## Video + +{{< youtube gjOI7aVCoqA >}} + +## Over to you + +Now we need to set up the hardware for the project. You can see this on the photograph. We have an M5stack Dial connected to the PC via USB. + +There is a board with two relays on that are connected to the general purpose IO pins G10 and G2. That allows us to switch 24A AT 28V - should be enough for a Maglock. For prototyping purposes I have put a small solenoid on the board to simulate the Maglock function. This is powered by a 24V plug top power supply. + +There is a Grove board with a SHT21 temperature and humidity sensor. This is connected to the Dial I2C pins GPIO13 and GPIO15. + +Get your M5stack Dial, relay board and SHT31 board and a suitable power supply and set up your project. + +You can see ours here: + +{{< figure + default=true + src="../assets/hardware.webp" + >}} + +## Next step + +[Assignment 2: Using the Display](../02-using-the-display) \ No newline at end of file diff --git a/content/workshops/flowcode/02-using-the-display/index.md b/content/workshops/flowcode/02-using-the-display/index.md new file mode 100644 index 00000000..ddac225d --- /dev/null +++ b/content/workshops/flowcode/02-using-the-display/index.md @@ -0,0 +1,144 @@ +--- +title: "Flowcode - M5 Stack Dial Workshop - 2. Using the Display" +date: 2024-12-09 +series: ["FL001"] +series_order: 2 +showAuthor: false +--- + +In this section we show you how to use the Display +component in Flowcode. Once you know the colours, fonts and +other parameters of your design, display graphics are just a +series of commands to draw the lines, graphics and text in the +right places. + +One of the great features of Flowcode is that you can simulate +the graphical display on screen - this saves hours of coding +time. + +{{< figure + default=true + src="../assets/2-0-candy.webp" + >}} + +First set up the panel in Flowcode as above: +PWM channel connected to PortA.9 (GPIO9) +This allows us to control the brightness of the display. + +{{< figure + default=true + src="../assets/2-1-panel-set-up.webp" + >}} + +Then add the GC9A01A_SPI display. Use the images here to +get the correct settings. + +{{< figure + default=true + src="../assets/2-2-backlight-properties.webp" + >}} + +If you need more information then you can left +click on the display and click on HELP to get +more information from the Flowcode Wiki. + +{{< figure + default=true + src="../assets/2-3-display-properties-1.webp" + >}} + + +Notice that we have not got the exact fonts that we wanted - +Flowcode does not include all fonts - although more can be +made - but the fonts that we have should be fine. + +{{< figure + default=true + src="../assets/2-4-display-properties-2.webp" + >}} + +{{< figure + default=true + src="../assets/2-5-display-properties-3.webp" + >}} + +{{< figure + default=true + src="../assets/2-6-display-properties-4.webp" + >}} + +You can also set up the Bitmap drawer. This +will need the central graphic copying to the +same directory as the Flowcode file so that it +simulates properly. + +{{< figure + default=true + src="../assets/2-7-bitmap-drawer-properties.webp" + >}} + + +{{< figure + default=true + src="../assets/2-8-first-flowchart.webp" + >}} + +The flowchart you can see above will produce the screen you can see below. + +{{< figure + default=true + src="../assets/2-9-first-sim.webp" + >}} + + +{{< figure + default=true + src="../assets/2-10-constants.webp" + >}} + +## Over to you + +Now that you understand the basics of how to control +the graphics and text you can complete the design of the first +screen using the specification: + +Download the program to the M5 stack dial and check is all works ok! +Note that if you want to you can also create your program in C code or in Pseudocode: + +{{< figure + default=true + src="../assets/2-11-pseudocode.webp" + >}} + +Open the program ‘Using the display.fcfx’ and +download it to your M5 stack Dial. + +- Use Flowcode to create the Home screen you can +see here. + +- Make sure you include the light purple cross hatch - you may want to make a separate macro to print +those. + +{{< figure + default=true + src="../assets/2-12-c-code.webp" + >}} + +- You will need to have the bitmap ‘M5Stack Lock +Test Purple.bmp’ in the same directory as the +Flowcode program. + +## Video and example file + +{{< youtube A0fKmmufJRk >}} + +A Flowcode example file accompanies this tutorial: +- [2 - Using the display.fcfx](https://www.flowcode.co.uk/wiki/images/b/b7/2_-_Using_the_display.fcfx) + + +Further reading: [Flowcode Wiki](https://www.flowcode.co.uk/wiki/index.php?title=Examples_and_Tutorials +). + +## Next step + +[Assignment 3: Switch and I/O Pins](../03-switch-io-pins) diff --git a/content/workshops/flowcode/03-switch-io-pins/index.md b/content/workshops/flowcode/03-switch-io-pins/index.md new file mode 100644 index 00000000..8dd9501b --- /dev/null +++ b/content/workshops/flowcode/03-switch-io-pins/index.md @@ -0,0 +1,56 @@ +--- +title: "Flowcode - M5 Stack Dial Workshop - 3. Switch and I/O Pins" +date: 2024-12-09 +series: ["FL001"] +series_order: 3 +showAuthor: false +--- + +There were quite a few new concepts in the previous section. +This section is relatively easy: we are going to look at how you +can use the Bezel switch and the general purpose I/O. + +The Bezel switch is connected to B10 (GPIO42) and the I/O is +connected to A1, A2 (GPIO1, GPIO2). + + +Start a new M5stack Dial program in Flowcode. +Add a switch and a LED to the 2D panel and create the +program you can see here. + +This is a simple program that reads the value of the switch on +the bezel (B10 or GPIO42) and sends it to the pins on A1 and +A4 (GPIO10 and GPIO2). You can simulate this and you can +check it works by sending it to your hardware. + +So what? + +You will notice that the switch logic is reversed: when the bezel +is pressed the input at Port B10 (GPIO42) goes low. + +## Over to you + +Modify the program so that the output stays on for 5 seconds +when the bezel is pressed. +Try the same program but use GPIO pins 13 and 15 rather than +10 and 42. Does the program work? + +{{< figure + default=true + src="../assets/3-1-io.webp" + >}} + +## Video and example file + +{{< youtube zbe-uf5mFSo >}} + +A Flowcode example file accompanies this tutorial: +- [3 - Using the IO.fcfx](https://www.flowcode.co.uk/wiki/images/1/1b/3_-_Using_the_IO.fcfx) + + +Further reading: [Flowcode Wiki](https://www.flowcode.co.uk/wiki/index.php?title=Examples_and_Tutorials +). + +## Next step + +[Assignment 4: The Bezel Encoder](../04-the-bezel-encoder) diff --git a/content/workshops/flowcode/04-the-bezel-encoder/index.md b/content/workshops/flowcode/04-the-bezel-encoder/index.md new file mode 100644 index 00000000..69317861 --- /dev/null +++ b/content/workshops/flowcode/04-the-bezel-encoder/index.md @@ -0,0 +1,79 @@ +--- +title: "Flowcode - M5 Stack Dial Workshop - 4. The bezel encoder" +date: 2024-12-09 +series: ["FL001"] +series_order: 4 +showAuthor: false +--- + +The bezel encoder feeds into two inputs - GPIO 40 and 41. +When you rotate the bezel the inputs go high - first one then +the other. The direction of rotation dictates which of the two +inputs goes high first. The Quadrature encoder component in +Flowcode takes care of the details for you and increments or +decrements a counter in the component itself. You need to +detect when a change has been made using an interrupt and +then read the counter value. + +{{< figure + default=true + src="../assets/4-0-candy.webp" + >}} + +Start with the previous program where you learned how to use +the bezel switch and the Input Output pins. +Add an Encoder and connect it to B.9 (GPIO41) and B.8 +(GPIO40). Alter the properties as you can see in the image +here. + +{{< figure + default=true + src="../assets/4-1-encoder-properties.webp" + >}} + +Your panel should look like this: + +{{< figure + default=true + src="../assets/4-2-encoder-panel.webp" + >}} + + + +{{< figure + default=true + src="../assets/4-3-bezel-program-a.webp" + >}} + +This program sets up interrupts for the +GPIO pins 40 and 41 - the internal Bezel connections. The interrupts call the +Encoderint macro which just checks for +changes on the Encoder. + +Alter your program so that it looks like the flow chart here. + +Note that you will need to set up an Interrupt Macro with just one command in it. + +{{< figure + default=true + src="../assets/4-5-bezel-program-c.webp" + >}} + +## Over to you + +Combine the functionality of the Bezel encoder, the switch and the display by altering the encoder counter to reset when the Bezel switch is pressed. You can use the Encoder hardware macro ‘Resetcounter’ for this. + +## Video and example file + +{{< youtube dVPpjeCYYsE >}} + +A Flowcode example file accompanies this tutorial: +- [4 - Using the encoder.fcfx](https://www.flowcode.co.uk/wiki/images/2/25/4_-_Using_the_encoder.fcfx) + + +Further reading: [Flowcode Wiki](https://www.flowcode.co.uk/wiki/index.php?title=Examples_and_Tutorials +). + +## Next step + +[Assignment 5: I2C Expansion](../05-i2c-expansion) diff --git a/content/workshops/flowcode/05-i2c-expansion/index.md b/content/workshops/flowcode/05-i2c-expansion/index.md new file mode 100644 index 00000000..45ecea78 --- /dev/null +++ b/content/workshops/flowcode/05-i2c-expansion/index.md @@ -0,0 +1,88 @@ +--- +title: "Flowcode - M5 Stack Dial Workshop - 5. I2C Expansion" +date: 2024-12-09 +series: ["FL001"] +series_order: 5 +showAuthor: false +--- + +In this section we are going to read a sensor value using the +I2C connection on the M5 Stack Dial. + +In this case we will use a small Grove sensor that contains a +SH31 temperature and humidity chip. + +Of course it’s a bit odd having a temperature and humidity +sensor on a door lock! But it allows us to teach you how you +can take advantage of the huge range of I2C sensors and +expansion devices to extend the functionality of your M5stack +Dial. + +{{< figure + default=true + src="../assets/sht31.webp" + >}} + +Start with the program you made in the previous section. + +Add a SHT31 Temp / Humidity sensor from the Sensors +component section. + +Adjust its properties as you can see here: + +{{< figure + default=true + src="../assets/5-1-sht31-properties.webp" + >}} + +You should have a panel that looks like this: + +{{< figure + default=true + src="../assets/5-2-panel.webp" + >}} + +Add two variables of type INT: Temperature and Humidity. + +{{< figure + default=true + src="../assets/5-3-variables.webp" + >}} + +Then develop the program you can see below. + +{{< figure + default=true + src="../assets/5-4-temp-hum-program.webp" + >}} + +The program is easy to read but there are a few things of note: + +The program initialises the display and the SHT31 sensor. +Initialisation is used on many components to set up registers +inside the microcontroller. + +When reading and display a value like this one issue you have +is that you are writing new numbers on top of old ones. When +the number changes the display becomes hard to read. So we +need to clear the area of the screen before we rewrite the +number. Clearing the screen takes time - its quicker to draw a +rectangle of the background colour (black here). + +## Over to you + +In practice the temperature and humidity are quantities that change very slowly. So there is no need to constantly rewrite the values on the screen. Develop a program that only redraws the values when they change. + +## Video and example file + +{{< youtube U0qznFTGxDU >}} + +A Flowcode example file accompanies this tutorial: +- [5 - Expanding with I2C.fcfx](https://www.flowcode.co.uk/wiki/images/7/7a/5_-_Expanding_with_I2C.fcfx) + +Further reading: [Flowcode Wiki](https://www.flowcode.co.uk/wiki/index.php?title=Examples_and_Tutorials +). + +## Next step + +[Assignment 6: Menu System](../06-menu-system) diff --git a/content/workshops/flowcode/06-menu-system/index.md b/content/workshops/flowcode/06-menu-system/index.md new file mode 100644 index 00000000..00d0e2df --- /dev/null +++ b/content/workshops/flowcode/06-menu-system/index.md @@ -0,0 +1,109 @@ +--- +title: "Flowcode - M5 Stack Dial Workshop - 6. Menu System" +date: 2024-12-09 +series: ["FL001"] +series_order: 6 +showAuthor: false +--- + +{{< figure + default=true + src="../assets/6-1-allscreens.webp" + >}} + +In this section we look at how you can create a menu system +using Flowcode. To make coding easier we have a separate +macro subroutine for each menu. One key issue here is that +you need to make sure that you close each subroutine when +navigating between screens. using a variable flag to control +navigation. It’s a slightly odd structure but easy enough to +create. + +In Flowcode each screen is a separate mini subroutine +program or ‘macro’ with an endless While loop. The navigation +is controlled by two variables OldScreen and NewScreen. A +screen navigation change is carried out by altering the +NewScreen variable which is examined in the While loop every +cycle. This structure might be a little unfamiliar to some +engineers, but it is actually really flexible and it allows us to +prevent while loops from not being closed - and hence the +microcontroller subroutine stack clean - good coding practice. + +At the core of this is a Switch or Case statement in the Main +macro. This is driven by numbers so we declare some global +constants representing the screens as follows: + + +| Screen| number| Constants| +|-------|-------|----------| +|Home screen| 0| HOMESCREEN| +|Code entry screen| 1| CODESCREEN| +|Enter screen| 2| ENTERSCREEN| +|Denial Screen| 3| DENIALSCREEN| + +Let’s see how this works: +{{< figure + default=true + src="../assets/6-2-main.webp" + >}} + +The code in the main screen is shown here. + +{{< figure + default=true + src="../assets/6-3-home-screen.webp" + >}} + +We initialise the screen and set the brightness then jump +straight into the main look with the Switch statement which +controls navigation between screens. + +In the Homescreen macro we print a message on the screen and then wait for the Bezel stiwch to be pressed. Remember that the swith is active low - it gives logic 0 when pressed so the test in the If statement is ‘Bezelswitch=0’.The Newscreen variable is altered to be the CODESCREEN. + +You can see the other three macros for the other menus here. The code is similar to the Home screen. + +So this program just cycles between the screens on the press of the Bezel switch. + +{{< figure + default=true + src="../assets/6-4-code-screen.webp" + >}} + +{{< figure + default=true + src="../assets/6-5-enter-screen.webp" + >}} + +{{< figure + default=true + src="../assets/6-6-denial-screen.webp" + >}} + +## Over to You + +We will not ask you to construct this program from scratch as there are now quite a few elements to it. Instead open the “6 - driving a menu.fcfx” Flowcode file and download it to your M5 stack Dial. Make sure that you can get it working and that you understand the program. + +In this example we simply navigated between the screens, one after the other, using the bezel switch. In practice you might want a slightly different menu system driven from the front panel using the bezel encoder to select the screen that will be navigated to and the Bezel switch to make the selection. To implement this: + +Alter the Home screen so that it prints ENTER, CODE, DENIAL above each other on the M5 Stack Dial. +- Print these in white text to start with. +- Modify the program to select the value of a new variable, Nextcreen, between 1 and 3 +- Overprint the ENTER, CODE, DENIAL text with red text as the encoder cycles the value of Nextscreen. Overprint in white the screen text as it is deselected. +- When the bezel switch is pressed change the program so that it navigates to the selected screen. + +Now you understand how to do menu selection with the bezel encoder and switch. You can use this simple technique to implement your own menu selection system. + +## Video and example file + +{{< youtube 8z-WcH0wGcY >}} + +A Flowcode example file accompanies this tutorial: +- [6 - Driving a menu.fcfx](https://www.flowcode.co.uk/wiki/images/0/05/6_-_Driving_a_menu.fcfx) + + +Further reading: [Flowcode Wiki](https://www.flowcode.co.uk/wiki/index.php?title=Examples_and_Tutorials +). + +## Next step + +[Assignment 7: Connecting to the web](../07-connecting-to-the-web) diff --git a/content/workshops/flowcode/07-connecting-to-the-web/index.md b/content/workshops/flowcode/07-connecting-to-the-web/index.md new file mode 100644 index 00000000..920980d1 --- /dev/null +++ b/content/workshops/flowcode/07-connecting-to-the-web/index.md @@ -0,0 +1,193 @@ +--- +title: "Flowcode - M5 Stack Dial Workshop - 7. Connecting to the web" +date: 2024-12-09 +series: ["FL001"] +series_order: 7 +showAuthor: false +--- + +In this section we look at how you can create a mobile phone +app to control the M5stack Dial. This works on Wifi and on the +local router. Controlling the Dial from outside the range of the +local router involves the use of a web Broker which we will not +look at here. + +The mobile phone app will allow you to control the Dial from +anywhere in the range of the router. + +{{< figure + default=true + src="../assets/7-3-web-panel.webp" + >}} + +Flowcode Web Developer allows you to create Apps that work +in a browser. It does this using the same PC interface as +Flowcode Embedded - but it creates Javascript programs. +If you have not used Javascript before there are three +fundamental changes that you will need to get to grips with: + +- Firstly Javascript is not like other programming languages - it +is an object orientated programming language where one +event or object calls another. +- Secondly Browsers can not be ‘talked to’ cold. Pages and their +content can only be fetched by browsers from the server. +That means that to send commands to an embedded system +it needs to detect which pages have been accessed. So +detecting a fetch of page “on.htm” might turn a light on and +detecting a fetch of page “off.htm” might turn a light off. +Correspondingly if we detect a page access of “getinfo.htm” +then the returning HTML content can be the temperature +value - or status of a switch etc. That allows us to have two +way communication - but only instigated by the Javascript +program in the browser on - in this case - the mobile phone. +- You will need to develop 2 programs: a Flowcode Embedded program that goes into the M5Stack Dial and a Flowcode Web Developer program that runs on your mobile phone. + +The Flowcode Embedded and Flowcode Web Developer programs are quite unfamiliar so its best to download the examples and work through them rather than create them from scratch. + +Firstly lets look at the Flowcode Embedded program “[7 - Connecting to web FE.fcfx](https://www.flowcode.co.uk/wiki/images/3/36/7_-_Connecting_to_web_FE.fcfx)”. Here is the panel: + +{{< figure + default=true + src="../assets/7-4-embedded-panel.webp" + >}} + +This builds on the panels in the previous programs. To the panel we have added a Web server, a Network comms layer component and a Wireless LAN component for the ESP32 chip. They all link together. + +We need to pass information to and from the M5stack Dial Embedded system and the mobile phone. So how do we do this? Here is the strategy: + +## Embedded system initialisation + +1. Connect to the wifi. +2. Router assigns an IP address – in this case automatically assigned to 192.168.1.141 (you will have a slightly different number). +3. Create a socket for communications to take place + +## Controlling the state of an output on an embedded system + +1. Mobile phone browser requests page “192.168.1.141/Enter.html”. +2. Embedded system detects “192.168.1.141/Enter.html” request. +3. Embedded system navigates to the Enter screen macro and the door is opened for 4 seconds +4. Embedded system responds with “Door opened” + +## Getting a temperature variable from the embedded system + +1. Client browser requests page “192.168.1.141/gettemp.html”. +2. Embedded system detects “192.168.1.141/gettemp.html” request in the HTML Callback macro +3. Embedded system takes temperature sample from SHT31 sensor. +4. Embedded system responds with the relevant data served HTML +5. Client browser picks up the HTML data and displays it on the mobile phone + +{{< figure + default=true + src="../assets/7-1-embedded-initialise.webp" + >}} + +We initialise the Wifi component and connect to the Router. This is a standard domestic Router and you will need to enter your Wifi network and password details. + +If the connection is unsuccessful then we print an error on the Dial screen. + +If the connection is successful we print the IP address and open a socket. Then we include the menu system from the previous program. + +The next thing we need to do is periodically check the Web connection to see if a page has been requested. We do this by putting a `CheckSocketActivity()` command in the loop on each screen macro as you can see here: + +{{< figure + default=true + src="../assets/7-5-home-screen.webp" + >}} + +When there is activity then the HTMLcallback macro is automatically triggered: + +{{< figure + default=true + src="../assets/7-6-html-callback.webp" + >}} + +The IP address is generated automatically by the server: in this case “192.168.1.141”. + +To open the door lock remotely the phone/browser accesses the web page: “192.168.1. 141/Enter.html”. The HTML callback macro is automatically activated. If “enter.html“ is fetched then the Newscreen variable is changed to Enterscreen and the program continues from there at the end of the HTMLcallback macro. The message “unlocked” is returned as the fetched HTML. + +If “gettemp.htm” is fetched then the temperature sensors is read, converted to a string and this string is served up as the fetched HTML. + +Lets now look at the Web Developer program that creates the Javascript file: + +The Web Developer program panel looks like this: + +{{< figure + default=true + src="../assets/7-3-web-panel.webp" + >}} + +It contains an Enter button, A text field, A HTTP Fetch command component - FetchForEnter - a read Temp button, a + +Dial indicator and a second HTTP Fetch component FetchForReadTemp. + +The Enter button calls the Macro Enter: + +{{< figure + default=true + src="../assets/7-7-fetch-for-enter.webp" + >}} + +The Enter macro calls the HTTP +Fetch component FetchForEnter. +This sends a page request to the +server for page “192.168.1.141/enter.htm” which is +set as a property of the FetchForEnter component. + +FetchForEnter component.has as a property the EnterConfirmation macro which is called after the Fetch is executed. Any returning HTML - in this case the confirmation text - is passed to the EnterConfirmation macro as a parameter. + +{{< figure + default=true + src="../assets/7-8-enterconfirmation.webp" + >}} + +The EnterConfirmation macro sets the text field to the HTML returned by the FetchForEnter call, then it waits 4seconds and sets the text field to “Locked”. + +Similarly the ReadTemp macro calls the macro GetTemp. This +simply calls the HTTP Fetch component FetchForReadTemp +which accesses the page “192.168.1.141/gettemp.htm” +which is set as a property of the FetchForReadTemp component. +The FetchForReadTemp component.has as a property the +SetGaugeValue macro which is called after the Fetch is executed. +Any returning HTML - in this case the temperature value - is passed to the SetGaugeValue macro as a parameter. + + +{{< figure + default=true + src="../assets/7-9-gettemp.webp" + >}} + +The SetGauge macro sets the value of the Gauge to the temperature. + +{{< figure + default=true + src="../assets/7-10-setgaugevalue.webp" + >}} + + +## Over to you + +The web program and the embedded program only examined the Temperature. + +Expand both programs so that the Humidity is also read from the SHT31 and displayed on the mobile phone on a separate dial. + +Alter the text in the message box on the mobile phone so that it displays a different message + +## Video and example files + +{{< youtube hX9Ko3KUDQc >}} + +### Mobile Phone App + +{{< youtube YRs97dLiSgU >}} + +A Flowcode example file accompanies this tutorial: +- [7 - Connecting to web - Embedded.fcfx](https://www.flowcode.co.uk/wiki/images/3/36/7_-_Connecting_to_web_FE.fcfx) +- [7 - Connecting to web - Web Developer.fcfx](https://www.flowcode.co.uk/wiki/images/9/93/7_-_Connecting_to_web_FWD.fcsx) + + +Further reading: [Flowcode Wiki](https://www.flowcode.co.uk/wiki/index.php?title=Examples_and_Tutorials +). + +## Next step + +[Assignment 8: Full Project](../08-full-project) diff --git a/content/workshops/flowcode/08-full-project/index.md b/content/workshops/flowcode/08-full-project/index.md new file mode 100644 index 00000000..dbec804e --- /dev/null +++ b/content/workshops/flowcode/08-full-project/index.md @@ -0,0 +1,72 @@ +--- +title: "Flowcode - M5 Stack Dial Workshop - 8. Full Project" +date: 2024-12-09 +series: ["FL001"] +series_order: 8 +showAuthor: false +--- + +If you have got this far then well done. You will have learned a +lot about embedded programming, about developing apps for +mobile devices and about electronics in general. You have +learned the basics of how to construct all the individual +elements of the system. Its up to you now to complete it. + +What we have done is completed the project for you so that +you can refer to it when you get stuck. There are two final files: +“[7 - Connecting to web FE.fcfx](https://www.flowcode.co.uk/wiki/images/3/36/7_-_Connecting_to_web_FE.fcfx)” and “[7 - Connecting to web FWD.fcfx](https://www.flowcode.co.uk/wiki/images/9/93/7_-_Connecting_to_web_FWD.fcsx)”. + +## Over to you + +You have all the bones of the system in place. To get to the +final design you need to do the following: +1. Design all the individual screen graphics. Refer to the Planning + section for details of the graphics, colours, fonts etc. We + suggest that you embed the graphic of the menus needed + onto your Embedded program panel so it looks like this: + +{{< figure + default=true + src="../assets/8-0-panel.webp" + >}} + +2. Get the navigation between screens working properly. +3. Get the logic for a successful combination to be entered + properly in place. +4. Get the communication between the Mobile phone and the + M5Stack Dial working properly. + +This is a great creative challenge. + +Good luck and have fun! + +## Video and example files + +{{< youtube gjOI7aVCoqA >}} + +A Flowcode example file accompanies this tutorial: +- [Full project - Embedded.fcfx](https://www.flowcode.co.uk/wiki/images/c/c2/Full_project_-_FE.fcfx) +- [Full Project - Web Developer.fcfx](https://www.flowcode.co.uk/wiki/images/b/b0/Full_project_-_FWD.fcsx) + + +Further reading: [Flowcode Wiki](https://www.flowcode.co.uk/wiki/index.php?title=Examples_and_Tutorials +). + +## Further reading + +We hope that you have enjoyed this course. + +Additional free courses that are available from the Flowcode team are: + +- [CAN bus communications](https://matrixtsl.com/wp-content/uploads/2024/09/CP2793-CAN-Bus-Communications-11.07.24.pdf) +- [Embedded internet communications](https://matrixtsl.com/wp-content/uploads/2024/09/CP4895-Embedded-Internet-Communications-14.08.24.pdf) +- [Bluetooth communications](https://matrixtsl.com/wp-content/uploads/2024/09/CP1795-Bluetoooth-Communications-04.07.24.pdf) +- [GSM communications](https://matrixtsl.com/wp-content/uploads/2024/08/CP2832-GSM-Communications.pdf) + +For further information on Flowcode see: + +[www.flowcode.co.uk](https://www.flowcode.co.uk) + +For further information on Educational hardware products from the Matrix team see: + +https://www.matrixtsl.com/eblocks/ diff --git a/content/workshops/flowcode/_index.md b/content/workshops/flowcode/_index.md new file mode 100644 index 00000000..36714827 --- /dev/null +++ b/content/workshops/flowcode/_index.md @@ -0,0 +1,81 @@ +--- +title: "Flowcode - M5 Stack Dial Workshop" +date: 2024-12-09 +tags: ["Workshop", "Flowcode", "ESP32-S6", "GUI", "Process"] +authors: + - john-dobson +--- + +## Effort + +{{< alert icon="mug-hot">}} +**This set of workshops will take around 20 hours to complete.** +{{< /alert >}} + +## Requirements + +You will need: +- M5Stack Dial with power lead +- Relay board - can be 12 or 24V +- Grove style 4 pin push leads +- Solenoid + + +If you are implementing the door lock for real you will also need: +- Maglock +- 12 or 24V power supply +- 5V regulator board (for powering the M5Stack Dial) + +You will also need a copy of Flowcode with the ESP32 chip +pack. Flowcode is free of charge for makers, professionals will +need to buy a Pro license. + +The ESP chip pack costs £60 or around $80 and is available +from the Flowcode web site: www.flowcode.co.uk. + +## Learning outcomes + +This workshop is designed for engineers who have some +experience of programming embedded systems and want to +learn more about graphical display based systems and web +based control and data gathering systems. +For Matrix customers it assumes that you have completed the +Introduction to Microcontrollers course. +If you complete the exercises in this workbook then it will take +you around 20 hours. This is designed for self study. + +If you complete this workshop then will learn: +- ESP32 programming +- Simple Input / Output pin control +- How encoders work +- How I2C sensors work +- SHT32 temperature humidity sensor operation +- How solenoid/maglocks work +- Graphical display programming +- Menu system design for graphical displays +- Embedded web based communication techniques +- Mobile phone app development +- Mobile phone / Embedded system design + +Whilst this project uses the M5Stack Dial the silks learned will +be useful for any graphical display based project. + +## Video + +{{< youtube Wd_M4lUPpI4 >}} + +## Agenda + +- [Assignment 1: Planning](01-planning) +- [Assignment 2: Using the Display](02-using-the-display) +- [Assignment 3: Switch and I/O Pins](03-switch-io-pins) +- [Assignment 4: The Bezel Encoder](04-the-bezel-encoder) +- [Assignment 5: I2C Expansion](05-i2c-expansion) +- [Assignment 6: Menu System](06-menu-system) +- [Assignment 7: Connecting to the web](07-connecting-to-the-web) +- [Assignment 8: Full Project](08-full-project) + + +## Next step + +[Assignment 1: Planning](01-planning) diff --git a/content/workshops/flowcode/assets/2-0-candy.webp b/content/workshops/flowcode/assets/2-0-candy.webp new file mode 100644 index 00000000..efad45f1 Binary files /dev/null and b/content/workshops/flowcode/assets/2-0-candy.webp differ diff --git a/content/workshops/flowcode/assets/2-1-panel-set-up.webp b/content/workshops/flowcode/assets/2-1-panel-set-up.webp new file mode 100644 index 00000000..d750f5b7 Binary files /dev/null and b/content/workshops/flowcode/assets/2-1-panel-set-up.webp differ diff --git a/content/workshops/flowcode/assets/2-10-constants.webp b/content/workshops/flowcode/assets/2-10-constants.webp new file mode 100644 index 00000000..b73ef366 Binary files /dev/null and b/content/workshops/flowcode/assets/2-10-constants.webp differ diff --git a/content/workshops/flowcode/assets/2-11-pseudocode.webp b/content/workshops/flowcode/assets/2-11-pseudocode.webp new file mode 100644 index 00000000..b349f365 Binary files /dev/null and b/content/workshops/flowcode/assets/2-11-pseudocode.webp differ diff --git a/content/workshops/flowcode/assets/2-12-c-code.webp b/content/workshops/flowcode/assets/2-12-c-code.webp new file mode 100644 index 00000000..65c5fb58 Binary files /dev/null and b/content/workshops/flowcode/assets/2-12-c-code.webp differ diff --git a/content/workshops/flowcode/assets/2-2-backlight-properties.webp b/content/workshops/flowcode/assets/2-2-backlight-properties.webp new file mode 100644 index 00000000..06b80317 Binary files /dev/null and b/content/workshops/flowcode/assets/2-2-backlight-properties.webp differ diff --git a/content/workshops/flowcode/assets/2-3-display-properties-1.webp b/content/workshops/flowcode/assets/2-3-display-properties-1.webp new file mode 100644 index 00000000..3aab2e87 Binary files /dev/null and b/content/workshops/flowcode/assets/2-3-display-properties-1.webp differ diff --git a/content/workshops/flowcode/assets/2-4-display-properties-2.webp b/content/workshops/flowcode/assets/2-4-display-properties-2.webp new file mode 100644 index 00000000..d92a8fb7 Binary files /dev/null and b/content/workshops/flowcode/assets/2-4-display-properties-2.webp differ diff --git a/content/workshops/flowcode/assets/2-5-display-properties-3.webp b/content/workshops/flowcode/assets/2-5-display-properties-3.webp new file mode 100644 index 00000000..109fd16d Binary files /dev/null and b/content/workshops/flowcode/assets/2-5-display-properties-3.webp differ diff --git a/content/workshops/flowcode/assets/2-6-display-properties-4.webp b/content/workshops/flowcode/assets/2-6-display-properties-4.webp new file mode 100644 index 00000000..26554f85 Binary files /dev/null and b/content/workshops/flowcode/assets/2-6-display-properties-4.webp differ diff --git a/content/workshops/flowcode/assets/2-7-bitmap-drawer-properties.webp b/content/workshops/flowcode/assets/2-7-bitmap-drawer-properties.webp new file mode 100644 index 00000000..fe735426 Binary files /dev/null and b/content/workshops/flowcode/assets/2-7-bitmap-drawer-properties.webp differ diff --git a/content/workshops/flowcode/assets/2-8-first-flowchart.webp b/content/workshops/flowcode/assets/2-8-first-flowchart.webp new file mode 100644 index 00000000..42abdc4f Binary files /dev/null and b/content/workshops/flowcode/assets/2-8-first-flowchart.webp differ diff --git a/content/workshops/flowcode/assets/2-9-first-sim.webp b/content/workshops/flowcode/assets/2-9-first-sim.webp new file mode 100644 index 00000000..be02555c Binary files /dev/null and b/content/workshops/flowcode/assets/2-9-first-sim.webp differ diff --git a/content/workshops/flowcode/assets/3-1-io.webp b/content/workshops/flowcode/assets/3-1-io.webp new file mode 100644 index 00000000..7e89bed3 Binary files /dev/null and b/content/workshops/flowcode/assets/3-1-io.webp differ diff --git a/content/workshops/flowcode/assets/3-1-m5stack-dial.webp b/content/workshops/flowcode/assets/3-1-m5stack-dial.webp new file mode 100644 index 00000000..3ba5cf34 Binary files /dev/null and b/content/workshops/flowcode/assets/3-1-m5stack-dial.webp differ diff --git a/content/workshops/flowcode/assets/4-0-candy.webp b/content/workshops/flowcode/assets/4-0-candy.webp new file mode 100644 index 00000000..aaa8b7f0 Binary files /dev/null and b/content/workshops/flowcode/assets/4-0-candy.webp differ diff --git a/content/workshops/flowcode/assets/4-1-encoder-properties.webp b/content/workshops/flowcode/assets/4-1-encoder-properties.webp new file mode 100644 index 00000000..074284bb Binary files /dev/null and b/content/workshops/flowcode/assets/4-1-encoder-properties.webp differ diff --git a/content/workshops/flowcode/assets/4-2-encoder-panel.webp b/content/workshops/flowcode/assets/4-2-encoder-panel.webp new file mode 100644 index 00000000..5489601e Binary files /dev/null and b/content/workshops/flowcode/assets/4-2-encoder-panel.webp differ diff --git a/content/workshops/flowcode/assets/4-3-bezel-program-a.webp b/content/workshops/flowcode/assets/4-3-bezel-program-a.webp new file mode 100644 index 00000000..55181c74 Binary files /dev/null and b/content/workshops/flowcode/assets/4-3-bezel-program-a.webp differ diff --git a/content/workshops/flowcode/assets/4-5-bezel-program-c.webp b/content/workshops/flowcode/assets/4-5-bezel-program-c.webp new file mode 100644 index 00000000..acf476e6 Binary files /dev/null and b/content/workshops/flowcode/assets/4-5-bezel-program-c.webp differ diff --git a/content/workshops/flowcode/assets/5-1-sht31-properties.webp b/content/workshops/flowcode/assets/5-1-sht31-properties.webp new file mode 100644 index 00000000..29b4926a Binary files /dev/null and b/content/workshops/flowcode/assets/5-1-sht31-properties.webp differ diff --git a/content/workshops/flowcode/assets/5-2-panel.webp b/content/workshops/flowcode/assets/5-2-panel.webp new file mode 100644 index 00000000..a9b4734b Binary files /dev/null and b/content/workshops/flowcode/assets/5-2-panel.webp differ diff --git a/content/workshops/flowcode/assets/5-3-variables.webp b/content/workshops/flowcode/assets/5-3-variables.webp new file mode 100644 index 00000000..7b5383e2 Binary files /dev/null and b/content/workshops/flowcode/assets/5-3-variables.webp differ diff --git a/content/workshops/flowcode/assets/5-4-temp-hum-program.webp b/content/workshops/flowcode/assets/5-4-temp-hum-program.webp new file mode 100644 index 00000000..feca7b48 Binary files /dev/null and b/content/workshops/flowcode/assets/5-4-temp-hum-program.webp differ diff --git a/content/workshops/flowcode/assets/6-1-allscreens.webp b/content/workshops/flowcode/assets/6-1-allscreens.webp new file mode 100644 index 00000000..45cc4980 Binary files /dev/null and b/content/workshops/flowcode/assets/6-1-allscreens.webp differ diff --git a/content/workshops/flowcode/assets/6-2-main.webp b/content/workshops/flowcode/assets/6-2-main.webp new file mode 100644 index 00000000..687e8667 Binary files /dev/null and b/content/workshops/flowcode/assets/6-2-main.webp differ diff --git a/content/workshops/flowcode/assets/6-3-home-screen.webp b/content/workshops/flowcode/assets/6-3-home-screen.webp new file mode 100644 index 00000000..3abeb207 Binary files /dev/null and b/content/workshops/flowcode/assets/6-3-home-screen.webp differ diff --git a/content/workshops/flowcode/assets/6-4-code-screen.webp b/content/workshops/flowcode/assets/6-4-code-screen.webp new file mode 100644 index 00000000..908d9f9d Binary files /dev/null and b/content/workshops/flowcode/assets/6-4-code-screen.webp differ diff --git a/content/workshops/flowcode/assets/6-5-enter-screen.webp b/content/workshops/flowcode/assets/6-5-enter-screen.webp new file mode 100644 index 00000000..728b3fb8 Binary files /dev/null and b/content/workshops/flowcode/assets/6-5-enter-screen.webp differ diff --git a/content/workshops/flowcode/assets/6-6-denial-screen.webp b/content/workshops/flowcode/assets/6-6-denial-screen.webp new file mode 100644 index 00000000..992ec595 Binary files /dev/null and b/content/workshops/flowcode/assets/6-6-denial-screen.webp differ diff --git a/content/workshops/flowcode/assets/7-1-embedded-initialise.webp b/content/workshops/flowcode/assets/7-1-embedded-initialise.webp new file mode 100644 index 00000000..c09e524e Binary files /dev/null and b/content/workshops/flowcode/assets/7-1-embedded-initialise.webp differ diff --git a/content/workshops/flowcode/assets/7-10-setgaugevalue.webp b/content/workshops/flowcode/assets/7-10-setgaugevalue.webp new file mode 100644 index 00000000..f449440a Binary files /dev/null and b/content/workshops/flowcode/assets/7-10-setgaugevalue.webp differ diff --git a/content/workshops/flowcode/assets/7-2-htmlcallback.webp b/content/workshops/flowcode/assets/7-2-htmlcallback.webp new file mode 100644 index 00000000..c1bc6900 Binary files /dev/null and b/content/workshops/flowcode/assets/7-2-htmlcallback.webp differ diff --git a/content/workshops/flowcode/assets/7-3-web-panel.webp b/content/workshops/flowcode/assets/7-3-web-panel.webp new file mode 100644 index 00000000..4cb36ee1 Binary files /dev/null and b/content/workshops/flowcode/assets/7-3-web-panel.webp differ diff --git a/content/workshops/flowcode/assets/7-4-embedded-panel.webp b/content/workshops/flowcode/assets/7-4-embedded-panel.webp new file mode 100644 index 00000000..220151bf Binary files /dev/null and b/content/workshops/flowcode/assets/7-4-embedded-panel.webp differ diff --git a/content/workshops/flowcode/assets/7-5-home-screen.webp b/content/workshops/flowcode/assets/7-5-home-screen.webp new file mode 100644 index 00000000..9b3360d8 Binary files /dev/null and b/content/workshops/flowcode/assets/7-5-home-screen.webp differ diff --git a/content/workshops/flowcode/assets/7-6-html-callback.webp b/content/workshops/flowcode/assets/7-6-html-callback.webp new file mode 100644 index 00000000..bb211abc Binary files /dev/null and b/content/workshops/flowcode/assets/7-6-html-callback.webp differ diff --git a/content/workshops/flowcode/assets/7-7-fetch-for-enter.webp b/content/workshops/flowcode/assets/7-7-fetch-for-enter.webp new file mode 100644 index 00000000..8b96b62d Binary files /dev/null and b/content/workshops/flowcode/assets/7-7-fetch-for-enter.webp differ diff --git a/content/workshops/flowcode/assets/7-8-enterconfirmation.webp b/content/workshops/flowcode/assets/7-8-enterconfirmation.webp new file mode 100644 index 00000000..160ba921 Binary files /dev/null and b/content/workshops/flowcode/assets/7-8-enterconfirmation.webp differ diff --git a/content/workshops/flowcode/assets/7-9-gettemp.webp b/content/workshops/flowcode/assets/7-9-gettemp.webp new file mode 100644 index 00000000..e38d60fb Binary files /dev/null and b/content/workshops/flowcode/assets/7-9-gettemp.webp differ diff --git a/content/workshops/flowcode/assets/8-0-panel.webp b/content/workshops/flowcode/assets/8-0-panel.webp new file mode 100644 index 00000000..803188c9 Binary files /dev/null and b/content/workshops/flowcode/assets/8-0-panel.webp differ diff --git a/content/workshops/flowcode/assets/combo.webp b/content/workshops/flowcode/assets/combo.webp new file mode 100644 index 00000000..91618044 Binary files /dev/null and b/content/workshops/flowcode/assets/combo.webp differ diff --git a/content/workshops/flowcode/assets/flowcode-logo-full.webp b/content/workshops/flowcode/assets/flowcode-logo-full.webp new file mode 100644 index 00000000..8e0b2515 Binary files /dev/null and b/content/workshops/flowcode/assets/flowcode-logo-full.webp differ diff --git a/content/workshops/flowcode/assets/flowcode-logo.webp b/content/workshops/flowcode/assets/flowcode-logo.webp new file mode 100644 index 00000000..e1a9d0dd Binary files /dev/null and b/content/workshops/flowcode/assets/flowcode-logo.webp differ diff --git a/content/workshops/flowcode/assets/hardware.webp b/content/workshops/flowcode/assets/hardware.webp new file mode 100644 index 00000000..de6b6795 Binary files /dev/null and b/content/workshops/flowcode/assets/hardware.webp differ diff --git a/content/workshops/flowcode/assets/home-screen-no-image.webp b/content/workshops/flowcode/assets/home-screen-no-image.webp new file mode 100644 index 00000000..4fcd7ca3 Binary files /dev/null and b/content/workshops/flowcode/assets/home-screen-no-image.webp differ diff --git a/content/workshops/flowcode/assets/home.webp b/content/workshops/flowcode/assets/home.webp new file mode 100644 index 00000000..c4145426 Binary files /dev/null and b/content/workshops/flowcode/assets/home.webp differ diff --git a/content/workshops/flowcode/assets/m5stack-logo.webp b/content/workshops/flowcode/assets/m5stack-logo.webp new file mode 100644 index 00000000..0b5334df Binary files /dev/null and b/content/workshops/flowcode/assets/m5stack-logo.webp differ diff --git a/content/workshops/flowcode/assets/m5stack-test-screen-01.webp b/content/workshops/flowcode/assets/m5stack-test-screen-01.webp new file mode 100644 index 00000000..24b65978 Binary files /dev/null and b/content/workshops/flowcode/assets/m5stack-test-screen-01.webp differ diff --git a/content/workshops/flowcode/assets/menus.webp b/content/workshops/flowcode/assets/menus.webp new file mode 100644 index 00000000..6d73cd55 Binary files /dev/null and b/content/workshops/flowcode/assets/menus.webp differ diff --git a/content/workshops/flowcode/assets/noentry.webp b/content/workshops/flowcode/assets/noentry.webp new file mode 100644 index 00000000..c0fb609e Binary files /dev/null and b/content/workshops/flowcode/assets/noentry.webp differ diff --git a/content/workshops/flowcode/assets/sht31.webp b/content/workshops/flowcode/assets/sht31.webp new file mode 100644 index 00000000..10b8c015 Binary files /dev/null and b/content/workshops/flowcode/assets/sht31.webp differ diff --git a/content/workshops/flowcode/assets/unlocked.webp b/content/workshops/flowcode/assets/unlocked.webp new file mode 100644 index 00000000..9900221c Binary files /dev/null and b/content/workshops/flowcode/assets/unlocked.webp differ diff --git a/content/workshops/flowcode/featured.webp b/content/workshops/flowcode/featured.webp new file mode 100644 index 00000000..98392b90 Binary files /dev/null and b/content/workshops/flowcode/featured.webp differ diff --git a/data/authors/john-dobson.json b/data/authors/john-dobson.json new file mode 100644 index 00000000..415b6565 --- /dev/null +++ b/data/authors/john-dobson.json @@ -0,0 +1,10 @@ +{ + "name": "John Dobson", + "bio": "Flowcode project manager at Matrix Technology Solutions Ltd.", + "social": [ + { + "link": "https://www.flowcode.co.uk" + } + ], + "image" : "img/authors/john-dobson.webp" +} \ No newline at end of file