preamble
Recently there are a lot of small partners private message message, want me to launch a chapter can be through the APP remote control and access to sensor information experiment tutorial. To be honest, in the embedded bios, this is considered to be a medium to high level. It just so happens that I’m also interested in writing about it. The whole article more than 4700 words, I wrote a very detailed, step by step according to the article can be operated. (Suggested to buy the module with classmates pooling funds, one more person to learn together to exchange, can learn faster)
Preparation of key materials
STM32F103C8T6 Itako (External Crystal Vibration 8M)
ESP8266 module (the two pictures below show the front and back of the ESP8266 module)
All modules of Chapter 9, several Dupont lines.
1.APP Production
1.1 First of all, use some online IoT self-development platform to create APP, here I choose wit cloud. Browser searchJiji cloud, and then go to the official website, as shown below.
1.2 Enter the official website and click on the upper right corner of theDeveloper Center 。
1.3 Most students haven’t signed up for a Kijiji account yet, so go ahead and sign up for one.
1.4 After registering, log in to your account to enter the following interface, click on the left side of the “smart products” column “”.+ Creation” and start making the app.
1.5 Click “+ Creation“After that, it comes to the interface in the picture below for APP type selection (follow the picture below). We clickilluminationClick again on thebulb and then clickCustomized Solutions Finally, click on theThe lamp. (These operations are just choosing a template for the app first, when the time comes the function can be not related to the light control function)
1.6 After completing step 1.5, we are equivalent to select the APP template type, the next will pop up the following interface, we just follow the following figure in thered frame (math.)Just set it up the same way (Pseudolaric acid(you can take your own), after operating by the picture, click on the bottom of the interfaceestablish。
1.7 After completing step 1.6, it automatically comes to the interface shown below. Here we start to add content to the app by clicking on the below image of theGo to the editor.。
Then refer to the red box part of the picture below to fill in (here we first realize the content of adding a window switch to the app);
existidentifier This item, we try to make the name “clear”, that is, at a glance to know what it means. Because the microcontroller program code automatically generated by Kijiyun in the back of the window switch variable name is based on this!identifier Generated.
Display NameFor example, if we fill in “Window Switch”, there will be a place labeled “Window Switch” on the generated app, and then we continue to fill in the followingRead/Write Typeanddata typeIn order to make the app display a button next to the text “Window Switch”, so that we can see at a glance that this button is used to control the window switch;
Read/Write Type: Just look at the way the feature is implemented:
Those that generally require manual operation on the app fall into the category ofwritableFor example, if you want to add a button or a slider (the slider is similar to the red box in the picture below), then select thewritableSo we are realizing that the window is on and off, obviously filling in thewritable。
If it only serves to display a value it belongs to theread-only (computing), e.g. displaying temperature values and humidity values.
data typeThe status of the window is “open” and “closed”, so the data type is Boolean (i.e. 0 and 1).
Fill in the logo name, display name, read/write type, data type and then click on the bottom of the interfacerecognize。
1.8 After completing the above steps, it automatically comes to the interface in the picture below. At this time, our APP which only controls the window switch is ready, how do we see the effect? We first click on the left side of the picture belowvirtualization device 。
1.9 After completing the above steps, you will come to the following interface. Then use your cell phone to download a JiZhiYun App (download link:
https://devdocs.gizwits.com/download.html#166419072635445), after the download is completed, use the app to scan the QR code in the picture below to see the app we made ourselves.
Below is a view of the cell phone, as we see it, after scanning the code on the phoneIOT Smart HomeIt is the APP name we took in step 1.6, we click the red box to enter the APP interface! (The right picture shows)
Here we can turn on the window switch on the app as shown below.
Then we will notice that the interface on the web page follows the movement, as shown in the figure below.
It is too monotonous for an APP to have only the function of controlling the opening and closing of windows, we click on the left side of the figure below Product Information Go back to the place of step 1.7 and continue to add the contents of the APP.
1.10 Then click on the left side of thenewly builtFill in the logo name, display name, read/write type, and data type to complete the addition of the new content of the APP, referring to the operation in step 1.7.
The 4 pictures below show the features I’ve added.
Then follow the steps 1.8 and go to 1.9 to scan the QR code of the device to see the view of the app.
This time your own app is ready! Follow the steps step by step and you’ll be done in five minutes! It’s okay to have hands!
2. Burning firmware to the ESP8266 module
Next, we also need to burn firmware for the ESP8266 module. (The following steps are for the Loxin ESP8266 module for serial mode burn-in process, the ESP8266 purchase link is provided in the information)
2.1 First of all, download the ESP8266 firmware from the official website of Kijiji Cloud to your local computer.
ESP8266 GAgent firmware download address: https://devdocs.gizwits.com/download.html#166419072645267?1672219764470
2.2 Confirm downloaded firmware
Download to the local, unzip, get the following files, this paper uses the ESP8266 module burn is the bin file in the figure below.
2.3 ESP8266 wiring.
Connect the ESP8266 to the USB to TTL module according to the connection in the following figure. (The general USB to TTL module has only 4 pins, but when the ESP8266 is burned in, there are 7 pins that need to be wired, so the ESP8266 can’t be connected to the pins on the USB to TTL module, so we connect them to our STM32.) After connecting the wires, connect the USB to TTL module to the USB port of your computer, and keep the STM32 powered. (Or go to Taobao to buy an ESP8266 firmware downloader, so you don’t have to wire it yourself, the link to the downloader I also put in the information)
2.4 Device burn-in.
After completing the above steps, we open the burn-in tool provided in the profile as an administrator.
Click OK
2.5 Burn Settings.
1, check the box, choose to burn this firmware
2, select the ESP8266 firmware we just confirmed in step 3.2.
3, address set to 0
4, SPI SPEED select 40MHz
5, SPI MODE select DOUT
6, check DoNotChgBin off the list
7, select the USB to TTL module corresponding to the serial port
8, baud rate selection 115200
2.6 Burning Operations
Step 1: Select the correct serial port, when the serial port is successfully connected, click the “START” button in the figure below.
occurs
Step 2, the ESP8266 on the RST pin line unplugged, that is, the ESP8266 reset, will appear in the following figure.
Step 3: Wait for a period of time, the word “FINISH” appears to indicate successful burning.
3. Code migration
Now that the APP is made and the ESP8266 firmware is burned, the next step is to enter the session of writing the STM32 program. (Internal complex code principles, interested to go to the official website of the wit cloud to learn, here is just to teach you how to use, to the fastest speed to make their own desired Bijie)
3.1 Kijiyun can automatically generate the code project for APP and STM32 communication according to the APP we just made, which is officially explained by Kijiyun (below). If you can’t read it, just ignore it, anyway, we will automatically generate the code about APP and STM32 communication related code into our own project to realize mutual communication with APP.
Perform the actions in the two diagrams below for code autogeneration.
in the first place
after that
3.2 After completing the above operation, wait for a while, the code will be automatically generated, we will download it and unzip it to get the following files. We only need to useGizwitsfolders andUtilsThe contents of the folder.
Putting the Kijiji Cloud auto-generated code project in theGizwitsfolders andUtilsThe two folders are copied to the profile (Just leave your email in the comment section!The foundation works are provided in the “Foundation Works” section of the website. The contents of the foundation work are the contents of theChapter 9The code project is based on the addition of an extraTwo serial port functions(one serial port for printing information and one serial port for communicating with the ESP8266) andA timer function that implements 1ms timing。
To clarify here, what is required for foundation work? The answer is: it has to beTwo serial port functionsandImplementation of a timer function with 1ms timing. This can be seen in the picture below, which is presented on the Kijiji Cloud official website. So, if you don’t want to do the porting operation with the base project provided in the information, but want to do the porting operation with your own project, you can continue to do the operation as below as long as your project still has two empty serial ports available, as well as a timer.
3.3 Then open the base project in the profile.
In the code, the two serial ports and the timer initialization function for timing 1s are within the mian( ) function, see below.
3.4 Include the C and H files in the Gizwits folder and the Utils folder that you just ported to the base project.
3.5 Next, open gizwits_product.c and replace the HAL-related code with the standard library code.
Next gizwits_product.h, make the following changes.
3.6 Above a series of comments to add the operation, just the Gizwits folder and Utils file within the code content of the HAL library function related code all with the standard library code replacement, the next step is to Gizwits folder and Utils folder code to participate in the basic engineering code execution.
3.6.1 Add gizPutData( ) inside the receive interrupt of USART2, why USART2? Because USART2 is responsible for communicating with ESP8266 in the basic project provided in the information. (Hint: Before operating this step, add the gizwits_product.h header file to usart.c, otherwise the compiler cannot find the gizPutData( ) function).
3.6.2 Add gizTimerMS( ) inside the timer 3 interrupt function. Why timer 3, because the information provided in the basic project with timer 3 to achieve 1ms timing function. (Hint: add the gizwits_product.h header file to the main function before doing this step, otherwise the compiler will not find the gizTimerMS( ) function)
3.6.3 Then assign each variable within the userHandle( ) function within gizwits_product.c. These variables are the contents of those read-only data that we set earlier when we made the APP, which are temperature, humidity, carbon dioxide concentration and formaldehyde concentration. So which variable is the temperature, which is the humidity, this is based on our previous production APP, take the name of the logo, specifically look at the following figure.
CO2 is the identification name of the carbon dioxide concentration data point, so the carbon dioxide concentration value is assigned to the variable valueCO2, and TVCO is the formaldehyde concentration identification name. The following figure shows the program after the assignment.
The variables TEMP, HUMP, CO2 and TVCO in the red box are already in the mian( ) function to get the temperature, humidity, carbon dioxide and formaldehyde concentration values, see the figure below.
（The purpose of the userHandle( ) function, which we will put into the while(1) loop of the main( ) function, is to constantly refresh the values of the variables valueTEMP, valueHUMP and valueTVOC, so that the temperature, humidity, carbon dioxide and formaldehyde concentration data on the app can be updated. The purpose is to keep refreshing the values of the variables valueTEMP, valueHUMP, valueCO2 and valueTVOC, so that the temperature, humidity, carbon dioxide and formaldehyde data on the app will be updated in real time).
3.6.4 Then add userInit( ) function, gizwitsInit( ) function and gizwitsSetMode( ) function to the main( ) function, these three functions run once, so don’t put them in the while(1) loop. (Hint: before operating this step to the main function to add gizwits_product.h header file, otherwise the compiler can not find these three functions, has been added to ignore the tip).
Description:
Inside the userInit( ) function is to set the initial value of those data contents on the app when the app is just opened.You don’t have to set it up here.If you want to set it, you can directly open the comment in the red box in the following figure and then assign the value to the corresponding variable (the size of the assigned value must be within the range of the value set in the production of the APP. (For example, when we create the APP, the range of temperature data point is -10~100, then the value of currentDataPoint.valueTEMP in the following figure must be within the range of -10~100).
The gizwitsInit( ) function, which opens a ring buffer, is what we call directly.
Regarding the gizwitsSetMode( ) function, the official website of Gizwits Cloud has also made a description (below). Here we directly choose AirLink mode can be, that is, gizwitsSetMode( ) function parameter fill 2.
3.6.5 Add the userHandle( ) function and the gizwitsHandle( ) function to the while(1) loop of the main( ) function.
Description:
userHandle( ) In step 2.6.3, we assign the value of the data point variable inside this function, and we also said that we will put this function into the while(1) loop of the main( ) function, and let it be executed continuously, in order to refresh the value stored in the data point variable (the value stored in the data point variable will be uploaded to the APP in real time by the gizwitsHandle( ) function), so that the temperature, humidity, carbon dioxide concentration, formaldehyde concentration data on the APP will be updated continuously. ), so that the temperature and humidity, carbon dioxide concentration, formaldehyde concentration data on the APP are constantly updated.
gizwitsHandle((dataPoint_t *)¤tDataPoint) function, the official website of Gizwits Cloud has an explanation of its function (below). It can be understood that this is a background program (networking, uploading data, receiving and sending data, etc. are closely related to it).It must be placed in a while(1) loop running at all times!
3.6.6 After step 3.6.5 is completed, the code has completed the function of real-time update of sensor data on APP, which is actually that we keep sending sensor data to APP. The next step is to improve the processing operation of the device side when APP sends commands down, that is, when APP sends the command to open and close the window, our device side makes the corresponding execution action.
Find gizwits_product.c within the gizwitsEventProcess function, the function is the APP issued by the command event processing. In the function within the switch judgment function, we can see EVENT_WINDOW_ONOFF, here we know at a glance is to deal with the window switch place, why is it, because we are in step 1.7 when the window switch key to take the identification name is called WINDOW_ONOFF, I was also asked to take the identification of the name of the partners when taking the I also told my friends to make the name of the button “clear”, so that they can see what it means at a glance. Arrows1The pointing place indicates that when the window switch button is opened, the arrow2The pointing place indicates that when the window switch is closed, know that the arrow1and2After the meaning of the arrow3and4place to write the corresponding operation now!
The following screenshot shows the corresponding operation after writing.
Since then the work of code porting is complete, compile 0 warnings and 0 errors can go directly to step 4.
4 Demonstration of results.
4.1 After completing the previous step, the code porting work has been completed. Connect all the modules with DuPont wire according to the following figure, and then use Jlink or STlink to burn the code into STM32 with the code porting completed above. (If your basic project is using the code provided by the information, according to the following figure, if you are not using the basic project provided by the information, according to their own circumstances, the ESP8266, TTL to USB module connected to the STM32)
4.2 TLL to USB module plugged into the computer, and open the serial port assistant, you can see the serial port in the print information, here we first do not care about the print content.
4.3 Next, open the Kijiji app and tap the ＋ in the upper left corner, then one-click to match the network.
4.4
4.5
4.6
4.7 The STM32 should be kept powered while the APP searches for the attached device. So as not to affect the pairing.
4.8 At this point, we look at the serial port printing assistant to print the content, in the pairing process if there is a red box in the figure below to print the information, it means that the APP has been paired with your device (STM32 + ESP8266). (The value after RSSI does not have to be 3, but it must be greater than 0.)
4.9 After the pairing, the app returns to the home page, we can see a device “light up”, and then click on the device.
4.10 After clicking on the device, we see the content of the lower left picture, which is a little bit different from the OLED display, mainly because the APP update data speed is just slower than the OLED display. (After pairing up, you don’t need to pair up again next time)
4.11 Demonstration of opening and closing windows