{"id":16239210,"url":"https://github.com/nopnop2002/esp-idf-web-chart","last_synced_at":"2025-07-03T02:05:34.013Z","repository":{"id":108987886,"uuid":"483916021","full_name":"nopnop2002/esp-idf-web-chart","owner":"nopnop2002","description":"Real-time data visualization using esp-idf","archived":false,"fork":false,"pushed_at":"2025-04-14T08:19:56.000Z","size":195,"stargazers_count":19,"open_issues_count":1,"forks_count":5,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-04-14T08:38:38.047Z","etag":null,"topics":["adc","esp-idf","esp32","visualization","visualizer","websocket"],"latest_commit_sha":null,"homepage":"","language":"C","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/nopnop2002.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2022-04-21T05:18:28.000Z","updated_at":"2025-04-14T08:19:59.000Z","dependencies_parsed_at":"2024-10-27T21:23:02.236Z","dependency_job_id":"8296fccf-ae6f-45a9-9471-1e5f733aa76d","html_url":"https://github.com/nopnop2002/esp-idf-web-chart","commit_stats":null,"previous_names":["nopnop2002/esp-idf-web-chart","nopnop2002/esp-idf-web-analog"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/nopnop2002/esp-idf-web-chart","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nopnop2002%2Fesp-idf-web-chart","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nopnop2002%2Fesp-idf-web-chart/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nopnop2002%2Fesp-idf-web-chart/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nopnop2002%2Fesp-idf-web-chart/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nopnop2002","download_url":"https://codeload.github.com/nopnop2002/esp-idf-web-chart/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nopnop2002%2Fesp-idf-web-chart/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":263245295,"owners_count":23436511,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["adc","esp-idf","esp32","visualization","visualizer","websocket"],"created_at":"2024-10-10T13:42:44.246Z","updated_at":"2025-07-03T02:05:33.993Z","avatar_url":"https://github.com/nopnop2002.png","language":"C","funding_links":[],"categories":[],"sub_categories":[],"readme":"# esp-idf-web-chart\nThis is a demonstration of __real-time data visualization__ using a web browser.   \nThe purpose of this project is to demonstrate how to use components that enable real-time data visualization.   \nAlthough it use as data to display ADC converted values, it can also be applied to data from sensors such as thermometers and hygrometers.   \n\nThe ESP32 has two ADCs: ADC1 and ADC2.   \nYou can use these to convert analog values to digital values.   \nThe analog values change dynamically and are suitable for this demonstration.\nThis project uses ADC1.   \n\n- Using Canvas Gauge   \n\t![Image](https://github.com/user-attachments/assets/bab9cbba-28a4-4663-a18c-c5328fe60527)\n\t![Image](https://github.com/user-attachments/assets/58989cbc-219c-45a0-a017-f096c7748688)\n\t![Image](https://github.com/user-attachments/assets/ab306473-b771-4c63-a8e2-9f6081f401dd)\n\n- Using Chartjs-Plugin-Streaming   \n\t![Image](https://github.com/user-attachments/assets/bf142ab9-bc34-4118-9643-452733157c5c)\n\n- Using Plotly   \n\t![Image](https://github.com/user-attachments/assets/cd3c45d6-61e9-49f0-82fb-6690663633c2)\n\t![Image](https://github.com/user-attachments/assets/e0823929-d190-495c-858a-cd0efb875fd7)\n\n- Using Epoch   \n\t![Image](https://github.com/user-attachments/assets/a2376a04-1fe2-49b9-bd0d-b98ecf623513)\n\n- Using Seven Segment Display   \n\t![Image](https://github.com/user-attachments/assets/f2f0d663-6868-4c41-bacc-9d495e1556c8)\n\n# Software requirements\nESP-IDF V5.0 or later.   \nESP-IDF V4.4 release branch reached EOL in July 2024.   \nESP-IDF V5.1 is required when using ESP32-C6.   \nI used [this](https://github.com/Molorius/esp32-websocket) component.   \nThis component can communicate directly with the browser.   \n\n# Installation\n```\ngit clone https://github.com/nopnop2002/esp-idf-web-chart\ncd esp-idf-web-chart/RadialGauge/\nidf.py set-target {esp32/esp32s2/esp32s3/esp32c2/esp32c3/esp32c6}\nidf.py menuconfig\nidf.py flash monitor\n```\n\n# Configuration\n![config-top](https://user-images.githubusercontent.com/6020549/164379960-58350b2d-17d4-48b5-84d1-615ff037242a.jpg)\n![config-app](https://user-images.githubusercontent.com/6020549/164379982-149e4044-7889-4755-813e-0185fd082c9b.jpg)\n\n\n## WiFi Setting\nSet the information of your access point.\n![config-wifi-1](https://user-images.githubusercontent.com/6020549/164383151-ea783d1c-406b-42d5-9767-2e6911be9b2f.jpg)\n\nYou can connect using the mDNS hostname instead of the IP address.   \n![config-wifi-2](https://user-images.githubusercontent.com/6020549/164380164-8be36ca2-a5c4-402e-b83d-d21513e66c55.jpg)\n\n## ADC Setting\nSet the information of gpio for analog input.\n![config-adc-1](https://user-images.githubusercontent.com/6020549/164380386-c6dffeb8-9bdd-46bf-8e55-9c4ecef16090.jpg)\n\nIt is possible to monitor 3 channels at the same time.   \n![config-adc-2](https://user-images.githubusercontent.com/6020549/164380399-fe125c4f-006d-48cb-9e4e-f104c389b8b5.jpg)\n\nAnalog input gpio for ESP32 is GPIO32 ~ GPIO39. 12Bits width.   \nAnalog input gpio for ESP32S2 is GPIO01 ~ GPIO10. 13Bits width.   \nAnalog input gpio for ESP32S3 is GPIO01 ~ GPIO10. 12Bits width.   \nAnalog input gpio for ESP32C2 is GPIO00 ~ GPIO04. 12Bits width.   \nAnalog input gpio for ESP32C3 is GPIO00 ~ GPIO04. 12Bits width.   \nAnalog input gpio for ESP32C6 is GPIO00 ~ GPIO06. 12Bits width.   \n\n# ADC Attenuation   \nThis project uses ADC_ATTEN_DB_12(12dB) for attenuation.   \n12dB attenuation (ADC_ATTEN_DB_12) gives full-scale voltage 3.9V.   \nBut the range that can be measured accurately is as follows:   \n- Measurable input voltage range for ESP32 is 150 mV ~ 2450 mV.   \n- Measurable input voltage range for ESP32S2 is 0 mV ~ 2500 mV.   \n- Measurable input voltage range for ESP32S3 is 0 mV ~ 3100 mV.   \n- Measurable input voltage range for ESP32C3 is 0 mV ~ 2500 mV.   \n- Measurable input voltage range for ESP32C2 is 0 mV ~ 2800 mV.   \n\n\n# Analog source\nConnect ESP32 and Analog source using wire cable.   \nI used a variable resistor for testing.\n```\n                                          +---------------------------+\n                                          |      variable resistor    |\nESP32 3.3V   -----------------------------+ Ra of variable resistor   |\n                                          |                           |\n                                          |                           |\nESP32 GPIO32 -------------------------+---+ Vout of variable resistor |\n                                      |   |                           |\n                  R1      R2      R3  |   |                           |\nESP32 GND    ----^^^--+--^^^--+--^^^--+   |                           |\n                      |       |           |                           |\n                      |       |           |                           |\nESP32 GPIO33 ---------+       |           |                           |\n                              |           |                           |\n                              |           |                           |\nESP32 GPIO34 -----------------+           |                           |\n                                          |                           |\n                                          |                           |\nESP32 GND    -----------------------------+ Rb of variable resistor   |\n                                          |                           |\n                                          +---------------------------+\n```\n\n# Launch a web browser   \nEnter the following in the address bar of your web browser.   \n\n```\nhttp:://{IP of ESP32}/\nor\nhttp://esp32-server.local/\n```\n\n# How to display your sensor data\nModify [this](https://github.com/nopnop2002/esp-idf-web-chart/blob/main/RadialGauge/main/web_client.c#L231) block to read data from your sensor.   \nThe ```timer-request``` is notified by the timer every second.   \n```\nif ( strcmp (id, \"timer-request\") == 0) {\n\t// read from sensor data to voltage1, voltage2, voltage3\n\tsprintf(outBuffer,\"DATA%c%d%c%d%c%d\", DEL, voltage1, DEL, voltage2, DEL, voltage3);\n\tws_server_send_text_all(outBuffer,strlen(outBuffer));\n} // end if\n```\n\n# WEB Pages\nWEB pages are stored in the html folder.   \nYou can change it as you like.   \n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnopnop2002%2Fesp-idf-web-chart","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnopnop2002%2Fesp-idf-web-chart","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnopnop2002%2Fesp-idf-web-chart/lists"}