EdgeViewer - Modern HTML viewer plugin

[rg_software]

Trying to review the current TODO list. Not sure I 100% remember this discussion:

• 1. When in quick-view mode, you can switch to the inactive file panel displaying the quick-view content via the TAB key. When the quick-view panel displays image thumbnails (GIF, JPG, BMP, SVG), you then can activate a cursor to highlight the first image and advance to the next/previous image via TAB/Shift+TAB.

Okay, so this is about how the old HTMLView plugin behaves. Indeed, you can navigate thumbnails in a directory via Tab/Shift+Tab.

Q1: Would it be possible to add an optional behavior, so that when the quick-view panel is in thumbnail mode, the first image is auto-highlighted (thumbnail cursor is auto-activated) and you can then navigate through the thumbnails using the cursor keys?

[*]2. When pressing ENTER on a highlighted thumbnail or left-clicking on a thumbnail, the related image gets displayed centered in the quick-view panel, along with a "Close" button at the top right corner of the displayed image.

Q2.1: Currently, the display size of the centered image varies depending on the actual dimensions of the image. Can this optionally be changed to either use the limits of the quick-view file panel and/or display the image in full screen?

Q2.2: Is it possible to add optionally closing the display of the image (and return to the thumbnail mode) via the ESC key and/or left-clicking anywhere on the displayed image?

Roughly speaking, this all refers to the idea of replicating or improving the old HTMLView Directory Preview mode, right?

 
[*]3. The EdgeViewer can be configured to either support or ignore various file formats (HTM, HTML, PDF, SVG, XML, MHTML, etc.) via its configuration file edgeviewer.ini, which can be displayed either by F3 (main lister window) or in quick-view mode (file panel).
Q3: However, I did not manage to define EdgeViewer as the main lister plugin (F3) for animated GIF files. Is that currently even possible or would you be able to add that in a future release?

It was suggested in the comments that this functionality is working, is that correct?

[deus-ex]

Hi Maxim,

thank you for another update of your EdgeViewer plugin.

It was suggested in the comments that this functionality is working, is that correct?

Yes, that is correct.


And thank you for getting back to my items.

The following describes how I would like the EdgeViewer to function:

1. Pressing the 'TAB' key in directory quick-view mode (switching from the file panel to the icon panel) should highlight the first icon.
2. Pressing the 'TAB' key in the icon panel should switch to the file panel.
3. The list of icons should be browsable freely in any direction using the cursor keys (arrow-up/down, arrow-left/right).
4. Currently, pressing the 'ENTER' key on a highlighted icon opens the detail view. Pressing the 'ESC' key should exit/close the detail view.
   Optionally:
   * You could advance to the next/previous item in detail view by pressing the 'Page-up/down' key.
5. An image viewed in detail view should be fitted to the panel.
   Optionally:
   * The fit-to-screen-function could be toggled by pressing the 'F' key.
   * A ini-flag, like "fit-image-to-screen=0/1", controls the default behaviour.
   * Full screen view could be toggled by pressing the 'V' key.
6. When viewing a supported file in EdgeViewer with the 'F3' key, the image should be fitted to the screen.
   Optionally:
   * The fit-to-screen-function could be toggled by pressing the 'F' key.
   * A ini-flag, like "fit-image-to-screen=0/1", controls the default behaviour.
7. When viewing a supported file in EdgeViewer with the 'F3' key, pressing the 'Page-up/down' key should advance to the next/previous supported file.

Please understand these items as suggestions of what could be, all is open for discussion. Of course, it's completely up to you if you are able and willing to add any of these.

[rg_software]

Please understand these items as suggestions of what could be, all is open for discussion. Of course, it's completely up to you if you are able and willing to add any of these.

Yeah, I'll see what I can do. Just to be precise, which of these refer to Directory view and which to File image view? "Thumbnails" is obviously a directory feature. Points 6, 7 seem more like about pressing F3 on an image file.

[deus-ex]

Just to be precise, which of these refer to Directory view and which to File image view? "Thumbnails" is obviously a directory feature. Points 6, 7 seem more like about pressing F3 on an image file.

That's correct. Points 1-5 are about quick-viewing directories, as I mentioned.

1. Pressing the 'TAB' key in directory quick-view mode...

Points 6-7 are about viewing files via the 'F3' key, as I mentioned.
These points are not limited to viewing an image file, but any file format supported by your EdgeViewer plugin.

6. When viewing a supported file in EdgeViewer with the 'F3' key...

[larry99]

Please check out the latest update of the EdgeViewer plugin.

Here is the summary of changes:
- Any string can be searched inside open documents (previously, e.g., apostrophes did not work).
- URL shortcuts pointing to local files work now.
- Zoom can be controlled both by Ctrl + mouse wheel and Ctrl+/Ctrl- keys. Furthermore, zoom level can be optionally preserved between subsequent document openings via KeepZoom ini setting (but NOT between TC reloads).
- Directory view works even for "special directories" and symlinks (crashed previously).
- UNC paths work via file copy to a temp location, meaning it won't work for folders and won't display linked resources.

Thanks, works great now!

[deus-ex]

2rg_software

I just edited DirViewer's css.css to adjust the sizing of the icons, the padding size between the icons, and the color of the padding frame (screenshots).

 Default: https://imgur.com/a/3h3g5pI   Customized: https://imgur.com/a/m1t8Sr3

 1. Is there a way to change the default white color of the background that is not covered by the icons?

 2. Similar question applies to the normal document view (F3), is there a way to change the default white background color?

 3. Do you plan to add customization of some interface items via a config dialog, like the sizing of the icons in directory-view?

[rg_software]

 3. Do you plan to add customization of some interface items via a config dialog, like the sizing of the icons in directory-view?

Well, you see, my plans often take ages to be implemented Will consider. For the time being, note that you can directly edit loader.html inside assets\dirviewer. I guess it should be possible to set the body color there.

Speaking of default bkg color -- I thought it also could be customizable via CSS, no? At least, the dark mode CSS works for Markdown files. In any case, if CSS fails, loader.html is still available.

[deus-ex]

For the time being, note that you can directly edit loader.html inside assets\dirviewer. I guess it should be possible to set the body color there.

I figured it out. I inspected the dark mode CSS for Markdown files, because of your hinting, and copied the body section, adjusting the color to my liking.
I suggest adding a more complete CSS file to the DirViewer folder, so any interested user can adjust the color setup without the obstacles I just bumped into.

Speaking of default bkg color -- I thought it also could be customizable via CSS, no? At least, the dark mode CSS works for Markdown files. In any case, if CSS fails, loader.html is still available.

Where do I need to place the CSS file so it takes effect on the standard F3 view? Do I have to declare the CSS file in EdgeViewer's ini file, similar to the [Markdown] and [AsciiDoc] sections? If so, please explain in detail what I have to add to the EdgeViewer.ini to make it work.

[rg_software]

Where do I need to place the CSS file so it takes effect on the standard F3 view? Do I have to declare the CSS file in EdgeViewer's ini file, similar to the [Markdown] and [AsciiDoc] sections? If so, please explain in detail what I have to add to the EdgeViewer.ini to make it work.

Well, let's clarify what is "Standard F3" in this case.

Some files like Markdown or Directories are shown via a certain HTML snippet (loader.html). These files don't have CSS on their own, so it is possible to supply our custom stylesheet.

Plain HTML files and MHTML files DO have their own associated styles, so they are shown as intended by their designers.

If you include images like PNG or JPG in the list of supported extensions, they will be opened directly via browser, so in effect what you see is the same as in standalone Edge. If you want to have, say, PNG over the dark background, it cannot be done via CSS. Please try this version (it is enough to take wlx/wlx64 files), it should respect TC light/dark settings.

[deus-ex]

Some files like Markdown or Directories are shown via a certain HTML snippet (loader.html). These files don't have CSS on their own, so it is possible to supply our custom stylesheet.

I see. I was hoping for some sort of an override mechanism allowing me to manage 'all-white-background" documents.

If you want to have, say, PNG over the dark background, it cannot be done via CSS. Please try this version (it is enough to take wlx/wlx64 files), it should respect TC light/dark settings.

Thank you for providing a special release.

I have configured TC's lister to use a dark background. This setting is independent of the light/dark mode function and is also applied when viewing images with the EdgeViewer. Because of my configuration regarding TC's lister background, there is no visual difference between the official release of EdgeViewer and the version you just posted. In other words, I had this issue solved already.

[rg_software]

I see. I was hoping for some sort of an override mechanism allowing me to manage 'all-white-background" documents.

Well, theoretically of course it is possible to load HTML and then override the body color there. If it makes any sense to do, let me know. For example, we can supply body color if there is no color supplied or even override the existing color with our own color code.

Naturally, it is easy to imagine a document where this would fail because it defines the body color elsewhere (say, in all-encompassing div), but it would also work for quite a many documents.

[deus-ex]

For example, we can supply body color if there is no color supplied or even override the existing color with our own color code.

Yes, that would be a great feature to have.

[rg_software]

For example, we can supply body color if there is no color supplied or even override the existing color with our own color code.

Yes, that would be a great feature to have.

Yep, it's been a fairly fun exercise. Try this version, please. Now there are dark mode and light mode CSS files inside the "html" folder of the plugin.

- It will apply custom style for the elements that are not styled in the document.
- It will NOT override existing styles if they are present.
- This version handles encodings differently, so I am a bit worried whether it handles legacy files correctly, but it should.

P.S. Having second thoughts... if, say, body is not styled, won't it be dark if dark mode is on regardless of any CSS?

[deus-ex]

Awesome, it works nicely in correspondence with the light/dark mode.
I have configured it to apply a permanent, darker but not fully black background, and a dimmed white for normal text.

I found two issues:

1. As you explained, existing styles are not overridden. That contradicts the dark mode concept. A predefined style using black (color: #000000;) or any dark color for normal text makes it difficult to read in dark mode or a setup utilizing a dark background. A (optional?) forced override would be quite helpful.
2. The newly introduced HTML asset does not understand/detect umlauts (like Ä,Ö,Ü). A question mark is shown as a placeholder for each umlaut.

[petermad]

2rg_software

This latest version: https://seafile.rt247a.ddns.me/f/1c69536081d444c5a711/ totally fails loading my calendar gadget - for testing it can be downloaded here: https://gadget.madsenworld.dk/PHSM-Calendar1731s.zip

If you want to test it open the PHSM-Calendar.gadget file by Ctrl+PgDn and copy the files to a folder. Then run either the da-DK\PHSM-Kalender.htm file or the en-US\PHSM-Calendar.htm file.

For full functionality you need these switches in edgeviewer.ini :

Code: Select all

[Chromium] 
Switches=--allow-file-access-from-files --disable-popup-blocking

It works fine with this version: https://github.com/rg-software/wlx-edge-viewer/releases/download/v1.0.8/wlx-edge-viewer-v1.0.8.zip

I tried to comment out the css lines:
[HTML]
; from the "html" subfolder
;CSS=style.css
;CSSDark=style-dark.css

[RST]
; from the "rst" subfolder
;CSS=rst-style.css
;CSSDark=rst-style.css

but to no avail - the Release-20250430 does not work with my calendar.

The css in my files checks OK on https://jigsaw.w3.org/css-validator/