Own icons radio station

[Damian_Surma]

Is it possible to make your own icons? I would like the radio station icon to display like the defined SONOS icon.

[James]

Custom icon is not currently supported, but you may be interested to cast your vote and add your use cases in the following feature request thread.

512×512 40.6 KB

Borrowing from the Request: Built-in Icon Designer Tools - #2 by josh post, instead of providing a full set of tools for designing icons, this request is for the ability to upload or link to custom user icons. The Custom Icons (File Upload) feature is now available! Check out the following post for details: Announcing Custom Icons! (File Uploads) Note that you can roughly achieve this today by using a Media Tile to display a custom image / icon and then configure the Media Tile act…

[josh]

Can you clarify what you mean by the radio station icon? Are you referring to one of the 1x1 tiles? (eg. rmf maxxx)?

A common approach is to use a Media Tile and then use the Hyperlink Action to run your desired rule to start your station playing.

@James has an example of this in his Create "Jukebox" Dashboard with Album Art for Echo or Sonos Devices thread:

@James

Create Media Tiles for artist profile images

• Find the image you want to use or upload your preferred image to any image hosting site with public access, such as imgur.com , and get the URL address of the image.
• Create a media tile using the URL address from previous step

• Add this media tile to the jukebox dashboard and set this media tile’s tap action to “Open Hyperlink” and fill in $.runRule("RuleID") in the Hyperlink field. (“RuleID” is the last part of the URL when you edit the rule in the rule editor page, and please note the double quotes cannot be the slanted style double quotes, if you are editing this on an iOS device.)
  
• Adjust the position or dimension you prefer.
  (Repeat these steps to create multiple media tiles which can execute rule when tapped.)
• Now you can tap on these media tiles to change the music being played on your Echo or Sonos devices.

If you’re referring to the Album Art tile in the top-left corner of your screenshot, that depends on if the media player and the radio station exposes the relevant album art.

[Damian_Surma]

@James

Create Media Tiles

Yes I know I can use Media Tiles, but is this the way to prepare the icon like on the project? Is it possible that an uploaded icon or graphic could behave like this on my project? I would really like all tiles to be translucent, and unfortunately when creating Create Media Tiles I don’t have that option.

[josh]

In your last screenshot, the three tiles on the right appear to have a semi-transparent style applied to them. Did you want them to look different and if so, how?

Media Tiles can use Styles just like any other tile, so you can use semi-transparent or opaque (solid) colors as a background if desired. You can always edit the Style applied to the tile and use a Custom Style (or even custom CSS applied to a named style) if desired.

[Damian_Surma]

I made these three icons on the right in Photoshop to show what I mean. Unfortunately I don’t know what kind of JPG, TIFF or PNG to upload to create a transparent background. I already solved the problem because I uploaded the GIF file and now it’s great. One more question, is it possible to enable glow option in such an icon defined by me ? As in defined icons?

[josh]

@Damian_Surma

Unfortunately I don’t know what kind of JPG, TIFF or PNG to upload to create a transparent background.

PNG is a good format if you are looking for transparency, but you must specifically save the image with transparency enabled – the approach for this varies with different image editors. GIF also supports transparency but it’s generally used for animations (it also generally results in a bigger file).

@Damian_Surma

One more question, is it possible to enable glow option in such an icon defined by me ? As in defined icons?

You could apply a glow to the image in your image editor. Depending on the image, you might also be able to apply Custom CSS using filter: drop-shadow(), but that’s a more advanced technique.

Is your goal to only have the glow showing when that particular station is ‘active’ or always show the glow? If the goal is only when the station is ‘active’, how are you tracking the ‘active’ status of each station?