Visual Tagging using "tiles"
132 views
Skip to first unread message
stevesuny
Aug 16, 2016, 12:11:53 PM8/16/16
to TiddlyWiki
A friend of mine shared a script with me, which takes a set of R-G-B values, a radius and an x/y coordinate, and generates a graphic. I think his function could be used to generate "tiles" -- say, 25px by 25px generated images that could be put on tiddlers, depending on tag/field values.
I embedded the script as an iframe here
Of course, I'm hoping to embed the function in tiddlywiki so I could use a macro <<showtile i=124.87379701700996 x=176.6728727371631 y=104.28485949713784 r=64 g=178 b=242 ri=1.6731564374861718 gi=5.41945679039433 bi=17.160426734134074 width=25 height=25>> to generate a 25x25 image that looks like this
We could set those values based on fields/tags, and generate visual cues to the tags of a tiddler. For example, given a field "Location" value=1 x=25 y=25; value=2 x=150 y=25; value=3 x=150 y=25; value=4 x=150 y=150. Select 3 different R-G-B value sets (100,200,300 ; 200,300,100; 300,100,200) and combine them to yield 4x3=12 different "tiles" that could be associated with tiddlers having appropriate field values.
In a multi-tagged environment, this could be an interesting visual cue. But -- I don't really know how to move is javascript into a tiddlywiki function. It might be trivial, but insurmountable for me.If anyone wanted to hack on it, that would be great, and might be interesting.
//steve.
I embedded the script as an iframe here
Of course, I'm hoping to embed the function in tiddlywiki so I could use a macro <<showtile i=124.87379701700996 x=176.6728727371631 y=104.28485949713784 r=64 g=178 b=242 ri=1.6731564374861718 gi=5.41945679039433 bi=17.160426734134074 width=25 height=25>> to generate a 25x25 image that looks like this
We could set those values based on fields/tags, and generate visual cues to the tags of a tiddler. For example, given a field "Location" value=1 x=25 y=25; value=2 x=150 y=25; value=3 x=150 y=25; value=4 x=150 y=150. Select 3 different R-G-B value sets (100,200,300 ; 200,300,100; 300,100,200) and combine them to yield 4x3=12 different "tiles" that could be associated with tiddlers having appropriate field values.
In a multi-tagged environment, this could be an interesting visual cue. But -- I don't really know how to move is javascript into a tiddlywiki function. It might be trivial, but insurmountable for me.If anyone wanted to hack on it, that would be great, and might be interesting.
//steve.
PMario
Aug 16, 2016, 5:21:15 PM8/16/16
to TiddlyWiki
On Tuesday, August 16, 2016 at 6:11:53 PM UTC+2, stevesuny wrote:
Of course, I'm hoping to embed the function in tiddlywiki so I could use a macro <<showtile i=124.87379701700996 x=176.6728727371631 y=104.28485949713784 r=64 g=178 b=242 ri=1.6731564374861718 gi=5.41945679039433 bi=17.160426734134074 width=25 height=25>> to generate a 25x25 image that looks like this
IMO an image with 25 x 25 pixel won't be very useful. It's too small to see much. I did add 2 examples the first one is about 25x25 the second one 100x100. I used your links to create them.
Your example uses a canvas element, which is nice if you want to create bitmap images.
IMO for TW it would be easier to dynamically create SVGs as used for the icons. ... Like shown in http://tiddlywiki.com/#Using%20SVG
have fun!
mario
PMario
Aug 16, 2016, 5:42:58 PM8/16/16
to TiddlyWiki
On Tuesday, August 16, 2016 at 6:11:53 PM UTC+2, stevesuny wrote:
We could set those values based on fields/tags, and generate visual cues to the tags of a tiddler. <snip>
In a multi-tagged environment, this could be an interesting visual cue. But -- I don't really know how to move is javascript into a tiddlywiki function. It might be trivial, but insurmountable for me.If anyone wanted to hack on it, that would be great, and might be interesting.
I do like the idea of "identicons" [1] for tiddlers. Github uses them for the default avatars [2]
But .. I think, they need to be automatically generated, in a "pseudo random" [3] way, that is reproducible. ... If the user needs to create the "tiles" imo it will be too much work and error-prone.
TW tags already have a "color" field, that could be used to "roll some dices" and create something interesting, but reproducible.
just some thoughts.
mario
[1] https://en.wikipedia.org/wiki/Identicon.
[2] https://github.com/blog/1586-identicons
[3] https://en.wikipedia.org/wiki/Pseudorandomness
Steven Schneider
Aug 17, 2016, 9:38:09 AM8/17/16
to TiddlyWiki
On Tuesday, August 16, 2016 at 5:21:15 PM UTC-4, PMario wrote:
On Tuesday, August 16, 2016 at 6:11:53 PM UTC+2, stevesuny wrote:
Of course, I'm hoping to embed the function in tiddlywiki so I could use a macro <<showtile i=124.87379701700996 x=176.6728727371631 y=104.28485949713784 r=64 g=178 b=242 ri=1.6731564374861718 gi=5.41945679039433 bi=17.160426734134074 width=25 height=25>> to generate a 25x25 image that looks like this
IMO an image with 25 x 25 pixel won't be very useful. It's too small to see much. I did add 2 examples the first one is about 25x25 the second one 100x100. I used your links to create them.
yes, of course. i was thinking 25% not 25px...but 100x100 makes perfect sense.
Your example uses a canvas element, which is nice if you want to create bitmap images.
IMO for TW it would be easier to dynamically create SVGs as used for the icons. ... Like shown in http://tiddlywiki.com/#Using%20SVG
yes, that might work too! i look into it...
have fun!
mario
PMario
Aug 17, 2016, 6:26:26 PM8/17/16
to TiddlyWiki
On Wednesday, August 17, 2016 at 3:38:09 PM UTC+2, Steven Schneider wrote:
yes, of course. i was thinking 25% not 25px...but 100x100 makes perfect sense.
On HiDPI screens 25% width will still be 860++ px :)
-----------
I found this post from the inventor of the identicons: http://web.archive.org/web/20080703155749/http://www.docuverse.com/blog/donpark/2007/01/19/identicon-updated-and-source-released
Identicons where inspired by this post: http://www.levitated.net/daily/lev9block.html
I think those things are really beautiful. I like them much more than the github version.
-------------
From the OP
In a multi-tagged environment, this could be an interesting visual cue.
Yes. ...
I did talk with Mat about a similar idea, at the Oxford "TiddlyWiki European Meetup". We talked about something, that I called "a tiddler DNA". Similar to your visual example it also works with very big (random) numbers, represented as strings. eg: ofSeoYaYpxwlUiuBxCXq8. Those strings contain a lot of information. Similar to the parameters of your "tile" (which basically can have infinite variations) but compressed into very big numbers.
Every Tiddler (I'd like to name mine: First) would get one of them in a field eg: dna: aaaaaaaaaaaBBBBBBBBBB ... Similar to "human" DNA the First-dna can be mutated over the live-cycle of the tiddler. eg: if a tiddler is tagged.
The tag tiddler (named: due) would have a dna eg: cccccccccccDDDDDDDDDD , which would just be added to the tagged First-dna. Like so: dna: aaaaaaaaaaaBBBBBBBBBB-cccccccccccDDDDDDDDDD
A second tag (named: drei) would be drei-dna: eeeeeeeeeeeFFFFFFFFFF. ... But since a tiddler dna length is limited to 42 chars (for this example) the First-dna would need to be mutated,
like so: First-dna: aaaaaaaaaaaBBBBBBBBBB-ccccFFccccFeDDDeeDDDD .. The (tag) part of the dna would randomly get about 25% of the drei-dna. and so on. ...
Tiddler cloning will work like so: Let's clone First and name it clone. clone has the same dna as First, but it has a different name. so the "first part" of the dna has to be mutated: clone-dna: aaaHHaaagaaBBgBBgBBBH-ccccFFccccFeDDDeeDDDD ... If tags are changed the second part would be mutated too. .. and so on ... There are a lot of other possibilities to mutate the dna ...
As you can see, those simple rules already cause quite some variation, but still contain enough information for a "pattern matching" algorithm, to see, where a tiddler came from and how it was manipulated.
But this dna stuff imo is "boring" for humans, since we can't deal very well with those strings or numbers. ... But the mechanism is very similar to your original post. So we can use the dna to store parameters, to create visual patterns, that are nice to work with for humans. And we can define some rules, how to modify them, and see what happens.
just some thoughts
-mario
I did talk with Mat about a similar idea, at the Oxford "TiddlyWiki European Meetup". We talked about something, that I called "a tiddler DNA". Similar to your visual example it also works with very big (random) numbers, represented as strings. eg: ofSeoYaYpxwlUiuBxCXq8. Those strings contain a lot of information. Similar to the parameters of your "tile" (which basically can have infinite variations) but compressed into very big numbers.
Every Tiddler (I'd like to name mine: First) would get one of them in a field eg: dna: aaaaaaaaaaaBBBBBBBBBB ... Similar to "human" DNA the First-dna can be mutated over the live-cycle of the tiddler. eg: if a tiddler is tagged.
The tag tiddler (named: due) would have a dna eg: cccccccccccDDDDDDDDDD , which would just be added to the tagged First-dna. Like so: dna: aaaaaaaaaaaBBBBBBBBBB-cccccccccccDDDDDDDDDD
A second tag (named: drei) would be drei-dna: eeeeeeeeeeeFFFFFFFFFF. ... But since a tiddler dna length is limited to 42 chars (for this example) the First-dna would need to be mutated,
like so: First-dna: aaaaaaaaaaaBBBBBBBBBB-ccccFFccccFeDDDeeDDDD .. The (tag) part of the dna would randomly get about 25% of the drei-dna. and so on. ...
Tiddler cloning will work like so: Let's clone First and name it clone. clone has the same dna as First, but it has a different name. so the "first part" of the dna has to be mutated: clone-dna: aaaHHaaagaaBBgBBgBBBH-ccccFFccccFeDDDeeDDDD ... If tags are changed the second part would be mutated too. .. and so on ... There are a lot of other possibilities to mutate the dna ...
As you can see, those simple rules already cause quite some variation, but still contain enough information for a "pattern matching" algorithm, to see, where a tiddler came from and how it was manipulated.
But this dna stuff imo is "boring" for humans, since we can't deal very well with those strings or numbers. ... But the mechanism is very similar to your original post. So we can use the dna to store parameters, to create visual patterns, that are nice to work with for humans. And we can define some rules, how to modify them, and see what happens.
just some thoughts
-mario
Reply all
Reply to author
Forward
0 new messages