{"id":638,"date":"2015-08-26T16:00:12","date_gmt":"2015-08-26T23:00:12","guid":{"rendered":"http:\/\/visualgdb.com\/w\/?p=638"},"modified":"2017-05-26T10:30:57","modified_gmt":"2017-05-26T17:30:57","slug":"creating-a-freertos-based-wifi-http-server-with-esp8266-and-visual-studio","status":"publish","type":"post","link":"https:\/\/visualgdb.com\/tutorials\/esp8266\/relay\/","title":{"rendered":"Creating a FreeRTOS-based WiFi HTTP server for ESP8266"},"content":{"rendered":"

This tutorial shows how to create a FreeRTOS-based HTTP server with the ESP8266 chip. Unlike the single-threaded IoT SDK that requires writing code in the form of event handlers, the newer RTOS SDK allows creating threads that will be automatically scheduled by the FreeRTOS scheduler and can utilize common patterns like “wait for more incoming data to arrive”. We will create a basic WiFi HTTP server and modify it to allow controlling the on-board LED and the relay by pressing buttons in the browser.<\/p>\n

Before you begin, follow the ESP8266 OpenOCD tutorial<\/a> to get started with JTAG debugging for your ESP8266 board.<\/p>\n

    \n
  1. Start Visual Studio and launch the VisualGDB Embedded Project Wizard:\"01-wifiprj\"<\/a><\/li>\n
  2. Select “New project” => “Embedded Binray” and uncheck the “bin” file checkbox:\"02-newprj\"<\/a><\/li>\n
  3. Select the ESP8266 toolchain and pick the normal ESP8266 device. As the RTOS code is relatively large, it won’t entirely fit in the RAM and the “NOFLASH” option won’t work:\"03-esp8266\"<\/a><\/li>\n
  4. On the sample selection page pick the HTTP Server (RTOS SDK) sample:\"04-server\"<\/a><\/li>\n
  5. Finally choose the debugging settings that worked for the basic blinking LED program when you were trying the OpenOCD tutorial: \"openocd\"<\/a><\/li>\n
  6. Press Finish to create the project and build it with Ctrl-Shift-B:\"06-build\"<\/a><\/li>\n
  7. Press F5 to start debugging the firmware. VisualGDB will program it into the SPI FLASH and start it automatically. Connect your computer or a mobile device to the ESP8266 WiFi network:\"07-network\"<\/a><\/li>\n
  8. Use the network connection status (or the ipconfig utility) to verify the IP address of the ESP8266:\"08-netsettings\"<\/a><\/li>\n
  9. Open the browser and enter the address there. You will see a simple “Hello, world” message followed by the URL you entered:\"09-helloworld\"<\/a><\/li>\n
  10. Now we will look in the code that handles the HTTP requests. Set a breakpoint on the first call to strchr() in ServerTask() and hit the refresh button in the browser. Once the breakpoint is hit, you can see the HTTP request sent by the browser:\"10-buf\"<\/a><\/li>\n
  11. The ServerTask() function uses the API provided by lwIP and does not look different from a function written for a Windows- or Linux-based environment:\n
      \n
    1. First it calls socket() to create a socket<\/li>\n
    2. Then it calls bind() and listen() to begin listening on the port 80<\/li>\n
    3. It calls accept() to accept incoming connections<\/li>\n
    4. For each incoming connection it calls read() until the HTTP header is received and then calls write() to send the reply<\/li>\n
    5. Finally it calls close() to close the client socket<\/li>\n<\/ol>\n

      Unlike the IoT SDK and the espconn API where the event handler must save its state to global variables and exit, the RTOS SDK is much easier to use and allows quickly porting network-related code from the desktop environment.<\/li>\n

    6. We will now add a basic HTML form that will allow controlling the LED and the on-board relay:\n
      <form>\r\n    LED period: <input name=\"period\"\/>msec<input type=\"Submit\" value=\"Set\"\/>\r\n<\/form>\r\n<form>\r\n    Relay state:<br\/>\r\n    New State:\r\n    <input type=\"Submit\" name=\"relay\" Value=\"A\"\/>\r\n    <input type=\"Submit\" name=\"relay\" Value=\"B\"\/>\r\n<\/form><\/pre>\n<\/li>\n
    7. Modify the global header\/footer variable as follows and add the ‘format’ variable:\n
      static const char szHeader[] = \"HTTP\/1.0 200 OK\\r\\nContent-type: text\/html\\r\\n\\r\\n<html><body><h1>LED &amp; Relay Demo<\/h1>\";\r\nstatic const char szFormat[] = \"<form>LED period: <input name=\\\"period\\\" value=\\\"%d\\\"\/>msec<input type=\\\"Submit\\\" value=\\\"Set\\\"\/><\/form><form>Relay state: %s<br\/>New state:<input type=\\\"Submit\\\" name=\\\"relay\\\" Value=\\\"A\\\"\/><input type=\\\"Submit\\\" name=\\\"relay\\\" Value=\\\"B\\\"\/><\/form>\";\r\nstatic const char szFooter[] = \"<\/body><\/html>\";\r\n\r\nstatic int s_LEDPeriod = 300;<\/pre>\n<\/li>\n
    8. Create another thread that will be blinking the LED and start it from user_init():\n
      extern \"C\"\r\n{\r\n#include <gpio.h>\r\n}\r\n\r\nstatic void RAMFUNC LEDBlinkTask(void *pvParameters)\r\n{\r\n\u00a0\u00a0\u00a0 PIN_FUNC_SELECT(PERIPHS_IO_MUX_U0TXD_U, FUNC_GPIO1);\r\n\u00a0\u00a0 \u00a0for (int tick = 0;; tick++)\r\n\u00a0\u00a0 \u00a0{\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0vTaskDelay(s_LEDPeriod \/ portTICK_RATE_MS);\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0gpio_output_conf(0, BIT1, BIT1, 0);\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0vTaskDelay(s_LEDPeriod \/ portTICK_RATE_MS);\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0gpio_output_conf(BIT1, 0, BIT1, 0);\r\n\u00a0\u00a0 \u00a0}\r\n}\r\n\r\nvoid RAMFUNC user_init(void)\r\n{\r\n    \/\/...\r\n\u00a0\u00a0 \u00a0xTaskCreate(LEDBlinkTask, (signed char *)\"Blink\", 256, NULL, 2, NULL);\r\n}<\/pre>\n<\/li>\n
    9. In this tutorial we are using the ESP8266 module from Olimex that has a relay connected to GPIO5. If you are using a different board, use the schematics to find the GPIO port connected to the relay or just skip the relay-related code:\"11-relay\"<\/a><\/li>\n
    10. Now we can modify the code responsible for parsing the request and sending the reply to parse the form fields and control the period and the relay:\n
      \u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0 if (pURL)\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0{\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0char *pURLEnd = strchr(pURL + 1, ' ');\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0if (pURLEnd)\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0{\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0pURL++;\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0pURLEnd[0] = 0;\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0const char *pRelay = strstr(pURL, \"relay=\");\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0if (pRelay)\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0{\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0if (pRelay[6] == 'A')\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0gpio_output_conf(BIT5, 0, BIT5, 0);\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0else\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0gpio_output_conf(0, BIT5, BIT5, 0);\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0}\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0const char *pPeriod = strstr(pURL, \"period=\");\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0if (pPeriod)\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0{\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0s_LEDPeriod = atoi(pPeriod + 7);\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0}\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0write(client_sock, szHeader, sizeof(szHeader) - 1);\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0sprintf(szBuf, szFormat, s_LEDPeriod, (GPIO_REG_READ(GPIO_OUT_ADDRESS) & BIT5) ? \"A\" : \"B\");\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0write(client_sock, szBuf, strlen(szBuf));\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0write(client_sock, szFooter, sizeof(szFooter) - 1);\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0}\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0}<\/pre>\n
      Also enable the GPIO5 in user_init():<\/p>\n
      PIN_FUNC_SELECT(PERIPHS_IO_MUX_GPIO5_U, FUNC_GPIO5);<\/pre>\n<\/li>\n
    11. Now you can build the new program and start it by pressing F5. Reconnect to the WiFi network and refresh the page in the browser:\"12-page\"<\/a><\/li>\n
    12. Try changing the LED period and pressing “set” to update it, then press the “A” and “B” buttons and check that the relay is clicking. The relay has 2 states: in state A it connects the COM terminal with the NO terminal and instate B it connects COM with NC. You can use it to switch on and off various devices such as a 5V fan:\"13-fan\"<\/a><\/li>\n
    13. You can set a breakpoint in the ServerTask() function, however you won’t be able to evaluate local variables as gdb won’t be able to find the function calling ServerTask(). To work around this, create the task using a wrapper function:\n
      void RAMFUNC ServerTaskWrapper(void *pvParameters)\r\n{\r\n    ServerTask(pvParameters);\r\n}<\/pre>\n<\/li>\n
    14. As long as gdb can find the function’s caller, it will show the variables correctly:\"13-var\"<\/a><\/li>\n<\/ol>\n","protected":false},"excerpt":{"rendered":"
      This tutorial shows how to create a FreeRTOS-based HTTP server with the ESP8266 chip. Unlike the single-threaded IoT SDK that<\/p>\n","protected":false},"author":1,"featured_media":659,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[142],"tags":[100,56,102],"_links":{"self":[{"href":"https:\/\/visualgdb.com\/w\/wp-json\/wp\/v2\/posts\/638"}],"collection":[{"href":"https:\/\/visualgdb.com\/w\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/visualgdb.com\/w\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/visualgdb.com\/w\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/visualgdb.com\/w\/wp-json\/wp\/v2\/comments?post=638"}],"version-history":[{"count":5,"href":"https:\/\/visualgdb.com\/w\/wp-json\/wp\/v2\/posts\/638\/revisions"}],"predecessor-version":[{"id":1179,"href":"https:\/\/visualgdb.com\/w\/wp-json\/wp\/v2\/posts\/638\/revisions\/1179"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/visualgdb.com\/w\/wp-json\/wp\/v2\/media\/659"}],"wp:attachment":[{"href":"https:\/\/visualgdb.com\/w\/wp-json\/wp\/v2\/media?parent=638"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/visualgdb.com\/w\/wp-json\/wp\/v2\/categories?post=638"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/visualgdb.com\/w\/wp-json\/wp\/v2\/tags?post=638"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}