WYSIWYG graphics editing

Proposed tip Please edit this page to improve it, or add your comments below (do not use the discussion page).

Please use new tips to discuss whether this page should be a permanent tip, or whether it should be merged to an existing tip.

created August 7, 2009 · complexity basic · author Michael.Eriksson · version 7.0

---

I recently found myself in want of a favicon. Not wanting to mess around with typical WYSIWYG editors, I wrote a Bash script that generated a PPM file based on a data matrix corresponding to the individual pixels of the eventual favicon. By applying syntax highlightning to the data matrix, I effectively had a WYSIWYG display of the eventual image within Vim.

The true favicon was a five color, 32x32 matrix, mixing the Swedish and German flags (that I indeed did some extensive editing on, trying a number of variations). The below gives a simplified version using a 7x5 Swedish flag with two colors.

Bash (output to be directed into a .ppm file):

#!/bin/bash -u
# basic colors from rgb.txt
k = '0 0 0'
b = '0 0 139'
g = '0 100 0'
c = '0 139 139'
r = '139 0 0'
m = '139 0 139'
y = '165 42 42'
w = '211 211 211'
K = '169 169 169'
B = '0 0 255'
G = '0 255 0'
C = '0 255 255'
R = '255 0 0'
M = '255 0 255'
Y = '255 255 0'
W = '255 255 255'

function outputLine() {
    for color in $*
    do
        eval echo "\$$color"
    done
}

# PNM header
# P1=PBM (B&W) P2=PGM (greyscale) P3=PMM (full-color) P4-P6=binary P7=PNM (any)
echo 'P3'
# with / height
echo '7 5'
# color depth
echo '255'

#           The below is the colored matrix. (Could be in a separate file.)
outputLine  B B Y B B B B
outputLine  B B Y B B B B
outputLine  Y Y Y Y Y Y Y
outputLine  B B Y B B B B
outputLine  B B Y B B B B

Syntax highlighting to apply to the Vim buffer to make the matrix appear in solid colors:

if version < 600
  syntax clear
elseif exists(b:current_syntax)
  finish
endif

syn region ppmOutputline
 \ matchgroup=ppmKeyword
 \ keepend
 \ start=/^\s*outputline\>/
 \ end=/$/
 \ contains=ppmBlack,ppmDarkblue,ppmDarkgreen,ppmDarkcyan,ppmDarkred,ppmDarkmagenta,
    \ppmBrown,ppmLightgrey,ppmDarkgrey,ppmBlue,ppmGreen,ppmCyan,ppmRed,ppmMagenta,
    \ppmYellow,ppmWhite

syn match ppmBlack       /\C k/ contained
syn match ppmDarkblue    /\C b/ contained
syn match ppmDarkgreen   /\C g/ contained
syn match ppmDarkcyan    /\C c/ contained
syn match ppmDarkred     /\C r/ contained
syn match ppmDarkmagenta /\C m/ contained
syn match ppmBrown       /\C y/ contained
syn match ppmLightgrey   /\C w/ contained
syn match ppmDarkgrey    /\C K/ contained
syn match ppmBlue        /\C B/ contained
syn match ppmGreen       /\C G/ contained
syn match ppmRed         /\C R/ contained
syn match ppmMagenta     /\C M/ contained
syn match ppmYellow      /\C Y/ contained
syn match ppmWhite       /\C W/ contained

hi ppmBlack       ctermbg=Black       ctermfg=LightGrey     guibg=black       guifg=white
hi ppmDarkblue    ctermbg=DarkBlue    ctermfg=LightGrey     guibg=darkblue    guifg=white
hi ppmDarkGreen   ctermbg=DarkGreen   ctermfg=LightGrey     guibg=darkgreen   guifg=white
hi ppmDarkCyan    ctermbg=DarkCyan    ctermfg=LightGrey     guibg=darkcyan    guifg=white
hi ppmDarkRed     ctermbg=DarkRed     ctermfg=LightGrey     guibg=darkred     guifg=white
hi ppmDarkMagenta ctermbg=DarkMagenta ctermfg=LightGrey     guibg=darkmagenta guifg=white
hi ppmBrown       ctermbg=Brown       ctermfg=LightGrey     guibg=brown       guifg=white
hi ppmLightgrey   ctermbg=LightGrey   ctermfg=Black         guibg=lightgrey   guifg=black
hi ppmDarkgrey    ctermbg=DarkGrey    ctermfg=White         guibg=darkgrey    guifg=white
hi ppmBlue        ctermbg=Blue        ctermfg=White         guibg=blue        guifg=white
hi ppmCyan        ctermbg=Cyan        ctermfg=DarkGrey      guibg=cyan        guifg=white
hi ppmRed         ctermbg=Red         ctermfg=White         guibg=red         guifg=black
hi ppmMagenta     ctermbg=Magenta     ctermfg=White         guibg=magenta     guifg=black
hi ppmYellow      ctermbg=Yellow      ctermfg=DarkGrey      guibg=yellow      guifg=black
hi ppmWhite       ctermbg=White       ctermfg=DarkGrey      guibg=white       guifg=black

hi def link ppmKeyword Keyword

A much larger write-up with the full examples and some screen-shots is available. (I hope that the size justifies the external link.) The above should suffice to reproduce everything, however.

Comments

TODO:

• Include "sh" syntax for lines other than "outputline"
• Foreground: same as bg (for solid colors) or distinct from bg (to facilitate editing)?