Sunday - Learn something new day...

[Mario]

On Sundays I always try to reserve some time for learning new stuffs. As time hobbies permit 

tl;dr;
When things work out as planned, we will soon see a "better" help system for IMatch. Which runs on Windows, Linux and Mac. And also directly from the photools.com web site.

I often mentioned the Electron software in posts. Electron allows you to write "real" applications for Linux/Windows/Mac using only JavaScript and HTML.
A very powerful environment. If you use Spotify or Amazon music, these apps run in Electron. Visual Studio Code too!

I always wanted to look closer at this because of course it could be used, thanks to IMWS, to write an IMatch "client" which runs on all major operating systems.  And since Electron offers direct access to operating system functions, the file system etc. such an app could do "more" than IMatch WebViewer running in a web browser.

Anyway, a while ago I decided that my test project for Electron would be a better IMatch help.
The help file shipped with IMatch is based on Microsoft's CHM system, which is getting a bit old and has not seen any improvements over the past years...
I want a new help system with these properties:

+ Allows me to reuse the existing help pages without too much work (they are in HTML already)
+ Allows me to produce a real app which can be launched from IMatch to display contents for a specific topic (context-sensitive help)
+ Allows me to make the same contents available on the photools.com web site (for people who prefer reading on-line or in their browser)
+ Allows users to auto-translate the content into their language (for the online version)
+ Has good indexing and table of contents, full-text search if possible
+ Runs on Windows/Linux/Mac

Quite a challenge.
My hope is that, since the help system is already in HTML (an older version, but still) that I can reuse as much as possible.

So, today I've started.
The first step was to write a small Python script which converts the existing toc (table of contents) from the proprietary format used by CHM into JSON. Done!
Second step was a Python script which extracts the keywords I have manually assigned to each and every help page (sigh!) into a JSON file which makes them accessible from JavaScript. Done!

Now I've read a bit about Electron and some of the beginner tutorials. It is quite a lot to learn.
After doing some digging I've found a useful boilerplate for starting new projects. Up-to-date, proper inclusion of standard tools etc.
Always better to learn from people who have worked with something for a time, and then start from a solid basis.

After installing the boilerplate with npm I had a first look. Yikes! Frightening, really.
A "for starters" project which outputs a Electron app that displays a "Hello World" page has almost 25,000 files. Thanks to all the tools and dependencies. Uh-oh....
But it is a real web project, with automated "dev" and "release" builds, built-in test framework (based on Mocca) etc. There is a lot of automation going on, which is always good. Better the computer does the work than me 

I've spend some time learning how this beast works, bit-by-bit. And I see some light and a lot potential. Still, lots to learn. Good that I speak JavaScript and HTML quite fluently.
I've so far that I can run command line statement, wait 2 seconds and my Electron app with the new IMatch help starts.
I can also enter another command, wait a minute before all tests are completed and the build is done and I end up with an installer (!) for Windows which installs the help system on a Windows PC. Now, that's cool.
Other statements do the same, for Mac and Linux. I can currently test only Linux, no Mac available.

I currently understand maybe 5% of all this. But I've still go so far after a few hours: Please welcome the new IMatch help system table of contents:



This is from the Electron app. The HTML and JavaScript run as normal, load the toc.json I have created from the IMatch help and format it nicely.
I use Bootstrap 4 for formatting (same as IMatch), FontAwesome Icons, and jQuery to work with the DOM. Basically this is an IMatch app that runs not in IMatch, not in the browser but in Electron...

[jch2103]

Basically this is an IMatch app that runs not in IMatch, not in the browser but in Electron...

Very promising! Looks like it offers a lot of interesting possibilities.

[Mario]

Indeed, it does. Electron does the same what IMatch does (hosting a Chromium Browser and the V8 JavaScript engine). But it also includes Node.js, which allows to perform "native" operations with file system, the operating system etc. In a platform-independent way (hence it works on Windows, Linux and MacOS. No Android/iOS, unfortunately). For that there are other tools.

Anyway, I'm so confident in this that I have already started to adapt the IMatch help system pages (re-formatting and stuffs). This is how it looks now, with a standard help page loaded:



Already looks like in the CHM Viewer. But it runs in the browser and in the Electron app... 
This means I can use modern tools and modern features in the help now...

What fascinates me is this: Press a button, and see the help in German (or one of many other languages)

This is one of the (many) reasons why I work on things like this...

(Click to zoom).

[HaWo]

And I have translated (in German with Google), corrected and written in my documentations 40 themes    !!!

[Mario]

And I have translated (in German with Google), corrected and written in my documentations 40 themes    !!!

Not quite sure that I understand this...?

When I have the IMatch help converted and working in a browser, you can use the built-in function in your browser (Chrome, FF, Edge) to convert each page on-the-fly, with the press of a button. Is this what you mean?
Of course this will require you to by on-line. Which may not always be the case, and hence we still need a locally installed and working help system. Especially since I need to support context-sensitive topic lookup etc.

[HaWo]

Mario, das war meinerseits ein mißglücktes Kompliment, dass die Hilfe künftig in Deutsch angezeigt werden kann. Dumm gelaufen.

(Da hätte ich mir die Mühe sparen können, einige Kapitel übersetzen zu lassen und zu dokumentieren. Andrerseits war dieses ja nicht nutzlos, da habe ich wenigstens was dabei gelernt).

[Mario]

Ah, jetzt verstehe ich es.

Ja, einer der Vorteile für eine Variante der Hilfe auf meiner Web-Seite (oder, generell im Browser) ist die Nutzung der KI-basierten Übersetungsdienste die Google, Microsoft etc. anbieten.
Die Übersetzungen sind bereits recht gut, wie Du oben sehen kannst (die deutsche Version wurde einfach mit dem Google Translator in Chrome übersetzt). Der Übersetzer von Bing (Microsoft) ist ebenso gut.

[DigPeter]

This looks promising.  It seems that it will enable viewing of IMatch and help separately - help will not appear on top until minimised - which will be a good thing.  it will be even better if it makes it easier to find stuff through the index.

[Mario]

it will be even better if it makes it easier to find stuff through the index.

Windows Help supports two ways to find things:

1. View the Index.
This is a list of keywords I manually add to each help page. Feedback always welcome.

2. Full Text Index (Search)
Here, Windows searches the entire help file for the text you enter.