Question about sliders in controlP5 library (in Android mode)

Processing for Android
21

Is anyone still supporting Skatalo? There are two open issues on the Skatalo Github page, both opened in 2017 and not assigned to anybody. Looks like it’s orphanware too.

1 Like
22

I I got stuck on the touch issue two years ago, and I didn’t find a solution other than this alternative library, and I haven’t followed up on it since then.

It was perfect for my project

23

@jafal I understand, but I don’t want to invest a lot of my time in something that is no longer supported, even if it’s free. And although it’s open source and I could modify the source code myself, I don’t want to have to spend a lot of time trying to debug something if I run into another problem. I’m not really an expert in Java.

1 Like
24

@David

Yes sir I just commented and mentioned my experience with controlp5 library

Of course, what works for some may not be suitable for all. You have all my respect

25

I don’t want to invest a lot of my time in something that is no longer supported

One option would be to use an Android control; the Android equivalent to a slider is called a seek bar. There is an example here: https://github.com/vsquared/AndroidWidgets_Processing4_0_1

Or you could ‘roll your own’ with something like this (just to give you an example):

color BLUE = color(64, 124, 188);
color LTGRAY = color(185, 180, 180);
color YELLOW = color(245, 250, 13);
color RED = color(255, 0, 0);
color BLACK = color(0, 0, 0);
color WHITE = color(255, 255, 255);
color GREEN = color(32, 175, 47);
color ORANGE = color(247,174,77);

Slider slider;
ValueField valueFld;

final float _initValue = 40;
final float _maxValue = 255;
final float _minValue = 0;

float value = _initValue;

boolean selected = false;

void setup() {
  fullScreen();
  orientation(LANDSCAPE);
  slider = new Slider(300, 200, 20, 600, 80, 80, WHITE, BLUE);
  valueFld = new ValueField(450, 340, 150, 80, WHITE, BLACK, 46.0);
}

void draw() {
  background(209);
  slider.display();
  valueFld.display(value);
}

void mousePressed() {
  if ((mouseX >= slider.thumbX) && (mouseX <= slider.thumbX + slider.thumbW) && (mouseY >= slider.thumbY) && (mouseY <= slider.thumbY + 2*slider.thumbH)) {
    selected = true;
  } else {
    selected = false;
  }
}

void mouseDragged() {
  if (selected) {
    slider.thumbY = constrain(mouseY,slider.barY, (slider.barY + slider.barH) - slider.thumbH);
    value = slider.thumbY;
    value = map(value, slider.barY, (slider.barY + slider.barH)-slider.thumbH, _minValue, _maxValue);
    valueFld.display(value);
  }
}

Slider Class (separate tab)

class Slider {
  float barX, barY, barW, barH;
  float thumbX, thumbY, thumbW, thumbH;
  color thumbColor, barColor;
  
  // Constructor
  Slider(float bx, float by, float bw, float bh, float thw, float thh, color barc, color thcolor ) {
    barX = bx;
    barY = by;
    barW = bw;
    barH = bh;
    thumbX = bx - thw/3 - 2; 
    thumbY = by + value;
    thumbW = thw;
    thumbH = thh;
    thumbColor = thcolor;
    barColor = barc;
  }

  void display() {
    // Bar
    fill(barColor); // Bar color
    rect(barX, barY, barW, barH, 15);
    // Thumb
    fill(thumbColor); //Thumb color
    rect(thumbX, thumbY, thumbW, thumbH, 15);
  }
}

Value Field Class (separate tab)

class ValueField {
  float x, y, w, h;
  color fldColor;
  color txtColor;
  float txtSize;
  
  // Constructor
  ValueField(float xpos, float ypos, float wt, float ht, color background, color foreground, float textSize) {
    x = xpos;
    y = ypos;
    w = wt;
    h = ht;
    fldColor = background;
    txtColor = foreground;
    txtSize = textSize;
  }

  void display(float val) {
    fill(fldColor); // erase old value
    rect(x, y, w, h);
    fill(txtColor);
    stroke(0);
    textSize(txtSize);
    textAlign(CENTER,CENTER);
    String valStr = nf(val, 0, 1);
    text(valStr, x, y, w, h);
  }
}
1 Like
26

Thanks. I took a quick look at the Github page, it seems to be fairly new and I didn’t see any documentation, except for the source code itself. But I’ll give it a try, maybe tomorrow.

Maybe I’d be better off sticking to “plain vanilla” Processing and not using any third-party libraries, but I’m kinda lazy and wanted to avoid the extra work.

27

The following is an isolated demo of the Android SeekBar control so that you can see how it works:

import android.app.Activity;
import android.content.Context;
import android.R;
import android.widget.FrameLayout;
import android.widget.LinearLayout;
import android.widget.RelativeLayout;
import android.view.ViewGroup;
import android.view.ViewGroup.LayoutParams;
import android.widget.SeekBar;
import android.widget.TextView;
import android.widget.SeekBar.OnSeekBarChangeListener;
import android.graphics.drawable.ShapeDrawable;
import android.graphics.drawable.shapes.OvalShape;

color BLUE = color(64, 124, 188);
color LTGRAY = color(185, 180, 180);
color YELLOW = color(245, 250, 13);
color RED = color(255, 0, 0);
color BLACK = color(0, 0, 0);
color WHITE = color(255, 255, 255);
color GREEN = color(32, 175, 47);
color ORANGE = color(237, 147, 29);

Activity activity;
Context ctx;
TextView valueView;
String s;

int seekBarVal = 50; // Initial value

void setup() {
  fullScreen();
  orientation(LANDSCAPE);
  background(BLUE);
  activity = this.getActivity();
  ctx = activity.getApplicationContext();
  runOnUiThread(new Runnable() {
    void run() {
      seekBar(130, 130, 930, 60, 255, ORANGE, LTGRAY);
      valueView(1110, 128, 600, WHITE, 26.0);
    }
  }
  );
}

void draw() {
}

SeekBar (separate tab):

void seekBar(int x, int y, int w, int h, int maxValue, color thumbColor, color barColor ) {
  
  SeekBar seekBar = new SeekBar(ctx);
  LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);  
  seekBar.setX(x);
  seekBar.setY(y);
  layoutParams.width = w;
  layoutParams.height = h;
  seekBar.setLayoutParams(layoutParams);
  ShapeDrawable thumb = new ShapeDrawable(new OvalShape());
  thumb.setIntrinsicHeight(h); // same as bar height
  thumb.setIntrinsicWidth(h);
  thumb.getPaint().setColor(thumbColor);
  seekBar.setThumb(thumb);
  seekBar.setMax(maxValue);
  seekBar.setProgress(seekBarVal);
  seekBar.setBackgroundColor(barColor);

  seekBar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
    void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
      seekBarVal = progress;
      s = String.valueOf(seekBarVal);
      valueView.setText(s);
    }
    void onStartTrackingTouch(SeekBar seekBar) {
    }
    void onStopTrackingTouch(SeekBar seekBar) {
    }
  }
  );

  FrameLayout flayout = (FrameLayout)activity.findViewById(R.id.content);
  flayout.addView(seekBar);
}

ValueView (separate tab):

void valueView(int x, int y, int w, color txtColor, float txtSize) {

  valueView = new TextView(ctx);
  valueView.setLayoutParams (new RelativeLayout.LayoutParams (RelativeLayout.LayoutParams.WRAP_CONTENT, RelativeLayout.LayoutParams.WRAP_CONTENT));
  valueView.setX(x);
  valueView.setY(y);
  valueView.setWidth(w);
  valueView.setTextColor(txtColor);
  valueView.setTextSize(txtSize);
  s = String.valueOf(seekBarVal);  
  valueView.setText(s);
  FrameLayout flayout = (FrameLayout)activity.findViewById(R.id.content);
  flayout.addView(valueView);
}
2 Likes
28

Thanks, I think this is the way to go, rather than relying on 3rd. party libraries which may not work in Android mode, or may no longer be supported.

1 Like