diff --git a/404.html b/404.html index 5d6523b5..77d168ac 100644 --- a/404.html +++ b/404.html @@ -7,13 +7,13 @@ - +
Skip to main content

Page Not Found

We could not find what you were looking for.

Please contact the owner of the site that linked you to the original URL and let them know their link is broken.

- + \ No newline at end of file diff --git a/assets/js/2c8f7a48.9f369839.js b/assets/js/2c8f7a48.37156bc3.js similarity index 96% rename from assets/js/2c8f7a48.9f369839.js rename to assets/js/2c8f7a48.37156bc3.js index 5a1c5184..8978519c 100644 --- a/assets/js/2c8f7a48.9f369839.js +++ b/assets/js/2c8f7a48.37156bc3.js @@ -1 +1 @@ -"use strict";(self.webpackChunkesp_dash_docs=self.webpackChunkesp_dash_docs||[]).push([[7656],{5680:(e,t,r)=>{r.d(t,{xA:()=>p,yg:()=>d});var n=r(6540);function a(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function i(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function o(e){for(var t=1;t=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(a[r]=e[r])}return a}var s=n.createContext({}),u=function(e){var t=n.useContext(s),r=t;return e&&(r="function"==typeof e?e(t):o(o({},t),e)),r},p=function(e){var t=u(e.components);return n.createElement(s.Provider,{value:t},e.children)},c="mdxType",g={inlineCode:"code",wrapper:function(e){var t=e.children;return n.createElement(n.Fragment,{},t)}},y=n.forwardRef((function(e,t){var r=e.components,a=e.mdxType,i=e.originalType,s=e.parentName,p=l(e,["components","mdxType","originalType","parentName"]),c=u(r),y=a,d=c["".concat(s,".").concat(y)]||c[y]||g[y]||i;return r?n.createElement(d,o(o({ref:t},p),{},{components:r})):n.createElement(d,o({ref:t},p))}));function d(e,t){var r=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var i=r.length,o=new Array(i);o[0]=y;var l={};for(var s in t)hasOwnProperty.call(t,s)&&(l[s]=t[s]);l.originalType=e,l[c]="string"==typeof e?e:a,o[1]=l;for(var u=2;u{r.r(t),r.d(t,{assets:()=>s,contentTitle:()=>o,default:()=>g,frontMatter:()=>i,metadata:()=>l,toc:()=>u});var n=r(8168),a=(r(6540),r(5680));const i={title:"Installation",sidebar_label:"Installation",sidebar_position:3},o=void 0,l={unversionedId:"installation",id:"version-v4.x.x/installation",title:"Installation",description:"This document explains the installation procedure for getting started with ESP-DASH.",source:"@site/versioned_docs/version-v4.x.x/installation.md",sourceDirName:".",slug:"/installation",permalink:"/installation",draft:!1,tags:[],version:"v4.x.x",sidebarPosition:3,frontMatter:{title:"Installation",sidebar_label:"Installation",sidebar_position:3},sidebar:"tutorialSidebar",previous:{title:"Concept",permalink:"/concept"},next:{title:"Getting Started",permalink:"/getting-started"}},s={},u=[{value:"Dependencies",id:"dependencies",level:3},{value:"For ESP8266",id:"for-esp8266",level:4},{value:"For ESP32",id:"for-esp32",level:4},{value:"Installing ESP-DASH",id:"installing-esp-dash",level:3},{value:"1. Directly Through Arduino IDE - Library Manager",id:"1-directly-through-arduino-ide---library-manager",level:4},{value:"2. Manual Install",id:"2-manual-install",level:4},{value:"For Windows",id:"for-windows",level:5},{value:"For Linux",id:"for-linux",level:5},{value:"3. Import through Arduino IDE",id:"3-import-through-arduino-ide",level:4}],p={toc:u},c="wrapper";function g(e){let{components:t,...r}=e;return(0,a.yg)(c,(0,n.A)({},p,r,{components:t,mdxType:"MDXLayout"}),(0,a.yg)("p",null,"This document explains the installation procedure for getting started with ESP-DASH."),(0,a.yg)("h3",{id:"dependencies"},"Dependencies"),(0,a.yg)("p",null,(0,a.yg)("em",{parentName:"p"},"ESP-DASH depends on the following libraries present in your libraries folder. Please stricly install the compatible versions of these dependencies only! Using any other version might break ESP-DASH or may cause ESP-DASH to work partially.")),(0,a.yg)("admonition",{title:"Note on Dependencies",type:"important"},(0,a.yg)("p",{parentName:"admonition"},"As of v4.0.4, ESP-DASH has officially switched to using fork of ESPAsyncWebServer and its dependencies from ",(0,a.yg)("a",{parentName:"p",href:"https://github.com/mathieucarbou"},"@mathieucarbou"),". This fork of ESPAsyncWebServer is being maintained regularly and contains many bug fixes along with arduino-esp32 core v3 support."),(0,a.yg)("p",{parentName:"admonition"},"It's suggested to migrate all your projects to using this fork as the original me-no-dev/ESPAsyncWebServer repo is not being maintained ",(0,a.yg)("em",{parentName:"p"},"since years"),".")),(0,a.yg)("h4",{id:"for-esp8266"},"For ESP8266"),(0,a.yg)("ul",null,(0,a.yg)("li",{parentName:"ul"},(0,a.yg)("a",{parentName:"li",href:"https://github.com/esp8266/Arduino"},"ESP8266 Arduino Core")," - ",(0,a.yg)("strong",{parentName:"li"},"latest")),(0,a.yg)("li",{parentName:"ul"},"(mathieucarbou) ",(0,a.yg)("a",{parentName:"li",href:"https://github.com/mathieucarbou/esphome-ESPAsyncTCP#v2.0.0"},"esphome-ESPAsyncTCP")," - ",(0,a.yg)("strong",{parentName:"li"},"v2.0.0")),(0,a.yg)("li",{parentName:"ul"},"(mathieucarbou) ",(0,a.yg)("a",{parentName:"li",href:"https://github.com/mathieucarbou/ESPAsyncWebServer#v3.0.3"},"ESPAsyncWebServer")," - ",(0,a.yg)("strong",{parentName:"li"},"v3.0.3")),(0,a.yg)("li",{parentName:"ul"},(0,a.yg)("a",{parentName:"li",href:"https://github.com/bblanchon/ArduinoJson"},"ArduinoJson")," - ",(0,a.yg)("strong",{parentName:"li"},"v7.0.4"))),(0,a.yg)("h4",{id:"for-esp32"},"For ESP32"),(0,a.yg)("ul",null,(0,a.yg)("li",{parentName:"ul"},(0,a.yg)("a",{parentName:"li",href:"https://github.com/espressif/arduino-esp32"},"ESP32 Arduino Core")," @ ",(0,a.yg)("strong",{parentName:"li"},"latest")),(0,a.yg)("li",{parentName:"ul"},"(mathieucarbou) ",(0,a.yg)("a",{parentName:"li",href:"https://github.com/mathieucarbou/AsyncTCP#v3.1.4"},"AsyncTCP")," @ ",(0,a.yg)("strong",{parentName:"li"},"v3.1.4")),(0,a.yg)("li",{parentName:"ul"},"(mathieucarbou) ",(0,a.yg)("a",{parentName:"li",href:"https://github.com/mathieucarbou/ESPAsyncWebServer#v3.0.3"},"ESPAsyncWebServer")," - ",(0,a.yg)("strong",{parentName:"li"},"v3.0.3")),(0,a.yg)("li",{parentName:"ul"},(0,a.yg)("a",{parentName:"li",href:"https://github.com/bblanchon/ArduinoJson"},"ArduinoJson")," - ",(0,a.yg)("strong",{parentName:"li"},"v7.0.4"))),(0,a.yg)("h3",{id:"installing-esp-dash"},"Installing ESP-DASH"),(0,a.yg)("h4",{id:"1-directly-through-arduino-ide---library-manager"},"1. Directly Through Arduino IDE - Library Manager"),(0,a.yg)("p",null,'Go to Sketch > Include Library > Library Manager > Search for "ESP-DASH" > Install'),(0,a.yg)("h4",{id:"2-manual-install"},"2. Manual Install"),(0,a.yg)("h5",{id:"for-windows"},"For Windows"),(0,a.yg)("ul",null,(0,a.yg)("li",{parentName:"ul"},"Download the ",(0,a.yg)("a",{parentName:"li",href:"https://github.com/ayushsharma82/ESP-DASH/archive/master.zip"},"Repository")),(0,a.yg)("li",{parentName:"ul"},"Extract the .zip in ",(0,a.yg)("inlineCode",{parentName:"li"},'Documents > Arduino > Libraries > {Place "ESP-DASH" folder Here}'))),(0,a.yg)("h5",{id:"for-linux"},"For Linux"),(0,a.yg)("ul",null,(0,a.yg)("li",{parentName:"ul"},"Download the ",(0,a.yg)("a",{parentName:"li",href:"https://github.com/ayushsharma82/ESP-DASH/archive/master.zip"},"Repository")),(0,a.yg)("li",{parentName:"ul"},"Extract the .zip in ",(0,a.yg)("inlineCode",{parentName:"li"},'Sketchbook > Libraries > {Place "ESP-DASH" folder Here}'))),(0,a.yg)("h4",{id:"3-import-through-arduino-ide"},"3. Import through Arduino IDE"),(0,a.yg)("ul",null,(0,a.yg)("li",{parentName:"ul"},"Download the ",(0,a.yg)("a",{parentName:"li",href:"https://github.com/ayushsharma82/ESP-DASH/archive/master.zip"},"Repository")),(0,a.yg)("li",{parentName:"ul"},"Go to ",(0,a.yg)("inlineCode",{parentName:"li"},"Sketch > Include Library > Add .zip Library > Select the Downloaded .zip File."))))}g.isMDXComponent=!0}}]); \ No newline at end of file +"use strict";(self.webpackChunkesp_dash_docs=self.webpackChunkesp_dash_docs||[]).push([[7656],{5680:(e,t,r)=>{r.d(t,{xA:()=>p,yg:()=>d});var n=r(6540);function a(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function i(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function o(e){for(var t=1;t=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(a[r]=e[r])}return a}var s=n.createContext({}),u=function(e){var t=n.useContext(s),r=t;return e&&(r="function"==typeof e?e(t):o(o({},t),e)),r},p=function(e){var t=u(e.components);return n.createElement(s.Provider,{value:t},e.children)},c="mdxType",g={inlineCode:"code",wrapper:function(e){var t=e.children;return n.createElement(n.Fragment,{},t)}},y=n.forwardRef((function(e,t){var r=e.components,a=e.mdxType,i=e.originalType,s=e.parentName,p=l(e,["components","mdxType","originalType","parentName"]),c=u(r),y=a,d=c["".concat(s,".").concat(y)]||c[y]||g[y]||i;return r?n.createElement(d,o(o({ref:t},p),{},{components:r})):n.createElement(d,o({ref:t},p))}));function d(e,t){var r=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var i=r.length,o=new Array(i);o[0]=y;var l={};for(var s in t)hasOwnProperty.call(t,s)&&(l[s]=t[s]);l.originalType=e,l[c]="string"==typeof e?e:a,o[1]=l;for(var u=2;u{r.r(t),r.d(t,{assets:()=>s,contentTitle:()=>o,default:()=>g,frontMatter:()=>i,metadata:()=>l,toc:()=>u});var n=r(8168),a=(r(6540),r(5680));const i={title:"Installation",sidebar_label:"Installation",sidebar_position:3},o=void 0,l={unversionedId:"installation",id:"version-v4.x.x/installation",title:"Installation",description:"This document explains the installation procedure for getting started with ESP-DASH.",source:"@site/versioned_docs/version-v4.x.x/installation.md",sourceDirName:".",slug:"/installation",permalink:"/installation",draft:!1,tags:[],version:"v4.x.x",sidebarPosition:3,frontMatter:{title:"Installation",sidebar_label:"Installation",sidebar_position:3},sidebar:"tutorialSidebar",previous:{title:"Concept",permalink:"/concept"},next:{title:"Getting Started",permalink:"/getting-started"}},s={},u=[{value:"Dependencies",id:"dependencies",level:3},{value:"For ESP8266",id:"for-esp8266",level:4},{value:"For ESP32",id:"for-esp32",level:4},{value:"Installing ESP-DASH",id:"installing-esp-dash",level:3},{value:"1. Directly Through Arduino IDE - Library Manager",id:"1-directly-through-arduino-ide---library-manager",level:4},{value:"2. Manual Install",id:"2-manual-install",level:4},{value:"For Windows",id:"for-windows",level:5},{value:"For Linux",id:"for-linux",level:5},{value:"3. Import through Arduino IDE",id:"3-import-through-arduino-ide",level:4}],p={toc:u},c="wrapper";function g(e){let{components:t,...r}=e;return(0,a.yg)(c,(0,n.A)({},p,r,{components:t,mdxType:"MDXLayout"}),(0,a.yg)("p",null,"This document explains the installation procedure for getting started with ESP-DASH."),(0,a.yg)("h3",{id:"dependencies"},"Dependencies"),(0,a.yg)("p",null,(0,a.yg)("em",{parentName:"p"},"ESP-DASH depends on the following libraries present in your libraries folder. Please stricly install the compatible versions of these dependencies only! Using any other version might break ESP-DASH or may cause ESP-DASH to work partially.")),(0,a.yg)("admonition",{title:"Note on Dependencies",type:"important"},(0,a.yg)("p",{parentName:"admonition"},"As of v4.0.4, ESP-DASH has officially switched to using fork of ESPAsyncWebServer and its dependencies from ",(0,a.yg)("a",{parentName:"p",href:"https://github.com/mathieucarbou"},"@mathieucarbou"),". This fork of ESPAsyncWebServer is being maintained regularly and contains many bug fixes along with arduino-esp32 core v3 support."),(0,a.yg)("p",{parentName:"admonition"},"It's suggested to migrate all your projects to using this fork as the original me-no-dev/ESPAsyncWebServer repo is not being maintained ",(0,a.yg)("em",{parentName:"p"},"since years"),".")),(0,a.yg)("h4",{id:"for-esp8266"},"For ESP8266"),(0,a.yg)("ul",null,(0,a.yg)("li",{parentName:"ul"},(0,a.yg)("a",{parentName:"li",href:"https://github.com/esp8266/Arduino"},"ESP8266 Arduino Core")," - ",(0,a.yg)("strong",{parentName:"li"},"latest")),(0,a.yg)("li",{parentName:"ul"},"(mathieucarbou) ",(0,a.yg)("a",{parentName:"li",href:"https://github.com/mathieucarbou/esphome-ESPAsyncTCP#v2.0.0"},"esphome-ESPAsyncTCP")," - ",(0,a.yg)("strong",{parentName:"li"},"v2.0.0")),(0,a.yg)("li",{parentName:"ul"},"(mathieucarbou) ",(0,a.yg)("a",{parentName:"li",href:"https://github.com/mathieucarbou/ESPAsyncWebServer#v3.0.5"},"ESPAsyncWebServer")," - ",(0,a.yg)("strong",{parentName:"li"},"v3.0.5")),(0,a.yg)("li",{parentName:"ul"},(0,a.yg)("a",{parentName:"li",href:"https://github.com/bblanchon/ArduinoJson"},"ArduinoJson")," - ",(0,a.yg)("strong",{parentName:"li"},"v7.0.4"))),(0,a.yg)("h4",{id:"for-esp32"},"For ESP32"),(0,a.yg)("ul",null,(0,a.yg)("li",{parentName:"ul"},(0,a.yg)("a",{parentName:"li",href:"https://github.com/espressif/arduino-esp32"},"ESP32 Arduino Core")," @ ",(0,a.yg)("strong",{parentName:"li"},"latest")),(0,a.yg)("li",{parentName:"ul"},"(mathieucarbou) ",(0,a.yg)("a",{parentName:"li",href:"https://github.com/mathieucarbou/AsyncTCP#v3.1.4"},"AsyncTCP")," @ ",(0,a.yg)("strong",{parentName:"li"},"v3.1.4")),(0,a.yg)("li",{parentName:"ul"},"(mathieucarbou) ",(0,a.yg)("a",{parentName:"li",href:"https://github.com/mathieucarbou/ESPAsyncWebServer#v3.0.5"},"ESPAsyncWebServer")," - ",(0,a.yg)("strong",{parentName:"li"},"v3.0.5")),(0,a.yg)("li",{parentName:"ul"},(0,a.yg)("a",{parentName:"li",href:"https://github.com/bblanchon/ArduinoJson"},"ArduinoJson")," - ",(0,a.yg)("strong",{parentName:"li"},"v7.0.4"))),(0,a.yg)("h3",{id:"installing-esp-dash"},"Installing ESP-DASH"),(0,a.yg)("h4",{id:"1-directly-through-arduino-ide---library-manager"},"1. Directly Through Arduino IDE - Library Manager"),(0,a.yg)("p",null,'Go to Sketch > Include Library > Library Manager > Search for "ESP-DASH" > Install'),(0,a.yg)("h4",{id:"2-manual-install"},"2. Manual Install"),(0,a.yg)("h5",{id:"for-windows"},"For Windows"),(0,a.yg)("ul",null,(0,a.yg)("li",{parentName:"ul"},"Download the ",(0,a.yg)("a",{parentName:"li",href:"https://github.com/ayushsharma82/ESP-DASH/archive/master.zip"},"Repository")),(0,a.yg)("li",{parentName:"ul"},"Extract the .zip in ",(0,a.yg)("inlineCode",{parentName:"li"},'Documents > Arduino > Libraries > {Place "ESP-DASH" folder Here}'))),(0,a.yg)("h5",{id:"for-linux"},"For Linux"),(0,a.yg)("ul",null,(0,a.yg)("li",{parentName:"ul"},"Download the ",(0,a.yg)("a",{parentName:"li",href:"https://github.com/ayushsharma82/ESP-DASH/archive/master.zip"},"Repository")),(0,a.yg)("li",{parentName:"ul"},"Extract the .zip in ",(0,a.yg)("inlineCode",{parentName:"li"},'Sketchbook > Libraries > {Place "ESP-DASH" folder Here}'))),(0,a.yg)("h4",{id:"3-import-through-arduino-ide"},"3. Import through Arduino IDE"),(0,a.yg)("ul",null,(0,a.yg)("li",{parentName:"ul"},"Download the ",(0,a.yg)("a",{parentName:"li",href:"https://github.com/ayushsharma82/ESP-DASH/archive/master.zip"},"Repository")),(0,a.yg)("li",{parentName:"ul"},"Go to ",(0,a.yg)("inlineCode",{parentName:"li"},"Sketch > Include Library > Add .zip Library > Select the Downloaded .zip File."))))}g.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/assets/js/3b8c55ea.b93a7aef.js b/assets/js/3b8c55ea.2bd62dd5.js similarity index 96% rename from assets/js/3b8c55ea.b93a7aef.js rename to assets/js/3b8c55ea.2bd62dd5.js index 2dda3b6a..74e6259c 100644 --- a/assets/js/3b8c55ea.b93a7aef.js +++ b/assets/js/3b8c55ea.2bd62dd5.js @@ -1 +1 @@ -"use strict";(self.webpackChunkesp_dash_docs=self.webpackChunkesp_dash_docs||[]).push([[6803],{5680:(e,t,r)=>{r.d(t,{xA:()=>p,yg:()=>d});var n=r(6540);function a(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function i(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function o(e){for(var t=1;t=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(a[r]=e[r])}return a}var s=n.createContext({}),u=function(e){var t=n.useContext(s),r=t;return e&&(r="function"==typeof e?e(t):o(o({},t),e)),r},p=function(e){var t=u(e.components);return n.createElement(s.Provider,{value:t},e.children)},c="mdxType",g={inlineCode:"code",wrapper:function(e){var t=e.children;return n.createElement(n.Fragment,{},t)}},y=n.forwardRef((function(e,t){var r=e.components,a=e.mdxType,i=e.originalType,s=e.parentName,p=l(e,["components","mdxType","originalType","parentName"]),c=u(r),y=a,d=c["".concat(s,".").concat(y)]||c[y]||g[y]||i;return r?n.createElement(d,o(o({ref:t},p),{},{components:r})):n.createElement(d,o({ref:t},p))}));function d(e,t){var r=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var i=r.length,o=new Array(i);o[0]=y;var l={};for(var s in t)hasOwnProperty.call(t,s)&&(l[s]=t[s]);l.originalType=e,l[c]="string"==typeof e?e:a,o[1]=l;for(var u=2;u{r.r(t),r.d(t,{assets:()=>s,contentTitle:()=>o,default:()=>g,frontMatter:()=>i,metadata:()=>l,toc:()=>u});var n=r(8168),a=(r(6540),r(5680));const i={title:"Installation",sidebar_label:"Installation",sidebar_position:3},o=void 0,l={unversionedId:"installation",id:"installation",title:"Installation",description:"This document explains the installation procedure for getting started with ESP-DASH.",source:"@site/docs/installation.md",sourceDirName:".",slug:"/installation",permalink:"/next/installation",draft:!1,tags:[],version:"current",sidebarPosition:3,frontMatter:{title:"Installation",sidebar_label:"Installation",sidebar_position:3},sidebar:"tutorialSidebar",previous:{title:"Concept",permalink:"/next/concept"},next:{title:"Getting Started",permalink:"/next/getting-started"}},s={},u=[{value:"Dependencies",id:"dependencies",level:3},{value:"For ESP8266",id:"for-esp8266",level:4},{value:"For ESP32",id:"for-esp32",level:4},{value:"Installing ESP-DASH",id:"installing-esp-dash",level:3},{value:"1. Directly Through Arduino IDE - Library Manager",id:"1-directly-through-arduino-ide---library-manager",level:4},{value:"2. Manual Install",id:"2-manual-install",level:4},{value:"For Windows:",id:"for-windows",level:5},{value:"For Linux:",id:"for-linux",level:5},{value:"3. Import through Arduino IDE",id:"3-import-through-arduino-ide",level:4}],p={toc:u},c="wrapper";function g(e){let{components:t,...r}=e;return(0,a.yg)(c,(0,n.A)({},p,r,{components:t,mdxType:"MDXLayout"}),(0,a.yg)("p",null,"This document explains the installation procedure for getting started with ESP-DASH."),(0,a.yg)("h3",{id:"dependencies"},"Dependencies"),(0,a.yg)("p",null,(0,a.yg)("em",{parentName:"p"},"ESP-DASH depends on the following libraries present in your libraries folder. Please stricly install the compatible versions of these dependencies only! Using any other version might break ESP-DASH or may cause ESP-DASH to work partially.")),(0,a.yg)("admonition",{title:"Note on Dependencies",type:"important"},(0,a.yg)("p",{parentName:"admonition"},"As of v4.0.4, ESP-DASH has officially switched to using fork of ESPAsyncWebServer and its dependencies from ",(0,a.yg)("a",{parentName:"p",href:"https://github.com/mathieucarbou"},"@mathieucarbou"),". This fork of ESPAsyncWebServer is being maintained regularly and contains many bug fixes along with arduino-esp32 core v3 support."),(0,a.yg)("p",{parentName:"admonition"},"It's suggested to migrate all your projects to using this fork as the original me-no-dev/ESPAsyncWebServer repo is not being maintained ",(0,a.yg)("em",{parentName:"p"},"since years"),".")),(0,a.yg)("h4",{id:"for-esp8266"},"For ESP8266"),(0,a.yg)("ul",null,(0,a.yg)("li",{parentName:"ul"},(0,a.yg)("a",{parentName:"li",href:"https://github.com/esp8266/Arduino"},"ESP8266 Arduino Core")," - ",(0,a.yg)("strong",{parentName:"li"},"latest")),(0,a.yg)("li",{parentName:"ul"},"(mathieucarbou) ",(0,a.yg)("a",{parentName:"li",href:"https://github.com/mathieucarbou/esphome-ESPAsyncTCP#v2.0.0"},"esphome-ESPAsyncTCP")," - ",(0,a.yg)("strong",{parentName:"li"},"v2.0.0")),(0,a.yg)("li",{parentName:"ul"},"(mathieucarbou) ",(0,a.yg)("a",{parentName:"li",href:"https://github.com/mathieucarbou/ESPAsyncWebServer#v3.0.3"},"ESPAsyncWebServer")," - ",(0,a.yg)("strong",{parentName:"li"},"v3.0.3")),(0,a.yg)("li",{parentName:"ul"},(0,a.yg)("a",{parentName:"li",href:"https://github.com/bblanchon/ArduinoJson"},"ArduinoJson")," - ",(0,a.yg)("strong",{parentName:"li"},"v7.0.4"))),(0,a.yg)("h4",{id:"for-esp32"},"For ESP32"),(0,a.yg)("ul",null,(0,a.yg)("li",{parentName:"ul"},(0,a.yg)("a",{parentName:"li",href:"https://github.com/espressif/arduino-esp32"},"ESP32 Arduino Core")," @ ",(0,a.yg)("strong",{parentName:"li"},"latest")),(0,a.yg)("li",{parentName:"ul"},"(mathieucarbou) ",(0,a.yg)("a",{parentName:"li",href:"https://github.com/mathieucarbou/AsyncTCP#v3.1.4"},"AsyncTCP")," @ ",(0,a.yg)("strong",{parentName:"li"},"v3.1.4")),(0,a.yg)("li",{parentName:"ul"},"(mathieucarbou) ",(0,a.yg)("a",{parentName:"li",href:"https://github.com/mathieucarbou/ESPAsyncWebServer#v3.0.3"},"ESPAsyncWebServer")," - ",(0,a.yg)("strong",{parentName:"li"},"v3.0.3")),(0,a.yg)("li",{parentName:"ul"},(0,a.yg)("a",{parentName:"li",href:"https://github.com/bblanchon/ArduinoJson"},"ArduinoJson")," - ",(0,a.yg)("strong",{parentName:"li"},"v7.0.4"))),(0,a.yg)("h3",{id:"installing-esp-dash"},"Installing ESP-DASH"),(0,a.yg)("h4",{id:"1-directly-through-arduino-ide---library-manager"},"1. Directly Through Arduino IDE - Library Manager"),(0,a.yg)("p",null,'Go to Sketch > Include Library > Library Manager > Search for "ESP-DASH" > Install'),(0,a.yg)("h4",{id:"2-manual-install"},"2. Manual Install"),(0,a.yg)("h5",{id:"for-windows"},"For Windows:"),(0,a.yg)("ul",null,(0,a.yg)("li",{parentName:"ul"},"Download the ",(0,a.yg)("a",{parentName:"li",href:"https://github.com/ayushsharma82/ESP-DASH/archive/master.zip"},"Repository")),(0,a.yg)("li",{parentName:"ul"},"Extract the .zip in ",(0,a.yg)("inlineCode",{parentName:"li"},'Documents > Arduino > Libraries > {Place "ESP-DASH" folder Here}'))),(0,a.yg)("h5",{id:"for-linux"},"For Linux:"),(0,a.yg)("ul",null,(0,a.yg)("li",{parentName:"ul"},"Download the ",(0,a.yg)("a",{parentName:"li",href:"https://github.com/ayushsharma82/ESP-DASH/archive/master.zip"},"Repository")," "),(0,a.yg)("li",{parentName:"ul"},"Extract the .zip in ",(0,a.yg)("inlineCode",{parentName:"li"},'Sketchbook > Libraries > {Place "ESP-DASH" folder Here}'))),(0,a.yg)("h4",{id:"3-import-through-arduino-ide"},"3. Import through Arduino IDE"),(0,a.yg)("ul",null,(0,a.yg)("li",{parentName:"ul"},"Download the ",(0,a.yg)("a",{parentName:"li",href:"https://github.com/ayushsharma82/ESP-DASH/archive/master.zip"},"Repository")),(0,a.yg)("li",{parentName:"ul"},"Go to ",(0,a.yg)("inlineCode",{parentName:"li"},"Sketch > Include Library > Add .zip Library > Select the Downloaded .zip File."))))}g.isMDXComponent=!0}}]); \ No newline at end of file +"use strict";(self.webpackChunkesp_dash_docs=self.webpackChunkesp_dash_docs||[]).push([[6803],{5680:(e,t,r)=>{r.d(t,{xA:()=>p,yg:()=>d});var n=r(6540);function a(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function i(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function o(e){for(var t=1;t=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(a[r]=e[r])}return a}var s=n.createContext({}),u=function(e){var t=n.useContext(s),r=t;return e&&(r="function"==typeof e?e(t):o(o({},t),e)),r},p=function(e){var t=u(e.components);return n.createElement(s.Provider,{value:t},e.children)},c="mdxType",g={inlineCode:"code",wrapper:function(e){var t=e.children;return n.createElement(n.Fragment,{},t)}},y=n.forwardRef((function(e,t){var r=e.components,a=e.mdxType,i=e.originalType,s=e.parentName,p=l(e,["components","mdxType","originalType","parentName"]),c=u(r),y=a,d=c["".concat(s,".").concat(y)]||c[y]||g[y]||i;return r?n.createElement(d,o(o({ref:t},p),{},{components:r})):n.createElement(d,o({ref:t},p))}));function d(e,t){var r=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var i=r.length,o=new Array(i);o[0]=y;var l={};for(var s in t)hasOwnProperty.call(t,s)&&(l[s]=t[s]);l.originalType=e,l[c]="string"==typeof e?e:a,o[1]=l;for(var u=2;u{r.r(t),r.d(t,{assets:()=>s,contentTitle:()=>o,default:()=>g,frontMatter:()=>i,metadata:()=>l,toc:()=>u});var n=r(8168),a=(r(6540),r(5680));const i={title:"Installation",sidebar_label:"Installation",sidebar_position:3},o=void 0,l={unversionedId:"installation",id:"installation",title:"Installation",description:"This document explains the installation procedure for getting started with ESP-DASH.",source:"@site/docs/installation.md",sourceDirName:".",slug:"/installation",permalink:"/next/installation",draft:!1,tags:[],version:"current",sidebarPosition:3,frontMatter:{title:"Installation",sidebar_label:"Installation",sidebar_position:3},sidebar:"tutorialSidebar",previous:{title:"Concept",permalink:"/next/concept"},next:{title:"Getting Started",permalink:"/next/getting-started"}},s={},u=[{value:"Dependencies",id:"dependencies",level:3},{value:"For ESP8266",id:"for-esp8266",level:4},{value:"For ESP32",id:"for-esp32",level:4},{value:"Installing ESP-DASH",id:"installing-esp-dash",level:3},{value:"1. Directly Through Arduino IDE - Library Manager",id:"1-directly-through-arduino-ide---library-manager",level:4},{value:"2. Manual Install",id:"2-manual-install",level:4},{value:"For Windows:",id:"for-windows",level:5},{value:"For Linux:",id:"for-linux",level:5},{value:"3. Import through Arduino IDE",id:"3-import-through-arduino-ide",level:4}],p={toc:u},c="wrapper";function g(e){let{components:t,...r}=e;return(0,a.yg)(c,(0,n.A)({},p,r,{components:t,mdxType:"MDXLayout"}),(0,a.yg)("p",null,"This document explains the installation procedure for getting started with ESP-DASH."),(0,a.yg)("h3",{id:"dependencies"},"Dependencies"),(0,a.yg)("p",null,(0,a.yg)("em",{parentName:"p"},"ESP-DASH depends on the following libraries present in your libraries folder. Please stricly install the compatible versions of these dependencies only! Using any other version might break ESP-DASH or may cause ESP-DASH to work partially.")),(0,a.yg)("admonition",{title:"Note on Dependencies",type:"important"},(0,a.yg)("p",{parentName:"admonition"},"As of v4.0.4, ESP-DASH has officially switched to using fork of ESPAsyncWebServer and its dependencies from ",(0,a.yg)("a",{parentName:"p",href:"https://github.com/mathieucarbou"},"@mathieucarbou"),". This fork of ESPAsyncWebServer is being maintained regularly and contains many bug fixes along with arduino-esp32 core v3 support."),(0,a.yg)("p",{parentName:"admonition"},"It's suggested to migrate all your projects to using this fork as the original me-no-dev/ESPAsyncWebServer repo is not being maintained ",(0,a.yg)("em",{parentName:"p"},"since years"),".")),(0,a.yg)("h4",{id:"for-esp8266"},"For ESP8266"),(0,a.yg)("ul",null,(0,a.yg)("li",{parentName:"ul"},(0,a.yg)("a",{parentName:"li",href:"https://github.com/esp8266/Arduino"},"ESP8266 Arduino Core")," - ",(0,a.yg)("strong",{parentName:"li"},"latest")),(0,a.yg)("li",{parentName:"ul"},"(mathieucarbou) ",(0,a.yg)("a",{parentName:"li",href:"https://github.com/mathieucarbou/esphome-ESPAsyncTCP#v2.0.0"},"esphome-ESPAsyncTCP")," - ",(0,a.yg)("strong",{parentName:"li"},"v2.0.0")),(0,a.yg)("li",{parentName:"ul"},"(mathieucarbou) ",(0,a.yg)("a",{parentName:"li",href:"https://github.com/mathieucarbou/ESPAsyncWebServer#v3.0.5"},"ESPAsyncWebServer")," - ",(0,a.yg)("strong",{parentName:"li"},"v3.0.5")),(0,a.yg)("li",{parentName:"ul"},(0,a.yg)("a",{parentName:"li",href:"https://github.com/bblanchon/ArduinoJson"},"ArduinoJson")," - ",(0,a.yg)("strong",{parentName:"li"},"v7.0.4"))),(0,a.yg)("h4",{id:"for-esp32"},"For ESP32"),(0,a.yg)("ul",null,(0,a.yg)("li",{parentName:"ul"},(0,a.yg)("a",{parentName:"li",href:"https://github.com/espressif/arduino-esp32"},"ESP32 Arduino Core")," @ ",(0,a.yg)("strong",{parentName:"li"},"latest")),(0,a.yg)("li",{parentName:"ul"},"(mathieucarbou) ",(0,a.yg)("a",{parentName:"li",href:"https://github.com/mathieucarbou/AsyncTCP#v3.1.4"},"AsyncTCP")," @ ",(0,a.yg)("strong",{parentName:"li"},"v3.1.4")),(0,a.yg)("li",{parentName:"ul"},"(mathieucarbou) ",(0,a.yg)("a",{parentName:"li",href:"https://github.com/mathieucarbou/ESPAsyncWebServer#v3.0.5"},"ESPAsyncWebServer")," - ",(0,a.yg)("strong",{parentName:"li"},"v3.0.5")),(0,a.yg)("li",{parentName:"ul"},(0,a.yg)("a",{parentName:"li",href:"https://github.com/bblanchon/ArduinoJson"},"ArduinoJson")," - ",(0,a.yg)("strong",{parentName:"li"},"v7.0.4"))),(0,a.yg)("h3",{id:"installing-esp-dash"},"Installing ESP-DASH"),(0,a.yg)("h4",{id:"1-directly-through-arduino-ide---library-manager"},"1. Directly Through Arduino IDE - Library Manager"),(0,a.yg)("p",null,'Go to Sketch > Include Library > Library Manager > Search for "ESP-DASH" > Install'),(0,a.yg)("h4",{id:"2-manual-install"},"2. Manual Install"),(0,a.yg)("h5",{id:"for-windows"},"For Windows:"),(0,a.yg)("ul",null,(0,a.yg)("li",{parentName:"ul"},"Download the ",(0,a.yg)("a",{parentName:"li",href:"https://github.com/ayushsharma82/ESP-DASH/archive/master.zip"},"Repository")),(0,a.yg)("li",{parentName:"ul"},"Extract the .zip in ",(0,a.yg)("inlineCode",{parentName:"li"},'Documents > Arduino > Libraries > {Place "ESP-DASH" folder Here}'))),(0,a.yg)("h5",{id:"for-linux"},"For Linux:"),(0,a.yg)("ul",null,(0,a.yg)("li",{parentName:"ul"},"Download the ",(0,a.yg)("a",{parentName:"li",href:"https://github.com/ayushsharma82/ESP-DASH/archive/master.zip"},"Repository")," "),(0,a.yg)("li",{parentName:"ul"},"Extract the .zip in ",(0,a.yg)("inlineCode",{parentName:"li"},'Sketchbook > Libraries > {Place "ESP-DASH" folder Here}'))),(0,a.yg)("h4",{id:"3-import-through-arduino-ide"},"3. Import through Arduino IDE"),(0,a.yg)("ul",null,(0,a.yg)("li",{parentName:"ul"},"Download the ",(0,a.yg)("a",{parentName:"li",href:"https://github.com/ayushsharma82/ESP-DASH/archive/master.zip"},"Repository")),(0,a.yg)("li",{parentName:"ul"},"Go to ",(0,a.yg)("inlineCode",{parentName:"li"},"Sketch > Include Library > Add .zip Library > Select the Downloaded .zip File."))))}g.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/assets/js/runtime~main.028bf30e.js b/assets/js/runtime~main.26ec67b4.js similarity index 97% rename from assets/js/runtime~main.028bf30e.js rename to assets/js/runtime~main.26ec67b4.js index 634b719b..4c2aab32 100644 --- a/assets/js/runtime~main.028bf30e.js +++ b/assets/js/runtime~main.26ec67b4.js @@ -1 +1 @@ -(()=>{"use strict";var e,a,f,c,d,b={},t={};function r(e){var a=t[e];if(void 0!==a)return a.exports;var f=t[e]={id:e,loaded:!1,exports:{}};return b[e].call(f.exports,f,f.exports,r),f.loaded=!0,f.exports}r.m=b,r.c=t,e=[],r.O=(a,f,c,d)=>{if(!f){var b=1/0;for(i=0;i=d)&&Object.keys(r.O).every((e=>r.O[e](f[o])))?f.splice(o--,1):(t=!1,d0&&e[i-1][2]>d;i--)e[i]=e[i-1];e[i]=[f,c,d]},r.n=e=>{var a=e&&e.__esModule?()=>e.default:()=>e;return r.d(a,{a:a}),a},f=Object.getPrototypeOf?e=>Object.getPrototypeOf(e):e=>e.__proto__,r.t=function(e,c){if(1&c&&(e=this(e)),8&c)return e;if("object"==typeof e&&e){if(4&c&&e.__esModule)return e;if(16&c&&"function"==typeof e.then)return e}var d=Object.create(null);r.r(d);var b={};a=a||[null,f({}),f([]),f(f)];for(var t=2&c&&e;"object"==typeof t&&!~a.indexOf(t);t=f(t))Object.getOwnPropertyNames(t).forEach((a=>b[a]=()=>e[a]));return b.default=()=>e,r.d(d,b),d},r.d=(e,a)=>{for(var f in a)r.o(a,f)&&!r.o(e,f)&&Object.defineProperty(e,f,{enumerable:!0,get:a[f]})},r.f={},r.e=e=>Promise.all(Object.keys(r.f).reduce(((a,f)=>(r.f[f](e,a),a)),[])),r.u=e=>"assets/js/"+({62:"2ef5adfd",118:"94c292bb",143:"06221ea7",273:"c9c49941",293:"49146ea8",559:"2ad73175",608:"d97305fc",611:"e9355139",667:"71c6fff9",1074:"8cdd9fb1",1100:"55c57bd6",1575:"a81a9ba7",1864:"6d50d705",1876:"52044914",1947:"601e692a",1962:"85d52a4f",2094:"b3915b8c",2130:"693a6f42",2139:"2a51f6ab",2201:"8248cc99",2204:"bff5c333",2223:"ea04d8aa",2233:"7642b827",2261:"2bf59882",2325:"5942c4f9",2359:"6944cb31",2387:"5c2cce4e",2429:"25bc9890",2605:"e5af0a5c",2666:"4649c564",2748:"9b8fe160",2892:"3fdbf2aa",3001:"a65c42af",3008:"af2b8099",3052:"652d9580",3080:"af820839",3172:"1cf55894",3308:"c46021cb",3507:"08669205",3786:"4c4e1a30",3813:"a8d55bef",3832:"f62b367a",3976:"0e384e19",4039:"2d327f77",4074:"d523083d",4372:"d4f5e55a",4594:"75ce1378",4809:"5327fe66",4874:"0b5c9aa2",4905:"06c10f24",5033:"7bf8dcd4",5051:"bc9808f4",5103:"a39fba33",5135:"10703425",5160:"88f14c76",5283:"adc51466",5336:"9495aadd",5465:"84b3b737",5577:"87b1afb5",5625:"1d798de6",5877:"ad2814c1",6024:"24a4b54e",6112:"1d907763",6128:"0f0db7fb",6146:"c44747b2",6225:"51ce7319",6295:"4427df9d",6327:"aeef22cf",6433:"849d26d9",6459:"8bf936e9",6509:"0f34283b",6543:"91e7212c",6650:"21af6041",6708:"cbc966c9",6772:"01c2b708",6803:"3b8c55ea",6806:"13103e8f",6856:"f43a06cf",6969:"14eb3368",7014:"ee622a22",7391:"c8e7e8ae",7403:"1ce714fa",7439:"641f1acd",7465:"5acd1b26",7656:"2c8f7a48",7924:"d589d3a7",7936:"4df0a92e",7950:"9a2f436b",8137:"a1c967c4",8227:"64ffb992",8333:"9a0423e2",8401:"17896441",8455:"c7e3f75d",8460:"6391bdf8",8470:"17e747e1",8581:"935f2afb",8714:"1be78505",8789:"ee6307a9",8802:"82dc478c",8891:"44d712d2",8909:"cc0a2bf3",9144:"ebe4a411",9210:"c5beed23",9364:"f8edec0b",9399:"15090fd5",9520:"50198c52",9613:"8db94953",9648:"d3c74fc5",9687:"6bf84c41",9701:"4f3d7ac0",9724:"37c80295",9868:"108bd459",9969:"4470520f",9984:"f4d79f1d"}[e]||e)+"."+{62:"d189551f",118:"2c07374b",143:"9de2d499",273:"df766cd7",293:"4216a237",559:"4b5b4ec8",608:"2dd3d1b4",611:"f0b6871a",667:"83b74314",1074:"3a0135c7",1100:"51eb8d59",1575:"bb7fd8ad",1774:"a5131fc5",1864:"0147a151",1876:"7232d46c",1947:"6eee324a",1962:"e1480210",2094:"ad466bd4",2130:"650d3fad",2139:"6afafc42",2201:"21288130",2204:"8f090f21",2223:"a39efe23",2233:"cec70fc5",2261:"5ecdebb0",2325:"1151fb9f",2359:"ae395a24",2387:"2e37bd22",2429:"4af40097",2605:"f302ff19",2666:"33eba79e",2748:"167c3625",2892:"0f57c115",3001:"f1c61302",3008:"4eb94a73",3052:"2112eef1",3080:"eb93e884",3172:"db4e4835",3308:"fc8da94f",3507:"d74760cf",3786:"cf457eff",3813:"3367ee5d",3832:"13b36cf2",3976:"45483e16",4039:"bc54e7e5",4074:"0f597ae3",4372:"d192616f",4594:"95c3c326",4809:"8f3a4fef",4874:"b31003dc",4905:"462d8892",5033:"c647ca22",5051:"b5ca9734",5103:"6a49d3fd",5135:"d4b55108",5160:"26662ecc",5283:"481170ab",5336:"9653b45b",5465:"77fb24e2",5577:"60571643",5625:"35329163",5877:"2c67b962",5921:"096ef65c",6024:"0babdac4",6112:"0a46c279",6128:"6f7ea153",6146:"8d80d36e",6225:"47a2ed7a",6295:"51f392b5",6327:"9b60988e",6433:"6b15f8a8",6459:"b3a15726",6509:"3e50e558",6543:"b967fd73",6650:"c43b0df6",6708:"457b6cef",6772:"33bd7e8e",6803:"b93a7aef",6806:"542252ca",6856:"7b24fca4",6969:"f2e4d6b7",7014:"b757d30a",7391:"9edcea09",7403:"366793ec",7439:"474baf8d",7465:"fe9c363f",7656:"9f369839",7924:"b45c91ca",7936:"1481148a",7950:"2c13772d",8137:"760b008a",8227:"cae93548",8333:"8cdd3d8b",8401:"92c0941f",8455:"ce0b5bd5",8460:"be2c55df",8470:"05ec140a",8581:"75e9f353",8714:"5485c13f",8789:"2bb949b5",8802:"f7525d08",8891:"d94afd56",8909:"0521e552",9144:"29a08e8c",9210:"27f57246",9364:"6c91bbb5",9399:"9c3f8e2b",9520:"03246e42",9613:"d7947308",9648:"b6197289",9687:"3db67a63",9701:"6e92bf9b",9724:"a19b2d93",9868:"b4a4de0c",9969:"d512076e",9984:"f8afe4a8"}[e]+".js",r.miniCssF=e=>{},r.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),r.o=(e,a)=>Object.prototype.hasOwnProperty.call(e,a),c={},d="esp-dash-docs:",r.l=(e,a,f,b)=>{if(c[e])c[e].push(a);else{var t,o;if(void 0!==f)for(var n=document.getElementsByTagName("script"),i=0;i{t.onerror=t.onload=null,clearTimeout(l);var d=c[e];if(delete c[e],t.parentNode&&t.parentNode.removeChild(t),d&&d.forEach((e=>e(f))),a)return a(f)},l=setTimeout(s.bind(null,void 0,{type:"timeout",target:t}),12e4);t.onerror=s.bind(null,t.onerror),t.onload=s.bind(null,t.onload),o&&document.head.appendChild(t)}},r.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.p="/",r.gca=function(e){return e={10703425:"5135",17896441:"8401",52044914:"1876","2ef5adfd":"62","94c292bb":"118","06221ea7":"143",c9c49941:"273","49146ea8":"293","2ad73175":"559",d97305fc:"608",e9355139:"611","71c6fff9":"667","8cdd9fb1":"1074","55c57bd6":"1100",a81a9ba7:"1575","6d50d705":"1864","601e692a":"1947","85d52a4f":"1962",b3915b8c:"2094","693a6f42":"2130","2a51f6ab":"2139","8248cc99":"2201",bff5c333:"2204",ea04d8aa:"2223","7642b827":"2233","2bf59882":"2261","5942c4f9":"2325","6944cb31":"2359","5c2cce4e":"2387","25bc9890":"2429",e5af0a5c:"2605","4649c564":"2666","9b8fe160":"2748","3fdbf2aa":"2892",a65c42af:"3001",af2b8099:"3008","652d9580":"3052",af820839:"3080","1cf55894":"3172",c46021cb:"3308","08669205":"3507","4c4e1a30":"3786",a8d55bef:"3813",f62b367a:"3832","0e384e19":"3976","2d327f77":"4039",d523083d:"4074",d4f5e55a:"4372","75ce1378":"4594","5327fe66":"4809","0b5c9aa2":"4874","06c10f24":"4905","7bf8dcd4":"5033",bc9808f4:"5051",a39fba33:"5103","88f14c76":"5160",adc51466:"5283","9495aadd":"5336","84b3b737":"5465","87b1afb5":"5577","1d798de6":"5625",ad2814c1:"5877","24a4b54e":"6024","1d907763":"6112","0f0db7fb":"6128",c44747b2:"6146","51ce7319":"6225","4427df9d":"6295",aeef22cf:"6327","849d26d9":"6433","8bf936e9":"6459","0f34283b":"6509","91e7212c":"6543","21af6041":"6650",cbc966c9:"6708","01c2b708":"6772","3b8c55ea":"6803","13103e8f":"6806",f43a06cf:"6856","14eb3368":"6969",ee622a22:"7014",c8e7e8ae:"7391","1ce714fa":"7403","641f1acd":"7439","5acd1b26":"7465","2c8f7a48":"7656",d589d3a7:"7924","4df0a92e":"7936","9a2f436b":"7950",a1c967c4:"8137","64ffb992":"8227","9a0423e2":"8333",c7e3f75d:"8455","6391bdf8":"8460","17e747e1":"8470","935f2afb":"8581","1be78505":"8714",ee6307a9:"8789","82dc478c":"8802","44d712d2":"8891",cc0a2bf3:"8909",ebe4a411:"9144",c5beed23:"9210",f8edec0b:"9364","15090fd5":"9399","50198c52":"9520","8db94953":"9613",d3c74fc5:"9648","6bf84c41":"9687","4f3d7ac0":"9701","37c80295":"9724","108bd459":"9868","4470520f":"9969",f4d79f1d:"9984"}[e]||e,r.p+r.u(e)},(()=>{var e={5354:0,1869:0};r.f.j=(a,f)=>{var c=r.o(e,a)?e[a]:void 0;if(0!==c)if(c)f.push(c[2]);else if(/^(1869|5354)$/.test(a))e[a]=0;else{var d=new Promise(((f,d)=>c=e[a]=[f,d]));f.push(c[2]=d);var b=r.p+r.u(a),t=new Error;r.l(b,(f=>{if(r.o(e,a)&&(0!==(c=e[a])&&(e[a]=void 0),c)){var d=f&&("load"===f.type?"missing":f.type),b=f&&f.target&&f.target.src;t.message="Loading chunk "+a+" failed.\n("+d+": "+b+")",t.name="ChunkLoadError",t.type=d,t.request=b,c[1](t)}}),"chunk-"+a,a)}},r.O.j=a=>0===e[a];var a=(a,f)=>{var c,d,b=f[0],t=f[1],o=f[2],n=0;if(b.some((a=>0!==e[a]))){for(c in t)r.o(t,c)&&(r.m[c]=t[c]);if(o)var i=o(r)}for(a&&a(f);n{"use strict";var e,a,f,c,d,b={},t={};function r(e){var a=t[e];if(void 0!==a)return a.exports;var f=t[e]={id:e,loaded:!1,exports:{}};return b[e].call(f.exports,f,f.exports,r),f.loaded=!0,f.exports}r.m=b,r.c=t,e=[],r.O=(a,f,c,d)=>{if(!f){var b=1/0;for(i=0;i=d)&&Object.keys(r.O).every((e=>r.O[e](f[o])))?f.splice(o--,1):(t=!1,d0&&e[i-1][2]>d;i--)e[i]=e[i-1];e[i]=[f,c,d]},r.n=e=>{var a=e&&e.__esModule?()=>e.default:()=>e;return r.d(a,{a:a}),a},f=Object.getPrototypeOf?e=>Object.getPrototypeOf(e):e=>e.__proto__,r.t=function(e,c){if(1&c&&(e=this(e)),8&c)return e;if("object"==typeof e&&e){if(4&c&&e.__esModule)return e;if(16&c&&"function"==typeof e.then)return e}var d=Object.create(null);r.r(d);var b={};a=a||[null,f({}),f([]),f(f)];for(var t=2&c&&e;"object"==typeof t&&!~a.indexOf(t);t=f(t))Object.getOwnPropertyNames(t).forEach((a=>b[a]=()=>e[a]));return b.default=()=>e,r.d(d,b),d},r.d=(e,a)=>{for(var f in a)r.o(a,f)&&!r.o(e,f)&&Object.defineProperty(e,f,{enumerable:!0,get:a[f]})},r.f={},r.e=e=>Promise.all(Object.keys(r.f).reduce(((a,f)=>(r.f[f](e,a),a)),[])),r.u=e=>"assets/js/"+({62:"2ef5adfd",118:"94c292bb",143:"06221ea7",273:"c9c49941",293:"49146ea8",559:"2ad73175",608:"d97305fc",611:"e9355139",667:"71c6fff9",1074:"8cdd9fb1",1100:"55c57bd6",1575:"a81a9ba7",1864:"6d50d705",1876:"52044914",1947:"601e692a",1962:"85d52a4f",2094:"b3915b8c",2130:"693a6f42",2139:"2a51f6ab",2201:"8248cc99",2204:"bff5c333",2223:"ea04d8aa",2233:"7642b827",2261:"2bf59882",2325:"5942c4f9",2359:"6944cb31",2387:"5c2cce4e",2429:"25bc9890",2605:"e5af0a5c",2666:"4649c564",2748:"9b8fe160",2892:"3fdbf2aa",3001:"a65c42af",3008:"af2b8099",3052:"652d9580",3080:"af820839",3172:"1cf55894",3308:"c46021cb",3507:"08669205",3786:"4c4e1a30",3813:"a8d55bef",3832:"f62b367a",3976:"0e384e19",4039:"2d327f77",4074:"d523083d",4372:"d4f5e55a",4594:"75ce1378",4809:"5327fe66",4874:"0b5c9aa2",4905:"06c10f24",5033:"7bf8dcd4",5051:"bc9808f4",5103:"a39fba33",5135:"10703425",5160:"88f14c76",5283:"adc51466",5336:"9495aadd",5465:"84b3b737",5577:"87b1afb5",5625:"1d798de6",5877:"ad2814c1",6024:"24a4b54e",6112:"1d907763",6128:"0f0db7fb",6146:"c44747b2",6225:"51ce7319",6295:"4427df9d",6327:"aeef22cf",6433:"849d26d9",6459:"8bf936e9",6509:"0f34283b",6543:"91e7212c",6650:"21af6041",6708:"cbc966c9",6772:"01c2b708",6803:"3b8c55ea",6806:"13103e8f",6856:"f43a06cf",6969:"14eb3368",7014:"ee622a22",7391:"c8e7e8ae",7403:"1ce714fa",7439:"641f1acd",7465:"5acd1b26",7656:"2c8f7a48",7924:"d589d3a7",7936:"4df0a92e",7950:"9a2f436b",8137:"a1c967c4",8227:"64ffb992",8333:"9a0423e2",8401:"17896441",8455:"c7e3f75d",8460:"6391bdf8",8470:"17e747e1",8581:"935f2afb",8714:"1be78505",8789:"ee6307a9",8802:"82dc478c",8891:"44d712d2",8909:"cc0a2bf3",9144:"ebe4a411",9210:"c5beed23",9364:"f8edec0b",9399:"15090fd5",9520:"50198c52",9613:"8db94953",9648:"d3c74fc5",9687:"6bf84c41",9701:"4f3d7ac0",9724:"37c80295",9868:"108bd459",9969:"4470520f",9984:"f4d79f1d"}[e]||e)+"."+{62:"d189551f",118:"2c07374b",143:"9de2d499",273:"df766cd7",293:"4216a237",559:"4b5b4ec8",608:"2dd3d1b4",611:"f0b6871a",667:"83b74314",1074:"3a0135c7",1100:"51eb8d59",1575:"bb7fd8ad",1774:"a5131fc5",1864:"0147a151",1876:"7232d46c",1947:"6eee324a",1962:"e1480210",2094:"ad466bd4",2130:"650d3fad",2139:"6afafc42",2201:"21288130",2204:"8f090f21",2223:"a39efe23",2233:"cec70fc5",2261:"5ecdebb0",2325:"1151fb9f",2359:"ae395a24",2387:"2e37bd22",2429:"4af40097",2605:"f302ff19",2666:"33eba79e",2748:"167c3625",2892:"0f57c115",3001:"f1c61302",3008:"4eb94a73",3052:"2112eef1",3080:"eb93e884",3172:"db4e4835",3308:"fc8da94f",3507:"d74760cf",3786:"cf457eff",3813:"3367ee5d",3832:"13b36cf2",3976:"45483e16",4039:"bc54e7e5",4074:"0f597ae3",4372:"d192616f",4594:"95c3c326",4809:"8f3a4fef",4874:"b31003dc",4905:"462d8892",5033:"c647ca22",5051:"b5ca9734",5103:"6a49d3fd",5135:"d4b55108",5160:"26662ecc",5283:"481170ab",5336:"9653b45b",5465:"77fb24e2",5577:"60571643",5625:"35329163",5877:"2c67b962",5921:"096ef65c",6024:"0babdac4",6112:"0a46c279",6128:"6f7ea153",6146:"8d80d36e",6225:"47a2ed7a",6295:"51f392b5",6327:"9b60988e",6433:"6b15f8a8",6459:"b3a15726",6509:"3e50e558",6543:"b967fd73",6650:"c43b0df6",6708:"457b6cef",6772:"33bd7e8e",6803:"2bd62dd5",6806:"542252ca",6856:"7b24fca4",6969:"f2e4d6b7",7014:"b757d30a",7391:"9edcea09",7403:"366793ec",7439:"474baf8d",7465:"fe9c363f",7656:"37156bc3",7924:"b45c91ca",7936:"1481148a",7950:"2c13772d",8137:"760b008a",8227:"cae93548",8333:"8cdd3d8b",8401:"92c0941f",8455:"ce0b5bd5",8460:"be2c55df",8470:"05ec140a",8581:"75e9f353",8714:"5485c13f",8789:"2bb949b5",8802:"f7525d08",8891:"d94afd56",8909:"0521e552",9144:"29a08e8c",9210:"27f57246",9364:"6c91bbb5",9399:"9c3f8e2b",9520:"03246e42",9613:"d7947308",9648:"b6197289",9687:"3db67a63",9701:"6e92bf9b",9724:"a19b2d93",9868:"b4a4de0c",9969:"d512076e",9984:"f8afe4a8"}[e]+".js",r.miniCssF=e=>{},r.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),r.o=(e,a)=>Object.prototype.hasOwnProperty.call(e,a),c={},d="esp-dash-docs:",r.l=(e,a,f,b)=>{if(c[e])c[e].push(a);else{var t,o;if(void 0!==f)for(var n=document.getElementsByTagName("script"),i=0;i{t.onerror=t.onload=null,clearTimeout(l);var d=c[e];if(delete c[e],t.parentNode&&t.parentNode.removeChild(t),d&&d.forEach((e=>e(f))),a)return a(f)},l=setTimeout(s.bind(null,void 0,{type:"timeout",target:t}),12e4);t.onerror=s.bind(null,t.onerror),t.onload=s.bind(null,t.onload),o&&document.head.appendChild(t)}},r.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.p="/",r.gca=function(e){return e={10703425:"5135",17896441:"8401",52044914:"1876","2ef5adfd":"62","94c292bb":"118","06221ea7":"143",c9c49941:"273","49146ea8":"293","2ad73175":"559",d97305fc:"608",e9355139:"611","71c6fff9":"667","8cdd9fb1":"1074","55c57bd6":"1100",a81a9ba7:"1575","6d50d705":"1864","601e692a":"1947","85d52a4f":"1962",b3915b8c:"2094","693a6f42":"2130","2a51f6ab":"2139","8248cc99":"2201",bff5c333:"2204",ea04d8aa:"2223","7642b827":"2233","2bf59882":"2261","5942c4f9":"2325","6944cb31":"2359","5c2cce4e":"2387","25bc9890":"2429",e5af0a5c:"2605","4649c564":"2666","9b8fe160":"2748","3fdbf2aa":"2892",a65c42af:"3001",af2b8099:"3008","652d9580":"3052",af820839:"3080","1cf55894":"3172",c46021cb:"3308","08669205":"3507","4c4e1a30":"3786",a8d55bef:"3813",f62b367a:"3832","0e384e19":"3976","2d327f77":"4039",d523083d:"4074",d4f5e55a:"4372","75ce1378":"4594","5327fe66":"4809","0b5c9aa2":"4874","06c10f24":"4905","7bf8dcd4":"5033",bc9808f4:"5051",a39fba33:"5103","88f14c76":"5160",adc51466:"5283","9495aadd":"5336","84b3b737":"5465","87b1afb5":"5577","1d798de6":"5625",ad2814c1:"5877","24a4b54e":"6024","1d907763":"6112","0f0db7fb":"6128",c44747b2:"6146","51ce7319":"6225","4427df9d":"6295",aeef22cf:"6327","849d26d9":"6433","8bf936e9":"6459","0f34283b":"6509","91e7212c":"6543","21af6041":"6650",cbc966c9:"6708","01c2b708":"6772","3b8c55ea":"6803","13103e8f":"6806",f43a06cf:"6856","14eb3368":"6969",ee622a22:"7014",c8e7e8ae:"7391","1ce714fa":"7403","641f1acd":"7439","5acd1b26":"7465","2c8f7a48":"7656",d589d3a7:"7924","4df0a92e":"7936","9a2f436b":"7950",a1c967c4:"8137","64ffb992":"8227","9a0423e2":"8333",c7e3f75d:"8455","6391bdf8":"8460","17e747e1":"8470","935f2afb":"8581","1be78505":"8714",ee6307a9:"8789","82dc478c":"8802","44d712d2":"8891",cc0a2bf3:"8909",ebe4a411:"9144",c5beed23:"9210",f8edec0b:"9364","15090fd5":"9399","50198c52":"9520","8db94953":"9613",d3c74fc5:"9648","6bf84c41":"9687","4f3d7ac0":"9701","37c80295":"9724","108bd459":"9868","4470520f":"9969",f4d79f1d:"9984"}[e]||e,r.p+r.u(e)},(()=>{var e={5354:0,1869:0};r.f.j=(a,f)=>{var c=r.o(e,a)?e[a]:void 0;if(0!==c)if(c)f.push(c[2]);else if(/^(1869|5354)$/.test(a))e[a]=0;else{var d=new Promise(((f,d)=>c=e[a]=[f,d]));f.push(c[2]=d);var b=r.p+r.u(a),t=new Error;r.l(b,(f=>{if(r.o(e,a)&&(0!==(c=e[a])&&(e[a]=void 0),c)){var d=f&&("load"===f.type?"missing":f.type),b=f&&f.target&&f.target.src;t.message="Loading chunk "+a+" failed.\n("+d+": "+b+")",t.name="ChunkLoadError",t.type=d,t.request=b,c[1](t)}}),"chunk-"+a,a)}},r.O.j=a=>0===e[a];var a=(a,f)=>{var c,d,b=f[0],t=f[1],o=f[2],n=0;if(b.some((a=>0!==e[a]))){for(c in t)r.o(t,c)&&(r.m[c]=t[c]);if(o)var i=o(r)}for(a&&a(f);n - +
Version: v4.x.x

Commercial License

ESP-DASH Lite (open-source version) and ESP-DASH Pro are two different versions of the same realtime dashboard library, each with its own set of features and licensing terms. Here's a comparison between ESP-DASH Lite, which is open-source and GPL-3.0 based, and ESP-DASH Pro:

  1. Licensing:

    • ESP-DASH Lite: This version is open-source and released under the GPL-3.0 license. It means that it's freely available for anyone to use, modify, and distribute. However, if you use ESP-DASH Lite in a commercial product, the GPL-3.0 license requires you to make the source code of your product, including any modifications to ESP-DASH Lite, available to the public.

    • ESP-DASH Pro: This version is offered under a one-time charge for a commercial license. It allows you to use ESP-DASH Pro in a commercial product without the requirement to open-source your proprietary code. The commercial license provides more flexibility and protection for businesses.

  2. Support:

    • ESP-DASH Lite: Support for ESP-DASH Lite is typically community-driven. You may find help through online forums, documentation, or user-contributed resources. However, professional support may be limited.

    • ESP-DASH Pro: ESP-DASH Pro includes dedicated support and assistance. This can be essential for businesses that require timely and reliable support to ensure their application runs smoothly.

In summary, the choice between ESP-DASH Lite and ESP-DASH Pro depends on your specific needs and the nature of your project:

  • If you are working on an open-source project or have no concerns about the GPL-3.0 license's requirements and need basic dashboard functionality, ESP-DASH Lite is a viable choice.

  • If you are developing a commercial product, ESP-DASH Pro provides a more comprehensive and professionally supported solution while allowing you to maintain the proprietary nature of your code. However, it comes with a one-time commercial licensing fee.

You can get ESP-DASH Pro via the official product page at: https://espdash.pro

- + \ No newline at end of file diff --git a/concept/index.html b/concept/index.html index 75b4299b..670e4f43 100644 --- a/concept/index.html +++ b/concept/index.html @@ -7,13 +7,13 @@ - +
Version: v4.x.x

Concept of DASH

In this article, we are going to look at how the internals of ESP-DASH are stacked up, as well as understand the how everything works with eachother inside the library.

Note: If you looking to get started with ESP-DASH quickly, you can skip this article.

Concept Diagram

DASH contains the following classes which you will use in your application:

  • Networking Class (ESPDash.h)
  • Card Class (Card.h)
  • Chart Class (Chart.h)
  • Statistic Class (Statistic.h)
  • Tab Class (Tab.h) ( Pro Version Only )

The whole idea of ESP-DASH is to make a complete dashboard by using data classes ( as shown in figure above ). The data classes connect with ESP-DASH main class using pointers which handles all the networking and relays realtime updates to the open dashboards.

Let's understand the purpose of each class:

1. Networking Class (ESPDash.h)​

The networking class handles all the networking stuff including serving the DASH webpage from program memory of the microcontroller and also to maintain the WebSocket connection with every connected client. Apart from networking, with the release of V4, you can now also configure the webpage according to your application. This includes changing page title, logo etc. ( Go to "Extra Features" to know more ).

2. Card Class (Card.h)​

The card class is a data storage class in ESP-DASH which is used to create various types of cards on the dashboard. The only purpose of this class is to store the data + configuration in stack or heap depending on your use case and to keep track of the changes in data for realtime updates.

3. Chart Class (Chart.h)​

The chart class is an data storage class which is used to store the X & Y axis arrays to create various types of charts on the dashboard. This class is a bit different from "card" class as to keep the memory footprint low, it doesn't stores the data in the class itself. Instead it smartly stores the pointer to arrays so that data can be read on demand without actually copying all the array in the memory.

Note: If you are migrating from V3, Please look at the migration guide to know more.

4. Statistic Class (Statistic.h)​

The statistic class is used to create custom user defined statistics which will be displayed in the statistics page. Statistics in ESP-DASH's sense are simple key-value pairs which you can send to dashboard to report small but useful data.

5. Tab Class (Tab.h) ( Pro )​

The tab class in DASH Pro is also an data class which is used to create multiple pages. Therefore, you are now not limited to the "Overview" page and can create multiple pages to host different cards & charts.

- + \ No newline at end of file diff --git a/features/authentication/index.html b/features/authentication/index.html index 51a5a05a..efd024cb 100644 --- a/features/authentication/index.html +++ b/features/authentication/index.html @@ -7,13 +7,13 @@ - +
Version: v4.x.x

User Authentication

Energy Card Preview

ESP-DASH comes with basic HTTP authentication support. You can enable basic HTTP based user authentication to control who can view your dashboard using setAuthentication function.

Example:​

dashboard.setAuthentication("username", "password");
- + \ No newline at end of file diff --git a/features/brotli-compression/index.html b/features/brotli-compression/index.html index e6721e0e..06dbdfdd 100644 --- a/features/brotli-compression/index.html +++ b/features/brotli-compression/index.html @@ -7,13 +7,13 @@ - +
Version: v4.x.x

Brotli Compression

Pro Feature

This is an exclusive feature of DASH Pro. Check it out here.


Preview

With ESP-DASH Pro v4.3.0 or more, there is an option to enable Brotli compression to further reduce the size of webpage (dashboard) and provide you more space for your code. We've noticed 40% extra reduction in size over gzip compression (default).

Please note that Brotli compression is only supported by Safari browser with unencrpyted HTTP protocol. Due to constraints set by other browsers ( Chrome, Edge, Firefox etc. ) you need to use HTTPS for brotli compression to work properly.

Note: Broti compression is disabled by default. It's up to user to enable brotli if the above conditions are fine for your use-case.

How to enable:​

You can switch to brotli compression by setting DASH_USE_BROTLI_COMPRESSION to 1 in dash_webpage.h.

  1. Open dash_webpage.h in src directory of ESP-DASH Pro library.
  2. Locate DASH_USE_BROTLI_COMPRESSION
  3. Set it to 1
  4. That's it. Save, compile and upload again to your microcontroller.
- + \ No newline at end of file diff --git a/features/chartanimations/index.html b/features/chartanimations/index.html index 181cfb6a..02d0dfb8 100644 --- a/features/chartanimations/index.html +++ b/features/chartanimations/index.html @@ -7,13 +7,13 @@ - +
Version: v4.x.x

Toggle Animation

Pro Feature

This is an exclusive feature of DASH Pro. Check it out here.


You can enable/disable chart animations with ease using the setChartAnimations function of ESPDash class. This is particularly helpful if you are updating your charts at an very fast pace.

Note: Chart animations are enabled by default.

Usage:​

You can put this function anywhere in your setup block:

To Disble:​
dashboard.setChartAnimations(false); // Disable Chart Animations
To Enable:​
dashboard.setChartAnimations(true); // Enable Chart Animations
- + \ No newline at end of file diff --git a/features/custom-logo/index.html b/features/custom-logo/index.html index 38528134..454cd00e 100644 --- a/features/custom-logo/index.html +++ b/features/custom-logo/index.html @@ -7,13 +7,13 @@ - +
Version: v4.x.x

Custom Logo

Pro Feature

This is an exclusive feature of DASH Pro. Check it out here.


Logo Preview

Your ESP-DASH dashboard's sidebar contains the spot which can be updated to add your own company/product logo. This enables you with complete customization and maintains your brand value among customers.

The logo used in ESP-DASH is image file converted to byte array. We'll go through the process below:

What you'll need​

  • You'll need a compatible logo image ( jpeg / png / gif / tif etc. ) or an SVG file ( recommended due to small file size ). Important: Please make sure your image is optimized and small in file size.
  • Know the MIME file type of your image. You can use HTTPStrip's mime utility.

Step 1: Procedure to convert logo into byte array​

  1. Go to File2Raw Utility ( I created this utility a few years back for the purpose of converting files into byte array for C++ applications ).
  2. Select your logo.
  3. Select "Gzip Compress" & "Use PROGMEM (Arduino)".
  4. Click "Convert".

Step 2: Setting custom logo in sketch​

Now once your custom logo has been prepared, let's set it in your ESP-DASH Pro library:

  1. Go to logo.h
  2. Set DASH_LOGO_MIME to your image file type. To find your file's mime type, use this utility: https://www.htmlstrip.com/mime-file-type-checker
  3. Set DASH_LOGO_WIDTH & DASH_LOGO_HEIGHT according to your desired size which will be displayed on the webpage.
  4. Replace the array length of DASH_LOGO with the newly generated array length.
  5. Now open logo.cpp
  6. Replace the data inside DASH_LOGO with new data generated just before using File2Raw.
- + \ No newline at end of file diff --git a/features/custom-uri/index.html b/features/custom-uri/index.html index bde76e81..608a459c 100644 --- a/features/custom-uri/index.html +++ b/features/custom-uri/index.html @@ -7,13 +7,13 @@ - +
Version: v4.x.x

Custom URI

If you want to serve ESPDash at a path other than 'root' (ie. http://<Your IP>/) then you can use the constructor to supply the path of your choice.

Example:​

ESPDash dashboard(&server, "/dash");

This will result in ESPDash being served at http://<Your IP>/dash.

- + \ No newline at end of file diff --git a/features/disable-stats/index.html b/features/disable-stats/index.html index 0b586e50..e4d16fa0 100644 --- a/features/disable-stats/index.html +++ b/features/disable-stats/index.html @@ -7,13 +7,13 @@ - +
Version: v4.x.x

Disable Statistics

You can disable system statistics by using setting false in ESPDash class constructor.

Example:​

If no custom URI is defined (second parameter):​

ESPDash dashboard(&server, false);

If using a using custom URI (third parameter):​

ESPDash dashbord(&server, "/", false);

If you would like to completely disable and hide the statistics tab from the sidebar, please use the above example and make sure you don't have any custom statistics. By doing so, it will automatically hide the "statistics" tab from sidebar.

- + \ No newline at end of file diff --git a/features/indexing/index.html b/features/indexing/index.html index 363bd1e0..add28ac8 100644 --- a/features/indexing/index.html +++ b/features/indexing/index.html @@ -7,13 +7,13 @@ - +
Version: v4.x.x

Card Indexing

Pro Feature

This is an exclusive feature of DASH Pro. Check it out here.


Energy Card Preview

ESP-DASH Pro provides you with a setIndex function in both cards and charts to modify the position of them on the dashboard.

Example:​

card1.setIndex(0);

Indexing works in ascending format. The lowest card index will be placed in the front of the list and the highest index will be put in the end. It allows you to set the layout according to your wish.

- + \ No newline at end of file diff --git a/features/sizing/index.html b/features/sizing/index.html index b65be555..d196769d 100644 --- a/features/sizing/index.html +++ b/features/sizing/index.html @@ -7,13 +7,13 @@ - +
Version: v4.x.x

Custom Card Size

Pro Feature

This is an exclusive feature of DASH Pro. Check it out here.


Energy Card Preview

ESP-DASH Pro allows you to change the size of your cards & charts by providing you the setSize function. This function allows you to set a responsive width for your widgets without actually modifying the whole webpage.

Reference​

Card sizing consists of breakpoints for an responsive layout that scales up or down to every screen size. The valid value for each breakpoint is 1 to 12.

To understand better, the breakpoints are as follows:

  • xs - Small Smartphone
  • sm - Normal Smartphone
  • md - Tablet
  • lg - HD laptop
  • xl - Full HD laptop
  • xxl - 2K display and above
Option 1:​
  // This reference can be found in Card.h
  void setSize(const uint8_t xs, const uint8_t sm, const uint8_t md, const uint8_t lg, const uint8_t xl, const uint8_t xxl);
Option 2:​
  // These references can be found in Card.h
  struct CardSize {
    uint8_t xs;
    uint8_t sm;
    uint8_t md;
    uint8_t lg;
    uint8_t xl;
    uint8_t xxl;
  };

  void setSize(const CardSize &size);

Example​

Option 1:​
card1.setSize(12, 12, 6, 4, 3, 2);
Option 2:​
card1.setSize({
  .xs = 12,
  .sm = 12,
  .md = 6,
  .lg = 4,
  .xl = 3,
  .xxl = 2
});
- + \ No newline at end of file diff --git a/features/title/index.html b/features/title/index.html index 75a598e4..de230bec 100644 --- a/features/title/index.html +++ b/features/title/index.html @@ -7,13 +7,13 @@ - +
Version: v4.x.x

Custom Title

Pro Feature

This is an exclusive feature of DASH Pro. Check it out here.


Energy Card Preview

ESP-DASH Pro provides you with a setTitle function in the main ESPDash class. You can use this function to change the default title of your dashboard.

Example:​

dashboard.setTitle("New Dashboard XYZ");
- + \ No newline at end of file diff --git a/features/toggle-display/index.html b/features/toggle-display/index.html index f29b92db..95b88b52 100644 --- a/features/toggle-display/index.html +++ b/features/toggle-display/index.html @@ -7,13 +7,13 @@ - +
Version: v4.x.x

Toggle Display

Pro Feature

This is an exclusive feature of DASH Pro. Check it out here.


You can quickly show or hide widgets (cards, charts, tabs and statistics) using the setDisplay function. Use it to show or hide stuff on your dashboard when it's required. Possibilities are endless with this function and makes the dashboard truly customizable.

note

All widgets are displayed by default.

Usage​

You can put this function anywhere in your setup block:

To Hide Widget​
card1.setDisplay(false); // Hide your card

OR

chart1.setDisplay(false); // Hide your chart

OR

tab1.setDisplay(false); // Hide your tab

OR

stat1.setDisplay(false); // Hide your statistic
To Show Widget​
card1.setDisplay(true); // Show your card

OR

chart1.setDisplay(true); // Show your chart

OR

tab1.setDisplay(true); // Show your tab

OR

stat1.setDisplay(true); // Show your statistic
- + \ No newline at end of file diff --git a/getting-started/index.html b/getting-started/index.html index c6642877..373cf764 100644 --- a/getting-started/index.html +++ b/getting-started/index.html @@ -7,13 +7,13 @@ - +
Version: v4.x.x

Getting Started

To get started with ESP-DASH, we will be creating our basic example step by step and learn what each setup does:


Part 1: Include Dependencies​

We have used conditional compilation in this part therefore the code will work for both ESP8266 & ESP32.

#include <Arduino.h>
#if defined(ESP8266)
  /* ESP8266 Dependencies */
  #include <ESP8266WiFi.h>
  #include <ESPAsyncTCP.h>
  #include <ESPAsyncWebServer.h>
#elif defined(ESP32)
  /* ESP32 Dependencies */
  #include <WiFi.h>
  #include <AsyncTCP.h>
  #include <ESPAsyncWebServer.h>
#endif
#include <ESPDash.h>

Part 2: Create AsyncWebServer Instance​

Create an AsyncWebServer instance on default "80" port.

Note: You are not restricted to a single dashboard. You can host as many dashboards as you want on multiple ports.

/* Start Webserver */
AsyncWebServer server(80);

Part 3: Attach ESP-DASH Instance​

Pass the AsyncWebServer instance to ESPDash's instance. Internally the ESPDash will hook to AsyncWebServer for handling all the networking tasks.

Note: You can still use the same AsyncWebServer instance for other tasks.

/* Attach ESP-DASH to AsyncWebServer */
ESPDash dashboard(&server);

Part 4: Create Cards​

In this step, we will creating ESP-DASH cards and passing our dasboard instance as a first argument so that they can add / remove themselves.

After we are done with this guide, Please take a look at Cards section to know more about the types of cards available to us.

/* 
  Dashboard Cards 
  Format - (Dashboard Instance, Card Type, Card Name, Card Symbol(optional) )
*/
Card temperature(&dashboard, TEMPERATURE_CARD, "Temperature", "°C");
Card humidity(&dashboard, HUMIDITY_CARD, "Humidity", "%");

Part 5: Setup Block​

In our setup block, we will be adding the usual WiFi connectivity stuff and then start our AsyncWebServer with server.begin();.

void setup() {
  Serial.begin(115200);

  /* Connect WiFi */
  WiFi.mode(WIFI_STA);
  WiFi.begin("ssid", "password");
  if (WiFi.waitForConnectResult() != WL_CONNECTED) {
      Serial.printf("WiFi Failed!\n");
      return;
  }
  Serial.print("IP Address: ");
  Serial.println(WiFi.localIP());

  /* Start AsyncWebServer */
  server.begin();
}

Part 5: Loop Block​

In our loop block, we will be doing 2 things:

  1. Updating card values
  2. Sending updates to our dashboard
1. Updating Card Values​

Remember the 'Cards' we created in 4th part? We will now access those cards by their variable and update them using the update function which is provided with our card's class:

temperature.update((int)random(0, 50));
2. Sending updates to our Dashboard​

Once we have updated values of our card(s), we will call the sendUpdates() function of our dashboard instance and it will send new card values to every connected client in real time.

dashboard.sendUpdates();

Technically speaking, You can call these functions anywhere in your sketch, but for demonstration purposes we have called them in our loop block.

Complete Loop Block:​
void loop() {
  /* Update Card Values */
  temperature.update((int)random(0, 50));
  humidity.update((int)random(0, 100));

  /* Send Updates to our Dashboard (realtime) */
  dashboard.sendUpdates();

  /* 
    Delay is just for demonstration purposes in this example,
    Replace this code with 'millis interval' in your final project.
  */
  delay(3000);
}

Final Code​

That's it! Now we can just upload this sketch to our MCU and access the dashboard via it's IP address. ( Make sure to change the ssid and password in our sketch according to your Access Point )

/*
  -----------------------
  ESPDASH - Basic Example
  -----------------------

  Skill Level: Intermediate

  In this example we will be creating a basic dashboard which consists 
  of some cards and then update them in realtime ( at 3s interval ).

  Github: https://github.com/ayushsharma82/ESP-DASH
  WiKi: https://ayushsharma82.github.io/ESP-DASH/

  Works with both ESP8266 & ESP32
*/

#include <Arduino.h>
#if defined(ESP8266)
  /* ESP8266 Dependencies */
  #include <ESP8266WiFi.h>
  #include <ESPAsyncTCP.h>
  #include <ESPAsyncWebServer.h>
#elif defined(ESP32)
  /* ESP32 Dependencies */
  #include <WiFi.h>
  #include <AsyncTCP.h>
  #include <ESPAsyncWebServer.h>
#endif
#include <ESPDash.h>


/* Your WiFi Credentials */
const char* ssid = ""; // SSID
const char* password = ""; // Password

/* Start Webserver */
AsyncWebServer server(80);

/* Attach ESP-DASH to AsyncWebServer */
ESPDash dashboard(&server); 

/* 
  Dashboard Cards 
  Format - (Dashboard Instance, Card Type, Card Name, Card Symbol(optional) )
*/
Card temperature(&dashboard, TEMPERATURE_CARD, "Temperature", "°C");
Card humidity(&dashboard, HUMIDITY_CARD, "Humidity", "%");


void setup() {
  Serial.begin(115200);

  /* Connect WiFi */
  WiFi.mode(WIFI_STA);
  WiFi.begin(ssid, password);
  if (WiFi.waitForConnectResult() != WL_CONNECTED) {
      Serial.printf("WiFi Failed!\n");
      return;
  }
  Serial.print("IP Address: ");
  Serial.println(WiFi.localIP());

  /* Start AsyncWebServer */
  server.begin();
}

void loop() {
  /* Update Card Values */
  temperature.update((int)random(0, 50));
  humidity.update((int)random(0, 100));

  /* Send Updates to our Dashboard (realtime) */
  dashboard.sendUpdates();

  /* 
    Delay is just for demonstration purposes in this example,
    Replace this code with 'millis interval' in your final project.
  */
  delay(3000);
}
- + \ No newline at end of file diff --git a/index.html b/index.html index f771060a..39d8981e 100644 --- a/index.html +++ b/index.html @@ -7,13 +7,13 @@ - +
Version: v4.x.x



   


So as many would ask, what is ESP-DASH? In simple words - It's a UI library for ESP32 & ESP8266 microcontrollers that let you generate a fully capable dashboard. It can moulded in any way possible to suit your application needs.

Here are a few things by which you benefit by using ESP-DASH in your project:

  • 🔥 Automatic webpage generation.
  • ⏱️ Realtime updates to all connected clients.
  • 🎷 No need to learn HTML/CSS/JS. ESP-DASH provides you with a C++ interface.
  • 🛫 Ready to use components for your data.
  • 🏀 It's dynamic! Add or remove components anytime from the webpage.
  • 📈 Inbuilt charts support.

Note: This documentation serves both the versions of ESP-DASH ( Lite - Open Source and Pro ). Therefore, if you notice "(Pro)" mentioned on any of the features in the documentation, that means it is only available in ESP-DASH Pro.

Preview:​

- + \ No newline at end of file diff --git a/installation/index.html b/installation/index.html index 59ce70dd..ddc7b3c3 100644 --- a/installation/index.html +++ b/installation/index.html @@ -7,13 +7,13 @@ - +
-
Version: v4.x.x

Installation

This document explains the installation procedure for getting started with ESP-DASH.

Dependencies​

ESP-DASH depends on the following libraries present in your libraries folder. Please stricly install the compatible versions of these dependencies only! Using any other version might break ESP-DASH or may cause ESP-DASH to work partially.

Note on Dependencies

As of v4.0.4, ESP-DASH has officially switched to using fork of ESPAsyncWebServer and its dependencies from @mathieucarbou. This fork of ESPAsyncWebServer is being maintained regularly and contains many bug fixes along with arduino-esp32 core v3 support.

It's suggested to migrate all your projects to using this fork as the original me-no-dev/ESPAsyncWebServer repo is not being maintained since years.

For ESP8266​

For ESP32​

Installing ESP-DASH​

1. Directly Through Arduino IDE - Library Manager​

Go to Sketch > Include Library > Library Manager > Search for "ESP-DASH" > Install

2. Manual Install​

For Windows​
  • Download the Repository
  • Extract the .zip in Documents > Arduino > Libraries > {Place "ESP-DASH" folder Here}
For Linux​
  • Download the Repository
  • Extract the .zip in Sketchbook > Libraries > {Place "ESP-DASH" folder Here}

3. Import through Arduino IDE​

  • Download the Repository
  • Go to Sketch > Include Library > Add .zip Library > Select the Downloaded .zip File.
- +
Version: v4.x.x

Installation

This document explains the installation procedure for getting started with ESP-DASH.

Dependencies​

ESP-DASH depends on the following libraries present in your libraries folder. Please stricly install the compatible versions of these dependencies only! Using any other version might break ESP-DASH or may cause ESP-DASH to work partially.

Note on Dependencies

As of v4.0.4, ESP-DASH has officially switched to using fork of ESPAsyncWebServer and its dependencies from @mathieucarbou. This fork of ESPAsyncWebServer is being maintained regularly and contains many bug fixes along with arduino-esp32 core v3 support.

It's suggested to migrate all your projects to using this fork as the original me-no-dev/ESPAsyncWebServer repo is not being maintained since years.

For ESP8266​

For ESP32​

Installing ESP-DASH​

1. Directly Through Arduino IDE - Library Manager​

Go to Sketch > Include Library > Library Manager > Search for "ESP-DASH" > Install

2. Manual Install​

For Windows​
  • Download the Repository
  • Extract the .zip in Documents > Arduino > Libraries > {Place "ESP-DASH" folder Here}
For Linux​
  • Download the Repository
  • Extract the .zip in Sketchbook > Libraries > {Place "ESP-DASH" folder Here}

3. Import through Arduino IDE​

  • Download the Repository
  • Go to Sketch > Include Library > Add .zip Library > Select the Downloaded .zip File.
+ \ No newline at end of file diff --git a/migrate/index.html b/migrate/index.html index 927f3d50..0f3dacd9 100644 --- a/migrate/index.html +++ b/migrate/index.html @@ -7,13 +7,13 @@ - +
Version: v4.x.x

Migration Guide

Note: If you are currently using ESP-DASH V3 or ESP-DASH Pro ( previous releases <= v4.0.8 ), then this article is for you.

This article will cover all the minor and breaking changing which come as part of switching your existing codebase to ESP-DASH V4. DASH V4 was made with backwards compatibility in mind therefore there are not many changes to the existing functionality, which means you can get started using it in a few minutes!:

⚠️ Minor Changes:​

  • The second argument of ESPDash Class constructor now only disables system statistics. ESPDash(AsyncWebServer* server, bool enable_default_stats = true);. The statistics tab now gets automatically hidden when there are no custom stats added by user and when default (system) statistics are disabled as well.

  • The sendUpdates(bool force); function now has a force argument which can be used to force refresh the whole layout on connected dashboards.

⚒️ Breaking Changes:​

Button Callback​

The button callback now gets called with a int rather than bool which lead to issues. The value returned by callback will be 1 or 0.

// New Button Callback
button.attachCallback([&](int value){
  button.update(value);
  dashboard.sendUpdates();
});

Charts​

There is a major overhaul inside the library for the charts functionality to improve reliability of host microcontroller.

Previously, ESP-DASH would copy the whole X & Y axis array into SRAM of your ESP8266/ESP32 microcontroller, which was fine for smaller arrays but quickly led to crashes whenever somebody tried to use a large dataset.

With V4, the library only keeps the pointer to the dataset which will be used for the charts. This in return lets you use a large array for charts without memory hogging the microcontroller! :D

As part of this critical fix, now you need to keep the dataset ( X & Y axis ) arrays into the global scope all the time and then provide a reference of these array to the library along with it's size. The only thing which you need to change is that if you were creating a array into heap, ( i.e inside a function ) now you need to shift it into global scope. Carefully study the following reference: Benchmark Example

- + \ No newline at end of file diff --git a/more-examples/index.html b/more-examples/index.html index a3815609..01a3ef6e 100644 --- a/more-examples/index.html +++ b/more-examples/index.html @@ -7,13 +7,13 @@ - +
Version: v4.x.x

Examples

There are many example sketches in our repository. You can check those out to know more about what you can do with ESP-DASH. We have contructed every example with very clear documentation so there is less obstruction in your learning process.

You can find those examples in the repository.

- + \ No newline at end of file diff --git a/next/commercial-license/index.html b/next/commercial-license/index.html index d577ddfd..8e7fb316 100644 --- a/next/commercial-license/index.html +++ b/next/commercial-license/index.html @@ -7,13 +7,13 @@ - +
Version: Next

Commercial License

ESP-DASH Lite (open-source version) and ESP-DASH Pro are two different versions of the same realtime dashboard library, each with its own set of features and licensing terms. Here's a comparison between ESP-DASH Lite, which is open-source and GPL-3.0 based, and ESP-DASH Pro:

  1. Licensing:

    • ESP-DASH Lite: This version is open-source and released under the GPL-3.0 license. It means that it's freely available for anyone to use, modify, and distribute. However, if you use ESP-DASH Lite in a commercial product, the GPL-3.0 license requires you to make the source code of your product, including any modifications to ESP-DASH Lite, available to the public.

    • ESP-DASH Pro: This version is offered under a one-time charge for a commercial license. It allows you to use ESP-DASH Pro in a commercial product without the requirement to open-source your proprietary code. The commercial license provides more flexibility and protection for businesses.

  2. Support:

    • ESP-DASH Lite: Support for ESP-DASH Lite is typically community-driven. You may find help through online forums, documentation, or user-contributed resources. However, professional support may be limited.

    • ESP-DASH Pro: ESP-DASH Pro includes dedicated support and assistance. This can be essential for businesses that require timely and reliable support to ensure their application runs smoothly.

In summary, the choice between ESP-DASH Lite and ESP-DASH Pro depends on your specific needs and the nature of your project:

  • If you are working on an open-source project or have no concerns about the GPL-3.0 license's requirements and need basic dashboard functionality, ESP-DASH Lite is a viable choice.

  • If you are developing a commercial product, ESP-DASH Pro provides a more comprehensive and professionally supported solution while allowing you to maintain the proprietary nature of your code. However, it comes with a one-time commercial licensing fee.

You can get ESP-DASH Pro via the official product page at: https://espdash.pro

- + \ No newline at end of file diff --git a/next/concept/index.html b/next/concept/index.html index 2572af95..7292330b 100644 --- a/next/concept/index.html +++ b/next/concept/index.html @@ -7,13 +7,13 @@ - +
Version: Next

Concept of DASH

In this article, we are going to look at how the internals of ESP-DASH are stacked up, as well as understand the how everything works with eachother inside the library.

Note: If you looking to get started with ESP-DASH quickly, you can skip this article.

Concept Diagram

DASH contains the following classes which you will use in your application:

  • Networking Class (ESPDash.h)
  • Card Class (Card.h)
  • Chart Class (Chart.h)
  • Statistic Class (Statistic.h)
  • Tab Class (Tab.h) ( Pro Version Only )

The whole idea of ESP-DASH is to make a complete dashboard by using data classes ( as shown in figure above ). The data classes connect with ESP-DASH main class using pointers which handles all the networking and relays realtime updates to the open dashboards.

Let's understand the purpose of each class:

1. Networking Class (ESPDash.h)​

The networking class handles all the networking stuff including serving the DASH webpage from program memory of the microcontroller and also to maintain the WebSocket connection with every connected client. Apart from networking, with the release of V4, you can now also configure the webpage according to your application. This includes changing page title, logo etc. ( Go to "Extra Features" to know more ).

2. Card Class (Card.h)​

The card class is a data storage class in ESP-DASH which is used to create various types of cards on the dashboard. The only purpose of this class is to store the data + configuration in stack or heap depending on your use case and to keep track of the changes in data for realtime updates.

3. Chart Class (Chart.h)​

The chart class is an data storage class which is used to store the X & Y axis arrays to create various types of charts on the dashboard. This class is a bit different from "card" class as to keep the memory footprint low, it doesn't stores the data in the class itself. Instead it smartly stores the pointer to arrays so that data can be read on demand without actually copying all the array in the memory.

Note: If you are migrating from V3, Please look at the migration guide to know more.

4. Statistic Class (Statistic.h)​

The statistic class is used to create custom user defined statistics which will be displayed in the statistics page. Statistics in ESP-DASH's sense are simple key-value pairs which you can send to dashboard to report small but useful data.

5. Tab Class (Tab.h) ( Pro )​

The tab class in DASH Pro is also an data class which is used to create multiple pages. Therefore, you are now not limited to the "Overview" page and can create multiple pages to host different cards & charts.

- + \ No newline at end of file diff --git a/next/features/authentication/index.html b/next/features/authentication/index.html index 9063df86..a1829a04 100644 --- a/next/features/authentication/index.html +++ b/next/features/authentication/index.html @@ -7,13 +7,13 @@ - +
Version: Next

User Authentication

Energy Card Preview

ESP-DASH comes with basic HTTP authentication support. You can enable basic HTTP based user authentication to control who can view your dashboard using setAuthentication function.

Example:​

dashboard.setAuthentication("username", "password");
- + \ No newline at end of file diff --git a/next/features/brotli-compression/index.html b/next/features/brotli-compression/index.html index 9ba5221d..41268870 100644 --- a/next/features/brotli-compression/index.html +++ b/next/features/brotli-compression/index.html @@ -7,13 +7,13 @@ - +
Version: Next

Brotli Compression

Pro Feature

This is an exclusive feature of DASH Pro. Check it out here.


Preview

With ESP-DASH Pro v4.3.0 or more, there is an option to enable Brotli compression to further reduce the size of webpage (dashboard) and provide you more space for your code. We've noticed 40% extra reduction in size over gzip compression (default).

Please note that Brotli compression is only supported by Safari browser with unencrpyted HTTP protocol. Due to constraints set by other browsers ( Chrome, Edge, Firefox etc. ) you need to use HTTPS for brotli compression to work properly.

Note: Broti compression is disabled by default. It's up to user to enable brotli if the above conditions are fine for your use-case.

How to enable:​

You can switch to brotli compression by setting DASH_USE_BROTLI_COMPRESSION to 1 in dash_webpage.h.

  1. Open dash_webpage.h in src directory of ESP-DASH Pro library.
  2. Locate DASH_USE_BROTLI_COMPRESSION
  3. Set it to 1
  4. That's it. Save, compile and upload again to your microcontroller.
- + \ No newline at end of file diff --git a/next/features/chartanimations/index.html b/next/features/chartanimations/index.html index 8034e421..c78c1bde 100644 --- a/next/features/chartanimations/index.html +++ b/next/features/chartanimations/index.html @@ -7,13 +7,13 @@ - +
Version: Next

Toggle Animation

Pro Feature

This is an exclusive feature of DASH Pro. Check it out here.


You can enable/disable chart animations with ease using the setChartAnimations function of ESPDash class. This is particularly helpful if you are updating your charts at an very fast pace.

Note: Chart animations are enabled by default.

Usage:​

You can put this function anywhere in your setup block:

To Disble:​
dashboard.setChartAnimations(false); // Disable Chart Animations
To Enable:​
dashboard.setChartAnimations(true); // Enable Chart Animations
- + \ No newline at end of file diff --git a/next/features/custom-logo/index.html b/next/features/custom-logo/index.html index 18f6bbc8..659dfc47 100644 --- a/next/features/custom-logo/index.html +++ b/next/features/custom-logo/index.html @@ -7,13 +7,13 @@ - +
Version: Next

Custom Logo

Pro Feature

This is an exclusive feature of DASH Pro. Check it out here.


Logo Preview

Your ESP-DASH dashboard's sidebar contains the spot which can be updated to add your own company/product logo. This enables you with complete customization and maintains your brand value among customers.

The logo used in ESP-DASH is image file converted to byte array. We'll go through the process below:

What you'll need​

  • You'll need a compatible logo image ( jpeg / png / gif / tif etc. ) or an SVG file ( recommended due to small file size ). Important: Please make sure your image is optimized and small in file size.
  • Know the MIME file type of your image. You can use HTTPStrip's mime utility.

Step 1: Procedure to convert logo into byte array​

  1. Go to File2Raw Utility ( I created this utility a few years back for the purpose of converting files into byte array for C++ applications ).
  2. Select your logo.
  3. Select "Gzip Compress" & "Use PROGMEM (Arduino)".
  4. Click "Convert".

Step 2: Setting custom logo in sketch​

Now once your custom logo has been prepared, let's set it in your ESP-DASH Pro library:

  1. Go to logo.h
  2. Set DASH_LOGO_MIME to your image file type. To find your file's mime type, use this utility: https://www.htmlstrip.com/mime-file-type-checker
  3. Set DASH_LOGO_WIDTH & DASH_LOGO_HEIGHT according to your desired size which will be displayed on the webpage.
  4. Replace the array length of DASH_LOGO with the newly generated array length.
  5. Now open logo.cpp
  6. Replace the data inside DASH_LOGO with new data generated just before using File2Raw.
- + \ No newline at end of file diff --git a/next/features/custom-uri/index.html b/next/features/custom-uri/index.html index c7e7cf0c..db6c5091 100644 --- a/next/features/custom-uri/index.html +++ b/next/features/custom-uri/index.html @@ -7,13 +7,13 @@ - +
Version: Next

Custom URI

If you want to serve ESPDash at a path other than 'root' (ie. http://<Your IP>/) then you can use the constructor to supply the path of your choice.

Example:​

ESPDash dashboard(&server, "/dash");

This will result in ESPDash being served at http://<Your IP>/dash.

- + \ No newline at end of file diff --git a/next/features/disable-stats/index.html b/next/features/disable-stats/index.html index 9d57ce58..aa39ce40 100644 --- a/next/features/disable-stats/index.html +++ b/next/features/disable-stats/index.html @@ -7,13 +7,13 @@ - +
Version: Next

Disable Statistics

You can disable system statistics by using setting false in ESPDash class constructor.

Example:​

If no custom URI is defined (second parameter):​

ESPDash dashboard(&server, false);

If using a using custom URI (third parameter):​

ESPDash dashbord(&server, "/", false);

If you would like to completely disable and hide the statistics tab from the sidebar, please use the above example and make sure you don't have any custom statistics. By doing so, it will automatically hide the "statistics" tab from sidebar.

- + \ No newline at end of file diff --git a/next/features/indexing/index.html b/next/features/indexing/index.html index 15f889ad..e0494815 100644 --- a/next/features/indexing/index.html +++ b/next/features/indexing/index.html @@ -7,13 +7,13 @@ - +
Version: Next

Card Indexing

Pro Feature

This is an exclusive feature of DASH Pro. Check it out here.


Energy Card Preview

ESP-DASH Pro provides you with a setIndex function in both cards and charts to modify the position of them on the dashboard.

Example:​

card1.setIndex(0);

Indexing works in ascending format. The lowest card index will be placed in the front of the list and the highest index will be put in the end. It allows you to set the layout according to your wish.

- + \ No newline at end of file diff --git a/next/features/sizing/index.html b/next/features/sizing/index.html index 38806786..272f11ef 100644 --- a/next/features/sizing/index.html +++ b/next/features/sizing/index.html @@ -7,13 +7,13 @@ - +
Version: Next

Custom Card Size

Pro Feature

This is an exclusive feature of DASH Pro. Check it out here.


Energy Card Preview

ESP-DASH Pro allows you to change the size of your cards & charts by providing you the setSize function. This function allows you to set a responsive width for your widgets without actually modifying the whole webpage.

Reference​

Card sizing consists of breakpoints for an responsive layout that scales up or down to every screen size. The valid value for each breakpoint is 1 to 12.

To understand better, the breakpoints are as follows:

  • xs - Small Smartphone
  • sm - Normal Smartphone
  • md - Tablet
  • lg - HD laptop
  • xl - Full HD laptop
  • xxl - 2K display and above
Option 1:​
  // This reference can be found in Card.h
  void setSize(const uint8_t xs, const uint8_t sm, const uint8_t md, const uint8_t lg, const uint8_t xl, const uint8_t xxl);
Option 2:​
  // These references can be found in Card.h
  struct CardSize {
    uint8_t xs;
    uint8_t sm;
    uint8_t md;
    uint8_t lg;
    uint8_t xl;
    uint8_t xxl;
  };

  void setSize(const CardSize &size);

Example​

Option 1:​
card1.setSize(12, 12, 6, 4, 3, 2);
Option 2:​
card1.setSize({
  .xs = 12,
  .sm = 12,
  .md = 6,
  .lg = 4,
  .xl = 3,
  .xxl = 2
});
- + \ No newline at end of file diff --git a/next/features/title/index.html b/next/features/title/index.html index 92ad7660..3dcf6c18 100644 --- a/next/features/title/index.html +++ b/next/features/title/index.html @@ -7,13 +7,13 @@ - +
Version: Next

Custom Title

Pro Feature

This is an exclusive feature of DASH Pro. Check it out here.


Energy Card Preview

ESP-DASH Pro provides you with a setTitle function in the main ESPDash class. You can use this function to change the default title of your dashboard.

Example:​

dashboard.setTitle("New Dashboard XYZ");
- + \ No newline at end of file diff --git a/next/features/toggle-display/index.html b/next/features/toggle-display/index.html index ff4962a4..1f9aada6 100644 --- a/next/features/toggle-display/index.html +++ b/next/features/toggle-display/index.html @@ -7,13 +7,13 @@ - +
Version: Next

Toggle Display

Pro Feature

This is an exclusive feature of DASH Pro. Check it out here.


You can quickly show or hide widgets (cards, charts, tabs and statistics) using the setDisplay function. Use it to show or hide stuff on your dashboard when it's required. Possibilities are endless with this function and makes the dashboard truly customizable.

note

All widgets are displayed by default.

Usage​

You can put this function anywhere in your setup block:

To Hide Widget​
card1.setDisplay(false); // Hide your card

OR

chart1.setDisplay(false); // Hide your chart

OR

tab1.setDisplay(false); // Hide your tab

OR

stat1.setDisplay(false); // Hide your statistic
To Show Widget​
card1.setDisplay(true); // Show your card

OR

chart1.setDisplay(true); // Show your chart

OR

tab1.setDisplay(true); // Show your tab

OR

stat1.setDisplay(true); // Show your statistic
- + \ No newline at end of file diff --git a/next/getting-started/index.html b/next/getting-started/index.html index 9148e277..799d9840 100644 --- a/next/getting-started/index.html +++ b/next/getting-started/index.html @@ -7,13 +7,13 @@ - +
Version: Next

Getting Started

To get started with ESP-DASH, we will be creating our basic example step by step and learn what each setup does:


Part 1: Include Dependencies​

We have used conditional compilation in this part therefore the code will work for both ESP8266 & ESP32.

#include <Arduino.h>
#if defined(ESP8266)
  /* ESP8266 Dependencies */
  #include <ESP8266WiFi.h>
  #include <ESPAsyncTCP.h>
  #include <ESPAsyncWebServer.h>
#elif defined(ESP32)
  /* ESP32 Dependencies */
  #include <WiFi.h>
  #include <AsyncTCP.h>
  #include <ESPAsyncWebServer.h>
#endif
#include <ESPDash.h>

Part 2: Create AsyncWebServer Instance​

Create an AsyncWebServer instance on default "80" port.

Note: You are not restricted to a single dashboard. You can host as many dashboards as you want on multiple ports.

/* Start Webserver */
AsyncWebServer server(80);

Part 3: Attach ESP-DASH Instance​

Pass the AsyncWebServer instance to ESPDash's instance. Internally the ESPDash will hook to AsyncWebServer for handling all the networking tasks.

Note: You can still use the same AsyncWebServer instance for other tasks.

/* Attach ESP-DASH to AsyncWebServer */
ESPDash dashboard(&server);

Part 4: Create Cards​

In this step, we will creating ESP-DASH cards and passing our dasboard instance as a first argument so that they can add / remove themselves.

After we are done with this guide, Please take a look at Cards section to know more about the types of cards available to us.

/* 
  Dashboard Cards 
  Format - (Dashboard Instance, Card Type, Card Name, Card Symbol(optional) )
*/
Card temperature(&dashboard, TEMPERATURE_CARD, "Temperature", "°C");
Card humidity(&dashboard, HUMIDITY_CARD, "Humidity", "%");

Part 5: Setup Block​

In our setup block, we will be adding the usual WiFi connectivity stuff and then start our AsyncWebServer with server.begin();.

void setup() {
  Serial.begin(115200);

  /* Connect WiFi */
  WiFi.mode(WIFI_STA);
  WiFi.begin("ssid", "password");
  if (WiFi.waitForConnectResult() != WL_CONNECTED) {
      Serial.printf("WiFi Failed!\n");
      return;
  }
  Serial.print("IP Address: ");
  Serial.println(WiFi.localIP());

  /* Start AsyncWebServer */
  server.begin();
}

Part 5: Loop Block​

In our loop block, we will be doing 2 things:

  1. Updating card values
  2. Sending updates to our dashboard
1. Updating Card Values​

Remember the 'Cards' we created in 4th part? We will now access those cards by their variable and update them using the update function which is provided with our card's class:

temperature.update((int)random(0, 50));
2. Sending updates to our Dashboard​

Once we have updated values of our card(s), we will call the sendUpdates() function of our dashboard instance and it will send new card values to every connected client in real time.

dashboard.sendUpdates();

Technically speaking, You can call these functions anywhere in your sketch, but for demonstration purposes we have called them in our loop block.

Complete Loop Block:​
void loop() {
  /* Update Card Values */
  temperature.update((int)random(0, 50));
  humidity.update((int)random(0, 100));

  /* Send Updates to our Dashboard (realtime) */
  dashboard.sendUpdates();

  /* 
    Delay is just for demonstration purposes in this example,
    Replace this code with 'millis interval' in your final project.
  */
  delay(3000);
}

Final Code​

That's it! Now we can just upload this sketch to our MCU and access the dashboard via it's IP address. ( Make sure to change the ssid and password in our sketch according to your Access Point )

/*
  -----------------------
  ESPDASH - Basic Example
  -----------------------

  Skill Level: Intermediate

  In this example we will be creating a basic dashboard which consists 
  of some cards and then update them in realtime ( at 3s interval ).

  Github: https://github.com/ayushsharma82/ESP-DASH
  WiKi: https://ayushsharma82.github.io/ESP-DASH/

  Works with both ESP8266 & ESP32
*/

#include <Arduino.h>
#if defined(ESP8266)
  /* ESP8266 Dependencies */
  #include <ESP8266WiFi.h>
  #include <ESPAsyncTCP.h>
  #include <ESPAsyncWebServer.h>
#elif defined(ESP32)
  /* ESP32 Dependencies */
  #include <WiFi.h>
  #include <AsyncTCP.h>
  #include <ESPAsyncWebServer.h>
#endif
#include <ESPDash.h>


/* Your WiFi Credentials */
const char* ssid = ""; // SSID
const char* password = ""; // Password

/* Start Webserver */
AsyncWebServer server(80);

/* Attach ESP-DASH to AsyncWebServer */
ESPDash dashboard(&server); 

/* 
  Dashboard Cards 
  Format - (Dashboard Instance, Card Type, Card Name, Card Symbol(optional) )
*/
Card temperature(&dashboard, TEMPERATURE_CARD, "Temperature", "°C");
Card humidity(&dashboard, HUMIDITY_CARD, "Humidity", "%");


void setup() {
  Serial.begin(115200);

  /* Connect WiFi */
  WiFi.mode(WIFI_STA);
  WiFi.begin(ssid, password);
  if (WiFi.waitForConnectResult() != WL_CONNECTED) {
      Serial.printf("WiFi Failed!\n");
      return;
  }
  Serial.print("IP Address: ");
  Serial.println(WiFi.localIP());

  /* Start AsyncWebServer */
  server.begin();
}

void loop() {
  /* Update Card Values */
  temperature.update((int)random(0, 50));
  humidity.update((int)random(0, 100));

  /* Send Updates to our Dashboard (realtime) */
  dashboard.sendUpdates();

  /* 
    Delay is just for demonstration purposes in this example,
    Replace this code with 'millis interval' in your final project.
  */
  delay(3000);
}
- + \ No newline at end of file diff --git a/next/index.html b/next/index.html index 354df13e..c1e2a3ba 100644 --- a/next/index.html +++ b/next/index.html @@ -7,13 +7,13 @@ - +
Version: Next



   


So as many would ask, what is ESP-DASH? In simple words - It's a UI library for ESP32 & ESP8266 microcontrollers that let you generate a fully capable dashboard. It can moulded in any way possible to suit your application needs.

Here are a few things by which you benefit by using ESP-DASH in your project:

  • 🔥 Automatic webpage generation.
  • ⏱️ Realtime updates to all connected clients.
  • 🎷 No need to learn HTML/CSS/JS. ESP-DASH provides you with a C++ interface.
  • 🛫 Ready to use components for your data.
  • 🏀 It's dynamic! Add or remove components anytime from the webpage.
  • 📈 Inbuilt charts support.

Note: This documentation serves both the versions of ESP-DASH ( Lite - Open Source and Pro ). Therefore, if you notice "(Pro)" mentioned on any of the features in the documentation, that means it is only available in ESP-DASH Pro.

Preview:​

- + \ No newline at end of file diff --git a/next/installation/index.html b/next/installation/index.html index f23907ea..e45736be 100644 --- a/next/installation/index.html +++ b/next/installation/index.html @@ -7,13 +7,13 @@ - +
-
Version: Next

Installation

This document explains the installation procedure for getting started with ESP-DASH.

Dependencies​

ESP-DASH depends on the following libraries present in your libraries folder. Please stricly install the compatible versions of these dependencies only! Using any other version might break ESP-DASH or may cause ESP-DASH to work partially.

Note on Dependencies

As of v4.0.4, ESP-DASH has officially switched to using fork of ESPAsyncWebServer and its dependencies from @mathieucarbou. This fork of ESPAsyncWebServer is being maintained regularly and contains many bug fixes along with arduino-esp32 core v3 support.

It's suggested to migrate all your projects to using this fork as the original me-no-dev/ESPAsyncWebServer repo is not being maintained since years.

For ESP8266​

For ESP32​

Installing ESP-DASH​

1. Directly Through Arduino IDE - Library Manager​

Go to Sketch > Include Library > Library Manager > Search for "ESP-DASH" > Install

2. Manual Install​

For Windows:​
  • Download the Repository
  • Extract the .zip in Documents > Arduino > Libraries > {Place "ESP-DASH" folder Here}
For Linux:​
  • Download the Repository
  • Extract the .zip in Sketchbook > Libraries > {Place "ESP-DASH" folder Here}

3. Import through Arduino IDE​

  • Download the Repository
  • Go to Sketch > Include Library > Add .zip Library > Select the Downloaded .zip File.
- +
Version: Next

Installation

This document explains the installation procedure for getting started with ESP-DASH.

Dependencies​

ESP-DASH depends on the following libraries present in your libraries folder. Please stricly install the compatible versions of these dependencies only! Using any other version might break ESP-DASH or may cause ESP-DASH to work partially.

Note on Dependencies

As of v4.0.4, ESP-DASH has officially switched to using fork of ESPAsyncWebServer and its dependencies from @mathieucarbou. This fork of ESPAsyncWebServer is being maintained regularly and contains many bug fixes along with arduino-esp32 core v3 support.

It's suggested to migrate all your projects to using this fork as the original me-no-dev/ESPAsyncWebServer repo is not being maintained since years.

For ESP8266​

For ESP32​

Installing ESP-DASH​

1. Directly Through Arduino IDE - Library Manager​

Go to Sketch > Include Library > Library Manager > Search for "ESP-DASH" > Install

2. Manual Install​

For Windows:​
  • Download the Repository
  • Extract the .zip in Documents > Arduino > Libraries > {Place "ESP-DASH" folder Here}
For Linux:​
  • Download the Repository
  • Extract the .zip in Sketchbook > Libraries > {Place "ESP-DASH" folder Here}

3. Import through Arduino IDE​

  • Download the Repository
  • Go to Sketch > Include Library > Add .zip Library > Select the Downloaded .zip File.
+ \ No newline at end of file diff --git a/next/migrate/index.html b/next/migrate/index.html index f3bd066a..ed8a88af 100644 --- a/next/migrate/index.html +++ b/next/migrate/index.html @@ -7,13 +7,13 @@ - +
Version: Next

Migration Guide

Note: If you are currently using ESP-DASH V3 or ESP-DASH Pro ( previous releases <= v4.0.8 ), then this article is for you.

This article will cover all the minor and breaking changing which come as part of switching your existing codebase to ESP-DASH V4. DASH V4 was made with backwards compatibility in mind therefore there are not many changes to the existing functionality, which means you can get started using it in a few minutes!:

⚠️ Minor Changes:​

  • The second argument of ESPDash Class constructor now only disables system statistics. ESPDash(AsyncWebServer* server, bool enable_default_stats = true);. The statistics tab now gets automatically hidden when there are no custom stats added by user and when default (system) statistics are disabled as well.

  • The sendUpdates(bool force); function now has a force argument which can be used to force refresh the whole layout on connected dashboards.

⚒️ Breaking Changes:​

Button Callback​

The button callback now gets called with a int rather than bool which lead to issues. The value returned by callback will be 1 or 0.

// New Button Callback
button.attachCallback([&](int value){
  button.update(value);
  dashboard.sendUpdates();
});

Charts​

There is a major overhaul inside the library for the charts functionality to improve reliability of host microcontroller.

Previously, ESP-DASH would copy the whole X & Y axis array into SRAM of your ESP8266/ESP32 microcontroller, which was fine for smaller arrays but quickly led to crashes whenever somebody tried to use a large dataset.

With V4, the library only keeps the pointer to the dataset which will be used for the charts. This in return lets you use a large array for charts without memory hogging the microcontroller! :D

As part of this critical fix, now you need to keep the dataset ( X & Y axis ) arrays into the global scope all the time and then provide a reference of these array to the library along with it's size. The only thing which you need to change is that if you were creating a array into heap, ( i.e inside a function ) now you need to shift it into global scope. Carefully study the following reference: Benchmark Example

- + \ No newline at end of file diff --git a/next/more-examples/index.html b/next/more-examples/index.html index 8d922289..c9b3fdb3 100644 --- a/next/more-examples/index.html +++ b/next/more-examples/index.html @@ -7,13 +7,13 @@ - +
Version: Next

Examples

There are many example sketches in our repository. You can check those out to know more about what you can do with ESP-DASH. We have contructed every example with very clear documentation so there is less obstruction in your learning process.

You can find those examples in the repository.

- + \ No newline at end of file diff --git a/next/widgets/cards/air/index.html b/next/widgets/cards/air/index.html index ec68d5d2..3ff69051 100644 --- a/next/widgets/cards/air/index.html +++ b/next/widgets/cards/air/index.html @@ -7,13 +7,13 @@ - +
Version: Next

Air Card

Pro Feature

This is an exclusive feature of DASH Pro. Check it out here.

Preview

This card adds a distinctive air/wind icon, and just like generic card you can add a symbol which will be appended to your data. This card can be used to show something related to air pressure/wind speed etc.

Initializer​

/* 
  Air Card
  Valid Arguments: (ESPDash dashboard, Card Type, const char* name, const char* symbol (optional) )
*/
Card card1(&dashboard, AIR_CARD, "Power Consumption", "kWh");

Callback​

note

Air card doesn't require any callback.

Updater​

card1.update(int value);
card1.update(float value);
card1.update(String value);

Or you can also update the symbol along with the value like this:

card1.update(value, "kWh");

Reference​

This is a reference sketch showing positions for intializer and updater.


...

/* Air card initializer */
Card air(&dashboard, AIR_CARD, "Wind Speed", "kmph");


void setup() {
  ...

  /* Air card updater - can be used anywhere (apart from global scope) */
  air.update(100);
}

void loop() {
  ...
}

- + \ No newline at end of file diff --git a/next/widgets/cards/button/index.html b/next/widgets/cards/button/index.html index 4052db25..0e328969 100644 --- a/next/widgets/cards/button/index.html +++ b/next/widgets/cards/button/index.html @@ -7,13 +7,13 @@ - +
Version: Next

Toggle Button

Button Card PreviewButton Card Preview

Button card adds a interactive toggle button to your dashboard. This provides you with a simple 1 or 0 input from your dashboard.

Initializer​

/* 
  Button Card
  Valid Arguments: (ESPDash dashboard, Card Type, const char* name)
*/
Card card1(&dashboard, BUTTON_CARD, "Test Button");

Callback​

Button card requires a callback function which will be executed when we receive a input from our dashboard. In this example, we will use the attachCallback function and provide a lambda function with a boolean argument.

In the case of button card, the value sent by your dashboard will be opposite of your current value. For Example: If your button is set to 0, then clicking that button on dashboard will trigger this callback with 1.

Note: You need to call the update function and sendUpdates immediately once you receive the value in callback. Otherwise user input will not be registered on dashboard.

/*
  We provide our attachCallback with a lambda function to handle incomming data
  `value` is the boolean sent from your dashboard
*/
card1.attachCallback([&](int value){
  Serial.println("[Card1] Button Callback Triggered: "+String((value == 1)?"true":"false"));
  card1.update(value);
  dashboard.sendUpdates();
});

Updater​

card1.update(1);
card1.update(0);

Reference​

This is a reference sketch showing positions for intializer, callback and updater.


...

/* Button card initializer */
Card button(&dashboard, BUTTON_CARD, "Test Button");


void setup() {
  ...

  /* Button card callback */
  button.attachCallback([&](int value){
    Serial.println("Button Callback Triggered: "+String((value == 1)?"true":"false"));
    /* Button card updater - you need to update the button with latest value upon firing of callback */
    button.update(value);
    /* Send update to dashboard */
    dashboard.sendUpdates();
  });
}

void loop() {
  ...
}

- + \ No newline at end of file diff --git a/next/widgets/cards/color-picker/index.html b/next/widgets/cards/color-picker/index.html index ec187441..8733d841 100644 --- a/next/widgets/cards/color-picker/index.html +++ b/next/widgets/cards/color-picker/index.html @@ -7,13 +7,13 @@ - +
Version: Next

Color Picker Card

Pro Feature

This is an exclusive feature of DASH Pro. Check it out here.

Color Picker Card Preview

With color picker card, you have an option to take an color input from user. This is particularly useful if you want to have an input for LED color, display color etc. Color picker card will return an hex string of color selected by user.

A bit more info on hex color values if you are not familiar with it: W3Schools Article

Initializer​

/* 
  Color Picker Card
  Valid Arguments: (ESPDash dashboard, Card Type, const char* name)
*/
Card card1(&dashboard, COLOR_PICKER_CARD, "Color Picker");

Callback​

Color picker card requires a callback function which will be called when we receive a input from our dashboard. In our setup block, we will be calling our attachCallback function and provide a lambda (callback) function with a const char* (character array) argument. Whenever a user selects a color, this callback will be triggered with hex value of color.

Note: You need to call the update function and sendUpdates immediately once you receive the value in callback. Otherwise user input will not be registered on dashboard and it will keep the card stuck in 'waiting' phase.

/*
  We provide our attachCallback with a lambda function to handle incomming data
  Example Value: mon,tue,wed,thu,fri,sat,sun
*/
card1.attachCallback([&](const char* hex){
  Serial.println("[Card1] Color Picker Triggered: "+String(hex));
  card1.update(value);
  dashboard.sendUpdates();
});

Updater​

You can also update the value inside color picker card using the same hex formula.

card1.update(const char* value);
card1.update(String value);

Reference​

This is a reference sketch showing positions for intializer, callback and updater.


...

/* Color picker card initializer */
Card colorpicker(&dashboard, COLOR_PICKER_CARD, "Color Picker 1");


void setup() {
  ...

  /* Color picker callback */
  colorpicker.attachCallback([&](const char* hex){
    Serial.println("Color picker callback triggered: "+String(hex));
    /* Color picker card updater - you need to update the color picker with latest value upon firing of callback */
    colorpicker.update(value);
    /* Send update to dashboard */
    dashboard.sendUpdates();
  });
}

void loop() {
  ...
}

- + \ No newline at end of file diff --git a/next/widgets/cards/dropdown/index.html b/next/widgets/cards/dropdown/index.html index 04d92705..0a35c147 100644 --- a/next/widgets/cards/dropdown/index.html +++ b/next/widgets/cards/dropdown/index.html @@ -7,13 +7,13 @@ - +
Version: Next

Dropdown Card

Pro Feature

This is an exclusive feature of DASH Pro. Check it out here.

PreviewPreview

This card adds a dropdown selectable list on your dashboard. You can pass "," comma separated list as it's secondary value with unlimited number of choices.

Initializer​

/* 
  Dropdown Card
  Valid Arguments: (ESPDash dashboard, Card Type, const char* name, const char* choices )
*/
Card card1(&dashboard, DROPDOWN_CARD, "Test Dropdown", "Option1,Option2,Option3,Option4");

Callback​

The Dropdown Card requires a callback function that will be invoked when input is received from the dashboard. This function should utilize the attachCallback method and provide a lambda function with a const char* parameter.

Note: It's essential to immediately invoke the update function and sendUpdates after receiving a value in the callback. Failure to do so will result in the user's input not being registered on the dashboard.

/*
  Here, we use a lambda function within attachCallback to handle incoming data.
  `value` represents the const char value sent from your dashboard which is equal to selected value.
*/
card1.attachCallback([&](const char* value){
  Serial.println("[Card1] Dropdown Callback Triggered: "+String(value));
  card1.update(value);
  dashboard.sendUpdates();
});

Updater​

This will change the selected value of our dropdown:

card1.update(const char* value);

Or you can also update the choices along with the value like this:

// This will change the selected value and update the choices as well
card1.update(const char* value, const char* choices);

Reference​

This is a reference sketch showing positions for intializer, callback and updater.


...

/* Dropdown card initializer */
Card dropdown(&dashboard, DROPDOWN_CARD, "Test Dropdown", "Option1,Option2,Option3,Option4");


void setup() {
  ...

  /* Dropdown card callback */
  dropdown.attachCallback([&](const char* value){
    Serial.println("Dropdown Callback Triggered: "+String(value));
    /* Dropdown card updater - you need to update the button with latest value upon firing of callback */
    dropdown.update(value);
    /* Send update to dashboard */
    dashboard.sendUpdates();
  });
}

void loop() {
  ...
}

- + \ No newline at end of file diff --git a/next/widgets/cards/energy/index.html b/next/widgets/cards/energy/index.html index e82893ad..777e88d4 100644 --- a/next/widgets/cards/energy/index.html +++ b/next/widgets/cards/energy/index.html @@ -7,13 +7,13 @@ - +
Version: Next

Energy Card

Pro Feature

This is an exclusive feature of DASH Pro. Check it out here.

Energy Card Preview

This card adds a distinctive energy/power icon, and just like generic card you can add a symbol which will be appended to your data. This card can be used to show something related to power consumption and usage etc.

Initializer​

/* 
  Energy Card
  Valid Arguments: (ESPDash dashboard, Card Type, const char* name, const char* symbol (optional) )
*/
Card card1(&dashboard, ENERGY_CARD, "Power Consumption", "kWh");

Callback​

note

Energy card doesn't require any callback.

Updater​

card1.update(int value);
card1.update(float value);
card1.update(String value);

Or you can also update the symbol along with the value like this:

card1.update(value, "kWh");

Reference​

This is a reference sketch showing positions for intializer and updater.


...

/* Energy card initializer */
Card energy(&dashboard, ENERGY_CARD, "Power Consumption", "kWh");


void setup() {
  ...

  /* Energy card updater - can be used anywhere (apart from global scope) */
  energy.update(100);
}

void loop() {
  ...
}

- + \ No newline at end of file diff --git a/next/widgets/cards/generic/index.html b/next/widgets/cards/generic/index.html index 5e49be99..e1712f98 100644 --- a/next/widgets/cards/generic/index.html +++ b/next/widgets/cards/generic/index.html @@ -7,13 +7,13 @@ - +
Version: Next

Generic Card

Preview

Generic card is the 'fits-all-types' card, which you can use to display any kind of value. It's mostly used when you want to display numbers, strings etc which don't relate to any other card in the list.

Initializer​

/* 
  Generic Card
  Valid Arguments: (ESPDash dashboard, Card Type, const char* name, const char* symbol (optional) )
*/
Card card1(&dashboard, GENERIC_CARD, "Generic1");

Callback​

note

Generic card doesn't require any callback.

Updater​

card1.update(int value);
card1.update(bool value);
card1.update(float value);
card1.update(String value);

Reference​

This is a reference sketch showing positions for intializer and updater.


...

/* Generic card initializer */
Card generic(&dashboard, GENERIC_CARD, "Generic1");


void setup() {
  ...

  /* Generic card updater - can be used anywhere (apart from global scope) */
  generic.update(100);
}

void loop() {
  ...
}

- + \ No newline at end of file diff --git a/next/widgets/cards/humidity/index.html b/next/widgets/cards/humidity/index.html index 639e568a..a6cf47fe 100644 --- a/next/widgets/cards/humidity/index.html +++ b/next/widgets/cards/humidity/index.html @@ -7,13 +7,13 @@ - +
Version: Next

Humidity Card

Preview

This card adds a distinctive humidity icon, and just like generic card you can add a symbol which will be appended to your data.

Initializer​

/* 
  Humidity Card
  Valid Arguments: (ESPDash dashboard, Card Type, const char* name, const char* symbol (optional) )
*/
Card card1(&dashboard, HUMIDITY_CARD, "Humidity1", "%");

Callback​

note

Humidity card doesn't require any callback.

Updater​

card1.update(int value);
card1.update(float value);
card1.update(String value);

Or you can also update the symbol along with the value like this:

card1.update(value, "RH");

Reference​

This is a reference sketch showing positions for intializer and updater.


...

/* Humidity card initializer */
Card humidity(&dashboard, HUMIDITY_CARD, "Humidity1");


void setup() {
  ...

  /* Humidity card updater - can be used anywhere (apart from global scope) */
  humidity.update(100);
}

void loop() {
  ...
}

- + \ No newline at end of file diff --git a/next/widgets/cards/image/index.html b/next/widgets/cards/image/index.html index 70ab1e98..8cffba58 100644 --- a/next/widgets/cards/image/index.html +++ b/next/widgets/cards/image/index.html @@ -7,13 +7,13 @@ - +
Version: Next

Image Card

Pro Feature

This is an exclusive feature of DASH Pro. Check it out here.

Preview

This card adds a image on your dashboard. You can pass a absolute URL to this card and it will load that image within this card on the dashboard. If the size is a bit small for you, then you can even make the card bigger by using the size value together with setSize function.

Initializer​

/* 
  Image Card
  Valid Arguments: (ESPDash dashboard, Card Type, const char* name, const char* size )
*/
Card card1(&dashboard, IMAGE_CARD, "Test Image", "lg");

Callback​

note

Image card doesn't require any callback.

Updater​

After initialization, you will have to provide the URL of the image which you want to display.

card1.update(const char* url);

Or you can also update the size of image using the second parameter. Supported sizes: "lg" and "xl"

// This will change the selected value and update the choices as well
card1.update(const char* url, const char* size);

Reference​

This is a reference sketch showing positions for intializer and updater.


...

/* Image card initializer */
Card image(&dashboard, IMAGE_CARD, "Test Image", "lg");


void setup() {
  ...

  /* Image card updater - can be used anywhere (apart from global scope) */
  image.update("https://fastly.picsum.photos/id/598/800/600.jpg?grayscale&hmac=SQ5T_OGiPMX4r1fb-gA2fU6pourJEfxmTz7g1HfXOSk");
}

void loop() {
  ...
}

- + \ No newline at end of file diff --git a/next/widgets/cards/joystick/index.html b/next/widgets/cards/joystick/index.html index 105bda55..8f9966c2 100644 --- a/next/widgets/cards/joystick/index.html +++ b/next/widgets/cards/joystick/index.html @@ -7,14 +7,14 @@ - +
Version: Next

Joystick Card

Pro Feature

This is an exclusive feature of DASH Pro. Check it out here.

Preview

This card adds a joystick to your dashboard to control some stuff and provides you with easy to interpret directional data via callback. You can even lock direction of the joystick to X or Y axis.

Initializer​

/* 
  Joystick Card
  Valid Arguments: (ESPDash dashboard, Card Type, const char* name, const char* directionLock (optional) )
*/
Card joystick(&dashboard, JOYSTICK_CARD, "Joystick 1");

Direction Lock​

You can lock joystick to X or Y Axis:

Supply it with lockX as 4th argument and it will lock to X axis.

Card joystick(&dashboard, JOYSTICK_CARD, "Joystick 1", "lockX");

Supply it with lockY as 4th argument and it will lock to Y axis.

Card joystick(&dashboard, JOYSTICK_CARD, "Joystick 1", "lockY");

By default, joystick works on both axis.

Callback​

Joystick Card requires a callback function which will be called when we receive a input from our dashboard. In setup block, we will be calling our attachCallback function and provide a lambda (callback) function with a const char* (character array) argument.

Joystick card has 2 callbacks, directional and coordinates:

Directional Callback​

This callback will return the active direction of your joystick when it's moved. It will be one of the following:

  • up
  • down
  • left
  • right
  • idle
/*
  We provide our attachCallback with a lambda function to handle incomming data
  `value` is the direction of joystick 'up', 'down', 'left', 'right' or 'idle'
*/
joystick.attachCallback([&](const char* direction){
  Serial.println("[Joystick] Current Direction: "+String(direction));
});
Coordinates Callback​

This callback will return the active coordinates of the thumb of your joystick when it's moved. It will provide x and y coordinates which ranges from -60 to 60 on each axis.

In case of X axis: -60 is left, 60 is right. For Y axis: -60 is up, and 60 is bottom.

/*
  We provide our attachCallback with a lambda function to handle incomming data.
  In this case, we will be getting x and y axis coordinates in range of -60 to 60
*/
joystick.attachCallback([&](int8_t x, int8_t y){
  Serial.printf("[Joystick] X Axis: %d, Y Axis: %d\n", x, y);
});

Updater​

note

Joystick card doesn't require any updater as value is not passed back to dashboard.

Reference​

This is a reference sketch showing positions for intializer and callback.


...

/* Joystick card initializer */
Card joystick(&dashboard, JOYSTICK_CARD, "Joystick 1");


void setup() {
  ...

  /* Joystick card directional callback */
  joystick.attachCallback([&](const char* direction){
    Serial.println("[Joystick] Current Direction: "+String(direction));
  });

  /* Joystick card coordinates callback */
  joystick.attachCallback([&](int8_t x, int8_t y){
    Serial.printf("[Joystick] X Axis: %d, Y Axis: %d\n", x, y);
  });
}

void loop() {
  ...
}

- + \ No newline at end of file diff --git a/next/widgets/cards/link/index.html b/next/widgets/cards/link/index.html index 24489c59..9f9ece6b 100644 --- a/next/widgets/cards/link/index.html +++ b/next/widgets/cards/link/index.html @@ -7,13 +7,13 @@ - +
Version: Next

Link Card

Pro Feature

This is an exclusive feature of DASH Pro. Check it out here.

Text Input Card Preview

Link card is particularly useful when you want to redirect user to a new page. This card accepts valid URL schemes as string which will be passed on to dashboard for user action.

Initializer​

/* 
  Link Card
  Valid Arguments: (ESPDash dashboard, Card Type, const char* name)
*/
Card linkcard(&dashboard, LINK_CARD, "Test Link");

Callback​

note

Link card doesn't require any callback.

Updater​

After initialization, you will have to provide the URL which has to be opened when user clicks on the card. You can do this by calling the update function.

linkcard.update(const char* url);

Reference​

This is a reference sketch showing positions for intializer and updater.


...

/* Link card initializer */
Card linkcard(&dashboard, LINK_CARD, "Test Link");


void setup() {
  ...

  /* Link card updater - can be used anywhere (apart from global scope) */
  linkcard.update("https://espdash.pro");
}

void loop() {
  ...
}

- + \ No newline at end of file diff --git a/next/widgets/cards/password/index.html b/next/widgets/cards/password/index.html index 15ef32c6..2246b54c 100644 --- a/next/widgets/cards/password/index.html +++ b/next/widgets/cards/password/index.html @@ -7,13 +7,13 @@ - +
Version: Next

Password Card

Pro Feature

This is an exclusive feature of DASH Pro. Check it out here.

Text Input Card Preview

Just like Text Input card, Password card gives you the ability to take String input from user in a inconspicuous way and save them in your application.

This card is very useful for saving any kind of secret or password that requires the input value to be not visible on dashboard in plain text.

Initializer​

/* 
  Password Card
  Valid Arguments: (ESPDash dashboard, Card Type, const char* name)
*/
Card card1(&dashboard, PASSWORD_CARD, "Test Pass");

Callback​

Password card requires a callback function which will be called when we receive a input from our dashboard. In setup block, we will be calling our attachCallback function and provide a lambda (callback) function with a const char* (character array) argument.

/*
  We provide our attachCallback with a lambda function to handle incomming data
*/
card1.attachCallback([&](const char* value){
  Serial.println("[Card1] Password Card Callback: "+String(value));
});

Updater​

note

Password card doesn't require any updater as value is not passed back to dashboard.

Reference​

This is a reference sketch showing positions for intializer and callback.


...

/* Password card initializer */
Card pass(&dashboard, PASSWORD_CARD, "Test Pass");


void setup() {
  ...

  /* Password card callback */
  pass.attachCallback([&](const char* value){
    Serial.println("Password Callback Triggered: "+String(value));
  });
}

void loop() {
  ...
}

- + \ No newline at end of file diff --git a/next/widgets/cards/progress/index.html b/next/widgets/cards/progress/index.html index 317f76cc..be002a3f 100644 --- a/next/widgets/cards/progress/index.html +++ b/next/widgets/cards/progress/index.html @@ -7,13 +7,13 @@ - +
Version: Next

Progress Bar Card

Preview:​

Preview

This card displays a horizontal progress bar based on a integer or a float value.

Initializer​

Initializer requires min, max of range you want to display.

/* 
  Progress Card
  Valid Arguments: (ESPDash dashboard, Card Type, const char* name, const char* symbol (optional), int min, int max)
*/
Card card1(&dashboard, PROGRESS_CARD, "Progress1", "", 0, 255);

Callback​

note

Progress bar card doesn't require any callback.

Updater​

card1.update(int value);
card1.update(float value);

Or, update symbol along your value:

card1.update(244, "%");

Reference​

This is a reference sketch showing positions for intializer and updater.


...

/* Progress card initializer */
Card progress(&dashboard, PROGRESS_CARD, "Progress1", "", 0, 255);


void setup() {
  ...

  /* Progress card updater - can be used anywhere (apart from global scope) */
  progress.update(100);
}

void loop() {
  ...
}

- + \ No newline at end of file diff --git a/next/widgets/cards/push-button/index.html b/next/widgets/cards/push-button/index.html index 6b7fa046..32dfea0d 100644 --- a/next/widgets/cards/push-button/index.html +++ b/next/widgets/cards/push-button/index.html @@ -7,13 +7,13 @@ - +
Version: Next

Push Button Card

Pro Feature

This is an exclusive feature of DASH Pro. Check it out here.

Push Button Card Preview

Push button card adds a static button on your dashboard which has no state. Whenever a user clicks this button, it triggers a callback.

Initializer​

/* 
  Push Button Card
  Valid Arguments: (ESPDash dashboard, Card Type, const char* name)
*/
Card card1(&dashboard, PUSH_BUTTON_CARD, "Push Button");

Callback​

Push button card will trigger a callback on every click by user, there is no need to update or sendUpdates to dashboard because there is no state.

/*
  We provide our attachCallback with a lambda function to handle trigger
*/
card1.attachCallback([&](){
  Serial.println("[Card1] Push Button Triggered");
});

Updater​

note

Push button card doesn't require any updater as value is not passed back to dashboard.

Reference​

This is a reference sketch showing positions for intializer and callback.


...

/* Push button card initializer */
Card pushbtn(&dashboard, PUSH_BUTTON_CARD, "Push Button");


void setup() {
  ...

  /* Push button card callback */
  pushbtn.attachCallback([&](){
    Serial.println("Push Button Callback Triggered");
  });
}

void loop() {
  ...
}

- + \ No newline at end of file diff --git a/next/widgets/cards/slider/index.html b/next/widgets/cards/slider/index.html index 174b321c..bc69afe6 100644 --- a/next/widgets/cards/slider/index.html +++ b/next/widgets/cards/slider/index.html @@ -7,13 +7,13 @@ - +
Version: Next

Slider Card

Preview

This card adds a interactive horizontal slider to your dashboard. Slider card is useful when you require a integer input within a certain range. ( Example use case: LED brightness control )

Initializer​

With slider card, Initializer requires min & max range. Additionally you can also supply step as a seventh argument to set the step size of the slider.

/* 
  Slider Card
  Valid Arguments: (ESPDash dashboard, Card Type, const char* name, const char* symbol (optional), int min, int max)
*/
Card card1(&dashboard, SLIDER_CARD, "Test Slider", "", 0, 255, 1);

Callback​

Slider Card requires a callback function which will be called when we receive a input from our dashboard. We will be calling our attachCallback function and provide a lambda function with a int argument.

Note: You need to call the update function and sendUpdates immediately once you receive the value in callback. Otherwise user input will not be registered on dashboard.

/*
  We provide our attachCallback with a lambda function to handle incomming data
  `value` is the boolean sent from your dashboard
*/
card1.attachCallback([&](float value){
  Serial.println("[Card1] Slider Callback Triggered: "+String(value));
  card1.update(value);
  dashboard.sendUpdates();
});

Updater​

card1.update(int value);
card1.update(float value);

Or, update symbol along your value:

card1.update(244, "%");

Reference​

This is a reference sketch showing positions for intializer, callback and updater.


...

/* Slider card initializer */
Card slider(&dashboard, SLIDER_CARD, "Test Slider", "", 0, 255, 1);


void setup() {
  ...

  /* Slider card callback */
  slider.attachCallback([&](float value){
    Serial.println("Slider Callback Triggered: "+String(value));
    /* Slider card updater - you need to update the slider with latest value upon firing of callback */
    slider.update(value);
    /* Send update to dashboard */
    dashboard.sendUpdates();
  });
}

void loop() {
  ...
}

- + \ No newline at end of file diff --git a/next/widgets/cards/status/index.html b/next/widgets/cards/status/index.html index 34bad480..6327e027 100644 --- a/next/widgets/cards/status/index.html +++ b/next/widgets/cards/status/index.html @@ -7,13 +7,13 @@ - +
Version: Next

Status Card

PreviewPreviewPreviewPreview

As it's name suggests, status card is used to display some kind of status on your dashboard. It can show 4 different kinds of status along with a short message.

Valid Statuses​

  • s - Success (Green)
  • d - Danger (Red)
  • w - Warning (Yellow)
  • i - Idle (Grey)

Initializer​

/* 
  Status Card
  Valid Arguments: (ESPDash dashboard, Card Type, const char* name, const char* status (optional) )
*/
Card card1(&dashboard, STATUS_CARD, "Test Status", "s");

Callback​

note

Status card doesn't require any callback.

Updater​

Status card updater allows you to set a message:

card1.update("message");

Or, message + status at the same time:

card1.update("Message", "s");

Reference​

This is a reference sketch showing positions for intializer and updater.


...

/* Status card initializer */
Card status(&dashboard, STATUS_CARD, "Test Status", "s");


void setup() {
  ...

  /* Status card updater - can be used anywhere (apart from global scope) */
  status.update("Warning message", "w");
}

void loop() {
  ...
}

- + \ No newline at end of file diff --git a/next/widgets/cards/temperature/index.html b/next/widgets/cards/temperature/index.html index a8e14983..1762ab13 100644 --- a/next/widgets/cards/temperature/index.html +++ b/next/widgets/cards/temperature/index.html @@ -7,13 +7,13 @@ - +
Version: Next

Temperature Card

Preview

This card adds a distinctive temperature icon, and just like generic card you can add a symbol which will be appended to your data.

Initializer​

/* 
  Temperature Card
  Valid Arguments: (ESPDash dashboard, Card Type, const char* name, const char* symbol (optional) )
*/
Card card1(&dashboard, TEMPERATURE_CARD, "Temperature1", "°C");

Callback​

note

Temperature card doesn't require any callback.

Updater​

card1.update(int value);
card1.update(float value);
card1.update(String value);

Or you can also update the symbol along with the value like this:

card1.update(value, "°F");

Reference​

This is a reference sketch showing positions for intializer and updater.


...

/* Temperature card initializer */
Card temperature(&dashboard, TEMPERATURE_CARD, "Temperature1");


void setup() {
  ...

  /* Temperature card updater - can be used anywhere (apart from global scope) */
  temperature.update(100);
}

void loop() {
  ...
}

- + \ No newline at end of file diff --git a/next/widgets/cards/text-input/index.html b/next/widgets/cards/text-input/index.html index 2ff6e116..9e6d1987 100644 --- a/next/widgets/cards/text-input/index.html +++ b/next/widgets/cards/text-input/index.html @@ -7,13 +7,13 @@ - +
Version: Next

Text Input Card

Pro Feature

This is an exclusive feature of DASH Pro. Check it out here.

Text Input Card Preview

Text Input Card gives you the ability to take String input from user and save them in your application. It provides you with a input box on the dashboard where user can send back text to your application.

This card is very useful for saving WiFi credentials, user ID and general information.

Initializer​

/* 
  Text Input Card
  Valid Arguments: (ESPDash dashboard, Card Type, const char* name)
*/
Card card1(&dashboard, TEXT_INPUT_CARD, "User Email");

Callback​

Text Input Card requires a callback function which will be called when we receive a input from our dashboard. In setup block, we will be calling our attachCallback function and provide a lambda (callback) function with a const char* (character array) argument.

Note: You need to call the update function and sendUpdates immediately once you receive the value in callback. Otherwise user input will not be registered on dashboard and it will keep the card stuck in 'waiting' phase.

/*
  We provide our attachCallback with a lambda function to handle incomming data
*/
card1.attachCallback([&](const char* value){
  Serial.println("[Card1] Text Input Callback Triggered: "+String(value));
  card1.update(value);
  dashboard.sendUpdates();
});

Updater​

card1.update(const char* value);
card1.update(String value);

Reference​

This is a reference sketch showing positions for intializer, callback and updater.


...

/* Week selector card initializer */
Card text(&dashboard, TEXT_INPUT_CARD, "Test Email");


void setup() {
  ...

  /* Week selector card callback */
  text.attachCallback([&](const char* value){
    Serial.println("Text Input Callback Triggered: "+String(value));
    /* Week selector card updater - you need to update the button with latest value upon firing of callback */
    text.update(value);
    /* Send update to dashboard */
    dashboard.sendUpdates();
  });
}

void loop() {
  ...
}

- + \ No newline at end of file diff --git a/next/widgets/cards/time-sync/index.html b/next/widgets/cards/time-sync/index.html index e53f618c..3bcdb492 100644 --- a/next/widgets/cards/time-sync/index.html +++ b/next/widgets/cards/time-sync/index.html @@ -7,13 +7,13 @@ - +
Version: Next

Time Sync Card

Pro Feature

This is an exclusive feature of DASH Pro. Check it out here.

Text Input Card Preview

Use the time sync card to syncronize the time of your device with your MCU. This has various applications which require precise time keeping etc.

tip

Time sync card grabs the time from your browser, so only use it when your device and MCU are known to be in the same geographical location/timezone.

Initializer​

/* 
  Time Sync Card
  Valid Arguments: (ESPDash dashboard, Card Type, const char* name)
*/
Card timesync(&dashboard, TIME_SYNC_CARD, "Time Sync");

Callback​

timesync.attachCallback([&](const char* value){
  Serial.println("Time Sync Triggered: "+String(value));
});

Updater​

note

Time sync card doesn't require any updater.

Reference​

This is a reference sketch showing positions for intializer and callback.


...

/* Time sync card initializer */
Card timesync(&dashboard, TIME_SYNC_CARD, "Time Sync");


void setup() {
  ...

  /* Time sync card callback */
  timesync.attachCallback([&](const char* value){
    Serial.println("Time Sync Triggered: "+String(value));
  });
}

void loop() {
  ...
}

- + \ No newline at end of file diff --git a/next/widgets/cards/week-selector/index.html b/next/widgets/cards/week-selector/index.html index 43368c42..762a9297 100644 --- a/next/widgets/cards/week-selector/index.html +++ b/next/widgets/cards/week-selector/index.html @@ -7,13 +7,13 @@ - +
Version: Next

Week Selector Card

Pro Feature

This is an exclusive feature of DASH Pro. Check it out here.

Week Selector Card Preview

Week selector card gives you a nice card in which days are selectable by users. This type of card is very useful in many scenarios. The output of the card is comma , separated string on days which were selected by the user.

Initializer​

/* 
  Week Selector Card
  Valid Arguments: (ESPDash dashboard, Card Type, const char* name)
*/
Card card1(&dashboard, WEEK_SELECTOR_CARD, "Select Days");

Callback​

Week selector card requires a callback function which will be called when we receive a input from our dashboard. In our setup block, we will be calling our attachCallback function and provide a lambda (callback) function with a const char* (character array) argument. Whenever a user selects a day, this callback will be triggered with a comma , separated list of days which indicate what was selected by user.

Note: You need to call the update function and sendUpdates immediately once you receive the value in callback. Otherwise user input will not be registered on dashboard and it will keep the card stuck in 'waiting' phase.

/*
  We provide our attachCallback with a lambda function to handle incomming data
  Example Value: mon,tue,wed,thu,fri,sat,sun
*/
card1.attachCallback([&](const char* days){
  Serial.println("[Card1] Week Selector Triggered: "+String(days));
  card1.update(value);
  dashboard.sendUpdates();
});

Updater​

You can also select or deselect values depending on your logic. You just need to supply the updater with a comma , separated list of days. Order of days in this string doesn't matter. Example: Supplying tue,mon,thu will show Monday, Tuesday & Thursday as selected on Week Selector Card.

card1.update(const char* value);
card1.update(String value);

Reference​

This is a reference sketch showing positions for intializer, callback and updater.


...

/* Week selector card initializer */
Card week(&dashboard, WEEK_SELECTOR_CARD, "Select Days");


void setup() {
  ...

  /* Week selector card callback */
  week.attachCallback([&](const char* days){
    Serial.println("Week Selector Callback Triggered: "+String(value));
    /* Week selector card updater - you need to update week selector with latest value upon firing of callback */
    week.update(value);
    /* Send update to dashboard */
    dashboard.sendUpdates();
  });
}

void loop() {
  ...
}

- + \ No newline at end of file diff --git a/next/widgets/charts/area/index.html b/next/widgets/charts/area/index.html index 8760d8f4..fc24eb6b 100644 --- a/next/widgets/charts/area/index.html +++ b/next/widgets/charts/area/index.html @@ -7,13 +7,13 @@ - +
Version: Next

Area Chart

Pro Feature

This is an exclusive feature of DASH Pro. Check it out here.

Preview

Initializer​

/* 
  Area Chart
  Valid Arguments: (ESPDash dashboard, Card Type, const char* name )
*/
Chart chart1(&dashboard, AREA_CHART, "Chart Name");

Updater​

Use the following functions to update the chart:

For X-Axis​

X-Axis updater uses updateX function.

/*
  Data for X Axis of our Chart
  This array can be of: `int` / `float` or `String`
    
  Note: this array should be kept in global scope. i.e. it should never be deleted from memory.
*/
String XAxis[] = {"Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"};

/*
  Update Function for Chart is as follows:
  --------
  (int array[], size_t array_size)
  or
  (float array[], size_t array_size)
  or
  (String array[], size_t array_size)
  or
  (const char* array[], size_t array_size)
*/
chart1.updateX(XAxis, 7);

X-Axis Data Types​

  • int
  • float
  • String
  • const char*

For Y-Axis​

Y-Axis updater uses updateY function.

/*
  Data for Y Axis of our Chart
  This array can be of: `int` or `float`
    
  Note: this array should be kept in global scope. i.e. it should never be deleted from memory.
*/
int YAxis[] = {0, 0, 0, 0, 0, 0, 0};

/*
  Update Function for Chart is as follows:
  --------
  (int array[], size_t array_size)
  or 
  (float array[], size_t array_size)
*/
chart1.updateY(YAxis, 7);

Y-Axis Data Types​

  • int
  • float

Reference​

This is a reference sketch showing positions for intializer and updater.


...

/* Area Chart initializer */
Chart area(&dashboard, AREA_CHART, "Chart Name");

/* XAxis & YAxis data in global scope */
int YAxis[] = {0, 0, 0, 0, 0, 0, 0};
String XAxis[] = {"Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"};

void setup() {
  ...

  /* Area chart x-axis updater - can be used anywhere (apart from global scope) */
  area.updateX(XAxis, 7); // Ideally only once in setup block

  /* Area chart y-axis updater - can be used anywhere (apart from global scope) */
  area.updateY(YAxis, 7);
}

void loop() {
  ...
}

- + \ No newline at end of file diff --git a/next/widgets/charts/bar/index.html b/next/widgets/charts/bar/index.html index 0a98359f..7006a093 100644 --- a/next/widgets/charts/bar/index.html +++ b/next/widgets/charts/bar/index.html @@ -7,13 +7,13 @@ - +
Version: Next

Bar Chart

Preview

Initializer​

/* 
  Bar Chart
  Valid Arguments: (ESPDash dashboard, Card Type, const char* name )
*/
Chart chart1(&dashboard, BAR_CHART, "Chart Name");

Updater​

Use the following functions to update the chart:

For X-Axis​

X-Axis updater uses updateX function.

/*
  Data for X Axis of our Chart
  This array can be of: `int` / `float` or `String`
    
  Note: this array should be kept in global scope. i.e. it should never be deleted from memory.
*/
String XAxis[] = {"Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"};

/*
  Update Function for Chart is as follows:
  --------
  (int array[], size_t array_size)
  or
  (float array[], size_t array_size)
  or
  (String array[], size_t array_size)
  or
  (const char* array[], size_t array_size)
*/
chart1.updateX(XAxis, 7);

X-Axis Data Types​

  • int
  • float
  • String
  • const char*

For Y-Axis​

Y-Axis updater uses updateY function.

/*
  Data for Y Axis of our Chart
  This array can be of: `int` or `float`
    
  Note: this array should be kept in global scope. i.e. it should never be deleted from memory.
*/
int YAxis[] = {0, 0, 0, 0, 0, 0, 0};

/*
  Update Function for Chart is as follows:
  --------
  (int array[], size_t array_size)
  or 
  (float array[], size_t array_size)
*/
chart1.updateY(YAxis, 7);

Y-Axis Data Types​

  • int
  • float

Reference​

This is a reference sketch showing positions for intializer and updater.


...

/* Bar Chart initializer */
Chart bar(&dashboard, BAR_CHART, "Chart Name");

/* XAxis & YAxis data in global scope */
int YAxis[] = {0, 0, 0, 0, 0, 0, 0};
String XAxis[] = {"Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"};

void setup() {
  ...

  /* Bar chart x-axis updater - can be used anywhere (apart from global scope) */
  bar.updateX(XAxis, 7); // Ideally only once in setup block

  /* Bar chart y-axis updater - can be used anywhere (apart from global scope) */
  bar.updateY(YAxis, 7);
}

void loop() {
  ...
}

- + \ No newline at end of file diff --git a/next/widgets/charts/line/index.html b/next/widgets/charts/line/index.html index 1af6cd3a..8e5c4340 100644 --- a/next/widgets/charts/line/index.html +++ b/next/widgets/charts/line/index.html @@ -7,13 +7,13 @@ - +
Version: Next

Line Chart

Pro Feature

This is an exclusive feature of DASH Pro. Check it out here.

Preview

Initializer​

/* 
  Line Chart
  Valid Arguments: (ESPDash dashboard, Card Type, const char* name )
*/
Chart chart1(&dashboard, LINE_CHART, "Chart Name");

Updater​

Use the following functions to update the chart:

For X-Axis​

X-Axis updater uses updateX function.

/*
  Data for X Axis of our Chart
  This array can be of: `int` / `float` or `String`
    
  Note: this array should be kept in global scope. i.e. it should never be deleted from memory.
*/
String XAxis[] = {"Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"};

/*
  Update Function for Chart is as follows:
  --------
  (int array[], size_t array_size)
  or
  (float array[], size_t array_size)
  or
  (String array[], size_t array_size)
  or
  (const char* array[], size_t array_size)
*/
chart1.updateX(XAxis, 7);

X-Axis Data Types​

  • int
  • float
  • String
  • const char*

For Y-Axis​

Y-Axis updater uses updateY function.

/*
  Data for Y Axis of our Chart
  This array can be of: `int` or `float`
    
  Note: this array should be kept in global scope. i.e. it should never be deleted from memory.
*/
int YAxis[] = {0, 0, 0, 0, 0, 0, 0};

/*
  Update Function for Chart is as follows:
  --------
  (int array[], size_t array_size)
  or 
  (float array[], size_t array_size)
*/
chart1.updateY(YAxis, 7);

Y-Axis Data Types​

  • int
  • float

Reference​

This is a reference sketch showing positions for intializer and updater.


...

/* Line Chart initializer */
Chart line(&dashboard, LINE_CHART, "Chart Name");

/* XAxis & YAxis data in global scope */
int YAxis[] = {0, 0, 0, 0, 0, 0, 0};
String XAxis[] = {"Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"};

void setup() {
  ...

  /* Line chart x-axis updater - can be used anywhere (apart from global scope) */
  line.updateX(XAxis, 7); // Ideally only once in setup block

  /* Line chart y-axis updater - can be used anywhere (apart from global scope) */
  line.updateY(YAxis, 7);
}

void loop() {
  ...
}

- + \ No newline at end of file diff --git a/next/widgets/charts/pie/index.html b/next/widgets/charts/pie/index.html index b1af70ce..aade788f 100644 --- a/next/widgets/charts/pie/index.html +++ b/next/widgets/charts/pie/index.html @@ -7,13 +7,13 @@ - +
Version: Next

Pie Chart

Pro Feature

This is an exclusive feature of DASH Pro. Check it out here.

Preview

Initializer​

/* 
  Pie Chart
  Valid Arguments: (ESPDash dashboard, Card Type, const char* name )
*/
Chart chart1(&dashboard, PIE_CHART, "Chart Name");

Updater​

For X-Axis​

X-Axis updater uses updateX function.

/*
  Data for X Axis of our Chart
  This array can be of: `int` / `float` or `String`
    
  Note: this array should be kept in global scope. i.e. it should never be deleted from memory.
*/
String XAxis[] = {"Biscuits", "Cookies", "Milk", "Thing4", "Thing5"};

/*
  Update Function for Chart is as follows:
  --------
  (int array[], size_t array_size)
  or
  (float array[], size_t array_size)
  or
  (String array[], size_t array_size)
  or
  (const char* array[], size_t array_size)
*/
chart1.updateX(XAxis, 5);
X-Axis Data Types​
  • int
  • float
  • String
  • const char*

For Y-Axis​

Y-Axis updater uses updateY function.

/*
  Data for Y Axis of our Chart
  This array can be of: `int` or `float`
  
  Note: this array should be kept in global scope. i.e. it should never be deleted from memory.
*/
int YAxis[] = {0, 0, 0, 0, 0};

/*
  Update Function for Chart is as follows:
  --------
  (int array[], size_t array_size)
  or 
  (float array[], size_t array_size)
*/
chart1.updateY(YAxis, 5);

Y-Axis Data Types​

  • int
  • float

Reference​

This is a reference sketch showing positions for intializer and updater.


...

/* Pie Chart initializer */
Chart pie(&dashboard, PIE_CHART, "Chart Name");

/* XAxis & YAxis data in global scope */
int YAxis[] = {0, 0, 0, 0, 0};
String XAxis[] = {"Biscuits", "Cookies", "Milk", "Thing4", "Thing5"};

void setup() {
  ...

  /* Pie Chart x-axis updater - can be used anywhere (apart from global scope) */
  pie.updateX(XAxis, 5); // Ideally only once in setup block

  /* Pie Chart y-axis updater - can be used anywhere (apart from global scope) */
  pie.updateY(YAxis, 5);
}

void loop() {
  ...
}
- + \ No newline at end of file diff --git a/next/widgets/custom-statistics/index.html b/next/widgets/custom-statistics/index.html index 772395cc..1a5538e9 100644 --- a/next/widgets/custom-statistics/index.html +++ b/next/widgets/custom-statistics/index.html @@ -7,13 +7,13 @@ - +
Version: Next

Statistics

Concept Diagram

ESP-DASH has a dedicated page called "Statistics" on the dashboard which contain key-value pairs of system statistics ( heap, flash usage etc. ) by default. With the launch of ESP-DASH V4, user defined statistics are now also part of the library! You can now add your own statitics to this page. 🎉

Note: System statistics can be turned off any time, you may look at Disable Statistics page.

Example​

Initializer:​
Statistic stat1(&dashboard, "Key", "Value");
Update Value:​
stat1.set("New Value");
Update both Key & Value:​
stat1.set("New Key", "New Value");
- + \ No newline at end of file diff --git a/next/widgets/tabs/index.html b/next/widgets/tabs/index.html index 2e2950aa..9677bc69 100644 --- a/next/widgets/tabs/index.html +++ b/next/widgets/tabs/index.html @@ -7,13 +7,13 @@ - +
Version: Next

Tabs

Pro Feature

This is an exclusive feature of DASH Pro. Check it out here.


Concept Diagram

Tabs in ESP-DASH allow you to create multiple pages to organize and sort your various cards & charts. This feature comes particularly useful when there are all a lot of widgets.

By default, ESP-DASH puts everything into 'Overview' Tab. If every card or chart is assigned a custom tab, then the dashboard will automatically hide the overview tab from sidebar.

Example​

Initializer:​

Initializer should be kept in global scope. ( ie. outside of any function in your sketch )

Tab tab1(&dashboard, "Custom Tab 1");
Set Tab:​

Once a tab has been created, you need to set the tab for relevant cards and charts using setTab function of Card or Chart class. setTab accepts a pointer to the tab which we just created.

card1.setTab(&tab1);
chart1.setTab(&tab1);
- + \ No newline at end of file diff --git a/v3.x.x/cards/air/index.html b/v3.x.x/cards/air/index.html index 36537497..e2709ee7 100644 --- a/v3.x.x/cards/air/index.html +++ b/v3.x.x/cards/air/index.html @@ -7,13 +7,13 @@ - +
Version: v3.x.x

Air Card

This feature is available in DASH Pro only.

Preview:​

Preview
Preview

This card adds a distinctive air/wind icon, and just like generic card you can add a symbol which will be appended to your data. This card can be used to show something related to air pressure/wind speed etc.


Type:​

AIR_CARD


Valid Data Types:​

  • int
  • float
  • String

Initializer:​

/* 
  Air Card
  Valid Arguments: (ESPDash dashboard, Card Type, const char* name, const char* symbol (optional) )
*/
Card card1(&dashboard, AIR_CARD, "Power Consumption", "kWh");

Updaters:​

card1.update(int value);
card1.update(float value);
card1.update(String value);

Or you can also update the symbol along with the value like this:

card1.update(value, "kWh");


- + \ No newline at end of file diff --git a/v3.x.x/cards/button/index.html b/v3.x.x/cards/button/index.html index 380e13bc..3d32f29c 100644 --- a/v3.x.x/cards/button/index.html +++ b/v3.x.x/cards/button/index.html @@ -7,13 +7,13 @@ - +
Version: v3.x.x

Button Card

Preview:​

Button Card Preview
Button Card Preview

Button card adds a interactive toggle button to your dashboard. This provides you with a simple true or false input from your dashboard.


Type:​

BUTTON_CARD


Valid Data Types:​

  • bool

Initializer:​

/* 
  Button Card
  Valid Arguments: (ESPDash dashboard, Card Type, const char* name)
*/
Card card1(&dashboard, BUTTON_CARD, "Test Button");

Callback:​

Button card requires a callback function which will be executed when we receive a input from our dashboard. In this example, we will use the attachCallback function and provide a lambda function with a boolean argument.

In the case of button card, the value sent by your dashboard will be opposite of your current value. For Example: If your button is set to false, then clicking that button on dashboard will trigger this callback with true.

Note: You need to call the update function and sendUpdates immediately once you receive the value in callback. Otherwise user input will not be registered on dashboard.

/*
  We provide our attachCallback with a lambda function to handle incomming data
  `value` is the boolean sent from your dashboard
*/
card1.attachCallback([&](bool value){
  Serial.println("[Card1] Button Callback Triggered: "+String((value)?"true":"false"));
  card1.update(value);
  dashboard.sendUpdates();
});

Updaters:​

card1.update(true);
card1.update(false);


- + \ No newline at end of file diff --git a/v3.x.x/cards/energy/index.html b/v3.x.x/cards/energy/index.html index 5180647a..40d1c648 100644 --- a/v3.x.x/cards/energy/index.html +++ b/v3.x.x/cards/energy/index.html @@ -7,13 +7,13 @@ - +
Version: v3.x.x

Energy Card

This feature is available in DASH Pro only.

Preview:​

Energy Card Preview

This card adds a distinctive energy/power icon, and just like generic card you can add a symbol which will be appended to your data. This card can be used to show something related to power consumption and usage etc.


Type:​

ENERGY_CARD


Valid Data Types:​

  • int
  • float
  • String

Initializer:​

/* 
  Energy Card
  Valid Arguments: (ESPDash dashboard, Card Type, const char* name, const char* symbol (optional) )
*/
Card card1(&dashboard, ENERGY_CARD, "Power Consumption", "kWh");

Updaters:​

card1.update(int value);
card1.update(float value);
card1.update(String value);

Or you can also update the symbol along with the value like this:

card1.update(value, "kWh");


- + \ No newline at end of file diff --git a/v3.x.x/cards/generic/index.html b/v3.x.x/cards/generic/index.html index 11826599..1c6b37d0 100644 --- a/v3.x.x/cards/generic/index.html +++ b/v3.x.x/cards/generic/index.html @@ -7,13 +7,13 @@ - +
Version: v3.x.x

Generic Card

Preview:​

Preview

Generic card is the 'fits-all-types' card, which you can use to display any kind of value. It's mostly used when you want to display numbers, strings etc which don't relate to any other card in the list.

Note: If you can't find the card which you are looking for, you can always raise request for more cards on the repository by creating an issue.

Type:​

GENERIC_CARD


Valid Data Types:​

  • int
  • bool
  • float
  • String

Initializer:​

/* 
  Generic Card
  Valid Arguments: (ESPDash dashboard, Card Type, const char* name, const char* symbol (optional) )
*/
Card card1(&dashboard, GENERIC_CARD, "Generic1");

Updaters:​

card1.update(int value);
card1.update(bool value);
card1.update(float value);
card1.update(String value);


- + \ No newline at end of file diff --git a/v3.x.x/cards/humidity/index.html b/v3.x.x/cards/humidity/index.html index 277a3a9c..1894e9c7 100644 --- a/v3.x.x/cards/humidity/index.html +++ b/v3.x.x/cards/humidity/index.html @@ -7,13 +7,13 @@ - +
Version: v3.x.x

Humidity Card

Preview:​

Preview

This card adds a distinctive humidity icon, and just like generic card you can add a symbol which will be appended to your data.


Type:​

HUMIDITY_CARD


Valid Data Types:​

  • int
  • float
  • String

Initializer:​

/* 
  Humidity Card
  Valid Arguments: (ESPDash dashboard, Card Type, const char* name, const char* symbol (optional) )
*/
Card card1(&dashboard, HUMIDITY_CARD, "Humidity1", "%");

Updaters:​

card1.update(int value);
card1.update(float value);
card1.update(String value);

Or you can also update the symbol along with the value like this:

card1.update(value, "RH");


- + \ No newline at end of file diff --git a/v3.x.x/cards/joystick/index.html b/v3.x.x/cards/joystick/index.html index c9884dac..50bffa5b 100644 --- a/v3.x.x/cards/joystick/index.html +++ b/v3.x.x/cards/joystick/index.html @@ -7,14 +7,14 @@ - +
Version: v3.x.x

Joystick Card

This feature is available in DASH Pro only.

Preview:​


Preview

This card adds a joystick to your dashboard to control some stuff and provides you with easy to interpret directional data via callback. You can even lock direction of the joystick to X or Y axis.


Type:​

JOYSTICK_CARD


Initializer:​

/* 
  Joystick Card
  Valid Arguments: (ESPDash dashboard, Card Type, const char* name, const char* directionLock (optional) )
*/
Card joystick(&dashboard, JOYSTICK_CARD, "Joystick 1");

Direction Lock:​

You can lock joystick to X or Y Axis:

Supply it with lockX as 4th argument and it will lock to X axis.

Card joystick(&dashboard, JOYSTICK_CARD, "Joystick 1", "lockX");

Supply it with lockY as 4th argument and it will lock to Y axis.

Card joystick(&dashboard, JOYSTICK_CARD, "Joystick 1", "lockY");

By default, joystick works on both axis.

Callback:​

Joystick Card requires a callback function which will be called when we receive a input from our dashboard. In setup block, we will be calling our attachCallback function and provide a lambda (callback) function with a const char* (character array) argument.

Joystick card has 2 callbacks, directional and coordinates:

Directional Callback:​

This callback will return the active direction of your joystick when it's moved. It will be one of the following:

  • up
  • down
  • left
  • right
  • idle
/*
  We provide our attachCallback with a lambda function to handle incomming data
  `value` is the direction of joystick 'up', 'down', 'left', 'right' or 'idle'
*/
joystick.attachCallback([&](const char* direction){
  Serial.println("[Joystick] Current Direction: "+String(direction));
});
Coordinates Callback:​

This callback will return the active coordinates of the thumb of your joystick when it's moved. It will provide x and y coordinates which ranges from -60 to 60 on each axis.

In case of X axis: -60 is left, 60 is right. For Y axis: -60 is up, and 60 is bottom.

/*
  We provide our attachCallback with a lambda function to handle incomming data.
  In this case, we will be getting x and y axis coordinates in range of -60 to 60
*/
joystick.attachCallback([&](int8_t x, int8_t y){
  Serial.printf("[Joystick] X Axis: %d, Y Axis: %d\n", x, y);
});


- + \ No newline at end of file diff --git a/v3.x.x/cards/progress/index.html b/v3.x.x/cards/progress/index.html index 4e86dca4..7b8deea5 100644 --- a/v3.x.x/cards/progress/index.html +++ b/v3.x.x/cards/progress/index.html @@ -7,13 +7,13 @@ - +
Version: v3.x.x

Progress Card

Preview:​

Preview

This card displays a horizontal range based on a integer or a float value. It makes data visualization user friendly.


Type:​

PROGRESS_CARD


Valid Data Types:​

  • int
  • float

Initializer:​

With progress card, Initializer requires min & max range.

/* 
  Progress Card
  Valid Arguments: (ESPDash dashboard, Card Type, const char* name, const char* symbol (optional), int min, int max)
*/
Card card1(&dashboard, PROGRESS_CARD, "Progress1", "", 0, 255);

Updaters:​

card1.update(int value);
card1.update(float value);

Or, update symbol along your value:

card1.update(244, "%");
- + \ No newline at end of file diff --git a/v3.x.x/cards/slider/index.html b/v3.x.x/cards/slider/index.html index 82c3b6a4..4aef3dcc 100644 --- a/v3.x.x/cards/slider/index.html +++ b/v3.x.x/cards/slider/index.html @@ -7,13 +7,13 @@ - +
Version: v3.x.x

Slider Card

Preview:​


Preview

This card adds a interactive horizontal slider to your dashboard. Slider card is useful when you require a integer input within a certain range. ( Example use case: LED brightness control )


Type:​

SLIDER_CARD


Valid Data Types:​

  • int

Initializer:​

With slider card, Initializer requires min & max range.

/* 
  Slider Card
  Valid Arguments: (ESPDash dashboard, Card Type, const char* name, const char* symbol (optional), int min, int max)
*/
Card card1(&dashboard, SLIDER_CARD, "Test Slider", "", 0, 255);

Callback:​

Slider Card requires a callback function which will be called when we receive a input from our dashboard. We will be calling our attachCallback function and provide a lambda function with a int argument.

Note: You need to call the update function and sendUpdates immediately once you receive the value in callback. Otherwise user input will not be registered on dashboard.

/*
  We provide our attachCallback with a lambda function to handle incomming data
  `value` is the boolean sent from your dashboard
*/
card1.attachCallback([&](int value){
  Serial.println("[Card1] Slider Callback Triggered: "+String(value));
  card1.update(value);
  dashboard.sendUpdates();
});

Updaters:​

card1.update(int value);

Or, update symbol along your value:

card1.update(244, "%");
- + \ No newline at end of file diff --git a/v3.x.x/cards/status/index.html b/v3.x.x/cards/status/index.html index 5d75bc0c..b5ff32ec 100644 --- a/v3.x.x/cards/status/index.html +++ b/v3.x.x/cards/status/index.html @@ -7,13 +7,13 @@ - +
Version: v3.x.x

Status Card

Preview:​

PreviewPreviewPreviewPreview

As it's name suggests, status card is used to display some kind of status on your dashboard. It can show 4 different kinds of status along with a short message.


Type:​

STATUS_CARD


Valid Data Types:​

  • String

Valid Statuses:​

  • "success" - Green
  • "danger" - Red
  • "warning" - Yellow
  • "idle" - Grey

Initializer:​

/* 
  Status Card
  Valid Arguments: (ESPDash dashboard, Card Type, const char* name, const char* status (optional) )
*/
Card card1(&dashboard, STATUS_CARD, "Test Status", "success");

Updaters:​

Status card updater allows you to set a message:

card1.update("message");

Or, message + status at the same time:

card1.update("Message", "success");
- + \ No newline at end of file diff --git a/v3.x.x/cards/temperature/index.html b/v3.x.x/cards/temperature/index.html index 83ea0f68..2041c1ac 100644 --- a/v3.x.x/cards/temperature/index.html +++ b/v3.x.x/cards/temperature/index.html @@ -7,13 +7,13 @@ - +
Version: v3.x.x

Temperature Card

Preview:​

Preview

This card adds a distinctive temperature icon, and just like generic card you can add a symbol which will be appended to your data.


Type:​

TEMPERATURE_CARD


Valid Data Types:​

  • int
  • float
  • String

Initializer:​

/* 
  Temperature Card
  Valid Arguments: (ESPDash dashboard, Card Type, const char* name, const char* symbol (optional) )
*/
Card card1(&dashboard, TEMPERATURE_CARD, "Temperature1", "°C");

Updaters:​

card1.update(int value);
card1.update(float value);
card1.update(String value);

Or you can also update the symbol along with the value like this:

card1.update(value, "°F");


- + \ No newline at end of file diff --git a/v3.x.x/cards/text-input/index.html b/v3.x.x/cards/text-input/index.html index 821ac0a6..8f174d68 100644 --- a/v3.x.x/cards/text-input/index.html +++ b/v3.x.x/cards/text-input/index.html @@ -7,13 +7,13 @@ - +
Version: v3.x.x

Text Input Card

This feature is available in DASH Pro only.

Preview:​

Energy Card Preview

Text Input Card gives you the ability to take String input from user and save them in your application. It provides you with a input box on the dashboard where user can send back text to your application.

This card is very useful for saving WiFi credentials, passwords and general information.


Type:​

TEXT_INPUT_CARD


Valid Data Types:​

  • String

Initializer:​

/* 
  Energy Card
  Valid Arguments: (ESPDash dashboard, Card Type, const char* name)
*/
Card card1(&dashboard, TEXT_INPUT_CARD, "User Email");

Callback:​

Text Input Card requires a callback function which will be called when we receive a input from our dashboard. In setup block, we will be calling our attachCallback function and provide a lambda (callback) function with a const char* (character array) argument.

Note: You need to call the update function and sendUpdates immediately once you receive the value in callback. Otherwise user input will not be registered on dashboard and it will keep the card stuck in 'waiting' phase.

/*
  We provide our attachCallback with a lambda function to handle incomming data
  `value` is the boolean sent from your dashboard
*/
card1.attachCallback([&](const char* value){
  Serial.println("[Card1] Text Input Callback Triggered: "+String(value));
  card1.update(value);
  dashboard.sendUpdates();
});

Updaters:​

card1.update(const char* value);
card1.update(String value);
- + \ No newline at end of file diff --git a/v3.x.x/category/cards/index.html b/v3.x.x/category/cards/index.html index 4c502883..cc26449c 100644 --- a/v3.x.x/category/cards/index.html +++ b/v3.x.x/category/cards/index.html @@ -7,13 +7,13 @@ - +
Version: v3.x.x

Cards

Cards are one of the key elements in ESP-DASH which let you display or recieve data back from the user. Below you can find every type of card which ESP-DASH provides you with:

- + \ No newline at end of file diff --git a/v3.x.x/category/charts/index.html b/v3.x.x/category/charts/index.html index 826f3e30..33222661 100644 --- a/v3.x.x/category/charts/index.html +++ b/v3.x.x/category/charts/index.html @@ -7,13 +7,13 @@ - +
Version: v3.x.x

Charts

Charts let you display historical records and arrays in a easy-to-undestand manner. Charts in ESP-DASH are extremely useful when it comes to display data over span of time. The following charts are included in the library:

- + \ No newline at end of file diff --git a/v3.x.x/charts/area/index.html b/v3.x.x/charts/area/index.html index f683fd5b..489562be 100644 --- a/v3.x.x/charts/area/index.html +++ b/v3.x.x/charts/area/index.html @@ -7,13 +7,13 @@ - +
Version: v3.x.x

Area Chart

This feature is available in DASH Pro only.

Preview:​

Preview

Similar to line chart, area chart fills the space below it with a color. You can aggregate large amount of data in form of arrays and display them in a area chart.


Type:​

AREA_CHART


Valid Data Types for X-Axis:​

  • int
  • float
  • String

Valid Data Types for Y-Axis:​

  • int
  • float

Initializer:​

/* 
  Area Chart
  Valid Arguments: (ESPDash dashboard, Card Type, const char* name )
*/
Chart chart1(&dashboard, AREA_CHART, "Chart Name");

Updaters:​

For X-Axis:​

X-Axis updater uses updateX function.

/*
  Data for X Axis of our Chart
  This array can be of: `int` / `float` or `String`
*/
String XAxis[] = {"Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"};

/*
  Update Function for Chart is as follows:
  --------
  (int array[], size_t array_size)
  or
  (float array[], size_t array_size)
  or
  (String array[], size_t array_size)
*/
chart1.updateX(XAxis, 7);
For Y-Axis:​

Y-Axis updater uses updateY function.

/*
  Data for Y Axis of our Chart
  This array can be of: `int` or `float`
*/
int YAxis[] = {0, 0, 0, 0, 0, 0, 0};

/*
  Update Function for Chart is as follows:
  --------
  (int array[], size_t array_size)
  or 
  (float array[], size_t array_size)
*/
chart1.updateY(YAxis, 7);
- + \ No newline at end of file diff --git a/v3.x.x/charts/bar/index.html b/v3.x.x/charts/bar/index.html index 06938937..4969e4bc 100644 --- a/v3.x.x/charts/bar/index.html +++ b/v3.x.x/charts/bar/index.html @@ -7,13 +7,13 @@ - +
Version: v3.x.x

Bar Chart

Preview:​

Preview

It's a bar chart. period.

You can aggregate large amount of data in form of arrays and display them in a bar chart.


Type:​

BAR_CHART


Valid Data Types for X-Axis:​

  • int
  • float
  • String

Valid Data Types for Y-Axis:​

  • int
  • float

Initializer:​

/* 
  Bar Chart
  Valid Arguments: (ESPDash dashboard, Card Type, const char* name )
*/
Chart chart1(&dashboard, BAR_CHART, "Chart Name");

Updaters:​

For X-Axis:​

X-Axis updater uses updateX function.

/*
  Data for X Axis of our Chart
  This array can be of: `int` / `float` or `String`
*/
String XAxis[] = {"Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"};

/*
  Update Function for Chart is as follows:
  --------
  (int array[], size_t array_size)
  or
  (float array[], size_t array_size)
  or
  (String array[], size_t array_size)
*/
chart1.updateX(XAxis, 7);
For Y-Axis:​

Y-Axis updater uses updateY function.

/*
  Data for Y Axis of our Chart
  This array can be of: `int` or `float`
*/
int YAxis[] = {0, 0, 0, 0, 0, 0, 0};

/*
  Update Function for Chart is as follows:
  --------
  (int array[], size_t array_size)
  or 
  (float array[], size_t array_size)
*/
chart1.updateY(YAxis, 7);
- + \ No newline at end of file diff --git a/v3.x.x/charts/line/index.html b/v3.x.x/charts/line/index.html index d9d34d28..205c6b91 100644 --- a/v3.x.x/charts/line/index.html +++ b/v3.x.x/charts/line/index.html @@ -7,13 +7,13 @@ - +
Version: v3.x.x

Line Chart

This feature is available in DASH Pro only.

Preview:​

Preview

Second form of chart in ESP-DASH is the line chart. It lets you have linear data displayed in form of a connected line istead of bars. You can aggregate large amount of data in form of arrays and display them in a line chart.


Type:​

LINE_CHART


Valid Data Types for X-Axis:​

  • int
  • float
  • String

Valid Data Types for Y-Axis:​

  • int
  • float

Initializer:​

/* 
  Line Chart
  Valid Arguments: (ESPDash dashboard, Card Type, const char* name )
*/
Chart chart1(&dashboard, LINE_CHART, "Chart Name");

Updaters:​

For X-Axis:​

X-Axis updater uses updateX function.

/*
  Data for X Axis of our Chart
  This array can be of: `int` / `float` or `String`
*/
String XAxis[] = {"Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"};

/*
  Update Function for Chart is as follows:
  --------
  (int array[], size_t array_size)
  or
  (float array[], size_t array_size)
  or
  (String array[], size_t array_size)
*/
chart1.updateX(XAxis, 7);
For Y-Axis:​

Y-Axis updater uses updateY function.

/*
  Data for Y Axis of our Chart
  This array can be of: `int` or `float`
*/
int YAxis[] = {0, 0, 0, 0, 0, 0, 0};

/*
  Update Function for Chart is as follows:
  --------
  (int array[], size_t array_size)
  or 
  (float array[], size_t array_size)
*/
chart1.updateY(YAxis, 7);
- + \ No newline at end of file diff --git a/v3.x.x/charts/pie/index.html b/v3.x.x/charts/pie/index.html index 6407478e..a96fea4e 100644 --- a/v3.x.x/charts/pie/index.html +++ b/v3.x.x/charts/pie/index.html @@ -7,13 +7,13 @@ - +
Version: v3.x.x

Pie Chart

This feature is available in DASH Pro only.

Preview:​

Preview

Pie chart is a circular chart used for displaying various data where you can represent your data in a circular form.


Type:​

PIE_CHART


Valid Data Types for X-Axis:​

  • int
  • float
  • String

Valid Data Types for Y-Axis:​

  • int
  • float

Initializer:​

/* 
  Pie Chart
  Valid Arguments: (ESPDash dashboard, Card Type, const char* name )
*/
Chart chart1(&dashboard, PIE_CHART, "Chart Name");

Updaters:​

For X-Axis:​

X-Axis updater uses updateX function.

/*
  Data for X Axis of our Chart
  This array can be of: `int` / `float` or `String`
*/
String XAxis[] = {"Biscuits", "Cookies", "Milk", "Thing4", "Thing5"};

/*
  Update Function for Chart is as follows:
  --------
  (int array[], size_t array_size)
  or
  (float array[], size_t array_size)
  or
  (String array[], size_t array_size)
*/
chart1.updateX(XAxis, 5);
For Y-Axis:​

Y-Axis updater uses updateY function.

/*
  Data for Y Axis of our Chart
  This array can be of: `int` or `float`
*/
int YAxis[] = {0, 0, 0, 0, 0};

/*
  Update Function for Chart is as follows:
  --------
  (int array[], size_t array_size)
  or 
  (float array[], size_t array_size)
*/
chart1.updateY(YAxis, 5);
- + \ No newline at end of file diff --git a/v3.x.x/concept/index.html b/v3.x.x/concept/index.html index 62165916..869092bd 100644 --- a/v3.x.x/concept/index.html +++ b/v3.x.x/concept/index.html @@ -7,13 +7,13 @@ - +
Version: v3.x.x

Concept of DASH

The whole concept of ESP-DASH is around the idea of having 'Cards' and 'Charts' ( UI components ) on our dashboard. Therefore with V3, we divided the whole library into 3 separate classes:

  1. ESPDash ( ESPDash.h )
  2. Card ( Card.h )
  3. Chart ( Chart.h )

Concept Diagram

All of these classes serve their very own purpose and work harmoniously with a low heap footprint. Let's know more about the function of each class:

1. ESPDash Class​

ESPDash class handles the networking part of our dashboard. It takes AsyncWebServer as a argument and connects itself to serve DASH V3 webpage from our MCU's program memory. This class is responsible for the transfer of card/chart data between webpage and your sketch.

2. Card Class​

Our dashboard comprises of 'Cards' & 'Charts' and in our library, these are primarly data handling classes. Their main purpose is just to store data in their relevant position.

Card comprises of many sub-types ( for example: generic, temperature, humidity etc. ) which provides you great data visiualization choices.

3. Chart Class​

Similar to Card Class, Chart handles the data for creating charts on our dashboard.

- + \ No newline at end of file diff --git a/v3.x.x/getting-started/index.html b/v3.x.x/getting-started/index.html index 817b5db7..6e142bd7 100644 --- a/v3.x.x/getting-started/index.html +++ b/v3.x.x/getting-started/index.html @@ -7,13 +7,13 @@ - +
Version: v3.x.x

Getting Started

To get started with ESP-DASH, we will be creating our basic example step by step and learn what each setup does:


Part 1: Include Dependencies​

We have used conditional compilation in this part therefore the code will work for both ESP8266 & ESP32.

#include <Arduino.h>
#if defined(ESP8266)
  /* ESP8266 Dependencies */
  #include <ESP8266WiFi.h>
  #include <ESPAsyncTCP.h>
  #include <ESPAsyncWebServer.h>
#elif defined(ESP32)
  /* ESP32 Dependencies */
  #include <WiFi.h>
  #include <AsyncTCP.h>
  #include <ESPAsyncWebServer.h>
#endif
#include <ESPDash.h>


Part 2: Create AsyncWebServer Instance​

/* Start Webserver */
AsyncWebServer server(80);


Part 3: Attach ESP-DASH Instance​

/* Attach ESP-DASH to AsyncWebServer */
ESPDash dashboard(&server);


Part 4: Create Cards​

In this step, we will creating ESP-DASH cards and passing our dasboard instance as a first argument so that they can add / remove themselves.

After we are done with this guide, Please take a look at Cards section to know more about the types of cards available to us.

/* 
  Dashboard Cards 
  Format - (Dashboard Instance, Card Type, Card Name, Card Symbol(optional) )
*/
Card temperature(&dashboard, TEMPERATURE_CARD, "Temperature", "°C");
Card humidity(&dashboard, HUMIDITY_CARD, "Humidity", "%");


Part 5: Setup Block​

In our setup block, we will be adding the usual WiFi connectivity stuff and then start our AsyncWebServer with server.begin();.

void setup() {
  Serial.begin(115200);

  /* Connect WiFi */
  WiFi.mode(WIFI_STA);
  WiFi.begin("ssid", "password");
  if (WiFi.waitForConnectResult() != WL_CONNECTED) {
      Serial.printf("WiFi Failed!\n");
      return;
  }
  Serial.print("IP Address: ");
  Serial.println(WiFi.localIP());

  /* Start AsyncWebServer */
  server.begin();
}


Part 5: Loop Block​

In our loop block, we will be doing 2 things:

  1. Updating card values
  2. Sending updates to our dashboard
1. Updating Card Values​

Remember the 'Cards' we created in 4th part? We will now access those cards by their variable and update them using the update function which is provided with our card's class:

temperature.update((int)random(0, 50));
2. Sending updates to our Dashboard​

Once we have updated values of our card(s), we will call the sendUpdates() function of our dashboard instance and it will send new card values to every connected client in real time.

dashboard.sendUpdates();

Technically speaking, You can call these functions anywhere in your sketch, but for demonstration purposes we have called them in our loop block.

Complete Loop Block:​
void loop() {
  /* Update Card Values */
  temperature.update((int)random(0, 50));
  humidity.update((int)random(0, 100));

  /* Send Updates to our Dashboard (realtime) */
  dashboard.sendUpdates();

  /* 
    Delay is just for demonstration purposes in this example,
    Replace this code with 'millis interval' in your final project.
  */
  delay(3000);
}


Final Code​

That's it! Now we can just upload this sketch to our MCU and access the dashboard via it's IP address. ( Make sure to change the ssid and password in our sketch according to your Access Point )

/*
  -----------------------
  ESPDASH - Basic Example
  -----------------------

  Skill Level: Intermediate

  In this example we will be creating a basic dashboard which consists 
  of some cards and then update them in realtime ( at 3s interval ).

  Github: https://github.com/ayushsharma82/ESP-DASH
  WiKi: https://ayushsharma82.github.io/ESP-DASH/

  Works with both ESP8266 & ESP32
*/

#include <Arduino.h>
#if defined(ESP8266)
  /* ESP8266 Dependencies */
  #include <ESP8266WiFi.h>
  #include <ESPAsyncTCP.h>
  #include <ESPAsyncWebServer.h>
#elif defined(ESP32)
  /* ESP32 Dependencies */
  #include <WiFi.h>
  #include <AsyncTCP.h>
  #include <ESPAsyncWebServer.h>
#endif
#include <ESPDash.h>


/* Your WiFi Credentials */
const char* ssid = ""; // SSID
const char* password = ""; // Password

/* Start Webserver */
AsyncWebServer server(80);

/* Attach ESP-DASH to AsyncWebServer */
ESPDash dashboard(&server); 

/* 
  Dashboard Cards 
  Format - (Dashboard Instance, Card Type, Card Name, Card Symbol(optional) )
*/
Card temperature(&dashboard, TEMPERATURE_CARD, "Temperature", "°C");
Card humidity(&dashboard, HUMIDITY_CARD, "Humidity", "%");


void setup() {
  Serial.begin(115200);

  /* Connect WiFi */
  WiFi.mode(WIFI_STA);
  WiFi.begin(ssid, password);
  if (WiFi.waitForConnectResult() != WL_CONNECTED) {
      Serial.printf("WiFi Failed!\n");
      return;
  }
  Serial.print("IP Address: ");
  Serial.println(WiFi.localIP());

  /* Start AsyncWebServer */
  server.begin();
}

void loop() {
  /* Update Card Values */
  temperature.update((int)random(0, 50));
  humidity.update((int)random(0, 100));

  /* Send Updates to our Dashboard (realtime) */
  dashboard.sendUpdates();

  /* 
    Delay is just for demonstration purposes in this example,
    Replace this code with 'millis interval' in your final project.
  */
  delay(3000);
}
- + \ No newline at end of file diff --git a/v3.x.x/index.html b/v3.x.x/index.html index 16b1cb3e..9624ace4 100644 --- a/v3.x.x/index.html +++ b/v3.x.x/index.html @@ -7,13 +7,13 @@ - +
Version: v3.x.x






  



ESP-DASH is a C++ library for creating functional & real-time dashboards for ESP8266 & ESP32 microcontrollers. It provides you with easy to use functions and lets you create a dashboard accessible on your module's IP address.

- + \ No newline at end of file diff --git a/v3.x.x/indexing/index.html b/v3.x.x/indexing/index.html index 3393cf73..72589c09 100644 --- a/v3.x.x/indexing/index.html +++ b/v3.x.x/indexing/index.html @@ -7,13 +7,13 @@ - +
Version: v3.x.x

Card Indexing

This feature is available in DASH Pro only.


Energy Card Preview

ESP-DASH Pro provides you with a setIndex function in both cards and charts to modify the position of them on the dashboard.

Example:​

card1.setIndex(0);

Indexing works in ascending format. The lowest card index will be placed in the front of the list and the highest index will be put in the end. It allows you to set the layout according to your wish.

- + \ No newline at end of file diff --git a/v3.x.x/installation/index.html b/v3.x.x/installation/index.html index 18e68a19..2837932d 100644 --- a/v3.x.x/installation/index.html +++ b/v3.x.x/installation/index.html @@ -7,13 +7,13 @@ - +
Version: v3.x.x

Installation

ESP-DASH depends on the following open-source libraries/boards. Make sure to install them before you install ESP-DASH.

For ESP8266:​
For ESP32:​

Installing ESP-DASH​

1. Directly Through Arduino IDE - Library Manager​

Go to Sketch > Include Library > Library Manager > Search for "ESP-DASH" > Install

2. Manual Install​

For Windows:​
  • Download the Repository
  • Extract the .zip in Documents > Arduino > Libraries > {Place "ESP-DASH" folder Here}
For Linux:​
  • Download the Repository
  • Extract the .zip in Sketchbook > Libraries > {Place "ESP-DASH" folder Here}

3. Import through Arduino IDE​

  • Download the Repository
  • Go to Sketch > Include Library > Add .zip Library > Select the Downloaded .zip File.
- + \ No newline at end of file diff --git a/v3.x.x/more-examples/index.html b/v3.x.x/more-examples/index.html index 95549e5f..f88d677a 100644 --- a/v3.x.x/more-examples/index.html +++ b/v3.x.x/more-examples/index.html @@ -7,13 +7,13 @@ - +
Version: v3.x.x

Examples

There are many example sketches in our repository. You can check those out to know more about what you can do with ESP-DASH.

We have contructed every example with very clear documentation so there is less obstruction in your learning process.

You can find those examples here.

- + \ No newline at end of file diff --git a/widgets/cards/air/index.html b/widgets/cards/air/index.html index 1b314aa4..62133b9a 100644 --- a/widgets/cards/air/index.html +++ b/widgets/cards/air/index.html @@ -7,13 +7,13 @@ - +
Version: v4.x.x

Air Card

Pro Feature

This is an exclusive feature of DASH Pro. Check it out here.

Preview

This card adds a distinctive air/wind icon, and just like generic card you can add a symbol which will be appended to your data. This card can be used to show something related to air pressure/wind speed etc.

Initializer​

/* 
  Air Card
  Valid Arguments: (ESPDash dashboard, Card Type, const char* name, const char* symbol (optional) )
*/
Card card1(&dashboard, AIR_CARD, "Power Consumption", "kWh");

Callback​

note

Air card doesn't require any callback.

Updater​

card1.update(int value);
card1.update(float value);
card1.update(String value);

Or you can also update the symbol along with the value like this:

card1.update(value, "kWh");

Reference​

This is a reference sketch showing positions for intializer and updater.


...

/* Air card initializer */
Card air(&dashboard, AIR_CARD, "Wind Speed", "kmph");


void setup() {
  ...

  /* Air card updater - can be used anywhere (apart from global scope) */
  air.update(100);
}

void loop() {
  ...
}

- + \ No newline at end of file diff --git a/widgets/cards/button/index.html b/widgets/cards/button/index.html index dd17f124..6d2af1ba 100644 --- a/widgets/cards/button/index.html +++ b/widgets/cards/button/index.html @@ -7,13 +7,13 @@ - +
Version: v4.x.x

Toggle Button

Button Card PreviewButton Card Preview

Button card adds a interactive toggle button to your dashboard. This provides you with a simple 1 or 0 input from your dashboard.

Initializer​

/* 
  Button Card
  Valid Arguments: (ESPDash dashboard, Card Type, const char* name)
*/
Card card1(&dashboard, BUTTON_CARD, "Test Button");

Callback​

Button card requires a callback function which will be executed when we receive a input from our dashboard. In this example, we will use the attachCallback function and provide a lambda function with a boolean argument.

In the case of button card, the value sent by your dashboard will be opposite of your current value. For Example: If your button is set to 0, then clicking that button on dashboard will trigger this callback with 1.

Note: You need to call the update function and sendUpdates immediately once you receive the value in callback. Otherwise user input will not be registered on dashboard.

/*
  We provide our attachCallback with a lambda function to handle incomming data
  `value` is the boolean sent from your dashboard
*/
card1.attachCallback([&](int value){
  Serial.println("[Card1] Button Callback Triggered: "+String((value == 1)?"true":"false"));
  card1.update(value);
  dashboard.sendUpdates();
});

Updater​

card1.update(1);
card1.update(0);

Reference​

This is a reference sketch showing positions for intializer, callback and updater.


...

/* Button card initializer */
Card button(&dashboard, BUTTON_CARD, "Test Button");


void setup() {
  ...

  /* Button card callback */
  button.attachCallback([&](int value){
    Serial.println("Button Callback Triggered: "+String((value == 1)?"true":"false"));
    /* Button card updater - you need to update the button with latest value upon firing of callback */
    button.update(value);
    /* Send update to dashboard */
    dashboard.sendUpdates();
  });
}

void loop() {
  ...
}

- + \ No newline at end of file diff --git a/widgets/cards/color-picker/index.html b/widgets/cards/color-picker/index.html index 73aff8c3..7c5382e7 100644 --- a/widgets/cards/color-picker/index.html +++ b/widgets/cards/color-picker/index.html @@ -7,13 +7,13 @@ - +
Version: v4.x.x

Color Picker Card

Pro Feature

This is an exclusive feature of DASH Pro. Check it out here.

Color Picker Card Preview

With color picker card, you have an option to take an color input from user. This is particularly useful if you want to have an input for LED color, display color etc. Color picker card will return an hex string of color selected by user.

A bit more info on hex color values if you are not familiar with it: W3Schools Article

Initializer​

/* 
  Color Picker Card
  Valid Arguments: (ESPDash dashboard, Card Type, const char* name)
*/
Card card1(&dashboard, COLOR_PICKER_CARD, "Color Picker");

Callback​

Color picker card requires a callback function which will be called when we receive a input from our dashboard. In our setup block, we will be calling our attachCallback function and provide a lambda (callback) function with a const char* (character array) argument. Whenever a user selects a color, this callback will be triggered with hex value of color.

Note: You need to call the update function and sendUpdates immediately once you receive the value in callback. Otherwise user input will not be registered on dashboard and it will keep the card stuck in 'waiting' phase.

/*
  We provide our attachCallback with a lambda function to handle incomming data
  Example Value: mon,tue,wed,thu,fri,sat,sun
*/
card1.attachCallback([&](const char* hex){
  Serial.println("[Card1] Color Picker Triggered: "+String(hex));
  card1.update(value);
  dashboard.sendUpdates();
});

Updater​

You can also update the value inside color picker card using the same hex formula.

card1.update(const char* value);
card1.update(String value);

Reference​

This is a reference sketch showing positions for intializer, callback and updater.


...

/* Color picker card initializer */
Card colorpicker(&dashboard, COLOR_PICKER_CARD, "Color Picker 1");


void setup() {
  ...

  /* Color picker callback */
  colorpicker.attachCallback([&](const char* hex){
    Serial.println("Color picker callback triggered: "+String(hex));
    /* Color picker card updater - you need to update the color picker with latest value upon firing of callback */
    colorpicker.update(value);
    /* Send update to dashboard */
    dashboard.sendUpdates();
  });
}

void loop() {
  ...
}

- + \ No newline at end of file diff --git a/widgets/cards/dropdown/index.html b/widgets/cards/dropdown/index.html index 04d6ab3a..2bd29e37 100644 --- a/widgets/cards/dropdown/index.html +++ b/widgets/cards/dropdown/index.html @@ -7,13 +7,13 @@ - +
Version: v4.x.x

Dropdown Card

Pro Feature

This is an exclusive feature of DASH Pro. Check it out here.

PreviewPreview

This card adds a dropdown selectable list on your dashboard. You can pass "," comma separated list as it's secondary value with unlimited number of choices.

Initializer​

/* 
  Dropdown Card
  Valid Arguments: (ESPDash dashboard, Card Type, const char* name, const char* choices )
*/
Card card1(&dashboard, DROPDOWN_CARD, "Test Dropdown", "Option1,Option2,Option3,Option4");

Callback​

The Dropdown Card requires a callback function that will be invoked when input is received from the dashboard. This function should utilize the attachCallback method and provide a lambda function with a const char* parameter.

Note: It's essential to immediately invoke the update function and sendUpdates after receiving a value in the callback. Failure to do so will result in the user's input not being registered on the dashboard.

/*
  Here, we use a lambda function within attachCallback to handle incoming data.
  `value` represents the const char value sent from your dashboard which is equal to selected value.
*/
card1.attachCallback([&](const char* value){
  Serial.println("[Card1] Dropdown Callback Triggered: "+String(value));
  card1.update(value);
  dashboard.sendUpdates();
});

Updater​

This will change the selected value of our dropdown:

card1.update(const char* value);

Or you can also update the choices along with the value like this:

// This will change the selected value and update the choices as well
card1.update(const char* value, const char* choices);

Reference​

This is a reference sketch showing positions for intializer, callback and updater.


...

/* Dropdown card initializer */
Card dropdown(&dashboard, DROPDOWN_CARD, "Test Dropdown", "Option1,Option2,Option3,Option4");


void setup() {
  ...

  /* Dropdown card callback */
  dropdown.attachCallback([&](const char* value){
    Serial.println("Dropdown Callback Triggered: "+String(value));
    /* Dropdown card updater - you need to update the button with latest value upon firing of callback */
    dropdown.update(value);
    /* Send update to dashboard */
    dashboard.sendUpdates();
  });
}

void loop() {
  ...
}

- + \ No newline at end of file diff --git a/widgets/cards/energy/index.html b/widgets/cards/energy/index.html index 396ec8c2..47d2daab 100644 --- a/widgets/cards/energy/index.html +++ b/widgets/cards/energy/index.html @@ -7,13 +7,13 @@ - +
Version: v4.x.x

Energy Card

Pro Feature

This is an exclusive feature of DASH Pro. Check it out here.

Energy Card Preview

This card adds a distinctive energy/power icon, and just like generic card you can add a symbol which will be appended to your data. This card can be used to show something related to power consumption and usage etc.

Initializer​

/* 
  Energy Card
  Valid Arguments: (ESPDash dashboard, Card Type, const char* name, const char* symbol (optional) )
*/
Card card1(&dashboard, ENERGY_CARD, "Power Consumption", "kWh");

Callback​

note

Energy card doesn't require any callback.

Updater​

card1.update(int value);
card1.update(float value);
card1.update(String value);

Or you can also update the symbol along with the value like this:

card1.update(value, "kWh");

Reference​

This is a reference sketch showing positions for intializer and updater.


...

/* Energy card initializer */
Card energy(&dashboard, ENERGY_CARD, "Power Consumption", "kWh");


void setup() {
  ...

  /* Energy card updater - can be used anywhere (apart from global scope) */
  energy.update(100);
}

void loop() {
  ...
}

- + \ No newline at end of file diff --git a/widgets/cards/generic/index.html b/widgets/cards/generic/index.html index 63873d9a..d0acdc9d 100644 --- a/widgets/cards/generic/index.html +++ b/widgets/cards/generic/index.html @@ -7,13 +7,13 @@ - +
Version: v4.x.x

Generic Card

Preview

Generic card is the 'fits-all-types' card, which you can use to display any kind of value. It's mostly used when you want to display numbers, strings etc which don't relate to any other card in the list.

Initializer​

/* 
  Generic Card
  Valid Arguments: (ESPDash dashboard, Card Type, const char* name, const char* symbol (optional) )
*/
Card card1(&dashboard, GENERIC_CARD, "Generic1");

Callback​

note

Generic card doesn't require any callback.

Updater​

card1.update(int value);
card1.update(bool value);
card1.update(float value);
card1.update(String value);

Reference​

This is a reference sketch showing positions for intializer and updater.


...

/* Generic card initializer */
Card generic(&dashboard, GENERIC_CARD, "Generic1");


void setup() {
  ...

  /* Generic card updater - can be used anywhere (apart from global scope) */
  generic.update(100);
}

void loop() {
  ...
}

- + \ No newline at end of file diff --git a/widgets/cards/humidity/index.html b/widgets/cards/humidity/index.html index 8d0f700e..95de86de 100644 --- a/widgets/cards/humidity/index.html +++ b/widgets/cards/humidity/index.html @@ -7,13 +7,13 @@ - +
Version: v4.x.x

Humidity Card

Preview

This card adds a distinctive humidity icon, and just like generic card you can add a symbol which will be appended to your data.

Initializer​

/* 
  Humidity Card
  Valid Arguments: (ESPDash dashboard, Card Type, const char* name, const char* symbol (optional) )
*/
Card card1(&dashboard, HUMIDITY_CARD, "Humidity1", "%");

Callback​

note

Humidity card doesn't require any callback.

Updater​

card1.update(int value);
card1.update(float value);
card1.update(String value);

Or you can also update the symbol along with the value like this:

card1.update(value, "RH");

Reference​

This is a reference sketch showing positions for intializer and updater.


...

/* Humidity card initializer */
Card humidity(&dashboard, HUMIDITY_CARD, "Humidity1");


void setup() {
  ...

  /* Humidity card updater - can be used anywhere (apart from global scope) */
  humidity.update(100);
}

void loop() {
  ...
}

- + \ No newline at end of file diff --git a/widgets/cards/image/index.html b/widgets/cards/image/index.html index 36fbfc25..31154f75 100644 --- a/widgets/cards/image/index.html +++ b/widgets/cards/image/index.html @@ -7,13 +7,13 @@ - +
Version: v4.x.x

Image Card

Pro Feature

This is an exclusive feature of DASH Pro. Check it out here.

Preview

This card adds a image on your dashboard. You can pass a absolute URL to this card and it will load that image within this card on the dashboard. If the size is a bit small for you, then you can even make the card bigger by using the size value together with setSize function.

Initializer​

/* 
  Image Card
  Valid Arguments: (ESPDash dashboard, Card Type, const char* name, const char* size )
*/
Card card1(&dashboard, IMAGE_CARD, "Test Image", "lg");

Callback​

note

Image card doesn't require any callback.

Updater​

After initialization, you will have to provide the URL of the image which you want to display.

card1.update(const char* url);

Or you can also update the size of image using the second parameter. Supported sizes: "lg" and "xl"

// This will change the selected value and update the choices as well
card1.update(const char* url, const char* size);

Reference​

This is a reference sketch showing positions for intializer and updater.


...

/* Image card initializer */
Card image(&dashboard, IMAGE_CARD, "Test Image", "lg");


void setup() {
  ...

  /* Image card updater - can be used anywhere (apart from global scope) */
  image.update("https://fastly.picsum.photos/id/598/800/600.jpg?grayscale&hmac=SQ5T_OGiPMX4r1fb-gA2fU6pourJEfxmTz7g1HfXOSk");
}

void loop() {
  ...
}

- + \ No newline at end of file diff --git a/widgets/cards/joystick/index.html b/widgets/cards/joystick/index.html index 22b6b812..1b83a8f2 100644 --- a/widgets/cards/joystick/index.html +++ b/widgets/cards/joystick/index.html @@ -7,14 +7,14 @@ - +
Version: v4.x.x

Joystick Card

Pro Feature

This is an exclusive feature of DASH Pro. Check it out here.

Preview

This card adds a joystick to your dashboard to control some stuff and provides you with easy to interpret directional data via callback. You can even lock direction of the joystick to X or Y axis.

Initializer​

/* 
  Joystick Card
  Valid Arguments: (ESPDash dashboard, Card Type, const char* name, const char* directionLock (optional) )
*/
Card joystick(&dashboard, JOYSTICK_CARD, "Joystick 1");

Direction Lock​

You can lock joystick to X or Y Axis:

Supply it with lockX as 4th argument and it will lock to X axis.

Card joystick(&dashboard, JOYSTICK_CARD, "Joystick 1", "lockX");

Supply it with lockY as 4th argument and it will lock to Y axis.

Card joystick(&dashboard, JOYSTICK_CARD, "Joystick 1", "lockY");

By default, joystick works on both axis.

Callback​

Joystick Card requires a callback function which will be called when we receive a input from our dashboard. In setup block, we will be calling our attachCallback function and provide a lambda (callback) function with a const char* (character array) argument.

Joystick card has 2 callbacks, directional and coordinates:

Directional Callback​

This callback will return the active direction of your joystick when it's moved. It will be one of the following:

  • up
  • down
  • left
  • right
  • idle
/*
  We provide our attachCallback with a lambda function to handle incomming data
  `value` is the direction of joystick 'up', 'down', 'left', 'right' or 'idle'
*/
joystick.attachCallback([&](const char* direction){
  Serial.println("[Joystick] Current Direction: "+String(direction));
});
Coordinates Callback​

This callback will return the active coordinates of the thumb of your joystick when it's moved. It will provide x and y coordinates which ranges from -60 to 60 on each axis.

In case of X axis: -60 is left, 60 is right. For Y axis: -60 is up, and 60 is bottom.

/*
  We provide our attachCallback with a lambda function to handle incomming data.
  In this case, we will be getting x and y axis coordinates in range of -60 to 60
*/
joystick.attachCallback([&](int8_t x, int8_t y){
  Serial.printf("[Joystick] X Axis: %d, Y Axis: %d\n", x, y);
});

Updater​

note

Joystick card doesn't require any updater as value is not passed back to dashboard.

Reference​

This is a reference sketch showing positions for intializer and callback.


...

/* Joystick card initializer */
Card joystick(&dashboard, JOYSTICK_CARD, "Joystick 1");


void setup() {
  ...

  /* Joystick card directional callback */
  joystick.attachCallback([&](const char* direction){
    Serial.println("[Joystick] Current Direction: "+String(direction));
  });

  /* Joystick card coordinates callback */
  joystick.attachCallback([&](int8_t x, int8_t y){
    Serial.printf("[Joystick] X Axis: %d, Y Axis: %d\n", x, y);
  });
}

void loop() {
  ...
}

- + \ No newline at end of file diff --git a/widgets/cards/link/index.html b/widgets/cards/link/index.html index 96b0a499..a41734ab 100644 --- a/widgets/cards/link/index.html +++ b/widgets/cards/link/index.html @@ -7,13 +7,13 @@ - +
Version: v4.x.x

Link Card

Pro Feature

This is an exclusive feature of DASH Pro. Check it out here.

Text Input Card Preview

Link card is particularly useful when you want to redirect user to a new page. This card accepts valid URL schemes as string which will be passed on to dashboard for user action.

Initializer​

/* 
  Link Card
  Valid Arguments: (ESPDash dashboard, Card Type, const char* name)
*/
Card linkcard(&dashboard, LINK_CARD, "Test Link");

Callback​

note

Link card doesn't require any callback.

Updater​

After initialization, you will have to provide the URL which has to be opened when user clicks on the card. You can do this by calling the update function.

linkcard.update(const char* url);

Reference​

This is a reference sketch showing positions for intializer and updater.


...

/* Link card initializer */
Card linkcard(&dashboard, LINK_CARD, "Test Link");


void setup() {
  ...

  /* Link card updater - can be used anywhere (apart from global scope) */
  linkcard.update("https://espdash.pro");
}

void loop() {
  ...
}

- + \ No newline at end of file diff --git a/widgets/cards/password/index.html b/widgets/cards/password/index.html index ad7518f5..05ba0c1c 100644 --- a/widgets/cards/password/index.html +++ b/widgets/cards/password/index.html @@ -7,13 +7,13 @@ - +
Version: v4.x.x

Password Card

Pro Feature

This is an exclusive feature of DASH Pro. Check it out here.

Text Input Card Preview

Just like Text Input card, Password card gives you the ability to take String input from user in a inconspicuous way and save them in your application.

This card is very useful for saving any kind of secret or password that requires the input value to be not visible on dashboard in plain text.

Initializer​

/* 
  Password Card
  Valid Arguments: (ESPDash dashboard, Card Type, const char* name)
*/
Card card1(&dashboard, PASSWORD_CARD, "Test Pass");

Callback​

Password card requires a callback function which will be called when we receive a input from our dashboard. In setup block, we will be calling our attachCallback function and provide a lambda (callback) function with a const char* (character array) argument.

/*
  We provide our attachCallback with a lambda function to handle incomming data
*/
card1.attachCallback([&](const char* value){
  Serial.println("[Card1] Password Card Callback: "+String(value));
});

Updater​

note

Password card doesn't require any updater as value is not passed back to dashboard.

Reference​

This is a reference sketch showing positions for intializer and callback.


...

/* Password card initializer */
Card pass(&dashboard, PASSWORD_CARD, "Test Pass");


void setup() {
  ...

  /* Password card callback */
  pass.attachCallback([&](const char* value){
    Serial.println("Password Callback Triggered: "+String(value));
  });
}

void loop() {
  ...
}

- + \ No newline at end of file diff --git a/widgets/cards/progress/index.html b/widgets/cards/progress/index.html index 46ed913e..35a521e6 100644 --- a/widgets/cards/progress/index.html +++ b/widgets/cards/progress/index.html @@ -7,13 +7,13 @@ - +
Version: v4.x.x

Progress Bar Card

Preview:​

Preview

This card displays a horizontal progress bar based on a integer or a float value.

Initializer​

Initializer requires min, max of range you want to display.

/* 
  Progress Card
  Valid Arguments: (ESPDash dashboard, Card Type, const char* name, const char* symbol (optional), int min, int max)
*/
Card card1(&dashboard, PROGRESS_CARD, "Progress1", "", 0, 255);

Callback​

note

Progress bar card doesn't require any callback.

Updater​

card1.update(int value);
card1.update(float value);

Or, update symbol along your value:

card1.update(244, "%");

Reference​

This is a reference sketch showing positions for intializer and updater.


...

/* Progress card initializer */
Card progress(&dashboard, PROGRESS_CARD, "Progress1", "", 0, 255);


void setup() {
  ...

  /* Progress card updater - can be used anywhere (apart from global scope) */
  progress.update(100);
}

void loop() {
  ...
}

- + \ No newline at end of file diff --git a/widgets/cards/push-button/index.html b/widgets/cards/push-button/index.html index a26b6339..2727d449 100644 --- a/widgets/cards/push-button/index.html +++ b/widgets/cards/push-button/index.html @@ -7,13 +7,13 @@ - +
Version: v4.x.x

Push Button Card

Pro Feature

This is an exclusive feature of DASH Pro. Check it out here.

Push Button Card Preview

Push button card adds a static button on your dashboard which has no state. Whenever a user clicks this button, it triggers a callback.

Initializer​

/* 
  Push Button Card
  Valid Arguments: (ESPDash dashboard, Card Type, const char* name)
*/
Card card1(&dashboard, PUSH_BUTTON_CARD, "Push Button");

Callback​

Push button card will trigger a callback on every click by user, there is no need to update or sendUpdates to dashboard because there is no state.

/*
  We provide our attachCallback with a lambda function to handle trigger
*/
card1.attachCallback([&](){
  Serial.println("[Card1] Push Button Triggered");
});

Updater​

note

Push button card doesn't require any updater as value is not passed back to dashboard.

Reference​

This is a reference sketch showing positions for intializer and callback.


...

/* Push button card initializer */
Card pushbtn(&dashboard, PUSH_BUTTON_CARD, "Push Button");


void setup() {
  ...

  /* Push button card callback */
  pushbtn.attachCallback([&](){
    Serial.println("Push Button Callback Triggered");
  });
}

void loop() {
  ...
}

- + \ No newline at end of file diff --git a/widgets/cards/slider/index.html b/widgets/cards/slider/index.html index 26ff170e..e6dfd8ea 100644 --- a/widgets/cards/slider/index.html +++ b/widgets/cards/slider/index.html @@ -7,13 +7,13 @@ - +
Version: v4.x.x

Slider Card

Preview

This card adds a interactive horizontal slider to your dashboard. Slider card is useful when you require a integer input within a certain range. ( Example use case: LED brightness control )

Initializer​

With slider card, Initializer requires min & max range. Additionally you can also supply step as a seventh argument to set the step size of the slider.

/* 
  Slider Card
  Valid Arguments: (ESPDash dashboard, Card Type, const char* name, const char* symbol (optional), int min, int max)
*/
Card card1(&dashboard, SLIDER_CARD, "Test Slider", "", 0, 255, 1);

Callback​

Slider Card requires a callback function which will be called when we receive a input from our dashboard. We will be calling our attachCallback function and provide a lambda function with a int argument.

Note: You need to call the update function and sendUpdates immediately once you receive the value in callback. Otherwise user input will not be registered on dashboard.

/*
  We provide our attachCallback with a lambda function to handle incomming data
  `value` is the boolean sent from your dashboard
*/
card1.attachCallback([&](float value){
  Serial.println("[Card1] Slider Callback Triggered: "+String(value));
  card1.update(value);
  dashboard.sendUpdates();
});

Updater​

card1.update(int value);
card1.update(float value);

Or, update symbol along your value:

card1.update(244, "%");

Reference​

This is a reference sketch showing positions for intializer, callback and updater.


...

/* Slider card initializer */
Card slider(&dashboard, SLIDER_CARD, "Test Slider", "", 0, 255, 1);


void setup() {
  ...

  /* Slider card callback */
  slider.attachCallback([&](float value){
    Serial.println("Slider Callback Triggered: "+String(value));
    /* Slider card updater - you need to update the slider with latest value upon firing of callback */
    slider.update(value);
    /* Send update to dashboard */
    dashboard.sendUpdates();
  });
}

void loop() {
  ...
}

- + \ No newline at end of file diff --git a/widgets/cards/status/index.html b/widgets/cards/status/index.html index f56b5314..f3176684 100644 --- a/widgets/cards/status/index.html +++ b/widgets/cards/status/index.html @@ -7,13 +7,13 @@ - +
Version: v4.x.x

Status Card

PreviewPreviewPreviewPreview

As it's name suggests, status card is used to display some kind of status on your dashboard. It can show 4 different kinds of status along with a short message.

Valid Statuses​

  • s - Success (Green)
  • d - Danger (Red)
  • w - Warning (Yellow)
  • i - Idle (Grey)

Initializer​

/* 
  Status Card
  Valid Arguments: (ESPDash dashboard, Card Type, const char* name, const char* status (optional) )
*/
Card card1(&dashboard, STATUS_CARD, "Test Status", "s");

Callback​

note

Status card doesn't require any callback.

Updater​

Status card updater allows you to set a message:

card1.update("message");

Or, message + status at the same time:

card1.update("Message", "s");

Reference​

This is a reference sketch showing positions for intializer and updater.


...

/* Status card initializer */
Card status(&dashboard, STATUS_CARD, "Test Status", "s");


void setup() {
  ...

  /* Status card updater - can be used anywhere (apart from global scope) */
  status.update("Warning message", "w");
}

void loop() {
  ...
}

- + \ No newline at end of file diff --git a/widgets/cards/temperature/index.html b/widgets/cards/temperature/index.html index c355d093..6dadca93 100644 --- a/widgets/cards/temperature/index.html +++ b/widgets/cards/temperature/index.html @@ -7,13 +7,13 @@ - +
Version: v4.x.x

Temperature Card

Preview

This card adds a distinctive temperature icon, and just like generic card you can add a symbol which will be appended to your data.

Initializer​

/* 
  Temperature Card
  Valid Arguments: (ESPDash dashboard, Card Type, const char* name, const char* symbol (optional) )
*/
Card card1(&dashboard, TEMPERATURE_CARD, "Temperature1", "°C");

Callback​

note

Temperature card doesn't require any callback.

Updater​

card1.update(int value);
card1.update(float value);
card1.update(String value);

Or you can also update the symbol along with the value like this:

card1.update(value, "°F");

Reference​

This is a reference sketch showing positions for intializer and updater.


...

/* Temperature card initializer */
Card temperature(&dashboard, TEMPERATURE_CARD, "Temperature1");


void setup() {
  ...

  /* Temperature card updater - can be used anywhere (apart from global scope) */
  temperature.update(100);
}

void loop() {
  ...
}

- + \ No newline at end of file diff --git a/widgets/cards/text-input/index.html b/widgets/cards/text-input/index.html index 5ae9050b..8ef7852e 100644 --- a/widgets/cards/text-input/index.html +++ b/widgets/cards/text-input/index.html @@ -7,13 +7,13 @@ - +
Version: v4.x.x

Text Input Card

Pro Feature

This is an exclusive feature of DASH Pro. Check it out here.

Text Input Card Preview

Text Input Card gives you the ability to take String input from user and save them in your application. It provides you with a input box on the dashboard where user can send back text to your application.

This card is very useful for saving WiFi credentials, user ID and general information.

Initializer​

/* 
  Text Input Card
  Valid Arguments: (ESPDash dashboard, Card Type, const char* name)
*/
Card card1(&dashboard, TEXT_INPUT_CARD, "User Email");

Callback​

Text Input Card requires a callback function which will be called when we receive a input from our dashboard. In setup block, we will be calling our attachCallback function and provide a lambda (callback) function with a const char* (character array) argument.

Note: You need to call the update function and sendUpdates immediately once you receive the value in callback. Otherwise user input will not be registered on dashboard and it will keep the card stuck in 'waiting' phase.

/*
  We provide our attachCallback with a lambda function to handle incomming data
*/
card1.attachCallback([&](const char* value){
  Serial.println("[Card1] Text Input Callback Triggered: "+String(value));
  card1.update(value);
  dashboard.sendUpdates();
});

Updater​

card1.update(const char* value);
card1.update(String value);

Reference​

This is a reference sketch showing positions for intializer, callback and updater.


...

/* Week selector card initializer */
Card text(&dashboard, TEXT_INPUT_CARD, "Test Email");


void setup() {
  ...

  /* Week selector card callback */
  text.attachCallback([&](const char* value){
    Serial.println("Text Input Callback Triggered: "+String(value));
    /* Week selector card updater - you need to update the button with latest value upon firing of callback */
    text.update(value);
    /* Send update to dashboard */
    dashboard.sendUpdates();
  });
}

void loop() {
  ...
}

- + \ No newline at end of file diff --git a/widgets/cards/time-sync/index.html b/widgets/cards/time-sync/index.html index f1d361b8..a9d50afa 100644 --- a/widgets/cards/time-sync/index.html +++ b/widgets/cards/time-sync/index.html @@ -7,13 +7,13 @@ - +
Version: v4.x.x

Time Sync Card

Pro Feature

This is an exclusive feature of DASH Pro. Check it out here.

Text Input Card Preview

Use the time sync card to syncronize the time of your device with your MCU. This has various applications which require precise time keeping etc.

tip

Time sync card grabs the time from your browser, so only use it when your device and MCU are known to be in the same geographical location/timezone.

Initializer​

/* 
  Time Sync Card
  Valid Arguments: (ESPDash dashboard, Card Type, const char* name)
*/
Card timesync(&dashboard, TIME_SYNC_CARD, "Time Sync");

Callback​

timesync.attachCallback([&](const char* value){
  Serial.println("Time Sync Triggered: "+String(value));
});

Updater​

note

Time sync card doesn't require any updater.

Reference​

This is a reference sketch showing positions for intializer and callback.


...

/* Time sync card initializer */
Card timesync(&dashboard, TIME_SYNC_CARD, "Time Sync");


void setup() {
  ...

  /* Time sync card callback */
  timesync.attachCallback([&](const char* value){
    Serial.println("Time Sync Triggered: "+String(value));
  });
}

void loop() {
  ...
}

- + \ No newline at end of file diff --git a/widgets/cards/week-selector/index.html b/widgets/cards/week-selector/index.html index c066771d..d7cbeacc 100644 --- a/widgets/cards/week-selector/index.html +++ b/widgets/cards/week-selector/index.html @@ -7,13 +7,13 @@ - +
Version: v4.x.x

Week Selector Card

Pro Feature

This is an exclusive feature of DASH Pro. Check it out here.

Week Selector Card Preview

Week selector card gives you a nice card in which days are selectable by users. This type of card is very useful in many scenarios. The output of the card is comma , separated string on days which were selected by the user.

Initializer​

/* 
  Week Selector Card
  Valid Arguments: (ESPDash dashboard, Card Type, const char* name)
*/
Card card1(&dashboard, WEEK_SELECTOR_CARD, "Select Days");

Callback​

Week selector card requires a callback function which will be called when we receive a input from our dashboard. In our setup block, we will be calling our attachCallback function and provide a lambda (callback) function with a const char* (character array) argument. Whenever a user selects a day, this callback will be triggered with a comma , separated list of days which indicate what was selected by user.

Note: You need to call the update function and sendUpdates immediately once you receive the value in callback. Otherwise user input will not be registered on dashboard and it will keep the card stuck in 'waiting' phase.

/*
  We provide our attachCallback with a lambda function to handle incomming data
  Example Value: mon,tue,wed,thu,fri,sat,sun
*/
card1.attachCallback([&](const char* days){
  Serial.println("[Card1] Week Selector Triggered: "+String(days));
  card1.update(value);
  dashboard.sendUpdates();
});

Updater​

You can also select or deselect values depending on your logic. You just need to supply the updater with a comma , separated list of days. Order of days in this string doesn't matter. Example: Supplying tue,mon,thu will show Monday, Tuesday & Thursday as selected on Week Selector Card.

card1.update(const char* value);
card1.update(String value);

Reference​

This is a reference sketch showing positions for intializer, callback and updater.


...

/* Week selector card initializer */
Card week(&dashboard, WEEK_SELECTOR_CARD, "Select Days");


void setup() {
  ...

  /* Week selector card callback */
  week.attachCallback([&](const char* days){
    Serial.println("Week Selector Callback Triggered: "+String(value));
    /* Week selector card updater - you need to update week selector with latest value upon firing of callback */
    week.update(value);
    /* Send update to dashboard */
    dashboard.sendUpdates();
  });
}

void loop() {
  ...
}

- + \ No newline at end of file diff --git a/widgets/charts/area/index.html b/widgets/charts/area/index.html index 5b54374f..01f9f4aa 100644 --- a/widgets/charts/area/index.html +++ b/widgets/charts/area/index.html @@ -7,13 +7,13 @@ - +
Version: v4.x.x

Area Chart

Pro Feature

This is an exclusive feature of DASH Pro. Check it out here.

Preview

Initializer​

/* 
  Area Chart
  Valid Arguments: (ESPDash dashboard, Card Type, const char* name )
*/
Chart chart1(&dashboard, AREA_CHART, "Chart Name");

Updater​

Use the following functions to update the chart:

For X-Axis​

X-Axis updater uses updateX function.

/*
  Data for X Axis of our Chart
  This array can be of: `int` / `float` or `String`
    
  Note: this array should be kept in global scope. i.e. it should never be deleted from memory.
*/
String XAxis[] = {"Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"};

/*
  Update Function for Chart is as follows:
  --------
  (int array[], size_t array_size)
  or
  (float array[], size_t array_size)
  or
  (String array[], size_t array_size)
  or
  (const char* array[], size_t array_size)
*/
chart1.updateX(XAxis, 7);

X-Axis Data Types​

  • int
  • float
  • String
  • const char*

For Y-Axis​

Y-Axis updater uses updateY function.

/*
  Data for Y Axis of our Chart
  This array can be of: `int` or `float`
    
  Note: this array should be kept in global scope. i.e. it should never be deleted from memory.
*/
int YAxis[] = {0, 0, 0, 0, 0, 0, 0};

/*
  Update Function for Chart is as follows:
  --------
  (int array[], size_t array_size)
  or 
  (float array[], size_t array_size)
*/
chart1.updateY(YAxis, 7);

Y-Axis Data Types​

  • int
  • float

Reference​

This is a reference sketch showing positions for intializer and updater.


...

/* Area Chart initializer */
Chart area(&dashboard, AREA_CHART, "Chart Name");

/* XAxis & YAxis data in global scope */
int YAxis[] = {0, 0, 0, 0, 0, 0, 0};
String XAxis[] = {"Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"};

void setup() {
  ...

  /* Area chart x-axis updater - can be used anywhere (apart from global scope) */
  area.updateX(XAxis, 7); // Ideally only once in setup block

  /* Area chart y-axis updater - can be used anywhere (apart from global scope) */
  area.updateY(YAxis, 7);
}

void loop() {
  ...
}

- + \ No newline at end of file diff --git a/widgets/charts/bar/index.html b/widgets/charts/bar/index.html index 6c0b8077..c577c8be 100644 --- a/widgets/charts/bar/index.html +++ b/widgets/charts/bar/index.html @@ -7,13 +7,13 @@ - +
Version: v4.x.x

Bar Chart

Preview

Initializer​

/* 
  Bar Chart
  Valid Arguments: (ESPDash dashboard, Card Type, const char* name )
*/
Chart chart1(&dashboard, BAR_CHART, "Chart Name");

Updater​

Use the following functions to update the chart:

For X-Axis​

X-Axis updater uses updateX function.

/*
  Data for X Axis of our Chart
  This array can be of: `int` / `float` or `String`
    
  Note: this array should be kept in global scope. i.e. it should never be deleted from memory.
*/
String XAxis[] = {"Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"};

/*
  Update Function for Chart is as follows:
  --------
  (int array[], size_t array_size)
  or
  (float array[], size_t array_size)
  or
  (String array[], size_t array_size)
  or
  (const char* array[], size_t array_size)
*/
chart1.updateX(XAxis, 7);

X-Axis Data Types​

  • int
  • float
  • String
  • const char*

For Y-Axis​

Y-Axis updater uses updateY function.

/*
  Data for Y Axis of our Chart
  This array can be of: `int` or `float`
    
  Note: this array should be kept in global scope. i.e. it should never be deleted from memory.
*/
int YAxis[] = {0, 0, 0, 0, 0, 0, 0};

/*
  Update Function for Chart is as follows:
  --------
  (int array[], size_t array_size)
  or 
  (float array[], size_t array_size)
*/
chart1.updateY(YAxis, 7);

Y-Axis Data Types​

  • int
  • float

Reference​

This is a reference sketch showing positions for intializer and updater.


...

/* Bar Chart initializer */
Chart bar(&dashboard, BAR_CHART, "Chart Name");

/* XAxis & YAxis data in global scope */
int YAxis[] = {0, 0, 0, 0, 0, 0, 0};
String XAxis[] = {"Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"};

void setup() {
  ...

  /* Bar chart x-axis updater - can be used anywhere (apart from global scope) */
  bar.updateX(XAxis, 7); // Ideally only once in setup block

  /* Bar chart y-axis updater - can be used anywhere (apart from global scope) */
  bar.updateY(YAxis, 7);
}

void loop() {
  ...
}

- + \ No newline at end of file diff --git a/widgets/charts/line/index.html b/widgets/charts/line/index.html index 680c54fc..bcff9bd0 100644 --- a/widgets/charts/line/index.html +++ b/widgets/charts/line/index.html @@ -7,13 +7,13 @@ - +
Version: v4.x.x

Line Chart

Pro Feature

This is an exclusive feature of DASH Pro. Check it out here.

Preview

Initializer​

/* 
  Line Chart
  Valid Arguments: (ESPDash dashboard, Card Type, const char* name )
*/
Chart chart1(&dashboard, LINE_CHART, "Chart Name");

Updater​

Use the following functions to update the chart:

For X-Axis​

X-Axis updater uses updateX function.

/*
  Data for X Axis of our Chart
  This array can be of: `int` / `float` or `String`
    
  Note: this array should be kept in global scope. i.e. it should never be deleted from memory.
*/
String XAxis[] = {"Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"};

/*
  Update Function for Chart is as follows:
  --------
  (int array[], size_t array_size)
  or
  (float array[], size_t array_size)
  or
  (String array[], size_t array_size)
  or
  (const char* array[], size_t array_size)
*/
chart1.updateX(XAxis, 7);

X-Axis Data Types​

  • int
  • float
  • String
  • const char*

For Y-Axis​

Y-Axis updater uses updateY function.

/*
  Data for Y Axis of our Chart
  This array can be of: `int` or `float`
    
  Note: this array should be kept in global scope. i.e. it should never be deleted from memory.
*/
int YAxis[] = {0, 0, 0, 0, 0, 0, 0};

/*
  Update Function for Chart is as follows:
  --------
  (int array[], size_t array_size)
  or 
  (float array[], size_t array_size)
*/
chart1.updateY(YAxis, 7);

Y-Axis Data Types​

  • int
  • float

Reference​

This is a reference sketch showing positions for intializer and updater.


...

/* Line Chart initializer */
Chart line(&dashboard, LINE_CHART, "Chart Name");

/* XAxis & YAxis data in global scope */
int YAxis[] = {0, 0, 0, 0, 0, 0, 0};
String XAxis[] = {"Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"};

void setup() {
  ...

  /* Line chart x-axis updater - can be used anywhere (apart from global scope) */
  line.updateX(XAxis, 7); // Ideally only once in setup block

  /* Line chart y-axis updater - can be used anywhere (apart from global scope) */
  line.updateY(YAxis, 7);
}

void loop() {
  ...
}

- + \ No newline at end of file diff --git a/widgets/charts/pie/index.html b/widgets/charts/pie/index.html index 86ec353c..eacf5cab 100644 --- a/widgets/charts/pie/index.html +++ b/widgets/charts/pie/index.html @@ -7,13 +7,13 @@ - +
Version: v4.x.x

Pie Chart

Pro Feature

This is an exclusive feature of DASH Pro. Check it out here.

Preview

Initializer​

/* 
  Pie Chart
  Valid Arguments: (ESPDash dashboard, Card Type, const char* name )
*/
Chart chart1(&dashboard, PIE_CHART, "Chart Name");

Updater​

For X-Axis​

X-Axis updater uses updateX function.

/*
  Data for X Axis of our Chart
  This array can be of: `int` / `float` or `String`
    
  Note: this array should be kept in global scope. i.e. it should never be deleted from memory.
*/
String XAxis[] = {"Biscuits", "Cookies", "Milk", "Thing4", "Thing5"};

/*
  Update Function for Chart is as follows:
  --------
  (int array[], size_t array_size)
  or
  (float array[], size_t array_size)
  or
  (String array[], size_t array_size)
  or
  (const char* array[], size_t array_size)
*/
chart1.updateX(XAxis, 5);
X-Axis Data Types​
  • int
  • float
  • String
  • const char*

For Y-Axis​

Y-Axis updater uses updateY function.

/*
  Data for Y Axis of our Chart
  This array can be of: `int` or `float`
  
  Note: this array should be kept in global scope. i.e. it should never be deleted from memory.
*/
int YAxis[] = {0, 0, 0, 0, 0};

/*
  Update Function for Chart is as follows:
  --------
  (int array[], size_t array_size)
  or 
  (float array[], size_t array_size)
*/
chart1.updateY(YAxis, 5);

Y-Axis Data Types​

  • int
  • float

Reference​

This is a reference sketch showing positions for intializer and updater.


...

/* Pie Chart initializer */
Chart pie(&dashboard, PIE_CHART, "Chart Name");

/* XAxis & YAxis data in global scope */
int YAxis[] = {0, 0, 0, 0, 0};
String XAxis[] = {"Biscuits", "Cookies", "Milk", "Thing4", "Thing5"};

void setup() {
  ...

  /* Pie Chart x-axis updater - can be used anywhere (apart from global scope) */
  pie.updateX(XAxis, 5); // Ideally only once in setup block

  /* Pie Chart y-axis updater - can be used anywhere (apart from global scope) */
  pie.updateY(YAxis, 5);
}

void loop() {
  ...
}
- + \ No newline at end of file diff --git a/widgets/custom-statistics/index.html b/widgets/custom-statistics/index.html index 1f561069..8100abe3 100644 --- a/widgets/custom-statistics/index.html +++ b/widgets/custom-statistics/index.html @@ -7,13 +7,13 @@ - +
Version: v4.x.x

Statistics

Concept Diagram

ESP-DASH has a dedicated page called "Statistics" on the dashboard which contain key-value pairs of system statistics ( heap, flash usage etc. ) by default. With the launch of ESP-DASH V4, user defined statistics are now also part of the library! You can now add your own statitics to this page. 🎉

Note: System statistics can be turned off any time, you may look at Disable Statistics page.

Example​

Initializer:​
Statistic stat1(&dashboard, "Key", "Value");
Update Value:​
stat1.set("New Value");
Update both Key & Value:​
stat1.set("New Key", "New Value");
- + \ No newline at end of file diff --git a/widgets/tabs/index.html b/widgets/tabs/index.html index 459de6ae..da625661 100644 --- a/widgets/tabs/index.html +++ b/widgets/tabs/index.html @@ -7,13 +7,13 @@ - +
Version: v4.x.x

Tabs

Pro Feature

This is an exclusive feature of DASH Pro. Check it out here.


Concept Diagram

Tabs in ESP-DASH allow you to create multiple pages to organize and sort your various cards & charts. This feature comes particularly useful when there are all a lot of widgets.

By default, ESP-DASH puts everything into 'Overview' Tab. If every card or chart is assigned a custom tab, then the dashboard will automatically hide the overview tab from sidebar.

Example​

Initializer:​

Initializer should be kept in global scope. ( ie. outside of any function in your sketch )

Tab tab1(&dashboard, "Custom Tab 1");
Set Tab:​

Once a tab has been created, you need to set the tab for relevant cards and charts using setTab function of Card or Chart class. setTab accepts a pointer to the tab which we just created.

card1.setTab(&tab1);
chart1.setTab(&tab1);
- + \ No newline at end of file