"Energy Info" macros, math operators, and fancy Toolip CSS for information details

[Charlie Veniot]

These are things I’ve done in my “Urban Off Gridding for Laypersons” TiddlyWiki.

G’day,

I’ve been finding myself doing way too much arithmetic with my calculator lately, mostly trying to figure out the wattage or items I’ve purchased (i.e. Amps x Volts = Watts) and the cost of devices plugged into AC outlets (i.e. Device Wattage x Hours x Utility Rate).

If finally dawned on me:  why am I entering all of these amounts in tiddlers (for information purposes) and entering the majority of those amounts again in a calculator to then copy final totals into my tiddlers ?

Way too much work, so I decided to learn a few TiddlyWiki things to make life a little easier and the results a little prettier.  These things include:

• Learning about basic math operators

• Learning about just enough CSS to setup a custom tooltip class

• Learning about macros

• Pass values to the macros

• Do math operators

• Return a value wrapped with “tooltip stuff” to show information related to the value

Should you be interested in any of that stuff, the 4 screenshots further below will let you know where to find the “goodies(?)” in my “Urban Off Gridding for Laypersons” TiddlyWiki .

Cheers !

Design Results: a value calculated via macro appears with a blue-ish border, indicating that more info is available as a tooltip when the mouse pointer hovers over the value.

The WikiText Macro call to make the “magic” happen (AmpsToWatts, first parameter is Amps, second parameter is Volts, result is Watts).

The “Energy Info” Macros

The CSS Magic for the custom tooltip (slightly modified version of the “Basic Tooltip" from w3schools.com)

[Felicia Crow]

Hi Charlie,

it is great to see your progress overall with your wiki, but especially with macros and filters when thinking about our last conversation a few days ago. Thanks for sharing.

One suggestion: Depending on your preference of visualization you could use the sup tag to add a superscript question mark or similar in your output instead of the border:

The affected line in your macros - A2W as example exactly the same change with the others - would change from this:

<div class="tooltip"><<wattage>> W

To This:

<div class="tooltip"><<wattage>> W^?

Kind Regards,

Felicia

[Charlie Veniot]

Hey Felicia,

I decided to keep that formatting I had (i.e. the little light blue borders) as a blatant reminder that the values showing are calculations, and because I rather like the large hover area.

However, I really like the superscript thing for "little fishy" tiddler links when I find a regular tiddler link a bit distracting when the link formatting doesn't match regular text formatting in things like table column titles.  (I put that in a separate post:  How To: Replacing manual tiddler links with transcluded little fishy links .)

[Charlie Veniot]

Just a little update.

I was previously trying to do all calculations with filters, but I found myself getting into trouble with more complicated arithmetic.

So I added the math.js plugin, and changed everything to use the $calc macro instead of using filters.  For example:

\define WhRate() 0.01118

\define WHCv(W:0 H:1)

    <$calc>round(($W$ * $H$ * <<WhRate>>),4)</$calc>

\end

\define WHC(W:0 H:1)

<!-- 🔴 WATTS x HOURS x RATE/WATTHOUR = ◾COST◾ -->

    <$vars cost=<<WHCv $W$ $H$>>>

    <div class="tooltip">

        <<cost>> $

        <span class="tooltiptext">

            Cost (<<cost>> $) <br>

            = <br>

            Watts ($W$ W) <br>

            x Hours ($H$ h) <br>

            x Rate ($(WhRate)$ $/Wh)

        </span>

    </div>

    </$vars>

\end

 

Cheers !

[Felicia Crow]

Hi Charlie,

sorry for the late reply.

As for the formatting as I said depending on your preference. I am just personally more used to it, that's why I thought of it. Still great to read that it could be of some use elsewhere.

Kind Regards,

Felicia

[Charlie Veniot]

Oh poop, I had forgotten in my last reply to say thank-you for that superscript idea.

Of course, I find everything interesting, and I'm now wondering why there are certain things that I want to be jugular-grabbing attention-getters, and other things I prefer be very lightly-tickling attention-teasers.  Yeah, doesn't take much for this hyperactive sponge to keep me awake at night ...

[Felicia Crow]

You did actually, just not here, but in your referenced post in said answer. Still even if that wasn't the case it would be no big deal, as I wrote, I am happy that you found use for it.

Also while it isn't the reason for sleepless nights - my internal clock takes care of that - I can relate to the hyperactive brain and being interested in (nearly) everything.