ayushsharma82 / esp-dash

Blazing fast library to create a functional dashboard for ESP8266 / ESP32

   

DASH V4 is the 4th-gen blazing fast library to create a functional & real-time dashboard for ESP8266 & ESP32 microcontrollers. This library includes charts, display cards, interactive buttons and many more components to create a perfect dashboard which is accessible locally via your IoT device's IP. DASH does not require any kind of internet connection, everything is stored locally.

Features

• 🔥 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.

Documentation

Learn more about Installation & Usage: Click Here

Open-Source Preview

Want More? Upgrade to Pro

ESP-DASH Pro comes with the following extended functionality:

• 11 Exclusive Widgets ( Line, Area, Pie, Text Input, Joystick and more! )
• Tabs Support ~ Add multiple pages to your dashboard.
• Custom Title
• Custom Branding
• Custom Widget Size
• Enable/Disable Animations
• Atlast, It is a fantastic way to support the developer for the time went into the making & maintaining the library.

Available here:

• Official Website

Contributions

Every contribution to this repository is highly appreciated! If you spot any bug or problem, open a issue or pull request so that it can be rectified for everyone.

For feature requests: Please open a issue and I'll add the feature in a future release once I get some time in my hands.

License

ESP-DASH is licensed under General Public License v3 ( GPLv3 ). If you are intending to use ESP-DASH in a commercial project, please consider buying the ESP-DASH Pro which comes with a less restrictive SCL-1.1 license ( SOFTT Commercial License 1.1 ).

esp-dash's Issues

Doublicate key

two different values: 0 and 20

Module Warning (from ./node_modules/eslint-loader/index.js):
error: Duplicate key 'height' (no-dupe-keys) at src\components\SliderCard.vue:96:13:
  94 |             data: null,
  95 |             direction:"ltr",
> 96 |             height:20,
     |             ^

Port for ESP32

Any plans to do a port for the esp32?
Would you think a minimal change port would be best or a complete rewrite?
For example EspDash.loop(); could be put into a task on the esp32.

number card - negative number handling

im testing your software and i am sending negative numbers to your number card and it displays as 65528 instead of -8

How can I change the images of webserver?

I tried to change the png images on data/img folder, and then run SPIFFS again, but don't worked. Can you help me? I tried to translate the webpage too, rewriting the html file, but don't worked too

Need Examples - ESP Dash Next

Hi ayushsharma82,

Thanks to you and the community for this. Please update examples of ESP Dash Next.
Need Guage & Line Card Code Reference specifically.

Thanks.

Some suggestions about your code

Hello, nice library :)

Here are some suggestions

• Don't duplicate the add* methods, simply put a default value in the prototype (for example void addNumberCard(const char* _id, const char* _name, int _value = 0 ); )
• Use #if defined(DEBUG_MODE) instead of if(DEBUG_MODE)
• Don't use Strings

Used examples

My compliments Ayush Sharma for this great library!

We think this library is worth recommending and added some of your examples to our library examples (slightly modified for working together with our library)

Of course we added links & credits to your account but we would like your feedback:
https://github.com/iotappstory/ESP-Library/blob/master/examples/Other%20Examples/ESP-DASH/ESP32_blink/ESP32_blink.ino

Let me know if you would like anything changed.

Regards
Onno Dirkzwager
IOTAppStory.com

Features that I would like to add

I love the easy and fast implementation of ESP-DASH and have been playing with it on a ESP-01., 2 area that I like to see expanded,

1. Ability to display a String/Text message, I notice that the data structure for the card is the value have to be an integer, would it be better to be a string as we could then format any value, including float value and string message to be display on a card?

2. Is it possible to dynamically add or delete a card within run-time?

If possible could you drop some comment if this would be a major overhaul effort to the existing code.

Just my 2 cents.

Thanks

Clickable pads

Hi,

this library is awesome, but it would be great, if there would be chance to add some clickable panels or buttons which would initiate some actions. Some input panels would be great too.

Thank you for your work.

can not add project description in about page

First of all thx for this great work, i want to add some description about my project before the lines of about DASH in about page (tab) but when i add lines and upload the code everything is the same and there is no extra description

Arduinojson V6.7.0 library

Thanks for amazing Dash.
for test and compile new Lib ESP-Dash V2 , problem working with Arduino json V6.7.0 .
Search and test 10 hour but can't do that. some error in detail:
"DynamicJsonDocument' was not declared in this scope"
'doc' was not declared in this scope
'deserializeJson' was not declared in this scope
expected primary-expression before '>' token
...
Is it possible to share the library with the tested project? Thanks
I'm sorry for the weak English.

LineChart enhancements

Hi,

I am planning to display a graph showing water temperature readings for the last 48 hours with 15 minute between samples.
Is there a way to:

• Control the "physical size" of the LineChart on the screen; i.e make it fill the whole available screen size?
• Lock y-axis size 0 - 100?
• Make y-axis ticks 0 / 10....90/100 (degrees Celsius)?
• Make the LineChart accept 4242 = 192 datapoints? (= datapoint every 15 minutes for 2 days)

options to modify charts

I'm wondering how to customise the charts, add new chart types etc. at moment I want to add vertical scale to the addLineChart, but need to understand how the files interact and build process.

It looks like it should be possible to add newChartComponent.vue to ESP-DASH-master\vue-frontend\src\components\ with a corresponding new line in \src\ESPDash.h

and possibly configure options within LineChart.vue to add legends, scales, y-axis labels etc.

Am I on the right track here? A few notes on how to add more chart types and configurations would be awesome.

in main.js > import import VueApexCharts
range of chart types available
https://apexcharts.com/vue-chart-demos/line-charts/data-labels/

in ESP-DASH-master\src\ESPDash.h method for addLineChart
void addLineChart(const char* _id, const char* _name, int _x_axis_value[], int _x_axis_size, const char* _y_axis_name, int _y_axis_value[], int _y_axis_size);

component
ESP-DASH-master\vue-frontend\src\components\LineChart.vue

ESP-DASH-master\vue-frontend\README.md describes the build process(?)

Generalize the number card

Hi,

l was wondering if it would be possible to add more card types similar to the temperature and humidity cards, e.g. a card for atmospheric pressure, voltage or power. After checking the code I've come to the conclusion that all of them are basically the same, the only difference is the measuring unit.

I think I would be able to modify the code of the number card so that it would be additionally configured with a unit (a string, like V or kW for example). This way the number card could be used to display any kind of measurement. Additionally, the existing temperature and humidity card types could be also built using the extended number card. Of course, the functions related to the temperature and humidity cards should probably still stay in the class for backward compatibility, but their internal implementation could be simplified.

What do you think about this approach? Would it be worth implementing? If you think it's a good idea, I could try to do it and prepare a pull request.

esp-dash & esphome = synergy

It would be awesome if ESP-DASH could be tightly integrated with ESPHOME!

With esphome (esphome.io or github.com/esphome) it's awesomely easy to create nearly everything wit esp's and sensors. It comes already with a web server component (very simple) and it would be a dream to get ESP-DASH into the show! ⭐ 👍 🥇 😁

blank page

i had upload the sketch and i got blank page. help me please.

List and graphs

Hello,
This library is just perfect, and I would like to give a hint ... How about using some buttons to change the state of ports, something like EspDash.addButton ("Button", State)
and lists / graphs, with the data coming to X tab, is perfect, thank you from now on.
Taking advantage of the topic, how can I modify the HTML, css and javascript in the front end part to improve the look without compromising the library's operation?

[dash-next] information leak to github

Not a big think, but may consider.

Observation

Page contribute requests information about repository from github.

It is a cross request. Every crossrequest contain an origin header. The header contains the local network address.

Risk

Leaks local network information to github.

Possible solution

It is not possible to disable origin header.

1. Option:
   Add a button "request information from github". --> User makes an active decision to connect.

2. Option:
   Make option in backend to disable request.

3. Option:
   Remove function.

4. Option:
   Proxy request over ESP. Ugly, not recommended.

data directory

So, what happened? i missed a ton, got a new job and i haven't been tinkering as much.

How can i change the Roll over wifi settings
How can i change the img directory, i liked my old logo....

good to see the updates!

failed to load... content lenght mismatch

Hi
I updated to the latest version and have some frequent issues loading the page.
Note, sometimes it does seem to load (with a few refreshes).

I've re-produced it using the realtime esp8266 in the sample folder, with the only difference of adding 5 extra cards in the init.

   ESPDash.init(server);   // Initiate ESPDash and attach your Async webserver instance
    // Add Respective Cards
    ESPDash.addLineChart("chart1", "Example Line Chart", x_axis, x_axis_size, "Power KwH", y_axis, y_axis_size);
    ESPDash.addGaugeChart("chart2", "Gauge 1", 30);
       ESPDash.addNumberCard("PowerConsumption", "Power Consumption", 0);
    ESPDash.addNumberCard("PowerSolar", "Power Solar", 0);
      ESPDash.addNumberCard("PConsT", "Consumption Today", 0);
    ESPDash.addNumberCard("PSolT", "Solar Today", 0);
    ESPDash.addStatusCard("mqttStatus", "mqtt Status", 3);
    server.begin();

is 5 cards just too much for an ESP8266? or is something else wrong.

Note, it does seem like a lot of data is loaded (800+kb)., Does it make sense to load the vue files from a cdn instead of from the device?

action attachments on ver3?

Is there an alternative for
ESPDash.attachButtonClick(buttonClicked);
or
ESPDash.attachSliderChanged(sliderChanged);
in this version already? I could not find it in source.

Maybe another way to handle such events?

[Request] Compress script for folder data

Topic	request
Version	v1.0.2

Hi,
thanks for your library.
The folder data/dash/ contains raw source files and a compressed .gz files. If I change the source files, there is no easy way to rebuild the complete folder. Can you publish the .sh script?
Best

Adding new cards

Hi,

I want to help add a few new cards. I'm very familar with Vue, so no problems there.

What are the build steps from cloning the project please?

Thanks,

Must have one file in data directory

This is awesome.... however I had at least one issue getting everything to work (great instructions).

In the data directory if you only have a dash folder the "ESP8266 Sketch data upload" thinks there is nothing to upload. I added a text file in the data directory and it works perfect.

Help!!

Arduino Json V6.x.x.x

Hi There

Thanks for a fantastic library.
It does not work with the current Arduino Json release.
Reverted to 5.12 and all OK

trying to show components without v-for

Hi,
I want to make my own Home view and trying to use the temp component like below.

<temperature-card :name="cards.temperature[0].name" :value="cards.temperature[0].value" :type="cards.temperature[0].value_type"></temperature-card>

but getting these errors:

vue.runtime.esm.js?2b0e:601 [Vue warn]: Error in render: "TypeError: Cannot read property 'name' of undefined"

found in

---> at src/views/Home.vue
at src/App.vue

warn @ vue.runtime.esm.js?2b0e:601
logError @ vue.runtime.esm.js?2b0e:1828
globalHandleError @ vue.runtime.esm.js?2b0e:1823
handleError @ vue.runtime.esm.js?2b0e:1812
Vue._render @ vue.runtime.esm.js?2b0e:4655
updateComponent @ vue.runtime.esm.js?2b0e:2899
get @ vue.runtime.esm.js?2b0e:3269
Watcher @ vue.runtime.esm.js?2b0e:3258
mountComponent @ vue.runtime.esm.js?2b0e:2906
Vue.$mount @ vue.runtime.esm.js?2b0e:8070
init @ vue.runtime.esm.js?2b0e:4239
createComponent @ vue.runtime.esm.js?2b0e:5688
createElm @ vue.runtime.esm.js?2b0e:5635
patch @ vue.runtime.esm.js?2b0e:6187
Vue._update @ vue.runtime.esm.js?2b0e:2778
updateComponent @ vue.runtime.esm.js?2b0e:2899
get @ vue.runtime.esm.js?2b0e:3269
Watcher @ vue.runtime.esm.js?2b0e:3258
mountComponent @ vue.runtime.esm.js?2b0e:2906
Vue.$mount @ vue.runtime.esm.js?2b0e:8070
init @ vue.runtime.esm.js?2b0e:4239
createComponent @ vue.runtime.esm.js?2b0e:5688
createElm @ vue.runtime.esm.js?2b0e:5635
createChildren @ vue.runtime.esm.js?2b0e:5763
createElm @ vue.runtime.esm.js?2b0e:5664
patch @ vue.runtime.esm.js?2b0e:6187
Vue._update @ vue.runtime.esm.js?2b0e:2778
updateComponent @ vue.runtime.esm.js?2b0e:2899
get @ vue.runtime.esm.js?2b0e:3269
Watcher @ vue.runtime.esm.js?2b0e:3258
mountComponent @ vue.runtime.esm.js?2b0e:2906
Vue.$mount @ vue.runtime.esm.js?2b0e:8070
init @ vue.runtime.esm.js?2b0e:4239
createComponent @ vue.runtime.esm.js?2b0e:5688
createElm @ vue.runtime.esm.js?2b0e:5635
patch @ vue.runtime.esm.js?2b0e:6226
Vue._update @ vue.runtime.esm.js?2b0e:2778
updateComponent @ vue.runtime.esm.js?2b0e:2899
get @ vue.runtime.esm.js?2b0e:3269
Watcher @ vue.runtime.esm.js?2b0e:3258
mountComponent @ vue.runtime.esm.js?2b0e:2906
Vue.$mount @ vue.runtime.esm.js?2b0e:8070
(anonymous) @ main.js?56d7:20
./src/main.js @ app.js:3006
webpack_require @ app.js:724
fn @ app.js:101
1 @ app.js:3151
webpack_require @ app.js:724
(anonymous) @ app.js:791
(anonymous) @ app.js:794
Show 20 more frames
vue.runtime.esm.js?2b0e:1832 TypeError: Cannot read property 'name' of undefined
at Proxy.render (eval at ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"3ef46b23-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js?!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/views/Home.vue?vue&type=template&id=fae5bece& (app.js:1125), :16:46)
at VueComponent.Vue._render (vue.runtime.esm.js?2b0e:4653)
at VueComponent.updateComponent (vue.runtime.esm.js?2b0e:2899)
at Watcher.get (vue.runtime.esm.js?2b0e:3269)
at new Watcher (vue.runtime.esm.js?2b0e:3258)
at mountComponent (vue.runtime.esm.js?2b0e:2906)
at VueComponent.Vue.$mount (vue.runtime.esm.js?2b0e:8070)
at init (vue.runtime.esm.js?2b0e:4239)
at createComponent (vue.runtime.esm.js?2b0e:5688)
at createElm (vue.runtime.esm.js?2b0e:5635)
logError @ vue.runtime.esm.js?2b0e:1832
globalHandleError @ vue.runtime.esm.js?2b0e:1823
handleError @ vue.runtime.esm.js?2b0e:1812
Vue._render @ vue.runtime.esm.js?2b0e:4655
updateComponent @ vue.runtime.esm.js?2b0e:2899
get @ vue.runtime.esm.js?2b0e:3269
Watcher @ vue.runtime.esm.js?2b0e:3258
mountComponent @ vue.runtime.esm.js?2b0e:2906
Vue.$mount @ vue.runtime.esm.js?2b0e:8070
init @ vue.runtime.esm.js?2b0e:4239
createComponent @ vue.runtime.esm.js?2b0e:5688
createElm @ vue.runtime.esm.js?2b0e:5635
patch @ vue.runtime.esm.js?2b0e:6187
Vue._update @ vue.runtime.esm.js?2b0e:2778
updateComponent @ vue.runtime.esm.js?2b0e:2899
get @ vue.runtime.esm.js?2b0e:3269
Watcher @ vue.runtime.esm.js?2b0e:3258
mountComponent @ vue.runtime.esm.js?2b0e:2906
Vue.$mount @ vue.runtime.esm.js?2b0e:8070
init @ vue.runtime.esm.js?2b0e:4239
createComponent @ vue.runtime.esm.js?2b0e:5688
createElm @ vue.runtime.esm.js?2b0e:5635
createChildren @ vue.runtime.esm.js?2b0e:5763
createElm @ vue.runtime.esm.js?2b0e:5664
patch @ vue.runtime.esm.js?2b0e:6187
Vue._update @ vue.runtime.esm.js?2b0e:2778
updateComponent @ vue.runtime.esm.js?2b0e:2899
get @ vue.runtime.esm.js?2b0e:3269
Watcher @ vue.runtime.esm.js?2b0e:3258
mountComponent @ vue.runtime.esm.js?2b0e:2906
Vue.$mount @ vue.runtime.esm.js?2b0e:8070
init @ vue.runtime.esm.js?2b0e:4239
createComponent @ vue.runtime.esm.js?2b0e:5688
createElm @ vue.runtime.esm.js?2b0e:5635
patch @ vue.runtime.esm.js?2b0e:6226
Vue._update @ vue.runtime.esm.js?2b0e:2778
updateComponent @ vue.runtime.esm.js?2b0e:2899
get @ vue.runtime.esm.js?2b0e:3269
Watcher @ vue.runtime.esm.js?2b0e:3258
mountComponent @ vue.runtime.esm.js?2b0e:2906
Vue.$mount @ vue.runtime.esm.js?2b0e:8070
(anonymous) @ main.js?56d7:20
./src/main.js @ app.js:3006
webpack_require @ app.js:724
fn @ app.js:101
1 @ app.js:3151
webpack_require @ app.js:724
(anonymous) @ app.js:791
(anonymous) @ app.js:794
Show 19 more frames
:8080/#/:1 Unchecked runtime.lastError: The message port closed before a response was received

convert from Access point to local webserver on existing wifi network?

Is it possible to enable this as a local webserver on an existing wifi network?

I just tried swapping
WiFiServer server(80);
for
AsyncWebServer server(80);

threw error message as below (not surprised). Much as I like the access point based design, I was hoping to use this dashboard on a node in my local wifi and port forward access to the dashboard. Having to jump onto the new ssid for this access point is not my use case.

Great work otherwise.

Arduino: 1.8.9 (Windows Store 1.8.21.0) (Windows 10), Board: "FireBeetle-ESP32, 80MHz, 115200"

blah\ESPDashDemo1.ino: In function 'void setup()':

ESPDashDemo1:50:24: error: no matching function for call to 'ESPDashClass::init(WiFiServer&)'

 ESPDash.init(server);   // Initiate ESPDash and attach your Async webserver instance

                    ^

In file included from blah\ESPDashDemo1.ino:16:0:

blah\Arduino\libraries\ESP-DASH-master\src/ESPDash.h:84:14: note: candidate: void ESPDashClass::init(AsyncWebServer&)

     void init(AsyncWebServer& server);

          ^

blah\Arduino\libraries\ESP-DASH-master\src/ESPDash.h:84:14: note: no known conversion for argument 1 from 'WiFiServer' to 'AsyncWebServer&'

Multiple libraries were found for "WiFi.h"
Used: blah\ArduinoData\packages\esp32\hardware\esp32\1.0.2\libraries\WiFi
blah\ArduinoLLC.ArduinoIDE_1.8.21.0_x86__mdqgnx93n4wtt\libraries\WiFi
exit status 1
no matching function for call to 'ESPDashClass::init(WiFiServer&)'

This report would have more information with
"Show verbose output during compilation"
option enabled in File -> Preferences.

can't npm install -S

Hi there,

Just following the instructions to customize the frontend.

running npm install -S in the vue-frontend return me

➜  vue-frontend git:(master) npm install -S

> [email protected] install /Users/me/ESP-DASH/vue-frontend/node_modules/fsevents
> node install

node-pre-gyp WARN Using request for node-pre-gyp https download
[fsevents] Success: "/Users/me/ESP-DASH/vue-frontend/node_modules/fsevents/lib/binding/Release/node-v72-darwin-x64/fse.node" is installed via remote

> [email protected] install /Users/me/ESP-DASH/vue-frontend/node_modules/yorkie
> node bin/install.js

setting up Git hooks
can't find .git directory, skipping Git hooks installation

> [email protected] install /Users/me/ESP-DASH/vue-frontend/node_modules/node-sass
> node scripts/install.js

Downloading binary from https://github.com/sass/node-sass/releases/download/v4.11.0/darwin-x64-72_binding.node
Cannot download "https://github.com/sass/node-sass/releases/download/v4.11.0/darwin-x64-72_binding.node":

HTTP error 404 Not Found

Hint: If github.com is not accessible in your location
      try setting a proxy via HTTP_PROXY, e.g.

      export HTTP_PROXY=http://example.com:1234

or configure npm proxy via

      npm config set proxy http://example.com:8080

> [email protected] postinstall /Users/me/ESP-DASH/vue-frontend/node_modules/node-sass
> node scripts/build.js

Building: /usr/local/Cellar/node/12.4.0/bin/node /Users/me/ESP-DASH/vue-frontend/node_modules/node-gyp/bin/node-gyp.js rebuild --verbose --libsass_ext= --libsass_cflags= --libsass_ldflags= --libsass_library=
gyp info it worked if it ends with ok
gyp verb cli [
gyp verb cli   '/usr/local/Cellar/node/12.4.0/bin/node',
gyp verb cli   '/Users/me/ESP-DASH/vue-frontend/node_modules/node-gyp/bin/node-gyp.js',
gyp verb cli   'rebuild',
gyp verb cli   '--verbose',
gyp verb cli   '--libsass_ext=',
gyp verb cli   '--libsass_cflags=',
gyp verb cli   '--libsass_ldflags=',
gyp verb cli   '--libsass_library='
gyp verb cli ]
gyp info using [email protected]
gyp info using [email protected] | darwin | x64
gyp verb command rebuild []
gyp verb command clean []
gyp verb clean removing "build" directory
gyp verb command configure []
gyp verb check python checking for Python executable "python2" in the PATH
gyp verb `which` succeeded python2 /usr/local/bin/python2
gyp verb check python version `/usr/local/bin/python2 -c "import sys; print "2.7.16
gyp verb check python version .%s.%s" % sys.version_info[:3];"` returned: %j
gyp verb get node dir no --target version specified, falling back to host node version: 12.4.0
gyp verb command install [ '12.4.0' ]
gyp ERR! UNCAUGHT EXCEPTION
gyp ERR! stack Error: Cannot find module 'minipass'
gyp ERR! stack Require stack:
gyp ERR! stack - /Users/me/ESP-DASH/vue-frontend/node_modules/node-gyp/node_modules/tar/lib/pack.js
gyp ERR! stack - /Users/me/ESP-DASH/vue-frontend/node_modules/node-gyp/node_modules/tar/lib/create.js
gyp ERR! stack - /Users/me/ESP-DASH/vue-frontend/node_modules/node-gyp/node_modules/tar/index.js
gyp ERR! stack - /Users/me/ESP-DASH/vue-frontend/node_modules/node-gyp/lib/install.js
gyp ERR! stack - /Users/me/ESP-DASH/vue-frontend/node_modules/node-gyp/lib/node-gyp.js
gyp ERR! stack - /Users/me/ESP-DASH/vue-frontend/node_modules/node-gyp/bin/node-gyp.js
gyp ERR! stack     at Function.Module._resolveFilename (internal/modules/cjs/loader.js:623:15)
gyp ERR! stack     at Function.Module._load (internal/modules/cjs/loader.js:527:27)
gyp ERR! stack     at Module.require (internal/modules/cjs/loader.js:681:19)
gyp ERR! stack     at require (internal/modules/cjs/helpers.js:16:16)
gyp ERR! stack     at Object.<anonymous> (/Users/me/ESP-DASH/vue-frontend/node_modules/node-gyp/node_modules/tar/lib/pack.js:27:18)
gyp ERR! stack     at Module._compile (internal/modules/cjs/loader.js:774:30)
gyp ERR! stack     at Object.Module._extensions..js (internal/modules/cjs/loader.js:785:10)
gyp ERR! stack     at Module.load (internal/modules/cjs/loader.js:641:32)
gyp ERR! stack     at Function.Module._load (internal/modules/cjs/loader.js:556:12)
gyp ERR! stack     at Module.require (internal/modules/cjs/loader.js:681:19)
gyp ERR! System Darwin 18.6.0
gyp ERR! command "/usr/local/Cellar/node/12.4.0/bin/node" "/Users/me/ESP-DASH/vue-frontend/node_modules/node-gyp/bin/node-gyp.js" "rebuild" "--verbose" "--libsass_ext=" "--libsass_cflags=" "--libsass_ldflags=" "--libsass_library="
gyp ERR! cwd /Users/me/ESP-DASH/vue-frontend/node_modules/node-sass
gyp ERR! node -v v12.4.0
gyp ERR! node-gyp -v v3.8.0
gyp ERR! This is a bug in `node-gyp`.
gyp ERR! Try to update node-gyp and file an Issue if it does not help:
gyp ERR!     <https://github.com/nodejs/node-gyp/issues>
Build failed with error code: 7
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] postinstall: `node scripts/build.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] postinstall script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/me/.npm/_logs/2019-06-20T15_12_33_123Z-debug.log

I'm on macOS Mojave

node installed with brew
node : v12.4.0
npm : 6.9.0

Possiblity of adding ElegantOTA as a card in ESP-DASH ?

Hi ,

Been working on ESP-DASH for a couple of weeks , if was wondering if ElegantOTA can be made as a card in the ESP-DASH library?

Use curly braces for initialization of variables

Using curly braces {} instead of equal = operator is a better solution to avoid error of conversion between types.

Cannot Display Webserver on iOS Mobile Device

Greetings,
I cannot display the dash board on any iOS device.
Currently Running AP Example code, with the provided default ESP8266_SPIFFS_UPLOAD performed.

I have tried, 3 iphones, all have safari and google chrome installed. I can connect to the webpage, it is not displaying anything. Android tablet running Google Chrome works perfectly.

Framework Suggestion

First of all, I love this idea and your implementation.

As a webdeveloper (by day), I noticed you use jQuery. Although it's powerful, there are better alternatives around these days. I'd like to suggest looking into Vue.js, allowing you to make a lightweight reactive website. It would be even better if the communication with the ESP is done via web sockets to get realtime updates.

Anyhow, keep up the great work!

extend Lib

Thanks for a great library.
I want to extend your lib and add other items like form, chart, button and .... Can you guide me where to start? And what can I do? For example, the items that you have in EasyUI are added to this lib.
Thanks.
Mahdi Barati

WifiManager Integration

This is a really great library, thank you! I wanted to use the WifiManager library but I keep getting errors saying I'm including multiple libraries. Particularly because ESP-DASH includes WiFi libraries.

Would be a really useful enhancement for avoiding hard-coded WiFi credentials.

Have any tips if I were to tackle this on my own?

Thank you.

using analogRead() breaks functionality

Hi all,

Using ESP8266_basic.ino from the examples, if I add an analogRead() to the loop() function, the dashboard is not accessible anymore.
It still updates the cards, but the sketch is broken.

I've tested this on multiple wemos D1 mini v 3.0.0

Error compiling for board ESP32 Dev Module.

Compiling ESP32_slider sketch generates the following errors.
What am I doing wrong?

`
Arduino:1.8.10 (Windows 10), TD: 1.48, Kort:"ESP32 Dev Module, Disabled, Default 4MB with spiffs (1.2MB APP/1.5MB SPIFFS), 240MHz (WiFi/BT), QIO, 80MHz, 4MB (32Mb), 921600, None"

Multiple libraries were found for "FS.h"
Använd: C:\Users\dksoepv\AppData\Local\Arduino15\packages\esp32\hardware\esp32\1.0.4\libraries\FS
Multiple libraries were found for "ESPDash.h"
Använd: C:\Users\dksoepv\OneDrive
Multiple libraries were found for "WiFi.h"
Använd: C:\Users\dksoepv\AppData\Local\Arduino15\packages\esp32\hardware\esp32\1.0.4\libraries\WiFi
Oanvänd: C:\Users\dksoepv\OneDrive
Multiple libraries were found for "AsyncTCP.h"
In file included from C:\Users\dksoepv\AppData\Local\Temp\arduino_modified_sketch_360742\sketch_jan27b.ino:25:0:

Använd: C:\Users\dksoepv\OneDrive
C:\Users\dksoepv\OneDrive - Alfa Laval\Documents\My Library\111\Arduino\Arduino-1.8.10\libraries\ESP-DASH-master\src/ESPDash.h:40:29: fatal error: ArduinoJson.h: No such file or directory

Multiple libraries were found for "ESPAsyncWebServer.h"
compilation terminated.

Använd: C:\Users\dksoepv\OneDrive
exit status 1
Error compiling for board ESP32 Dev Module.

This report would have more information with
"Show verbose output during compilation"
option enabled in File -> Preferences.

`

Esp32 rebooting after receiving connection

Hello, first of all, I would like to thank you because of this library, i have been using it a lot and i think it is really usefull.
I am having a problem and i would like to know if it is because of your library. I am interfacing ten peripherals to esp 32 through external interrupts, and each time that certain amount of interrupts ellapsed, i update the Web view by using NumberCard. The problem is that the esp32 is being restarted and the serial monitor prints this message :
Guru Meditation Error: Core 1 panic'ed (Coprocessor exception)
Core 1 register dump:
PC : 0x4015498f PS : 0x00060031 A0 : 0x800d2380 A1 : 0x3ffbe690
A2 : 0x3ffc10c4 A3 : 0x00000001 A4 : 0x00000000 A5 : 0x00000000
A6 : 0x00000003 A7 : 0x00060023 A8 : 0x00060021 A9 : 0x40092d94
A10 : 0x0000002a A11 : 0x3ffd6bc0 A12 : 0x800f3f72 A13 : 0x3ffd6bb0
A14 : 0x3f400020 A15 : 0x00000000 SAR : 0x0000001e EXCCAUSE: 0x00000004
EXCVADDR: 0x00000000 LBEG : 0x4000c2e0 LEND : 0x4000c2f6 LCOUNT : 0x00000000
Core 1 was running in ISR context:
EPC1 : 0x4015498f EPC2 : 0x00000000 EPC3 : 0x00000000 EPC4 : 0x40086a29

Backtrace: 0x4015498f:0x3ffbe690 0x400d237d:0x3ffbe770 0x400d1882:0x3ffbe790 0x40080f7d:0x3ffbe7b0 0x40084771:0x3ffbe7d0 0x4014858c:0x3ffd6a10 0x40148fc6:0x3ffd6b70 0x400f4306:0x3ffd6b90 0x400f3df5:0x3ffd6bb0 0x400f3f6f:0x3ffd6be0 0x400f4167:0x3ffd6c10 0x400f42b9:0x3ffd6c60 0x400e606a:0x3ffd6c80 0x400e612a:0x3ffd6db0 0x400e486d:0x3ffd6e50 0x400e5971:0x3ffd6f40 0x40154d6b:0x3ffd7210 0x401561d2:0x3ffd7230 0x40147d91:0x3ffd7280 0x40147dad:0x3ffd72c0 0x40145c41:0x3ffd72e0 0x40145cbd:0x3ffd7320 0x40146366:0x3ffd7340 0x40088b7d:0x3ffd7370

Rebooting...
I hope you could help me. Thanks in avance

problem with some libraries?

include <Arduino.h>

include <WiFi.h>

include <PubSubClient.h>

include <EEPROM.h>

include <SPI.h> // include libraries

include <LoRa.h>

include <xxtea-lib.h>

//#include <BH1750.h>

include "Timer.h"

include "esp_system.h"

include <SparkFunTSL2561.h>

include <Wire.h>

when i try with lora and wifi, got some problem, can you check?

Slider change handler not executing with multiple sliders

After adding multiple slider cards, it appears that the slider handler does not fire.

It appears I am not the only one to identify this issue: link

void sliderChanged(const char* id, int value) {
  Serial.println(String(id));
}

void setup() {

  ESPDash.attachSliderChanged(sliderChanged);

  ESPDash.addSliderCard("0", "Blue Channel", 2);
  ESPDash.addSliderCard("1", "White Channel", 2);
  ESPDash.addSliderCard("2", "Violet Channel", 2);

}

Not my entire sketch as it would be too big to see the salient issues, but the relevant lines included.

[Feature] Use ENUM instead of integer for status card

It could be nice to use name instead of just a number for statusCard.

Like StatusCard::WARNING, or STATUS_WARNING, STATUS_OK, ... (I don't know which typo would be good)

I think it's more user-friendly, and help the user to avoid knowing which number correspond to status type.

Develop WebPage

Hello and Regards, Thank you for your support
I would like to advise you on changes to the webpage and develop that, for example adding a tab and a new item, and .... What is framwork? I worked on ESPdash V1 and I could apply changes to my Jquery code, but in ESP Dash V2 it's a bit confusing to me. Thanks for introducing a step-by-step strategy.

Possibility to modify / extend static information

I just switched from ESP-UI to ESP-Dash and I really like it.
Thank you for the great work

I intend to use it on multiple microcontrollers in the same network, with quite simmilar set of cards.
So having multiple dashes opened in different tabs, its hard to determine which is which.

I would love to:

• be able to change title tag and page title from "DASH" to something different
• have a kind of subtitle displayed under or beside the title for a short description
• have a section on the info page to add a own description or short device documentation
• add "system" measurements as additional lines to the stats page and thus keep the main dashboard clean for core device functionality
  e.g. water level measurement, flow control and valve status on the dashboard, VCC, temperature and humidity as lines on the stats page

Add button for remote update?

Hi,

I'm about to commence a new project whereby I'd the ESP to check a remote server for firmware updates, if there's one, display a button to commence the update (download and flash)....

Ideally I'd like to use your superb dashboard to do this, as I'm new to code, would this be possible?

page loading

hi. my page doesn't load when i try to access the ip .

Help me please.

tks

Expansion of cards

Hi
I am very interested in using vue with the ESP32 as it looks like a better way of updating a web page instead of using AJAX. Do you have any plans to add other cards such as a form card to enter data and graphical instances such as a slider to change values or a progress bar.

best regards
Malcolm

Hosting the dashboard on AWS

Hey @ayushsharma82 I would like to use the dashboard for my project, The Automated Farmer. One of the goals is to host my front-end on AWS, which I already have my ESP8266 logging data to and a simple web-page to view.

I've been looking through the vue-frontend directory but am inexperienced in Vue.js. Do you have any tips for adding cards, graphs, etc. to the development webpage? I can work the incoming data from AWS but I am stuck understanding how to add new components to the dashboard without an ESP.

In exchange I can at least contribute to some documentation for bringing the project into the cloud. Thank you for the really great library, you make the ESP a lot more fun to work with.

Feature request

Hi, just stumbled on this amazing work. Reminds me of when I first used Online Web dashboards for IOT. Great idea to have a small implementation running on the device itself. Could we add if not already in the feature list a pop up alert box? back color and text with option. Can it also trigger a small wave file? sound. Would be awesome for alarm notification etc.
Have you a night background theme? tablet running connection beside bed would need to be much dimmer. Need to sleep Lol.
Amazing work guys, really looking forward to trying this version 3 out.
Dans

Compiler Error while building basic Demo

Arduino: 1.8.12 (Mac OS X), Board: "OLIMEX ESP32-EVB, 80MHz, 115200, Default"

In file included from /Users/kse/devel/Projekte/ESP32/libraries/ArduinoJson/src/ArduinoJson/Variant/VariantContent.hpp:11:0,
from /Users/kse/devel/Projekte/ESP32/libraries/ArduinoJson/src/ArduinoJson/Variant/VariantSlot.hpp:9,
from /Users/kse/devel/Projekte/ESP32/libraries/ArduinoJson/src/ArduinoJson/Memory/MemoryPool.hpp:11,
from /Users/kse/devel/Projekte/ESP32/libraries/ArduinoJson/src/ArduinoJson/Strings/RamStringAdapter.hpp:7,
from /Users/kse/devel/Projekte/ESP32/libraries/ArduinoJson/src/ArduinoJson/Strings/StringAdapters.hpp:8,
from /Users/kse/devel/Projekte/ESP32/libraries/ArduinoJson/src/ArduinoJson/Misc/SerializedValue.hpp:7,
from /Users/kse/devel/Projekte/ESP32/libraries/ArduinoJson/src/ArduinoJson/Variant/VariantData.hpp:7,
from /Users/kse/devel/Projekte/ESP32/libraries/ArduinoJson/src/ArduinoJson/Variant/SlotFunctions.hpp:8,
from /Users/kse/devel/Projekte/ESP32/libraries/ArduinoJson/src/ArduinoJson/Array/ArrayIterator.hpp:7,
from /Users/kse/devel/Projekte/ESP32/libraries/ArduinoJson/src/ArduinoJson/Array/ArrayRef.hpp:8,
from /Users/kse/devel/Projekte/ESP32/libraries/ArduinoJson/src/ArduinoJson.hpp:17,
from /Users/kse/devel/Projekte/ESP32/libraries/ArduinoJson/src/ArduinoJson.h:9,
from /Users/kse/devel/Projekte/ESP32/libraries/ESP-DASH/src/ESPDash.h:40,
from /Users/kse/devel/Projekte/ESP32/libraries/ESP-DASH/src/ESPDash.cpp:1:
/Users/kse/devel/Projekte/ESP32/libraries/ArduinoJson/src/ArduinoJson/Variant/VariantFunctions.hpp: In instantiation of 'bool ArduinoJson6152_0000010::variantSetInteger(ArduinoJson6152_0000010::VariantData*, T) [with T = long long unsigned int]':
/Users/kse/devel/Projekte/ESP32/libraries/ArduinoJson/src/ArduinoJson/Variant/VariantRef.hpp:187:32: required from 'bool ArduinoJson6152_0000010::VariantRef::set(T, typename ArduinoJson6152_0000010::enable_if<ArduinoJson6152_0000010::is_integral::value>::type*) const [with T = long long unsigned int; typename ArduinoJson6152_0000010::enable_if<ArduinoJson6152_0000010::is_integral::value>::type = void]'
/Users/kse/devel/Projekte/ESP32/libraries/ArduinoJson/src/ArduinoJson/Object/MemberProxy.hpp:44:5: required from 'typename ArduinoJson6152_0000010::enable_if<(! ArduinoJson6152_0000010::is_array::value), ArduinoJson6152_0000010::MemberProxy<TParent, TStringRef>&>::type ArduinoJson6152_0000010::MemberProxy<TParent, TStringRef>::operator=(const TValue&) [with TValue = long long unsigned int; TObject = ArduinoJson6152_0000010::ObjectRef; TStringRef = const char*; typename ArduinoJson6152_0000010::enable_if<(! ArduinoJson6152_0000010::is_array::value), ArduinoJson6152_0000010::MemberProxy<TParent, TStringRef>&>::type = ArduinoJson6152_0000010::MemberProxy<ArduinoJson6152_0000010::ObjectRef, const char*>&]'
/Users/kse/devel/Projekte/ESP32/libraries/ESP-DASH/src/ESPDash.cpp:917:29: required from here
/Users/kse/devel/Projekte/ESP32/libraries/ArduinoJson/src/ArduinoJson/Variant/VariantFunctions.hpp:135:3: error: static assertion failed: To use 64-bit integers with ArduinoJson, you must set ARDUINOJSON_USE_LONG_LONG to 1. See https://arduinojson.org/v6/api/config/use_long_long/
ARDUINOJSON_ASSERT_INTEGER_TYPE_IS_SUPPORTED(T);
^
Mehrere Bibliotheken wurden für "WiFi.h" gefunden
Benutzt: /Users/kse/Library/Arduino15/packages/esp32/hardware/esp32/1.0.4/libraries/WiFi
Nicht benutzt: /private/var/folders/4t/4m1hm0s922n8r2xzkcnlcmkm0000gn/T/AppTranslocation/7F191B8C-B1C7-4CA6-8643-30C49A6F70CA/d/Arduino.app/Contents/Java/libraries/WiFi
exit status 1
Fehler beim Kompilieren für das Board OLIMEX ESP32-EVB.

Linechart object update -- random reboot

Hi, first thank you for your awesome work!

i use the linechart object to display the 24h (every 1h) the temperature of 3 different DS18B20 sensors.
I use 3 linechart objects and update them every 1h to get the temperature of the last 24h.
But i recognized that every day the ESP32 reboots randomly after the linechartupdate. There is no special error but i am pretty sure that this is an problem with the library. Because after i removed the linechart object the random reboots are gone.Could you please check this?
If you want i can post my code here.

Thank you very much.