Windy Plugins Guide

Appearance

Plugin layouts ​

As a plugin developer, you can choose from one of the prepared plugin layout.

Configure your desired layout in pluginConfig.ts file.

Desktop rhpane plugins ​

Plugins configured as desktopUI: 'rhpane' opens from RH side of the screen and are exclusive.

That means any other rhpane plugin, or big plugin, that slides from bottom will mercilessly close them.

Width of the plugin can be configured.

If you decide to use this layout we do strongly recommend to use plugin__title and plugin__content CSS classes in your HTML section of plugin.svelte file.

html
<section class="plugin__content">
    <div class="plugin__title">Title of your plugin</div>

    ...content of your plugin goes here...
</section>

Desktop embedded plugins ​

Plugins configured as desktopUI: 'embedded' remains opened in the RH bottom corner of the screen.

They are perfect for limited amount of content, that (for example) controls information displayed on the map.

If you decide to use this layout, you do not need to use any Windy specific CSS and you are free to style your plugin yourself.

html
<div>...your plugin content goes here...</div>

Mobile fullscreen plugins ​

Plugins configured as mobileUI: 'fullscreen' take all screen.

They can accommodate a lot of content and user can slide them to half position, to see a little bit of a map.

If you decide to use this layout we do strongly recommend to use plugin__title and plugin__content CSS classes in your HTML section of plugin.svelte file. Do not forget to add plugin__mobile-header class to the header of your plugin, even thought plugin title is used twice in HTML.

html
<div class="plugin__mobile-header">Title of your plugin</div>
<section class="plugin__content">
    <div class="plugin__title">Title of your plugin</div>

    ...your plugin content goes here...
</section>

Mobile small plugins ​

Plugins configured as mobileUI: 'small' occupy very small area at the bottom of the screen.

They are perfect for limited amount of content, that (for example) controls information displayed on the map.

If you decide to use this layout, you do not need to use any Windy specific CSS and you are free to style your plugin yourself.

html
<div>...your plugin content goes here...</div>