-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathjwt_01.html
More file actions
187 lines (154 loc) · 5.78 KB
/
Copy pathjwt_01.html
File metadata and controls
187 lines (154 loc) · 5.78 KB
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
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
<!DOCTYPE html>
<html>
<!--
We start with a basic html 'page' that is the size of the jweb object,
but has no scrollbars nor floating content.
-->
<head>
<style>
html,
body {
width: 100%;
height: 100%;
margin: 0px;
border: 0;
overflow: hidden; /* Disable scrollbars */
display: block; /* No floating content on sides */
}
</style>
</head>
<body>
<canvas id="myCanvas" style='position:absolute; left:0px; top:0px;'>
</canvas>
<script>
const MINVAL = 0; // minimum control value of 0
const MAXVAL = 127; // maximum control value of 127
const ITER = 270 / MAXVAL; // angular iteration per value change (in degrees)
const TWOPI = Math.PI * 2; // precalculate 2 * pi
var value = 0;
var mouseDown = false;
var mouseDownYPos;
var mouseDownValue;
var maxSize = 0;
var halfSize = 0;
var wDims = [0, 0]; // the window dimensions
var cPoint = [0, 0]; // the center point in canvas XY coordinates
var iPoint = [0, 0]; // the indicator point in canvas XY coordinates
(function() {
var htmlCanvas = document.getElementById('myCanvas'); // get canvas by id
var ctx = htmlCanvas.getContext('2d'); // get a graphics context
window.max.bindInlet("value", setValue);
initialize();
// required startup for the control
function initialize() {
// listen for the resize event
window.addEventListener('resize', resizeCanvas, false);
// we have to use document-level tracking, rather than local tracking
// in order to capture mouse movement outside the canvas area.
document.onmousedown = onMouseDown;
document.onmousemove = onMouseMove;
document.onmouseup = onMouseUp;
// draw the canvas for the first time.
resizeCanvas();
}
// set the value of the control, making sure it fits within the values
// allowed. Output the value on any change, and redraw the canvas if
// needed.
function setValue(v) {
var test = Math.min(Math.max(v, MINVAL), MAXVAL);
if (test != value) {
value = test;
max.outlet("value", value);
redraw();
}
}
// calculate the centerpoint of the current canvas area
function calcCenterpoint() {
maxSize = (wDims[0] > wDims[1]) ? wDims[1] : wDims[0];
halfSize = maxSize / 2;
var xOff = (wDims[0] - maxSize) / 2;
var yOff = (wDims[1] - maxSize) / 2;
cPoint[0] = (maxSize / 2) + xOff;
cPoint[1] = (maxSize / 2) + yOff;
}
// calculate the positioning of the indicator along the 'orbital'
function calcIndicator() {
// here we have to calculate the indicator size (i.e., smallSize
// variable) which is a max of 10 pixels, but is otherwise 1/10th the
// control size.
smallSize = Math.min(10, maxSize / 10);
// The indicator angle will be the value time the interation value,
// but offset by 135 degrees.
var initAngle = 135 + (value * ITER);
// For arc drawing, we will need to change the angle from degrees
// to radians
var initRadians = initAngle * (TWOPI / 360);
// Now we use basic trig to figure out the X/Y location of the indicator
iPoint[0] = (Math.cos(initRadians) * (halfSize - smallSize)) + cPoint[0];
iPoint[1] = (Math.sin(initRadians) * (halfSize - smallSize)) + cPoint[1];
}
// Display custom canvas, which is the 'orbital' control
function redraw() {
wDims[0] = window.innerWidth;
wDims[1] = window.innerHeight;
ctx.clearRect(0, 0, wDims[0], wDims[1]);
calcCenterpoint();
calcIndicator();
ctx.strokeStyle = "black";
ctx.fillStyle = "white";
ctx.lineWidth = 2;
// draw the 'orbital' ring that the indicator sits upon
ctx.beginPath();
ctx.arc(cPoint[0], cPoint[1], halfSize - smallSize, 0, TWOPI);
ctx.stroke();
ctx.closePath();
// draw the indicator
ctx.beginPath();
ctx.arc(iPoint[0], iPoint[1], smallSize * .6, 0, TWOPI);
ctx.fill();
ctx.stroke();
ctx.closePath();
// determine the gradient areas
var gradient = ctx.createRadialGradient(
cPoint[0], cPoint[1], halfSize / 8, // inner circle
cPoint[0], cPoint[1], halfSize / 2 // outer circle
);
// determine the gradient coloring - where all the work is based
// on transparency, and set it as the fillstyle.
gradient.addColorStop(0, 'rgba(255, 255, 255, ' + value/64 + ')');
gradient.addColorStop(1, 'rgba(255, 255, 255, ' + value/160 + ')');
ctx.fillStyle = gradient;
// draw the inner circle with the 'light' display
ctx.beginPath();
ctx.arc(cPoint[0], cPoint[1], halfSize / 2, 0, TWOPI);
ctx.fill();
ctx.stroke();
ctx.closePath();
}
// Runs each time the DOM window resize event fires, this resets the
// canvas dimensions to match window then redraws the content.
function resizeCanvas() {
htmlCanvas.width = window.innerWidth;
htmlCanvas.height = window.innerHeight;
redraw();
}
// Mouse movement is tracked with these routines. The value of the
// control is based on movement in the Y (up/down) dimension.
function onMouseDown(e) {
mouseDown = true;
mouseDownValue = value;
mouseDownYPos = e.clientY;
}
function onMouseMove(e) {
if (mouseDown) {
var delta = e.clientY - mouseDownYPos;
setValue(mouseDownValue - delta);
}
}
function onMouseUp(e) {
mouseDown = false;
}
})();
</script>
</body>
</html>