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
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226// Cache for background canvases based on minValue and maxValue
const backgroundCanvasCache = new Map();

function updateMeter(canvasId, newTargetValue, label = null) 
{
	const canvas = document.getElementById(canvasId);
	if (!canvas)
	{
		addMeter(newTargetValue, label || 'Meter', -1, 1);
		return;
	}
	const minValue = parseFloat(canvas.dataset.minValue);
	const maxValue = parseFloat(canvas.dataset.maxValue);
	canvas.dataset.currentValue = newTargetValue;
	const meterDiv = canvas.parentElement;
	const currentLabel = label || meterDiv.querySelector('p').textContent;
	const needleCanvas = document.getElementById(`${canvasId}-needle`);
	drawMeter(canvasId, `${canvasId}-needle`, newTargetValue, currentLabel, minValue, maxValue);
}

function addMeter(value, label, minValue = -1, maxValue = 1) 
{
	const metersContainer = document.getElementById('metersContainer');
	const meterId = `meter${metersContainer.children.length + 1}`;
	const meterDiv = document.createElement('div');
	meterDiv.className = 'meter';
	meterDiv.style.position = 'relative';

	// Background canvas
	const bgCanvas = document.createElement('canvas');
	bgCanvas.id = meterId;
	bgCanvas.width = 200;
	bgCanvas.height = 180;
	bgCanvas.dataset.currentValue = value;
	bgCanvas.dataset.minValue = minValue;
	bgCanvas.dataset.maxValue = maxValue;
	bgCanvas.style.position = 'absolute';
	bgCanvas.style.zIndex = '1';

	// Needle canvas
	const needleCanvas = document.createElement('canvas');
	needleCanvas.id = `${meterId}-needle`;
	needleCanvas.width = 200;
	needleCanvas.height = 180;
	needleCanvas.style.position = 'absolute';
	needleCanvas.style.zIndex = '2';

	const labelP = document.createElement('p');
	labelP.textContent = label;
	meterDiv.appendChild(bgCanvas);
	meterDiv.appendChild(needleCanvas);
	meterDiv.appendChild(labelP);
	metersContainer.appendChild(meterDiv);

	drawMeter(meterId, `${meterId}-needle`, value, label, minValue, maxValue);
}

function createBackgroundCanvas(width, height, minValue, maxValue) 
{
	//console.log('createBackgroundCanvas ' + minValue + ' ' + maxValue);
	const bgCanvas = document.createElement('canvas');
	bgCanvas.width = width;
	bgCanvas.height = height;
	const ctx = bgCanvas.getContext('2d');
	const centerX = width / 2;
	const centerY = height * 0.65;
	const radius = width * 0.4;
	const startAngle = Math.PI;
	const endAngle = 2 * Math.PI;

	// Draw background arc
	ctx.beginPath();
	ctx.arc(centerX, centerY, radius, startAngle, endAngle);
	ctx.lineWidth = 20;
	const gradient = ctx.createLinearGradient(0, 0, width, 0);
	gradient.addColorStop(0, '#ff4d4d');
	gradient.addColorStop(0.5, '#ffa500');
	gradient.addColorStop(1, '#00cc00');
	ctx.strokeStyle = gradient;
	ctx.stroke();

	// Draw radial gradient overlay
	ctx.beginPath();
	ctx.arc(centerX, centerY, radius, startAngle, endAngle);
	const radialGradient = ctx.createRadialGradient(centerX, centerY, radius * 0.8, centerX, centerY, radius * 1.2);
	radialGradient.addColorStop(0, 'rgba(255, 255, 255, 0.2)');
	radialGradient.addColorStop(1, 'rgba(255, 255, 255, 0)');
	ctx.strokeStyle = radialGradient;
	ctx.lineWidth = 10;
	ctx.stroke();

	// Draw ticks
	const tickCount = 10;
	const tickLength = 8;
	ctx.lineWidth = 1;
	ctx.strokeStyle = 'rgba(255, 255, 255, 0.5)';
	for (let i = 0; i <= tickCount; i++)
	{
		const tickAngle = startAngle + (i / tickCount) * (endAngle - startAngle);
		ctx.beginPath();
		ctx.moveTo(centerX + radius * Math.cos(tickAngle), centerY + radius * Math.sin(tickAngle));
		ctx.lineTo(centerX + (radius + tickLength) * Math.cos(tickAngle), centerY + (radius + tickLength) * Math.sin(tickAngle));
		ctx.stroke();
	}

	// Draw labels
	ctx.font = '14px Arial';
	ctx.fillStyle = 'white';
	ctx.textAlign = 'center';
	ctx.textBaseline = 'middle';
	const midValue = (maxValue + minValue) / 2;
	ctx.fillStyle = 'rgba(0, 0, 0, 0.8)';
	ctx.fillRect(centerX - radius - 20, centerY + 10, 40, 24);
	ctx.fillStyle = 'white';
	ctx.fillText(minValue.toFixed(0), centerX - radius, centerY + 22);
	ctx.fillStyle = 'rgba(0, 0, 0, 0.8)';
	ctx.fillRect(centerX - 20, centerY + 10, 40, 24);
	ctx.fillStyle = 'white';
	ctx.fillText(midValue.toFixed(0), centerX, centerY + 22);
	ctx.fillStyle = 'rgba(0, 0, 0, 0.8)';
	ctx.fillRect(centerX + radius - 20, centerY + 10, 40, 24);
	ctx.fillStyle = 'white';
	ctx.fillText(maxValue.toFixed(0), centerX + radius, centerY + 22);

	// Draw screws
	const screwRadius = 10;
	const screwPositions = [
		{ x: screwRadius, y: screwRadius }, // top-left
		{ x: width - screwRadius, y: screwRadius }, // top-right
		{ x: screwRadius, y: height - screwRadius }, // bottom-left
		{ x: width - screwRadius, y: height - screwRadius } // bottom-right
	];
	ctx.fillStyle = '#666666';
	ctx.strokeStyle = '#333333';
	ctx.lineWidth = 2;
	screwPositions.forEach(pos =>
	{
		// Draw screw circle
		ctx.beginPath();
		ctx.arc(pos.x, pos.y, screwRadius, 0, 2 * Math.PI);
		ctx.fill();
		ctx.stroke();
		// Draw cross
		ctx.beginPath();
		ctx.moveTo(pos.x - screwRadius * 0.6, pos.y);
		ctx.lineTo(pos.x + screwRadius * 0.6, pos.y);
		ctx.moveTo(pos.x, pos.y - screwRadius * 0.6);
		ctx.lineTo(pos.x, pos.y + screwRadius * 0.6);
		ctx.stroke();
	});

	return bgCanvas;
}

function drawMeter(bgCanvasId, needleCanvasId, value, label, minValue, maxValue) 
{
	const bgCanvas = document.getElementById(bgCanvasId);
	const needleCanvas = document.getElementById(needleCanvasId);
	const bgCtx = bgCanvas.getContext('2d');
	const needleCtx = needleCanvas.getContext('2d');
	const width = bgCanvas.width;
	const height = bgCanvas.height;
	const centerX = width / 2;
	const centerY = height * 0.65;
	const radius = width * 0.4;
	const startAngle = Math.PI;
	const endAngle = 2 * Math.PI;

	if (!bgCanvas.hasBackground) 
	{
		const cacheKey = `${minValue}_${maxValue}`;
		if (!backgroundCanvasCache.has(cacheKey))
		{
			backgroundCanvasCache.set(cacheKey, createBackgroundCanvas(width, height, minValue, maxValue));
		}
		//console.log('draw cached(' + cacheKey + ') ' + bgCanvasId);
		bgCtx.drawImage(backgroundCanvasCache.get(cacheKey), 0, 0);
		bgCanvas.hasBackground = true; // Mark as drawn
	}

	needleCtx.clearRect(0, 0, width, height);

	// Draw needle base
	needleCtx.beginPath();
	needleCtx.arc(centerX, centerY, 6, 0, 2 * Math.PI);
	const baseGradient = needleCtx.createRadialGradient(centerX, centerY, 0, centerX, centerY, 6);
	baseGradient.addColorStop(0, '#ffffff');
	baseGradient.addColorStop(1, '#666666');
	needleCtx.fillStyle = baseGradient;
	needleCtx.fill();

	// Draw needle
	const normalizedValue = (value - minValue) / (maxValue - minValue);
	const angle = startAngle + normalizedValue * (endAngle - startAngle);
	const needleLength = radius * 1.0;
	const needleBaseWidth = 8;
	const needleTipWidth = 1;
	needleCtx.save();
	needleCtx.shadowColor = 'rgba(0, 0, 0, 0.6)';
	needleCtx.shadowBlur = 8;
	needleCtx.shadowOffsetX = 3;
	needleCtx.shadowOffsetY = 3;
	needleCtx.beginPath();
	needleCtx.translate(centerX, centerY);
	needleCtx.rotate(angle);
	needleCtx.moveTo(0, -needleBaseWidth / 2);
	needleCtx.lineTo(needleLength, -needleTipWidth / 2);
	needleCtx.lineTo(needleLength, needleTipWidth / 2);
	needleCtx.lineTo(0, needleBaseWidth / 2);
	needleCtx.closePath();
	const needleGradient = needleCtx.createLinearGradient(0, -needleBaseWidth / 2, 0, needleBaseWidth / 2);
	needleGradient.addColorStop(0, '#cccccc');
	needleGradient.addColorStop(1, '#666666');
	needleCtx.fillStyle = needleGradient;
	needleCtx.fill();
	needleCtx.restore();

	// Draw value label on needle canvas
	needleCtx.font = '14px Arial';
	needleCtx.fillStyle = 'rgba(0, 0, 0, 0.8)';
	needleCtx.fillRect(centerX - 30, 0, 60, 24);
	needleCtx.fillStyle = 'white';
	needleCtx.textAlign = 'center';
	needleCtx.textBaseline = 'middle';
	needleCtx.fillText(`${value.toFixed(2)}`, centerX, 12);
}