Re: [tw] Re: Imagemap in TW5?

[oleghbond]

Certainly interactive SVG image map is very attractive technique. However, 
I encountered certain difficulties - 
https://groups.google.com/forum/#!topic/tiddlywiki/HxZbVDHpw5c

When I tried to insert an external SVG-file with hyperlinks in it by 
dragging-and-dropping the result was also negative.

Does somebody have any idea what's the matter? 

субота, 10 січня 2015 р. 19:33:53 UTC+2 користувач Tobias Beer написав:
>
>
> Not precisely; the way to open a tiddler with an HTML anchor link is to 
>> use a permalink like so:
>>
>> 
>>
>
> Perhaps also interesting...
>
> Using svg instead of a pixel-based image.
>
> Interactive SVG Image Map @ tb5 
> 
>
> Best wishes, Tobias.
>

-- 
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+unsubscr...@googlegroups.com.
To post to this group, send email to tiddlywiki@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/504f219a-fa96-4d9d-a8a8-65f4f5c1b51a%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Re: [tw] Re: Imagemap in TW5?

[Jon]

Hi Tobias,

I managed to get this working - your additional instruction at Interactive 
SVG Image Map @ tb5 

 
as to how to wrap the triggering SVG elements was what I needed and it does 
work by wrapping a layer.

Many thanks, Jon.


On Wednesday, 21 January 2015 13:00:22 UTC, Tobias Beer wrote:
>
> As I mentioned before, the layer name then appears if you hover over it 
>> when the graphic is in a tiddler, so presumably it would be possible to use 
>> that same reference within the code to make it clickable...?
>>
>
> Ok, now I get it. Yes, that sounds like it should work.
> I guess, uppermost layers will have click-preference.
>
> Best wishes, Tobias. 
>

-- 
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+unsubscr...@googlegroups.com.
To post to this group, send email to tiddlywiki@googlegroups.com.
Visit this group at http://groups.google.com/group/tiddlywiki.
For more options, visit https://groups.google.com/d/optout.

Re: [tw] Re: Imagemap in TW5?

[Tobias Beer]

>
> As I mentioned before, the layer name then appears if you hover over it 
> when the graphic is in a tiddler, so presumably it would be possible to use 
> that same reference within the code to make it clickable...?
>

Ok, now I get it. Yes, that sounds like it should work.
I guess, uppermost layers will have click-preference.

Best wishes, Tobias. 

-- 
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+unsubscr...@googlegroups.com.
To post to this group, send email to tiddlywiki@googlegroups.com.
Visit this group at http://groups.google.com/group/tiddlywiki.
For more options, visit https://groups.google.com/d/optout.

Re: [tw] Re: Imagemap in TW5?

[Jon]

Hi Tobias,

That's why I was wondering if you could use the layer feature of SVG-edit.

It's very easy to assign an element of a graphic to a layer and give it a 
name.

As I mentioned before, the layer name then appears if you hover over it 
when the graphic is in a tiddler, so presumably it would be possible to use 
that same reference within the code to make it clickable...?

Thanks, Jon
On Wednesday, 21 January 2015 12:43:22 UTC, Tobias Beer wrote:

> Not sure if there is some application that would highlights
>> precisely which part of the svg markup renders which element on the 
>> canvas.
>>
>
> Well, actually, what you can use are the developer tools that come with 
> your browser!
>
> Best wishes, Tobias.
>

-- 
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+unsubscr...@googlegroups.com.
To post to this group, send email to tiddlywiki@googlegroups.com.
Visit this group at http://groups.google.com/group/tiddlywiki.
For more options, visit https://groups.google.com/d/optout.

Re: [tw] Re: Imagemap in TW5?

[Tobias Beer]

>
> Not sure if there is some application that would highlights
> precisely which part of the svg markup renders which element on the 
> canvas.
>

Well, actually, what you can use are the developer tools that come with 
your browser!

Best wishes, Tobias.

-- 
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+unsubscr...@googlegroups.com.
To post to this group, send email to tiddlywiki@googlegroups.com.
Visit this group at http://groups.google.com/group/tiddlywiki.
For more options, visit https://groups.google.com/d/optout.

Re: [tw] Re: Imagemap in TW5?

[Tobias Beer]

>
> How do you select a particular part of the graphic to then assign a class 
> to it?
>

By being able to read from the svg markup which elements do what.
Not sure if there is some application that would highlights
precisely which part of the svg markup renders which element on the canvas.

Best wishes, Tobias.

-- 
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+unsubscr...@googlegroups.com.
To post to this group, send email to tiddlywiki@googlegroups.com.
Visit this group at http://groups.google.com/group/tiddlywiki.
For more options, visit https://groups.google.com/d/optout.

Re: [tw] Re: Imagemap in TW5?

[Jon]

Hi Tobias,

I'll study it when I get home but from a quick look, I suspect I'll still 
have a problem with this bit: "assign classes to the elements you wish to 
style..." 
How do you select a particular part of the graphic to then assign a class 
to it?
Thanks, Jon


On Wednesday, 21 January 2015 10:09:09 UTC, Tobias Beer wrote:

> Apologies if this is what you've already done here Interactive SVG Image 
>> Map @ tb5 
>> 
>>  
>> but this is too advanced for me and I wondered if the layer thing might be 
>> easier (for me to do)
>>
>
> What you want to do is precisely what you see in the example above. It 
> only looks complicated because I perhaps didn't chose the simplest SVG... 
> which might have been better. So, thre's that "noise".
>
> Anyhow, I have added some more explanations, especially on how to turn an 
> svg element into a clickable link.
>
> Best wishes, Tobias.
>

-- 
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+unsubscr...@googlegroups.com.
To post to this group, send email to tiddlywiki@googlegroups.com.
Visit this group at http://groups.google.com/group/tiddlywiki.
For more options, visit https://groups.google.com/d/optout.

Re: [tw] Re: Imagemap in TW5?

[Tobias Beer]

>
> Apologies if this is what you've already done here Interactive SVG Image 
> Map @ tb5 
> 
>  
> but this is too advanced for me and I wondered if the layer thing might be 
> easier (for me to do)
>

What you want to do is precisely what you see in the example above. It only 
looks complicated because I perhaps didn't chose the simplest SVG... which 
might have been better. So, thre's that "noise".

Anyhow, I have added some more explanations, especially on how to turn an 
svg element into a clickable link.

Best wishes, Tobias.

-- 
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+unsubscr...@googlegroups.com.
To post to this group, send email to tiddlywiki@googlegroups.com.
Visit this group at http://groups.google.com/group/tiddlywiki.
For more options, visit https://groups.google.com/d/optout.

Re: [tw] Re: Imagemap in TW5?

[Jon]

Hi Tobias,

I have very limited knowledge of css etc. but have created some drawings 
using SVG-edit after you recommended it.

I've noticed that if you move particular elements of the drawing to 
individual layers, the layer name appears when you hover over the element 
in the tiddler.

Would it be easy to somehow introduce a reference to another tiddler at the 
layer part of the code so that clicking on that part of the image would 
open the other tiddler?

Apologies if this is what you've already done here Interactive SVG Image 
Map @ tb5  but 
this is too advanced for me and I wondered if the layer thing might be 
easier (for me to do)

Thanks, Jon.

On Saturday, 10 January 2015 17:33:53 UTC, Tobias Beer wrote:
>
>
> Not precisely; the way to open a tiddler with an HTML anchor link is to 
>> use a permalink like so:
>>
>> 
>>
>
> Perhaps also interesting...
>
> Using svg instead of a pixel-based image.
>
> Interactive SVG Image Map @ tb5 
> 
>
> Best wishes, Tobias.
>  

-- 
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+unsubscr...@googlegroups.com.
To post to this group, send email to tiddlywiki@googlegroups.com.
Visit this group at http://groups.google.com/group/tiddlywiki.
For more options, visit https://groups.google.com/d/optout.

Re: [tw] Re: Imagemap in TW5?

[HansWobbe]

Tobias:

Thanks for suggesting fontAwesome.  I simply hadnt thought of it in this 
context, perhaps because I've been pondering the use of Inkscape.  I 
suspect fontAwesome will be better for "Quick & Dirty" solutions, but I 
don't have enough experience with either to be able to make a judgement at 
this time.

Cheers,
Hans


On Sunday, January 11, 2015 at 4:47:23 PM UTC-5, Tobias Beer wrote:
>
> Hi Hans,
>  
>
>> :-) Bonus marks still available for "ease of installation" 
>>
>
> That's the thing... svg is like HTML, a little... so either you get those 
> ready-made svg images that you want to use, or you need to hands-on build 
> them from scrath (cumbersome, with loads of unnecessary markup, a bit like 
> MS Word).
>
> An alternative would be to rather use something like FontAwesome to "just 
> use".
>
> http://fontawesome.tiddlyspot.com
>
> Best wishes, Tobias.
>

 

-- 
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+unsubscr...@googlegroups.com.
To post to this group, send email to tiddlywiki@googlegroups.com.
Visit this group at http://groups.google.com/group/tiddlywiki.
For more options, visit https://groups.google.com/d/optout.

Re: [tw] Re: Imagemap in TW5?

[Tobias Beer]

Hi Hans,
 

> :-) Bonus marks still available for "ease of installation" 
>

That's the thing... svg is like HTML, a little... so either you get those 
ready-made svg images that you want to use, or you need to hands-on build 
them from scrath (cumbersome, with loads of unnecessary markup, a bit like 
MS Word).

An alternative would be to rather use something like FontAwesome to "just 
use".

http://fontawesome.tiddlyspot.com

Best wishes, Tobias.

-- 
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+unsubscr...@googlegroups.com.
To post to this group, send email to tiddlywiki@googlegroups.com.
Visit this group at http://groups.google.com/group/tiddlywiki.
For more options, visit https://groups.google.com/d/optout.

Re: [tw] Re: Imagemap in TW5?

[HansWobbe]

> Perhaps also interesting...
>
> Using svg instead of a pixel-based image.
>
> Interactive SVG Image Map @ tb5 
> 
>
> Best wishes, Tobias.
>

+1 for "effective insight" re svg.
+1 for a demo with "ease of understanding"

:-) Bonus marks still available for "ease of installation" 

Thanks for sharing this!

-- 
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+unsubscr...@googlegroups.com.
To post to this group, send email to tiddlywiki@googlegroups.com.
Visit this group at http://groups.google.com/group/tiddlywiki.
For more options, visit https://groups.google.com/d/optout.

Re: [tw] Re: Imagemap in TW5?

[Tobias Beer]

> Not precisely; the way to open a tiddler with an HTML anchor link is to 
> use a permalink like so:
>
> 
>

Perhaps also interesting...

Using svg instead of a pixel-based image.

Interactive SVG Image Map @ tb5 


Best wishes, Tobias.
 

-- 
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+unsubscr...@googlegroups.com.
To post to this group, send email to tiddlywiki@googlegroups.com.
Visit this group at http://groups.google.com/group/tiddlywiki.
For more options, visit https://groups.google.com/d/optout.

Re: [tw] Re: Imagemap in TW5?

[Jeremy Ruston]

Hi RunningUtes

> Is there an equivalent method similar to
story.displayTiddler(null,'TiddlerName'); in TW5?

Not precisely; the way to open a tiddler with an HTML anchor link is to use
a permalink like so:



>  

It's actually a bug that javascript URLs work in HTML anchor links. The
goal is to filter out all executable Javascript. Otherwise we'd have a
major security obstacle to sharing tiddler content: any wikitext tiddler
could contain malicious JS that steals your data.

I've created a ticket:

https://github.com/Jermolene/TiddlyWiki5/issues/1350

Best wishes

Jeremy.


On Wed, Jan 7, 2015 at 8:45 PM, RunningUtes  wrote:

> I have it working under TWc, just not under TW5. Is there an equivalent
> method similar to
>
> story.displayTiddler(null,'TiddlerName');
>
> in TW5?
>
>
> On Wednesday, January 7, 2015 12:34:21 AM UTC-8, Tobias Beer wrote:
>>
>> Hi c pa,
>>
>> Perhaps not the most intuitive example in terms of where to click. ^^
>>
>> And then there is this on win / chrome...
>>
>>
>> 
>>
>> Mostly, though, this bit is TWc code...
>>
>> story.displayTiddler(null,'TiddlerName');
>>
>> ...which doesn't work in TW5.
>>
>> Best wishes, Tobias.
>>
>  --
> 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+unsubscr...@googlegroups.com.
> To post to this group, send email to tiddlywiki@googlegroups.com.
> Visit this group at http://groups.google.com/group/tiddlywiki.
> For more options, visit https://groups.google.com/d/optout.
>



-- 
Jeremy Ruston
mailto:jeremy.rus...@gmail.com

-- 
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+unsubscr...@googlegroups.com.
To post to this group, send email to tiddlywiki@googlegroups.com.
Visit this group at http://groups.google.com/group/tiddlywiki.
For more options, visit https://groups.google.com/d/optout.