Circular slider

Hi,

I need a circular slider for my OF application…
Can’t find any sample project to start with :frowning:
I really don’t know how to start such a custom drawn control ?

Thanks for your help

Eviral

HI @Eviral,
For the drawing, you can try something like the following. It’s not optimized, but might help get you started.

//--------------------------------------------------------------
void ofApp::draw(){
	ofPushMatrix(); {
		ofSetColor( 80 );
		float startAngle = -210;
		float endAngle = 30;
		float radius = 200;
		float innerRadius = 150;
		ofTranslate(ofGetWidth()/2, ofGetHeight()/2);
		drawCircle(radius, innerRadius, 64, startAngle, endAngle );
		ofSetColor(ofColor::yellow);
		endAngle = startAngle + ofClamp( (float)ofGetMouseX()/(float)ofGetWidth(), 0, 1.0) * (endAngle-startAngle);
		drawCircle(radius, innerRadius, 64, startAngle, endAngle );
		ofSetColor( 230 );
		ofDrawLine(0, 0, cosf( ofDegToRad(startAngle)) * radius, sinf(ofDegToRad(startAngle)) * radius);
		ofDrawLine(0, 0, cosf( ofDegToRad(endAngle)) * radius, sinf(ofDegToRad(endAngle)) * radius);
		ofDrawCircle( 0,0, 8);
	} ofPopMatrix();
}

//--------------------------------------------------------------
void ofApp::drawCircle(float aRadius, float aInnerRadius, int aResolution, float aStartDeg, float aEndDeg ) {
	ofMesh mesh;
	mesh.setMode(OF_PRIMITIVE_TRIANGLE_STRIP);
	for( int i = 0; i < aResolution; i++ ) {
		float ipct = (float)i/((float)aResolution-1.f);
		float deg = ofWrapDegrees(aStartDeg + ipct * (aEndDeg-aStartDeg));
		float radians = ofDegToRad(deg);
		// normalized coords
		float ox = cosf( radians );
		float oy = sinf( radians );
		
		glm::vec3 ipos( ox * aInnerRadius, oy * aInnerRadius, 0.0f );
		glm::vec3 opos( ox * aRadius, oy * aRadius, 0.0f );
		
		mesh.addVertex( ipos );
		mesh.addVertex( opos );
	}
	mesh.draw();
}

Thanks a lot !
I’m going to try :slight_smile:

if you want something ready to use, or to look into, you can check this add-on:

image

3 Likes