... | ... | @@ -19,7 +19,7 @@ This guide gives you a quick start with fast results. You can always take a look |
|
|
|
|
|
That's it, you can modify code and see the result (dashboard and tests) in the browser.
|
|
|
|
|
|
* Dashboard: [http://localhost:8081](http://localhost:8081/)
|
|
|
* Dashboard: [http://localhost:8080](http://localhost:8080/)
|
|
|
* Tests: [http://localhost:8080/webpack-dev-server/tests.html](http://localhost:8080/webpack-dev-server/tests.html)
|
|
|
|
|
|
Plugins are loaded at runtime and not bundled with the Dashboard, that's why the webpack dev server does not load them.
|
... | ... | @@ -27,13 +27,15 @@ Just start another task that helps you with that: |
|
|
|
|
|
npm run watch
|
|
|
|
|
|
The task monitors & transpiles the plugins in `/plugins/**/*.js` (source folder) to `/dist/plugins/**/*.js` when the sourcefile is changed.
|
|
|
|
|
|
## Step 2: Create your own datasource
|
|
|
|
|
|
You probably want to fetch data from somewhere to render it in the Dashboard.
|
|
|
|
|
|
Data is fetched vy the browser of who ever is opening the dashboard. The best way to get data into a web application is to do http requests but you could also go for websockets. There is no limitation.
|
|
|
Data is fetched by the browser of who ever is opening the dashboard. The best way to get data into a web application is to do http requests but you could also use e.g. pure websockets or MQTT. There is no limitation.
|
|
|
|
|
|
For api's that need an API key, e.g. the Twitter API it's best practice to fetch data for your dashboard on a server, cache it and connect a datasource to that server. We do not want to cover serverside stuff here, so let's use some free data. How about [weather](http://simpleweatherjs.com/)?
|
|
|
For api's that need an API key, e.g. the Twitter API it's best practice to fetch data for your dashboard on a server you have access to. Then cache the data and connect a datasource to your server. We do not want to cover serverside stuff here, so let's use some free data. How about [weather](http://simpleweatherjs.com/)?
|
|
|
|
|
|
Lets build our Datasource plugin!
|
|
|
|
... | ... | @@ -89,7 +91,7 @@ And add some code: |
|
|
window.iotDashboardApi.registerDatasourcePlugin(TYPE_INFO, Plugin)
|
|
|
})(window);
|
|
|
|
|
|
Now open the Dashboard in your browser and go to `Plugins` -> Load from URL: `plugins/weatherDatasource.js` -> `Load Plugin`
|
|
|
Now open the Dashboard in your browser and go to `Plugins` -> URL Field: `./plugins/weatherDatasource.js` -> `Load Plugin`
|
|
|
|
|
|
You should now see the plugin in the list of Datasource Plugins.
|
|
|
`Close` the dialog and add a new Datasource (`Datasources` -> `Add Datasource`). Select your plugin (`Weather`) and fill the settings.
|
... | ... | |