GUI: Slider

跟按鍵一樣，另一個常用的用戶介面為滑動標示。這個滑動會比按鍵稍為複雜，但學好之後就很易理解。

1. 不使用class

​x
1
#create a silder demo using processing.py
2

3
bWidth = bHeight = 0    #bar width and height
4
bXpos = bYpos = 0 #bar x and y position
5
sPos = 0 #slider position
6
sPosMin = SPosMax = 0 #slider position min and max
7
isOver = False #is mouse over slider
8
ratio = 0 #ratio of slider position to bar width
9

10
sliderMinValue = 0 #slider min value
11
sliderMaxValue = 100 #slider max value
12
sliderValue = 40 #slider value
13

14
def setup():
15
    global bXpos, bYpos, bWidth, bHeight, sPosMin, sPosMax, sPos
16
    size(600,200)
17
    rectMode(CENTER)
18
    bXpos = width/2
19
    bYpos = height/2
20
    bWidth = 400
21
    bHeight = 20
22
    sPosMin = bXpos - bWidth/2
23
    sPosMax = bXpos + bWidth/2
24
    sPos = map(sliderValue,sliderMinValue,sliderMaxValue,sPosMin,sPosMax)
25

26
def draw():
27
    background(200)
28

29
    #draw the slider
30
    fill(255)
31
    stroke('#6F8FFF')
32
    strokeWeight(4)
33
    rect(bXpos,bYpos,bWidth,bHeight,10,10,10,10)
34
    #draw the slider button
35
    if isOver:
36
        fill('#AAAA00')
37
    else:
38
        fill('#FFFF00')
39
    rect(sPos,bYpos,20,40,10,10,10,10)
40

41

42
def mousePressed():
43
    global isOver, ratio, sliderValue
44
    if (mouseX > sPos-10 and mouseX < sPos+10 and mouseY > bYpos-20 and mouseY < bYpos+20):
45
        isOver = True
46
    else:
47
        isOver = False
48

49
def mouseDragged():
50
    global isOver, sliderValue, sPos
51
    if isOver:
52
        if mouseX > sPosMin and mouseX < sPosMax:
53
            sPos = mouseX
54
            sliderValue = map(sPos,sPosMin,sPosMax,sliderMinValue,sliderMaxValue)
55

56
        #snap to the min or max value
57
        if mouseX < sPosMin:
58
            sliderValue = sliderMinValue
59
            sPos = map(sliderValue,sliderMinValue,sliderMaxValue,sPosMin,sPosMax)
60
        if mouseX > sPosMax:
61
            sliderValue = sliderMaxValue
62
            sPos = map(sliderValue,sliderMinValue,sliderMaxValue,sPosMin,sPosMax)
63
        
64
        print(sliderValue)
65

66
def mouseReleased():
67
    global isOver
68
    isOver = False

2. 使用class

xxxxxxxxxx
103
1
# create a silder demo using processing.py
2

3
# create a class for the slider
4
class Slider:
5
    def __init__(self, minValue, maxValue, initialValue):
6
        self.minValue = minValue  # minimum value of the slider
7
        self.maxValue = maxValue  # maximum value of the slider
8
        self.value = initialValue   # current value of the slider
9
        self.bWidth = self.bHeight = 0  # width and height of the slider bar
10
        self.bXpos = self.bYpos = 0  # x and y position of the slider bar
11
        self.sPos = 0  # x position of the slider button
12
        self.sPosMin = self.sPosMax = 0  # min and max x position of the slider button
13
        self.isOver = False  # is the mouse over the slider button?
14

15
    def setSize(self, _bXpos, _bYpos, _bWidth, _bHeight): #set the size of the slider
16
        self.bXpos = _bXpos
17
        self.bYpos = _bYpos
18
        self.bWidth = _bWidth
19
        self.bHeight = _bHeight
20
        
21
        self.sPosMin = self.bXpos - self.bWidth / 2 #set the min and max x position of the slider button
22
        self.sPosMax = self.bXpos + self.bWidth / 2
23
        self.sPos = map(self.value, self.minValue,
24
                        self.maxValue, self.sPosMin, self.sPosMax) #set the x position of the slider button
25

26
    def show(self):
27
        fill(255)
28
        stroke('#6F8FFF')
29
        strokeWeight(4)
30
        rect(self.bXpos, self.bYpos, self.bWidth, self.bHeight, 10, 10, 10, 10)
31
        if self.isOver:
32
            fill('#AAAA00')
33
        else:
34
            fill('#FFFF00')
35
        rect(self.sPos, self.bYpos, 20, 40, 10, 10, 10, 10)
36

37
    def mousePressed(self):
38
        if (mouseX > self.sPos - 10 and mouseX < self.sPos + 10 and
39
            mouseY > self.bYpos - 20 and mouseY < self.bYpos + 20):
40
            self.isOver = True
41
        else:
42
            self.isOver = False
43

44
    def mouseDragged(self):
45
        if self.isOver:
46
            if mouseX > self.sPosMin and mouseX < self.sPosMax:
47
                self.sPos = mouseX
48
                self.value = map(self.sPos, self.sPosMin,
49
                                 self.sPosMax, self.minValue, self.maxValue)
50

51
            # snap the slider button to the min or max position if the mouse is out of the slider bar
52
            if mouseX < self.sPosMin:
53
                self.value = self.minValue
54
                self.sPos = map(self.value, self.minValue,
55
                                self.maxValue, self.sPosMin, self.sPosMax)
56

57
            if mouseX > self.sPosMax:
58
                self.value = self.maxValue
59
                self.sPos = map(self.value, self.minValue,
60
                                self.maxValue, self.sPosMin, self.sPosMax)
61

62
            print(self.value)
63

64
    def mouseReleased(self):
65
        self.isOver = False
66

67
# main program=======================================================
68
slider1 = Slider(0, 100, 40)
69
slider2 = Slider(0, 100, 60)
70
slider3 = Slider(0, 100, 80)
71

72

73
def setup():
74
    size(600, 200)
75
    rectMode(CENTER)
76
    slider1.setSize(width/2, height/2-height/4, 400, 20)
77
    slider2.setSize(width/2, height/2, 400, 20)
78
    slider3.setSize(width/2, height/2+height/4, 400, 20)
79

80

81
def draw():
82
    background(200)
83
    slider1.show()
84
    slider2.show()
85
    slider3.show()
86

87

88
def mousePressed():
89
    slider1.mousePressed()
90
    slider2.mousePressed()
91
    slider3.mousePressed()
92

93

94
def mouseDragged():
95
    slider1.mouseDragged()
96
    slider2.mouseDragged()
97
    slider3.mouseDragged()
98

99

100
def mouseReleased():
101
    slider1.mouseReleased()
102
    slider2.mouseReleased()
103
    slider3.mouseReleased()