pfsouthdrhtml(1)

💖 pfsouthdrhtml — the manual, but make it make sense 💖

okay bestie, gather round, because this one is genuinely one of the coolest little tools in the whole pfstools family and I need you to be seated for it. This is a page from the General Commands Manual, and the command we're talking about is pfsouthdrhtml. Yes that's a mouthful. No I will not be shortening it. It's iconic and it knows it. 👑

---

✨ NAME ✨

pfsouthdrhtml — make a whole web page with an HDR viewer on it 🦋

---

🌸 SYNOPSIS 🌸

pfsouthdrhtml [<page_name>] [--quality <1-5>] [--image-dir
<directory_name>] [--page-template <template_file>] [--image-template
<template_file>] [--object-output <file_name.js>] [--html-output
<file_name.html>]

---

💅 DESCRIPTION 💅

So here's the tea. This command builds you an HTML web page in the current directory, and that page contains a multi-exposure HDR viewer. Not a screenshot, not a static image, an actual viewer. Slay.

The multi-exposure viewer shows you a portion of the available dynamic range with minimum contrast distortions, and it hands you a slider control so you can slide that dynamic range window toward brighter tones or toward darker ones. If you've ever used pfsview — which is the pfstools app for displaying HDR images — the interface is very similar. Basically the same vibe, now on the internet. 🌈

The web page is built using only JavaScript and the CSS opacity property. That's it. It does not require Java applets. It does not require the Flash plugin. We are free. 🕊️

okay but real talk for a sec: because this technique encodes 20-60 exposures using only a few images, the exposures it displays may not be identical to the exposures shown in pfsview. That's not a bug, that's just the tradeoff, and you deserve to know it.

For examples and more information, go here:

http://pfstools.sourceforge.net/hdrhtml/.

Now, <page_name> specifies the file name of the web page to be generated. If <page_name> is missing? No stress — the file name of the first image, with a .html extension, gets used instead.

And here's the part that's lowkey genius: the command can take several images as input and put them all on the same web page. For each image, its file name — taken from the FILE_NAME tag in the pfsstrem — without extension and without a leading path, becomes the name for all the JavaScript variables that correspond to that image. And if the filename contains illegal characters (such as space, '-', '[', etc), those get converted to '_'. Clean. Tidy. Exactly what you'd want. ✨

---

🎀 OPTIONS 🎀

• --quality <1-5>, -q <1-5> — the quality of the interpolated exposures, from the worst (1) to the best (5). The default is 2, which is honestly enough for most applications, don't overthink it. Higher quality means less distortions in the brightest and the darkest tones, but it also generates more images. And more images means more data that has to be transferred to the web-browser, which makes the HDR viewer less responsive. So it's giving tradeoff, as always. 💀
• --image-dir <directory_name>, -d <directory_name> — tell it where to store the resulting image files. Links to images in the HTML get updated accordingly. This must be a relative path, and the directory must exist. Super useful if you want to avoid clutter in the current directory. 🧚
• --page-template <template_file>, -p <directory_name>, --image-template <template_file>, -i <template_file> — replaces the template files used to generate the HTML web page. The template files contain all the HTML and JaveScript code, with special keywords (@keyword@) that get replaced with image specific data — width, height, image base name, etc. The default template files live in INSTALL_DIR/share/pfstools/hdrhtml_default_templ/hdrhtml_*_templ.html. There's an alternative template bundled with pfstools in the hdrhtml_hdrlabs_templ directory that contains many improvements and looks much better, but it requires additional asset files. The example at the end of this manual shows how to use the alternative template. More details on designing your own templates are down in TEMPLATE FILE FORMAT below. 👇
• --object-output <file_name.js>, -o <file_name.js> — store the JavaScript objects (hdr_<base_name>) associated with each image in a separate file. Useful if you want to script creating HTML pages. Periodt.
• --html-output <file_name.html>, -l <file_name.html> — store the HTML code that shows the HDRHTML viewer for each image in a separate file. Also useful if you want to script creating HTML pages. 🫶

---

🦋 TEMPLATE FILE FORMAT 🦋

pfsouthdrhtml uses two template files — hdrhtml_page_templ.html and hdrhtml_image_templ.html, located in INSTALL_DIR/share/pfstools/ — to generate a web page with an HDR HTML viewer.

The 'page' file contains the HTML of the entire web page. The 'image' file is used to paste a viewer code for a single image. You can replace one or both of these templates with your own using the --page-template and --image-template options. Make it yours. 💖

Each template contains HTML code with additional keywords surrounded by @ marks (@keyword@), which get replaced with HDR HTML specific code. Most of the keywords are self explanatory, so only the most important ones are described below:

• @hdr_img_def@ — JavaScript objects that must be put in the 'body' section before any images. These define all the parameters needed to control the HDR HTML viewer.
• @cf_array_def@ — a pre-computed array of opacity coefficients. The same array is used for all images that use the same quality setting. Currently only one such array could be used per web-page, so images generated with different quality setting cannot be mixed on a single web page. Read that again, bestie, it's important. 🙈
• @image_htmlcode@ or @image_htmlcode[base_name]@ — inserts the HTML code of all images, or of a single image with the base_name (name with no file extension) specified as a parameter. This should be put where the HDR HTML viewer should be located.

---

🔥 EXAMPLES 🔥

1. Generates a web page memorial_church.html with a set of images memorial_church_*.jpg in the current directory:

pfsin memorial.hdr | pfshdrhtml memorial_church

2. Generate a web page with all OpenEXR images from ~/hdr_images/. The images are resized so that they are not larger than 512x512:

pfsin ~/hdr_images/*.exr | pfssize --maxx 512 --maxy 512 | pfsouthdrhtml hdr_images

3. The commands above will use an improved template from hdrlabs.com instead of the default one. Note that this template requires the html_assets directory to be copied manually to the destination directory. Replace $INST_DIR with the directory where pfstools is installed (/usr/local by default):

templ_dir=$INST_DIR/share/pfstools/hdrhtml_hdrlabs_templ/; pfsin img1.hdr img2.exr | pfssize -r 0.2 | pfsouthdrhtml -p ${templ_dir}/hdrhtml_page_templ.html -i ${templ_dir}/hdrhtml_image_templ.html test.html && cp -r ${templ_dir}/hdrhtml_assets ./

---

🌈 SEE ALSO 🌈

pfsin(1) pfsout(1)

---

😭 BUGS 😭

Please report bugs and comments to the discussion group at http://groups.google.com/group/pfstools. They want to hear from you, fr fr. 🫶

---

and that's the whole page, bestie — no notes, you ate it. this was pfsouthdrhtml(1) from the General Commands Manual, and yeah, that footer is literally just pfsouthdrhtml(1) staring back at you, no date, no version drama. iconic behavior honestly. 💜🎀✨