2

Here's the idea. I'd like my students to have a PDF with fillable fields, and a (simple) drawing will be made in that same PDF according to the data they've entered. Say, they'd enter the radius of the circle that'd be drawn. I figured maybe that's possible if I created the PDF in Latex, since there're sophisticated things like creating animations in PDF and stuff. What do you guys think? Would that even be possible? Is there any other environment for "programming" PDFs I'm not even aware of? Thanks!

Josh Labaki
  • 21
  • 1
  • Welcome to TeX.SE. – CampanIgnis Apr 16 '20 at 13:43
  • PDF doesn't provide a Canvas object and hence no DOM representation in JavaScript. So you cannot programmatically generate graphics during viewing time. Any graphics in a PDF is static. – AlexG Apr 16 '20 at 13:48
  • @AlexG The trick is to exploit annotations. PDF JavaScript does allow manipulating annotations and annotations can have a lot of forms, like e.g. circles, free hand lines, lines, etc. This might require Acrobat Pro though. – Marcel Krüger Apr 16 '20 at 13:50
  • @MarcelKrüger Yes, you are right. Such markup with primitive geometric forms is possible. But it is different from the PostScript-derived graphic model used in the page stream. And its possibilities are very limited. – AlexG Apr 16 '20 at 13:53
  • Maybe one would be better off using SVG as LaTeX output format instead of PDF. It has unlimited possibilities for viewing-time manipulation. – AlexG Apr 16 '20 at 13:57
  • @Josh I have tried doing this exact thing. Perhaps seeing this might help. – Someone Apr 16 '20 at 15:17
  • Or at least something similar – Someone Apr 16 '20 at 15:32

1 Answers1

2

PDF may not be the appropriate format for this, but SVG certainly is. Graphical objects are scriptable with JavaScript.

Click on the image and press F11 for Full-Screen:

Compile the TeX input with

latex example
latex example
dvisvgm --bbox=papersize --font-format=woff2 --zoom=-1 example

example.tex:

\documentclass[aspectratio=169]{beamer}
\usefonttheme{serif}

\usepackage{atbegshi}
\AtBeginShipout{\AtBeginShipoutUpperLeft{%
  \special{dvisvgm:rawdef
    <script type="text/javascript">
      <![CDATA[ function $(id){return document.getElementById(id.toString().trim());}; ]]>
    </script>
  }}}

\begin{document}

\begin{frame}[t]{Interactive graphics}

Enter $x, y, R$:
\special{dvisvgm:raw
  <foreignObject transform='translate({?x},{?(y-14)})' width='100' height='20'>
    <input type='text' id='myInput' value='-140,-80,20'
      style='font-size: 10px; padding: 0; border-radius:0'
      xmlns='http://www.w3.org/1999/xhtml'/>
  </foreignObject> 
}\hspace{110bp}
\special{dvisvgm:raw
  <foreignObject transform='translate({?x},{?(y-16)})' width='128' height='34'>
    <input id="mySubmit" type='submit' value='Draw circle'
      onclick='
        [x,y,R]=$("myInput").value.toString().split(",");
        $("myCircle").setAttribute("cx", x);
        $("myCircle").setAttribute("cy", y);
        $("myCircle").setAttribute("r", R);
      '
      xmlns='http://www.w3.org/1999/xhtml'/>
  </foreignObject> 
}\\[0.3\textheight]

\makebox[\linewidth]{%
  \special{dvisvgm:raw
     <g transform='translate({?x},{?y})scale(1,-1)'>
     <circle id="myCircle" cx="-140" cy="-80" r="20" stroke="black" stroke-width="3" fill="red"/>
     <circle fill="black" r="3"/>
     </g>
  }\makebox[0pt][l]{$\;(0,0)$}}
\end{frame}

\end{document}
AlexG
  • 54,894