Creating a weather plugin
I actually promised this for last week, but didn't found the time. Today i pushed the widgets code live, that gave me the time to wait for some issues and create this tutorial. Now let's get going...

What are we going to create?

Since the last few updates on HomeyDash it's possible for other developers to contribute to the project as well. I asked on the forum what you guys wanted to see in a tutorial, where most answered that they want to see a Weather plugin.

What do you need?

- A fork from GitHub 

- Basic HTML, CSS and Javascript knowledge

- It wouldn't hurt to read a bit about VueJS 

- Your favorite text editor (Atom in my case)

- Edit your hosts file (on mac os edit /etc/hosts) and add  homeydash.local to it.

1. Scaffolding the plugin

Before we scaffold the plugin, lets take a look at the root directory, it wouldn't hurt to get familiar with where certain files are stored. All the source code is within the src folder, from here its split into different sub-directories. For now we just need to look into the /src/components/plugin-system/plugins folder. Here you can find all the plugins that come with HomeyDash, and are good examples for when you need some.

If you weren't checking out the folders trough the terminal, you should open that now and go to the root directory of HomeyDash.

First make sure to install all needed depencies with npm install.

After the previous command is done type npm run scaffold and you should be welcomed with something similar as this...

Now just answer te questions:

- enter "1" to create a plugin

- I am going to name mine "Weather"

- And the ID should be similar but always needs to be UNIQUE i entered "weatherbyswttt"

- It will ask if the entered values are correct. Now answer yes or no. If you answered no, you will need to restart the scaffolding tool.

If you followed my values, you should have ended up with this...

If all went well your plugin now is now created in /src/components/plugin-system/plugins/weatherbyswttt or whatever you give it as an ID.

2. Get the dev server up and running

You should still be in the root directory within your terminal. If you are not, please do so now. Now type npm run dev 

This should fire up the dev server and opens a new tab/window in the browser when done. So now we have a terminal that looks like this:

And a web browser that looks like this after logging in to your Athom account and providing Homeydash access:

Your newly created plugin isn't enabled by default, so go to the settings (gear icon top right) and enable your plugin.

The icon doesn't seem to match the plugin now does it? Let's get to that now...

3. Editing basic plugin information

Now go to the folder where you plugin is stored. Still remember this folder? If not, it's at /src/components/plugin-system/plugins/weatherbyswttt .

Open plugin.json in your text editor, now let's have a look and edit where needed. 

Most things don't need changing now, but for more complex plugins you might want to take a look at the wiki docs on GitHub .

The thing we do want to change is the icon. Since HomeyDash is built on top of the quasar framework, we have some docs for that. Here you can see that we can grab icons from, font-awesome and ionicons. Lets take a look at the icons . So lets keep things positive and give the plugin some sunshine with this icon.

Within the plugin.json change the icon from power to wb_sunny .

Since we aren't going to use any settings for this plugin, you can remove "settings": "Settings" from the components object as well.

Now your plugin.json should look similar to this:

4. Creating the main view

So when you look at the browser window again, the icon should have changed to a nice shining sun. If not you should have a look at the above steps again.

Now let's get started with a more complicated part, get the data and create an user interface to present it.

Open your Main.vue file located in your plugin's directory.

Within this files there are 3 main "objects", a template, script and style.

The template part is to show HTML content within your main view, the script is handeling all the javascript logic and the style is used to give your view some nice looks. A note: The style part is using the stylus language by default, you can change this when needed.

First we want to get some data, HomeyDash has the plugin axios installed by default. So we could use that together with the buienradar API.

Within the script part, you will find an object called methods. Within this you can create functions, so lets create one and name it getData().

Let's make this function use async await , so add async in front of your getData() function.

Time to get some data, add this line to your getData() function: let result = await this.axios.get('');

For now i only want to grap the "verwachting_meerdaags" and the "verwachting_vandaag".

So lets add =; and this.expected =['#text']; just below our Axios call.

So lets create two data variables so we can access that data later on in the HTML part. Add today: "", (note the comma!) and expected: "" (note the last item so no comma!) to the data() function. 

These are the two variables used in out getData() function.

Now we need to provide a moment where our plugin should actually get the data. This could be done within the mounted() function. So lets add this.getData(); in there.

Now our Main.vue should like like:

Now to display the data you can just use {{today}} and {{expected}} in your HTML. Then add some styling to it, and you would get something like this:

5. Done

This a very basic example with what you can achieve using an API and the dashboard. The buienradar app provides allot more info then just the info used in this tutorial, but to keep it simple enough for most to follow this isn't covered in this tutorial.

Let's see what you users could come up with, and i am always ready to help! Leave a comment or contact me directly on Slack (@swttt).

Tier Benefits
Recent Posts