XnView Software

Posted: **Fri Sep 22, 2023 10:30 am**

I am trying to revamp info panel ("i" key) i had for years and looking for inspiration, mind sharing your info panel screenshot and code you used to populate it?

Currently my info panel looks like this

Posted: **Fri Sep 22, 2023 10:58 am**

something like this:
Info - add 'HTML only' mode

Posted: **Sat Sep 23, 2023 9:18 pm**

I have updated my preview to look like this.

Code: Select all

<font style="text-transform: uppercase; font:30px;">
<b>{EXIF:Make}</b> - <b>{EXIF:Model}</b></font>

<font style="font:14px;"><b>Software	:</b> {EXIF:Software}</font>
<div style="font:18px; background: gray;">
<b>File	:</b> {File Type}
<b>Name 	:</b> {Filename With Ext}
<b>Size	:</b> {Size}
</div><div></div>
<font style="font:20px;"><b>{MPixels} MP</b> ({Width} x {Height})</font>
<font style="font:15px;"><div style="background: gray;">
<b>Shutter Speed	:</b> {EXIF:Exposure Time}
<b>ISO		:</b> {EXIF:ISO Value} 
<b>Aperture		:</b> {EXIF:Aperture} ({EXIF:F-Number})
</div><div></div>
<b>Exposure Mode	:</b> {EXIF:Exposure Mode}
<b>Exposuire Bias	: </b> {EXIF:Exposure Bias} EV
<div style="background: gray;">
<b>Lens		:</b>{EXIF:Lens Make} {EXIF:Lens Model}
<b>Focal Length	:</b> {EXIF:Focal Length}mm (<b>FF:</b> {EXIF:Focal Length 35mm}mm)
<b>Digital Zoom	:</b> {EXIF:xA404}x
</div><div></div>
<b>Scene Brightness	:</b> {EXIF:Brightness}
<div style="background: gray;">
<b>Lat	:</b> {EXIF:Latitude} 
<b>Lng	:</b> {EXIF:Longitude}
<b>Altitude	:</b> {EXIF:Altitude}
</div><div></div>
<b>Tag:</b> {Tag status} - <b>Rating:</b> {Rating} - <b>Label:</b> {Color label}
</font>

Posted: **Sun Sep 24, 2023 8:39 am**

few suggestions:
- use transparency via background-color: rgba(100, 100, 100, 0.5) (or any other color), not plain background: gray
- use 2 columns structure to align all values to the left edge

Posted: **Sun Sep 24, 2023 8:41 am**

user0 wrote: Sun Sep 24, 2023 8:39 am few suggestions:
- use transparency via background-color: rgba(100, 100, 100, 0.5) (or any other color), not plain background: gray
- use 2 columns structure to align all values to the left edge

Thanks, looks much better.

Code: Select all

<font style="font:15px;">
<font style="text-transform: uppercase; font:30px;">
<b>{EXIF:Make}</b> - <b>{EXIF:Model}</b></font>

<font style="font:14px;"><b>Software	:</b> {EXIF:Software}</font>
<div style="font:18px; background: rgba(128, 128, 128, 0.5);">
<b>File	:</b> {File Type}
<b>Name 	:</b> {Filename With Ext}
<b>Size	:</b> {Size}
</div><div></div>
<font style="font:20px;"><b>{MPixels} MP</b> ({Width} x {Height})</font>
<div style="background: rgba(128, 128, 128, 0.5)">
<b>Shutter Speed	:</b> {EXIF:Exposure Time}
<b>ISO		:</b> {EXIF:ISO Value} 
<b>Aperture		:</b> {EXIF:Aperture} ({EXIF:F-Number})
</div><div></div>
<b>Exposure Mode	:</b> {EXIF:Exposure Mode}
<b>Exposuire Bias	: </b> {EXIF:Exposure Bias} EV
<div style="background: rgba(128, 128, 128, 0.5)">
<b>Lens		:</b>{EXIF:Lens Make} {EXIF:Lens Model}
<b>Focal Length	:</b> {EXIF:Focal Length}mm (<b>FF:</b> {EXIF:Focal Length 35mm}mm)
<b>Digital Zoom	:</b> {EXIF:xA404}x
</div><div></div>
<b>Scene Brightness	:</b> {EXIF:Brightness}
<div style="background: rgba(128, 128, 128, 0.5)">
<b>Lat	:</b> {EXIF:Latitude} 
<b>Lng	:</b> {EXIF:Longitude}
<b>Altitude	:</b> {EXIF:Altitude}
</div><div></div>
<b>Tag:</b> {Tag status} - <b>Rating:</b> {Rating} - <b>Label:</b> {Color label}
</font>

There's still problem with using more text in sytle="..." it makes info window wider.

Using two columns would imply using <table> tag? its currently not working very well.

Both issues described here.

XnView Software

How your info panel looks like?

How your info panel looks like?

Re: How your info panel looks like?

Re: How your info panel looks like?

Re: How your info panel looks like?

Re: How your info panel looks like?