March 7 – 8, 2006. Advanced Visualization for Chemistry – Mario Valle – CSCS –
March 7-8, 2006 .... Personal projection, web, TV program, DVD burning, etc.
Advanced Visualization for Chemistry Part 13 – Postprocessing Mario Valle March 7 – 8, 2006
Different visualization scopes
Exploration and research
Presentation
Advanced Visualization for Chemistry – Mario Valle – CSCS – March 7-8, 2006
Different rendering intents
Rendering for visualization
Rendering for presentation
Advanced Visualization for Chemistry – Mario Valle – CSCS – March 7-8, 2006
1
Research Viz vs. Presentation Viz Different goals Explore and understand vs. communicate already comprehended results
Different media Interactive computer screen vs. mostly static (paper) or non interactive media (movie)
Different audience Yourself vs. the world (that should be persuaded, amused or called to action)
Advanced Visualization for Chemistry – Mario Valle – CSCS – March 7-8, 2006
Communication channels Paper journals and conference proceedings Conference talks Lectures Web pages TV programs for the general public …
Advanced Visualization for Chemistry – Mario Valle – CSCS – March 7-8, 2006
Usual communication media Images (and charts, schematic diagrams, sketches, etc.)
Movies
Interactive models Advanced Visualization for Chemistry – Mario Valle – CSCS – March 7-8, 2006
2
And unusual ones Immersive visualization
PDA and cellphones Advanced Visualization for Chemistry – Mario Valle – CSCS – March 7-8, 2006
Images Advantages Show what you want to show You can retouch them, combine, add elements, etc.
Communication problems Static and flat
Media problems
Color rendering (and often Black & White required) Unreadable colors (especially on conference beamers!) Quality and resolution Screen 75dpi better than 1000dpi for printers
Advanced Visualization for Chemistry – Mario Valle – CSCS – March 7-8, 2006
Movies Advantages Show dynamic phenomena Help 3D understanding by viewpoint navigation Movies could direct viewer attention
Communication problems Delivers a passive experience Sometimes amuses (too much) Could be monotonous (boring or too long movies)
Media problems Quality File size Installed codecs impact playability on different machines. (Unfortunately there is no universal no-fuss coding method) Advanced Visualization for Chemistry – Mario Valle – CSCS – March 7-8, 2006
3
Interactive models Advantages Let the users build their mental representation by navigating the graphical scene The user interface (browser) is well know to a wide audience
Communication problems Normally they have limited interaction capabilities
Media problems Complex development Download time Often they need cooperation by the browser
Advanced Visualization for Chemistry – Mario Valle – CSCS – March 7-8, 2006
Images – image formats
JPEG
JPEG is designed for compressing images of natural, real-world scenes. It is a “lossy” format.
TIFF
This format was created to become the industry standard for image-file exchange.
PNG
An Open, Extensible Image Format with Lossless Compression
GIF EPS, PDF
256 colors plus transparency and animation Specialized formats for publication
Advanced Visualization for Chemistry – Mario Valle – CSCS – March 7-8, 2006
Image formats
JPEG
PNG “mosquitoes” around sharp edges Advanced Visualization for Chemistry – Mario Valle – CSCS – March 7-8, 2006
4
GIF color banding GIF (exaggerated color reduction to 32 colors)
PNG Advanced Visualization for Chemistry – Mario Valle – CSCS – March 7-8, 2006
Image format issues JPEG is for natural images, it is better to use PNG Leave TIFF for process printing Images for the web: JPEG, PNG, Animated GIF GIF: severe color banding, use only for animations Learn what a format can carry besides the image pixels (color profile, metadata, scale and resolution)
Advanced Visualization for Chemistry – Mario Valle – CSCS – March 7-8, 2006
Image printing quality Edges on printed paper looks terrible at printer resolution (remember: screen 75 dpi printers greater than 1000 dpi) Screen
Paper
Advanced Visualization for Chemistry – Mario Valle – CSCS – March 7-8, 2006
5
Device color gamut
Advanced Visualization for Chemistry – Mario Valle – CSCS – March 7-8, 2006
Unprintable screen colors
Unprintable colors Advanced Visualization for Chemistry – Mario Valle – CSCS – March 7-8, 2006
Usual problems to be solved Usual problems to be solved with image manipulation: Format conversion Crop and scale Create thumbnails, create thumbnail pages Manipulate colors, convert to B&W Add drawing and annotations Assemble images Optimize images for the web
Advanced Visualization for Chemistry – Mario Valle – CSCS – March 7-8, 2006
6
Useful image tools Image Magick The GIMP LittleCMS Inkscape
Check also Advanced Visualization for Chemistry – Mario Valle – CSCS – March 7-8, 2006
Basic format conversion Convert from a format to another convert img-from img-to
Convert an image created by AVS/Express image_capture module to PNG removing all strange settings that could impact later movie production using mencoder convert AVS:Img00001.x +matte +page -depth 8 \ -type TrueColor Img00001.png
Flip an image produced using wrong setting of the flip switch in AVS/Express image_capture module convert -flip img-from img-to
Advanced Visualization for Chemistry – Mario Valle – CSCS – March 7-8, 2006
Crop and scale Scale to a percentage of the original size convert -scale 50% img-from img-to
Scale to a percentage of the original size to create a thumbnail convert -thumbnail 50% img-from img-to
Create a thumbnail image with a given width (e.g. 170 pixels) convert -thumbnail 170x img-from img-to
Create a thumbnail image with a given height (e.g. 128 pixels) convert -thumbnail x128 img-from img-to
Advanced Visualization for Chemistry – Mario Valle – CSCS – March 7-8, 2006
7
Color manipulation Create a black and white image convert img-from -colorspace Gray img-to
Reduce the number of colors in the image (for example to reduce the size for the web). The second method produces nicer images, but bigger then the first one. convert +dither img-from -colors 64 img-to convert img-from -posterize 6 img-to
Advanced Visualization for Chemistry – Mario Valle – CSCS – March 7-8, 2006
Drawing and annotations Annotate the image with a text. This is better done using an interactive tool for a single image, but convert is very useful for a set of images to add, for example, copyright information to each of them. convert img-from -draw “text 50,10 ‘© Mario Valle 2006’” img-to
Add a logo to the image at position x=50 and y=10 without changing its size (0,0) convert img-from -draw “image Over 50,10 0,0 logo.tif” img-to
Create a not square solid color image (e.g. for a filler). If you leave out the '!' the resulting image will be 80x80 convert -geometry 512x80! XC:red filler.png
Advanced Visualization for Chemistry – Mario Valle – CSCS – March 7-8, 2006
Assemble images One image from four images. The geometry specify the size of the individual images in the resulting image montage -tile 2x2 -geometry 512x512 img[1234].png total.png
Add a chart (size 512x80) below an image (512x512) montage -tile 1x2 -mode Concatenate image.png chart.png \ result.png
Create an index page for all the images contained in one directory [see needed modifications to the result on my page] montage -label '%f\n%wx%h' '*.{jpg,gif,png,GIF,PNG}[1]' \ -tile 6x -frame 5 -shadow -geometry 120x90+5+5 \ ../INDEX.html
Advanced Visualization for Chemistry – Mario Valle – CSCS – March 7-8, 2006
8
Create an orthogonal view
Advanced Visualization for Chemistry – Mario Valle – CSCS – March 7-8, 2006
Create thumbnail web pages
Advanced Visualization for Chemistry – Mario Valle – CSCS – March 7-8, 2006
Color correction with LittleCMS Color corrected for HP1200PS
Original image Advanced Visualization for Chemistry – Mario Valle – CSCS – March 7-8, 2006
9
The GIMP color preview
Color printer rendering simulation
Color blindness simulation
Advanced Visualization for Chemistry – Mario Valle – CSCS – March 7-8, 2006
Movies – principal components Container AVI MOV MPEG
Codec (video, usually we create movies with no audio)
MPEG1 MPEG2 (DVD) MPEG4 (different implementations: MS Mpeg4 V2, Divx, xvid) X264
Narrative Boring Head-scratching puzzle Oscar-quality Advanced Visualization for Chemistry – Mario Valle – CSCS – March 7-8, 2006
Movies – usual concerns Codec availability Means everything works on your machine and nothing works on the conference room machine… Unfortunately there is no universal no-fuss coding method
File size Related to bitrate (quality), frame size, compressibility
Quality Depends strongly on bitrate and compression method (trades compression time for quality) Suggestions for natural movies did not apply to sharp edge ‘cartoon-like’ movies
Advanced Visualization for Chemistry – Mario Valle – CSCS – March 7-8, 2006
10
Container and codec questions Is a movie really needed? Set of static images? The speed and length are correct?
Output usage Personal projection, web, TV program, DVD burning, etc.
Technically skilled audience? Play and go or codec installation acceptable?
File size or quality? Frame size? Other methods considered? Maybe an animated GIF is sufficient
Advanced Visualization for Chemistry – Mario Valle – CSCS – March 7-8, 2006
Select container & codec Container
Codec
When
AVI
MPEG4
Best quality, huge set of tunable params, need installed codec (win)
AVI
MSMPEG4V2
Compromise for Win
MPEG
MPEG1
Universal format, bad quality
MPEG
MPEG2
DVD format, supported, huge files, fixed fps
MOV
MPEG4
Bad support outside MAC
MOV
Cinepak
Huge files, but more portable
Advanced Visualization for Chemistry – Mario Valle – CSCS – March 7-8, 2006
Input to movie creation Usually a set of frames (image files) or a uncompressed movie file Sizes should be multiple of 16
Better if the images are uncompressed (to conserve quality) Chose a framerate (usually 10-12 fps, but some standards have a fixed framerate) Not too much frames! (500 frames @ 12 fps 42 sec)
Advanced Visualization for Chemistry – Mario Valle – CSCS – March 7-8, 2006
11
Movie tools Mencoder My preferred workhorse It has a myriad of options (difficult to master)
Adobe Premiere Everything you can dream of Perfect for adding titles and transitions
VirtualDub (Win) / Kino (Linux) Simple editing
Other MJPEG, transcode, ffmpeg, ffmpegX, etc.
Advanced Visualization for Chemistry – Mario Valle – CSCS – March 7-8, 2006
GUI for mencoder
Advanced Visualization for Chemistry – Mario Valle – CSCS – March 7-8, 2006
Movie players Default ones Windows Media Player Quick Time Player (a triumph of non-usability)
Other ones Xine (plays AVI on Linux) Mplayer (plays almost everything on Linux and Windows) VLC (quick and multiplatform)
Advanced Visualization for Chemistry – Mario Valle – CSCS – March 7-8, 2006
12
Why chemistry should be boring?
Advanced Visualization for Chemistry – Mario Valle – CSCS – March 7-8, 2006
AntiAnti-boring notes Do not run too fast Add titles, legends and annotations Stop or slow down at important points Add arrows, labels and marks
Change the point of view Not too long! (500 frames @ 12 fps 42 sec)
Advanced Visualization for Chemistry – Mario Valle – CSCS – March 7-8, 2006
Web page Provides unique opportunity for more interactive experience. Applets can be used in place of static images. The browser is an universal user interface for data collections and some decision support systems. Limits are in the available screen space and the heterogeneity of the client browsers (for platform, type and installed plugins) Load time is a critical factor, if it is too long, the user is discouraged and can go away.
Advanced Visualization for Chemistry – Mario Valle – CSCS – March 7-8, 2006
13
Consider for web display Movies Download time Provide more than one resolution
Images Reduce number of colors Reduce size
Animated GIF Quick and light
Applets Jmol / JavaView
Advanced Visualization for Chemistry – Mario Valle – CSCS – March 7-8, 2006
Jmol
Advanced Visualization for Chemistry – Mario Valle – CSCS – March 7-8, 2006
JavaView
Advanced Visualization for Chemistry – Mario Valle – CSCS – March 7-8, 2006
14
What about the page itself? Hidden info is lost info Visibility with very little effort Or bad press with very little effort
It is not difficult and could be fun Think again about your audience and the goal of your page Be convinced that your visitors are not stupid They understand immediately if they can find something that helps them or if your pages are only ornate bla-bla.
Advanced Visualization for Chemistry – Mario Valle – CSCS – March 7-8, 2006
What about the page itself? Do little upfront planning What information do I want to share? Define a common look and feel
Go around the web with open eyes Gazillions of examples and good ideas on the web “Show source” is the most useful tool
Advanced Visualization for Chemistry – Mario Valle – CSCS – March 7-8, 2006
Structure the information you have
• Arguments/themes • Area indexes • File names
Advanced Visualization for Chemistry – Mario Valle – CSCS – March 7-8, 2006
15
Define a page template www.webpagesthatsuck.com
www.steves-templates.com
my template Advanced Visualization for Chemistry – Mario Valle – CSCS – March 7-8, 2006
Content
↔ presentation
Content: HTML
Moving to academia
In February 2003 I moved from a commercial company (Advanced Visual Systems)to a more academic workplace […].
Presentation: CSS h1 { font-size: 218%; font-weight: bold; color: #1266cb; margin-left: 10px; margin-top: 1.0em; } Advanced Visualization for Chemistry – Mario Valle – CSCS – March 7-8, 2006
Tools: editors Simple syntax highlighting text editors SciTE Visual C++ IDE
More specific editors
FrontPage Amaya Bluefish CSSed
(very nice, but it pretends too much to help me) (from W3.org, but it does not respect my choices) (excellent straight editor, but Linux only) (but it is simpler to buy an O’Reilly book)
Other MS Word MS PowerPoint
(always plus HTML Tidy!) (and live with huge pages…)
Advanced Visualization for Chemistry – Mario Valle – CSCS – March 7-8, 2006
16
Tools: other development tools
The astounding Web Developer toolbar! Advanced Visualization for Chemistry – Mario Valle – CSCS – March 7-8, 2006
Tools: checkers http://validator.w3.org/
Xenu
Mozie
Advanced Visualization for Chemistry – Mario Valle – CSCS – March 7-8, 2006
Tools: uploader
Unison – useful also for laptop and WS synchronization Advanced Visualization for Chemistry – Mario Valle – CSCS – March 7-8, 2006
17
Tools: access counters To see if at least someone visits my pages Webstats4u And I will try
But a web server based tool will be better (looks more professional)… Advanced Visualization for Chemistry – Mario Valle – CSCS – March 7-8, 2006
Something to take home
1. Do not use communication media without thinking about strengths and defects 2. Remember the “Wise grandmother rules” of communication
Advanced Visualization for Chemistry – Mario Valle – CSCS – March 7-8, 2006
Advanced Visualization for Chemistry Thanks for your attention! Mario Valle http://www.cscs.ch/~mvalle/
[email protected]
18
