SVG Editing in TiddlySpace

28 views
Skip to first unread message

rakugo

unread,
Oct 12, 2010, 12:34:54 PM10/12/10
to TiddlyWeb
Paul Downey has helped me get svg-edit into TiddlySpace! (yey!)

For those of you who want to play with it include the svg-editor space
[1] into your homespace and click the "new image" button that should
appear in your SideBarOptions (feel free to play with it first in the
svg-editor space).

This will allow you to draw svg tiddlers using a graphical user
interface (gui), and in future when you click edit on those tiddlers
you will be able to edit the current image. Saving is done via the
normal TiddlyWiki toolbar save button (note there are still remants of
the svg-editor interface in the gui that may not work.

For those of you who are technically minded and interested in how it
works (others please stop reading as this might be dull). Paul using
his reg ex foo managed to mangle all the urls in the svg edit html
page [2] so that the namespace for all dependant files was to
http://svg-edit.tiddlyspace.com . He put this file in [1]. He also
uploaded all the dependencies to the svg-edit space [3]

I then created a config file which configures the javascript part of
svg-edit to work with TiddlyWiki [4]. This config file also loads up
any url passed in the querystring with the name resource (this is how
existing images are loading into the gui).

The last piece of the puzzle is a TiddlyWiki plugin - the svg editor
plugin [5]. This hijacks the edit macro and save tiddler command to
work differently for svg tiddlers. In the case of an svg tiddler an
iframe is created pointing to the html page [2]. The save command
reaches into the iframe (which if included will run under the
authority of your domain) and pulls out the svg string and saves it to
the store.

This has not been tested to the full but should just work.
Enjoy.
Jon

[1] http://svg-editor.tiddlyspace.com/
[2] http://svg-editor.tiddlyspace.com/svg-editor
[3] http://svg-edit.tiddlyspace.com
[4] http://svg-editor.tiddlyspace.com/twconfig.js
[5] http://svg-editor.tiddlyspace.com/SVGEditorPlugin

Jeremy Ruston

unread,
Oct 12, 2010, 1:57:28 PM10/12/10
to tidd...@googlegroups.com
It's not working properly for me in any browser, perhaps something
vital is still private?

Cheers

Jeremy

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

--
Jeremy Ruston
mailto:jer...@osmosoft.com
http://www.tiddlywiki.com

rakugo

unread,
Oct 12, 2010, 2:24:56 PM10/12/10
to TiddlyWeb
Just tested on Safari whilst logged out and it seems to be fine/
Make sure you load
http://svg-editor.tiddlyspace.com/

If it works correctly you will see an iframe with the editor in your
GettingStarted tiddler.
Jon

On Oct 12, 6:57 pm, Jeremy Ruston <jeremy.rus...@gmail.com> wrote:
> It's not working properly for me in any browser, perhaps something
> vital is still private?
>
> Cheers
>
> Jeremy
>
>
>
>
>
> On Tue, Oct 12, 2010 at 5:34 PM, rakugo <jdlrob...@gmail.com> wrote:
> > Paul Downey has helped me get svg-edit into TiddlySpace! (yey!)
>
> > For those of you who want to play with it include the svg-editor space
> > [1] into your homespace and click the "new image" button that should
> > appear in your SideBarOptions (feel free to play with it first in the
> > svg-editor space).
>
> > This will allow you to draw svg tiddlers using a graphical user
> > interface (gui), and in future when you click edit on those tiddlers
> > you will be able to edit the current image. Saving is done via the
> > normal TiddlyWiki toolbar save button (note there are still remants of
> > the svg-editor interface in the gui that may not work.
>
> > For those of you who are technically minded and interested in how it
> > works (others please stop reading as this might be dull). Paul using
> > his reg ex foo managed to mangle all the urls in the svg edit html
> > page [2] so that the namespace for all dependant files was to
> >http://svg-edit.tiddlyspace.com. He put this file in [1]. He also
> > uploaded all the dependencies to the svg-edit space [3]
>
> > I then created a config file which configures the javascript part of
> > svg-edit to work with TiddlyWiki [4]. This config file also loads up
> > any url passed in the querystring with the name resource (this is how
> > existing images are loading into the gui).
>
> > The last piece of the puzzle is a TiddlyWiki plugin - the svg editor
> > plugin [5]. This hijacks the edit macro and save tiddler command to
> > work differently for svg tiddlers. In the case of an svg tiddler an
> > iframe is created pointing to the html page [2]. The save command
> > reaches into the iframe (which if included will run under the
> > authority of your domain) and pulls out the svg string and saves it to
> > the store.
>
> > This has not been tested to the full but should just work.
> > Enjoy.
> > Jon
>
> > [1]http://svg-editor.tiddlyspace.com/
> > [2]http://svg-editor.tiddlyspace.com/svg-editor
> > [3]http://svg-edit.tiddlyspace.com
> > [4]http://svg-editor.tiddlyspace.com/twconfig.js
> > [5]http://svg-editor.tiddlyspace.com/SVGEditorPlugin
>
> > --
> > You received this message because you are subscribed to the Google Groups "TiddlyWeb" group.
> > To post to this group, send email to tidd...@googlegroups.com.
> > To unsubscribe from this group, send email to tiddlyweb+...@googlegroups.com.
> > For more options, visit this group athttp://groups.google.com/group/tiddlyweb?hl=en.

PMario

unread,
Oct 12, 2010, 5:06:34 PM10/12/10
to TiddlyWeb
That's cool :)

===
If I want to save chromium says:

Uncaught TypeError: Cannot read property '_iframe' of undefined
TiddlyWiki.saveTiddler:13
(anonymous function):81
c.event.handlehttp://pmsandbox.tiddlyspace.com/:25925
j.handle.o

ff says:
fields is undefined
[Break on this error] }

The source points somewhere to loadPlugins() in the core. This makes
no sense to me.

I get the "Please enter a name to save this tiddler as" dialog and
then "nothing happens"

ubuntu 10.04
-m

rakugo

unread,
Oct 12, 2010, 5:58:15 PM10/12/10
to TiddlyWeb
I forgot about the save as button (i've been creating images using the
new image button in SideBarOptions). I've fixed this now so all should
work as expected.
jon

colmjude

unread,
Oct 12, 2010, 6:08:45 PM10/12/10
to TiddlyWeb
This is brilliant.
Works really well for me.

Cheers guys.

Colm

Måns

unread,
Oct 12, 2010, 8:06:21 PM10/12/10
to TiddlyWeb
Hi Jon
> Paul Downey has helped me get svg-edit into TiddlySpace! (yey!)
>
> For those of you who want to play with it include the svg-editor space
> [1] into your homespace and click the "new image" button that should
> appear in your SideBarOptions (feel free to play with it first in the
> svg-editor space).
>
> This will allow you to draw svg tiddlers using a graphical user
> interface (gui), and in future when you click edit on those tiddlers
> you will be able to edit the current image. Saving is done via the
> normal TiddlyWiki toolbar save button (note there are still remants of
> the svg-editor interface in the gui that may not work.
This is soo GREAT :-) I love it!!
Good job - and congratulations!!
Why is there a difference in how the imagetiddler renders the image
and how it's rendered in another tiddler through the <<image>> macro?
- see:
http://dapuppy.tiddlyspace.com/#%5B%5Bbillede%201%5D%5D%20testPuppy

Thanks for sharing - Its VERY nice to have this application in a TW,
however I fear that I might fill the TiddlySPace server with drawings
and images in a few days :-)

Cheers Måns Mårtensson

Måns

unread,
Oct 12, 2010, 9:37:47 PM10/12/10
to TiddlyWeb
I'd like to mention an issue with the <<image>> macro:
When you set height and size with the imagemacro - you get a clipped
image - no resizing.

Cheers Måns Mårtensson

Måns

unread,
Oct 12, 2010, 9:49:20 PM10/12/10
to TiddlyWeb
Just checked out the alfaversion (2.6) - many types of flowcharts,
optional grid and the ability to rotate... Do you plan to embed the
alfaversion as well?

Cheers Måns Mårtensson

Måns

unread,
Oct 12, 2010, 10:01:08 PM10/12/10
to TiddlyWeb
Sorry - I was too quick... The rotatefunction is actually already
working - and the TiddlySpaceversion has even more features than the
alfaversion in the topmenu ... -

Cheers Måns Mårtensson

Jeremy Ruston

unread,
Oct 13, 2010, 3:32:20 AM10/13/10
to tidd...@googlegroups.com
It wasn't working for me because I had misread your original post and
was including svg-edit.tiddlyspace.com instead of
svg.editor.tiddlyspace.com....

Cheers

Jeremy

> --
> You received this message because you are subscribed to the Google Groups "TiddlyWeb" group.
> To post to this group, send email to tidd...@googlegroups.com.
> To unsubscribe from this group, send email to tiddlyweb+...@googlegroups.com.

> For more options, visit this group at http://groups.google.com/group/tiddlyweb?hl=en.

PMario

unread,
Oct 13, 2010, 5:09:37 AM10/13/10
to TiddlyWeb
I jon,
I can't get it to work.
I made you a member of http://pmsandbox.tiddlyspace.com/

an testicon: http://pmsandbox.tiddlyspace.com/#test.svg

regards mario

Bauwe Bijl

unread,
Oct 13, 2010, 6:19:02 AM10/13/10
to TiddlyWeb
Hi
It starts working here! (love it)
FF 3.6.10
1.) New Image-command does not work (a svg-edit tiddler is created but
toolbarcommands saving/undo/delete don't work)
2.) The svg-editor on getting-started tiddler shows a "save as"
button-----> works (image is saved)
http://testbb.tiddlyspace.com/#test2

3.) Re-editing this image (test2) is not working, similar to issues at
1.

a reusable non-linear personal web-sketch-book is a fact \o/



Måns

unread,
Oct 13, 2010, 7:08:06 AM10/13/10
to TiddlyWeb
Hi Mario

This seems to work, with your beautiful theme (in google chromium
6.0.428.0 (49076) Puppy Linux )
http://nyui.tiddlyspace.com/#testBillede

Is it possible to edit your icons with svg-editor?

Cheers Måns Mårtensson

On 13 Okt., 10:09, PMario <pmari...@gmail.com> wrote:
> I jon,
> I can't get it to work.
> I made you a member ofhttp://pmsandbox.tiddlyspace.com/

Paul Downey

unread,
Oct 13, 2010, 7:26:09 AM10/13/10
to tidd...@googlegroups.com
> an testicon: http://pmsandbox.tiddlyspace.com/#test.svg

I couldn't see that tiddler, but Jon and I have both noticed that the
svg-editor doesn't load a number of existing SVGs ..

Might be worth experimenting with the application outside of your space:

http://svg-editor.tiddlyspace.com/svg-editor
http://svg-edit.googlecode.com/svn/branches/2.5.1/editor/svg-editor.html

should anyone care, the hack to mangle svg-edit into TiddlySpace is here:

http://gist.github.com/620635

--
Paul (psd)
http://blog.whatfettle.com

PMario

unread,
Oct 13, 2010, 9:04:09 AM10/13/10
to TiddlyWeb
@ Måns
That's right. Chromium works.

@ Paul
Editing works. Only save is not possible.

Edit the tiddler
Firebug says
missing } in XML expression
[Break on this error] var svgEditor=(function($,Editor)
{Edit...})};return Editor}(jQuery,svgEditor));
locale.min.js (Zeile 23)


If I click save
Firebug says:
window.frames[frameId] is undefined
[Break on this error] return false;

clicking the source points to 17651

// Check that a particular plugin is valid for execution
17636function isPluginExecutable(plugin)
17637{
17638 if(plugin.tiddler.isTagged("systemConfigForce")) {
17639 plugin.log.push(config.messages.pluginForced);
17640 return true;
17641 }
17642 if(plugin["CoreVersion"]) {
17643 var coreVersion = plugin["CoreVersion"].split(".");
17644 var w = parseInt(coreVersion[0],10) - version.major;
17645 if(w == 0 && coreVersion[1])
17646 w = parseInt(coreVersion[1],10) - version.minor;
17647 if(w == 0 && coreVersion[2])
17648 w = parseInt(coreVersion[2],10) - version.revision;
17649 if(w > 0) {
17650 plugin.log.push(config.messages.pluginVersionError);
17651 return false;
17652 }
17653 }
17654 return true;
17655}
17656

I added you as a member to pmsandbox too and
I'll make some tests with my svgs.

rakugo

unread,
Oct 13, 2010, 9:39:32 AM10/13/10
to TiddlyWeb
I hadn't tested on Firefox. Was surprised to see that Firefox behaves
slightly different to Safari.
In Safari window.frames["foo"] gives you the frame with id foo.
In Firefox window.frames["foo"] gives you the frame name foo.
Seems to be working now.

Jon

Tobias Beer

unread,
Oct 14, 2010, 4:33:19 PM10/14/10
to TiddlyWeb
Yes, frames are usually "named"... other than that, this is brilliant!
It's really exciting that you've got this stuff working so quickly
guys.

Cheers, Tobias.

Måns

unread,
Oct 15, 2010, 5:59:58 PM10/15/10
to TiddlyWeb
Hi Jon
Two questions:
If I choose Open Image [O] - shouldn't it open an image from my pc?
Is this a function which should work with binaryupload ??

If I want to use an image in my stylesheet, how should I proceed?:
How would I replace a base64 data image with an image?:

#titleLine{
display: block;
background: transparent url(data:image/png;base64,iVBORw0KG etc etc)
no-repeat 18px -7px;
_background: transparent;
height: 120px;
_height: 135px;
width: 150px;
color: #000;
border: 1px;
padding: 0;
margin: 0;
}

Cheers Måns Mårtensson


On 13 Okt., 00:34, rakugo <jdlrob...@gmail.com> wrote:
> Paul Downey has helped me get svg-edit into TiddlySpace! (yey!)
>
> For those of you who want to play with it include the svg-editor space
> [1] into your homespace and click the "new image" button that should
> appear in your SideBarOptions (feel free to play with it first in the
> svg-editor space).
>
> This will allow you to draw svg tiddlers using a graphical user
> interface (gui), and in future when you click edit on those tiddlers
> you will be able to edit the current image. Saving is done via the
> normal TiddlyWiki toolbar save button (note there are still remants of
> the svg-editor interface in the gui that may not work.
>
> For those of you who are technically minded and interested in how it
> works (others please stop reading as this might be dull). Paul using
> his reg ex foo managed to mangle all the urls in the svg edit html
> page [2] so that the namespace for all dependant files was tohttp://svg-edit.tiddlyspace.com. He put this file in [1]. He also

Plausible

unread,
Oct 19, 2010, 8:16:32 AM10/19/10
to TiddlyWeb
As mentioned in [1] I do not find a 'new image button' after importing
svg-editor [2] (nor on [2] itself). While this seems an error
ultimately I'd like such a button to integrate with the neui-em theme
[3] I'm using. While this is mostly up to Mario I decided to do some
DIY to learn a bit. I modified the free image at [4] to give [5] which
approximates a neui-em button. I uploaded this into a Palette.svg
tiddler, then added

<<image Palette.svg height:3em width:3em alt:"New SVG Tiddler"
tiddlyLink:"SVG Picture Editor">>

to SidebarButtons. [[SVG Picture Editor]] is a tiddler that just says
<<svgedit>> (the macro from [2]). Works pretty well.

Issues and notes:

1) At first Palette.svg wouldn't scale according to height: and
width:, but crop instead. Same problem as described in [6]. Had a
search and found the answer at [7]. Quoting from there:

>SVG file contained '<svg ... width="32px" height="32px" ...>...</svg>',
>as Inkscape created it. To be properly scaled it should contain '<svg
>... width="100%" height="100%" viewBox="0 0 32 32" ...>...</svg>'.

So I edited Palette.svg along those lines and it works.

Unfortunately SVG-edit inists on saving using the non-scalable syntax,
AFAICS, so any 'internally' created svg tiddler image may be
unscalable...

2) I can only seem to edit an existing SVG image tiddler once without
reloading the whole space (using svg-editor). I.e. I'll open the
tiddler, click edit, make changes to the pic within SVG-edit, click
the tiddler save button: fine. If I try to repeat this sequence,
nothing happens when I try to save. Reloading the space allows makes
the tiddler saveable once more -- but it's not ideal that way.

3) (somewhat off-topic) I can't get the alt:"aTooltipText" syntax for
<<image>> (described in [8]) to work. When I hover over my palette
'button', the tooltip I get is not "New SVG Tiddler" but "SVG Picture
Editor - my_username date_&_time_stamp" which isn't so great. I
checked whether the svg has its own <title>...</title>. It has
<dc:title /> and <dc:title>the_author's_name</dc:title>. I don't know
if these count, but in any case the_author's_name doesn't appear as a
tooltip.


cheers, ~P


[1] http://groups.google.com/group/tiddlywiki/browse_thread/thread/88b167bc929ab656
[2] http://svg-editor.tiddlyspace.com/
[3] http://neui-em.tiddlyspace.com/
[4] http://www.openclipart.org/detail/21620
[5] http://www.sendspace.com/file/h5nehr
[6] http://groups.google.com/group/tiddlywiki/browse_thread/thread/edd60994f5c1ec8/93824e57554892b3
[7] http://groups.google.com/group/mozilla.dev.tech.svg/browse_thread/thread/bcc7e520e2d8c17b/0c71dcd943b1fabc
[8] http://macros.tiddlyspace.com/#image

rakugo

unread,
Oct 20, 2010, 6:34:21 AM10/20/10
to TiddlyWeb
> Issues and notes:
>
> 1) At first Palette.svg wouldn't scale according to height: and
> width:, but crop instead. Same problem as described in [6]. Had a
> search and found the answer at [7]. Quoting from there:

A known problem that I hope to one day solve in a nice way that just
makes the svg images work without requiring the user to alter the
source.

>
> 2) I can only seem to edit an existing SVG image tiddler once without
> reloading the whole space (using svg-editor). I.e. I'll open the
> tiddler, click edit, make changes to the pic within SVG-edit, click
> the tiddler save button: fine. If I try to repeat this sequence,
> nothing happens when I try to save. Reloading the space allows makes
> the tiddler saveable once more -- but it's not ideal that way.
Could you provide clear instructions on how I can replicate this
problem? I can't seem to do this myself. Thanks!

>
> 3) (somewhat off-topic) I can't get the alt:"aTooltipText" syntax for
> <<image>> (described in [8]) to work. When I hover over my palette
> 'button', the tooltip I get is not "New SVG Tiddler" but "SVG Picture
> Editor - my_username date_&_time_stamp" which isn't so great. I
> checked whether the svg has its own <title>...</title>. It has
> <dc:title /> and <dc:title>the_author's_name</dc:title>. I don't know
> if these count, but in any case the_author's_name doesn't appear as a
> tooltip.

Could you point me to your palette image? It could have some meta data
in it that is causing this but I can't investigate without the context.

rakugo

unread,
Oct 20, 2010, 6:51:11 AM10/20/10
to TiddlyWeb


On 19 Oct, 13:16, Plausible <Verreh...@yahoo.com> wrote:
> As mentioned in [1] I do not find a 'new image button' after importing
> svg-editor [2] (nor on [2] itself). While this seems an error
> ultimately I'd like such a button to integrate with the neui-em theme
> [3] I'm using. While this is mostly up to Mario I decided to do some
> DIY to learn a bit. I modified the free image at [4] to give [5] which
> approximates a neui-em button. I uploaded this into a Palette.svg
> tiddler, then added

New-em defined it's own SideBarOptions tiddler. You will need to copy
the button http://svg-editor.tiddlyspace.com/#SideBarOptions into your
SideBarOptions.

PMario

unread,
Oct 20, 2010, 7:48:27 AM10/20/10
to TiddlyWeb
@Plausible
> New-em defined it's own SideBarOptions tiddler. You will need to copy
> the buttonhttp://svg-editor.tiddlyspace.com/#SideBarOptionsinto your
> SideBarOptions.

neui-em theme has some layout info, with links for easy access of
hidden tiddlers:
http://your-space-name.tiddlyspace.com/#GettingStarted

-m

Plausible

unread,
Oct 20, 2010, 7:13:52 PM10/20/10
to TiddlyWeb
> > 2) I can only seem to edit an existing SVG image tiddler once without
> > reloading the whole space (using svg-editor). I.e. I'll open the
> > tiddler, click edit, make changes to the pic within SVG-edit, click
> > the tiddler save button: fine. If I try to repeat this sequence,
> > nothing happens when I try to save. Reloading the space allows makes
> > the tiddler saveable once more -- but it's not ideal that way.
>
> Could you provide clear instructions on how I can replicate this
> problem? I can't seem to do this myself. Thanks!

I just checked and it doesn't depend on other stuff in my space: same
problem in a brand new sandbox space.

However I do not get the problem in Chrome. I do get it in FF3.6.10,
on 2 different computers. All this in Linux Mint. (Hm, FF is letting
me down... I wonder if there is a setting I should toggle... cf.
http://groups.google.com/group/tiddlywiki/browse_thread/thread/e2c90db1f8360226)

The sequence: 1) open tiddler, 2) click "Edit this tiddler" -> SVG-
edit opens within the tiddler-edit window, 3) draw something, 4) click
"save changes to this tiddler". Works fine. Optionally close and re-
open the tiddler (makes no difference). Repeat 2-3-4: now at 4 nothing
seems to happen at all, and the tiddler does not get saved. Reloading
the space after the first 1-2-3-4 sequence does allow me to repeat it.

> > 3) (somewhat off-topic) I can't get the alt:"aTooltipText" syntax for
> > <<image>> (described in [8]) to work. When I hover over my palette
> > 'button', the tooltip I get is not "New SVG Tiddler" but "SVG Picture
> > Editor - my_username date_&_time_stamp" which isn't so great. I
> > checked whether the svg has its own <title>...</title>. It has
> > <dc:title /> and <dc:title>the_author's_name</dc:title>. I don't know
> > if these count, but in any case the_author's_name doesn't appear as a
> > tooltip.
>
> Could you point me to your palette image? It could have some meta data
> in it that is causing this but I can't investigate without the context.

http://www.sendspace.com/file/h5nehr

cheers,

~P

rakugo

unread,
Oct 21, 2010, 5:44:36 AM10/21/10
to TiddlyWeb

> The sequence: 1) open tiddler, 2) click "Edit this tiddler" -> SVG-
> edit opens within the tiddler-edit window, 3) draw something, 4) click
> "save changes to this tiddler". Works fine. Optionally close and re-
> open the tiddler (makes no difference). Repeat 2-3-4: now at 4 nothing
> seems to happen at all, and the tiddler does not get saved. Reloading
> the space after the first 1-2-3-4 sequence does allow me to repeat it.

Perfect. With that information I have been able to fix the problem.
Should now work.
Jon

Plausible

unread,
Oct 21, 2010, 6:53:04 AM10/21/10
to TiddlyWeb
> Perfect. With that information I have been able to fix the problem.
> Should now work.
> Jon

It does work :) Yet something else broke? From <<svgedit>>, clicking
'save as' gets me the dialog window asking for a tiddler name, but
after I enter one and click OK, nothing happens; no tiddler is
created. This in FF again, not sure about Chrome.

~P
Reply all
Reply to author
Forward
0 new messages