TiddlyWiki App: A Smooth User Experience (2025) for Multiple Platforms

oeyoews · April 14, 2025, 4:21pm

It seems that this code lacks the judgment of $tw.browser. For nodejs, it will first run once in the nodejs environment, and naturally report an error.

EricShulman · April 14, 2025, 5:03pm

I’ve expanded the try/catch wrapper around the entire getWindowSize AND window.addEventListener code. This should prevent any fatal errors from being reported.

Get the latest update here:
TiddlyTools/Modules/Info/WindowSize.js

Give it a try and let me know if:
A) the startup error is avoided
B) the $:/info/browser/window/width and $:/info/browser/window/height shadow tiddlers are correctly initialized
C) the “resize” event listener is established so the $:/info/... tiddlers are updated when the window is resized

-e

arunnbabu81 · April 14, 2025, 5:36pm

I tested and these are the findings

startup error is fixed now
$:/info/browser/window/width and $:/info/browser/window/height tiddlers are initialized correctly.
but $:/info/browser/window/width and $:/info/browser/window/height tiddlers are not updated when the window is resized

EricShulman · April 14, 2025, 11:09pm

The old “startup” code and the newer “info” code both use the same window.addEventListener("resize",...) method to trigger updates to the tiddler values when the window is resized. Are you saying that the old “startup” code handles window resizing, but the newer “info” code does not???

-e

arunnbabu81 · April 15, 2025, 1:18am

The info tiddlers were not getting updated on realtime when I resized the window

EricShulman · April 15, 2025, 2:38am

As currently written, TiddlyTools/Modules/Info/WindowSize.js expects there to be a global window object that receives a “resize” event in order to trigger automatic updates to the values stored in the $:/info/... tiddlers.

This suggests that the tiddlywiki-app is not using a “listener” to handle window resize events… or perhaps the tiddlywiki-app containing object is not a window or is getting a different event other than “resize”.

@oeyoews, can you check on this and let me know if there is something else I can write for compatibility with the tiddlywiki-app environment?

-e

TW_Tones · April 15, 2025, 2:41am

I am confident these have something to do with my prior “review”;

EricShulman · April 15, 2025, 2:53am

Although both of these issues are important for general usability in the tiddlywiki-app, I think these are two separate problems.

The resize listener is only intended to respond to changes in the actual containing window size (generally by dragging the window border or using the “maximize/restore” buttons in the window frame), while the “zoom” buttons/mouse roller affect the scaling of rendered content within the containing window.

-e

oeyoews · April 15, 2025, 2:59am

I am not familiar with this info module. The code does not seem to report any errors, the results are normal, and the info tiddlers are not updated in the browser. I am sure this is not a problem with tiddlywiki-app.

/*\
title:TiddlyTools/Modules/Info/WindowSize.js
type: application/javascript
module-type: info

Add "resize" listener to save window size (in pixels) to $:/info/browser/window/width and $:/info/browser/window/height

\*/
(function(){

/*jslint node: true, browser: true */
/*global $tw: false */
"use strict";

exports.getInfoTiddlerFields = function(updateInfoTiddlersCallback) {
	if($tw.node) return
	var getWindowSize=function(){
		try {
			var w=( window.innerWidth  || document.documentElement.clientWidth  || document.body.clientWidth  );
			var h=( window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight );
			const res=  ([{title:"$:/info/browser/window/width",text:w.toString()},{title:"$:/info/browser/window/height",text:h.toString()}]);
			console.log(res)
			return res;
		}
		catch(e) { return([]); }
	};
	window.addEventListener("resize", function () {
		updateInfoTiddlersCallback(getWindowSize());
	});
	return getWindowSize();
};

})();

oeyoews · April 15, 2025, 3:04am

There is generally no difference between the environment of tiddlywiki-app and the web page started by nodejs tiddlywiki. Both use the browser

arunnbabu81 · April 15, 2025, 1:40pm

This part of the usewiki2 extension is still in Chinese. What does OpenAI option does here ?

Also is there was way to add multiple fields to the tiddlers which is getting added to the tiddlywik-app using the usewiki2 extension using some templates (similar to the current way of adding tags)

TW_Tones · April 16, 2025, 12:19am

But which browser @arunnbabu81? I presume a Chromium or other minimal browser.

At the moment I open my wiki in the browser (Chrome of Firfox) as zoom is not working in TiddlyWiki-App.

TiddlyWiki-App I like that file://C:/ and other file references open directly in Filemanager (on windows) and I am sure there is more access to the local system I could make use of. All of which we loose when opened in a common browser.

[Edited] Undertaking further tests of interaction with the local system

The following links will open the application;

* [[Notepad++ link|file://C:\ProgramData\Microsoft\Windows\Start Menu\Programs\Notepad++.lnk]]
* [[Notepad++ exe|file://C:\Program Files\Notepad++\notepad++.exe]]

The following opens a tab in a new filemanger windor/tab, but thew tab can be dragged to another filemanger window if desired;

file://C:\ProgramData\Microsoft\Windows\Start Menu\Programs

or 

[[Programs|file://C:\ProgramData\Microsoft\Windows\Start Menu\Programs]]

A question that arrises with the ability to execute an application is could we accomodate the abillity to provide parameters to the execution?

I suspect we made need a seperate widget.

Another question:

Is it possible to launch tiddlywiki-app from the local command line or shortcut that could accept a tiddlywiki file as a parameter, idealy not opening a second time in tiddlywiki-app if already open.

This would allow an accociation to open tiddlywiki files in tiddlywiki-app, which I have done in the past to open in a browser application such as wikiname.tw5 files
This would permit double click on a local tiddlywiki file to open in tiddlywiki-app
Further work may get different browsers be configured a handler to open tw5 files encountered just as a PDF viewer may do so.

EricShulman · April 16, 2025, 7:10pm

The code you posted is NOT the code I published! Most notably, you’ve added

if($tw.node) return

at the beginning of the function. This explicitly prevents the code from reporting any errors or updating the info tiddlers when running in a NodeJS environment.

The purpose of my code is to get the current window width and height values (in pixels) and store them in $:/info/browser/window/width and $:/info/browser/window/height shadow tiddlers. This code is intially invoked at startup by the TWCore’s “info” mechanism which creates the respective $:/info/... tiddlers based on the array of objects returned.

The code also sets up a window event listener, so that whenever the browser window is resized, the respective $:/info/... tiddlers are updated (via the updateInfoTiddlersCallback function) to reflect the new window width and height.

Here’s the actual current code from TiddlyTools/Modules/Info/WindowSize.js:

/*\
title:TiddlyTools/Modules/Info/WindowSize.js
type: application/javascript
module-type: info

save window size (pixels) to $:/info/browser/window/width and $:/info/browser/window/height
with resize listener

\*/
(function(){

/*jslint node: true, browser: true */
/*global $tw: false */
"use strict";

exports.getInfoTiddlerFields = function(updateInfoTiddlersCallback) {
	try {
		var getWindowSize=function() {
			var w=( window.innerWidth  || document.documentElement.clientWidth  || document.body.clientWidth  );
			var h=( window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight );
			return ([{title:"$:/info/browser/window/width",text:w.toString()},{title:"$:/info/browser/window/height",text:h.toString()}]);
		};
		window.addEventListener("resize",function(){updateInfoTiddlersCallback(getWindowSize());});
		return getWindowSize();
	}
	catch(e) { return([]); }
};

})();

Note that, for normal browser-based usage, there will always be a window object, and the function works as intended… it gets the current browser window width and height, and also sets up a resize listener.

Using the above code, the tiddlywiki-app does successfully set the initial $:/info/... tiddler values. However, when the tiddlywiki-app window is resized, it does not seem that the “resize” event listener is triggered and the $:/info/... tiddlers are not being updated.

Can you make your tiddlywiki-app code trigger the “resize” event listener? If not, can you suggest some alternative code that I can add to my implementation to achieve the same outcome?

-e

arunnbabu81 · April 17, 2025, 8:14am

@EricShulman what is the reason behind you preferring the current code compared to the initial code you shared in an older post of yours (link is there in one of my previous post) … especially since the old code is working in the Tiddlywiki-app

EricShulman · April 17, 2025, 8:49am

You reported that, using my latest “info” code in the tiddlywiki-app environment:

I then asked:

To which you replied:

So, it is not entirely true that:

since neither implementation is correctly handling the “resize” listener in the tiddlywiki-app.

The advantage of the newer “info” handling is that:

The code for the newer “info” implementation is much shorter.
It uses the TWCore’s info mechanism to initialize/update the $:/info/... values, so if that mechanism is ever enhanced in the future, my add-on will still be compatible with whatever those TWCore changes may be.
The newer “info” handling creates shadow $:/info/... tiddlers at startup, which is more consistent with all the other shadow $:/info/... tiddlers created by the TWCore.
In contrast, the old “startup” handling created real $:/info tiddlers, which were being saved when the TiddlyWiki is saved.

-e

arunnbabu81 · April 17, 2025, 9:44am

I was mentioning about this startup module which was working in Tiddlywiki-app Would it be a good idea to implement in TW to update the infomechanism when entering/leaving fullscreen? - #2 by EricShulman

Not the new info module

EricShulman · April 17, 2025, 11:08am

OK… one last try at a re-write… the TiddlyTools/Modules/Info/WindowSize.js code now looks like this:

exports.getInfoTiddlerFields = function(updateInfoTiddlersCallback) {
	window.addEventListener("resize",function(){
		updateInfoTiddlersCallback([
			{title:"$:/info/browser/window/width",text:window.innerWidth.toString()},
			{title:"$:/info/browser/window/height",text:window.innerHeight.toString()}
		]);
	});
	return ([
		{title:"$:/info/browser/window/width",text:window.innerWidth.toString()},
		{title:"$:/info/browser/window/height",text:window.innerHeight.toString()}
	]);
};

Notes:

Always use window.innerWidth and window.innerHeight (no fallbacks for older browsers)
This also eliminates use of local getWindowSize() function
Makes the code even smaller than before
Still uses the TWCore’s common “info” mechanism
Still creates shadow $:/info/... tiddlers

Get the update from the above link and let me know if it handles “resize” events in tiddlywiki-app.

-e

linonetwo · April 17, 2025, 1:57pm

That needs additional config in Electron.

Zooming works in https://github.com/tiddly-gittly/TidGi-Desktop, using ctrl + +/-

arunnbabu81 · April 17, 2025, 5:42pm

Got this error again

Here is code used.

/*\
title:TiddlyTools/Modules/Info/WindowSize.js
type: application/javascript
module-type: info

save window size (pixels) to $:/info/browser/window/width and $:/info/browser/window/height
with resize listener

\*/
(function(){

	/*jslint node: true, browser: true */
	/*global $tw: false */
	"use strict";
	
	exports.getInfoTiddlerFields = function(updateInfoTiddlersCallback) {
		window.addEventListener("resize",function(){
			updateInfoTiddlersCallback([
				{title:"$:/info/browser/window/width",text:window.innerWidth.toString()},
				{title:"$:/info/browser/window/height",text:window.innerHeight.toString()}
			]);
		});
		return ([
			{title:"$:/info/browser/window/width",text:window.innerWidth.toString()},
			{title:"$:/info/browser/window/height",text:window.innerHeight.toString()}
		]);
	};

EricShulman · April 17, 2025, 6:29pm

The problem seems to be with the initial setup for the “resize” event listener or in triggering the “resize” listener after setup. I’ve tried to simplify the code as much as possible to eliminate potential causes, but at this point it is unclear to me why this occurs, or what to do about it.

Clearly there is some kind of difference between adding the “resize” event listener in a real browser vs the tiddlywiki-app container. We are so close to having it work, but I am not set up to debug the tiddlywiki-app. @oeyoews … can you please try to debug this problem to determine the cause, and hopefully to find a solution or at least a workaround that doesn’t involve completely bypassing the functionality.

-e