Rendering ControlP5 or CP5magic controls when exporting PDF

benson

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.