2021-09-18 09:21 AM
Hello,
I have a simple web server running on STM23F7. I can control LEDs via Ethernet and display sensor values on the web. The question is how to achieve automatic refresh of data from the sensor. Using HTML, I can refresh the whole page every 1 second, but I don't know how to update only the value without refreshing the whole site.
Thank you
Here is the STM code:
#define numSSItags 4
bool LD1ON = false; // this variable will indicate if the LD3 LED on the board is ON or not
bool LD2ON = false; // this variable will indicate if our LD2 LED on the board is ON or not
extern float AHT10_Temperature;
extern float AHT10_Humidity;
tCGI theCGItable[1];
char const *theSSItags[numSSItags] = { "tag1", "tag2" , "tag3" , "tag4" }; //definice tagu
const char* LedCGIhandler(int iIndex, int iNumParams, char *pcParam[], char *pcValue[]) {
uint32_t i = 0;
if (iIndex == 0) { //turning the LED lights off
//turning the LED lights off
HAL_GPIO_WritePin(LD2_GPIO_Port, LD2_Pin, GPIO_PIN_RESET);
// we put this variable to false to indicate that the LD2 LED on the board is not ON
LD2ON = false;
HAL_GPIO_WritePin(LD3_GPIO_Port, LD3_Pin, GPIO_PIN_RESET);
// we put this variable to false to indicate that the LD* LED on the board is not ON
LD1ON = false;
}
for (i = 0; i < iNumParams; i++) {
if (strcmp(pcParam[i], "led") == 0){
if (strcmp(pcValue[i], "1") == 0) {
HAL_GPIO_WritePin(LD3_GPIO_Port, LD3_Pin, GPIO_PIN_SET);
LD1ON = true; // LD3 LED (red) on the board is ON!
}
else if (strcmp(pcValue[i], "2") == 0) {
HAL_GPIO_WritePin(LD2_GPIO_Port, LD2_Pin, GPIO_PIN_SET);
LD2ON = true; // LD2 LED (blue) on the board is ON!
}
}
}
// the extension .shtml for SSI to work
return "/index.shtml";
} // END [= CGI #5 =]
const tCGI LedCGI = { "/leds.cgi", LedCGIhandler }; // in our SHTML file <form method="get" action="/leds.cgi">
// function to initialize CGI [= CGI #6 =]
void myCGIinit(void) {
//add LED control CGI to the table
theCGItable[0] = LedCGI;
//give the table to the HTTP server
http_set_cgi_handlers(theCGItable, 1);
} // END [= CGI #6 =]
// the actual function for SSI [* SSI #4 *]
u16_t mySSIHandler(int iIndex, char *pcInsert, int iInsertLen) {
if (iIndex == 0) {
if (LD1ON == false) {
char myStr1[] = "<input value=\"1\" name=\"led\" type=\"checkbox\">";
strcpy(pcInsert, myStr1);
return strlen(myStr1);
}
else if (LD1ON == true) {
// since the LD3 red LED on the board is ON we make its checkbox checked!
char myStr1[] = "<input value=\"1\" name=\"led\" type=\"checkbox\" checked>";
strcpy(pcInsert, myStr1);
return strlen(myStr1);
}
}
else if (iIndex == 1) {
if (LD2ON == false) {
char myStr2[] = "<input value=\"2\" name=\"led\" type=\"checkbox\">";
strcpy(pcInsert, myStr2);
return strlen(myStr2);
} else if (LD2ON == true) {
// since the LD2 blue LED on the board is ON we make its checkbox checked!
char myStr2[] = "<input value=\"2\" name=\"led\" type=\"checkbox\" checked>";
strcpy(pcInsert, myStr2);
return strlen(myStr2);
}
}
else if (iIndex == 2) {
char myStr3[5];
gcvt (AHT10_Temperature, 4, myStr3);
strcpy(pcInsert, myStr3);
return strlen(myStr3);
}
else if (iIndex == 3) {
char myStr4[5];
gcvt (AHT10_Humidity, 4, myStr4);
strcpy(pcInsert, myStr4);
return strlen(myStr4);
}
return 0;
}
// function to initialize SSI [* SSI #5 *]
void mySSIinit(void) {
http_set_ssi_handler(mySSIHandler, (char const**) theSSItags, numSSItags);
}
2021-09-18 05:22 PM
For example look at https://www.w3schools.com/js/js_api_fetch.asp
2021-09-20 01:05 PM
Thank you for answer,
unfortunately I don't know which file to use for fatch. Because I only use tags in HTML (<! - # tag1 ->). And then I will replace these tags with the given value using SSI (generated in CubeIDE). However, I do not know if this is a good solution to my problem. I need to display current data from sensors on the HTTPD website. I also thought of saving the data from the sensor to the SD card in a txt file, and then somehow open the txt file using a java script and read the data from it. In the future, I would also like to display the history of values. I will be happy for any comment or advice.
2021-09-21 07:28 PM
> I don't know which file to use for fatch.
You'll simulate these "data files" in your http server, like you create content for SSI.
Then add some javascript to the main page to retrieve the data every N seconds and paste it into the page.
Assuming that the user has a decent browser that supports the fetch APIs.
Another way: use web sockets, they allow pushing data from the server via onmessage callback. But more complicated on the server side.
> I also thought of saving the data from the sensor to the SD card in a txt file, and then somehow open the txt file
Displaying data files from the target is another feature; client side javascript can help there as well. With or without fetch API.
2021-09-25 01:26 PM