diff --git a/main/index.js b/main/index.js
index a12c921..aaa0ac3 100644
--- a/main/index.js
+++ b/main/index.js
@@ -41,10 +41,10 @@ function triggerColor() {
}
triggerLevel.addEventListener('input', triggerColor);
-triggerLevel.addEventListener('mousedown', function() {
+triggerLevel.addEventListener('mousedown', function () {
this.downValue = this.value;
});
-triggerLevel.addEventListener('mouseup', function() {
+triggerLevel.addEventListener('mouseup', function () {
if (this.downValue == this.value) {
this.invert = !this.invert;
activeConfig.invert = this.invert;
@@ -128,6 +128,11 @@ function VoltsToY(v) {
canvas.addEventListener('wheel', function (e) {
e.preventDefault();
+ if (e.deltaX > 0) {
+
+ } else if (e.deltaX < 0) {
+
+ }
const zoomFactor = 1.1;
const direction = e.deltaY < 0 ? 1 : -1;
const factor = direction > 0 ? zoomFactor : 1 / zoomFactor;
@@ -206,7 +211,7 @@ function updateInfo(event) {
const deltaVoltage = Math.abs(referencePosition.v - voltage);
const deltaTime = Math.abs(referencePosition.t - timeOffset);
- info += `
ΔV ${deltaVoltage.toFixed(3)}V, ΔT ${deltaTime.toFixed(2)}ms (${(1000/deltaTime).toFixed(2)} Hz)
`;
+ info += `ΔV ${deltaVoltage.toFixed(3)}V, ΔT ${deltaTime.toFixed(2)}ms (${(1000 / deltaTime).toFixed(2)} Hz)
`;
}
deltaPanel.style.left = `${event.pageX + 10}px`;
@@ -378,14 +383,54 @@ function drawGrid(w, h) {
ctx.fillStyle = '#fff';
ctx.font = '15px monospace';
+ // Helper to draw text with lozenge background
+ const drawLabel = (text, x, y, align) => {
+ ctx.save();
+ const paddingX = 6;
+ const paddingY = 3;
+ const fontSize = 13;
+
+ // Set font to measure correctly
+ ctx.font = `${fontSize}px monospace`;
+ const metrics = ctx.measureText(text);
+ const textWidth = metrics.width;
+
+ // Calculate box position
+ // We align the text at (x,y) with specified 'align'
+ // y is baseline. Visual center of 15px font is roughly y - 4
+
+ const boxHeight = fontSize + paddingY * 2;
+ const boxWidth = textWidth + paddingX * 2;
+
+ let boxX;
+ if (align === 'left') boxX = x;
+ else if (align === 'center') boxX = x - textWidth / 2;
+ else if (align === 'right') boxX = x - textWidth;
+
+ // Adjust for padding and visual centering
+ boxX -= paddingX;
+ const boxY = (y - 4) - boxHeight / 2; // Center box around text visual center
+
+ // Draw semi-transparent lozenge
+ ctx.fillStyle = 'rgba(255, 255, 255, 0.55)';
+ ctx.beginPath();
+ ctx.roundRect(boxX, boxY, boxWidth, boxHeight, 8);
+ ctx.fill();
+
+ // Draw text
+ ctx.fillStyle = 'black';
+ ctx.textAlign = align;
+ ctx.fillText(text, x, y);
+ ctx.restore();
+ };
+
// Determine Visible Voltage Range
const minV = YtoVolts(h); // Bottom of screen (normally 0 if unzoomed, or higher/lower if zoomed/panned)
const maxV = YtoVolts(0); // Top of screen
// Calculate handy ticks in the visible range
- const ticks = calculateNiceTicks(minV, maxV, 12);
+ const ticks = calculateNiceTicks(minV, maxV, 8);
- ctx.textAlign = 'left';
for (let val of ticks) {
const y = VoltsToY(val);
@@ -397,7 +442,7 @@ function drawGrid(w, h) {
ctx.lineTo(w, y);
ctx.stroke();
- ctx.fillText(val.toFixed(2) + 'V', 5, y + 3);
+ drawLabel(val.toFixed(2) + 'V', 5, y + 4, 'left');
}
// Determine Visible Time Range
@@ -406,9 +451,8 @@ function drawGrid(w, h) {
// Create ticks for time
// Re-use logic or simple logic
- const tTicks = calculateNiceTicks(minT, maxT, 12);
+ const tTicks = calculateNiceTicks(minT, maxT, 8);
- ctx.textAlign = 'center';
for (let t of tTicks) {
const x = TimeToX(t);
@@ -426,7 +470,7 @@ function drawGrid(w, h) {
ctx.lineTo(x, h);
ctx.stroke();
- ctx.fillText(timeStr, x, h - 5);
+ drawLabel(timeStr, x, h - 5, 'center');
}
}