one. Page idea
1.Title bar
Big title: Smart Classroom Management System
Subtitles: lights, alarms, fans, temperature, humidity, light
2.Style design
background settings. Font settings (font size, format, color)
3.Navigation bar
6 navigation bar tabs: 3 sensors, 3 controls
Each time you click the navigation bar label: the page will be displayed accordingly.
4. Front-end and back-end interaction design
1. Refresh sensor settings regularly (when the user clicks on the sensor label, the data needs to be displayed to the user)
2. Control delivery (when the user clicks the control label, the actual hardware needs to be controlled according to the commands issued by the user, and dynamically displayed in the subject bar)
two. Basic skills of front-end development
1.html
Main content: html (outermost), head (page header), body (page body) tags
2.CSS–》Static page style
Set styles for resources in different areas (style design of body, header, h1 area)
3.javaScript(js)
animation design,
Commonly used web pages: jQuery, there are many ready-made page resources that can be used.
jQuery API Chinese documentation | jQuery API Chinese online manual | jquery api download | jquery api chm
Development method:
1.BootStrap (framework-based development)
Bootstrap Chinese website
2.Vue (progressive js framework)
Vue.js – Progressive JavaScript framework | Vue.js
3.react (ready-made framework)
React official Chinese documentation
Technologies used in this project: js, css (just understand them)
three. Web page layout
1. Title bar layout
(1) Page display
specific code
The styles of header and h1 are defined in the CSS above.
(2) small is a small font
<div class="header"> <div class="content"> <h1>Smart classroom management system <small>Temperature, humidity, fan, alarm, light </small> </h1> </div> </div>
2.Navigation bar layout
(1) Page display
(2) Specific code
<div class="body-left"> <img src="images/left-title.png" style="margin:26px 0;"> <div> <ul class="left-nav"> <li class="line active"> <a href="#title1" data-toggle="tab"> <img src="images/tubiao01.png" width="40px">Temperature sensor </a> </li> <li class="line"> <a href="#title2" data-toggle="tab"> <img src="images/tubiao02.png" width="40px">Humidity sensor </a> </li> <li class="line"> <a href="#title3" data-toggle="tab"> <img src="images/tubiao03.png" width="40px">Light sensor </a> </li> <li class="line"> <a href="#title4" data-toggle="tab"> <img src="images/tubiao04.png" width="40px">LED </a> </li> <li class="line"> <a href="#title5" data-toggle="tab"> <img src="images/tubiao05.png" width="38px">Fan </a> </li> <li class="line"> <a href="#title6" data-toggle="tab"> <img src="images/tubiao06.png" width="40px">Alarm </a> </li> </ul> <div class="content"> <div class="box fade in active" id="title1"> <p>Temperature value<br /><span> <lable id="temperature"></lable> </span></p> </div> <div class="box fade" id="title2"> <p>Humidity value<br /><span> <lable id="humidity"></lable> </span></p> </div> <div class="box fade" id="title3"> <p>Light value<br /><span> <lable id="light"></lable> </span></p> </div> <div class="box fade" id="title4"> <h3>Switch</h3> <img id="button01" src="images/an-off.png" onclick="anniu01()" /> </div> <div class="box fade" id="title5"> <h3>Switch</h3> <img id="button02" src="images/an-off.png" onclick="anniu02()" /> </div> <div class="box fade" id="title6"> <h3>Switch</h3> <img id="button03" src="images/an-off.png" onclick="anniu03()" /> </div> </div> </div>
Four. Page display
five. Interaction between page and stm32 development board
1. Copy the html file to the SD card of stm
Notice:
What is copied is the content of the Web folder to the root directory of the SD card. Don’t copy it into a folder.
2. Migrate the three .c files to the keil folder. Copy the header files to the inc folder.
Note: Don’t forget to add existing files to the project directory in the keil project.
4. Run
Note: What is the IP address of stm32. In LWIP initialization 192.168.1.7
5. Run successfully
Supplement: WebServer development process
1.WebServer main thread implementation
We found that there were constant function calls, layer by layer.
(1) We need to use an SD card, so we need to transplant fatfs, and we need to use the http protocol, so we need to transplant httpserver-socket.c
(2) Copy the html to the sd card.
(3) Call http_server_socket_thread in the task
2.http_server_socket_thread implementation
(1) Create a socket, bind the socket, start listening, and wait for the client to accept and respond.
(2) Response uses http_server_serve function
3.http_server_serve implementation
(1) read data, Respond_Http_Request request response data
(2) Close the socket. This is the implementation of a short link.
4.Respond_Http_Request implementation
(1) Parse_Http_Request parses HTTP requests
(2) Analyze and compare the data in (1), and process the data based on the analysis results.
(3) Send_Response_File is required to respond to the file request when processing in (2)
5.Parse_Http_Request implementation
(1) Modify the http structure attribute msg by comparing GET, HEAD, and POST strings.
(2) Assign a value to the http structure attribute URl.
6.Send_Response_File
(1) Analyze the file type in the request URL message
(2) Encapsulate the data that needs to be sent into an HTTP message and write it back through write.
(3) Read the file and write back
The data sent during interaction is encapsulated in the form of data structure
(1) Web processing is encapsulated into a structure
(2) The characters required for get and post requests are encapsulated into strings
(3) Data processing is encapsulated into functions