![\"\"](\"https:\/\/visualgdb.com\/w\/wp-content\/uploads\/2019\/06\/01-newprj-4.png\")
<\/a><\/li>\n<\/a><\/li>\n<\/a>Update:<\/strong> For better compatibility with the latest ESP32 tools, we recommend selecting the consolidated toolchain<\/a> instead.<\/li>\n<\/a><\/li>\n<\/a><\/li>\n<\/a><\/li>\n<\/a><\/li>\n<\/a><\/li>\n- \n
- The FLASH image generated by the project contains a copy of the image.jpg<\/strong> (this is done by setting the COMPONENT_EMBED_FILES<\/strong> variable in CMakeLists.txt<\/strong>)<\/li>\n
- At startup, app_main()<\/strong> calls pretty_effect_init()<\/strong> that in turn calls the decode_image()<\/strong> function that decodes the image.jpg<\/strong> file from the FLASH memory.<\/li>\n
- Then, app_main()<\/strong> calls display_pretty_colors() <\/strong>that starts applying the wave effect to the image. More specifically, it does the following\n
- \n
- Allocates space for 16 lines of the image using the heap_caps_malloc()<\/strong> function (note the MALLOC_CAP_DMA<\/strong> flag that ensures that the allocated memory can be used by the DMA engine).<\/li>\n
- Splits the image into 16-line sections. Then it uses double-buffering to optimize the image updating:\n
- \n
- If the previous iteration has computed some pixel values, display_pretty_colors()<\/strong> starts sending them to the display via a background DMA transfer.<\/li>\n
- At the same time, it uses the CPU to compute the values for the next batch of pixels.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n
![\"\"](\"https:\/\/visualgdb.com\/w\/wp-content\/uploads\/2019\/06\/08-decode.png\")
<\/a><\/li>\n- We will now change the example to download the image from a specific URL instead of hardcoding it in the FLASH memory. First of all, add the code below to the main source file:\n
#include \"freertos\/FreeRTOS.h\"\r\n#include \"freertos\/task.h\"\r\n#include \"freertos\/event_groups.h\"\r\n#include \"esp_system.h\"\r\n#include \"esp_wifi.h\"\r\n#include \"esp_event_loop.h\"\r\n#include \"esp_log.h\"\r\n#include \"nvs_flash.h\"\r\n\r\nstatic EventGroupHandle_t s_WifiEventGroup;\r\nconst int WIFI_CONNECTED_BIT = BIT0;\r\n\r\nstatic esp_err_t event_handler(void *ctx, system_event_t *event)\r\n{\r\n switch (event->event_id)\r\n {\r\n case SYSTEM_EVENT_STA_START:\r\n esp_wifi_connect();\r\n break;\r\n case SYSTEM_EVENT_STA_GOT_IP:\r\n xEventGroupSetBits(s_WifiEventGroup, WIFI_CONNECTED_BIT);\r\n break;\r\n case SYSTEM_EVENT_STA_DISCONNECTED:\r\n esp_wifi_connect();\r\n xEventGroupClearBits(s_WifiEventGroup, WIFI_CONNECTED_BIT);\r\n break;\r\n default:\r\n break;\r\n }\r\n return ESP_OK;\r\n}\r\n\r\nvoid wifi_init_sta()\r\n{\r\n s_WifiEventGroup = xEventGroupCreate();\r\n esp_err_t ret = nvs_flash_init();\r\n\r\n if (ret == ESP_ERR_NVS_NO_FREE_PAGES || ret == ESP_ERR_NVS_NEW_VERSION_FOUND)\r\n {\r\n ESP_ERROR_CHECK(nvs_flash_erase());\r\n ret = nvs_flash_init();\r\n }\r\n\r\n ESP_ERROR_CHECK(ret);\r\n tcpip_adapter_init();\r\n ESP_ERROR_CHECK(esp_event_loop_init(event_handler, NULL));\r\n wifi_init_config_t cfg = WIFI_INIT_CONFIG_DEFAULT();\r\n ESP_ERROR_CHECK(esp_wifi_init(&cfg));\r\n\r\n wifi_config_t wifi_config = {\r\n .sta = {\r\n .ssid = \"espnet\",\r\n .password = \"sysprogs\"},\r\n };\r\n\r\n ESP_ERROR_CHECK(esp_wifi_set_mode(WIFI_MODE_STA));\r\n ESP_ERROR_CHECK(esp_wifi_set_config(ESP_IF_WIFI_STA, &wifi_config));\r\n ESP_ERROR_CHECK(esp_wifi_start());\r\n}<\/pre>\nThen replace the SSID and password with the values corresponding to your Wi-FI network and add the following lines to main() before the call to display_pretty_colors()<\/strong>:<\/p>\n
wifi_init_sta();\r\n xEventGroupWaitBits(s_WifiEventGroup, WIFI_CONNECTED_BIT, pdFALSE, pdFALSE, portMAX_DELAY);\r\n<\/pre>\n
This will make the WROVER board connect to a Wi-Fi network and set the bit #0 in the\u00a0s_WifiEventGroup object once the board get assigned an IP address. The call to xEventGroupWaitBits() will wait for that bit to be set.<\/li>\n
- Before we add the logic for downloading the JPG file from a given URL, run the current version of the firmware to test the Wi-Fi connection. If you are using the custom version of VisualGDB, try enabling the raw terminal on the WROVER’s COM port so that you can see the diagnostic messages from the board:
![\"\"](\"https:\/\/visualgdb.com\/w\/wp-content\/uploads\/2019\/06\/09-serial.png\")
<\/a><\/li>\n- Run your program and ensure it connects to the Wi-Fi network (the display will stay blank until the connection is established):
![\"\"](\"https:\/\/visualgdb.com\/w\/wp-content\/uploads\/2019\/06\/10-conn.png\")
<\/a><\/li>\n- Add the buffer<\/strong> and size<\/strong> parameters to decode_image()<\/strong> and modify it to use the buffer<\/strong> argument instead of the hardcoded JPG file (don’t forget to update the header file as well):
![\"\"](\"https:\/\/visualgdb.com\/w\/wp-content\/uploads\/2019\/06\/11-decode-1.png\")
<\/a>The decode_image()<\/strong> function will automatically provide the necessary callbacks to the jd_decomp()<\/strong> function ensuring that the image gets decoded to the raw format compatible with the ESP32-WROVER’s LCD display.<\/li>\n- Finally, add the DownloadAndDisplay() function below to the main source file and call it from app_main()<\/strong> instead of display_pretty_colors()<\/strong>:\n
#include \"esp_http_client.h\"\r\n#include \"decode_image.h\"\r\n\r\nstatic void DownloadAndDisplay(spi_device_handle_t spi)\r\n{\r\n const int kMaxJpegFileSize = 32768;\r\n char *pBuf = (char *)malloc(kMaxJpegFileSize);\r\n uint16_t *pDMABuf = heap_caps_malloc(320 * PARALLEL_LINES * sizeof(uint16_t), MALLOC_CAP_DMA);\r\n\r\n for (;;)\r\n {\r\n esp_http_client_config_t config = {\r\n .url = \"http:\/\/visualgdb.com\/demo\/vgdb320.jpg\",\r\n };\r\n\r\n esp_http_client_handle_t client = esp_http_client_init(&config);\r\n esp_http_client_open(client, 0);\r\n int content_length = esp_http_client_fetch_headers(client);\r\n int total_read_len = 0, read_len = 0;\r\n if (total_read_len < content_length && content_length <= kMaxJpegFileSize)\r\n read_len = esp_http_client_read(client, pBuf, content_length);\r\n esp_http_client_close(client);\r\n esp_http_client_cleanup(client);\r\n\r\n if (read_len)\r\n {\r\n uint16_t **decoded = NULL;\r\n esp_err_t rc = decode_image(pBuf, read_len, &decoded);\r\n if (!rc)\r\n {\r\n for (int y = 0; y < 240; y += PARALLEL_LINES)\r\n {\r\n for (int yo = 0; yo < PARALLEL_LINES; yo++)\r\n memcpy(pDMABuf + yo * 320, decoded[y + yo], 320 * sizeof(uint16_t));\r\n send_lines(spi, y, pDMABuf);\r\n send_line_finish(spi);\r\n }\r\n }\r\n\r\n if (decoded)\r\n {\r\n for (int i = 0; i < 256; i++)\r\n {\r\n free((decoded)[i]);\r\n }\r\n free(decoded);\r\n }\r\n\r\n vTaskDelay(5000 \/ portTICK_RATE_MS);\r\n }\r\n }\r\n}<\/pre>\nAlso remove the pretty_effect_init()<\/strong> function and the call from app_main()<\/strong> to it as it is no longer required.<\/li>\n
- The code we have added creates a DMA-accessible buffer similar display_pretty_colors() <\/strong>and the following actions in an infinite loop:\n
- \n
- Downloads the http:\/\/visualgdb.com\/demo\/vgdb320.jpg<\/a> image into a temporary buffer (note the 32KB size limit).<\/li>\n
- If the image has been downloaded successfully, it is decoded using the decode_image()<\/strong> that was previously used to load the image from the FLASH memory.<\/li>\n
- Finally, the image is copied to the DMA-accessible memory and sent to the on-board display. For simplicity, our example does not use double-buffering.<\/li>\n<\/ul>\n
When you run the final version of the example, it will download the demo image from visualgdb.com<\/a> and will show it on the on-board LCD display:
![\"\"](\"https:\/\/visualgdb.com\/w\/wp-content\/uploads\/2019\/06\/vgdb_gears.jpg\")
<\/a><\/li>\n<\/ol>\n","protected":false},"excerpt":{"rendered":"This tutorial shows how to use the on-board display on the ESP32-WROVER board. We will clone a basic LCD example<\/p>\n","protected":false},"author":1,"featured_media":4769,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[142],"tags":[138,101,56,99],"_links":{"self":[{"href":"https:\/\/visualgdb.com\/w\/wp-json\/wp\/v2\/posts\/4753"}],"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=4753"}],"version-history":[{"count":3,"href":"https:\/\/visualgdb.com\/w\/wp-json\/wp\/v2\/posts\/4753\/revisions"}],"predecessor-version":[{"id":9041,"href":"https:\/\/visualgdb.com\/w\/wp-json\/wp\/v2\/posts\/4753\/revisions\/9041"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/visualgdb.com\/w\/wp-json\/wp\/v2\/media\/4769"}],"wp:attachment":[{"href":"https:\/\/visualgdb.com\/w\/wp-json\/wp\/v2\/media?parent=4753"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/visualgdb.com\/w\/wp-json\/wp\/v2\/categories?post=4753"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/visualgdb.com\/w\/wp-json\/wp\/v2\/tags?post=4753"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
- If the image has been downloaded successfully, it is decoded using the decode_image()<\/strong> that was previously used to load the image from the FLASH memory.<\/li>\n
- At the same time, it uses the CPU to compute the values for the next batch of pixels.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n
- Splits the image into 16-line sections. Then it uses double-buffering to optimize the image updating:\n
- At startup, app_main()<\/strong> calls pretty_effect_init()<\/strong> that in turn calls the decode_image()<\/strong> function that decodes the image.jpg<\/strong> file from the FLASH memory.<\/li>\n