/lenasys/0.1

To get this branch, use:
bzr branch http://gegoxaren.bato24.eu/bzr/lenasys/0.1

« back to all changes in this revision

Viewing changes to Widget Library/sliders.js

  • Committer: Erik Wikström
  • Date: 2013-04-03 14:29:36 UTC
  • mto: (9.2.3 lenasys)
  • mto: This revision was merged to the branch mainline in revision 11.
  • Revision ID: wikxen@gmail.com-20130403142936-e4b6r6j12dof0dgq
Updated slider library and created a new demo

Show diffs side-by-side

added added

removed removed

Lines of Context:
Widget Library/sliders.js
 
1
/* 
 
2
 
 
3
Widget Code!
 
4
 
 
5
*/
 
6
 
 
7
// Recursive Pos of div in document - should work in most browsers
 
8
function findPos(obj) {
 
9
        var curLeft = curTop = 0;
 
10
        if(obj.offsetParent) {
 
11
                curLeft = obj.offsetLeft
 
12
                curTop = obj.offsetTop
 
13
                while(obj = obj.offsetParent) {
 
14
                        curLeft += obj.offsetLeft
 
15
                        curTop += obj.offsetTop
 
16
                }
 
17
        }
 
18
        return {
 
19
                x:curLeft,
 
20
                y:curTop
 
21
        }
 
22
}
 
23
 
 
24
/*
 
25
 
 
26
ui read widget functions
 
27
 
 
28
*/
 
29
 
 
30
function readSlider(sliderId) {
 
31
        var value = parseFloat(document.getElementById(sliderId + "box").value);
 
32
        if(isNaN(value)) {
 
33
                value = 0.0;
 
34
        }
 
35
        return value;
 
36
}
 
37
 
 
38
function readBinary(binaryId) {
 
39
        lf = document.getElementById(binaryId + "marker").style.left;
 
40
        if(lf == "2px") {
 
41
                return 0;
 
42
        } else {
 
43
                return 1;
 
44
        }
 
45
}
 
46
 
 
47
/*
 
48
 
 
49
ui change widget functions
 
50
 
 
51
*/
 
52
 
 
53
// The idea is to have a few functions like this one and minimum javascript intervention                
 
54
function updateBinary(event, binaryId) {
 
55
        if(mb) {
 
56
                coords = findPos(event.currentTarget);
 
57
                coords.x = event.clientX - coords.x;
 
58
                coords.y = event.clientY - coords.y;
 
59
                if(coords.x > 24) {
 
60
                        document.getElementById(binaryId + "marker").style.left = 20 + "px";                                                                            
 
61
                        document.getElementById(binaryId).style.backgroundColor = "#ddd";                                                                               
 
62
                }else if(coords.x < 16) {
 
63
                        document.getElementById(binaryId + "marker").style.left = 2 + "px";                                                                                                                                             
 
64
                        document.getElementById(binaryId).style.backgroundColor = "#777";                                                                               
 
65
                }
 
66
        }
 
67
}
 
68
 
 
69
// The idea is to have a few functions like this one and minimum javascript intervention                
 
70
function updateSlider(event, kind, min, max, length, sliderId, boxId) {
 
71
        if(mb) {
 
72
                coords = findPos(event.currentTarget);
 
73
                coords.x = event.clientX - coords.x;
 
74
                coords.y = event.clientY - coords.y;
 
75
                cx = coords.x / length;
 
76
                sd = max - min;
 
77
                value = min + (sd * cx);        
 
78
                if(value > max) value = max;
 
79
                if(kind == 0) {
 
80
                        value = Math.round(value);
 
81
                }
 
82
                if(kind == 1) {
 
83
                        value = Math.round(value * 10.0) / 10.0;
 
84
                }
 
85
                if(kind == 2) {
 
86
                        value = Math.round(value * 100.0) / 100.0;
 
87
                }
 
88
                if(kind == 3) {
 
89
                        value = Math.round(value * 1000.0) / 1000.0;
 
90
                }
 
91
                document.getElementById(boxId).value = value;                           
 
92
                document.getElementById(sliderId).style.left = Math.ceil((length) * ((value - min) / sd)) + "px";
 
93
        }
 
94
}
 
95
                
 
96
function sliderPosition(value, min, max, length) {
 
97
                if(value < min) {
 
98
                        value = min;
 
99
                }
 
100
                if(value > max) {
 
101
                        value = max;
 
102
                }
 
103
                pos = Math.round(((value - min) / (max - min)) * length);
 
104
                return pos;
 
105
}
 
106
 
 
107
function changeSlider(value, sliderId, kind, min, max, length) {
 
108
                value = parseFloat(value);              
 
109
                if(isNaN(value)) {
 
110
                        value = 0.0;
 
111
                }
 
112
                if(value < min) {
 
113
                        value = min;
 
114
                }
 
115
                if(value > max) {
 
116
                        value = max;
 
117
                }
 
118
                if(kind == 0) {
 
119
                        value = Math.round(value);
 
120
                }
 
121
                if(kind == 1) {
 
122
                        value = Math.round(value * 10.0) / 10.0;
 
123
                }
 
124
                if(kind == 2) {
 
125
                        value = Math.round(value * 100.0) / 100.0;
 
126
                }
 
127
                if(kind == 3) {
 
128
                        value = Math.round(value * 1000.0) / 1000.0;
 
129
                }
 
130
                pos = sliderPosition(value, min, max, length);
 
131
                document.getElementById(sliderId + "box").value = value;
 
132
                document.getElementById(sliderId + "marker").style.left = pos + "px";                                                                           
 
133
}
 
134
 
 
135
/*
 
136
 
 
137
ui make widget functions
 
138
 
 
139
*/
 
140
 
 
141
function makeLabel(name) {
 
142
        s = "";
 
143
        s += "<div class='label'>" + name + "</div>";
 
144
        return s;               
 
145
}
 
146
 
 
147
function makePanel(width, height) {
 
148
        s = "";         
 
149
        s += "<div class='panel' style='height: " + height + "px; width: " + width + "px;'>";
 
150
        return s;
 
151
}
 
152
 
 
153
function makePanelEnd() {
 
154
        s = "</div>";
 
155
        return s;               
 
156
}
 
157
 
 
158
function makeSlider(sliderId, kind, minValue, maxValue, midValue, sliderWidth, defaultValue) {
 
159
        s = "";
 
160
        defaultPosition = sliderPosition(defaultValue, minValue, maxValue, sliderWidth);
 
161
        if(defaultValue < minValue) {
 
162
                defaultValue = minValue;
 
163
        }
 
164
        if(defaultValue > maxValue) {
 
165
                defaultValue = maxValue;
 
166
        }                                       
 
167
        s += "<input id='" + sliderId + "box' value='" + defaultValue + "' type='text' class='sliderBox' onBlur='changeSlider(this.value,\"" + sliderId + "\"," + kind + "," + minValue + "," + maxValue + "," + sliderWidth + ");'>";
 
168
        s += "<div id='" + sliderId + "' class='sliderLine' style='width:" + sliderWidth + "px;'";
 
169
        s += " onmousemove='updateSlider(event," + kind + "," + minValue + "," + maxValue + "," + sliderWidth + ",\"" + sliderId + "marker\",\"" + sliderId + "box\");'";
 
170
        s += " onmouseup='updateSlider(event," + kind + "," + minValue + "," + maxValue + "," + sliderWidth + ",\"" + sliderId + "marker\",\"" + sliderId + "box\");'>";
 
171
        s += " <div id='" + sliderId + "marker' class='sliderMarker' style='left:" + defaultPosition + "px;'></div>";
 
172
        s += "</div>";
 
173
        s += "<div class='slidermidValue' style='width:" + sliderWidth + "px;'>" + midValue;
 
174
        s += "<div class='sliderminValue'>" + minValue + "</div>";
 
175
        s += "<div class='slidermaxValue'>" + maxValue + "</div></div>";
 
176
        return s;
 
177
}
 
178
 
 
179
function makeBinary(binaryId, defaultValue) {
 
180
        s = "";
 
181
        if(defaultValue == 1) {
 
182
                defaultPosition = 20;
 
183
                defaultColor = "#ddd";
 
184
        } else {
 
185
                defaultPosition = 2;
 
186
                defaultColor = "#777";
 
187
        }
 
188
        s += "<div id='" + binaryId + "' class='binaryLine' style='background-color:" + defaultColor + ";' onmousemove='updateBinary(event,\"" + binaryId + "\");' onmouseup='updateBinary(event,\"" + binaryId + "\");'>";
 
189
        s += "<div id='" + binaryId + "marker' class='binaryMarker' style='left:" + defaultPosition + "px;'></div>";
 
190
        s += "</div>";
 
191
        return s;
 
192
}
 
193
 
 
194
var mb = 0;
 
195
 
 
196
function mbPress(event) {
 
197
        mb = 1;
 
198
}
 
199
 
 
200
function mbRelease(event) {
 
201
        mb = 0;
 
202
}
 
 
b'\\ No newline at end of file'