[BETA] Homey Custom Tiles

Community Projects
1

By popular community request, we’ve started putting together a few Custom Tiles for Homey. These are still very much beta and have not been tested thoroughly or over an extended period of time.

The following Custom Tiles are available:

You can find more details on each of these custom tiles below or if you are a developer and are interested in reviewing the original source, check out the /homey/src/ folder in Github.

Known Issues

Keep in mind that these tiles are just a proof-of-concept and are not intended to be robust, highly polished tiles. We are not likely to implement significant enhancements for feature requests to these tiles, but feel free to comment below if you feel like something is missing!

:bulb: We encourage any community developers to use these as a basis for making their own tiles with their own enhancements and improvements! Feel free to share your enhancements!

Homey Flows

When tapped, this tile displays a list of your Homey Flows. You can tap any of the listed Flows and the tile will trigger that Flow to run.

:arrow_down: Import Homey Flows Custom Tile

:warning: This tile only works with Homey 2023 as it requires an API Key

Tile Configuration:

chrome_yxdA6JTIDw

Homey API Key Scopes

  • Flows (View Flows + Start Flows)
  • Users (View Users + Edit Self Users)
    • Optional: You only need the Users scopes when using the ‘Only Favorites’ setting

 
 
 

Homey Google Gauge

This tile requires a bit more configuration as it supports Homey 2023 and uses some tricks to unofficially support older Homey versions.

:arrow_down: Import Homey Google Gauge Custom Tile

image

When you open the configuration for the tile, you can pick between ‘API Key’ or ‘Homey Ink Token’. If you’re using a Homey 2023, I would suggest the API Key approach as it’s a more official approach and less susceptible to Homey changing things that might break it.

API Key Configuration

Expand to show instructions

If you select the API Key option, you’ll be prompted for:

  • API Token
  • Configuration Approach
  • Capability ID

API Token

You can use the instructions from the official Homey API Key article to generate an API Key.

Scopes:

  • Make sure the API key has at least View Flows and Start Flows.
  • Make sure the token has the View System scope if you want to use the simplified ‘URL Sample’ configuration approach

Configuration Approach

You can choose between the following options:

  • URL Sample
  • Manual

With the URL Sample configuration approach, you can open my.homey.app and navigate to the device you are interested in, then copy the URL to use as the Homey Sample URL field. The URL should be in the format:

https://my.homey.app/homeys/XXXXXXX/devices/XXXXXXX

With the Manual configuration approach, you will need to manually enter the IP address of your Homey Pro along with the Device ID of the device you are interested in.

Homey Ink Token

The ‘Homey Ink Token’ configuration is an experimental option that supports older Homey models. It uses the same concept as Homey Dash wherein you’ll have to login to Homey.ink and then copy a code from the console. As such, this approach requires a computer.

Expand to show instructions

  1. Navigate to https://homey.ink in your browser

  2. Scroll down and tap the orange ‘Log in’ button
    image

  3. Login with your Homey credentials and select your desired Homey to authorize

  4. Verify that you are redirected back to the Homey.ink login screen and you see a green checkmark
    image

  5. Open your Browser’s developer console.

    • Chrome: You can access the developer tools in one of three ways:
      • Right click the page and select Inspect
      • Press F12 on your keyboard
      • Click Chrome’s ... menu (near your Chrome profile image) → More Tools → Developer Tools
    • Safari:
      1. Enable the ‘Develop’ menu in Safari settings
      2. Use the Develop menu to access the Console

  6. Copy the link displayed in the Console and use that as the Sample URL in your tile’s configuration

    image
    image923×386 29.2 KB

Device ID

In addition to the sample URL, you’ll also need to specify the Device ID of the device that you’d like to display. The easiest way to find this is to login to the Homey Developer tools website → Devices and use the search bar at the top to filter down to your desired device. Once you’ve found your device, you can copy the value from the ID field.

image
image1246×739 49.6 KB

Capability ID

The final step is to fill in the capability ID of the data point you are interested in displaying in the gauge. The Homey Device Capability documentation serves as a good reference for this.

Some of the more common capabilities include:

  • measure_temperature
  • measure_humidity
  • measure_battery
  • measure_voltage
  • measure_current
  • measure_power
  • meter_power

If your device has custom capabilities, you might use the Devices section of the Homey Developer Tools to view the list of capabilities reported for your device.

Chart Settings (JSON)

This is a power-user feature designed for users who are comfortable modifying JSON configuration. You can paste a valid Google Gauge ‘Configuration Options’ JSON into this field to customize the gauge.

When this field is used, it replaces the default configuration, so make sure to include all the options are you interested in.

 
 
 

Homey Image Viewer

This is a proof-of-concept tile for viewing images from Homey devices - the original intention was for displaying camera snapshots within a dashboard, but it could also be used with devices that store the URL to an image within a capability.

:arrow_down: Import Homey Image Display Custom Tile

The tile refreshes every five minutes and uses the Homey Cloud URL to construct the image URL.

Configuration
Follow the instructions for the Google Gauge tile noted above.

Note that you should leave the Capability ID field blank if you want to use the first ‘image’ that’s associated with your device (this is usually available for camera type devices).

You should only fill out the Capability ID field if your device specifically includes a URL in a capability field.

6 Likes
2

Hi Josh

The Homey custom tiles are great. Thank you very much :+1::smile:.

Would it be possible to see only my favorite homey flows (not all) ?

Best
feron

3

Yes! I just pushed an update to the Homey Flows tile to support this.

If you already have the Homey Flows custom tile, you’ll want to update from source as noted in this article:

:page_facing_up: Update Imported Code - Custom Tiles

From there, you can edit any of the copies of that tile on your dashboard and you’ll see a new option called ‘Only Show Favorites’. You’ll want to check that box and save the tile settings for it to apply.

:warning: Note: If the token you previously generated only had access to ‘Flows’, you’ll need to generate a new token that has access to Flows and Users for the favorites only feature to work.

1 Like
4

Hi Josh

It works with the favorite flows. Thank you very much. But the sorting is strange. Would it be possible to sort the flows like the favorites in the Homey app or from A-Z?

Best
feron

1 Like
5

Thanks for the feedback! I’ve pushed an update to the Homey Flow tile which has the following enhancements:

  • With the favorites only option, the sort order of your favorites is used
  • Without the favorites option, alphabetical sorting is used (case and locale insensitive)

I’ve also updated the first post in the thread with details about the scopes needed if you use the Homey API Key approach (per your email question). Please note that I haven’t tested these closely, so if you experience something different, please share what worked for you here!

1 Like
6

The first post has been updated with information about the Homey Image Display custom tile that a handful of people had been testing.

I’ve also updated the Gauge Tile to better accommodate various Homey Sample URL formats for devices. You can use the steps under :page_facing_up:Update Imported Code to update your existing tiles.

1 Like
7

Hallo.
I’m new here, learning with Sharptools.
I have Homey Pro 2019 + about 150 Zwave Zigbee and WIFI devices and many flows.
Homey flows Custom Tiles really won’t work in this version of Homey?
Thx for the reply

Alex

8

I suspect it might be possible to modify the custom tile implementation to use the same trick that the gauge tile uses to support 2019 hubs. There just hasn’t been any interest in it yet, so I’ve prioritized other highly requested things.

In the meantime, I would also note that you can create Virtual Buttons in Homey and use those in SharpTools to trigger your flows:

9

Thank You for advice.
Its work perfekt
Alex

1 Like
10

6 posts were split to a new topic: Customizing a Custom Tile?

11

Hi Josh!
This is great stuff.
Im using Homey Ink token solution with this Homey Image viewer. The devise has 3 different images associated with it. Is it possible to change the display of the first image to one of the other images instead? If so, how?
Many thanks,
Sanny

12

If the device stores the additional images as URLs in different capabilities, then you should just need to set the Capability ID field with the appropriate value.

Finding the Capability

Homey Image Viewer: Configuration Instructions

13

Hi,
I am trying to modify the chart settings (JSON) for the Google gauge, but I cant seem to get it to work. Could you post an example of how you do this? I am using a Homey (early 2019) with Homey Ink token.

14

Can you share what you’ve tried so far? The documentation for the Configuration Options from the Google Gauge library is linked in the original post.

So an example might look like:

{ "min": 50, "max": 90, "redFrom": 0, "redTo": 60 }

image → image

15

I had simply neglected to put the options within situational characters. Now it works perfectly! Thank you for your quick response Josh!

1 Like
16

One more question that comes to mind. I have seen that it should be possible to add a suffix after the measurement number in a google gauge (72 in your example above). However, I can’t find that alternative among the configuration options. Is it possible to do this?

17

I don’t believe it’s part of the configuration options.

I believe you can customize the Google Gauge implementation code to add numeric formatting and suffixes as other community members have, but you would need to tweak the Custom Tile code itself. That’s not included in the version released in this thread.

Reading through the tweaks @kampto made in their version of the gauge, it looks like they use a special NumberFormat() to accomplish adding the suffix.

If the snippet above doesn’t help, you might try creating a new thread and tagging @kampto to see if they would be willing to share any insights.

You would likely want to start your modifications from the original Homey Gauge Source as the version linked in the original thread above is a ‘compiled’ version of that same source code intended to support much older browsers.

1 Like
18

Where can I place this in the script?

19

It’s a configuration setting on the instance of the tile on your dashboard.

That quote from my post is from the first post in this thread describing each of the tiles and their features. As noted in that quote, it’s a power-user feature, so you’ll need some understanding of formatting JSON and will need to dig into the linked Google Gauge docs for details on the options.

20

Thanks Josh.
I did the setting on the instance tile. Perfect. I now can see and adjust the red part to be able to see directly if actual data is within the right window. :ok_hand: :ok_hand: :wave: :wave: :+1: :+1:. Love sharptools and verry happy that you started with Homey. It’s a perfect combination.

2 Likes