how to program a gui for neopixels

edited January 2015 in How To...

hello forum,

i m a processing beginner. i want to do an led project with the adafruit fadecandy, neopixel led strips and processing as controlling software.

my idea is to program a gui with processing. i want to have gui with different buttons and control elements to manipulate the action performed by the leds. this includes that draw() should not only do one action that can be manipulated, i would like to have different animations in draw depending on the selected button.

basically: click button1: draw makes a pulsating ellipse on the leds click button 2: draw makes the a leds blink in a strobe like manner click button 3: draw makes something completely different...and so on

but until now i couldn t find any example of a program which is doing this.

what i found out is that the controlp5 library helps me with the control elements.

Is it possible to program such an gui with processing? Can somebody give me suggestion how to build such a program?

best simon

Answers

  • Sure it's possible! Just use ControlP5 (for example with tabs or a radiobutton) and check which animation it should draw depending on the state.

    I modified the RadioButton example sketch:

    import controlP5.*;
    
    ControlP5 cp5;
    
    RadioButton r;
    
    void setup() {
      size(700, 400);
    
      cp5 = new ControlP5(this);
      r = cp5.addRadioButton("radioButton")
        .setPosition(20, 20)
          .setSize(40, 20)
            .setColorForeground(color(120))
              .setColorActive(color(255))
                .setColorLabel(color(255))
                  .setItemsPerRow(5)
                    .setSpacingColumn(50)
                      .addItem("1", 1)
                        .addItem("2", 2)
                          .addItem("3", 3)
                            .addItem("4", 4)
                              .addItem("5", 5)
                                ;
    }
    
    void draw()
    {
      background(0);
      int state = (int) r.getValue();
      noStroke();
      switch(state)
      {
      case 1 : 
        fill(255, 0, 0);
        ellipse(width*0.5, height*0.5, 50, 50);
        break;
      case 2 : 
        fill(0, 255, 0);
        rect(width*0.5-25, height*0.5-25, 50, 50);
        break;
      case 3 : 
        fill(0, 0, 255);
        quad(width*0.5-25, height*0.5, width*0.5, height*0.5+25, width*0.5+25, height*0.5, width*0.5, height*0.5-25);
        break;
      case 4 :
        fill(255, 255, 0);
        ellipse(frameCount%200 + width*0.5-100, height*0.5, 50, 50);
        break;
      case 5 : 
        stroke(255);
        for (int i = 0; i < 100; i++)
        {
          point(random(width), random(height));
        }
        break;
      }
    }
    
  • hey colouredmirrorball,

    thanks very much...now i get an idea...

Sign In or Register to comment.