5

How do I convert this PDF from a WASD keyboard layout into tikz code. Is there an automated way to at least extract the key outlines?

Martin Scharrer
  • 262,582
Neil G
  • 17,947
  • 3
    Looks like nodes with rounded corners to me. To do a "proper" conversion rather than a reconstruction, you could convert the PDF to SVG and then TikZ can read SVG (or you can convert it to TikZ code via Inkscape). Search for SVG here. – Andrew Stacey Oct 08 '12 at 16:39
  • @AndrewStacey: I want the outlines, but not the text because I want to eventually write in new text into the keys. If I understand their website, they can use the pdf to make a custom keyboard. – Neil G Oct 08 '12 at 17:05
  • 1
    As @AndrewStacey commented, define a node style with rounded corners and minimum size corresponding to the "square" keys. Allow for an option to change this minimum size to be able to generate the wider (and taller) keys. Then it is just a matter of coming up with a placement algorithm -- I'd probably do 5 separate \foreach loops: one for the top row, main keyboard, arrows, the insert/home keys above the arrow group, and the numerical keyboard. Hmm perhaps for the main keyboard it might be simpler to place each row separately. – Peter Grill Oct 08 '12 at 18:26
  • If you want to reproduce it more accurately, convert to SVG and then overlay a tikz coordinate grid on top so you know where your nodes should be placed. Then on top you could add a white fill to eliminate the text and replace it with your own. Once you do this it won't be much work to draw the nodes as well and then you can eliminate the overlay step and will have duplicated the layout and have complete flexibility as to what text is placed on the keys. Now that I think about it a bit more I would do this step to help me get started. – Peter Grill Oct 08 '12 at 18:28

1 Answers1

5

You don't need to convert to SVG because you can use pdf and draw on it. Next code was taken from Caramdir's and Jake's answers to Drawing on an image with TikZ. (I use a pdfcroped WASD file because the original has a lot of white space around). 

\documentclass[tikz]{standalone}

\begin{document}
\begin{tikzpicture}[font=\sffamily\Large]
    \node[anchor=south west,inner sep=0] (image) at (0,0) {\includegraphics{wasd_104_classic-crop}};
\begin{scope}[x={(image.south east)},y={(image.north west)}]
\draw[help lines,xstep=.05,ystep=.05] (0,0) grid (1,1);
\foreach \x in {0,1,...,9} { \node [anchor=north] at (\x/10,0) {0.\x}; }
\foreach \y in {0,1,...,9} { \node [anchor=east] at (0,\y/10) {0.\y}; }
\node[fill=red!15,draw=red] at (0.112,0.38) {H};
\node[fill=white,draw=red] at (0.157,0.38) {H};
\node[fill=white,draw=red] at (0.205,0.38) {H};
\end{scope}
\end{tikzpicture}
\end{document}

enter image description here

You can also use some of the fonts from Keyboard Font for LaTeX to draw your keys.

Community
  • 1
Ignasi
  • 136,588