Custom web widgets

Dashboards
1

I see some nice examples of people creating custom web widgets for their dashboards. I’d like to have a go at this. I’ve dabbled with HTML and CSS in the distant past but am by no means proficient. I’m prepared for a steep learning curve and plenty of experimentation along the way, but I wonder if the community can help me out with some pointers to get me started.

I’d like to have my custom widgets local so am planning to host them on my Homey via the HTTP server app which now provides a dashboard widget.

  1. Has anyone got a recommendation for a good WYSIWYG web designer for Mac that makes it particularly easy to create and upload widget designs to my Homey via FTP? After a very brief initial search I’m playing with Sparkle and CyberDuck FTP but am very open to better suggestions.
  2. I think the new API keys feature of Homey Pro 2023 should be useful to help me build custom web widgets that access Homey data and functionality but the existing documentation on API keys stops a few crucial steps short of actually enabling me to get started with that. Can anyone provide any pointers or examples or get me back on track if I’m heading along the wrong path entirely?

Thank you in advance for any help you can offer.

2

How to include a widget when the code isn’t just a URL

Here’s one thing I’ve learned so far which may be useful to others: when looking for a widget (in my case a weather forecast widget) to add to my dashboard, some can be added by just using the built-in “web frame” widget but most can’t, because most widgets must be included using a whole bunch of HTML code rather than just a simple URL which is all the web frame allows.

So here’s how to include any such widget on your Homey dashboard:

  1. Install the HTTP & FTP server app on your Homey
  2. Go into the app settings for that app and add a user
  3. Install an FTP client on your computer and use it to connect to the FTP server now running on your Homey (the address and port are shown in the app settings and the username and password are the ones you added when you created a user in app settings)
  4. Copy the inclusion code for your chosen widget (I was using this one: https://weatherwidget.org)
  5. Open a basic text editor on your computer (on a Mac use TextEdit and don’t forget to select “Make plan text” from the Format menu before you save)
  6. Paste in the code and save the file as something like weather.html somewhere on your computer
  7. Use your FTP client to upload this file to the FTP server running on your Homey
  8. Go to your Homey dashboard, go into edit mode and add a widget. Select ‘Apps’ instead of ‘Homey’ at the top of the widget selection view that comes up. Add the ‘HTML file’ widget from the HTTP/FTP server app.
  9. In the ‘HTML file’ setting, choose the file you just uploaded (in my case weather.html) and then play around with the height setting till you get it working well for you
  10. Add the widget, click Done and test.

P.S. Any help on my questions in the previous post ^^^ still very welcome!

1 Like
3

Great input, might give it a go myself. Please add the next steps as well when people answer your first post :slight_smile:

A step by step guide in making your own widgets would be really welcome, especially for a novice like myself.

4

I’m glad to see you found my HTTP/FTP Server’s widget and even found it useful ^.^

1 Like
5

Yes indeed thanks @emile. Can you confirm whether html files hosted by that widget can access the Homey Web API?

If I understand it right that would then mean I don’t need to use the APIkeys feature for this and could just call the API from JavaScript in the html file. (Currently reading up on client side JavaScript.)

6

You would need to create an API Key, and then use that key inside your HTML page’s JavaScript.

1 Like