# How to use controlP5 in second window using python mode

**URL:** <https://discourse.processing.org/t/how-to-use-controlp5-in-second-window-using-python-mode/13253>\
**Category:** Processing.py\
**Created:** [August 8, 2019, 10:47am UTC](https://discourse.processing.org/t/how-to-use-controlp5-in-second-window-using-python-mode/13253 "2019-08-08T10:47:19Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![rumidita](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/rumidita/32/6042_2.png) [@rumidita](https://discourse.processing.org/u/rumidita)\
**Post date:** [August 8, 2019, 10:47am UTC](https://discourse.processing.org/t/how-to-use-controlp5-in-second-window-using-python-mode/13253/1 "2019-08-08T10:47:19Z")

</div>

Hello,

I want to put a button in the second window using ‘bang’ function from controlP5 library.  
I managed to do it in the main window, but it fails when I try to put in the second window. Instead of appearing in the second window, the bang button appears in the main window.

Here is my code,

```auto
add_library('controlP5') 

def setup():    
    size(300, 300)
    global sa
    global cp5
    sa = SecondApplet()
    switches = '--sketch-path=' + sketchPath(), '' 
    PApplet.runSketch(switches, sa) 
    
def draw():
    background(200)    

class SecondApplet(PApplet):
    global parent
    parent = PApplet    
   
    def settings(p):
        p.size(300, 100), p.smooth(3), p.noLoop()
 
    def setup(p):
        p.width == 100 and p.settings()

        cp5 = ControlP5(this)
        cp5.addBang('OK').plugTo(parent,'OK').setPosition(50,50)\
                         .setSize(60,30)\
                         .getCaptionLabel().align(ControlP5.CENTER, ControlP5.CENTER)        
 
    def draw(p):
        p.background(-1), p.fill(0)
        p.text("File is not found", 10, 10)

```

I tried to adapt from [this](https://forum.processing.org/two/discussion/13446/events-with-two-windows-using-controlp5-processing-3) which is written in Java. To be honest, I am still pretty new with this coding world, so, I do not know excatly how to convert this java to python.

Thanks for your time.

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [August 11, 2019, 6:42am UTC](https://discourse.processing.org/t/how-to-use-controlp5-in-second-window-using-python-mode/13253/2 "2019-08-11T06:42:17Z")

</div>

> [@rumidita](#):
>
> `cp5 = ControlP5(this)`

While both in Java & JS `this` is a keyword, in Python Mode it’s merely another `global` variable. 😮

Given SecondApplet is a subclass of PApplet, you need to pass its reference to ControlP5: 💡  
`cp5 = ControlP5(p)`.

---

<div class="post-metadata">

**Author:** ![rumidita](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/rumidita/32/6042_2.png) [@rumidita](https://discourse.processing.org/u/rumidita)\
**Post date:** [August 19, 2019, 3:06am UTC](https://discourse.processing.org/t/how-to-use-controlp5-in-second-window-using-python-mode/13253/3 "2019-08-19T03:06:01Z")

</div>

I see. I missed passing the reference to ControlP5. That’s why it appears in the main window.  
Now, it works as desired. Thanks.

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [August 19, 2019, 4:10am UTC](https://discourse.processing.org/t/how-to-use-controlp5-in-second-window-using-python-mode/13253/4 "2019-08-19T04:10:29Z")

</div>

> [@rumidita](#):
>
> That’s why it appears in the main window.

Python Mode’s `global` variable _this_ is the reference for the main PApplet canvas. 🎨

---

<div class="post-metadata">

**Author:** ![rumidita](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/rumidita/32/6042_2.png) [@rumidita](https://discourse.processing.org/u/rumidita)\
**Post date:** [August 19, 2019, 10:03am UTC](https://discourse.processing.org/t/how-to-use-controlp5-in-second-window-using-python-mode/13253/5 "2019-08-19T10:03:43Z")

</div>

> [@GoToLoop](#):
>
> Python Mode’s `global` variable _this_ is the reference for the main PApplet canvas. 🎨

I should note that the global variable _this_ is for the main PApplet canvas. 👍 Thanks

Now, I got another problem.  
I want to execute a function when the bang is clicked.  
I add `.onClick(myFunction)` and declare the global function of `myFunction`. But, it seems nothing happens. I do the same for the controller in the main PApplet canvas, and it works well. So, I don’t get why it cannot work in the subclass.

I write my code as below.

```auto
add_library('controlP5') 

def setup():    
    size(300, 300)
    global sa
    global cp5
    sa = SecondApplet()
    switches = '--sketch-path=' + sketchPath(), '' 
    PApplet.runSketch(switches, sa) 
    
def draw():
    background(200)    

class SecondApplet(PApplet):
    global parent
    parent = PApplet    
   
    def settings(p):
        p.size(300, 100), p.smooth(3), p.noLoop()
 
    def setup(p):
        p.width == 100 and p.settings()

        cp5 = ControlP5(p)
        cp5.addBang('OK').plugTo(parent,'OK').setPosition(50,50)\
                         .setSize(60,30)\
                         .onClick(myFunction)\
                         .getCaptionLabel().align(ControlP5.CENTER, ControlP5.CENTER)        
 
    def draw(p):
        p.background(-1), p.fill(0)
        p.text("File is not found", 10, 10)

def myFunction(theValue):    
    print('It is OK!')

```

I wonder if there is something missing that I have to declare or define.

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [August 19, 2019, 2:43pm UTC](https://discourse.processing.org/t/how-to-use-controlp5-in-second-window-using-python-mode/13253/6 "2019-08-19T14:43:31Z")

</div>

After creating a more simplified example: 😅

```auto
# https://Discourse.Processing.org/t/
# how-to-using-controlp5-in-second-window-using-python-mode/13253/6

# GoToLoop (2019-Aug-19)

add_library('controlP5')

def settings():
    size(150, 150)
    Other()

def setup():
    ControlP5(this).addBang('Main').onClick(bangCallback)

def draw():
    background(0)

def bangCallback(v):
    print v.controller

class Other(PApplet):
    SW_PATH = '--sketch-path='
    MAGENTA = 0xFFff00ff

    def __init__ (p):
        switches = Other.SW_PATH + sketchPath(), ''
        PApplet.runSketch(switches, p)

    def settings(p):
        p.size(150, 150)

    def setup(p):
        ControlP5(p).addBang('Other').onClick(bangCallback)

    def draw(p):
        p.background(Other.MAGENTA)

```

I’ve just realized the “bug” is due to calling **noLoop()** within SecondApplet::**settings()**: 🐛  
`p.size(300, 100), p.smooth(3), p.noLoop()`

---

<div class="post-metadata">

**Author:** ![rumidita](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/rumidita/32/6042_2.png) [@rumidita](https://discourse.processing.org/u/rumidita)\
**Post date:** [August 20, 2019, 2:42am UTC](https://discourse.processing.org/t/how-to-use-controlp5-in-second-window-using-python-mode/13253/7 "2019-08-20T02:42:03Z")

</div>

> [@GoToLoop](#):
>
> the “bug” is due to calling **noLoop()** within SecondApplet:: **settings()**

Thanks for mentioning this point. This really solves the problem.  
😊 😊

The example that you provided is also helped to understand the difference for using the **controlP5** library in the main canvas and in the subclass. 🤩