support fontawesome

[Coernel82]

Now having the module running I have a nice idea for styling:

by using the config { name: "level", title: "Fill level cistern", precision: 2, cssClass: "fa-solid fa-water", suffix: "%"}, it is possible to show a font awesome icon before the number however the class is applied to the whole line so the font of the data is not the standard font any more.

The workaround would be this: Apply a custom cssClass { name: "level", title: "Fill level cistern", precision: 2, cssClass: "cistern", suffix: "%"},

.cistern::before {
    font-family: "Font Awesome 6 Free";
    content: "\f773 \0020"; /* f773 is the font awesome charcter 0020 is a space */
    font-weight: 900;  /* if not using this it will fail! */
}

However when you are developing your module further this would be an option to add!

[ralberth]

Neat idea! I love fontawsome. If you just need an icon at the beginning of every value, I'd question if the icon is communicating anything useful given the portion of the screen that's it taking up. Let's dive in a bit more. Tell me about your specific use case and why icons are important.

If the ask is really about the same fontawsome icon on every single line, we can explore how to best make this configurable in the config.js file. If icons would make comprehension better given the small size of some tables, then we need a way to encode some logic to pick an icon based on the data from the database. Tell me more!

There's a really user-hostile way to add icons, but it requires you putting the HTML code in your (now complicated) SQL SELECT statement, and telling MMM-MySqlQuery that the content from the database should not be HTML-escaped.

I'm imaging a feature where I handle the CSS+HTML to do fontawsome and the user of MMM-MysqlQuery just says what icons (and modifiers) to use, and where to put them. The issue is if and where we put the user-supplied logic to pick an icon or icons if code is required. Putting it in SQL is horrendus, and encoding JavaScript embedded in a config.js isn't pretty, but doable. Maybe a config item is an anonymous function that takes a bunch of args I pass and returns what to dispaly somehow?

[Coernel82]

Hi, in my case I just display one single value: The filling level of my cistern which I will read out with a microcontroller and ultrasonic sensor and writing this to MariaDB. So my specific case is solved my my CSS "hack" above. I will use further CSS to set the line-hight of the heading in the table to 0 - so that I use less space. For one value I do not need a heading.

However often I find it more useful to have an icon instead of text - so offering this as a general option could be a nice addon and probably it would make sense to cover those cases:

• icon in the heading row instead of a text
• icon before the value combined with the option not to create a heading row. For example you could have something like this as a result: | water-drop-icon 45% | water-level-icon 3mm | thermometer-icon 22°C |

[ralberth]

Thanks, and I agree with all your idea, good thinking. I'm slammed studying for my AWS SA Professional cert, so I'm buried at the moment. I'll take this on as a new feature request, but unfortunately, don't hold your breath :-( THANK YOU for suggesting and following up with good ideas!