User:Foxfirefey/Automatic Style Screenshot Experiments

From Dreamwidth Notes
Jump to: navigation, search

The purpose of this experiment is to make an automateable system for generating style preview shots. I'm hoping this can lead to expansion of the number of preview shots we can provide for each style, such as one screenshot per layout option. It will also make it easier for us to upgrade sizes if we should ever choose to do so. I've also been thinking that the current screenshot images should be remade with more generic icons that do not have the DW logo in the example icons, because that could be rather awkward for other installations of Dreamwidth. This experiment will need:

  • A command-line compatible interface for making screenshots of a given webpage
  • A script to set up a user account with a wide variety of accessible styles
  • A script to cycle through all those styles and make images of them, maybe an auto-sharpen, and pngcrush/optimize them for the most efficient filesize

Overall useful installs

  • sudo apt-get install xvfb imagemagick


  • Too difficult to get running on Ubuntu 10.04


  • Only works on Mac, not good for an Ubuntu server based solution. Not ideal to have Macs part of this equation, not everybody has a Mac, more people are able to install Linux.
../src/wkhtmltoimage-amd64 --height 1280 --width 800 --disable-smart-width test.html test.png


Worked, but difficult to get exact screen size, and HTML did not render as well as it should


# install
sudo apt-get install python-gtkmozembed

# make a screenshot
xvfb-run --server-args="-screen 0, 1400x1000x24" \
   python -s 1280x800 -t 150x114 -f foxfirefey.png
  • Could not get it to fetch images from my dev machine serving web pages...while it was running on my dev machine at least.


sudo apt-get install python-qt4 libqt4-webkit python-pip
sudo pip install webkit2png #not sure how to access it after this? 

xvfb-run --server-args="-screen 0, 1400x1000x24" \
   python -o foxfirefey2.png --scale=150 114 -g 1280 800 
  • Did a HORRIBLE job at scaling, would need to used imagemagick
  • No longer in active development

optimal imagemagick thumbnail settings

As taken from Newbie Guide: How to Patch Styles and Themes:

convert -resize '150x114' -sharpen 25 +dither -type Palette $inputfilename png8:$outputfilename

Reference Links