From 6c70074e91877ba4040057d1910209f9273dbe47 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" <41898282+github-actions[bot]@users.noreply.github.com> Date: Mon, 5 Feb 2024 14:31:21 +0000 Subject: [PATCH] deploy: 3d64b6518374ca5984aefc18d0e64d0263398971 --- 404.html | 4 ++-- assets/js/{6e381f33.f663af64.js => 6e381f33.aff6b99f.js} | 2 +- assets/js/{a8d2d056.91180e93.js => a8d2d056.8b45b196.js} | 2 +- assets/js/{f889aa71.c0c2ace8.js => f889aa71.ae1e80b4.js} | 2 +- .../{runtime~main.88a92253.js => runtime~main.1b1df3a1.js} | 2 +- cards/air/index.html | 4 ++-- cards/button/index.html | 4 ++-- cards/dropdown/index.html | 4 ++-- cards/energy/index.html | 4 ++-- cards/generic/index.html | 4 ++-- cards/humidity/index.html | 4 ++-- cards/image/index.html | 4 ++-- cards/joystick/index.html | 4 ++-- cards/link/index.html | 4 ++-- cards/password/index.html | 4 ++-- cards/progress/index.html | 4 ++-- cards/push-button/index.html | 4 ++-- cards/slider/index.html | 4 ++-- cards/status/index.html | 4 ++-- cards/temperature/index.html | 4 ++-- cards/text-input/index.html | 4 ++-- cards/time-sync/index.html | 4 ++-- cards/week-selector/index.html | 4 ++-- charts/area/index.html | 4 ++-- charts/bar/index.html | 4 ++-- charts/line/index.html | 4 ++-- charts/pie/index.html | 4 ++-- commercial-license/index.html | 4 ++-- concept/index.html | 4 ++-- custom-statistics/index.html | 4 ++-- features/authentication/index.html | 4 ++-- features/brotli-compression/index.html | 4 ++-- features/chartanimations/index.html | 4 ++-- features/custom-logo/index.html | 4 ++-- features/custom-uri/index.html | 4 ++-- features/disable-stats/index.html | 4 ++-- features/indexing/index.html | 4 ++-- features/sizing/index.html | 4 ++-- features/title/index.html | 4 ++-- getting-started/index.html | 4 ++-- index.html | 4 ++-- installation/index.html | 4 ++-- migrate/index.html | 4 ++-- more-examples/index.html | 4 ++-- next/cards/air/index.html | 4 ++-- next/cards/button/index.html | 4 ++-- next/cards/dropdown/index.html | 4 ++-- next/cards/energy/index.html | 4 ++-- next/cards/generic/index.html | 4 ++-- next/cards/humidity/index.html | 4 ++-- next/cards/image/index.html | 4 ++-- next/cards/joystick/index.html | 4 ++-- next/cards/link/index.html | 6 +++--- next/cards/password/index.html | 6 +++--- next/cards/progress/index.html | 4 ++-- next/cards/push-button/index.html | 4 ++-- next/cards/slider/index.html | 4 ++-- next/cards/status/index.html | 4 ++-- next/cards/temperature/index.html | 4 ++-- next/cards/text-input/index.html | 4 ++-- next/cards/time-sync/index.html | 6 +++--- next/cards/week-selector/index.html | 4 ++-- next/charts/area/index.html | 4 ++-- next/charts/bar/index.html | 4 ++-- next/charts/line/index.html | 4 ++-- next/charts/pie/index.html | 4 ++-- next/commercial-license/index.html | 4 ++-- next/concept/index.html | 4 ++-- next/custom-statistics/index.html | 4 ++-- next/features/authentication/index.html | 4 ++-- next/features/brotli-compression/index.html | 4 ++-- next/features/chartanimations/index.html | 4 ++-- next/features/custom-logo/index.html | 4 ++-- next/features/custom-uri/index.html | 4 ++-- next/features/disable-stats/index.html | 4 ++-- next/features/indexing/index.html | 4 ++-- next/features/sizing/index.html | 4 ++-- next/features/title/index.html | 4 ++-- next/getting-started/index.html | 4 ++-- next/index.html | 4 ++-- next/installation/index.html | 4 ++-- next/migrate/index.html | 4 ++-- next/more-examples/index.html | 4 ++-- next/tabs/index.html | 4 ++-- tabs/index.html | 4 ++-- v3.x.x/cards/air/index.html | 4 ++-- v3.x.x/cards/button/index.html | 4 ++-- v3.x.x/cards/energy/index.html | 4 ++-- v3.x.x/cards/generic/index.html | 4 ++-- v3.x.x/cards/humidity/index.html | 4 ++-- v3.x.x/cards/joystick/index.html | 4 ++-- v3.x.x/cards/progress/index.html | 4 ++-- v3.x.x/cards/slider/index.html | 4 ++-- v3.x.x/cards/status/index.html | 4 ++-- v3.x.x/cards/temperature/index.html | 4 ++-- v3.x.x/cards/text-input/index.html | 4 ++-- v3.x.x/category/cards/index.html | 4 ++-- v3.x.x/category/charts/index.html | 4 ++-- v3.x.x/charts/area/index.html | 4 ++-- v3.x.x/charts/bar/index.html | 4 ++-- v3.x.x/charts/line/index.html | 4 ++-- v3.x.x/charts/pie/index.html | 4 ++-- v3.x.x/concept/index.html | 4 ++-- v3.x.x/getting-started/index.html | 4 ++-- v3.x.x/index.html | 4 ++-- v3.x.x/indexing/index.html | 4 ++-- v3.x.x/installation/index.html | 4 ++-- v3.x.x/more-examples/index.html | 4 ++-- 108 files changed, 215 insertions(+), 215 deletions(-) rename assets/js/{6e381f33.f663af64.js => 6e381f33.aff6b99f.js} (67%) rename assets/js/{a8d2d056.91180e93.js => a8d2d056.8b45b196.js} (60%) rename assets/js/{f889aa71.c0c2ace8.js => f889aa71.ae1e80b4.js} (57%) rename assets/js/{runtime~main.88a92253.js => runtime~main.1b1df3a1.js} (97%) diff --git a/404.html b/404.html index 40a2d139..8782d801 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/6e381f33.f663af64.js b/assets/js/6e381f33.aff6b99f.js similarity index 67% rename from assets/js/6e381f33.f663af64.js rename to assets/js/6e381f33.aff6b99f.js index 91b9f6ee..cde17070 100644 --- a/assets/js/6e381f33.f663af64.js +++ b/assets/js/6e381f33.aff6b99f.js @@ -1 +1 @@ -"use strict";(self.webpackChunkesp_dash_docs=self.webpackChunkesp_dash_docs||[]).push([[2372],{5788:(e,r,n)=>{n.d(r,{Iu:()=>p,yg:()=>f});var t=n(1504);function a(e,r,n){return r in e?Object.defineProperty(e,r,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[r]=n,e}function i(e,r){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);r&&(t=t.filter((function(r){return Object.getOwnPropertyDescriptor(e,r).enumerable}))),n.push.apply(n,t)}return n}function o(e){for(var r=1;r=0||(a[n]=e[n]);return a}(e,r);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(t=0;t=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var c=t.createContext({}),s=function(e){var r=t.useContext(c),n=r;return e&&(n="function"==typeof e?e(r):o(o({},r),e)),n},p=function(e){var r=s(e.components);return t.createElement(c.Provider,{value:r},e.children)},d="mdxType",u={inlineCode:"code",wrapper:function(e){var r=e.children;return t.createElement(t.Fragment,{},r)}},y=t.forwardRef((function(e,r){var n=e.components,a=e.mdxType,i=e.originalType,c=e.parentName,p=l(e,["components","mdxType","originalType","parentName"]),d=s(n),y=a,f=d["".concat(c,".").concat(y)]||d[y]||u[y]||i;return n?t.createElement(f,o(o({ref:r},p),{},{components:n})):t.createElement(f,o({ref:r},p))}));function f(e,r){var n=arguments,a=r&&r.mdxType;if("string"==typeof e||a){var i=n.length,o=new Array(i);o[0]=y;var l={};for(var c in r)hasOwnProperty.call(r,c)&&(l[c]=r[c]);l.originalType=e,l[d]="string"==typeof e?e:a,o[1]=l;for(var s=2;s{n.r(r),n.d(r,{assets:()=>c,contentTitle:()=>o,default:()=>u,frontMatter:()=>i,metadata:()=>l,toc:()=>s});var t=n(5072),a=(n(1504),n(5788));const i={title:"Link Card",sidebar_label:"Link (Pro)",sidebar_position:17},o=void 0,l={unversionedId:"cards/link",id:"cards/link",title:"Link Card",description:"This is an exclusive feature of DASH Pro. Check it out here.",source:"@site/docs/cards/link.md",sourceDirName:"cards",slug:"/cards/link",permalink:"/next/cards/link",draft:!1,tags:[],version:"current",sidebarPosition:17,frontMatter:{title:"Link Card",sidebar_label:"Link (Pro)",sidebar_position:17},sidebar:"tutorialSidebar",previous:{title:"Joystick (Pro)",permalink:"/next/cards/joystick"},next:{title:"Time Sync (Pro)",permalink:"/next/cards/time-sync"}},c={},s=[{value:"Initializer",id:"initializer",level:3},{value:"Callback",id:"callback",level:3},{value:"Updater",id:"updater",level:3},{value:"Reference",id:"reference",level:3}],p={toc:s},d="wrapper";function u(e){let{components:r,...n}=e;return(0,a.yg)(d,(0,t.c)({},p,n,{components:r,mdxType:"MDXLayout"}),(0,a.yg)("admonition",{title:"Pro Feature",type:"danger"},(0,a.yg)("p",{parentName:"admonition"},"This is an exclusive feature of DASH Pro. Check it out ",(0,a.yg)("a",{parentName:"p",href:"https://espdash.pro"},"here"),".")),(0,a.yg)("img",{className:"card-preview",src:"/img/v4/text-input-card.png",width:"280px",alt:"Text Input Card Preview"}),(0,a.yg)("br",null),(0,a.yg)("br",null),(0,a.yg)("p",null,"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."),(0,a.yg)("h3",{id:"initializer"},"Initializer"),(0,a.yg)("pre",null,(0,a.yg)("code",{parentName:"pre",className:"language-cpp"},'/* \n Link Card\n Valid Arguments: (ESPDash dashboard, Card Type, const char* name)\n*/\nCard linkcard(&dashboard, LINK_CARD, "Test Link");\n')),(0,a.yg)("h3",{id:"callback"},"Callback"),(0,a.yg)("admonition",{type:"note"},(0,a.yg)("p",{parentName:"admonition"},(0,a.yg)("em",{parentName:"p"},"Link card doesn't require any callback."))),(0,a.yg)("h3",{id:"updater"},"Updater"),(0,a.yg)("p",null,"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 ",(0,a.yg)("inlineCode",{parentName:"p"},"update")," function."),(0,a.yg)("pre",null,(0,a.yg)("code",{parentName:"pre",className:"language-cpp"},"linkcard.update(const char* url);\n")),(0,a.yg)("h3",{id:"reference"},"Reference"),(0,a.yg)("p",null,"This is a reference sketch showing positions for intializer and updater."),(0,a.yg)("pre",null,(0,a.yg)("code",{parentName:"pre",className:"language-cpp"},'\n...\n\n/* Link card initializer */\nCard linkcard(&dashboard, LINK_CARD, "Test Link");\n\n\nvoid setup() {\n ...\n\n /* Link card updater - can be used anywhere (apart from global scope) */\n linkcard.update("https://espdash.pro");\n}\n\nvoid loop() {\n ...\n}\n\n')))}u.isMDXComponent=!0}}]); \ No newline at end of file +"use strict";(self.webpackChunkesp_dash_docs=self.webpackChunkesp_dash_docs||[]).push([[2372],{5788:(e,r,n)=>{n.d(r,{Iu:()=>p,yg:()=>f});var t=n(1504);function a(e,r,n){return r in e?Object.defineProperty(e,r,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[r]=n,e}function i(e,r){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);r&&(t=t.filter((function(r){return Object.getOwnPropertyDescriptor(e,r).enumerable}))),n.push.apply(n,t)}return n}function o(e){for(var r=1;r=0||(a[n]=e[n]);return a}(e,r);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(t=0;t=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var c=t.createContext({}),s=function(e){var r=t.useContext(c),n=r;return e&&(n="function"==typeof e?e(r):o(o({},r),e)),n},p=function(e){var r=s(e.components);return t.createElement(c.Provider,{value:r},e.children)},d="mdxType",u={inlineCode:"code",wrapper:function(e){var r=e.children;return t.createElement(t.Fragment,{},r)}},y=t.forwardRef((function(e,r){var n=e.components,a=e.mdxType,i=e.originalType,c=e.parentName,p=l(e,["components","mdxType","originalType","parentName"]),d=s(n),y=a,f=d["".concat(c,".").concat(y)]||d[y]||u[y]||i;return n?t.createElement(f,o(o({ref:r},p),{},{components:n})):t.createElement(f,o({ref:r},p))}));function f(e,r){var n=arguments,a=r&&r.mdxType;if("string"==typeof e||a){var i=n.length,o=new Array(i);o[0]=y;var l={};for(var c in r)hasOwnProperty.call(r,c)&&(l[c]=r[c]);l.originalType=e,l[d]="string"==typeof e?e:a,o[1]=l;for(var s=2;s{n.r(r),n.d(r,{assets:()=>c,contentTitle:()=>o,default:()=>u,frontMatter:()=>i,metadata:()=>l,toc:()=>s});var t=n(5072),a=(n(1504),n(5788));const i={title:"Link Card",sidebar_label:"Link (Pro)",sidebar_position:17},o=void 0,l={unversionedId:"cards/link",id:"cards/link",title:"Link Card",description:"This is an exclusive feature of DASH Pro. Check it out here.",source:"@site/docs/cards/link.md",sourceDirName:"cards",slug:"/cards/link",permalink:"/next/cards/link",draft:!1,tags:[],version:"current",sidebarPosition:17,frontMatter:{title:"Link Card",sidebar_label:"Link (Pro)",sidebar_position:17},sidebar:"tutorialSidebar",previous:{title:"Joystick (Pro)",permalink:"/next/cards/joystick"},next:{title:"Time Sync (Pro)",permalink:"/next/cards/time-sync"}},c={},s=[{value:"Initializer",id:"initializer",level:3},{value:"Callback",id:"callback",level:3},{value:"Updater",id:"updater",level:3},{value:"Reference",id:"reference",level:3}],p={toc:s},d="wrapper";function u(e){let{components:r,...n}=e;return(0,a.yg)(d,(0,t.c)({},p,n,{components:r,mdxType:"MDXLayout"}),(0,a.yg)("admonition",{title:"Pro Feature",type:"danger"},(0,a.yg)("p",{parentName:"admonition"},"This is an exclusive feature of DASH Pro. Check it out ",(0,a.yg)("a",{parentName:"p",href:"https://espdash.pro"},"here"),".")),(0,a.yg)("img",{className:"card-preview",src:"/img/v4/link-card.png",width:"280px",alt:"Text Input Card Preview"}),(0,a.yg)("br",null),(0,a.yg)("br",null),(0,a.yg)("p",null,"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."),(0,a.yg)("h3",{id:"initializer"},"Initializer"),(0,a.yg)("pre",null,(0,a.yg)("code",{parentName:"pre",className:"language-cpp"},'/* \n Link Card\n Valid Arguments: (ESPDash dashboard, Card Type, const char* name)\n*/\nCard linkcard(&dashboard, LINK_CARD, "Test Link");\n')),(0,a.yg)("h3",{id:"callback"},"Callback"),(0,a.yg)("admonition",{type:"note"},(0,a.yg)("p",{parentName:"admonition"},(0,a.yg)("em",{parentName:"p"},"Link card doesn't require any callback."))),(0,a.yg)("h3",{id:"updater"},"Updater"),(0,a.yg)("p",null,"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 ",(0,a.yg)("inlineCode",{parentName:"p"},"update")," function."),(0,a.yg)("pre",null,(0,a.yg)("code",{parentName:"pre",className:"language-cpp"},"linkcard.update(const char* url);\n")),(0,a.yg)("h3",{id:"reference"},"Reference"),(0,a.yg)("p",null,"This is a reference sketch showing positions for intializer and updater."),(0,a.yg)("pre",null,(0,a.yg)("code",{parentName:"pre",className:"language-cpp"},'\n...\n\n/* Link card initializer */\nCard linkcard(&dashboard, LINK_CARD, "Test Link");\n\n\nvoid setup() {\n ...\n\n /* Link card updater - can be used anywhere (apart from global scope) */\n linkcard.update("https://espdash.pro");\n}\n\nvoid loop() {\n ...\n}\n\n')))}u.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/assets/js/a8d2d056.91180e93.js b/assets/js/a8d2d056.8b45b196.js similarity index 60% rename from assets/js/a8d2d056.91180e93.js rename to assets/js/a8d2d056.8b45b196.js index 9db28697..6c217f74 100644 --- a/assets/js/a8d2d056.91180e93.js +++ b/assets/js/a8d2d056.8b45b196.js @@ -1 +1 @@ -"use strict";(self.webpackChunkesp_dash_docs=self.webpackChunkesp_dash_docs||[]).push([[5348],{5788:(e,r,a)=>{a.d(r,{Iu:()=>d,yg:()=>g});var n=a(1504);function t(e,r,a){return r in e?Object.defineProperty(e,r,{value:a,enumerable:!0,configurable:!0,writable:!0}):e[r]=a,e}function i(e,r){var a=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);r&&(n=n.filter((function(r){return Object.getOwnPropertyDescriptor(e,r).enumerable}))),a.push.apply(a,n)}return a}function o(e){for(var r=1;r=0||(t[a]=e[a]);return t}(e,r);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,a)&&(t[a]=e[a])}return t}var l=n.createContext({}),c=function(e){var r=n.useContext(l),a=r;return e&&(a="function"==typeof e?e(r):o(o({},r),e)),a},d=function(e){var r=c(e.components);return n.createElement(l.Provider,{value:r},e.children)},p="mdxType",u={inlineCode:"code",wrapper:function(e){var r=e.children;return n.createElement(n.Fragment,{},r)}},y=n.forwardRef((function(e,r){var a=e.components,t=e.mdxType,i=e.originalType,l=e.parentName,d=s(e,["components","mdxType","originalType","parentName"]),p=c(a),y=t,g=p["".concat(l,".").concat(y)]||p[y]||u[y]||i;return a?n.createElement(g,o(o({ref:r},d),{},{components:a})):n.createElement(g,o({ref:r},d))}));function g(e,r){var a=arguments,t=r&&r.mdxType;if("string"==typeof e||t){var i=a.length,o=new Array(i);o[0]=y;var s={};for(var l in r)hasOwnProperty.call(r,l)&&(s[l]=r[l]);s.originalType=e,s[p]="string"==typeof e?e:t,o[1]=s;for(var c=2;c{a.r(r),a.d(r,{assets:()=>l,contentTitle:()=>o,default:()=>u,frontMatter:()=>i,metadata:()=>s,toc:()=>c});var n=a(5072),t=(a(1504),a(5788));const i={title:"Password Card",sidebar_label:"Password (Pro)",sidebar_position:12},o=void 0,s={unversionedId:"cards/password",id:"cards/password",title:"Password Card",description:"This is an exclusive feature of DASH Pro. Check it out here.",source:"@site/docs/cards/password.md",sourceDirName:"cards",slug:"/cards/password",permalink:"/next/cards/password",draft:!1,tags:[],version:"current",sidebarPosition:12,frontMatter:{title:"Password Card",sidebar_label:"Password (Pro)",sidebar_position:12},sidebar:"tutorialSidebar",previous:{title:"Text Input (Pro)",permalink:"/next/cards/text-input"},next:{title:"Dropdown (Pro)",permalink:"/next/cards/dropdown"}},l={},c=[{value:"Initializer",id:"initializer",level:3},{value:"Callback",id:"callback",level:3},{value:"Updater",id:"updater",level:3},{value:"Reference",id:"reference",level:3}],d={toc:c},p="wrapper";function u(e){let{components:r,...a}=e;return(0,t.yg)(p,(0,n.c)({},d,a,{components:r,mdxType:"MDXLayout"}),(0,t.yg)("admonition",{title:"Pro Feature",type:"danger"},(0,t.yg)("p",{parentName:"admonition"},"This is an exclusive feature of DASH Pro. Check it out ",(0,t.yg)("a",{parentName:"p",href:"https://espdash.pro"},"here"),".")),(0,t.yg)("img",{className:"card-preview",src:"/img/v4/text-input-card.png",width:"280px",alt:"Text Input Card Preview"}),(0,t.yg)("br",null),(0,t.yg)("br",null),(0,t.yg)("p",null,"Just like ",(0,t.yg)("inlineCode",{parentName:"p"},"Text Input")," card, Password card gives you the ability to take String input from user in a ",(0,t.yg)("em",{parentName:"p"},"inconspicuous")," way and save them in your application. "),(0,t.yg)("p",null,"This card is very useful for saving any kind of secret or password that requires the input value to be ",(0,t.yg)("strong",{parentName:"p"},"not")," visible on dashboard in plain text."),(0,t.yg)("h3",{id:"initializer"},"Initializer"),(0,t.yg)("pre",null,(0,t.yg)("code",{parentName:"pre",className:"language-cpp"},'/* \n Password Card\n Valid Arguments: (ESPDash dashboard, Card Type, const char* name)\n*/\nCard card1(&dashboard, PASSWORD_CARD, "Test Pass");\n')),(0,t.yg)("h3",{id:"callback"},"Callback"),(0,t.yg)("p",null,"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 ",(0,t.yg)("inlineCode",{parentName:"p"},"attachCallback")," function and provide a lambda (callback) function with a ",(0,t.yg)("inlineCode",{parentName:"p"},"const char*")," (character array) argument."),(0,t.yg)("pre",null,(0,t.yg)("code",{parentName:"pre",className:"language-cpp"},'/*\n We provide our attachCallback with a lambda function to handle incomming data\n*/\ncard1.attachCallback([&](const char* value){\n Serial.println("[Card1] Password Card Callback: "+String(value));\n});\n')),(0,t.yg)("h3",{id:"updater"},"Updater"),(0,t.yg)("admonition",{type:"note"},(0,t.yg)("p",{parentName:"admonition"},(0,t.yg)("em",{parentName:"p"},"Password card doesn't require any updater as value is not passed back to dashboard."))),(0,t.yg)("h3",{id:"reference"},"Reference"),(0,t.yg)("p",null,"This is a reference sketch showing positions for intializer and callback."),(0,t.yg)("pre",null,(0,t.yg)("code",{parentName:"pre",className:"language-cpp"},'\n...\n\n/* Password card initializer */\nCard pass(&dashboard, PASSWORD_CARD, "Test Pass");\n\n\nvoid setup() {\n ...\n\n /* Password card callback */\n pass.attachCallback([&](const char* value){\n Serial.println("Password Callback Triggered: "+String(value));\n });\n}\n\nvoid loop() {\n ...\n}\n\n')))}u.isMDXComponent=!0}}]); \ No newline at end of file +"use strict";(self.webpackChunkesp_dash_docs=self.webpackChunkesp_dash_docs||[]).push([[5348],{5788:(e,r,a)=>{a.d(r,{Iu:()=>d,yg:()=>g});var n=a(1504);function t(e,r,a){return r in e?Object.defineProperty(e,r,{value:a,enumerable:!0,configurable:!0,writable:!0}):e[r]=a,e}function i(e,r){var a=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);r&&(n=n.filter((function(r){return Object.getOwnPropertyDescriptor(e,r).enumerable}))),a.push.apply(a,n)}return a}function o(e){for(var r=1;r=0||(t[a]=e[a]);return t}(e,r);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,a)&&(t[a]=e[a])}return t}var l=n.createContext({}),c=function(e){var r=n.useContext(l),a=r;return e&&(a="function"==typeof e?e(r):o(o({},r),e)),a},d=function(e){var r=c(e.components);return n.createElement(l.Provider,{value:r},e.children)},p="mdxType",u={inlineCode:"code",wrapper:function(e){var r=e.children;return n.createElement(n.Fragment,{},r)}},y=n.forwardRef((function(e,r){var a=e.components,t=e.mdxType,i=e.originalType,l=e.parentName,d=s(e,["components","mdxType","originalType","parentName"]),p=c(a),y=t,g=p["".concat(l,".").concat(y)]||p[y]||u[y]||i;return a?n.createElement(g,o(o({ref:r},d),{},{components:a})):n.createElement(g,o({ref:r},d))}));function g(e,r){var a=arguments,t=r&&r.mdxType;if("string"==typeof e||t){var i=a.length,o=new Array(i);o[0]=y;var s={};for(var l in r)hasOwnProperty.call(r,l)&&(s[l]=r[l]);s.originalType=e,s[p]="string"==typeof e?e:t,o[1]=s;for(var c=2;c{a.r(r),a.d(r,{assets:()=>l,contentTitle:()=>o,default:()=>u,frontMatter:()=>i,metadata:()=>s,toc:()=>c});var n=a(5072),t=(a(1504),a(5788));const i={title:"Password Card",sidebar_label:"Password (Pro)",sidebar_position:12},o=void 0,s={unversionedId:"cards/password",id:"cards/password",title:"Password Card",description:"This is an exclusive feature of DASH Pro. Check it out here.",source:"@site/docs/cards/password.md",sourceDirName:"cards",slug:"/cards/password",permalink:"/next/cards/password",draft:!1,tags:[],version:"current",sidebarPosition:12,frontMatter:{title:"Password Card",sidebar_label:"Password (Pro)",sidebar_position:12},sidebar:"tutorialSidebar",previous:{title:"Text Input (Pro)",permalink:"/next/cards/text-input"},next:{title:"Dropdown (Pro)",permalink:"/next/cards/dropdown"}},l={},c=[{value:"Initializer",id:"initializer",level:3},{value:"Callback",id:"callback",level:3},{value:"Updater",id:"updater",level:3},{value:"Reference",id:"reference",level:3}],d={toc:c},p="wrapper";function u(e){let{components:r,...a}=e;return(0,t.yg)(p,(0,n.c)({},d,a,{components:r,mdxType:"MDXLayout"}),(0,t.yg)("admonition",{title:"Pro Feature",type:"danger"},(0,t.yg)("p",{parentName:"admonition"},"This is an exclusive feature of DASH Pro. Check it out ",(0,t.yg)("a",{parentName:"p",href:"https://espdash.pro"},"here"),".")),(0,t.yg)("img",{className:"card-preview",src:"/img/v4/password-card.png",width:"280px",alt:"Text Input Card Preview"}),(0,t.yg)("br",null),(0,t.yg)("br",null),(0,t.yg)("p",null,"Just like ",(0,t.yg)("inlineCode",{parentName:"p"},"Text Input")," card, Password card gives you the ability to take String input from user in a ",(0,t.yg)("em",{parentName:"p"},"inconspicuous")," way and save them in your application. "),(0,t.yg)("p",null,"This card is very useful for saving any kind of secret or password that requires the input value to be ",(0,t.yg)("strong",{parentName:"p"},"not")," visible on dashboard in plain text."),(0,t.yg)("h3",{id:"initializer"},"Initializer"),(0,t.yg)("pre",null,(0,t.yg)("code",{parentName:"pre",className:"language-cpp"},'/* \n Password Card\n Valid Arguments: (ESPDash dashboard, Card Type, const char* name)\n*/\nCard card1(&dashboard, PASSWORD_CARD, "Test Pass");\n')),(0,t.yg)("h3",{id:"callback"},"Callback"),(0,t.yg)("p",null,"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 ",(0,t.yg)("inlineCode",{parentName:"p"},"attachCallback")," function and provide a lambda (callback) function with a ",(0,t.yg)("inlineCode",{parentName:"p"},"const char*")," (character array) argument."),(0,t.yg)("pre",null,(0,t.yg)("code",{parentName:"pre",className:"language-cpp"},'/*\n We provide our attachCallback with a lambda function to handle incomming data\n*/\ncard1.attachCallback([&](const char* value){\n Serial.println("[Card1] Password Card Callback: "+String(value));\n});\n')),(0,t.yg)("h3",{id:"updater"},"Updater"),(0,t.yg)("admonition",{type:"note"},(0,t.yg)("p",{parentName:"admonition"},(0,t.yg)("em",{parentName:"p"},"Password card doesn't require any updater as value is not passed back to dashboard."))),(0,t.yg)("h3",{id:"reference"},"Reference"),(0,t.yg)("p",null,"This is a reference sketch showing positions for intializer and callback."),(0,t.yg)("pre",null,(0,t.yg)("code",{parentName:"pre",className:"language-cpp"},'\n...\n\n/* Password card initializer */\nCard pass(&dashboard, PASSWORD_CARD, "Test Pass");\n\n\nvoid setup() {\n ...\n\n /* Password card callback */\n pass.attachCallback([&](const char* value){\n Serial.println("Password Callback Triggered: "+String(value));\n });\n}\n\nvoid loop() {\n ...\n}\n\n')))}u.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/assets/js/f889aa71.c0c2ace8.js b/assets/js/f889aa71.ae1e80b4.js similarity index 57% rename from assets/js/f889aa71.c0c2ace8.js rename to assets/js/f889aa71.ae1e80b4.js index 21aa2623..af042039 100644 --- a/assets/js/f889aa71.c0c2ace8.js +++ b/assets/js/f889aa71.ae1e80b4.js @@ -1 +1 @@ -"use strict";(self.webpackChunkesp_dash_docs=self.webpackChunkesp_dash_docs||[]).push([[4752],{5788:(e,r,n)=>{n.d(r,{Iu:()=>p,yg:()=>m});var t=n(1504);function a(e,r,n){return r in e?Object.defineProperty(e,r,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[r]=n,e}function i(e,r){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);r&&(t=t.filter((function(r){return Object.getOwnPropertyDescriptor(e,r).enumerable}))),n.push.apply(n,t)}return n}function c(e){for(var r=1;r=0||(a[n]=e[n]);return a}(e,r);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(t=0;t=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var l=t.createContext({}),s=function(e){var r=t.useContext(l),n=r;return e&&(n="function"==typeof e?e(r):c(c({},r),e)),n},p=function(e){var r=s(e.components);return t.createElement(l.Provider,{value:r},e.children)},d="mdxType",u={inlineCode:"code",wrapper:function(e){var r=e.children;return t.createElement(t.Fragment,{},r)}},y=t.forwardRef((function(e,r){var n=e.components,a=e.mdxType,i=e.originalType,l=e.parentName,p=o(e,["components","mdxType","originalType","parentName"]),d=s(n),y=a,m=d["".concat(l,".").concat(y)]||d[y]||u[y]||i;return n?t.createElement(m,c(c({ref:r},p),{},{components:n})):t.createElement(m,c({ref:r},p))}));function m(e,r){var n=arguments,a=r&&r.mdxType;if("string"==typeof e||a){var i=n.length,c=new Array(i);c[0]=y;var o={};for(var l in r)hasOwnProperty.call(r,l)&&(o[l]=r[l]);o.originalType=e,o[d]="string"==typeof e?e:a,c[1]=o;for(var s=2;s{n.r(r),n.d(r,{assets:()=>l,contentTitle:()=>c,default:()=>u,frontMatter:()=>i,metadata:()=>o,toc:()=>s});var t=n(5072),a=(n(1504),n(5788));const i={title:"Time Sync Card",sidebar_label:"Time Sync (Pro)",sidebar_position:18},c=void 0,o={unversionedId:"cards/time-sync",id:"cards/time-sync",title:"Time Sync Card",description:"This is an exclusive feature of DASH Pro. Check it out here.",source:"@site/docs/cards/time-sync.md",sourceDirName:"cards",slug:"/cards/time-sync",permalink:"/next/cards/time-sync",draft:!1,tags:[],version:"current",sidebarPosition:18,frontMatter:{title:"Time Sync Card",sidebar_label:"Time Sync (Pro)",sidebar_position:18},sidebar:"tutorialSidebar",previous:{title:"Link (Pro)",permalink:"/next/cards/link"},next:{title:"Bar",permalink:"/next/charts/bar"}},l={},s=[{value:"Initializer",id:"initializer",level:3},{value:"Callback",id:"callback",level:3},{value:"Updater",id:"updater",level:3},{value:"Reference",id:"reference",level:3}],p={toc:s},d="wrapper";function u(e){let{components:r,...n}=e;return(0,a.yg)(d,(0,t.c)({},p,n,{components:r,mdxType:"MDXLayout"}),(0,a.yg)("admonition",{title:"Pro Feature",type:"danger"},(0,a.yg)("p",{parentName:"admonition"},"This is an exclusive feature of DASH Pro. Check it out ",(0,a.yg)("a",{parentName:"p",href:"https://espdash.pro"},"here"),".")),(0,a.yg)("img",{className:"card-preview",src:"/img/v4/text-input-card.png",width:"280px",alt:"Text Input Card Preview"}),(0,a.yg)("br",null),(0,a.yg)("br",null),(0,a.yg)("p",null,"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. "),(0,a.yg)("admonition",{type:"tip"},(0,a.yg)("p",{parentName:"admonition"},"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.")),(0,a.yg)("h3",{id:"initializer"},"Initializer"),(0,a.yg)("pre",null,(0,a.yg)("code",{parentName:"pre",className:"language-cpp"},'/* \n Time Sync Card\n Valid Arguments: (ESPDash dashboard, Card Type, const char* name)\n*/\nCard timesync(&dashboard, TIME_SYNC_CARD, "Time Sync");\n')),(0,a.yg)("h3",{id:"callback"},"Callback"),(0,a.yg)("pre",null,(0,a.yg)("code",{parentName:"pre",className:"language-cpp"},'timesync.attachCallback([&](const char* value){\n Serial.println("Time Sync Triggered: "+String(value));\n});\n')),(0,a.yg)("h3",{id:"updater"},"Updater"),(0,a.yg)("admonition",{type:"note"},(0,a.yg)("p",{parentName:"admonition"},(0,a.yg)("em",{parentName:"p"},"Time sync card doesn't require any updater."))),(0,a.yg)("h3",{id:"reference"},"Reference"),(0,a.yg)("p",null,"This is a reference sketch showing positions for intializer and callback."),(0,a.yg)("pre",null,(0,a.yg)("code",{parentName:"pre",className:"language-cpp"},'\n...\n\n/* Time sync card initializer */\nCard timesync(&dashboard, TIME_SYNC_CARD, "Time Sync");\n\n\nvoid setup() {\n ...\n\n /* Time sync card callback */\n timesync.attachCallback([&](const char* value){\n Serial.println("Time Sync Triggered: "+String(value));\n });\n}\n\nvoid loop() {\n ...\n}\n\n')))}u.isMDXComponent=!0}}]); \ No newline at end of file +"use strict";(self.webpackChunkesp_dash_docs=self.webpackChunkesp_dash_docs||[]).push([[4752],{5788:(e,r,n)=>{n.d(r,{Iu:()=>p,yg:()=>m});var t=n(1504);function a(e,r,n){return r in e?Object.defineProperty(e,r,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[r]=n,e}function i(e,r){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);r&&(t=t.filter((function(r){return Object.getOwnPropertyDescriptor(e,r).enumerable}))),n.push.apply(n,t)}return n}function c(e){for(var r=1;r=0||(a[n]=e[n]);return a}(e,r);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(t=0;t=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var l=t.createContext({}),s=function(e){var r=t.useContext(l),n=r;return e&&(n="function"==typeof e?e(r):c(c({},r),e)),n},p=function(e){var r=s(e.components);return t.createElement(l.Provider,{value:r},e.children)},d="mdxType",y={inlineCode:"code",wrapper:function(e){var r=e.children;return t.createElement(t.Fragment,{},r)}},u=t.forwardRef((function(e,r){var n=e.components,a=e.mdxType,i=e.originalType,l=e.parentName,p=o(e,["components","mdxType","originalType","parentName"]),d=s(n),u=a,m=d["".concat(l,".").concat(u)]||d[u]||y[u]||i;return n?t.createElement(m,c(c({ref:r},p),{},{components:n})):t.createElement(m,c({ref:r},p))}));function m(e,r){var n=arguments,a=r&&r.mdxType;if("string"==typeof e||a){var i=n.length,c=new Array(i);c[0]=u;var o={};for(var l in r)hasOwnProperty.call(r,l)&&(o[l]=r[l]);o.originalType=e,o[d]="string"==typeof e?e:a,c[1]=o;for(var s=2;s{n.r(r),n.d(r,{assets:()=>l,contentTitle:()=>c,default:()=>y,frontMatter:()=>i,metadata:()=>o,toc:()=>s});var t=n(5072),a=(n(1504),n(5788));const i={title:"Time Sync Card",sidebar_label:"Time Sync (Pro)",sidebar_position:18},c=void 0,o={unversionedId:"cards/time-sync",id:"cards/time-sync",title:"Time Sync Card",description:"This is an exclusive feature of DASH Pro. Check it out here.",source:"@site/docs/cards/time-sync.md",sourceDirName:"cards",slug:"/cards/time-sync",permalink:"/next/cards/time-sync",draft:!1,tags:[],version:"current",sidebarPosition:18,frontMatter:{title:"Time Sync Card",sidebar_label:"Time Sync (Pro)",sidebar_position:18},sidebar:"tutorialSidebar",previous:{title:"Link (Pro)",permalink:"/next/cards/link"},next:{title:"Bar",permalink:"/next/charts/bar"}},l={},s=[{value:"Initializer",id:"initializer",level:3},{value:"Callback",id:"callback",level:3},{value:"Updater",id:"updater",level:3},{value:"Reference",id:"reference",level:3}],p={toc:s},d="wrapper";function y(e){let{components:r,...n}=e;return(0,a.yg)(d,(0,t.c)({},p,n,{components:r,mdxType:"MDXLayout"}),(0,a.yg)("admonition",{title:"Pro Feature",type:"danger"},(0,a.yg)("p",{parentName:"admonition"},"This is an exclusive feature of DASH Pro. Check it out ",(0,a.yg)("a",{parentName:"p",href:"https://espdash.pro"},"here"),".")),(0,a.yg)("img",{className:"card-preview",src:"/img/v4/time-sync-card.png",width:"280px",alt:"Text Input Card Preview"}),(0,a.yg)("br",null),(0,a.yg)("br",null),(0,a.yg)("p",null,"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. "),(0,a.yg)("admonition",{type:"tip"},(0,a.yg)("p",{parentName:"admonition"},"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.")),(0,a.yg)("h3",{id:"initializer"},"Initializer"),(0,a.yg)("pre",null,(0,a.yg)("code",{parentName:"pre",className:"language-cpp"},'/* \n Time Sync Card\n Valid Arguments: (ESPDash dashboard, Card Type, const char* name)\n*/\nCard timesync(&dashboard, TIME_SYNC_CARD, "Time Sync");\n')),(0,a.yg)("h3",{id:"callback"},"Callback"),(0,a.yg)("pre",null,(0,a.yg)("code",{parentName:"pre",className:"language-cpp"},'timesync.attachCallback([&](const char* value){\n Serial.println("Time Sync Triggered: "+String(value));\n});\n')),(0,a.yg)("h3",{id:"updater"},"Updater"),(0,a.yg)("admonition",{type:"note"},(0,a.yg)("p",{parentName:"admonition"},(0,a.yg)("em",{parentName:"p"},"Time sync card doesn't require any updater."))),(0,a.yg)("h3",{id:"reference"},"Reference"),(0,a.yg)("p",null,"This is a reference sketch showing positions for intializer and callback."),(0,a.yg)("pre",null,(0,a.yg)("code",{parentName:"pre",className:"language-cpp"},'\n...\n\n/* Time sync card initializer */\nCard timesync(&dashboard, TIME_SYNC_CARD, "Time Sync");\n\n\nvoid setup() {\n ...\n\n /* Time sync card callback */\n timesync.attachCallback([&](const char* value){\n Serial.println("Time Sync Triggered: "+String(value));\n });\n}\n\nvoid loop() {\n ...\n}\n\n')))}y.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/assets/js/runtime~main.88a92253.js b/assets/js/runtime~main.1b1df3a1.js similarity index 97% rename from assets/js/runtime~main.88a92253.js rename to assets/js/runtime~main.1b1df3a1.js index 54977dbe..3cd52273 100644 --- a/assets/js/runtime~main.88a92253.js +++ b/assets/js/runtime~main.1b1df3a1.js @@ -1 +1 @@ -(()=>{"use strict";var e,f,a,c,d,b={},t={};function r(e){var f=t[e];if(void 0!==f)return f.exports;var a=t[e]={id:e,loaded:!1,exports:{}};return b[e].call(a.exports,a,a.exports,r),a.loaded=!0,a.exports}r.m=b,r.c=t,e=[],r.O=(f,a,c,d)=>{if(!a){var b=1/0;for(i=0;i=d)&&Object.keys(r.O).every((e=>r.O[e](a[o])))?a.splice(o--,1):(t=!1,d0&&e[i-1][2]>d;i--)e[i]=e[i-1];e[i]=[a,c,d]},r.n=e=>{var f=e&&e.__esModule?()=>e.default:()=>e;return r.d(f,{a:f}),f},a=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={};f=f||[null,a({}),a([]),a(a)];for(var t=2&c&&e;"object"==typeof t&&!~f.indexOf(t);t=a(t))Object.getOwnPropertyNames(t).forEach((f=>b[f]=()=>e[f]));return b.default=()=>e,r.d(d,b),d},r.d=(e,f)=>{for(var a in f)r.o(f,a)&&!r.o(e,a)&&Object.defineProperty(e,a,{enumerable:!0,get:f[a]})},r.f={},r.e=e=>Promise.all(Object.keys(r.f).reduce(((f,a)=>(r.f[a](e,f),f)),[])),r.u=e=>"assets/js/"+({136:"af2b8099",168:"f1c3c228",248:"652d9580",328:"3d64c8f3",384:"bc9808f4",402:"a608976b",516:"d523083d",624:"5acd1b26",682:"94c292bb",688:"2a51f6ab",768:"0f34283b",864:"beec482e",866:"adcc149f",1152:"0b5c9aa2",1156:"bb019f97",1164:"a8d55bef",1336:"d1f5632b",1476:"402bfe77",1496:"56927624",1528:"9495aadd",1592:"44a65385",1595:"e8eea433",1612:"4df0a92e",1704:"1eaa7d1e",1812:"c5beed23",1828:"82dc478c",1936:"49d6c00f",1972:"6bf84c41",2036:"1c361767",2048:"6fb081b8",2116:"2c8f7a48",2276:"49146ea8",2372:"6e381f33",2490:"85d52a4f",2556:"166ccb0c",2784:"641f1acd",2800:"bfca638c",2840:"ee622a22",2940:"55c57bd6",2964:"ec123d05",3008:"78c63844",3088:"f4d79f1d",3368:"4649c564",3456:"ccf30e44",3664:"4ca68d7b",3820:"d3c74fc5",3960:"6944cb31",4148:"972722f4",4168:"1d798de6",4280:"afe7c26a",4292:"d4ae7331",4368:"f8edec0b",4380:"5fde1817",4424:"10703425",4576:"9a2f436b",4752:"f889aa71",4796:"24a4b54e",4840:"d589d3a7",4864:"ec57d471",4952:"4c3f1b83",4992:"6d50d705",5238:"c4432a16",5288:"51ce7319",5348:"a8d2d056",5392:"f43a06cf",5426:"df66317f",5590:"50198c52",5656:"de4274db",5696:"935f2afb",5820:"aeef22cf",5876:"52044914",5972:"5942c4f9",6315:"c61243a5",6328:"0e384e19",6624:"ddf369fb",6696:"3b8c55ea",6736:"d1e64eb6",6752:"17896441",6884:"849d26d9",6944:"2bf59882",6960:"87b1afb5",7096:"3cd533c2",7156:"5c2cce4e",7176:"3b62c223",7244:"91e7212c",7324:"a39fba33",7364:"cc0a2bf3",7372:"34e9d761",7452:"021dfd6a",7552:"1de66f17",7750:"37c80295",7760:"88f14c76",7772:"f736db6d",7944:"e5af0a5c",7956:"d4f5e55a",8120:"4c4e1a30",8308:"1d06bd5e",8532:"a81a9ba7",8696:"01c2b708",8777:"900bf023",8784:"5b27bca1",8884:"4f3d7ac0",8904:"f62b367a",8988:"bd9ddaf7",9152:"5554be2c",9504:"ebe4a411",9516:"5327fe66",9540:"0487f087",9576:"14eb3368",9656:"1be78505"}[e]||e)+"."+{136:"878b9bde",168:"ba69bf31",248:"58c250bb",328:"92f32168",384:"d2f0155c",402:"a2654fb0",516:"e6ef15cd",624:"1d7be724",682:"b6c77c0d",688:"51ea94c3",768:"68625eb8",864:"e9f2cd16",866:"7e4db5ce",1152:"4328a032",1156:"1d1207ee",1164:"1c7f920f",1336:"16ab4f13",1476:"03402182",1496:"4583beee",1528:"11cd0113",1592:"83949873",1595:"733aad9a",1612:"8e470e79",1704:"7b9ebfca",1812:"6147c920",1828:"68f36aa0",1936:"5235010c",1972:"28a5acfc",2036:"0a7259df",2048:"fcf182b0",2116:"d1cc69cd",2276:"08a914c8",2372:"f663af64",2490:"bd9e7558",2556:"9301ee30",2784:"21f573e0",2800:"cc2e748d",2840:"fa20dec3",2940:"8318919e",2964:"69ccec87",3008:"9bb4bdf5",3088:"22822662",3368:"f0ee0d34",3456:"2bc459af",3664:"0f395925",3820:"45b630bb",3960:"859e8dc8",4148:"cc8bd5b5",4168:"d51737b5",4280:"885bf96f",4292:"bc3cc02e",4368:"af1213f7",4380:"4711c8f2",4424:"c87db146",4576:"1afd47c4",4752:"c0c2ace8",4796:"1f197b59",4840:"658b36d3",4864:"a36ac80d",4952:"b234b7c0",4992:"9b04319f",5238:"7062c4e7",5288:"b0434e04",5348:"91180e93",5392:"e70df596",5426:"996aecee",5590:"2ee7ec79",5656:"34289a15",5696:"e5d2d789",5820:"dd8d115d",5876:"91a67373",5972:"349f5f36",6315:"782d8f99",6328:"68a10671",6624:"f9b7de45",6696:"da9fff5a",6736:"6dc44280",6752:"edfb7bd5",6884:"65d5b263",6944:"6432bc6e",6960:"79e57858",7096:"33d5ef87",7156:"4fd5ae09",7176:"c431cedc",7244:"9e46f80a",7324:"7e0db7c6",7364:"f6a1a6c8",7372:"3764aa9e",7452:"3b8f198f",7552:"d8073c0b",7750:"97b2f9c7",7760:"aa0a21ae",7772:"523a9a40",7944:"e0c5d4d6",7956:"7b59a5e0",8120:"883628ca",8127:"d5d423b0",8308:"ed0b45b4",8532:"7d01005a",8696:"0c35789d",8777:"51c2822c",8784:"403ca03d",8884:"aa9e878c",8904:"d3f39be1",8988:"ea1851f5",9152:"f5a3bd26",9504:"0e7226c6",9516:"e039b93e",9540:"e8451acb",9576:"509876c1",9656:"150b6c39",9772:"89bee490"}[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,f)=>Object.prototype.hasOwnProperty.call(e,f),c={},d="esp-dash-docs:",r.l=(e,f,a,b)=>{if(c[e])c[e].push(f);else{var t,o;if(void 0!==a)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(a))),f)return f(a)},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:"4424",17896441:"6752",52044914:"5876",56927624:"1496",af2b8099:"136",f1c3c228:"168","652d9580":"248","3d64c8f3":"328",bc9808f4:"384",a608976b:"402",d523083d:"516","5acd1b26":"624","94c292bb":"682","2a51f6ab":"688","0f34283b":"768",beec482e:"864",adcc149f:"866","0b5c9aa2":"1152",bb019f97:"1156",a8d55bef:"1164",d1f5632b:"1336","402bfe77":"1476","9495aadd":"1528","44a65385":"1592",e8eea433:"1595","4df0a92e":"1612","1eaa7d1e":"1704",c5beed23:"1812","82dc478c":"1828","49d6c00f":"1936","6bf84c41":"1972","1c361767":"2036","6fb081b8":"2048","2c8f7a48":"2116","49146ea8":"2276","6e381f33":"2372","85d52a4f":"2490","166ccb0c":"2556","641f1acd":"2784",bfca638c:"2800",ee622a22:"2840","55c57bd6":"2940",ec123d05:"2964","78c63844":"3008",f4d79f1d:"3088","4649c564":"3368",ccf30e44:"3456","4ca68d7b":"3664",d3c74fc5:"3820","6944cb31":"3960","972722f4":"4148","1d798de6":"4168",afe7c26a:"4280",d4ae7331:"4292",f8edec0b:"4368","5fde1817":"4380","9a2f436b":"4576",f889aa71:"4752","24a4b54e":"4796",d589d3a7:"4840",ec57d471:"4864","4c3f1b83":"4952","6d50d705":"4992",c4432a16:"5238","51ce7319":"5288",a8d2d056:"5348",f43a06cf:"5392",df66317f:"5426","50198c52":"5590",de4274db:"5656","935f2afb":"5696",aeef22cf:"5820","5942c4f9":"5972",c61243a5:"6315","0e384e19":"6328",ddf369fb:"6624","3b8c55ea":"6696",d1e64eb6:"6736","849d26d9":"6884","2bf59882":"6944","87b1afb5":"6960","3cd533c2":"7096","5c2cce4e":"7156","3b62c223":"7176","91e7212c":"7244",a39fba33:"7324",cc0a2bf3:"7364","34e9d761":"7372","021dfd6a":"7452","1de66f17":"7552","37c80295":"7750","88f14c76":"7760",f736db6d:"7772",e5af0a5c:"7944",d4f5e55a:"7956","4c4e1a30":"8120","1d06bd5e":"8308",a81a9ba7:"8532","01c2b708":"8696","900bf023":"8777","5b27bca1":"8784","4f3d7ac0":"8884",f62b367a:"8904",bd9ddaf7:"8988","5554be2c":"9152",ebe4a411:"9504","5327fe66":"9516","0487f087":"9540","14eb3368":"9576","1be78505":"9656"}[e]||e,r.p+r.u(e)},(()=>{var e={296:0,2176:0};r.f.j=(f,a)=>{var c=r.o(e,f)?e[f]:void 0;if(0!==c)if(c)a.push(c[2]);else if(/^2(17|9)6$/.test(f))e[f]=0;else{var d=new Promise(((a,d)=>c=e[f]=[a,d]));a.push(c[2]=d);var b=r.p+r.u(f),t=new Error;r.l(b,(a=>{if(r.o(e,f)&&(0!==(c=e[f])&&(e[f]=void 0),c)){var d=a&&("load"===a.type?"missing":a.type),b=a&&a.target&&a.target.src;t.message="Loading chunk "+f+" failed.\n("+d+": "+b+")",t.name="ChunkLoadError",t.type=d,t.request=b,c[1](t)}}),"chunk-"+f,f)}},r.O.j=f=>0===e[f];var f=(f,a)=>{var c,d,b=a[0],t=a[1],o=a[2],n=0;if(b.some((f=>0!==e[f]))){for(c in t)r.o(t,c)&&(r.m[c]=t[c]);if(o)var i=o(r)}for(f&&f(a);n{"use strict";var e,f,a,c,d,b={},t={};function r(e){var f=t[e];if(void 0!==f)return f.exports;var a=t[e]={id:e,loaded:!1,exports:{}};return b[e].call(a.exports,a,a.exports,r),a.loaded=!0,a.exports}r.m=b,r.c=t,e=[],r.O=(f,a,c,d)=>{if(!a){var b=1/0;for(i=0;i=d)&&Object.keys(r.O).every((e=>r.O[e](a[o])))?a.splice(o--,1):(t=!1,d0&&e[i-1][2]>d;i--)e[i]=e[i-1];e[i]=[a,c,d]},r.n=e=>{var f=e&&e.__esModule?()=>e.default:()=>e;return r.d(f,{a:f}),f},a=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={};f=f||[null,a({}),a([]),a(a)];for(var t=2&c&&e;"object"==typeof t&&!~f.indexOf(t);t=a(t))Object.getOwnPropertyNames(t).forEach((f=>b[f]=()=>e[f]));return b.default=()=>e,r.d(d,b),d},r.d=(e,f)=>{for(var a in f)r.o(f,a)&&!r.o(e,a)&&Object.defineProperty(e,a,{enumerable:!0,get:f[a]})},r.f={},r.e=e=>Promise.all(Object.keys(r.f).reduce(((f,a)=>(r.f[a](e,f),f)),[])),r.u=e=>"assets/js/"+({136:"af2b8099",168:"f1c3c228",248:"652d9580",328:"3d64c8f3",384:"bc9808f4",402:"a608976b",516:"d523083d",624:"5acd1b26",682:"94c292bb",688:"2a51f6ab",768:"0f34283b",864:"beec482e",866:"adcc149f",1152:"0b5c9aa2",1156:"bb019f97",1164:"a8d55bef",1336:"d1f5632b",1476:"402bfe77",1496:"56927624",1528:"9495aadd",1592:"44a65385",1595:"e8eea433",1612:"4df0a92e",1704:"1eaa7d1e",1812:"c5beed23",1828:"82dc478c",1936:"49d6c00f",1972:"6bf84c41",2036:"1c361767",2048:"6fb081b8",2116:"2c8f7a48",2276:"49146ea8",2372:"6e381f33",2490:"85d52a4f",2556:"166ccb0c",2784:"641f1acd",2800:"bfca638c",2840:"ee622a22",2940:"55c57bd6",2964:"ec123d05",3008:"78c63844",3088:"f4d79f1d",3368:"4649c564",3456:"ccf30e44",3664:"4ca68d7b",3820:"d3c74fc5",3960:"6944cb31",4148:"972722f4",4168:"1d798de6",4280:"afe7c26a",4292:"d4ae7331",4368:"f8edec0b",4380:"5fde1817",4424:"10703425",4576:"9a2f436b",4752:"f889aa71",4796:"24a4b54e",4840:"d589d3a7",4864:"ec57d471",4952:"4c3f1b83",4992:"6d50d705",5238:"c4432a16",5288:"51ce7319",5348:"a8d2d056",5392:"f43a06cf",5426:"df66317f",5590:"50198c52",5656:"de4274db",5696:"935f2afb",5820:"aeef22cf",5876:"52044914",5972:"5942c4f9",6315:"c61243a5",6328:"0e384e19",6624:"ddf369fb",6696:"3b8c55ea",6736:"d1e64eb6",6752:"17896441",6884:"849d26d9",6944:"2bf59882",6960:"87b1afb5",7096:"3cd533c2",7156:"5c2cce4e",7176:"3b62c223",7244:"91e7212c",7324:"a39fba33",7364:"cc0a2bf3",7372:"34e9d761",7452:"021dfd6a",7552:"1de66f17",7750:"37c80295",7760:"88f14c76",7772:"f736db6d",7944:"e5af0a5c",7956:"d4f5e55a",8120:"4c4e1a30",8308:"1d06bd5e",8532:"a81a9ba7",8696:"01c2b708",8777:"900bf023",8784:"5b27bca1",8884:"4f3d7ac0",8904:"f62b367a",8988:"bd9ddaf7",9152:"5554be2c",9504:"ebe4a411",9516:"5327fe66",9540:"0487f087",9576:"14eb3368",9656:"1be78505"}[e]||e)+"."+{136:"878b9bde",168:"ba69bf31",248:"58c250bb",328:"92f32168",384:"d2f0155c",402:"a2654fb0",516:"e6ef15cd",624:"1d7be724",682:"b6c77c0d",688:"51ea94c3",768:"68625eb8",864:"e9f2cd16",866:"7e4db5ce",1152:"4328a032",1156:"1d1207ee",1164:"1c7f920f",1336:"16ab4f13",1476:"03402182",1496:"4583beee",1528:"11cd0113",1592:"83949873",1595:"733aad9a",1612:"8e470e79",1704:"7b9ebfca",1812:"6147c920",1828:"68f36aa0",1936:"5235010c",1972:"28a5acfc",2036:"0a7259df",2048:"fcf182b0",2116:"d1cc69cd",2276:"08a914c8",2372:"aff6b99f",2490:"bd9e7558",2556:"9301ee30",2784:"21f573e0",2800:"cc2e748d",2840:"fa20dec3",2940:"8318919e",2964:"69ccec87",3008:"9bb4bdf5",3088:"22822662",3368:"f0ee0d34",3456:"2bc459af",3664:"0f395925",3820:"45b630bb",3960:"859e8dc8",4148:"cc8bd5b5",4168:"d51737b5",4280:"885bf96f",4292:"bc3cc02e",4368:"af1213f7",4380:"4711c8f2",4424:"c87db146",4576:"1afd47c4",4752:"ae1e80b4",4796:"1f197b59",4840:"658b36d3",4864:"a36ac80d",4952:"b234b7c0",4992:"9b04319f",5238:"7062c4e7",5288:"b0434e04",5348:"8b45b196",5392:"e70df596",5426:"996aecee",5590:"2ee7ec79",5656:"34289a15",5696:"e5d2d789",5820:"dd8d115d",5876:"91a67373",5972:"349f5f36",6315:"782d8f99",6328:"68a10671",6624:"f9b7de45",6696:"da9fff5a",6736:"6dc44280",6752:"edfb7bd5",6884:"65d5b263",6944:"6432bc6e",6960:"79e57858",7096:"33d5ef87",7156:"4fd5ae09",7176:"c431cedc",7244:"9e46f80a",7324:"7e0db7c6",7364:"f6a1a6c8",7372:"3764aa9e",7452:"3b8f198f",7552:"d8073c0b",7750:"97b2f9c7",7760:"aa0a21ae",7772:"523a9a40",7944:"e0c5d4d6",7956:"7b59a5e0",8120:"883628ca",8127:"d5d423b0",8308:"ed0b45b4",8532:"7d01005a",8696:"0c35789d",8777:"51c2822c",8784:"403ca03d",8884:"aa9e878c",8904:"d3f39be1",8988:"ea1851f5",9152:"f5a3bd26",9504:"0e7226c6",9516:"e039b93e",9540:"e8451acb",9576:"509876c1",9656:"150b6c39",9772:"89bee490"}[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,f)=>Object.prototype.hasOwnProperty.call(e,f),c={},d="esp-dash-docs:",r.l=(e,f,a,b)=>{if(c[e])c[e].push(f);else{var t,o;if(void 0!==a)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(a))),f)return f(a)},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:"4424",17896441:"6752",52044914:"5876",56927624:"1496",af2b8099:"136",f1c3c228:"168","652d9580":"248","3d64c8f3":"328",bc9808f4:"384",a608976b:"402",d523083d:"516","5acd1b26":"624","94c292bb":"682","2a51f6ab":"688","0f34283b":"768",beec482e:"864",adcc149f:"866","0b5c9aa2":"1152",bb019f97:"1156",a8d55bef:"1164",d1f5632b:"1336","402bfe77":"1476","9495aadd":"1528","44a65385":"1592",e8eea433:"1595","4df0a92e":"1612","1eaa7d1e":"1704",c5beed23:"1812","82dc478c":"1828","49d6c00f":"1936","6bf84c41":"1972","1c361767":"2036","6fb081b8":"2048","2c8f7a48":"2116","49146ea8":"2276","6e381f33":"2372","85d52a4f":"2490","166ccb0c":"2556","641f1acd":"2784",bfca638c:"2800",ee622a22:"2840","55c57bd6":"2940",ec123d05:"2964","78c63844":"3008",f4d79f1d:"3088","4649c564":"3368",ccf30e44:"3456","4ca68d7b":"3664",d3c74fc5:"3820","6944cb31":"3960","972722f4":"4148","1d798de6":"4168",afe7c26a:"4280",d4ae7331:"4292",f8edec0b:"4368","5fde1817":"4380","9a2f436b":"4576",f889aa71:"4752","24a4b54e":"4796",d589d3a7:"4840",ec57d471:"4864","4c3f1b83":"4952","6d50d705":"4992",c4432a16:"5238","51ce7319":"5288",a8d2d056:"5348",f43a06cf:"5392",df66317f:"5426","50198c52":"5590",de4274db:"5656","935f2afb":"5696",aeef22cf:"5820","5942c4f9":"5972",c61243a5:"6315","0e384e19":"6328",ddf369fb:"6624","3b8c55ea":"6696",d1e64eb6:"6736","849d26d9":"6884","2bf59882":"6944","87b1afb5":"6960","3cd533c2":"7096","5c2cce4e":"7156","3b62c223":"7176","91e7212c":"7244",a39fba33:"7324",cc0a2bf3:"7364","34e9d761":"7372","021dfd6a":"7452","1de66f17":"7552","37c80295":"7750","88f14c76":"7760",f736db6d:"7772",e5af0a5c:"7944",d4f5e55a:"7956","4c4e1a30":"8120","1d06bd5e":"8308",a81a9ba7:"8532","01c2b708":"8696","900bf023":"8777","5b27bca1":"8784","4f3d7ac0":"8884",f62b367a:"8904",bd9ddaf7:"8988","5554be2c":"9152",ebe4a411:"9504","5327fe66":"9516","0487f087":"9540","14eb3368":"9576","1be78505":"9656"}[e]||e,r.p+r.u(e)},(()=>{var e={296:0,2176:0};r.f.j=(f,a)=>{var c=r.o(e,f)?e[f]:void 0;if(0!==c)if(c)a.push(c[2]);else if(/^2(17|9)6$/.test(f))e[f]=0;else{var d=new Promise(((a,d)=>c=e[f]=[a,d]));a.push(c[2]=d);var b=r.p+r.u(f),t=new Error;r.l(b,(a=>{if(r.o(e,f)&&(0!==(c=e[f])&&(e[f]=void 0),c)){var d=a&&("load"===a.type?"missing":a.type),b=a&&a.target&&a.target.src;t.message="Loading chunk "+f+" failed.\n("+d+": "+b+")",t.name="ChunkLoadError",t.type=d,t.request=b,c[1](t)}}),"chunk-"+f,f)}},r.O.j=f=>0===e[f];var f=(f,a)=>{var c,d,b=a[0],t=a[1],o=a[2],n=0;if(b.some((f=>0!==e[f]))){for(c in t)r.o(t,c)&&(r.m[c]=t[c]);if(o)var i=o(r)}for(f&&f(a);n - +
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/cards/button/index.html b/cards/button/index.html index 5df57f04..593a584b 100644 --- a/cards/button/index.html +++ b/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/cards/dropdown/index.html b/cards/dropdown/index.html index a7333950..6a6da87b 100644 --- a/cards/dropdown/index.html +++ b/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/cards/energy/index.html b/cards/energy/index.html index 1dca8b6d..7dc8621b 100644 --- a/cards/energy/index.html +++ b/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/cards/generic/index.html b/cards/generic/index.html index 6348bc3c..b0296846 100644 --- a/cards/generic/index.html +++ b/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/cards/humidity/index.html b/cards/humidity/index.html index 8c0613e9..4a930660 100644 --- a/cards/humidity/index.html +++ b/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/cards/image/index.html b/cards/image/index.html index 1abf938d..2360ce08 100644 --- a/cards/image/index.html +++ b/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/cards/joystick/index.html b/cards/joystick/index.html index de9eee26..293cb774 100644 --- a/cards/joystick/index.html +++ b/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/cards/link/index.html b/cards/link/index.html index e9b41b5c..9f368ef1 100644 --- a/cards/link/index.html +++ b/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/cards/password/index.html b/cards/password/index.html index 68f5c5a7..37a9ed57 100644 --- a/cards/password/index.html +++ b/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/cards/progress/index.html b/cards/progress/index.html index 117636ab..e97b8050 100644 --- a/cards/progress/index.html +++ b/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/cards/push-button/index.html b/cards/push-button/index.html index c9ec4489..5927bfea 100644 --- a/cards/push-button/index.html +++ b/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/cards/slider/index.html b/cards/slider/index.html index 5cbfa671..1957e24e 100644 --- a/cards/slider/index.html +++ b/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/cards/status/index.html b/cards/status/index.html index 37c25825..ed879c21 100644 --- a/cards/status/index.html +++ b/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​

  • "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");

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", "success");

Reference​

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


...

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


void setup() {
  ...

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

void loop() {
  ...
}

- + \ No newline at end of file diff --git a/cards/temperature/index.html b/cards/temperature/index.html index a5cd5478..d3723bc3 100644 --- a/cards/temperature/index.html +++ b/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/cards/text-input/index.html b/cards/text-input/index.html index 70c8ef87..d055166f 100644 --- a/cards/text-input/index.html +++ b/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/cards/time-sync/index.html b/cards/time-sync/index.html index 2e1586a0..34345e52 100644 --- a/cards/time-sync/index.html +++ b/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/cards/week-selector/index.html b/cards/week-selector/index.html index bc8e5d5c..659dfbfb 100644 --- a/cards/week-selector/index.html +++ b/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.


...

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


void setup() {
  ...

  /* Text input card callback */
  week.attachCallback([&](const char* days){
    Serial.println("Week Selector Callback Triggered: "+String(value));
    /* Text input card updater - you need to update the button 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/charts/area/index.html b/charts/area/index.html index c6a9ac5f..71a9ffed 100644 --- a/charts/area/index.html +++ b/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/charts/bar/index.html b/charts/bar/index.html index b26652fa..bfd26963 100644 --- a/charts/bar/index.html +++ b/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/charts/line/index.html b/charts/line/index.html index 6d134a91..f5d8bbef 100644 --- a/charts/line/index.html +++ b/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/charts/pie/index.html b/charts/pie/index.html index 5db702b8..ca0aa726 100644 --- a/charts/pie/index.html +++ b/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/commercial-license/index.html b/commercial-license/index.html index 8a91d241..c84bf6dc 100644 --- a/commercial-license/index.html +++ b/commercial-license/index.html @@ -7,13 +7,13 @@ - +
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 fd0d9096..8da3d78b 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/custom-statistics/index.html b/custom-statistics/index.html index 78a8183a..a36e51f1 100644 --- a/custom-statistics/index.html +++ b/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/features/authentication/index.html b/features/authentication/index.html index 85b66ee2..3329f69b 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 6c398ed9..d9ad60a2 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 4038166c..4f1f7127 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 1727e4fd..d3016b77 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.


Energy Card Preview Energy Card Preview

If you are not familiar with the interface yet, the dashboard has an sidebar which can be expanded and collapsed, in that case the logo switches between "mini" and "large" scale version.

Both these logos can be changed by the user by modifying the logo.h & logo.cpp file in the library source directory.

The logo used in 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 our ESP-DASH Pro library. To do so, the library contains 2 files which contain the variable that govern 'mini' and 'large' logos used by our webpage.

  1. Go to logo.h
  2. Set DASH_MINI_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_MINI_LOGO_WIDTH & DASH_MINI_LOGO_HEIGHT according to your desired size which will be displayed on the webpage.
  4. Replace the array length of DASH_MINI_LOGO with the newly generated array length.
  5. Now open logo.cpp
  6. Replace the data inside DASH_MINI_LOGO with new data generated just before using File2Raw.

Once done, you may repeat the same steps as above for DASH_LARGE_LOGO.

- + \ No newline at end of file diff --git a/features/custom-uri/index.html b/features/custom-uri/index.html index 051ec099..349d07c8 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 0e21cec7..a3f8cb2a 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 d93e1df6..f9440cb0 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 e99030b8..2e08d4d9 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 943f713e..9b556630 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/getting-started/index.html b/getting-started/index.html index 8562868c..62a38e37 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 cf284c8e..6d3e3965 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 2adf1cd6..f8fb94c9 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.

For ESP8266:​

For ESP32:​

Recommended Dependencies

Although ESP-DASH supports the official dependencies, If your dashboard contains a lot of components, It's advised to switch to the following fork of dependencies for a crash-free experience. These forks are drop-in replacements which contain bugfixes and offer much better performance.

For ESP8266:​

For ESP32:​

Please make sure to uninstall the 'original' dependencies from your libraries folder if you have installed any of these forks. If previous dependencies remain installed, the compiler will throw an error.

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 a494fc20..80a4c80a 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 8974b0b7..46ad48f0 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/cards/air/index.html b/next/cards/air/index.html index f92e3138..500b7b60 100644 --- a/next/cards/air/index.html +++ b/next/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/cards/button/index.html b/next/cards/button/index.html index 99886d1b..1441056b 100644 --- a/next/cards/button/index.html +++ b/next/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/cards/dropdown/index.html b/next/cards/dropdown/index.html index a1d10470..461e47e7 100644 --- a/next/cards/dropdown/index.html +++ b/next/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/cards/energy/index.html b/next/cards/energy/index.html index 5519b461..ffe59185 100644 --- a/next/cards/energy/index.html +++ b/next/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/cards/generic/index.html b/next/cards/generic/index.html index fcdee113..f01989ae 100644 --- a/next/cards/generic/index.html +++ b/next/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/cards/humidity/index.html b/next/cards/humidity/index.html index 9e36c834..522dd771 100644 --- a/next/cards/humidity/index.html +++ b/next/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/cards/image/index.html b/next/cards/image/index.html index 1b80125a..d8697298 100644 --- a/next/cards/image/index.html +++ b/next/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/cards/joystick/index.html b/next/cards/joystick/index.html index 02acb164..d4aeab0a 100644 --- a/next/cards/joystick/index.html +++ b/next/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/cards/link/index.html b/next/cards/link/index.html index 30a68a71..5315a676 100644 --- a/next/cards/link/index.html +++ b/next/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() {
  ...
}

- +
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/cards/password/index.html b/next/cards/password/index.html index 1cfe077c..98026aae 100644 --- a/next/cards/password/index.html +++ b/next/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() {
  ...
}

- +
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/cards/progress/index.html b/next/cards/progress/index.html index af94b451..9890fb62 100644 --- a/next/cards/progress/index.html +++ b/next/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/cards/push-button/index.html b/next/cards/push-button/index.html index 13fa1532..83e0232d 100644 --- a/next/cards/push-button/index.html +++ b/next/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/cards/slider/index.html b/next/cards/slider/index.html index aed138d8..7798957c 100644 --- a/next/cards/slider/index.html +++ b/next/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/cards/status/index.html b/next/cards/status/index.html index f0485a17..1635b096 100644 --- a/next/cards/status/index.html +++ b/next/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​

  • "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");

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", "success");

Reference​

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


...

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


void setup() {
  ...

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

void loop() {
  ...
}

- + \ No newline at end of file diff --git a/next/cards/temperature/index.html b/next/cards/temperature/index.html index 553a52fc..08f049f7 100644 --- a/next/cards/temperature/index.html +++ b/next/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/cards/text-input/index.html b/next/cards/text-input/index.html index d442672f..f68f78b5 100644 --- a/next/cards/text-input/index.html +++ b/next/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/cards/time-sync/index.html b/next/cards/time-sync/index.html index 45d33405..338a6704 100644 --- a/next/cards/time-sync/index.html +++ b/next/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() {
  ...
}

- +
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/cards/week-selector/index.html b/next/cards/week-selector/index.html index 9d2f6d75..07cd65db 100644 --- a/next/cards/week-selector/index.html +++ b/next/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.


...

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


void setup() {
  ...

  /* Text input card callback */
  week.attachCallback([&](const char* days){
    Serial.println("Week Selector Callback Triggered: "+String(value));
    /* Text input card updater - you need to update the button 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/charts/area/index.html b/next/charts/area/index.html index 0207e32e..ef7e01e8 100644 --- a/next/charts/area/index.html +++ b/next/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/charts/bar/index.html b/next/charts/bar/index.html index 1d7d11c5..c4bfd7bb 100644 --- a/next/charts/bar/index.html +++ b/next/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/charts/line/index.html b/next/charts/line/index.html index 46161fe2..eafc8334 100644 --- a/next/charts/line/index.html +++ b/next/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/charts/pie/index.html b/next/charts/pie/index.html index b1ba0290..64499fe5 100644 --- a/next/charts/pie/index.html +++ b/next/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/commercial-license/index.html b/next/commercial-license/index.html index 5e532a77..ad98c296 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 a2ac776e..c82f9218 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/custom-statistics/index.html b/next/custom-statistics/index.html index 10877b92..b8e3a1b7 100644 --- a/next/custom-statistics/index.html +++ b/next/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/features/authentication/index.html b/next/features/authentication/index.html index e73164fc..5d2fee25 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 dad7b987..1a5ba084 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 6f10ef95..1664bfe1 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 615d3d27..62face74 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.


Energy Card Preview Energy Card Preview

If you are not familiar with the interface yet, the dashboard has an sidebar which can be expanded and collapsed, in that case the logo switches between "mini" and "large" scale version.

Both these logos can be changed by the user by modifying the logo.h & logo.cpp file in the library source directory.

The logo used in 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 our ESP-DASH Pro library. To do so, the library contains 2 files which contain the variable that govern 'mini' and 'large' logos used by our webpage.

  1. Go to logo.h
  2. Set DASH_MINI_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_MINI_LOGO_WIDTH & DASH_MINI_LOGO_HEIGHT according to your desired size which will be displayed on the webpage.
  4. Replace the array length of DASH_MINI_LOGO with the newly generated array length.
  5. Now open logo.cpp
  6. Replace the data inside DASH_MINI_LOGO with new data generated just before using File2Raw.

Once done, you may repeat the same steps as above for DASH_LARGE_LOGO.

- + \ No newline at end of file diff --git a/next/features/custom-uri/index.html b/next/features/custom-uri/index.html index 34a79e3f..78eca6dc 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 37c6d18a..7c9cd21b 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 70141cfd..1eaa260a 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 75ade3ea..fe0a1ec6 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 b42f15a4..992799b0 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/getting-started/index.html b/next/getting-started/index.html index 4de3e874..9c8eaa1a 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 e578bef9..75465b4c 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 92a9ddc6..6237d004 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.

For ESP8266:​

For ESP32:​

Recommended Dependencies

Although ESP-DASH supports the official dependencies, If your dashboard contains a lot of components, It's advised to switch to the following fork of dependencies for a crash-free experience. These forks are drop-in replacements which contain bugfixes and offer much better performance.

For ESP8266:​

For ESP32:​

Please make sure to uninstall the 'original' dependencies from your libraries folder if you have installed any of these forks. If previous dependencies remain installed, the compiler will throw an error.

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 75d7537f..3bc89969 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 2a9e2420..7c155b2d 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/tabs/index.html b/next/tabs/index.html index 995466a2..d2d43035 100644 --- a/next/tabs/index.html +++ b/next/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/tabs/index.html b/tabs/index.html index 9906cb1d..bd1843d2 100644 --- a/tabs/index.html +++ b/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 diff --git a/v3.x.x/cards/air/index.html b/v3.x.x/cards/air/index.html index 67e153d7..73f3b403 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 87736a1a..9953c366 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 c8c5c033..ac4b2133 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 62653c37..7f727cb3 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 b225ebde..fc3bb50d 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 5e0dfda0..a2878bac 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 91ec9fc6..1dcbd960 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 84ee24c0..4fd13a94 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 12fb2ba0..d684f08b 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 e16872fb..4a882eb4 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 a8a2c5a2..21a9fbb1 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 39e5fa46..545a8be3 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 abbb6f93..2d3dff95 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 c0be45e2..b1334dc5 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 03ac52ff..e9639139 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 09c3488f..0ef1f268 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 eced81de..0869f5cb 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 11daf782..4b7072aa 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 5900d83e..9d7b3465 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 8fc90d32..79f4f930 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 415b20a3..97123d21 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 77e77dd3..ab529bbd 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 57983d59..95ec9fa5 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