Content Skeleton

This Page

Previous topic


Next topic



PDF page size : Very large because somehow 72dpi ?

  • 2560x1440 points
  • 90.32 x 50.8 cm


delta:g4dae_geometry_exporter blyth$ pwd

delta:presentation blyth$ hg add
adding g4dae_geometry_exporter_okinawa.pdf
env/presentation/g4dae_geometry_exporter_okinawa.pdf: up to 85 MB of RAM may be required to manage this file
(use 'hg revert env/presentation/g4dae_geometry_exporter_okinawa.pdf' to cancel the pending addition)
delta:presentation blyth$

Checking configured settings

echos the paths/names in use
slides-get 0 15

capture PNGs per page, crop the chrome, convert PNGs into PDF BEFORE USING MOVE ASIDE THE PRIOR CAPTURES MANUALLY:

delta:~ blyth$ slides-cd ..
delta:presentation blyth$ mv gpu_optical_photon_simulation gpu_optical_photon_simulation_apr28
slides-get 0 0
first page only

Creating HTML slides from S5 Restructured Text Sources

For simplicity arrange to have only one .txt file in the presentations folder, eg when adapting an existing presentation:

simon:presentation blyth$ svn cp nov2013_gpu_nuwa.txt gpu_optical_photon_simulation.txt
A         gpu_optical_photon_simulation.txt
simon:presentation blyth$ svn mv  nov2013_gpu_nuwa.txt  nov2013_gpu_nuwa.txt.old
A         nov2013_gpu_nuwa.txt.old
D         nov2013_gpu_nuwa.txt

Check/update slides-name, slides-branch, slides-host settings using slides-vi slides-info, to correspond to the name and location of the S5 sources. Normally would just need to update slides-name, in above example gpu_optical_photon_simulation.

Update S5 source, regenerate html and view local html in browser:

simon:presentation blyth$ vi gpu_optical_photon_simulation.txt
simon:presentation blyth$ make
python ./ --theme-url ui/my-small-white --current-slide --visible-controls --language=en gpu_optical_photon_simulation.txt gpu_optical_photon_simulation.html
created gpu_optical_photon_simulation.html NAMES gpu_optical_photon_simulation

simon:presentation blyth$ open gpu_optical_photon_simulation.html

To check a particular page use links like:

The above steps can also be done with slides-make.

Uses to convert S5 .txt sources into .html.

Rsync derived files elsewhere and cleanup source tree

Check the slides dir destination is as desired then make rsync:

simon:presentation blyth$ slides-dir
simon:presentation blyth$ slides-
simon:presentation blyth$ slides-dir

The above steps can also be done with slides-rsync.

Copies derived html and pdf files out of working copy, then cleans them from working copy.

Publish html to web server

  1. make sure working copy is clean and commit changed files to subversion
  2. update env working copy on webserver
  3. generate the html on the web server with slides-make or manually as shown above
  4. use slides-rsync to propagate into the appropriate place for Sphinx derived html
  5. rsync to the webserver htdocs with slides-publish note that the destination reuses the folders used by sphinx derived documentation

Hmm, also needed to:

cd ~/env
make rsync
  • TODO: streamline this, too many steps that have to be done in the correct order, see eup func on C2R

Publish to local apache

Avoid integration with Sphinx build docs which causes the complications. Publish to local apache using:

  1. slides-apache-prepare
  2. slides-apache-publish

Publish to remote apache

  1. env-htdocs-rsync C2

Integrate URLs of presentation HTML with Sphinx

In the Sphinx index.rst in the presention folder add raw html lists of links in order to allow navigation from Sphinx derived docs to the presentation html and pdf.

Coexisting with Sphinx

Slide sources are named .txt rather than .rst

This avoid Sphinx attempting to build the S5 sources, which are in plain docutils restructured text using S5 definitions rather than Sphinx RST.

The generated S5 html and pdf are placed within the Sphinx build directory at the appropriate place in the tree corresponding to the RST sources

Creating screenshots from

slides-screenshots-dir-cd --with-chroma --load 1

Include Fullscreen Image in S5 slides ?

Use raw html directive at the head of the RST source, identifying slides to receive background images via div#id css selectors where the id are a somewhat mangled slide titles.


  1. document relative and server relative links are usable from css
  2. protocol relative, starting “//” also works but that would mean hardcoding the sever hostname
.. include:: <s5defs.txt>

.. raw:: html

   <style type="text/css">

          1282 × 960  pixels    143.99 pixels/inch  237.1 KB (242,821 bytes)     chroma_dayabay_adlid.png
          1278 × 962  pixels    143.99 pixels/inch  433.5 KB (443,928 bytes)     chroma_dayabay_pool_pmts.png

          With "background-size: contain" and not specifying a size for the div leads
          to scaling being dependant on the dimensions of the div, which depend on the amount
          of content lines on the page, also this changes resize browser window. When
          little content the image is scaled up into top left corner.

          With "background-size: cover" and not specifying a size for the div leads
          to scaling to fill horizontally, but vertical chop when the content ends.

          Omitting "background-size" and not specifying a size for the div get
          no image scaling, it appears as-is but chopped according to size of the div.

          Omitting "background-size" and specifying "div.slide { height: 100%; }"
          gets no image scaling and image presented as-is without any chopping.  This
          is a better approach as the per slide config is minimised to just
          specifying the url.


      div.slide {
         background-clip: border-box;
         background-repeat: no-repeat;
         height: 100%;
         background-image: url(images/chroma/chroma_dayabay_adlid.png);
         background-image: url(images/chroma/chroma_dayabay_pool_pmts.png);
         background-image: url(/env/test/LANS_AD3_CoverGas_Humidity.png);
         background-image: url(//localhost/env/test/LANS_AD3_CoverGas_Humidity.png);


   ...bulk of slides omitted...

   Full Screen

   Full Screen 2

   Content appears on top of the image, that can be difficult to read.

Convert .html pages to .pdf

Creates PDF documents from a sequence of cropped browser screen capture PNGs.

This is particularly useful with S5 slides created with as this avoids having to duplicate the layout exercise for the pdf. A PDF can be created from the rst via several routes but it will not look like the S5 slides without duplicated styling effort.

The disadvantage is bitmapped PDFs lacking clickable links. Mitigate this (and gain some html traffic) by providing a prominent reference to the online html version of the slides.

The advantage of having slides in html, generated from plain text RST files outweighs the disadvantage.


slides-get N M

performs the below functions, does screencaptures to PNG, cropping PNG and converting to PDF, usage:

slides-get 0 5
slides-capture N M

screencapture a sequence of Safari pages, eg S5 slides

During operation the sequence of Browser pages will load one by one. As each URL is visited, user intervention to click the window is required. As the tabs are left it is preferable to start with only a small number of Safari tabs before running the script.

For each load:

  1. focus will shift to the new page
  2. wait until onload javascript has completed
  3. screencapture will kick in and color the browser blue with a camera icon
  4. click the browser window to take the capture
runs python cropper on all NN.png, creating NN_crop.png

uses convert to concatenate NN_crop.png into name.pdf , this is using ImageMagick (a very heavy dependency).

Initially used Automator action, /Library/WebServer/Documents/env/muon_simulation/presentation/pngs2pdf.workflow

Subsequently created an Automator Service Make PDF from PNGs, documented at env:osx/osx_automator_workflows

delta:opticks_gpu_optical_photon_simulation blyth$ *.png
INFO:env.doc.downsize:Resize 2
INFO:env.doc.downsize:downsize 00_crop.png to create 00_crop_half.png 2682px_1498px -> 1341px_749px
INFO:env.doc.downsize:downsize 01_crop.png to create 01_crop_half.png 2682px_1498px -> 1341px_749px
INFO:env.doc.downsize:downsize 02_crop.png to create 02_crop_half.png 2682px_1498px -> 1341px_749px
INFO:env.doc.downsize:downsize 30_crop.png to create 30_crop_half.png 2682px_1498px -> 1341px_749px
INFO:env.doc.downsize:downsize 31_crop.png to create 31_crop_half.png 2682px_1498px -> 1341px_749px
INFO:env.doc.downsize:downsize 32_crop.png to create 32_crop_half.png 2682px_1498px -> 1341px_749px