Questions on SVG on TiddlySpace

[Plausible]

Hello,

I continue my newbie's ramble in TiddlySpace, this time through
'image' area.

I understand how to get images in a tiddler like so:
http://glossary.tiddlyspace.com/#[[image%20tiddlers]]

But:
1) Using <<image myImageTiddler width:xx height:yy>>, for a bitmap
image width and height seem to /scale/, whereas for an SVG they seem
to /crop/. Is that right? How to scale SVG?

2) How does one use EditTemplateFieldsPlugin to set the
"server.content-type" field manually? Is this considered a bit of a
hack? It would seem faster than using <<binaryUpload>> if you have the
image as a base64 string rather than a local file.

3) Using the cool SVG Editor (http://alexhough.tiddlyspace.com/#[[SVG
%20Editor]]%20Diagram) in my space when I hit "create new SVG tiddler"
and copy the drawing's source there, the tiddler doesn't show as an
image (but rather as the code). Is it because it's missing the image
flag in the server.content-type field?

4) I was rather hoping for a plugin that allows editing an SVG image
already present in the space. As in: I have a tiddler about a party
that incorporates an SVGimage tiddler with two balloons (or bottles).
Let's party harder. I click on 'open' (button next to the image in the
party tiddler?); this opens the image in an editor where I add dozens
of balloons/bottles; I hit 'save' (somewhere), and the plugin takes
care of putting the modified code in the existing SVGimage tiddler. Is
something like this possible?

cheers,

~P

[rakugo]

On 11 Oct, 01:13, Plausible <Verreh...@yahoo.com> wrote:
> Hello,
>
> I continue my newbie's ramble in TiddlySpace, this time through
> 'image' area.
>
> I understand how to get images in a tiddler like so:http://glossary.tiddlyspace.com/#[[image%20tiddlers]]
>

Great!!

> But:
> 1) Using <<image myImageTiddler width:xx height:yy>>, for a bitmap
> image width and height seem to /scale/, whereas for an SVG they seem
> to /crop/. Is that right? How to scale SVG?
>

It should scale the svg as well. SVG images seem to behave differently
on different browsers. Can you point me to the image in question so I
can see what is going on?

> 2) How does one use EditTemplateFieldsPlugin to set the
> "server.content-type" field manually? Is this considered a bit of a
> hack? It would seem faster than using <<binaryUpload>> if you have the
> image as a base64 string rather than a local file.

You need to include the <<editFields>> macro in your edit template.
This will create an "add new field" in your edit template. Click it to
create a new row and on the left put server.content-type (the field
name) and on the right image/svg+xml
I use this method quite a lot... whether it's a hack or meant to do
that I'm not sure (maybe fnd can comment)

>
> 3) Using the cool SVG Editor (http://alexhough.tiddlyspace.com/#[[SVG
> %20Editor]]%20Diagram) in my space when I hit "create new SVG tiddler"
> and copy the drawing's source there, the tiddler doesn't show as an
> image (but rather as the code). Is it because it's missing the image
> flag in the server.content-type field?
>

Exactly. Otherwise it has no idea your want it displayed as an image.
The system could guess here (ie. look for the svg tags) but this might
lead to weird unexpected consequences for the user so we left it as
being something you have to say explicility.

> 4) I was rather hoping for a plugin that allows editing an SVG image
> already present in the space. As in: I have a tiddler about a party
> that incorporates an SVGimage tiddler with two balloons (or bottles).
> Let's party harder. I click on 'open' (button next to the image in the
> party tiddler?); this opens the image in an editor where I add dozens
> of balloons/bottles; I hit 'save' (somewhere), and the plugin takes
> care of putting the modified code in the existing SVGimage tiddler. Is
> something like this possible?
>

It's definitely possible. One could imagine getting the svg edit
application (the one used in alex's space) [1] to work as an edit
template (only for tiddlers with the server.content-type field set to
image/svg+xml and loading the existing svg file and then saving it
when finished. You would need to get this running on a tiddlyspace (I
had a go but it proved too problematic as there are lots of file
dependencies which have to have a certain namespace). I've been
meaning to make something basis for a while but just haven't had the
time :/

Good luck with the imaging!
Jon

[1] http://code.google.com/p/svg-edit/
> cheers,
>
> ~P

[FND]

> whether [manually adding a content type field is] a hack [...] I'm
> not sure

I don't think it's a hack at all - why would it be?

In order to not burden the user with technical details, one could use
the NewTiddler macro to create a New Image button which automatically
sets that field - or better yet, a dedicated plugin with all sorts of
bells and whistles for SVGs.

-- F.

[Tobias Beer]

re 2)

Instead of putting something into your ViewTemplate (which is
perfectly fine) you could alternatively use an editor for fields...

http://tobibeer.tiddlyspace.com/#FE2

or the original which it is based on...

http://visualtw.ouvaton.org/VisualTW.html#FieldsEditorPlugin


Cheers, Tobias.

[Tobias Beer]

While at it, the ability to choose from a given set of predefined
fieldnames via some dropdown for adding a new one to a tiddler might
come in very handy for a fields editor.

If I get at it, I'll integrate this into it.

Cheers, Tobias.

[Tobias Beer]

Where would one find the official distribution / documentation for
EditTemplateFieldsPlugin?

Cheers, Tobias.

[colmjude]

On Oct 11, 11:04 am, Tobias Beer <beertob...@googlemail.com> wrote:
> re 2)
>
> Instead of putting something into your ViewTemplate (which is
> perfectly fine) you could alternatively use an editor for fields...
>

The plugin Jon refers to does actually go in the EditTemplate. You
just need to put the following in it.
<div macro="editFields"></div>

> Where would one find the official distribution / documentation for
> EditTemplateFieldsPlugin?

I got a version of it from jon's personal space. Found it hiding in
his excludeLists tag list.
There doesn't seem to be any documentation but there aren't any
options to set anyway. Just need to put <<editFields>>

colm

[Tobias Beer]

That's neat and painless!

Two things for Jon...

1) Would be nice if the "field editing panel" would slide down by
clicking a button ...used when an optional label (+tooltip) were
specified, e.g.

<<editFields "Edit fields" "Click to show / edit tiddler fields...">>

I guess there's no need to close the panel once opened.

2) There might be fields containing linebreaks... which should be
rendered into textareas.

Cheers, Tobias.

[Plausible]

A couple of mix&match replies:

> It should scale the svg as well. SVG images seem to behave differently
> on different browsers. Can you point me to the image in question so I
> can see what is going on?

http://scarsandbox.tiddlyspace.com/#Dragon
http://scarsandbox.tiddlyspace.com/#[[Show%20that%20dragon]]

Just some random picture off the web.

> You need to include the <<editFields>> macro in your edit template.

> The plugin Jon refers to does actually go in the EditTemplate. You
> just need to put the following in it. <div macro="editFields"></div>

Right... got it.

> Instead of putting something into your ViewTemplate (which is
> perfectly fine) you could alternatively use an editor for fields...

> http://tobibeer.tiddlyspace.com/#FE2

Tried this too: it seems more elegant than forcing the field editor
onto every tiddler.

> I don't think it's a hack at all - why would it be?

To an end user like me, it seems a complicated procedure, having to
import EditTemplateFieldsPlugin, then edit EditTemplate (which I
couldn't have done without the above spoonfeeding)... maybe not a
'hack' but not obvious... :/

> In order to not burden the user with technical details, one could use
> the NewTiddler macro to create a New Image button which automatically
> sets that field - or better yet, a dedicated plugin with all sorts of
> bells and whistles for SVGs.

That'd be a lot easier :)

> > 4) I was rather hoping for a plugin that allows editing an SVG image
> > already present in the space.
>

> It's definitely possible. One could imagine getting the svg edit
> application (the one used in alex's space) [1] to work as an edit
> template (only for tiddlers with the server.content-type field set to
> image/svg+xml and loading the existing svg file and then saving it
> when finished. You would need to get this running on a tiddlyspace (I
> had a go but it proved too problematic as there are lots of file
> dependencies which have to have a certain namespace). I've been
> meaning to make something basis for a while but just haven't had the
> time :/

Yes, in terms of user-friendliness it would be ideal if editing an
image tiddler is much like editing a text tiddler. No idea how the TW
code could tell SVG Edit (or a similar app) to /load/ the current
image (or save it /back to the TW/), but what do I know. It'd be
superplusgood if editing a bitmap image tiddler would follow a similar
procedure, but I don't see any sort of loading functionality in e.g.
mrdoob.com/projects/harmony or http://mugtug.com/sketchpad/

cheers,

~P

[FND]

> There might be fields containing linebreaks... which should be
> rendered into textareas.

This should not be encouraged IMO.

-- F.

[rakugo]

You can find it at:
http://first-class-fields.tiddlyspace.com/
However currently it comes with an upgraded version of filterTiddlers
which filters fields which you may not want. I should probably create
a separate space for this plugin.

I did this as a quick hack so haven't paid much attention to the
plugin but would be happy to upgrade it if required.
You can probably do the slider thing already by putting
<div macro="slider chkFieldsEditor EditFieldsTemplate"></div> in your
EditTemplate and then putting <<editFields>> in a tiddler called
EditFieldsTemplate.
Report back to me if that works :)

Looking and allowing for line breaks is a great idea. I'll do that
straight away.
Jon

[FND]

> [field values with line breaks] should not be encouraged IMO

I should probably elaborate a bit:

The tiddler concept encourages human control. Slices, for example, are a
simple way for regular users to enter key-value data - they just need to
edit the tiddler body. In contrast, fields operate on a different layer.

This does not mean that fields are evil - it just means they should not
be overused/abused. Generally, I tend to reserve fields for programmatic
data that is not meant to be touched by users (content type falls into
the former category as well, which is why a dedicated interface is
better than setting the field manually).

-- F.

[Tobias Beer]

Hi Jon,

1) Looking forward to seeing editable multiline fields!

2) Using a slider as you suggest would show the fields of the tiddler
EditFieldsTemplate, though it would edit and save them on the one
being edited ...not good!

So, the handler needs a little adjustment. Something which would do
really well as a (somewhat overdue) enhancement to the core function
findContainingTiddler() ...which is to (alternatively) return the root
tiddler of a transclusion cascade as a STORE object, instead of the
DOM element.

Here's what the handler would need to look like to work in a slider:

var tid=story.findContainingTiddler(place);
tid=tid?store.getTiddler(tid.getAttribute('tiddler')):null;
this.createInterface(place,tid);

Eventually, findContainingTiddler might be enhanced such that if one
specified a second parameter - maybe as 'true' - one would be given a
store object:

var oTid=story.findContainingTiddler(place,true);

Or even better, if one specified anything other than 'true' one would
be given the corresponding field of that store object, e.g.

var when=story.findContainingTiddler(place,'modified');

Which might still be null if there was no such store object (yet). If
a modification of findContainingTiddler were not possible, it may be
worth the while to implement this as
story.getRoot(ofElement,returnWhat);

Cheers, Tobias.

[Tobias Beer]

Hi FND,

Indeed a valid point to, in general, encourage avoiding to use fields
as first class gui members. However, here come the buts...

For one, using EditTemplateFieldsPlugin already means that one needs
to edit in general programatically accessed data. If - for whatever
reason - one of these fields contained linebreaks and it were edited
in a currently used input element of EditTemplateFieldsPlugin, chances
are that one (not even intentionally) saves corrupt data back to the
tiddler field.

Secondly, I think linebreaks in fields can be quite useful
programmatically, not just as separators for its contents but also to
improve readability when looking at the standard fields popup.

Lastly, if I needed multiline data attached to a tiddler I would not
want to create some 'associated tiddler'. Nor would I find structured
data (not directly used as displayed content) to be well situated in
some vulnerable /%data section%/ in the tiddler's body ...unless, of
course, we're talking about 'simple, editable content' in the form of
slices or sections transcluded 'as is' (with the occasional
placeholder).

To conclude, it might be beneficial for EditTemplateFieldsPlugin to
also provide an optional 'fields accessor' that made sure that one
could only edit fields that have been explicitly declared in some form
as being editable ones, e.g. a bracketedList declared in a
EditTemplateFieldsConfig, thus:

<<editFields config:EditTemplateFieldsConfig>>

Cheers, Tobias.

[Alex Hough]

The "create new SVG tiddler" just tags the tiddler with SVG. It was a
feature I added jsut for saving the data, But i thought that it would
be good to be able to add a tiddler with a specified field, like this:

<<newTiddler
tag:"SVG"
field: "server.content-type=SVG"
>>

In other words add the field required in the new tiddler macro

Alex

[PMario]

hi,

On Oct 11, 3:32 pm, Plausible <Verreh...@yahoo.com> wrote:
> > It should scale the svg as well. SVG images seem to behave differently
> > on different browsers. Can you point me to the image in question so I
> > can see what is going on?
>
> http://scarsandbox.tiddlyspace.com/#Dragon
> http://scarsandbox.tiddlyspace.com/#[[Show%20that%20dragon]]

I am not sure if you fixed the height, width problem allready. You
only need to save as: "optimized inkscape svg". Then everything will
work fine. If you have a look at a standard inkscape.svg with a text
editor, you'll see, there is a lot of inkscape specific metacrap,
which seems to confuse the <<image>> macro and makes tw fat.

@jon: I think, that this is a bug and not a feature and the solution
is a workaround.

regards
Mario

[Tobias Beer]

The scaling problem seems to have something to do with how the
Dragon.svg itself is defined. At least, I have tried the introductory
svg from the wikipedia article and it scaled fine. Maybe your dragon
has some fixed width or height or some min-width or height associated
with it.

Cheers, Tobias.