«DiamondSlider : custom unidimensionnal slider GUI.» by Dindoléon

on 18 Nov'18 16:07 in guislider

Custom unidimensionnal slider GUI I made for my touchscreen instrument. Presented here as a tuner, but can serve any control purpose.

log fork json 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
(
// Custom unidimensionnal horizontal slider, licensed under GNU GPL v3 (<https://www.gnu.org/licenses/>).
// Written by Simon Deplat (aka Dindoleon).
// This is lovely with a touchscreen.

var synth, win, window_size, margin = 3, slider, value, label, diamond_size, stroke_size, diamond_outline_size, diamond_color, font;

window_size = [300, 50];
diamond_size = 10;
diamond_outline_size = 15;
stroke_size = 2;
margin = 3;
diamond_color = Color.new(0.2,0.5,0.9);
font = Font.new( Font.availableFonts.choose, window_size[1]/2 );

value = 0;

win = Window("Diamond Slider", Rect(0, 0, window_size[0], window_size[1]), false);
win.background_( Color.black );

slider = UserView( win, Rect( margin, margin, window_size[0] - (margin*2), window_size[1] - (margin*2)));

synth = {arg freq=110; SinOsc.ar(freq!2)}.play;

slider.drawFunc = {
	Pen.width = stroke_size;

	Pen.strokeColor = Color.white;
	Pen.fillColor = Color.black;
	Pen.addRect(Rect(0,0, slider.bounds.width,slider.bounds.height));
	Pen.draw(3);

	Pen.moveTo(((slider.bounds.width*value)-diamond_size) @ (slider.bounds.height/2));
	Pen.lineTo(((slider.bounds.width*value)) @ ((slider.bounds.height/2)+diamond_size));
	Pen.lineTo(((slider.bounds.width*value)+diamond_size) @ (slider.bounds.height/2));
	Pen.lineTo(((slider.bounds.width*value)) @ ((slider.bounds.height/2)-diamond_size));
	Pen.lineTo(((slider.bounds.width*value)-diamond_size) @ (slider.bounds.height/2));
	Pen.fillColor = diamond_color;
	Pen.fill;

	Pen.moveTo( (0) @ (slider.bounds.height/2));
	Pen.lineTo(((slider.bounds.width*value)-diamond_outline_size) @ ((slider.bounds.height/2)));
	Pen.moveTo(((slider.bounds.width*value)+diamond_outline_size) @ (slider.bounds.height/2));
	Pen.lineTo(((slider.bounds.width)) @ ((slider.bounds.height/2)));
	Pen.moveTo(((slider.bounds.width*value)-diamond_outline_size) @ (slider.bounds.height/2));
	Pen.lineTo(((slider.bounds.width*value)) @ ((slider.bounds.height/2)+diamond_outline_size));
	Pen.lineTo(((slider.bounds.width*value)+diamond_outline_size) @ (slider.bounds.height/2));
	Pen.lineTo(((slider.bounds.width*value)) @ ((slider.bounds.height/2)-diamond_outline_size));
	Pen.lineTo(((slider.bounds.width*value)-diamond_outline_size) @ (slider.bounds.height/2));
	Pen.strokeColor = diamond_color;
	Pen.stroke;
};

label = StaticText(slider, Rect(50, 0, slider.bounds.width-50, slider.bounds.height));
label.background_(Color.new(0,0,0,0));
label.stringColor = Color.new(1,1,1,0.75);
label.string = "Frequency: 110.0";
label.align(\center);
label.font = font;

slider.mouseDownAction = { |slider, x|
	value =  (x).linlin(0,slider.bounds.width,0,1);
	synth.set(\freq, value.linexp( 0, 1, 110, 220));
	label.string = "Frequency: " + value.linexp(0,1,110,220).trunc(0.01);
	slider.refresh
};
slider.mouseMoveAction = slider.mouseDownAction;

win.front;
CmdPeriod.doOnce({Window.closeAll}); // Kill GUI and server sounds on < Ctrl + ^ + . > .
win.onClose = {
	s.freeAll;
	Window.closeAll;
};
)
raw 3036 chars (focus & ctrl+a+c to copy)
reception
comments