doc: add missing content

content/workshops/flowcode/01-planning/index.md

@@ -14,14 +14,10 @@ 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.
 
-{{< figure
-    default=true
-    src="../assets/m5stack-test-screen-01.webp"
-    >}}
-
 In part 1 we show you how we plan the project.
 
-Specification:
+### 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
@@ -36,10 +32,166 @@ based on the M5stack dial with the following features:
     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: Mobile Phone App](07-mobile-phone-app)
+- [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:
+
+{{< 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 (GPIO)
+- 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)

content/workshops/flowcode/02-using-the-display/index.md

@@ -38,15 +38,15 @@ get the correct settings.
     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"
     >}}
 
-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.
 
 Notice that we have not got the exact fonts that we wanted -
 Flowcode does not include all fonts - although more can be
@@ -67,6 +67,10 @@ made - but the fonts that we have should be fine.
     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
@@ -90,15 +94,45 @@ made - but the fonts that we have should be fine.
     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
 
 {{< youtube A0fKmmufJRk >}}
 
+
 ## Resources
 
 A Flowcode example file accompanies this tutorial. This is

content/workshops/flowcode/03-switch-io-pins/index.md

@@ -20,12 +20,14 @@ 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
 
-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

content/workshops/flowcode/04-the-bezel-encoder/index.md

@@ -26,16 +26,22 @@ 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.
 
-Your panel should look like this:
-
+{{< figure
+    default=true
+    src="../assets/4-1-encoder-properties.webp"
+    >}}
 
-Alter your program so that it looks like the flow chart here.
+Your panel should look like this:
 
 {{< figure
     default=true
-    src="../assets/4-1-encoder-properties.webp"
+    src="../assets/4-2-encoder-panel.webp"
     >}}
 
+
+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.
 
@@ -45,10 +51,6 @@ 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.
 
-{{< figure
-    default=true
-    src="../assets/4-2-encoder-panel.webp"
-    >}}
 
 
 {{< figure
@@ -66,6 +68,25 @@ macro ‘Resetcounter’ for this.
     src="../assets/4-4-bezel-program-c.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.
+
+{{< figure
+    default=true
+    src="../assets/4-5-bezel-program-c.webp"
+    >}}
+
+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.
+
+## 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
 
 {{< youtube dVPpjeCYYsE >}}