Rendering ControlP5 or CP5magic controls when exporting PDF

This is an answer to the discussion "Rendering ControlP5 or CP5magic controls when exporting PDF" found in the old, now locked processing-forum, in the hope the involved people will stumple upon it.

@didi @toxmeister @proceduralstrategies

Original discussion: https://forum.processing.org/one/topic/rendering-controlp5-or-cp5magic-controls-when-exporting-pdf.html

Had this issue working (see petter-gallery (all pdfs with the grey gui-bar on the right) or petter-github) until recently it stopped working. Took me a while to find out why/when/what...and how to make it working again (with ControlP5 v2.2.X).

I hooked up a working example (tested with ControlP5 v2.2.5 and Processing 3.0.1) Also see code comments:

//press SPACE to export PDF
//based on cp5-library-example: "ControlP5quick" by Andreas Schlegel

import controlP5.*;
import processing.pdf.*;


ControlP5 cp5;
PGraphicsPDF pdf;

boolean exportNow = false;

float s1 = 5;
float s2 = 2;
boolean t1 = true;
boolean t2 = true;
boolean t3 = true;
boolean t4 = true;
float n1 = 100;
int n2 = 50;

void setup() {
  size(600,400);
  noStroke();

 /**
  * Create and set a "ControlFont" (ttf) for best
  * pdf-vector-output. (Installed) fontname or path to ttf-file.
  * "PF Arma Five" looks similar to original cp5-font and works great:
  * http://www.dafont.com/pf-arma-five.font
  */

  PFont pfont = createFont("Arial", 8, false);
  ControlFont font = new ControlFont(pfont);

  cp5 = new ControlP5(this, font);
  //cp5.setAutoDraw(false);

  //add controllers
  cp5.addButton("b1",1);
  cp5.addButton("b2",2);
  cp5.addButton("b3",3);
  cp5.addButton("b4",4).linebreak();
  cp5.addSlider("s1",0,10);
  cp5.addSlider("s2",0,10).linebreak();
  cp5.addButton("b5");
  cp5.addToggle("t1");
  cp5.addToggle("t2");
  cp5.addToggle("t3");
  cp5.addToggle("t4").linebreak();
  cp5.addNumberbox("n1");
  cp5.addNumberbox("n2");
}

void draw() {

  if(exportNow) {
    pdf = (PGraphicsPDF) createGraphics(600, 400, PDF, "guiexport.pdf");
    beginRecord(pdf);

    pdf.noStroke();
  }

  //draw stuff
  background(0);
  if(t1) {
    fill(s1*25);
    rect(0,200,150,height);
  }
  if(t2) {
    fill(s2*25);
    rect(150,200,150,height);
  }
  if(t3) {
    fill(n1);
    rect(300,200,150,height);
  }
  if(t4) {
    fill(n2);
    rect(450,200,150,height);
  }

  //cp5.draw();
  /**
   * Prior to ControlP5-version ~2.0.4 "cp5.draw();" was drawing
   * to either the canvas or to the pdf (if started with beginRecord(pdf) )
   * with cp5.setAutoDraw(false);
   *
   * As this does not work anymore with v 2.2.x you need to explicitly
   * draw cp5 to the pdf.
   * As "cp5.draw(PGraphics)" does not exist,
   * you can call "controllerxy.draw(pdf)" of every single controller, or
   * as i found out, "cp5.getWindow().draw(pdf)", see below!
   * This draws the whole gui! No idea how future-proof this is!?
   * Note that "pdf" is the PGraphicsPDF-instance created right
   * before "beginRecord(pdf); in draw-loop"
   */

  if(exportNow) {
    exportNow = false;
    cp5.getWindow().draw(pdf);
    endRecord();
  }
}

//press SPACE to export PDF
void keyPressed() {
  if (keyCode == ' ') {
    exportNow = true;
  }
}

That's it, should work! best, benson.