[tw] TiddlyPictoWiki

[Bauwe Bijl]

Hello

I like to share a project/idea I have been working on lately.
What started as a usual, "lets try this tonight with TiddlyWiki"
exploration of a concept what seemed difficult/unreachable. Already
resulted in a very useful "application like" TiddlyWiki.

My goal was to combine a number of images (Picto's), used as a part of
a non-verbal communication method for mentally disabled people, and a
clear simple navigation.
So the end user could communicate via TiddlyPictoWiki and also provide
easy access (html) to methodology for institutes on a budget.

As I roughly pushed towards a model to explore what's possible
"behind", I realized after a review that what was functioning, already
seemed useful and full of possibilities.

Here are some of the prototype applications (empty TiddlyWiki's with
minimal set of plugins and Picto's to function):

! build for base64 capable browsers, developed for 1280x800 fullscreen
FireFox!

• http://hoster.peermore.com/recipes/WeekDay/tiddlers.wiki
• http://hoster.peermore.com/recipes/EmotionsActions/tiddlers.wiki
• http://hoster.peermore.com/recipes/LocationObjects/tiddlers.wiki

Here the -pre-prototype ... the quickstart document I used on the
start to build in and explore plugins, the "workbench":


• http://hoster.peermore.com/recipes/pictoworkspace/tiddlers.wiki


More info can be found on the "projectpage" (all 72 demo Picto's are
in there.... functions as base TiddlyWiki):


• http://hoster.peermore.com/recipes/tiddlypictowiki/tiddlers.wiki


Today's challenges, possibilities, explorations and dreams:

Serverside:
For now there is a selection of 72 Picto's (free to use as demo).
I have 1000+ similar Picto's (creative commons) in stock and the
method also involves real pictures (grand parents, favorit pet etc.)
So the eventually 2000+ images (and growing) must be handled.

Middleware (serverside) dreammachine:
A TiddlyPictoWiki creating TiddlyWiki (set screensize, set backround,
set imagesize in the vocabulary, select Picto's to use, change order
and publish)

TiddlyPictoWiki:
Exploration of horizontal menu's on the footer (harmonica etc.) to
load more Picto's in the TiddlyPictoWiki, without loosing vocabulary
picto size.

FileDropPlugin extra's:
It would be nice when a image is dropped, a second Tiddler was created
with: the image, a certain tag, and a title without extension. And a
third tiddler, all Picto's presented with that tag, as title
alphabetically grouped/order.



What made me trigger to create:
Combining knowledge from a previous profession and new possibilities.
"It's basically a box of cards".....from a chat with Eric Shulman
helping me how to explain what's a TiddlyWiki to a "normal" person.
The person I don't know, who might say in future: "Drink" by using a
pc or cellphone with TiddlyPictoWiki, missing good communication
methods now.

Bauwe

--
You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.
To post to this group, send email to tiddl...@googlegroups.com.
To unsubscribe from this group, send email to tiddlywiki+...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/tiddlywiki?hl=en.

[Tobias Beer]

This is excitingly beautiful and a somewhat promising usecase to the
tw landscape...

Could be used with:

*polls
*hypertext stories
*multiple choice
*voting

and triggering who-knows-what with the addition of drag'n'drop and a
kind of target-canvas, as in:
*a (shopping) basket
*some kind of "add this here"

etc...

Especially with svg coming up next/badly, tiddlywiki definetely needs
to enter the arena of pictography. The simpler the better.

Tobias.

[PMario]

Hi,
This is a very interesting concept. You wrote 2000+ pics/files.

I made a short test with your png's, TW size and file size.
Do you have your original pics as svg or other vector graphics format?

Here is what I found:

1)
saved 2 pics lossless png 381 kByte on disk
saved 1 pic compr.70% png ~15 kByte on disk
saved same pics using gif 8 kByte on disk

gif is lossless

2)
1 png vakantie.png in TW uses 18816 byte 100%
1 gif vakantie.gif in TW uses 10715 byte 57%
1 svg vakantie.svg in TW uses 6268 byte 34% (black and white only, no
gray not optimized)

Saving ~60% of filesize may be of interest for handling, speed and
deployment.

My questions:

a) Which CC license is it?
b) I am very interested in the emotions/actions pics for my new
company. Please send a private mail!

kind regards
Mario Pietsch

[Alex Hough]

Hi Bauwe,

I really like the look of the pictograms and your interface.

Pictograms and hypertext made me think of hieroglyphics.

Mario's drag and drop feature would enable archetypal stories to be
composed at pictogram level, then detail entered into the tiddler.

Interesting and thought provoking, thanks for sharing,

Alex

--
http://www.multiurl.com/g/64

[Tobias Beer]

Hi Bauwe,

I think it were great if - when hovering any of the pictograms in the
overview - a corresponding title or summary could be rendered in some
"title" container, e.g. right below or above the pictograms.

Together with some nice jQuery transitions, I think TiddlyPictoWiki
would make for a highly attractive menu or navigation.

Just as TiddlyPictoWiki does now, imagine your tiddlywiki to start
with nothing but this kind of pictographic collection. Upon click, the
display zooms in on an associated content-tiddler or tiddler-category
(whereas tiddlers were associated via tags or fields). Upon selecting
an element from the initial pictographic overview there are a few
possible alternatives to keep on navigating the pictographic
landscape:

1) The most simple seems a "home" button (or bar) on any of the screen-
edges, whereas clicking on it will redisplay the initial pictographic
overview. This could also be a "back" button displayed in any of the
corners of the "content box" corresponding to the currently selected
pictogram.

2) Slightly more sophisticated would be to shrink all pictographs to a
predefined side of the screen into either a row or a column, in which
the currently selected item was somehow highlighted (via some border
or background). Clicking on an additional "home" button on that row/
column would redisplay the initial full-size pictographs.
TiddlyPictoWiki already works a bit like that only just that it
doesn't shrink "non-active" pictograms, doesn't display a related
content tiddler and that a left or right column, or a top-row are not
yet an option.

3) Quite sophisticated in terms of (jQuery) animation would be to
arrange all pictograms in a centered rectangular grid (of which not
all cells necessarily had to be in use). If a pictogram were clicked,
one could then - depending on their initial position in the grid -
slide+shrink all non-selected pictograms to a position on the screen
edges corresponding to their position in the initial grid... while at
the same time zoom in on the content tiddler corresponding to the
selected pictogram. Clicking on any of the shrinked pictograms sitting
on a screen edge would zoom in on that while shrinking (or fading) the
previously selected pictrogram to its corresponding spot on the edge.
Again, a "home" button would redisplay the large initial grid.

All these ideas seem quite intriguing ...with less of a focus on a
pictographic library than on what to actually do with pictograms. I
love the potential of this stuff!

[Bauwe Bijl]

Hi Tobias
Multiple Choice:
thinking about: theoretical traffic examination>>situation image,
traffic signs and examination questions>>product!

Polls:
It would be very interesting especially when a count per click can be
measured over a longer time and multiple sessions.
The vocabulary will be a personalized thing.
When proper measurements can be done some correlation between the word
and the place on a grid can be measured.
Which might give some indication about motor-skills, visibility and/or
favorite word (activity).
A nice graph for the therapist showing the hot and cold corners on the
"grid" and a "tag cloud" with favorite words.
When picto's are replaced, overtime the difference might be usefully
for diagnostic purpose and building in new physical challenges for a
client.

[Alex Hough]

Re: menus and pictagrams, this is cool:

http://www.bookfromtheground.com/home_english.htm

Its the work of a chinese artist.

ALex

--
http://www.multiurl.com/g/64

[Bauwe Bijl]

Hello Mario

>>Saving ~60% of filesize may be of interest for handling, speed and
deployment.

Thats is important!
My first choice of Picto's are from the "systems" I used to work with.
I like the black and white looks and they are carefully constructed
over time by specialists.
The 72 I used in this example are from a "introduction" pdf file.....I
simply converted some.
But talking about Boxes with cards: there are many more systems with
similar purposes!

The other 1000 picto's that I mentioned about are free for use,
english titled. Most are similar to the black and white demo pics.
Some picto's in this set might be "confrontating" to people and
that's why I didn't use them for demo purpose.
The picto's are .bmp , a.t.m. exploring mass conversion (to svg)
....I'll send you a mail about it.

Also these picto's don't have the desired white border, I had to do
that whit some css. Makes me think sisewize.....just the white image
would be enough, presented on a #222 background.

More as a spinoff:
Think about the TiddlyPictoWiki presenting barcodes or those squared
tags used on flighttickets.
Hold your cam(phone) in front and read whats inside.
How would the amount of content inside the tag be compared to the svg
size of the "tag"?

[Bauwe Bijl]

Hi Tobias
That is what I was wondering about.
For now I used the footer as a toolbar, but there must be some more
sophisticated way's.
Like moving/placing the toolbar elsewhere (physical challenges).

Also exploring things like adding:
a img {
padding: 5px ;
}
a img:hover {
background: #ff0000 ;
}
img {
padding: 20px ;
}

Without the padding part the picto become bouncy, which seems not
relaxed. But rudimentary it's somewhat osx toolbar alike (in the far
distence)

> 3) Quite sophisticated in terms of (jQuery) animation would be to
> arrange all pictograms in a centered rectangular grid (of which not
> all cells necessarily had to be in use). If a pictogram were clicked,
> one could then - depending on their initial position in the grid -
> slide+shrink all non-selected pictograms to a position on the screen
> edges corresponding to their position in the initial grid... while at
> the same time zoom in on the content tiddler corresponding to the
> selected pictogram. Clicking on any of the shrinked pictograms sitting
> on a screen edge would zoom in on that while shrinking (or fading) the
> previously selected pictrogram to its corresponding spot on the edge.
> Again, a "home" button would redisplay the large initial grid.

.......could we flip the picto's to use the "other side"?
Memory game alike?
Spinoff:
If we can use the other side.....we might use a 3d cube.....animated
rolling with clickable sides!

[Bauwe Bijl]

Hi Alex.
Yes those are great picto's.
Talking about chinees: There is similarity between picto's and the
Chinese writing.

And more as an idea:
I saw a study once about the way people remember their pincode by
remembering the pattern they type on the grid.
The same study used a qwerty keyboard on a square grid.
The pattern typed for a word results as a drawing, similar to a
Chinese sign.....western chinees!
It's a little abstract but also a way to put information in a image.

On Apr 26, 12:42 pm, Alex Hough <r.a.ho...@googlemail.com> wrote:
> Re: menus and pictagrams, this is cool:
>
> http://www.bookfromtheground.com/home_english.htm
>
> Its the work of a chinese artist.
>
> ALex
>

> --http://www.multiurl.com/g/64

>
> --
> You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.
> To post to this group, send email to tiddl...@googlegroups.com.
> To unsubscribe from this group, send email to tiddlywiki+...@googlegroups.com.
> For more options, visit this group athttp://groups.google.com/group/tiddlywiki?hl=en.

[PMario]

hi,

> Polls:
> It would be very interesting especially when a count per click can be
> measured over a longer time and multiple sessions.

Have you thought about using piwik - realtime - analytics tool [1]

> The vocabulary will be a personalized thing.

> When proper measurements can be done some correlation between the word
> and the place on a grid can be measured.
> Which might give some indication about motor-skills, visibility and/or
> favorite word (activity).

Since TW has full control over any click event which is done, using
the javascript API allmost anything can be recorded [2].
For recording special user-data a new piwik plugin will be needed.

> A nice graph for the therapist showing the hot and cold corners on the
> "grid" and a "tag cloud" with favorite words.

Some is allready there, but I think this needs some new plugins
according to special needs.

> When picto's are replaced, overtime the difference might be usefully
> for diagnostic purpose and building in new physical challenges for a
> client.

Getting piwik to work with TW you can use Phil Hawksworth's
description [3]. It is a littlebit outdatet for google analytics, but
it works immediately with piwik.

Installing piwik is relatively "simple" too.

regards Mario
[1] http://piwik.org
[2] http://piwik.org/docs/javascript-tracking/
[3] http://www.hawksworx.com/journal/2007/07/05/tracking-tiddlywiki-with-google-analytics/

[PMario]

hi,

On Apr 26, 1:12 pm, Bauwe Bijl <bauweb...@gmail.com> wrote:

> The other 1000 picto's that I mentioned about are free for use,
> english titled. Most are similar to the black and white demo pics.
> Some picto's in this set might be "confrontating" to  people and
> that's why I didn't use them for demo purpose.
> The picto's are .bmp , a.t.m. exploring mass conversion (to svg)
> ....I'll send you a mail about it.

great!

Made one more test.
Inkscape svg program. converted vakantie.png into svg

resulting pic looks nice, text is ugly
has 215 nodes including text
has 121 nodes text deleted

auto-optimizing the path results in
56 nodes no text but the pic is not nice anymore.

my handmade svg
has 45 nodes + text and looks exactly like the original
================

I made a similar experience about 6 years ago. All tracers that I
found needed some tweaking. Which is more time consuming, than make
"simple" pics from scratch.

Found Vector Magic and tested it.
64 nodes + (x nodes for text) very good result, but still needs some
tweaking.

-mario

[Alex Hough]

Hi Bauwe,

I've just writen an e-mail to systems practitioner friend. I
mentioned this thread and PictoWiki. I think it could be a good
solution to a design problem.

Who designed the pictograms? Are there any resources you can point me
towards which would help me find out more about pictogram use and
design.

best wishes
Alex

[Bauwe Bijl]

Hi Alex,

I have send a mail with some info.

Bauwe