Skip to content

Using your own icons

Chris Hastie edited this page Mar 3, 2014 · 15 revisions

User defined icons

If you wish to use your own icons you can place them in the icons/user directory. Icons can be PNG or SVG format, and possibly others too. A good choice of size is about 256px, though if you don't use the desklet at large zooms you could reduce this somewhat (the large current conditions icon is displayed at 170px high at 1.0x zoom).

iconmeta.json

The file iconmeta.json contains information about the icon set that the Weather Desklet needs. You will probably need to edit this - it must be valid JSON so pay careful attention to the commas! Defaults will be applied if the file is missing or can not be parsed. The format is:

  {
      "ext": "png", 
      "aspect": 1,
      "map" : {
        "01" : "03",
        "02" : "03",
        "26d" : "26"
      }
  }

ext

the file extension used for the icon filenames, without the dot. png and svg are known to work. The default if the file is missing is png.

aspect

The aspect ratio of the icons, ie the width divided by the height. For square icons this will be 1. For icons that are 170px wide and 120px high this will be 1.4167. The default if the file is missing is 1.

map

map is a javascript object that maps the codes used by the Weather Desklet to icon file names (without the extension). The default if the file is missing is empty, which means no mapping, file names are expected to match Weather Desklet codes. See below for more details on how icons are selected. The map object is useful for avoiding have multiple copies of the same icon, each with a different name. It can also be used to allow you keep descriptive filenames, rather than codes. For example, rather than name an icon for fog 20.png, name it fog.png and include

"map" : {
  "20" : "fog"
}

How icons are selected

When the Weather Desklet needs to display an icon it goes through the following process:

  • Lookup the code in the map for the current icon set.
  • If it finds a match, attempt to display the icon of the name returned
  • If it doesn't find a match, attempt to display an icon with the same name as the lookup code.
  • If the icon it is attempting to display is not present, switch to the default icon set and repeat the process

An example: You have the map shown above. In your directory you have files:

  • 02.png
  • 03.png
  • 26.png
  • 39.png

For code 01 the desklet displays 03.png, because 01 maps to 03.

For code 39 there is no map, so the Weather Desklet displays 39.png.

For code 02 the map says display 03.png, so this is what happens. The presence of a file named 02.png is ignored.

For code 47 the desklet attempts to display 47.png, but can not find it, so displays 47.png from the default icon set.

Checking your icon set

The file icons.html displays all the icon sets, including the user defined set, alongside the codes and descriptions. It honours the mapping. Please note that it doesn't display fallback to the default icon set - missing icons / mappings will appear as blank spaces.

See also the list of icon codes

Clone this wiki locally