'Triptych' theme: almost there? [TiddlySpace]

[Kosmaton]

Hello,

I reworked, mostly under the hood, the experimental
http://sndbxy1.tiddlyspace.com into what should be a proper theme at
http://triptych-theme.tiddlyspace.com. It is based on Mario's NeUIem
theme. It features a clickable central image map, and left and right
sidebars that can be unlocked (expanding upon mouse hover) and locked
(which makes them resizable).

Some remaining issues, help appreciated:

0a.
It's more a theme template than a fully-upholstered theme. I decided
this is the best option since it requires some user customisation in any
case for the image map [1]. I will add some guidelines for customisation
in About. Also, [2].

1.
I would like the user of the theme to be able to set different values
for the width of TiddlerDisplay (now 94% of browser window width) and
the height of the sidebars (now 85% of window height).
* the 0.85 value is currently hard-coded in three different plugins used
by the theme; (how) can I use a global variable of sorts for this?
* how to make an interface so that the theme-user can set these values
without digging into the code?

2.
For overlap reduction reasons, I need to have the backstage icon trimmed
and moved. In my custom StyleSheetTriptych I have:

#backstageShow {
height: 35px;
width: 40px;
}
#backstageShow .svgIcon {
left: -12px;
top: -5px;
}

While height and width 'work', left and top don't. As it is now I've
altered these directly in StyleSheetBackstage. That works, but since it
created a Triptych-specific copy of StyleSheetBackstage, future updates
by Osmosoft to that tiddler won't percolate, I suppose. Any ideas?

3a.
The theme uses its own StyleSheetTriptych which is linked to by its own
(otherwise empty) StyleSheet. This is fine if the including space has no
custom StyleSheet of its own yet, but not if it does. What's the way to
deal with this?
3b.
Same thing for the About tiddler.

4. @Mario
Can/should I rename the NeUIemTheme tiddler somehow to make clear it is
a modified version?

cheers,

Kosmaton

[1] This theme is kind of a template, and will require a bit of
customisation from the user. If anyone can write a wizard for the
process of uploading images and choosing clickable areas for the image
map, go for it.
[2] Since the plugins are built on top of NeUI-em and the modified
PageTemplate, you can't just import them in any TW to get the funky
sidebar behaviour. This is unfortunate. Feel free to improve on this,
somehow!

[Eric Shulman]

> I would like the user of the theme to be able to set different values
> for the width of TiddlerDisplay (now 94% of browser window width) and
> the height of the sidebars (now 85% of window height).
> * the 0.85 value is currently hard-coded in three different plugins used
> by the theme; (how) can I use a global variable of sorts for this?
> * how to make an interface so that the theme-user can set these values
> without digging into the code?

You can embed an text option input into tiddler content:
<<option txtSomeName>>
Then, in your code, you can refer to
config.options["txtSomeName"]

> If anyone can write a wizard for the process of

> ... choosing clickable areas for the image map, go for it.

http://www.TiddlyTools.com/#ImageMapPlugin

enjoy,
-e
Eric Shulman
TiddlyTools / ELS Design Studios
----------
Was this answer useful? If so, please help support TiddlyTools:

TiddlyTools direct contributions: (paypal)
http://www.TiddlyTools.com/#Donate
UnaMesa tax-deductible contributions:
http://about.unamesa.org/Participate (paypal)
TiddlyWiki consulting:
http://www.TiddlyTools.com/#ELSDesignStudios
http://www.TiddlyTools.com/#Contact

[PMario]

On Mar 5, 4:05 pm, Kosmaton <Kosma...@gmx.com> wrote:
> 4. @Mario
> Can/should I rename the NeUIemTheme tiddler somehow to make clear it is
> a modified version?

Yes, you should do so. Some adjustments are needed :)
And you should update the header.

|''Name:''|[[yourThemeName]]|
|''Description:''|see [C]|
|''Original author:''|Mario Pietsch see [C] remove this|
|''Edited by:''|Kosmaton (Feb 2011)|
|''Generator:''| *remove this line see [A]|
|''Gen.Description:''| *remove this line [A]|
*|''PageTemplate:''|##PageTemplate|
*|''ViewTemplate:''|##ViewTemplate|
*|''EditTemplate:''|##EditTemplate|
**|''RevisionTemplate:''|yourThemeName##RevisionTemplate|
*|''StyleSheet:''|##StyleSheet|
|''UsedClones:''| see [B] |

* I marked the slices, which are needed by the core theme handler with
an asterisk !! You need to keep them!!
** needed by the core. Since the RevisionTemplate doesn't understand
"relative" section info, you need to update "yourThemeName"
accordingly. If not found the core will use the ViewTemplate. (if
ViewTemplate is used. The revert to revision x is gone)

=======
If you remove/rename NeUIemTheme tiddler, the default tiddler will be
activated again. Which makes it possible to switch themes on the fly,
if the <<selectTheme>> macro is available for the user. If not,
nothing happens :)

Goto [[zzConfig]] tiddler and set
config.options.txtTheme = "yourThemeName"

so it will be default automatically.

If you have a look at zzConfig you'll see, that you used
config.options.txtTheme = "NeUIemTheme03" until now.

http://triptych-theme.tiddlyspace.com/#NeUIemTheme03
links back to NeUIemTheme for PageTemplate, ViewTemplate ....
Only adds some CSS for the #sidebarTabs

So if you copy
#sidebarTabs .tabset{...}
#sidebarTabs .tabset:hover{...}
#sidebarTabs .tabset .tab{...}

including the CSS stuff to your "StyleSheetTriptych" it should work
fine.
=======

[A] remove these lines, since it is "hand made" now. The core theme
manager doesn't need this info.

[B] The clones section should be kept, because if something is
missing, it won't work propperly. I am working on this, to make the
list much shorter. And I think it is a nice list, to open all
dependencies. It made finding them a lot easier for me.

[C] insert your description there. It would be nice if you append
"derived from [[NeUIemTheme]] by Mario Pietsch" at the end. If someone
is interested, they can click it and get the original tiddler, with
all it's info and links. So you don't need to keep extra links to me.

=========
About the user StyleSheet. You should insert your StyleSheetTriptych
at the StyleSheet section of yourThemeName tiddler, because it belongs
there. So StyleSheet tiddler is a user only stylesheet again.

The end of the !StyleShee section should look like:
/*-- emastic System --*/
[[EmasticSystem]]

/*-- theme specific stuff --*/
[[StyleSheet_neui-em]]

/*-- your theme info text --*/
[[StyleSheetTriptych]]

/*-- call the standard StyleSheet --*/
[[StyleSheet]]

As I wrote, I am working on the stylesheet dependencies. But since
there are soooooo many dependencies it is quite hard to make it
smaller and keep some backwards compatibility.

have fun!
-m

[Tobias Beer]

re 3a) The way I intended this to work meaningfully for tbTheme is the
following...

The StyleSheet tiddler contains my theme styles yet at the very end a
link to a StyleSheetSpace tiddler which is what I recommend the user
to use INSTEAD of StyleSheet. This is to ensure that the theme
StyleSheet actually applies before anything else.

Cheers, Tobias.

[Kosmaton]

Hi all, thanks for your input.

Eric, good call, I imported the MapMaker part of your plugin into the
theme to make editing easier.

Mario, roger on all of that! Made changes as needed.

I wrote a detailed customisation guide at
http://triptych-theme.tiddlyspace.com/#[[About%20Triptych]]. All looks
well now except for that pesky backstage icon, cf. issue 2 in my
original post.

Anyone got thoughts on the latter? How come StyleSheetBackstage
overrules my custom style sheet for #backstageShow .svgIcon {...} but
not for #backstageShow {...} ?

cheers,

Kosmaton

[wolfgang]

Hi Kosmaton,

just discovered your amazing triptych theme. I really love its
minimized sidebars, their ability to get fixated, but overall for
being able to change their width by dragging - and at the same time
the display area automatically adjusting it's width accordingly.

However, once I downloaded the file I found that exactly this later
functionality - changing the width of the sidebars by dragging -
wasn't there anymore with the standalone file. What I'm missing?

[Kosmaton]

Hello Wolfgang,

Glad you like the theme, and thanks for reporting the issue. I just checked: I get the same error. I have a feeling it worked at some point, but I am not sure as I didn't focus on offline use.

When I load the page offline, I get notified that the TiddlyWebConfig plugin is not working right. Do you get that too?

Resizing functionality is based on 'jquery-ui-1.8.9.custom.min.js' which is included as a tiddler. From Chrome debugging output it seems that when offline, the browser looks for that file in the location of the .html file rather than fetch it from the tiddler. It does this for other files too, e.g. the images used in the centre of the page: these are also stored in tiddlers and also do not show offline. If I put a copy of the .js file as well as 'jquery-ui-1.8.9.custom.css' and 'ui-icons_222222_256x240.png' in the folder of the local file, resizing functionality is restored.

So my first guess is that the error with TiddlyWebConfig is breaking loading-from-tiddlers.

Could someone familiar with TiddlyWebConfig shed some light? The error log in the plugin manager reads:

Error: [Exception... "Component returned failure code: 0x805e000a [nsIXMLHttpRequest.open]" nsresult: "0x805e000a (<unknown>)" location: "JS frame :: file:///home/xxxxxxusernamexxxxx/Desktop/triptych-theme.html :: anonymous :: line 25586" data: no]

cheers,

Kosmaton

[wolfgang]

Thanks for the fast response,

On 27 Apr., 14:41, Kosmaton <Kosma...@gmx.com> wrote:
> When I load the page offline, I get notified that the TiddlyWebConfig plugin
> is not working right. Do you get that too?

No error message for me (FF 3.16).

> Resizing functionality is based on 'jquery-ui-1.8.9.custom.min.js' which is
> included as a tiddler. From Chrome debugging output it seems that when
> offline, the browser looks for that file in the location of the .html file
> rather than fetch it from the tiddler. It does this for other files too,
> e.g. the images used in the centre of the page: these are also stored in
> tiddlers and also do not show offline. If I put a copy of the .js file as
> well as 'jquery-ui-1.8.9.custom.css' and 'ui-icons_222222_256x240.png' in
> the folder of the local file, resizing functionality is restored.

Thanks for that suggestion. Missed the css and later png.

> So my first guess is that the error with TiddlyWebConfig is breaking
> loading-from-tiddlers.

That would make this problem easy to solve for a standalone TW, where
TiddlyWeb plugins aren't needed. Would also reduce it's 1.2 MBs a bid,
which is rather big for an empty TW.

Thanks again.

[PMario]

Hi Kosmaton,

The problem isn't TiddlyWebConfig. It's in the MarkupPostBody [1],
where you activated the jQuery UI libs in a standard HTML way, which
causes this problem.

The TiddlyWiki way needs to use a systemConfig tag for the library and
the CSS file needs to be eg: jQUiStyleSheet activated in the theme
StyleSheet section.

<script type="text/javascript" src="jquery-ui-1.8.9.custom.min.js"></
script>
searches in a relativ path, to the html file. This works in online
mode, because anyname.tiddlyspace.com/jquery-ui-1.8.9.custom.min.js
returns the right online tiddler.

May be there are some more dependencies, which I've missed. Especially
plugin load order can be a problem, which may need to be checked.

-mario

[1] http://triptych-theme.tiddlyspace.com/#MarkupPostBody

[wolfgang]

Your're right, Mario. Deleting this MarkupPostBody entry and tagging
the jquery-ui-1.8.9.custom.min.js tiddler with systemConfig made the
sidebar dragging working in a standalone TW. Though had to paste its
code into the tiddler again, because for some reason it has been
corrupted.

[Kosmaton]

Thanks a lot Mario, that saved me a headache. Code is fixed now.

There is still the problem of the image tiddlers being inaccessible
offline (as called, HTML-style, in jquery-ui-1.8.9.custom.css and
TriptychTheme). Any ideas for this?

TiddlyWebConfig no longer gives me yesterday's error, oh well.

Wolfgang, yes, seems like tagging a binary tiddler corrupts it?
Strange, or not strange, I don't know. And you are right that taking
out the TiddlyWeb stuff would be sensible for non TWeb-based use. I
won't have a chance to look into that soon so if you want to hack it
up, feel free!

Kosmaton

[PMario]

On Apr 28, 8:32 pm, Kosmaton <Kosma...@gmx.com> wrote:
> Thanks a lot Mario, that saved me a headache. Code is fixed now.
>
> There is still the problem of the image tiddlers being inaccessible
> offline (as called, HTML-style, in jquery-ui-1.8.9.custom.css and
> TriptychTheme). Any ideas for this?

The css needs some tweaking too.
I made an "experiment" with jQueryUI. Have a look at
JQueryUIStyleSheet [1]. Search / Highlight the URL's
eg: url([[ui-bg_flat_75_ffffff_40x100.png##data]]) which use inline
data sections to be displayed. It needs AttachFilePluginFormatters [3]
to work.

You'll need to import the pictures with AttachFilePlugin [4]. If you
imported the tiddlers, you can remove the plugin [4].

Read the tiddlytools info tiddlers !

hope this helps
-mario

[1] http://a-pm-experimental.tiddlyspot.com/#JQueryUIStyleSheet
[2] http://a-pm-experimental.tiddlyspot.com/#JQSorterPackage
[3] http://www.tiddlytools.com/#AttachFilePluginFormatters
[4] http://www.tiddlytools.com/#AttachFilePlugin

[Kosmaton]

Fixed for the UI widgets: they work offline now.

Image map images will normally be changed by the user so for those I put suggestions in [[About Triptych]].

Thanks once again Mario!!

=K=

[PMario]

On May 1, 11:38 pm, Kosmaton <Kosma...@gmx.com> wrote:
> Thanks once again Mario!!
You are welcome :)

It think the "About" [1] deserves its own link here and it should be
visible (_no_ excludeLists) in the recent tab. Instead the interface
stuff and plugins may be invisible.

(I know, I have to do this with my own themes too :)

have fun!
-mario

[1] http://triptych-theme.tiddlyspace.com/#%5b%5bAbout%20Triptych%5d%5d

[wolfgang]

> Wolfgang, yes, seems like tagging a binary tiddler corrupts it?
> Strange, or not strange, I don't know. And you are right that taking
> out the TiddlyWeb stuff would be sensible for non TWeb-based use. I
> won't have a chance to look into that soon so if you want to hack it
> up, feel free!
>

I would just have to know what the absolute essentials for the
hovering/fixated sidebars are.

It wasn't able to after many hours of trying:

http://dl.dropbox.com/u/241006/triptych_empty.html