![\"\"](\"http:\/\/lamartinieredesign.fr\/wp-content\/uploads\/2017\/10\/controlp5.jpg\")
<\/a><\/p>\nMenu Sketch > Importer une librairie > Ajouter une librairie…<\/p>\n
Chercher controlP5 dans la liste, le s\u00e9lectionner puis cliquer sur le bouton Install en bas \u00e0 droite.<\/p>\n
Voir l’usage des contr\u00f4leurs dans les exemples : Menu Fichier > Exemples\u2026 > Contributed Libraries > ControlP5.<\/p>\n
Positionner les Labels<\/h5>\n
Pour cr\u00e9er un contr\u00f4leur, par exemple un slider, le code de base ressemble \u00e0 cela dans le setup() :<\/p>\n
Ici, il faut choisir le nom du slider. Une variable doit \u00eatre cr\u00e9\u00e9e pr\u00e9alablement avec le m\u00eame nom. Celui-ci doit etre en bas-de-casses et ne comporter aucun caract\u00e8re sp\u00e9cial. Les param\u00e8tres de position (setPosition), dimension (setSize), \u00e9chelle de valeurs (setRange), valeur par d\u00e9faut (setValue) et \u00e9tiquette (setLabel) sont d\u00e9finis. L’\u00e9tiquette correspond au texte qui apparait dans l’interface. Il est possible\u00a0 d’utiliser tous signes pour cela mais il faut \u00eatre clair. C’est en g\u00e9n\u00e9ral le minimum que l’on utilise. La liste compl\u00e8te est visible dans les exemples (Menu Fichier > Exemples…).<\/p>\n Afin de pouvoir contr\u00f4ler certains param\u00e8tres non pr\u00e9sents dans cette liste, il faut l\u00e9g\u00e8rement modifier le code, comme ci-dessous :<\/p>\n La diff\u00e9rence tient dans une variable du mime type que le contr\u00f4leur, ici Slider, \u00e0 laquelle on doit donner un nom, ici sl1 (pour slider 1 par exemple). Cela permet d’ajouter apr\u00e8s le point-virgule, des lignes de code pour r\u00e9gler de nouveaux param\u00e8tres.<\/p>\n Ici, nous allons modifier la position de l’\u00e9tiquette.\u00a0 Il faut commencer par cr\u00e9er une nouvelle variable de type Label, que j’ai choisi de nommer labelSl1. On peut alors lui attribuer des param\u00e8tres. De la m\u00eame mani\u00e8re, il est possible de modifier d’autres param\u00e8tres d’un Label, par exemple sa visibilit\u00e9 :<\/p>\n Il faut pour cela cr\u00e9er une fonction controlEvent sp\u00e9cifique, apr\u00e8s (et surtout en dehors) le draw, afin de d\u00e9tecter une action sur un contr\u00f4leur.<\/p>\n Par exemple :<\/p>\n Parfois, il suffit de cr\u00e9er une fonction portant le nom du contr\u00f4leur.<\/p>\n Par exemple, pour un contr\u00f4leur Bang, qui s’appellerait \u00ab\u00a0reset\u00a0\u00bb\u00a0 :<\/p>\n Les contr\u00f4leurs CP5 ne doivent pas \u00eatre plac\u00e9s dans le draw(), sinon Processing pense qu’il les cr\u00e9e plusieurs fois et cela g\u00e9n\u00e8re des erreurs. Il faut les cr\u00e9er une seule fois dans le setup().<\/p>\n Ensuite, il est possible de modifier leurs propri\u00e9t\u00e9s. Pour un bouton, la modification d’\u00e9tat du bouton se fait par un void sp\u00e9ccifique, par exemple pour un bouton nomm\u00e9 A, lorsqu’on appuie dessus, il commence par disparaitre, puis r\u00e9alise les actions de votre choix :<\/p>\n Le contr\u00f4le des propri\u00e9t\u00e9s de ce bouton se font donc en \u00e9crivant la ligne cp5.getController(\u00ab\u00a0A\u00a0\u00bb).propri\u00e9t\u00e9();<\/p>\n Ici les propri\u00e9t\u00e9s hide() et show() permettent de masquer ou d’afficher un bouton. La ligne suivante permet d’afficher le bouton nomm\u00e9 \u00ab\u00a0B\u00a0\u00bb.<\/p>\n <\/p>\n <\/p>\n","protected":false},"excerpt":{"rendered":" Installer controlP5 Il faut d’abord charger la biblioth\u00e8que controlP5 dans Processing pour avoir acc\u00e8s \u00e0 la cr\u00e9ation d’\u00e9l\u00e9ments d’interface gr\u00e2ce \u00e0 de nombreux contr\u00f4leurs, comme ci-dessous par exemple. Menu Sketch > Importer une librairie > Ajouter une librairie… Chercher controlP5 dans la liste, le s\u00e9lectionner puis cliquer sur le bouton Install en bas \u00e0 droite. … Continuer la lecture de ControlP5<\/span> cp5.addSlider(\"nom\")<\/code>
\n\u00a0 .setPosition(10, 20)<\/code>
\n\u00a0 .setSize(90, 10)<\/code>
\n\u00a0 .setRange(0, 100)<\/code>
\n\u00a0 .setValue(0)<\/code>
\n\u00a0 .setLabel(\"\u00e9tiquette\")<\/code>
\n\u00a0 ;<\/code><\/p>\nSlider sl1 = cp5.addSlider(\"nom\")<\/code>
\n\u00a0 .setPosition(10, 20)<\/code>
\n\u00a0 .setSize(90, 10)<\/code>
\n\u00a0 .setRange(0, 100)<\/code>
\n\u00a0 .setValue(0)<\/code>
\n\u00a0 .setLabel(\"\u00e9tiquette\")<\/code>
\n\u00a0 .setColorLabel(110) \/\/ gris fonc\u00e9 <\/code>
\n\u00a0 ;<\/code>
\n
\n<\/code>Label labelSl1 = sl1.getCaptionLabel();<\/code>
\n labelSl1.align(ControlP5.TOP, LEFT);<\/code>
\n labelSl1.getStyle().setMarginTop(-10);<\/code><\/p>\n
\nD’abord l’alignement. les valeurs d’alignement sont d’abord verticale (TOP, BOTTOM, TOP_OUTSIDE, BOTTOM_OUTSIDE), puis horizontale (LEFT, RIGHT, LEFT_OUTSIDE, RIGHT_OUTSIDE).
\nEnfin, un d\u00e9calage par rapport \u00e0 la position obtenue peut etre appliqu\u00e9 en pixels (setMarginTop, setMarginBottom, setMarginLeft, setMarginRight, setPaddingTop, setPaddingBottom, setPaddingLeft, setPaddingRight).<\/p>\nlabelSl1.hide;<\/code><\/p>\nModifier un param\u00e8tre d’un contr\u00f4leur sur un \u00e9v\u00e9nement<\/h5>\n
public void controlEvent(ControlEvent theEvent) {<\/code>
\n\u00a0 if(theEvent.isController()) { <\/code>
\n\u00a0\u00a0\u00a0 \/\/ d\u00e9signe un contr\u00f4leur par son nom<\/code>
\n\u00a0 if(theEvent.getController().getName()==\"slider1\") {<\/code>
\n\u00a0\u00a0\u00a0 float value = theEvent.getController().getValue();<\/code><\/p>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \/\/ prevent warnings at start<\/code>
\n\u00a0\u00a0\u00a0\u00a0\u00a0 if(cp5.getController(\"slider1\") != null) { <\/code>
\n\/\/ modifie\u00a0\u00a0 les couleurs du slider1<\/code>
\ncp5.getController(\"slider1\").setColorForeground(color(r,v,b));<\/code>
\n cp5.getController(\"slider1\").setColorActive(color(r,v,b));<\/code>
\n cp5.getController(\"slider1\").setColorBackground(color(r,v,b));<\/code>
\n\/\/ modifie une propri\u00e9t\u00e9 d'un autre slider<\/code>
\n cp5.getController(\"slider2\").setColorForeground(color(r,v,b));<\/code>
\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 }<\/code>
\n\u00a0\u00a0\u00a0\u00a0\u00a0 }<\/code>
\n\u00a0\u00a0 }<\/code>
\n}<\/code><\/p>\npublic void reset() {<\/code>
\n\u00a0 \/\/ redessiner l'\u00e9cran<\/code>
\n\u00a0 background(255);<\/code><\/p>\n\u00a0 \/\/ remettre un slider \u00e0 sa valeur initiale<\/code>
\n\u00a0 Slider sl1 = ((Slider)cp5.getController(\"nom\"));<\/code>
\n\u00a0 sl1.setValue(nom);<\/code>
\n}<\/code><\/p>\nExemple pour Masquer ou afficher un bouton<\/h5>\n
public void A(int theValue) {<\/code>
\n\u00a0\u00a0 cp5.getController(\"A\").hide();<\/code>
\n\u00a0\u00a0 \/\/ actions \u00e0 saisir<\/code>
\n}<\/code><\/p>\ncp5.getController(\"B\").show();<\/code><\/p>\n