From b407fcb83aa99bebb2a024f0a8366a6496ad4e9e Mon Sep 17 00:00:00 2001 From: vsvensso Date: Mon, 4 Jul 2022 17:18:54 +0200 Subject: [PATCH 01/12] Outer scales start up --- prototypes/smith-chart/src/smithChart.ts | 70 +++++++++++++++++++++--- 1 file changed, 62 insertions(+), 8 deletions(-) diff --git a/prototypes/smith-chart/src/smithChart.ts b/prototypes/smith-chart/src/smithChart.ts index 1819adb7..45930b96 100644 --- a/prototypes/smith-chart/src/smithChart.ts +++ b/prototypes/smith-chart/src/smithChart.ts @@ -4,6 +4,9 @@ import { rectangularSelection } from "./rectangularMarking"; export type ComplexNumber = [real: number, imaginary: number]; +const fullCircle = Math.PI*2; +const halfCircle = Math.PI; + export interface SmithSettings { canvas: Canvas; size: { width: number; height: number }; @@ -79,7 +82,8 @@ export function render(settings: SmithSettings, points: Point[]) { return 0; }); - let radius = Math.min(settings.size.width, settings.size.height) / 2; + let scaleRadius = Math.min(settings.size.width, settings.size.height) / 2 + let radius = scaleRadius-40; Object.keys(canvas).forEach((k) => { canvas[k as keyof typeof canvas].width = settings.size.width; @@ -121,7 +125,7 @@ export function render(settings: SmithSettings, points: Point[]) { rc.cy * radius * -1 + centerY, rc.r * radius, 0, - 2 * Math.PI, + fullCircle, false ); mainContext.stroke(); @@ -134,7 +138,7 @@ export function render(settings: SmithSettings, points: Point[]) { ic.cy * radius * -1 + centerY, ic.r * radius, 0, - 2 * Math.PI, + fullCircle, false ); mainContext.stroke(); @@ -156,7 +160,7 @@ export function render(settings: SmithSettings, points: Point[]) { const cx = p.r[0] * radius + centerX; const cy = p.r[1] * radius * -1 + centerY; const pointRadius = 2; - mainContext.arc(cx, cy, pointRadius, 0, 2 * Math.PI, false); + mainContext.arc(cx, cy, pointRadius, 0, fullCircle, false); rendered.push({ cx, cy, @@ -222,22 +226,71 @@ export function render(settings: SmithSettings, points: Point[]) { context.lineWidth = 1; // Add a circle as a clip path - circleClip(context, centerX, centerY, radius); + circleClip(context, centerX, centerY, scaleRadius); + + // Outer scales + for(let i = 0; i < 4; i++){ + context.beginPath(); + context.arc(centerX, centerY, scaleRadius-(11*i), 0, 2 * Math.PI, false); + context.stroke(); + } + + context.save(); + context.translate(centerX, centerY); + context.textAlign = "center"; + + //Scale 1. 180>0>-170 + context.rotate(-halfCircle/2); + let steps = 36*5; + + for(let i = 0; i < steps; i++){ + if(i%5 == 0){ + context.fillText(i== 0 ? "±" + (180-(10*i)) : (180-(10*i)).toString(), 0, -scaleRadius+31); + } + context.beginPath(); + context.moveTo(0, -scaleRadius+30); + context.lineTo(0, -scaleRadius+33); + context.stroke(); + context.rotate(fullCircle/steps); + } + + steps = 50*5; + for(let i = 0; i < steps; i++){ + if(i%5 == 0){ + context.fillText(i == 0 ? "0,0" : ((steps-i)/100).toString(), 0, -scaleRadius+21); + context.fillText(i == 0 ? "0,0" :(i/100).toString(), 0, -scaleRadius+9); + } + context.beginPath(); + context.moveTo(0, -scaleRadius+14); + context.lineTo(0, -scaleRadius+8); + context.stroke(); + context.rotate(fullCircle/steps); + } + + //Scale 3, reversed scale 2 + context.restore(); + + // Add a circle as a clip path + circleClip(context, centerX, centerY, radius); + // Circle border context.beginPath(); - context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false); + context.arc(centerX, centerY, radius, 0, fullCircle, false); context.stroke(); + // Horizontal line through chart context.beginPath(); context.moveTo(centerX - radius, centerY); context.lineTo(centerX + radius, centerY); context.stroke(); + // Vertical line through chart context.beginPath(); context.moveTo(centerX, centerY - radius); context.lineTo(centerX, centerY + radius); context.stroke(); + // Real circles for (let index = 0; index < realCircles.length; index++) { const circle = realCircles[index]; context.beginPath(); @@ -247,12 +300,13 @@ export function render(settings: SmithSettings, points: Point[]) { circle.cy * radius + centerY, circle.r * radius, 0, - 2 * Math.PI, + fullCircle, false ); context.stroke(); } + // Imaginary circles for (let index = 0; index < imaginaryCircles.length; index++) { const circle = imaginaryCircles[index]; context.beginPath(); @@ -262,7 +316,7 @@ export function render(settings: SmithSettings, points: Point[]) { circle.cy * radius * -1 + centerY, circle.r * radius, 0, - 2 * Math.PI, + fullCircle, false ); context.stroke(); From 61c2e3653065208cd972db71b1f740364ebcd22a Mon Sep 17 00:00:00 2001 From: vsvensso Date: Tue, 5 Jul 2022 10:52:57 +0200 Subject: [PATCH 02/12] scales designed --- prototypes/smith-chart/src/smithChart.ts | 39 +++++++++++++++++------- 1 file changed, 28 insertions(+), 11 deletions(-) diff --git a/prototypes/smith-chart/src/smithChart.ts b/prototypes/smith-chart/src/smithChart.ts index 45930b96..b08a6af4 100644 --- a/prototypes/smith-chart/src/smithChart.ts +++ b/prototypes/smith-chart/src/smithChart.ts @@ -83,7 +83,7 @@ export function render(settings: SmithSettings, points: Point[]) { }); let scaleRadius = Math.min(settings.size.width, settings.size.height) / 2 - let radius = scaleRadius-40; + let radius = scaleRadius-60; Object.keys(canvas).forEach((k) => { canvas[k as keyof typeof canvas].width = settings.size.width; @@ -227,14 +227,22 @@ export function render(settings: SmithSettings, points: Point[]) { // Add a circle as a clip path circleClip(context, centerX, centerY, scaleRadius); + context.fillStyle = "rgb(100, 137, 250)"; + context.strokeStyle = "rgb(100, 137, 250)"; // Outer scales for(let i = 0; i < 4; i++){ + if(i == 3){ + context.fillStyle = "rgb(255, 78, 51)"; + context.strokeStyle = "rgb(255, 78, 51)"; + } context.beginPath(); - context.arc(centerX, centerY, scaleRadius-(11*i), 0, 2 * Math.PI, false); + context.arc(centerX, centerY, scaleRadius-(17*i), 0, 2 * Math.PI, false); context.stroke(); } + context.fillStyle = "#222222"; + context.strokeStyle = "#222222"; context.save(); context.translate(centerX, centerY); context.textAlign = "center"; @@ -245,29 +253,38 @@ export function render(settings: SmithSettings, points: Point[]) { for(let i = 0; i < steps; i++){ if(i%5 == 0){ - context.fillText(i== 0 ? "±" + (180-(10*i)) : (180-(10*i)).toString(), 0, -scaleRadius+31); + context.fillText(i== 0 ? "±" + (180-(2*i)) : (180-(2*i)).toString(), 0, -scaleRadius+(17*2 + 11)); + context.lineWidth = 1; } + context.beginPath(); - context.moveTo(0, -scaleRadius+30); - context.lineTo(0, -scaleRadius+33); + context.moveTo(0, -scaleRadius+(17*3)); + context.lineTo(0, -scaleRadius+(17*2 + 11 + 3)); context.stroke(); context.rotate(fullCircle/steps); + context.lineWidth = 0.5; } steps = 50*5; for(let i = 0; i < steps; i++){ if(i%5 == 0){ - context.fillText(i == 0 ? "0,0" : ((steps-i)/100).toString(), 0, -scaleRadius+21); - context.fillText(i == 0 ? "0,0" :(i/100).toString(), 0, -scaleRadius+9); + context.fillText(i == 0 ? "0,0" : ((steps-i)/500).toString(), 0, -scaleRadius+(17*1 + 11 + 1)); + context.fillText(i == 0 ? "0,0" :(i/500).toString(), 0, -scaleRadius+(17*0 + 11 + 1)); + context.lineWidth = 1; + context.beginPath(); + context.moveTo(0, -scaleRadius+(17*1 + 3)); + context.lineTo(0, -scaleRadius+(17*1 - 3)); + } + else{ + context.lineWidth = 0.5; + context.beginPath(); + context.moveTo(0, -scaleRadius+(17*1 + 2)); + context.lineTo(0, -scaleRadius+(17*1 - 2)); } - context.beginPath(); - context.moveTo(0, -scaleRadius+14); - context.lineTo(0, -scaleRadius+8); context.stroke(); context.rotate(fullCircle/steps); } - //Scale 3, reversed scale 2 context.restore(); // Add a circle as a clip path From d2bdfd1ca2dd49375b6cd9982ee6bea34042ffa9 Mon Sep 17 00:00:00 2001 From: vsvensso Date: Tue, 5 Jul 2022 11:32:10 +0200 Subject: [PATCH 03/12] Horizontal scales --- prototypes/smith-chart/src/smithChart.ts | 19 ++++++++++++++++--- 1 file changed, 16 insertions(+), 3 deletions(-) diff --git a/prototypes/smith-chart/src/smithChart.ts b/prototypes/smith-chart/src/smithChart.ts index b08a6af4..a9aa1dca 100644 --- a/prototypes/smith-chart/src/smithChart.ts +++ b/prototypes/smith-chart/src/smithChart.ts @@ -230,7 +230,7 @@ export function render(settings: SmithSettings, points: Point[]) { context.fillStyle = "rgb(100, 137, 250)"; context.strokeStyle = "rgb(100, 137, 250)"; - // Outer scales + // Outer scales for(let i = 0; i < 4; i++){ if(i == 3){ context.fillStyle = "rgb(255, 78, 51)"; @@ -241,6 +241,7 @@ export function render(settings: SmithSettings, points: Point[]) { context.stroke(); } + // Scale text prep context.fillStyle = "#222222"; context.strokeStyle = "#222222"; context.save(); @@ -265,6 +266,7 @@ export function render(settings: SmithSettings, points: Point[]) { context.lineWidth = 0.5; } + //Scale 2 & 3. 0.0->0.49 steps = 50*5; for(let i = 0; i < steps; i++){ if(i%5 == 0){ @@ -307,21 +309,32 @@ export function render(settings: SmithSettings, points: Point[]) { context.lineTo(centerX, centerY + radius); context.stroke(); + + context.save(); + context.translate(centerX, centerY); + context.rotate(-halfCircle/2); // Real circles for (let index = 0; index < realCircles.length; index++) { const circle = realCircles[index]; context.beginPath(); context.strokeStyle = index % 5 == 0 ? "rgba(2,2,2, 0.6)" : "rgba(2,2,2,0.3)"; context.arc( - circle.cx * radius + centerX, - circle.cy * radius + centerY, + circle.cy * radius, + circle.cx * radius, circle.r * radius, 0, fullCircle, false ); context.stroke(); + + // Horizontal scales + if((index % 5 == 0 && index/5 < 7) || index/5 < 1){ + + context.fillText((index/5).toString(), 3, circle.cx * radius - circle.r * radius - 2); + } } + context.restore(); // Imaginary circles for (let index = 0; index < imaginaryCircles.length; index++) { From 385b52694f8171e4747e8f31f62d28324bdcd101 Mon Sep 17 00:00:00 2001 From: vsvensso Date: Tue, 12 Jul 2022 14:24:14 +0200 Subject: [PATCH 04/12] Show outer scales property added --- prototypes/smith-chart/README.md | 4 +- prototypes/smith-chart/src/index.ts | 10 +- prototypes/smith-chart/src/resources.ts | 3 +- prototypes/smith-chart/src/smithChart.ts | 125 +++++++++--------- .../smith-chart/static/mod-manifest.json | 5 + 5 files changed, 81 insertions(+), 66 deletions(-) diff --git a/prototypes/smith-chart/README.md b/prototypes/smith-chart/README.md index c65a0b5b..2b4f24fb 100644 --- a/prototypes/smith-chart/README.md +++ b/prototypes/smith-chart/README.md @@ -6,9 +6,9 @@ All source code for the mod example can be found in the `src` folder. Other nece ## TODO -- Tooltips +- Tooltips (done?) - Scales -- Hide extra circles settings +- Hide extra circles settings (done?) ## Development Prerequisites diff --git a/prototypes/smith-chart/src/index.ts b/prototypes/smith-chart/src/index.ts index 479aaabd..9d397185 100644 --- a/prototypes/smith-chart/src/index.ts +++ b/prototypes/smith-chart/src/index.ts @@ -20,7 +20,8 @@ Spotfire.initialize(async (mod) => { mod.visualization.data(), mod.windowSize(), mod.property("gridDensity"), - mod.property("extras") + mod.property("extras"), + mod.property("outerScales") ); reader.subscribe(generalErrorHandler(mod, 40000)(onChange), (err) => { @@ -31,7 +32,8 @@ Spotfire.initialize(async (mod) => { dataView: DataView, windowSize: Spotfire.Size, densityProp: ModProperty, - extrasProp: ModProperty + extrasProp: ModProperty, + outerScalesProp: ModProperty ) { mod.controls.errorOverlay.hide(); let colorRoot = await (await dataView.hierarchy(colorAxisName))?.root(); @@ -69,6 +71,7 @@ Spotfire.initialize(async (mod) => { size: windowSize, gridDensity: densityProp.value()!, showExtras: extrasProp.value()!, + showOuterScales: outerScalesProp.value()!, clearMarking: dataView.clearMarking, mouseLeave: () => mod.controls.tooltip.hide() }, @@ -78,7 +81,8 @@ Spotfire.initialize(async (mod) => { if (context.isEditing) { renderSettings([ { label: resources.gridDensity, type: "range", property: densityProp, max: 20, min: 0, step: 1 }, - { label: resources.extras, type: "checkbox", property: extrasProp } + { label: resources.extras, type: "checkbox", property: extrasProp }, + { label: resources.outerScales, type: "checkbox", property: outerScalesProp} ]); } diff --git a/prototypes/smith-chart/src/resources.ts b/prototypes/smith-chart/src/resources.ts index 3f102c81..151f8457 100644 --- a/prototypes/smith-chart/src/resources.ts +++ b/prototypes/smith-chart/src/resources.ts @@ -1,4 +1,5 @@ export const resources = { gridDensity: "Grid density", - extras: "Extras" + extras: "Extras", + outerScales: "Outer scales" }; diff --git a/prototypes/smith-chart/src/smithChart.ts b/prototypes/smith-chart/src/smithChart.ts index a9aa1dca..8173b3f6 100644 --- a/prototypes/smith-chart/src/smithChart.ts +++ b/prototypes/smith-chart/src/smithChart.ts @@ -12,6 +12,7 @@ export interface SmithSettings { size: { width: number; height: number }; gridDensity?: number; showExtras?: boolean; + showOuterScales?: boolean; clearMarking?(): void; mouseLeave(): void; } @@ -83,7 +84,7 @@ export function render(settings: SmithSettings, points: Point[]) { }); let scaleRadius = Math.min(settings.size.width, settings.size.height) / 2 - let radius = scaleRadius-60; + let radius = settings.showOuterScales ? scaleRadius-60 : scaleRadius; Object.keys(canvas).forEach((k) => { canvas[k as keyof typeof canvas].width = settings.size.width; @@ -92,6 +93,7 @@ export function render(settings: SmithSettings, points: Point[]) { const padding = 3; radius -= padding; + scaleRadius -= padding; const bgContext = canvas.bg.getContext("2d")!; const mainContext = canvas.main.getContext("2d")!; @@ -225,72 +227,75 @@ export function render(settings: SmithSettings, points: Point[]) { context.strokeStyle = "#222222"; context.lineWidth = 1; - // Add a circle as a clip path - circleClip(context, centerX, centerY, scaleRadius); - context.fillStyle = "rgb(100, 137, 250)"; - context.strokeStyle = "rgb(100, 137, 250)"; - - // Outer scales - for(let i = 0; i < 4; i++){ - if(i == 3){ - context.fillStyle = "rgb(255, 78, 51)"; - context.strokeStyle = "rgb(255, 78, 51)"; - } - context.beginPath(); - context.arc(centerX, centerY, scaleRadius-(17*i), 0, 2 * Math.PI, false); - context.stroke(); - } - - // Scale text prep - context.fillStyle = "#222222"; - context.strokeStyle = "#222222"; - context.save(); - context.translate(centerX, centerY); - context.textAlign = "center"; - - //Scale 1. 180>0>-170 - context.rotate(-halfCircle/2); - let steps = 36*5; - - for(let i = 0; i < steps; i++){ - if(i%5 == 0){ - context.fillText(i== 0 ? "±" + (180-(2*i)) : (180-(2*i)).toString(), 0, -scaleRadius+(17*2 + 11)); - context.lineWidth = 1; + if(settings.showOuterScales) + { + // Add a circle as a clip path + circleClip(context, centerX, centerY, scaleRadius); + context.fillStyle = "rgb(100, 137, 250)"; + context.strokeStyle = "rgb(100, 137, 250)"; + + // Outer scales + for(let i = 0; i < 4; i++){ + if(i == 3){ + context.fillStyle = "rgb(255, 78, 51)"; + context.strokeStyle = "rgb(255, 78, 51)"; + } + context.beginPath(); + context.arc(centerX, centerY, scaleRadius-(17*i), 0, 2 * Math.PI, false); + context.stroke(); } - - context.beginPath(); - context.moveTo(0, -scaleRadius+(17*3)); - context.lineTo(0, -scaleRadius+(17*2 + 11 + 3)); - context.stroke(); - context.rotate(fullCircle/steps); - context.lineWidth = 0.5; - } - //Scale 2 & 3. 0.0->0.49 - steps = 50*5; - for(let i = 0; i < steps; i++){ - if(i%5 == 0){ - context.fillText(i == 0 ? "0,0" : ((steps-i)/500).toString(), 0, -scaleRadius+(17*1 + 11 + 1)); - context.fillText(i == 0 ? "0,0" :(i/500).toString(), 0, -scaleRadius+(17*0 + 11 + 1)); - context.lineWidth = 1; + // Scale text prep + context.fillStyle = "#222222"; + context.strokeStyle = "#222222"; + context.save(); + context.translate(centerX, centerY); + context.textAlign = "center"; + + //Scale 1. 180>0>-170 + context.rotate(-halfCircle/2); + let steps = 36*5; + + for(let i = 0; i < steps; i++){ + if(i%5 == 0){ + context.fillText(i== 0 ? "±" + (180-(2*i)) : (180-(2*i)).toString(), 0, -scaleRadius+(17*2 + 11)); + context.lineWidth = 1; + } + context.beginPath(); - context.moveTo(0, -scaleRadius+(17*1 + 3)); - context.lineTo(0, -scaleRadius+(17*1 - 3)); - } - else{ + context.moveTo(0, -scaleRadius+(17*3)); + context.lineTo(0, -scaleRadius+(17*2 + 11 + 3)); + context.stroke(); + context.rotate(fullCircle/steps); context.lineWidth = 0.5; - context.beginPath(); - context.moveTo(0, -scaleRadius+(17*1 + 2)); - context.lineTo(0, -scaleRadius+(17*1 - 2)); } - context.stroke(); - context.rotate(fullCircle/steps); - } - context.restore(); + //Scale 2 & 3. 0.0->0.49 + steps = 50*5; + for(let i = 0; i < steps; i++){ + if(i%5 == 0){ + context.fillText(i == 0 ? "0,0" : ((steps-i)/500).toString(), 0, -scaleRadius+(17*1 + 11 + 1)); + context.fillText(i == 0 ? "0,0" :(i/500).toString(), 0, -scaleRadius+(17*0 + 11 + 1)); + context.lineWidth = 1; + context.beginPath(); + context.moveTo(0, -scaleRadius+(17*1 + 3)); + context.lineTo(0, -scaleRadius+(17*1 - 3)); + } + else{ + context.lineWidth = 0.5; + context.beginPath(); + context.moveTo(0, -scaleRadius+(17*1 + 2)); + context.lineTo(0, -scaleRadius+(17*1 - 2)); + } + context.stroke(); + context.rotate(fullCircle/steps); + } - // Add a circle as a clip path - circleClip(context, centerX, centerY, radius); + context.restore(); + } + + // Add a circle as a clip path + circleClip(context, centerX, centerY, radius); // Circle border context.beginPath(); diff --git a/prototypes/smith-chart/static/mod-manifest.json b/prototypes/smith-chart/static/mod-manifest.json index cf3a3e86..ca9ac6ef 100644 --- a/prototypes/smith-chart/static/mod-manifest.json +++ b/prototypes/smith-chart/static/mod-manifest.json @@ -14,6 +14,11 @@ "name": "extras", "type": "boolean", "defaultValue": "false" + }, + { + "name": "outerScales", + "type": "boolean", + "defaultValue": "true" } ], "dataViewDefinition": { From 8df069e6596ba8f1d0fed9db60b905333ccf8e99 Mon Sep 17 00:00:00 2001 From: vsvensso Date: Tue, 12 Jul 2022 14:46:10 +0200 Subject: [PATCH 05/12] innerScales property added --- prototypes/smith-chart/src/index.ts | 10 +++++++--- prototypes/smith-chart/src/resources.ts | 3 ++- prototypes/smith-chart/src/smithChart.ts | 10 ++++++---- prototypes/smith-chart/static/mod-manifest.json | 5 +++++ 4 files changed, 20 insertions(+), 8 deletions(-) diff --git a/prototypes/smith-chart/src/index.ts b/prototypes/smith-chart/src/index.ts index 9d397185..82778125 100644 --- a/prototypes/smith-chart/src/index.ts +++ b/prototypes/smith-chart/src/index.ts @@ -21,7 +21,8 @@ Spotfire.initialize(async (mod) => { mod.windowSize(), mod.property("gridDensity"), mod.property("extras"), - mod.property("outerScales") + mod.property("outerScales"), + mod.property("innerScales") ); reader.subscribe(generalErrorHandler(mod, 40000)(onChange), (err) => { @@ -33,7 +34,8 @@ Spotfire.initialize(async (mod) => { windowSize: Spotfire.Size, densityProp: ModProperty, extrasProp: ModProperty, - outerScalesProp: ModProperty + outerScalesProp: ModProperty, + innerScalesProp: ModProperty ) { mod.controls.errorOverlay.hide(); let colorRoot = await (await dataView.hierarchy(colorAxisName))?.root(); @@ -72,6 +74,7 @@ Spotfire.initialize(async (mod) => { gridDensity: densityProp.value()!, showExtras: extrasProp.value()!, showOuterScales: outerScalesProp.value()!, + showInnerScales : innerScalesProp.value()!, clearMarking: dataView.clearMarking, mouseLeave: () => mod.controls.tooltip.hide() }, @@ -82,7 +85,8 @@ Spotfire.initialize(async (mod) => { renderSettings([ { label: resources.gridDensity, type: "range", property: densityProp, max: 20, min: 0, step: 1 }, { label: resources.extras, type: "checkbox", property: extrasProp }, - { label: resources.outerScales, type: "checkbox", property: outerScalesProp} + { label: resources.outerScales, type: "checkbox", property: outerScalesProp}, + { label: resources.innerScales, type: "checkbox", property: innerScalesProp}, ]); } diff --git a/prototypes/smith-chart/src/resources.ts b/prototypes/smith-chart/src/resources.ts index 151f8457..a85ae207 100644 --- a/prototypes/smith-chart/src/resources.ts +++ b/prototypes/smith-chart/src/resources.ts @@ -1,5 +1,6 @@ export const resources = { gridDensity: "Grid density", extras: "Extras", - outerScales: "Outer scales" + outerScales: "Outer scales", + innerScales: "Inner Scales" }; diff --git a/prototypes/smith-chart/src/smithChart.ts b/prototypes/smith-chart/src/smithChart.ts index 8173b3f6..dd274c4f 100644 --- a/prototypes/smith-chart/src/smithChart.ts +++ b/prototypes/smith-chart/src/smithChart.ts @@ -13,6 +13,7 @@ export interface SmithSettings { gridDensity?: number; showExtras?: boolean; showOuterScales?: boolean; + showInnerScales?: boolean; clearMarking?(): void; mouseLeave(): void; } @@ -333,10 +334,11 @@ export function render(settings: SmithSettings, points: Point[]) { ); context.stroke(); - // Horizontal scales - if((index % 5 == 0 && index/5 < 7) || index/5 < 1){ - - context.fillText((index/5).toString(), 3, circle.cx * radius - circle.r * radius - 2); + if(settings.showInnerScales){ + // Horizontal scales + if((index % 5 == 0 && index/5 < 7) || index/5 < 1){ + context.fillText((index/5).toString(), 3, circle.cx * radius - circle.r * radius - 2); + } } } context.restore(); diff --git a/prototypes/smith-chart/static/mod-manifest.json b/prototypes/smith-chart/static/mod-manifest.json index ca9ac6ef..3aa3f67b 100644 --- a/prototypes/smith-chart/static/mod-manifest.json +++ b/prototypes/smith-chart/static/mod-manifest.json @@ -19,6 +19,11 @@ "name": "outerScales", "type": "boolean", "defaultValue": "true" + }, + { + "name": "innerScales", + "type": "boolean", + "defaultValue": "true" } ], "dataViewDefinition": { From 8073edb443becd66ebdd9aa4ae92214d5307345b Mon Sep 17 00:00:00 2001 From: vsvensso Date: Wed, 13 Jul 2022 10:36:57 +0200 Subject: [PATCH 06/12] More inner scales added --- prototypes/smith-chart/src/smithChart.ts | 35 ++++++++++++++++++++++++ 1 file changed, 35 insertions(+) diff --git a/prototypes/smith-chart/src/smithChart.ts b/prototypes/smith-chart/src/smithChart.ts index dd274c4f..cdb09e88 100644 --- a/prototypes/smith-chart/src/smithChart.ts +++ b/prototypes/smith-chart/src/smithChart.ts @@ -294,6 +294,41 @@ export function render(settings: SmithSettings, points: Point[]) { context.restore(); } + + enum Quadrant { + First, + Second, + Third, + Fourth + } + + function innerScalesInCircle(text : string[], quadrant: Quadrant){ + // vsvensso: + context.save(); + context.translate(centerX, centerY); + context.rotate(-halfCircle/2); + var denominator = 16; + var increase = 0; + + for(let i = 0; i < text.length; i++){ + denominator += quadrant == Quadrant.First || quadrant == Quadrant.Second ? 2+increase : -2+increase; + context.rotate(quadrant == Quadrant.First || quadrant == Quadrant.Third ? halfCircle/denominator : -halfCircle/denominator); + context.fillText(text[i], quadrant == Quadrant.First || quadrant == Quadrant.Fourth ? radius-17 : -radius+3, -1, 15); + increase += quadrant == Quadrant.First || quadrant == Quadrant.Second ? 1 : -0.2/(i+1); + } + + context.restore(); + } + + if(settings.showInnerScales){ + var text = ["1.2", "1.4", "1.6", "1.8", "2.0"]; + innerScalesInCircle(text, Quadrant.First); + innerScalesInCircle(text, Quadrant.Second); + + text = ["0.8", "0.6", "0.4"]; + innerScalesInCircle(text, Quadrant.Third); + innerScalesInCircle(text, Quadrant.Fourth); + } // Add a circle as a clip path circleClip(context, centerX, centerY, radius); From a9e958f8f1f77bb866f95f4d056dce37499caf99 Mon Sep 17 00:00:00 2001 From: vsvensso Date: Wed, 13 Jul 2022 11:06:07 +0200 Subject: [PATCH 07/12] Zoom added --- prototypes/smith-chart/src/index.ts | 8 ++++++-- prototypes/smith-chart/src/resources.ts | 3 ++- prototypes/smith-chart/src/smithChart.ts | 3 ++- prototypes/smith-chart/static/mod-manifest.json | 5 +++++ 4 files changed, 15 insertions(+), 4 deletions(-) diff --git a/prototypes/smith-chart/src/index.ts b/prototypes/smith-chart/src/index.ts index 82778125..e43f7d2e 100644 --- a/prototypes/smith-chart/src/index.ts +++ b/prototypes/smith-chart/src/index.ts @@ -22,7 +22,8 @@ Spotfire.initialize(async (mod) => { mod.property("gridDensity"), mod.property("extras"), mod.property("outerScales"), - mod.property("innerScales") + mod.property("innerScales"), + mod.property("zoom") ); reader.subscribe(generalErrorHandler(mod, 40000)(onChange), (err) => { @@ -35,7 +36,8 @@ Spotfire.initialize(async (mod) => { densityProp: ModProperty, extrasProp: ModProperty, outerScalesProp: ModProperty, - innerScalesProp: ModProperty + innerScalesProp: ModProperty, + zoomProp: ModProperty ) { mod.controls.errorOverlay.hide(); let colorRoot = await (await dataView.hierarchy(colorAxisName))?.root(); @@ -75,6 +77,7 @@ Spotfire.initialize(async (mod) => { showExtras: extrasProp.value()!, showOuterScales: outerScalesProp.value()!, showInnerScales : innerScalesProp.value()!, + zoom : zoomProp.value()!, clearMarking: dataView.clearMarking, mouseLeave: () => mod.controls.tooltip.hide() }, @@ -87,6 +90,7 @@ Spotfire.initialize(async (mod) => { { label: resources.extras, type: "checkbox", property: extrasProp }, { label: resources.outerScales, type: "checkbox", property: outerScalesProp}, { label: resources.innerScales, type: "checkbox", property: innerScalesProp}, + { label: resources.zoom, type: "range", property: zoomProp, max: 400, min: 0, step: 20 } ]); } diff --git a/prototypes/smith-chart/src/resources.ts b/prototypes/smith-chart/src/resources.ts index a85ae207..825faf13 100644 --- a/prototypes/smith-chart/src/resources.ts +++ b/prototypes/smith-chart/src/resources.ts @@ -2,5 +2,6 @@ export const resources = { gridDensity: "Grid density", extras: "Extras", outerScales: "Outer scales", - innerScales: "Inner Scales" + innerScales: "Inner Scales", + zoom: "Zoom", }; diff --git a/prototypes/smith-chart/src/smithChart.ts b/prototypes/smith-chart/src/smithChart.ts index cdb09e88..6030778d 100644 --- a/prototypes/smith-chart/src/smithChart.ts +++ b/prototypes/smith-chart/src/smithChart.ts @@ -14,6 +14,7 @@ export interface SmithSettings { showExtras?: boolean; showOuterScales?: boolean; showInnerScales?: boolean; + zoom?: number; clearMarking?(): void; mouseLeave(): void; } @@ -84,7 +85,7 @@ export function render(settings: SmithSettings, points: Point[]) { return 0; }); - let scaleRadius = Math.min(settings.size.width, settings.size.height) / 2 + let scaleRadius = settings.zoom ? Math.min(settings.size.width, settings.size.height)*(100+settings.zoom)/200: Math.min(settings.size.width, settings.size.height)/2 let radius = settings.showOuterScales ? scaleRadius-60 : scaleRadius; Object.keys(canvas).forEach((k) => { diff --git a/prototypes/smith-chart/static/mod-manifest.json b/prototypes/smith-chart/static/mod-manifest.json index 3aa3f67b..293ffdc8 100644 --- a/prototypes/smith-chart/static/mod-manifest.json +++ b/prototypes/smith-chart/static/mod-manifest.json @@ -24,6 +24,11 @@ "name": "innerScales", "type": "boolean", "defaultValue": "true" + }, + { + "name": "zoom", + "type": "integer", + "defaultValue": "0" } ], "dataViewDefinition": { From b3a7e1dbb95ab7d6f0dbb6b8ce17f080892f0e20 Mon Sep 17 00:00:00 2001 From: vsvensso Date: Wed, 13 Jul 2022 11:27:32 +0200 Subject: [PATCH 08/12] Move canvas added --- prototypes/smith-chart/src/index.ts | 12 ++++++++++-- prototypes/smith-chart/src/resources.ts | 2 ++ prototypes/smith-chart/src/smithChart.ts | 6 ++++-- prototypes/smith-chart/static/mod-manifest.json | 10 ++++++++++ 4 files changed, 26 insertions(+), 4 deletions(-) diff --git a/prototypes/smith-chart/src/index.ts b/prototypes/smith-chart/src/index.ts index e43f7d2e..367422b1 100644 --- a/prototypes/smith-chart/src/index.ts +++ b/prototypes/smith-chart/src/index.ts @@ -23,7 +23,9 @@ Spotfire.initialize(async (mod) => { mod.property("extras"), mod.property("outerScales"), mod.property("innerScales"), - mod.property("zoom") + mod.property("zoom"), + mod.property("xCoord"), + mod.property("yCoord") ); reader.subscribe(generalErrorHandler(mod, 40000)(onChange), (err) => { @@ -37,7 +39,9 @@ Spotfire.initialize(async (mod) => { extrasProp: ModProperty, outerScalesProp: ModProperty, innerScalesProp: ModProperty, - zoomProp: ModProperty + zoomProp: ModProperty, + xCoordProp: ModProperty, + yCoordProp: ModProperty ) { mod.controls.errorOverlay.hide(); let colorRoot = await (await dataView.hierarchy(colorAxisName))?.root(); @@ -78,6 +82,8 @@ Spotfire.initialize(async (mod) => { showOuterScales: outerScalesProp.value()!, showInnerScales : innerScalesProp.value()!, zoom : zoomProp.value()!, + xCoord: xCoordProp.value()!, + yCoord: yCoordProp.value()!, clearMarking: dataView.clearMarking, mouseLeave: () => mod.controls.tooltip.hide() }, @@ -90,6 +96,8 @@ Spotfire.initialize(async (mod) => { { label: resources.extras, type: "checkbox", property: extrasProp }, { label: resources.outerScales, type: "checkbox", property: outerScalesProp}, { label: resources.innerScales, type: "checkbox", property: innerScalesProp}, + { label: resources.xCoord, type: "range", property: xCoordProp, max: 100, min: -100, step: 1 }, + { label: resources.yCoord, type: "range", property: yCoordProp, max: 100, min: -100, step: 1 }, { label: resources.zoom, type: "range", property: zoomProp, max: 400, min: 0, step: 20 } ]); } diff --git a/prototypes/smith-chart/src/resources.ts b/prototypes/smith-chart/src/resources.ts index 825faf13..b805daa8 100644 --- a/prototypes/smith-chart/src/resources.ts +++ b/prototypes/smith-chart/src/resources.ts @@ -4,4 +4,6 @@ export const resources = { outerScales: "Outer scales", innerScales: "Inner Scales", zoom: "Zoom", + xCoord: "X Coordinate", + yCoord: "Y Coordinate" }; diff --git a/prototypes/smith-chart/src/smithChart.ts b/prototypes/smith-chart/src/smithChart.ts index 6030778d..adf16647 100644 --- a/prototypes/smith-chart/src/smithChart.ts +++ b/prototypes/smith-chart/src/smithChart.ts @@ -15,6 +15,8 @@ export interface SmithSettings { showOuterScales?: boolean; showInnerScales?: boolean; zoom?: number; + xCoord?: number; + yCoord?: number; clearMarking?(): void; mouseLeave(): void; } @@ -101,8 +103,8 @@ export function render(settings: SmithSettings, points: Point[]) { const mainContext = canvas.main.getContext("2d")!; const highlightContext = canvas.hightlight.getContext("2d")!; - const centerX = canvas.main.width / 2; - const centerY = canvas.main.height / 2; + const centerX = settings.xCoord ? (canvas.main.width / 2) - (settings.xCoord*0.01*radius) : canvas.main.width / 2; + const centerY = settings.yCoord ? canvas.main.height / 2 - (settings.yCoord*0.01*radius): canvas.main.height / 2; bg(bgContext); let rendered: RenderedPoint[] = []; diff --git a/prototypes/smith-chart/static/mod-manifest.json b/prototypes/smith-chart/static/mod-manifest.json index 293ffdc8..c53bfb0a 100644 --- a/prototypes/smith-chart/static/mod-manifest.json +++ b/prototypes/smith-chart/static/mod-manifest.json @@ -29,6 +29,16 @@ "name": "zoom", "type": "integer", "defaultValue": "0" + }, + { + "name": "xCoord", + "type": "integer", + "defaultValue": "0" + }, + { + "name": "yCoord", + "type": "integer", + "defaultValue": "0" } ], "dataViewDefinition": { From 50d000baf481b8fc6a903aeea307a33c55cadc8f Mon Sep 17 00:00:00 2001 From: vsvensso Date: Thu, 14 Jul 2022 10:16:16 +0200 Subject: [PATCH 09/12] Zoom with wheel added --- prototypes/smith-chart/src/index.ts | 3 ++- prototypes/smith-chart/src/smithChart.ts | 10 ++++++++-- 2 files changed, 10 insertions(+), 3 deletions(-) diff --git a/prototypes/smith-chart/src/index.ts b/prototypes/smith-chart/src/index.ts index 367422b1..e49e8c5a 100644 --- a/prototypes/smith-chart/src/index.ts +++ b/prototypes/smith-chart/src/index.ts @@ -43,6 +43,7 @@ Spotfire.initialize(async (mod) => { xCoordProp: ModProperty, yCoordProp: ModProperty ) { + mod.controls.errorOverlay.hide(); let colorRoot = await (await dataView.hierarchy(colorAxisName))?.root(); @@ -81,7 +82,7 @@ Spotfire.initialize(async (mod) => { showExtras: extrasProp.value()!, showOuterScales: outerScalesProp.value()!, showInnerScales : innerScalesProp.value()!, - zoom : zoomProp.value()!, + zoom : zoomProp, xCoord: xCoordProp.value()!, yCoord: yCoordProp.value()!, clearMarking: dataView.clearMarking, diff --git a/prototypes/smith-chart/src/smithChart.ts b/prototypes/smith-chart/src/smithChart.ts index adf16647..0b21f837 100644 --- a/prototypes/smith-chart/src/smithChart.ts +++ b/prototypes/smith-chart/src/smithChart.ts @@ -1,5 +1,6 @@ // @ts-ignore import * as d3 from "d3"; +import { ModProperty } from "spotfire-api"; import { rectangularSelection } from "./rectangularMarking"; export type ComplexNumber = [real: number, imaginary: number]; @@ -14,7 +15,7 @@ export interface SmithSettings { showExtras?: boolean; showOuterScales?: boolean; showInnerScales?: boolean; - zoom?: number; + zoom?: ModProperty ; xCoord?: number; yCoord?: number; clearMarking?(): void; @@ -71,6 +72,11 @@ export function createCanvases(parent: HTMLElement) { export function render(settings: SmithSettings, points: Point[]) { const { canvas } = settings; + // Zoom with wheel + canvas.main.onwheel = (e: WheelEvent) => { + settings.zoom?.set( Math.min(Math.max( settings.zoom?.value()! - e.deltaY, 0), 400)); + }; + points.sort((a, b) => { if (a.isMarked && b.isMarked) { return 0; @@ -87,7 +93,7 @@ export function render(settings: SmithSettings, points: Point[]) { return 0; }); - let scaleRadius = settings.zoom ? Math.min(settings.size.width, settings.size.height)*(100+settings.zoom)/200: Math.min(settings.size.width, settings.size.height)/2 + let scaleRadius = settings.zoom?.value() ? Math.min((settings.size.width, settings.size.height)*(100+settings.zoom.value()!))/200: Math.min(settings.size.width, settings.size.height)/2 let radius = settings.showOuterScales ? scaleRadius-60 : scaleRadius; Object.keys(canvas).forEach((k) => { From 03beb3bae1d8fc9dccfdd6cb70b7b678e4456be9 Mon Sep 17 00:00:00 2001 From: vsvensso Date: Thu, 14 Jul 2022 11:03:02 +0200 Subject: [PATCH 10/12] Move canvas with arrow keys added --- prototypes/smith-chart/src/index.ts | 4 +-- prototypes/smith-chart/src/smithChart.ts | 39 ++++++++++++++++++------ 2 files changed, 32 insertions(+), 11 deletions(-) diff --git a/prototypes/smith-chart/src/index.ts b/prototypes/smith-chart/src/index.ts index e49e8c5a..7c8b5b44 100644 --- a/prototypes/smith-chart/src/index.ts +++ b/prototypes/smith-chart/src/index.ts @@ -83,8 +83,8 @@ Spotfire.initialize(async (mod) => { showOuterScales: outerScalesProp.value()!, showInnerScales : innerScalesProp.value()!, zoom : zoomProp, - xCoord: xCoordProp.value()!, - yCoord: yCoordProp.value()!, + xCoord: xCoordProp, + yCoord: yCoordProp, clearMarking: dataView.clearMarking, mouseLeave: () => mod.controls.tooltip.hide() }, diff --git a/prototypes/smith-chart/src/smithChart.ts b/prototypes/smith-chart/src/smithChart.ts index 0b21f837..7eb60035 100644 --- a/prototypes/smith-chart/src/smithChart.ts +++ b/prototypes/smith-chart/src/smithChart.ts @@ -16,8 +16,8 @@ export interface SmithSettings { showOuterScales?: boolean; showInnerScales?: boolean; zoom?: ModProperty ; - xCoord?: number; - yCoord?: number; + xCoord?: ModProperty; + yCoord?: ModProperty ; clearMarking?(): void; mouseLeave(): void; } @@ -72,11 +72,6 @@ export function createCanvases(parent: HTMLElement) { export function render(settings: SmithSettings, points: Point[]) { const { canvas } = settings; - // Zoom with wheel - canvas.main.onwheel = (e: WheelEvent) => { - settings.zoom?.set( Math.min(Math.max( settings.zoom?.value()! - e.deltaY, 0), 400)); - }; - points.sort((a, b) => { if (a.isMarked && b.isMarked) { return 0; @@ -109,8 +104,8 @@ export function render(settings: SmithSettings, points: Point[]) { const mainContext = canvas.main.getContext("2d")!; const highlightContext = canvas.hightlight.getContext("2d")!; - const centerX = settings.xCoord ? (canvas.main.width / 2) - (settings.xCoord*0.01*radius) : canvas.main.width / 2; - const centerY = settings.yCoord ? canvas.main.height / 2 - (settings.yCoord*0.01*radius): canvas.main.height / 2; + let centerX = settings.xCoord ? (canvas.main.width / 2) - (settings.xCoord.value()!*0.01*radius) : canvas.main.width / 2; + let centerY = settings.yCoord ? canvas.main.height / 2 - (settings.yCoord.value()!*0.01*radius): canvas.main.height / 2; bg(bgContext); let rendered: RenderedPoint[] = []; @@ -183,6 +178,32 @@ export function render(settings: SmithSettings, points: Point[]) { mainContext.fill(); } + + // Zoom with wheel + canvas.main.onwheel = (e: WheelEvent) => { + settings.zoom?.set( Math.min(Math.max( settings.zoom?.value()! - e.deltaY, 0), 400)); + }; + + // Move canvas with arrow keys + document.onkeydown = (e: KeyboardEvent) => { + var speed = 2; + switch(e.key){ + case ("ArrowRight") : + settings.xCoord?.set(settings.xCoord.value()!+speed); + break; + case ("ArrowLeft") : + settings.xCoord?.set(settings.xCoord.value()!-speed); + break; + case ("ArrowUp") : + settings.yCoord?.set(settings.yCoord.value()!-speed); + break; + case ("ArrowDown") : + settings.yCoord?.set(settings.yCoord.value()!+speed); + break; + } + }; + + rectangularSelection(canvas.main, rendered, { mark(p, e) { p.point.mark(e.ctrlKey); From 1fa6fc6f0290d94852c5ca6822c198e6809d1389 Mon Sep 17 00:00:00 2001 From: vsvensso Date: Thu, 14 Jul 2022 14:04:16 +0200 Subject: [PATCH 11/12] Offset limit --- prototypes/smith-chart/src/smithChart.ts | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/prototypes/smith-chart/src/smithChart.ts b/prototypes/smith-chart/src/smithChart.ts index 7eb60035..ae00f6f8 100644 --- a/prototypes/smith-chart/src/smithChart.ts +++ b/prototypes/smith-chart/src/smithChart.ts @@ -178,7 +178,6 @@ export function render(settings: SmithSettings, points: Point[]) { mainContext.fill(); } - // Zoom with wheel canvas.main.onwheel = (e: WheelEvent) => { settings.zoom?.set( Math.min(Math.max( settings.zoom?.value()! - e.deltaY, 0), 400)); @@ -189,21 +188,20 @@ export function render(settings: SmithSettings, points: Point[]) { var speed = 2; switch(e.key){ case ("ArrowRight") : - settings.xCoord?.set(settings.xCoord.value()!+speed); + settings.xCoord?.set(Math.min(settings.xCoord.value()!+speed, 100)); break; case ("ArrowLeft") : - settings.xCoord?.set(settings.xCoord.value()!-speed); + settings.xCoord?.set(Math.max(settings.xCoord.value()!-speed, -100)); break; case ("ArrowUp") : - settings.yCoord?.set(settings.yCoord.value()!-speed); + settings.yCoord?.set(Math.max(settings.yCoord.value()!-speed, -100)); break; case ("ArrowDown") : - settings.yCoord?.set(settings.yCoord.value()!+speed); + settings.yCoord?.set(Math.min(settings.yCoord.value()!+speed, 100)); break; } }; - rectangularSelection(canvas.main, rendered, { mark(p, e) { p.point.mark(e.ctrlKey); From e3fa181b42564771efe5a733d979afae5507d187 Mon Sep 17 00:00:00 2001 From: vsvensso Date: Thu, 14 Jul 2022 14:28:07 +0200 Subject: [PATCH 12/12] Show less numbers when visualization is very small --- prototypes/smith-chart/src/smithChart.ts | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/prototypes/smith-chart/src/smithChart.ts b/prototypes/smith-chart/src/smithChart.ts index ae00f6f8..8a1a6fb8 100644 --- a/prototypes/smith-chart/src/smithChart.ts +++ b/prototypes/smith-chart/src/smithChart.ts @@ -303,8 +303,11 @@ export function render(settings: SmithSettings, points: Point[]) { steps = 50*5; for(let i = 0; i < steps; i++){ if(i%5 == 0){ - context.fillText(i == 0 ? "0,0" : ((steps-i)/500).toString(), 0, -scaleRadius+(17*1 + 11 + 1)); - context.fillText(i == 0 ? "0,0" :(i/500).toString(), 0, -scaleRadius+(17*0 + 11 + 1)); + // Show less numbers if visualization is very small to avoid clutter + if(scaleRadius > 280 || i%10 == 0){ + context.fillText(i == 0 ? "0,0" : ((steps-i)/500).toString(), 0, -scaleRadius+(17*1 + 11 + 1)); + context.fillText(i == 0 ? "0,0" :(i/500).toString(), 0, -scaleRadius+(17*0 + 11 + 1)); + } context.lineWidth = 1; context.beginPath(); context.moveTo(0, -scaleRadius+(17*1 + 3));