base64 encoded macro buttons?

[wolfgang]

Hi to everyone,

with IconMacro it's possible to use an image as the button for macros:

http://tw.lewcid.org/#IconMacro

However, this macro doesn't work with base64 text-encoded pics.

Is there an other way for this case?

regards,

W.

[Eric Shulman]

> with IconMacro it's possible to use an image as the button for macros:
> http://tw.lewcid.org/#IconMacro
> However, this macro doesn't work with base64 text-encoded pics.

IconMacro is intended to invoke toolbar commands, not "macros"... and,
even without trying to use a base64 encoded image, it doesn't work
properly for toolbar commands that invoke popups (such as 'references'
or 'jump').

> Is there an other way for this case?

Try this...

1) Using:
http://www.TiddlyTools.com/#AttachFilePlugin
http://www.TiddlyTools.com/#AttachFilePluginFormatters
create an 'attachment tiddler' (e.g., [[SomeImage]]) containing the
base64 encoded image.

2) Using
http://www.TiddlyTools.com/#InlineJavascript
create a tiddler (e.g., [[SomeCommand]]), containing something like:
------------------
<<toolbar jump>><script>
var src=config.macros.attach.getAttachment("SomeImage");
place.lastChild.innerHTML="<img src='"+src+"'>";
</script>
------------------

3) Add SomeCommand to your ViewTemplate toolbar, like this:
<span class='toolbar' macro='tiddler SomeCommand'></span>

Note also that this technique could be used to invoke *macros* as well
as toolbar commands (at least, macros that create clickable links,
such as <<saveChanges>> or <<upload>>) simply by replacing "<<toolbar
jump>>" with the desired macro, e.g.,:
------------------
<<saveChanges>><script>
var src=config.macros.attach.getAttachment("AttachFileSample");
place.lastChild.innerHTML="<img src='"+src+"'>";
</script>
------------------

HTH,
-e

[Eric Shulman]

> <<saveChanges>><script>
> var src=config.macros.attach.getAttachment("AttachFileSample");
> place.lastChild.innerHTML="<img src='"+src+"'>";
> </script>

addendum:

if you are using normal *external* images (as opposed to attached
base64-encoded images), you can write the src reference directly into
the inline script, like this:

<<saveChanges>><script>
place.lastChild.innerHTML="<img src='filename.gif'>";
</script>

-e

[wolfgang]

Thanks Eric, for your quick response,

I didn't had much time to test this inlinescript - and then I tried it
the wrong way with your new core tweak, where one can specify commands
as slice reference in the ToolbarCommands tiddler of the new 2.4 TW
version. That didn't work - and error messages appeared instead of the
commands.

Only by using it in the ViewTemplate itself, as you've pointed out:
__________

<div class="toolbar">
<span class='toolbar' macro='tiddler Jump'></span>
<span class='toolbar' macro='tiddler DeleteTiddler'></span>
<span class='toolbar' macro='tiddler CloseOthers'></span>
<span class='toolbar' macro='tiddler CloseTiddler'></span>
<span class='toolbar' macro='tiddler EditTiddler'></span>
</div>
__________

- the toolbar command icons do show. But with the big flaw that
deleteTiddler would only delete the DeleteTiddler tiddler,
closeTiddler closes only the CloseTiddler tiddler, editTiddler only
opens EditTiddler tiddler in edit mode - and only jump is working
alright.

> IconMacro is intended to invoke toolbar commands, not "macros"... and,
> even without trying to use a base64 encoded image, it doesn't work
> properly for toolbar commands that invoke popups (such as 'references'
> or 'jump').

Not quite. As can be seen at http://tw.lewcid.org/#HoverMenu - where
the jump command with an icon as button does open the usual jump
popup. Therefore, IconMacro would work very well with toolbar commands
as well as real macros (tried it with newTiddler and saveChanges).
Only with AttachmentFilePluginFormatters base64 encoded pictures it
doesn't.

However, I would really prefer your inline script version with base64
encoded icons - since it would make it possible to keep those graphics
within a self contained TW.

Regards,

W.

[wolfgang]

Thanks Eric, for your quick response,

I didn't had much time to test this inlinescript - and then I tried it
the wrong way with your new core tweak, where one can specify commands
as slice reference in the ToolbarCommands tiddler of the new 2.4 TW
version. That didn't work - and error messages appeared instead of the
commands.

Only by using it in the ViewTemplate itself, as you've pointed out:
__________

<div class="toolbar">
<span class='toolbar' macro='tiddler Jump'></span>
<span class='toolbar' macro='tiddler DeleteTiddler'></span>
<span class='toolbar' macro='tiddler CloseOthers'></span>
<span class='toolbar' macro='tiddler CloseTiddler'></span>
<span class='toolbar' macro='tiddler EditTiddler'></span>
</div>
__________

- the toolbar command icons do show. But with the big flaw that
deleteTiddler would only delete the DeleteTiddler tiddler,
closeTiddler closes only the CloseTiddler tiddler, editTiddler only
opens EditTiddler tiddler in edit mode - and only jump is working
alright.

> IconMacro is intended to invoke toolbar commands, not "macros"... and,
> even without trying to use a base64 encoded image, it doesn't work
> properly for toolbar commands that invoke popups (such as 'references'
> or 'jump').

Not quite. As can be seen at http://tw.lewcid.org/#HoverMenu - where
the jump command with an icon as button does open the usual jump

popup. Therefore IconMacro would work very well with toolbar commands
as well as with real macros (tried it with newTiddler and

[Eric Shulman]

> <div class="toolbar">
> <span class='toolbar' macro='tiddler Jump'></span>
> <span class='toolbar' macro='tiddler DeleteTiddler'></span>
> <span class='toolbar' macro='tiddler CloseOthers'></span>
> <span class='toolbar' macro='tiddler CloseTiddler'></span>
> <span class='toolbar' macro='tiddler EditTiddler'></span>
> </div>

> - the toolbar command icons do show. But with the big flaw that
> deleteTiddler would only delete the DeleteTiddler tiddler,
> closeTiddler closes only the CloseTiddler tiddler, editTiddler only
> opens EditTiddler tiddler in edit mode - and only jump is working
> alright.

hmm... that's a problem! I'll see what I can do....

> > IconMacro is intended to invoke toolbar commands, not "macros"... and,
> > even without trying to use a base64 encoded image, it doesn't work
> > properly for toolbar commands that invoke popups (such as 'references'
> > or 'jump').
>

> Not quite. As can be seen athttp://tw.lewcid.org/#HoverMenu- where

> the jump command with an icon as button does open the usual jump
> popup. Therefore, IconMacro would work very well with toolbar commands
> as well as real macros (tried it with newTiddler and saveChanges).

Actually, in HoverMenu, the jump icon triggers the <<jump>> **macro**
defined in HoverMenuPlugin, so it isn't really invoking the real
toolbar **command** either...

> However, I would really prefer your inline script version with base64
> encoded icons - since it would make it possible to keep those graphics
> within a self contained TW.

Agreed... the challenge is getting it to work properly!

-e

[Eric Shulman]

> > - the toolbar command icons do show. But with the big flaw that
> > deleteTiddler would only delete the DeleteTiddler tiddler,
> > closeTiddler closes only the CloseTiddler tiddler, editTiddler only
> > opens EditTiddler tiddler in edit mode - and only jump is working
> > alright.
>
> hmm... that's a problem! I'll see what I can do....

I've updated the tweak for ticket #609/#610 ('toolbar includes') so
that the correct tiddler context is used
http://www.TiddlyTools.com/#CoreTweaks

> > However, I would really prefer your inline script version with base64
> > encoded icons - since it would make it possible to keep those graphics
> > within a self contained TW.
>
> Agreed... the challenge is getting it to work properly!

In combination with the above update to CoreTweaks, I've also updated
TiddlyTools' ToolbarCommands to include section-based inline scripts
to set toolbar command icons using base64-encoded attachments.
http://www.TiddlyTools.com/#ToolbarCommands

Hopefully, you can follow what I've done...

-e

[wolfgang]

Hi Eric,

> Hopefully, you can follow what I've done...

- first these core tweaks bring real ease in adapting the templates -
next, due to much more complex possible adaptations - it gets really
too complicated. At least for me, and - despite much error searching -
I haven't been able to get it going, lol.

One suggestion though. - I think icons make the most sense with only a
view easily distinguishable commands, otherwise they are even more
confusing. Especially to a newbie to such complex TiddlyWikis with so
many commands as TiddlyTools.

Therefore I think it would make most sense if the option for icons as
toolbar commands would be possible to be selected via
SwitchThemePlugin only.

thanks for all your efforts,

W.

[Eric Shulman]

> next, due to much more complex possible adaptations - it gets really
> too complicated. At least for me, and - despite much error searching -
> I haven't been able to get it going, lol.

I'm going to refactor the 'setToolbarIcon' and 'setSliderIcon' scripts
into separate tiddlers to make their usage a bit more straighforward.
Perhaps that will help (... but perhaps not :-)

> One suggestion though. - I think icons make the most sense with only a
> view easily distinguishable commands, otherwise they are even more
> confusing. Especially to a newbie to such complex TiddlyWikis with so
> many commands as TiddlyTools.

I agree. Personally, I prefer the use of simple text labels over
icons. It just seems less obscure and easier to understand.

> Therefore I think it would make most sense if the option for icons as
> toolbar commands would be possible to be selected via
> SwitchThemePlugin only.

Currently, you can switch between icons or text-only toolbar items by
setting/clearing the "use toolbar icons" checkbox in the TiddlyTools
options menu (defined in SiteMenuOptions). You can initialize the
default setting by:
config.options.chkToolbarIcons=false;

I left the toolbar icons enabled by default so you could see them in
action, but I'm going to turn them off again for the sake of clarity.

-e

[wolfgang]

Thanks again Eric,

> I'm going to refactor the 'setToolbarIcon' and 'setSliderIcon' scripts
> into separate tiddlers to make their usage a bit more straighforward.
> Perhaps that will help (... but perhaps not :-)

it did help - and really works great!

Just three more questions ;-)

I tried to append the following to get a similar effect as in the
sidebar at http://bradleymeck.tiddlyspot.com/

<script>place.lastChild.style.verticalAlign="middle";place.lastChild.style.textAlign="left";</
script>

- but this doesn't works.

1) Is there an other way to the same end?

2) Would it be also possible to set icons for <<tiddler ...>>
InstandBookmarklets scripts?

3) At TiddlyTools the SetTiddler tiddler shows no content in ViewMode.
But in my TW it displays this massage: "TypeError: btn has no
properties"
- why is it displayed differently?

Regards,

W.

[Eric Shulman]

> I tried to append the following to get a similar effect as in the

> sidebar athttp://bradleymeck.tiddlyspot.com/

>
> <script>place.lastChild.style.verticalAlign="middle";place.lastChild.style.textAlign="left";</
> script>
>
> - but this doesn't works.
>
> 1) Is there an other way to the same end?

I've added style="vertical-align:middle" to the generated <img> tag
for the icon to produce a more balanced appearance. However, the left
vs. right alignment of the accompanying text label is not controlled
by CSS attributes, so it isn't currently possible to put the text
*before* the icon. However, I will think about how to do this and
will probably have an update soon...

> 2) Would it be also possible to set icons for <<tiddler ...>>
> InstandBookmarklets scripts?

> 3) At TiddlyTools the SetIcon tiddler shows no content in ViewMode.

> But in my TW it displays this massage: "TypeError: btn has no
> properties" - why is it displayed differently?

Not sure why it is different in your TW... but that error should not
be appearing, as there is a check for
if (!btn) return;
within the code to ensure that a valid element was located. This was
added in v1.2.0 of the SetIcon script. Perhaps you imported an
earlier version? (There have been several updates during the day, as
I find small issues to tweak...)

In any event, I've just updated the script again to use a completely
different method of locating the link ("A" element) to which the icon
should be added. As a result, the above error should no longer
occur... and, in addition, it will now support adding an icon to ANY
links, regardless of how it is created, including: TiddlyLinks (to
tiddlers or URLs), macros that create links (including the <<toolbar>>
and <<slider>> macros), nested sliders, inline 'onclick' scripts, and
even explicit HTML <A> tags. Thus, any of the following will work:

[[TiddlerName]]<<tiddler SetIcon ...>>
<<toolbar ...>><<tiddler SetIcon ...>>
+++[label]...===<<tiddler SetIcon ...>>
<script label="...">...</script><<tiddler SetIcon ...>>
<html><a href="...">...</a></html><<tiddler SetIcon ...>>

enjoy,
-e

[wolfgang]

> enjoy,
> -e

I really do!

> ... This was added in v1.2.0 of the SetIcon script. Perhaps

> you imported an earlier version?

Indeed, mine was v.1.1.0

but with the newest v.1.3.0 I get the curious error message within the
SetIcon tiddler:

[Exception... "Index or size is negative or greater than the allowed
amount" code: "1" nsresult: "0x80530001 (NS_ERROR_DOM_INDEX_SIZE_ERR)"
location: "file:///C:/ ... /empty.html Line: 9653"]

I cecked line 9653 and it was within DomTweaksPlugin, so I imported it
anew. However, this error message repeats again indicating a few lines
further - and so on, whenever I replace what's on that line within the
store area!?

So I tried it with v.1.2.0 of SetIcon script. And with this works
(while with v.1.3.0 an icon on a slider didn't show) without
displaying anything in the SetIcon tiddler!.

Any idea what this error message with SetIcon v.1.3.0 could mean?

W.

[Eric Shulman]

> but with the newest v.1.3.0 I get the curious error message within the
> SetIcon tiddler:
>
> [Exception... "Index or size is negative or greater than the allowed
> amount" code: "1" nsresult: "0x80530001 (NS_ERROR_DOM_INDEX_SIZE_ERR)"
> location: "file:///C:/ ... /empty.html Line: 9653"]
>

> I checked line 9653 and it was within DomTweaksPlugin, so I imported it

This error is caused if there is no "A" element found. I've corrected
the code so that it no longer occurs (the script will simply exit
without doing anything... as it was intended to!)

Note: Because the javascript is being 'eval'-ed dynamically, the
browser's javascript processor gets confused and reports a spurious
line # that does *not* actually correspond to the source location of
the error. Thus, the line # reported in the error is meaningless and
should be ignored.

> So I tried it with v.1.2.0 of SetIcon script. And with this works
> (while with v.1.3.0 an icon on a slider didn't show) without
> displaying anything in the SetIcon tiddler!.

In addition to the above fix, I also changed the script 'tiddler
parameters' and global configuration options to provide better
flexibility:

<<tiddler SetIcon with: image css>>

Where "image" is either a reference to an attachment tiddler or an
external URL (that can be relative or absolute), and "css" is an
*optional* string of CSS style attributes to be applied to the image.

The global configuration options for the script are:

config.options.chkIconsShowImage (default=true)
- TRUE=add image to link text, FALSE=leave link text as-is

config.options.chkIconsShowText (default=true)
- TRUE=show link text next to image, FALSE=show image only

config.options.txtIconsCSS (default="vertical-align:middle")
- as noted above, use to apply styles to the image (such as "width:
32px").
This option is applied only when the "css" tiddler parameter is not
present

Lastly, there is a subtle, but very important issue when using the
following syntax:
<<tiddler SomethingWithALink>><<tiddler SetIcon ...>>
or
<html><a href="...">...</a></hmtl><<tiddler SetIcon ...>>

Please read the documentation contained with th source of the SetIcon
script for details...

Get the latest update (v1.4.0) here:
http://www.TiddlyTools.com/#SetIcon

enjoy,
-e

[wolfgang]

Thank you so much. Now it works perfectly. :-)

I really appreciate your efforts explaining things in detail too.

W.

[Eric Shulman]

> Thank you so much. Now it works perfectly. :-)
> I really appreciate your efforts explaining things in detail too.

Although I know that you are fond of using inline scripts, you might
appreciate this as well...

This particular script has become bit more complex than I originally
envisioned and has also grown somewhat bigger than expected
(especially with the included documentation).

In addition, I often start out writing code as an inline script simply
for rapid prototyping purposes, and then convert to a plugin after
testing and refining the feature set and error handling.

As a consequence, I've converted the [[SetIcon]] script to a true
plugin and moved the documentation to a separate tiddler. This has
several notable advantages over the inline script version:

1) The plugin code is a bit more efficient since it doesn't require
the string substitution processing to replace the $1 and $2 parameters
each time it is invoked. When there are lots of icons, this speed
savings can be even more pronounced.

2) The plugin code is considerably smaller than the inline script (now
just 2822 bytes as a plugin vs 4135 bytes as an inline script with
embedded documentation).

3) The documentation is wiki-formatted, making it much easier to read,
as well as rendering actual examples to help make things more
understandable. Also, because it has been separated from the plugin,
I was able to add more details without causing the installable plugin
tiddler to get any bigger.

Get the latest version (1.5.0) here:
http://www.TiddlyTools.com/#SetIconPlugin
http://www.TiddlyTools.com/#SetIconPluginInfo

Note: The plugin version completely supersedes the the previous
[[SetIcon]] inline script which has been removed from distribution on
TiddlyTools.com.

enjoy,
-e

[Eric Shulman]

wolfgang wrote:
> I tried to append the following to get a similar effect as in the

> sidebar at http://bradleymeck.tiddlyspot.com/

> <script>place.lastChild.style.verticalAlign="middle";place.lastChild.style.textAlign="left";</
script>
> - but this doesn't works.
> 1) Is there an other way to the same end?

SetIconPlugin has been updated to add an optional parameter to specify
the icon position, relative to the link text. The default value is
"left" (i.e., text follows image). Specify keyword "right" to have
the image follow the text.

Get the latest version (1.6.0) here:
http://www.TiddlyTools.com/#SetIconPlugin
http://www.TiddlyTools.com/#SetIconPluginInfo

I think that, with this last update, SetIconPlugin now provides
everything you've requested (and then some!)

enjoy,
-e

[wolfgang]

Hi Eric,

> 1) The plugin code is a bit more efficient since it doesn't require
> the string substitution processing to replace the $1 and $2 parameters
> each time it is invoked. When there are lots of icons, this speed
> savings can be even more pronounced.
>
> 2) The plugin code is considerably smaller than the inline script (now
> just 2822 bytes as a plugin vs 4135 bytes as an inline script with
> embedded documentation).
>
> 3) The documentation is wiki-formatted, making it much easier to read,
> as well as rendering actual examples to help make things more
> understandable. Also, because it has been separated from the plugin,
> I was able to add more details without causing the installable plugin
> tiddler to get any bigger.
>

> I think that, with this last update, SetIconPlugin now provides
> everything you've requested (and then some!)

indeed, much more than I've wished for. And your high quality
documentation is really necessary with this - otherwise quite
confusing - use of tiddler -section or -slice inclusion.

I appreciate ... and also applaud the Indian way :-)

_/\_

Namaskar,

w.