[presentation] CSS in TW

[Mat]

The following was intended to be a presentation at the 2017 European TiddlyWiki Meetup in Oxford. It turned out to be a most wonderful event but we had too much fun so this presentation didn't make it time-wise.

I might make a video recording of it on my own at some point, but FWIW, here is the TW for the presentation.

http://css-tw.tiddlyspot.com

Please read the default tiddler or you are likely to be confused.

<:-)

[PMario]

On Monday, June 12, 2017 at 12:13:43 PM UTC+2, Mat wrote:

The following was intended to be a presentation at the 2017 European TiddlyWiki Meetup in Oxford. It turned out to be a most wonderful event but we had too much fun so this presentation didn't make it time-wise.

I might make a video recording of it on my own at some point, but FWIW, here is the TW for the presentation.

http://css-tw.tiddlyspot.com

Hi Mat,
It doesn't load for me?
-m

[Alex Hough]

Mat!

The mode where you can pop out the sidebar into a new window works really well with my Pyramid TW (see Two Screens, Duet: sharing Ah-Ah!)

Alex

--
You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+unsubscribe@googlegroups.com.
To post to this group, send email to tiddl...@googlegroups.com.
Visit this group at https://groups.google.com/group/tiddlywiki.
To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/d76dbdba-aaeb-45dd-8f84-66ee572ec6df%40googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

[Mat]

PMario wrote:

It doesn't load for me?

Is this still the case? Not that I changed anything, but I find my sites suffer from slow loading and suspect I've messed up something in the TW5 that I use as a template for my wikis.

Apropo this, does anybody know how to analyze what causes slow loading time in a TW?

Thanks!

<:-)

[Mat]

AlexHough wrote:

The mode where you can pop out the sidebar into a new window works really well with my Pyramid TW (see Two Screens, Duet: sharing Ah-Ah!)

Actually, it is the tiddler "Notes" that pops up. The sidebar is hidden or pushed off screen if I recall.

<:-)

[Thomas Elmiger]

This is great, Mat! I would love to hear your explanations.

I will have to play with your circle demo asap.

Thanks for sharing anyway!

Stylish regards,
Thomas

[Mat]

Thomas

I will have to play with your circle demo asap.

For unknown reasons that particular circle demo doesn't work in FF and there's some tweakign needed when it exceeds 50%. The source is found here (along with several other cool things on that site!!!)

http://www.cssscript.com/demo/circular-progress-bar-plain-html-css/

<:-)

[Thomas Elmiger]

Thanks, Mat,

For unknown reasons that particular circle demo doesn't work in FF

Well, I found https://bugzilla.mozilla.org/show_bug.cgi?id=1308785
 

and there's some tweakign needed when it exceeds 50%.

I think I can fix that.

[Thomas Elmiger]

Here’s a solution that works in Firefox too:
https://tid.li/tw5/styles.html#56%20Statistics%20Percent:%5B%5B56%20Statistics%20Percent%5D%5D%20CircleBar%2FStylesheet

One more time $wikify is our friend.

Happy hacking,
Thomas

[Thomas Elmiger]

Hmm, I just realize, that my solution works from 10 to 99 % only and does not take into account one and three digit percentages.
I’ll sleep over that.

[Thomas Elmiger]

o.k. The demo is fixed.

Next on my list: set the >50% flag automagically.

[K500 L501]

NOW!

This is one mighty helpfull file.

Answered at least 5 of my unsolvable questions in the first 2 minutes!

Thanks a lot.

Kilo

--

You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+unsubscribe@googlegroups.com.
To post to this group, send email to tiddl...@googlegroups.com.
Visit this group at https://groups.google.com/group/tiddlywiki.

To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/768e6c11-4262-40db-8cbf-a7067a1406a9%40googlegroups.com.

[Thomas Elmiger]

There is a new demo available for the circle graphs:
https://tid.li/tw5/styles.html#57%20Statistics%20Percent:%5B%5B57%20Statistics%20Percent%5D%5D%20%5B%5B58%20Statistics%20Percent%20Red%5D%5D%20%24%3A%2F_telmiger%2FCircleGraph%20%24%3A%2F_telmiger%2FCircleGraph%2FStylesheet

Next on my list: set the >50% flag automagically.

done.

You can have individual colors per graph now, as long as they show different percent values. Configurations are saved in a config tiddler per tiddler.

Have fun!
Thomas

[@TiddlyTweeter]

Ciao Thomas & Mat

Great stuff.

Just a side note on such Circles from an informational design viewpoint. They are extremely good for depicting a limited amount of data. I think its right they are best seen individually as a record of percentage, at which they are epic. Its a simple idea that reflects an analogue clock motif. That's why they really communicate well overall time spans, and a real sense of "how far through". A circle 80% complete immediately communicates its real weight of time or quantity.

However, for comparative data they don't work so well. Beyond having a very few in a row they just become weak. In comparative cases, where there is much data to compare, circle size variation, rather than incomplete circles would often do better a better job (or bar charts for that matter).

My tuppence.

Best wishes
Josiah