linuxwacom.github.io/bezier.html at 735f1c5e6daaab3f1d29ef0ab381ce71f9aa58c6 · linuxwacom/linuxwacom.github.io · GitHub

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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Wacom Pressure Curve Graph</title>
</head>
<body>
<noscript>This website requires JavaScript.</noscript>
<h2>Wacom Pressure Curve Graph</h2>

Change the bezier curve by dragging the control points.

<div style="padding: 20px">
<div style="float: left; writing-mode: vertical-lr">&larr; output pressure</div>
<div style="width: 208px; display:inline-block; text-align: center">
<canvas id="canvas" width="208" height="208"></canvas>
input pressure &rarr;
</div>
</div>

<p>You can use this pressure curve with:</p>

<pre id="pre">
xsetwacom set device_name PressureCurve <span id="ctrl1" style="color:red"></span> <span id="ctrl2" style="color:blue"></span>
</pre>

<script type="text/javascript">
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

var max = 100;

var scale = 2;
ctx.scale(scale, scale);

var startX = 0;
var startY = max;
var endX = max;
var endY = 0;

var ctrl1X = startX;
var ctrl1Y = startY;
var ctrl2X = endX;
var ctrl2Y = endY;

var ctrl1Span = document.getElementById("ctrl1");
var ctrl2Span = document.getElementById("ctrl2");

ctrl1Span.innerHTML = ctrl1X + " " + (max - ctrl1Y);
ctrl2Span.innerHTML = ctrl2X + " " + ( max - ctrl2Y);

function draw(){
	ctx.clearRect(0, 0, canvas.width, canvas.height);

	// Draw axes
	ctx.beginPath();
	ctx.strokeStyle = "black";
	ctx.moveTo(0, 0);
	ctx.lineTo(0, max);
	ctx.lineTo(max, max);
	ctx.stroke();

	// Draw reference lines
	ctx.beginPath();
	ctx.strokeStyle = "lightgray";
	ctx.moveTo(startX, startY);
	ctx.lineTo(ctrl1X, ctrl1Y);

	ctx.moveTo(endX, endY);
	ctx.lineTo(ctrl2X, ctrl2Y);
	ctx.stroke();

	// Draw curve
	ctx.beginPath();
	ctx.strokeStyle = "black";
	ctx.moveTo(startX, startY);
	ctx.bezierCurveTo(ctrl1X, ctrl1Y, ctrl2X, ctrl2Y, endX, endY);
	ctx.stroke();

	// Draw control points
	ctx.fillStyle = "red";
	ctx.fillRect(ctrl1X, ctrl1Y, 4, 4);

	ctx.fillStyle = "blue";
	ctx.fillRect(ctrl2X, ctrl2Y, 4, 4);
}

function translateEventCoords(e){
	var rect = canvas.getBoundingClientRect();
	return {
		x: (e.clientX - rect.left) / scale,
		y: (e.clientY - rect.top) / scale
	}
}

var selected = null;

canvas.onmousedown = function (e){
	var pos = translateEventCoords(e);
	if (Math.abs(pos.x - ctrl1X) < 5 && Math.abs(pos.y - ctrl1Y) < 5){
		selected = 1;
	} else if (Math.abs(pos.x - ctrl2X) < 5 && Math.abs(pos.y - ctrl2Y) < 5){
		selected = 2;
	}
}

document.body.onmousemove = function (e){
	var pos = translateEventCoords(e);

	// Enforce bounds
	if (pos.x < 0) pos.x = 0;
	if (pos.y < 0) pos.y = 0;
	if (pos.y > max) pos.y = max;
	if (pos.x > max) pos.x = max;

	if (selected){
		if (selected == 1){
			ctrl1X = parseInt(pos.x);
			ctrl1Y = parseInt(pos.y);
		} else if (selected == 2){
			ctrl2X = parseInt(pos.x);
			ctrl2Y = parseInt(pos.y);
		}
		draw();
		ctrl1.innerHTML = ctrl1X + " " +  (max - ctrl1Y)
		ctrl2.innerHTML = ctrl2X + " " + (max - ctrl2Y)
	}
}

document.body.onmouseup = function (e){
	selected = null;
}

if (canvas.getContext) {
    draw();
} else {
    alert("Your browser doesn't support HTML canvas.");
}
</script>
</body>
</html>