Custom Tiles
A solution that enables external integrations to seamlessly blend into dashboards. That's what we set out to build with the Custom Tiles feature.
As you might suspect, we frequently receive requests to integrate new devices and services into the SharpTools smart home platform. While we currently support thousands of smart home devices and services by proxy of our hub partners – Hubitat and SmartThings – there's always going to be some esoteric device that someone is interested in.
To that end, we built Custom Tiles as a way for community developers to build dashboard tiles that can display data from and interact with third party services.
Interested in learning more about SharpTools dashboards? Learn more on our website or get started with your free account!
Key Priorities
As we set out to build Custom Tiles, a number of priorities were kept in mind:
- Easy to develop (including sample code, documentation)
- Ability to integrate with third party APIs
- Ability to build custom interfaces
- Ability to use standard technology (no custom framework required)
- Must provide a secure / sandboxed approach for integration
- To share or not to share?
Since SharpTools itself is a modern web application, it was only logical to extend that to the Custom Tiles. This provides a tremendous amount of flexibility to achieve the above stated goals. It enables developers to use technology that they are either already familiar with or can quickly get up to speed with.
The most basic approach is to use the URL option which effectively just embeds the desired website directly in a tile. The next level up is to use the HTML option wherein developers get full control of the tile.
With HTML, developers can start with the basics or layer in modern web frameworks like Bootstrap, Angular, Vue, React, vanilla JavaScript or even just HTML! This also has the added benefit of providing a wealth of educational material for learning!
Browsers provide a rich set of tools for communicating with APIs – one of our favorite libraries, axios, provides a beautiful wrapper for the underlying HTTP Request functionality in a browser. And while we were able to leverage some of the native sandboxing features of modern browser, we're also able to provide our own stio Library for enriching the developer experience.
To Share or Not to Share
That brings us to the last point on the list which is sharing. We went back and forth on this during internal discussions. Platforms like SmartThings, Hubitat, Home Assistant and others have all been tremendously enriched by the contributions of their community.
We knew that we couldn't realistically review and approve all custom code that users wanted to share. Our friends at SmartThings attempted something akin to this in their early days before realizing that it wasn't sustainable and the community had naturally began to share community projects outside of the main approval channel.
Learning from the experience of those that have come before us, we realized that providing basic tooling for importing community code and leaving it in the hands of the community was the right first step. This comes with the natural caveat that you shouldn't trust code from unknown sources and an appropriate warning during the import process that reiterates this.
What's next?
Documentation
We put together a brand new documentation site dedicated to developers and Custom Tiles. Whether you are looking for an overview of what Custom Tiles are or want an API Reference for the stio Library, it's all there.
Examples
The community has starting putting together a neat assortment of custom tiles – from things like gauges and trends, custom weather displays, maps and more! You'll also find a number of custom tiles that we've put together a number of custom tiles which can be used as a reference as well.