Difference between revisions of "User:Foxfirefey/Automatic Style Screenshot Experiments"

From Dreamwidth Notes
Jump to: navigation, search
m (just updating the link)
 
Line 62: Line 62:
 
== optimal imagemagick thumbnail settings ==
 
== optimal imagemagick thumbnail settings ==
  
As taken from [[Newbie Guide for People Patching Styles]]:
+
As taken from [[Newbie Guide: How to Patch Styles and Themes]]:
  
 
<syntaxhighlight lang=bash>convert -resize '150x114' -sharpen 25 +dither -type Palette $inputfilename png8:$outputfilename</syntaxhighlight>
 
<syntaxhighlight lang=bash>convert -resize '150x114' -sharpen 25 +dither -type Palette $inputfilename png8:$outputfilename</syntaxhighlight>

Latest revision as of 16:32, 13 March 2013

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

khtml2png

  • Too difficult to get running on Ubuntu 10.04

wkhtmltopdf

  • 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

cutycap

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

PyWebShot

# install
sudo apt-get install python-gtkmozembed
wget https://raw.github.com/coderholic/PyWebShot/master/pywebshot.py

# make a screenshot
xvfb-run --server-args="-screen 0, 1400x1000x24" \
   python pywebshot.py foxfirefey.dreamwidth.org -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.

python-webkit2png

sudo apt-get install python-qt4 libqt4-webkit python-pip
sudo pip install webkit2png #not sure how to access it after this? 
wget https://raw.github.com/AdamN/python-webkit2png/4e625afe57297cdd6a59b1edf9f0e6a1c1ead9f4/webkit2png.py

xvfb-run --server-args="-screen 0, 1400x1000x24" \
   python webkit2png.py -o foxfirefey2.png http://foxfirefey.dreamwidth.org --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