How to check if a network resource is available (VPN is on)?

Developers
#1

I would like to check if my VPN connection is active when I load a TW. The easiest way that I could think of so far was to check if I can load an image from a network server on the VPN, e.g. an ImageWidget (or HTML img) with the URI “file://///smb-server/image.png”.
The browser would throw an error if it cannot load the image, and since 5.2.2 the ImageWidget will correctly assign the tc-image-error class, but I cannot query that from within WikiText. I tried to put an EventCatcherWidget around the ImageWidget / img, but the error event does not bubble up per specification, so I cannot catch it I guess.
Is there any way to do this from within WikiText or do I have to use JavaScript to add an EventListener and go from there (either on startup or by hacking the ImageWidget to also run actions on error, so it’ll happen on the first failed image)?

Why would I want to do this? If the VPN is off, Firefox will try for around 4 seconds to load the image. During that time TW “hangs”. This happens on every opening or editing a tiddler with an image on the VPN, which I’d like to avoid. My plan is to try once during startup to load an image, and if that fails set some temporary tiddler to some value. All ImageWidgets for VPN files would then get a RevealWidget wrapper that checks the temporary tiddler’s value first.
Have a great day
Yaisog

#2

I cant help but I too would like to test for the existance of a file or even its contents but external files even if displayed do not seem accessible to use, copy, test. The html object tag can also display content.

#3

I suggest a startup action/module that executes an http request and creates a temporary tiddler if the request is successful. You can then use the presence of this temporary tiddler to detect if the VPN is available.

We do not yet have an implementation of HTTP widgets in the core. However a simple action-get action widget is pretty easy to write. If you run into issues please do feel free to post in the Developer category for guidance.

#4

@saqimtiaz: Thank you for your suggestions. I have now implemented it as I outlined above, by “extending” the ImageWidget and adapting a wrapper macro that I already had in place.
Just in case someone else wants to do something similar, here is my approach…
I added these lines to $:/core/modules/widgets/image.js:

domNode.addEventListener("error",function() {
		$tw.utils.removeClass(domNode,"tc-image-loading");
		$tw.utils.addClass(domNode,"tc-image-error");
	},false);
$tw.utils.addEventListeners(domNode,[
		{name: "error", handlerObject: this, handlerMethod: "handleErrorEvent"}
]);
// Insert element

and

	this.imageAlt = this.getAttribute("alt");
	this.errorActions = this.getAttribute("actions","");
};

(I showed the preceding and succeeding lines for reference).
Somewhere in the widget code goes this:

ImageWidget.prototype.handleErrorEvent = function(event) {
	// Trigger actions
	if(this.errorActions) {
		this.invokeActionString(this.errorActions,this,event,{"source": this.imageSource});
	}
};

The source is passed to the error actions, just in case. I do not use it (yet).
The additional code was basically copy-pasted from the RadioWidget, with small adaptations. This is about my level of JavaScript expertise.

My wrapper macro for the ImageWidget looks like this:

\define error-actions()
<$action-setfield $tiddler="$:/temp/no-vpn-available" text="yes" />
\end

\define showImage(path, caption, width:800px)
<!-- picture with LAN address or from mapped drive -->
<$reveal type="nomatch" text="" default={{{ [{$:/temp/no-vpn-available}!match[yes]] [<__path__>search:title:regexp[^(?:\\\\|\w\:\\)]] +[nth[2]] }}}>
	<$let formattedPath={{{ [<__path__>search-replace[\],[/]addprefix[file:///]] +[encodeuri[]] }}} >
		<div class="image" style="max-width:$width$">
			<$image source=<<formattedPath>> tooltip=<<__path__>> actions=<<error-actions>> /><br>
			$caption$
		</div>
	</$let>
</$reveal>
<!-- picture from a subdirectory of the wiki -->
<$reveal type="match" text="" default={{{ [<__path__>search:title:regexp[^(?:\\\\|\w\:\\)]] }}}>
	<$let formattedPath={{{ [<__path__>search-replace[\],[/]] +[encodeuri[]] }}} >
		<div class="image" style="max-width:$width$">
			<$image source=<<formattedPath>> tooltip=<<__path__>> /><br>
			$caption$
		</div>
	</$let>
</$reveal>
<!-- LAN not reachable -->
<$reveal type="nomatch" text="" default={{{ [{$:/temp/no-vpn-available}match[yes]] [<__path__>search:title:regexp[^(?:\\\\|\w\:\\)]] +[nth[2]] }}}>
	<$button class="tc-btn-invisible image mwi-broken-image" disabled="yes" tooltip={{{ [<__path__>addprefix[LAN resource not accessible: ]] }}}>
		{{$:/mwi/images/broken-image}}
	</$button>
</$reveal>
\end

This was one of my first TW macros and it shows. I don’t even have a check in there if a caption is passed or not.
The neat thing is that it doesn’t generate a startup delay on each reload while it tries to contact the SMB server. With the first image that cannot be loaded, the flag is set so that no other images from the LAN are even tried. By placing it into the $:/temp tree, a reload resets the flag. When I open the wiki on my other machine that has the LAN connection, pictures should be shown just fine.
Have a nice day
Yaisog