Waybar: Better documentation for custom modules

[cmacrae]

Hey @Alexays :wave:

Thanks very much for Waybar!

I'd love to contribute some improved documentation for custom modules, as right now it's not clear to me how formatting works.

If you're able to clarify the problem I'm not understanding, I'll gladly submit a PR.

So, I'm putting together a little custom module to indicate if my VPN is active.
Based off the documentation on the Wiki, here's what I've put together:
config section

    "custom/openvpn": {
    "format": "{}",
    "max-length": 40,
    "interval": 10,
    "return-type": "json",
    "exec": "/path/to/script"
    }

style.css section

#openvpn {
    color: #665C54;
}

#openvpn.active {
    color: #95C085;
}

#openvpn.inactive {
    color: #FAC03B;
}

#openvpn.disabled {
    color: #665C54;
}

My script returns the following JSON payload based on different states of the VPN service:

{
  "text": "",
  "tooltip": "active: running",
  "class": ".openvpn.active"
}

Where class changes per state. The intention being: the little icon (in format) just changes colour based on this.

Am I just misunderstanding how this is supposed to work? Or have I gotten some syntax wrong? It's not clear to me how class's value should be formatted to influence appearance of the format section.

Many thanks in advance for any guidance on this :pray:
As mentioned; I'll happily submit a Wiki PR to get this clarified once I understand it better.

[Alexays]

Just return

{
  "text": "",
  "tooltip": "active: running",
  "class": "active"
}

:smile:

[cmacrae]

Hmmm :thinking: That's how I had it returning initially, and I've just tested now, but it doesn't seem to inherit the associated CSS style.

i.e: when it's active it should be green, when inactive; yellow, and when disabled it should be a dull grey.

Perhaps I've named things incorrectly? Is there anything you can see in my above config examples that I've slipped up on?

Thanks for the swift response, btw! :pray:

[rbnis]

The CSS classes should be called #custom-openvpn and #custom-openvpn.active etc.
This should fix it for you :)

[cmacrae]

:tada: :tada: :tada:
It works! Thanks very much @Robinhuett @Alexays :pray:
I'll pop a little change in for the wiki over the weekend to make this a little more clear :)