How to size all my radio items to be the same size

I am trying to create a set of radio buttons. The code works well when the radio labels are of the same size but as the text length changes it causes some funny formatting issues. I have tried changing the width pixel but it will not format things properly when the difference in size is too great. Below is my code along with a screenshot of the result

var radio;


function setup()
{
  //create a drawing service 500px wide, 500px tall
  createCanvas(700,300);


  radio = createRadio();
  radio.style('width', '100px');
  radio.option("dragons");
  radio.option("hippopotamus");
  radio.option("tigers");
  radio.position(50,70);
}

function draw()
{
  //draw circle in centre of sketch
  background(255,255,255);
}

Screen Shot 2016-09-14 at 2.19.18 PM

Answers

  • edited September 2016

    Why bother when you can program your way around it...

    int test1=0, test2=0;
    
    void setup() {
      size(500, 500);
      background(255);
    }
    
    void draw() {
      test1=radioButton(100, 150, 1, test1, "One", "Two", "Three", "Four");
    
      test2=radioButton(200, 150, 2, test2, "One", "Two", "Three", "Four");
    }
    
    int radioButton(int x, int y, int mode, int opt, String...options) {
      int i=0, k=opt, x2=0, y2=0, mx=65;
      boolean e=false;
      color c1, c2, c3, c4, c5, c6;
    
      ellipseMode(CENTER);
    
      for (String option: options) {
        i++;
        if (mode==1){x2=0; y2=(20*(i-1));}
        else if (mode==2){x2=(mx*(i-1)); y2=0;}
    
        if (mouseX>x+x2 && mouseX<x+x2+25+int(textWidth(option)) && mouseY>y-10+y2 &&mouseY<y+10+y2) {
          c1=color(89, 137, 165); c2=color(219, 246, 248); c3=color(175, 222, 253); c4=color(170, 221, 253);
          c5=color(229, 246, 254);  c6=color(203, 235, 253);
        }
        else {c1=color(145); c2=color(242); c3=color(187, 190, 194); c4=color(200, 205, 210);
          c5=color(255); c6=color(229);
        }
        stroke(c1); fill(255);
        ellipse(x+10+x2, y+y2, 12, 12);
        stroke(c2); fill(255);
        ellipse(x+10+x2, y+y2, 10, 10);
        stroke(c3); 
        fill(c4);
        ellipse(x+10+x2, y+y2, 8, 8);
        stroke(c5); 
        fill(c5);
        triangle(x+7+x2, y+2+y2, x+13+x2, y+y2, x+10+x2, y+3+y2);
        strokeWeight(2);
        stroke(c6);
        line(x+7+x2, y+1+y2, x+13+x2, y-1+y2);
        strokeWeight(1);
        textAlign(LEFT,CENTER);
        fill(0);
        text(option, x+25+x2, y+y2);
      }
      i=0;
    
      for (String option: options) {
        i++;
        if (mode==1){x2=0; y2=(20*(i-1));}
        else if (mode==2){x2=(mx*(i-1)); y2=0;}
        if (mousePressed && mouseX>x+x2 && mouseX<x+x2+25+int(textWidth(option)) && mouseY>y-10+y2 &&mouseY<y+10+y2) {
          k=i;
          e=true;
        }
        else if (opt==i && e==false) {
          stroke(0); 
          fill(14, 132, 198);
          ellipse(x+10+x2, y+y2, 6, 6);
          k=opt;
        }
      }
    
      return (k);
    }
    
Sign In or Register to comment.