From 353de45cfab1e9babfcb1c77b29404fe55733b45 Mon Sep 17 00:00:00 2001 From: Olivier Swaak Date: Sat, 13 Jul 2024 13:13:05 +0200 Subject: [PATCH 01/16] feat: box with click event to get coordinates https://github.com/NatuurkundePracticumAmsterdam/ecpc/issues/24#issuecomment-2226858193 https://stackoverflow.com/questions/3234256/find-mouse-position-relative-to-element --- docs/assets/uncertainty/uncertainty.css | 6 ++++++ docs/assets/uncertainty/uncertainty.js | 6 ++++++ docs/mvc.md | 2 +- mkdocs.yml | 2 ++ 4 files changed, 15 insertions(+), 1 deletion(-) create mode 100644 docs/assets/uncertainty/uncertainty.css create mode 100644 docs/assets/uncertainty/uncertainty.js diff --git a/docs/assets/uncertainty/uncertainty.css b/docs/assets/uncertainty/uncertainty.css new file mode 100644 index 0000000..9682f14 --- /dev/null +++ b/docs/assets/uncertainty/uncertainty.css @@ -0,0 +1,6 @@ +#click_box { + width: 200px; + height: 200px; + border: 1px solid black; + cursor: pointer; +} \ No newline at end of file diff --git a/docs/assets/uncertainty/uncertainty.js b/docs/assets/uncertainty/uncertainty.js new file mode 100644 index 0000000..50b4746 --- /dev/null +++ b/docs/assets/uncertainty/uncertainty.js @@ -0,0 +1,6 @@ +function addPoint(e) { + var rect = e.target.getBoundingClientRect(); + var x = e.clientX - rect.left; + var y = e.clientY - rect.top; + console.log(x + ", " + y); +} \ No newline at end of file diff --git a/docs/mvc.md b/docs/mvc.md index 3621895..d49406d 100644 --- a/docs/mvc.md +++ b/docs/mvc.md @@ -107,4 +107,4 @@ Het oorspronkelijke script dat je gebruikte voor je meting is steeds leger gewor 1. Overleg met je groepje en maak een plan hoe jullie de code gaan aanpassen om onzekerheid in te bouwen. Schrijf nog geen code op je computer maar schrijf de stappen uit met papier en pen. Het is dan veel makkelijker om te overleggen en na te denken. Welke delen van het programma moeten worden aangepast? 1. Gebruik het plan om je eigen code aan te passen en test dat het werkt. - +
\ No newline at end of file diff --git a/mkdocs.yml b/mkdocs.yml index 238a23e..90d894b 100644 --- a/mkdocs.yml +++ b/mkdocs.yml @@ -48,12 +48,14 @@ extra_javascript: - https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.16.7/contrib/auto-render.min.js - assets/ADC_slider/ADC_slider.js - assets/run_button/run_button.js + - assets/uncertainty/uncertainty.js extra_css: - https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.16.7/katex.min.css - stylesheets/extra.css - assets/ADC_slider/ADC_slider.css - assets/run_button/run_button.css + - assets/uncertainty/uncertainty.css nav: - index.md From 8a7aa89f507f282cd016f11b581927d7a0c8cb2f Mon Sep 17 00:00:00 2001 From: Olivier Swaak Date: Sat, 13 Jul 2024 13:48:36 +0200 Subject: [PATCH 02/16] feat: generate points on click https://github.com/NatuurkundePracticumAmsterdam/ecpc/issues/24#issuecomment-2226873190 --- docs/assets/uncertainty/uncertainty.css | 14 ++++++++++++-- docs/assets/uncertainty/uncertainty.js | 9 +++++++++ 2 files changed, 21 insertions(+), 2 deletions(-) diff --git a/docs/assets/uncertainty/uncertainty.css b/docs/assets/uncertainty/uncertainty.css index 9682f14..e108dfd 100644 --- a/docs/assets/uncertainty/uncertainty.css +++ b/docs/assets/uncertainty/uncertainty.css @@ -1,6 +1,16 @@ #click_box { - width: 200px; - height: 200px; + width: 500px; + height: 500px; border: 1px solid black; cursor: pointer; + position: relative; +} + +.datapoint { + height:10px; + width: 10px; + background-color: #4051b5; + border-radius: 50%; + display: inline-block; + position: absolute; } \ No newline at end of file diff --git a/docs/assets/uncertainty/uncertainty.js b/docs/assets/uncertainty/uncertainty.js index 50b4746..c09a176 100644 --- a/docs/assets/uncertainty/uncertainty.js +++ b/docs/assets/uncertainty/uncertainty.js @@ -3,4 +3,13 @@ function addPoint(e) { var x = e.clientX - rect.left; var y = e.clientY - rect.top; console.log(x + ", " + y); + + const datapoint = document.createElement("span"); + datapoint.classList.add("datapoint"); + + const parent = document.getElementById("click_box"); + parent.appendChild(datapoint); + + datapoint.style.left = x + 'px'; + datapoint.style.top = y + 'px'; } \ No newline at end of file From 193fbfe136f014131a97582bd66f5ff042638203 Mon Sep 17 00:00:00 2001 From: Olivier Swaak Date: Sat, 13 Jul 2024 13:56:06 +0200 Subject: [PATCH 03/16] fix: only get coordinates of click box https://github.com/NatuurkundePracticumAmsterdam/ecpc/issues/24#issuecomment-2226874297 --- docs/assets/uncertainty/uncertainty.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/docs/assets/uncertainty/uncertainty.js b/docs/assets/uncertainty/uncertainty.js index c09a176..e54783d 100644 --- a/docs/assets/uncertainty/uncertainty.js +++ b/docs/assets/uncertainty/uncertainty.js @@ -1,5 +1,6 @@ function addPoint(e) { - var rect = e.target.getBoundingClientRect(); + const click_box = document.getElementById("click_box"); + var rect = click_box.getBoundingClientRect(); var x = e.clientX - rect.left; var y = e.clientY - rect.top; console.log(x + ", " + y); @@ -7,9 +8,8 @@ function addPoint(e) { const datapoint = document.createElement("span"); datapoint.classList.add("datapoint"); - const parent = document.getElementById("click_box"); - parent.appendChild(datapoint); - + click_box.appendChild(datapoint); + datapoint.style.left = x + 'px'; datapoint.style.top = y + 'px'; } \ No newline at end of file From e20bedb22eecc44118a94c4e0bd7e89a76b847e8 Mon Sep 17 00:00:00 2001 From: Olivier Swaak Date: Sat, 13 Jul 2024 14:04:17 +0200 Subject: [PATCH 04/16] feat: corrected for offset of cursor https://github.com/NatuurkundePracticumAmsterdam/ecpc/issues/24#issuecomment-2226877032 --- docs/assets/uncertainty/uncertainty.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/assets/uncertainty/uncertainty.js b/docs/assets/uncertainty/uncertainty.js index e54783d..b0ba18a 100644 --- a/docs/assets/uncertainty/uncertainty.js +++ b/docs/assets/uncertainty/uncertainty.js @@ -10,6 +10,6 @@ function addPoint(e) { click_box.appendChild(datapoint); - datapoint.style.left = x + 'px'; - datapoint.style.top = y + 'px'; + datapoint.style.left = x - 6 + 'px'; + datapoint.style.top = y - 6 + 'px'; } \ No newline at end of file From 95141a096a2f0592ec09b9efd6ebd6bc0f96831a Mon Sep 17 00:00:00 2001 From: Olivier Swaak Date: Sat, 13 Jul 2024 14:52:22 +0200 Subject: [PATCH 05/16] feat: dont render points when outside box https://github.com/NatuurkundePracticumAmsterdam/ecpc/issues/24#issuecomment-2226889472 --- docs/assets/uncertainty/uncertainty.css | 7 +++++++ docs/assets/uncertainty/uncertainty.js | 2 ++ docs/mvc.md | 4 +++- 3 files changed, 12 insertions(+), 1 deletion(-) diff --git a/docs/assets/uncertainty/uncertainty.css b/docs/assets/uncertainty/uncertainty.css index e108dfd..1573492 100644 --- a/docs/assets/uncertainty/uncertainty.css +++ b/docs/assets/uncertainty/uncertainty.css @@ -13,4 +13,11 @@ border-radius: 50%; display: inline-block; position: absolute; +} + +.border_zone { + outline: 10px solid white; + width: 500px; + height: 500px; + position: relative; } \ No newline at end of file diff --git a/docs/assets/uncertainty/uncertainty.js b/docs/assets/uncertainty/uncertainty.js index b0ba18a..d46b47f 100644 --- a/docs/assets/uncertainty/uncertainty.js +++ b/docs/assets/uncertainty/uncertainty.js @@ -12,4 +12,6 @@ function addPoint(e) { datapoint.style.left = x - 6 + 'px'; datapoint.style.top = y - 6 + 'px'; + + datapoint.style.zIndex = -1; } \ No newline at end of file diff --git a/docs/mvc.md b/docs/mvc.md index d49406d..3ccf0a0 100644 --- a/docs/mvc.md +++ b/docs/mvc.md @@ -107,4 +107,6 @@ Het oorspronkelijke script dat je gebruikte voor je meting is steeds leger gewor 1. Overleg met je groepje en maak een plan hoe jullie de code gaan aanpassen om onzekerheid in te bouwen. Schrijf nog geen code op je computer maar schrijf de stappen uit met papier en pen. Het is dan veel makkelijker om te overleggen en na te denken. Welke delen van het programma moeten worden aangepast? 1. Gebruik het plan om je eigen code aan te passen en test dat het werkt. -
\ No newline at end of file +
+
+
\ No newline at end of file From 63e654dd84693822d20544e3ffc2be250b39d487 Mon Sep 17 00:00:00 2001 From: Olivier Swaak Date: Sat, 13 Jul 2024 15:07:39 +0200 Subject: [PATCH 06/16] feat: display box #24 --- docs/assets/uncertainty/uncertainty.css | 19 +++++++++++++++---- docs/mvc.md | 4 ++++ 2 files changed, 19 insertions(+), 4 deletions(-) diff --git a/docs/assets/uncertainty/uncertainty.css b/docs/assets/uncertainty/uncertainty.css index 1573492..3dad672 100644 --- a/docs/assets/uncertainty/uncertainty.css +++ b/docs/assets/uncertainty/uncertainty.css @@ -1,11 +1,21 @@ #click_box { - width: 500px; - height: 500px; + width: 400px; + height: 400px; border: 1px solid black; cursor: pointer; position: relative; } +#display_box { + width: 400px; + height: 400px; + border: 1px solid black; + cursor: pointer; + position: relative; + float: left; + margin-left: 100px; +} + .datapoint { height:10px; width: 10px; @@ -17,7 +27,8 @@ .border_zone { outline: 10px solid white; - width: 500px; - height: 500px; + width: 400px; + height: 400px; position: relative; + float: left; } \ No newline at end of file diff --git a/docs/mvc.md b/docs/mvc.md index 3ccf0a0..3041a4f 100644 --- a/docs/mvc.md +++ b/docs/mvc.md @@ -107,6 +107,10 @@ Het oorspronkelijke script dat je gebruikte voor je meting is steeds leger gewor 1. Overleg met je groepje en maak een plan hoe jullie de code gaan aanpassen om onzekerheid in te bouwen. Schrijf nog geen code op je computer maar schrijf de stappen uit met papier en pen. Het is dan veel makkelijker om te overleggen en na te denken. Welke delen van het programma moeten worden aangepast? 1. Gebruik het plan om je eigen code aan te passen en test dat het werkt. +
+
+ +
\ No newline at end of file From d76d3d963d8385a8a0baf52db25ff584d816c53d Mon Sep 17 00:00:00 2001 From: Olivier Swaak Date: Sat, 13 Jul 2024 15:27:39 +0200 Subject: [PATCH 07/16] feat: CSS now scales with screen size https://github.com/NatuurkundePracticumAmsterdam/ecpc/issues/24#issuecomment-2226903191 --- docs/assets/uncertainty/uncertainty.css | 15 ++++++++------- docs/mvc.md | 7 ++++--- 2 files changed, 12 insertions(+), 10 deletions(-) diff --git a/docs/assets/uncertainty/uncertainty.css b/docs/assets/uncertainty/uncertainty.css index 3dad672..30c005f 100644 --- a/docs/assets/uncertainty/uncertainty.css +++ b/docs/assets/uncertainty/uncertainty.css @@ -1,19 +1,17 @@ #click_box { - width: 400px; - height: 400px; + width: 100%; border: 1px solid black; cursor: pointer; position: relative; } #display_box { - width: 400px; - height: 400px; + width: 45%; border: 1px solid black; cursor: pointer; position: relative; float: left; - margin-left: 100px; + margin-left: 10%; } .datapoint { @@ -27,8 +25,11 @@ .border_zone { outline: 10px solid white; - width: 400px; - height: 400px; + width: 45%; position: relative; float: left; +} + +.dummy { + margin-top: 100%; } \ No newline at end of file diff --git a/docs/mvc.md b/docs/mvc.md index 3041a4f..9c50dfe 100644 --- a/docs/mvc.md +++ b/docs/mvc.md @@ -107,10 +107,11 @@ Het oorspronkelijke script dat je gebruikte voor je meting is steeds leger gewor 1. Overleg met je groepje en maak een plan hoe jullie de code gaan aanpassen om onzekerheid in te bouwen. Schrijf nog geen code op je computer maar schrijf de stappen uit met papier en pen. Het is dan veel makkelijker om te overleggen en na te denken. Welke delen van het programma moeten worden aangepast? 1. Gebruik het plan om je eigen code aan te passen en test dat het werkt. -
+
-
+
+
-
+
\ No newline at end of file From 4f3b36a9a39ebc6c04c5c5f25e0531462805b431 Mon Sep 17 00:00:00 2001 From: Olivier Swaak Date: Sat, 13 Jul 2024 15:31:32 +0200 Subject: [PATCH 08/16] fix: datapoint location scales with screen size https://github.com/NatuurkundePracticumAmsterdam/ecpc/issues/24#issuecomment-2226904092 --- docs/assets/uncertainty/uncertainty.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/docs/assets/uncertainty/uncertainty.js b/docs/assets/uncertainty/uncertainty.js index d46b47f..b51e2c5 100644 --- a/docs/assets/uncertainty/uncertainty.js +++ b/docs/assets/uncertainty/uncertainty.js @@ -1,8 +1,8 @@ function addPoint(e) { const click_box = document.getElementById("click_box"); var rect = click_box.getBoundingClientRect(); - var x = e.clientX - rect.left; - var y = e.clientY - rect.top; + var x = (e.clientX - rect.left - 6) / rect.width * 100; + var y = (e.clientY - rect.top - 6) / rect.width * 100; console.log(x + ", " + y); const datapoint = document.createElement("span"); @@ -10,8 +10,8 @@ function addPoint(e) { click_box.appendChild(datapoint); - datapoint.style.left = x - 6 + 'px'; - datapoint.style.top = y - 6 + 'px'; + datapoint.style.left = x + "%"; + datapoint.style.top = y + "%"; datapoint.style.zIndex = -1; } \ No newline at end of file From 83d154e5a28a2eb3eabd1a5deb39e6b7d34316d5 Mon Sep 17 00:00:00 2001 From: Olivier Swaak Date: Sun, 14 Jul 2024 11:43:58 +0200 Subject: [PATCH 09/16] feat: added mean point #24 Need to bring back right scaling. --- docs/assets/uncertainty/uncertainty.css | 8 ++++-- docs/assets/uncertainty/uncertainty.js | 35 ++++++++++++++++++++++++- docs/mvc.md | 5 +++- 3 files changed, 44 insertions(+), 4 deletions(-) diff --git a/docs/assets/uncertainty/uncertainty.css b/docs/assets/uncertainty/uncertainty.css index 30c005f..f3f14a0 100644 --- a/docs/assets/uncertainty/uncertainty.css +++ b/docs/assets/uncertainty/uncertainty.css @@ -6,16 +6,20 @@ } #display_box { - width: 45%; + width: 100%; + height: 469px; border: 1px solid black; cursor: pointer; position: relative; float: left; +} + +#right_box { margin-left: 10%; } .datapoint { - height:10px; + height: 10px; width: 10px; background-color: #4051b5; border-radius: 50%; diff --git a/docs/assets/uncertainty/uncertainty.js b/docs/assets/uncertainty/uncertainty.js index b51e2c5..b78382c 100644 --- a/docs/assets/uncertainty/uncertainty.js +++ b/docs/assets/uncertainty/uncertainty.js @@ -1,9 +1,16 @@ +const xs = []; +const ys = []; + function addPoint(e) { const click_box = document.getElementById("click_box"); var rect = click_box.getBoundingClientRect(); var x = (e.clientX - rect.left - 6) / rect.width * 100; var y = (e.clientY - rect.top - 6) / rect.width * 100; - console.log(x + ", " + y); + + xs.push(x); + ys.push(y); + + // console.log(x + ", " + y); const datapoint = document.createElement("span"); datapoint.classList.add("datapoint"); @@ -14,4 +21,30 @@ function addPoint(e) { datapoint.style.top = y + "%"; datapoint.style.zIndex = -1; + + updateCentre(); +} + +function updateCentre() { + if (xs.length == 1) { + const datapoint = document.createElement("span"); + datapoint.classList.add("datapoint"); + datapoint.id = "mean_point"; + + const display_box = document.getElementById("display_box"); + display_box.appendChild(datapoint); + } + + var x = 0; + var y = 0; + for (var i = 0; i < xs.length; i++) { + x += xs[i]/xs.length; + y += ys[i]/ys.length; + } + + const meanpoint = document.getElementById("mean_point"); + meanpoint.style.left = x + "%"; + meanpoint.style.top = y + "%"; + + console.log(y); } \ No newline at end of file diff --git a/docs/mvc.md b/docs/mvc.md index 9c50dfe..40c6466 100644 --- a/docs/mvc.md +++ b/docs/mvc.md @@ -113,5 +113,8 @@ Het oorspronkelijke script dat je gebruikte voor je meting is steeds leger gewor
-
+
+
+ +
\ No newline at end of file From d075def03ab09f33d53e5c6e43b7645cf6214010 Mon Sep 17 00:00:00 2001 From: Olivier Swaak Date: Sun, 14 Jul 2024 11:53:47 +0200 Subject: [PATCH 10/16] feat: removed whitespace scales with screen size https://github.com/NatuurkundePracticumAmsterdam/ecpc/issues/24#issuecomment-2227286100 --- docs/assets/uncertainty/uncertainty.css | 2 -- docs/mvc.md | 4 +--- 2 files changed, 1 insertion(+), 5 deletions(-) diff --git a/docs/assets/uncertainty/uncertainty.css b/docs/assets/uncertainty/uncertainty.css index f3f14a0..a2731fd 100644 --- a/docs/assets/uncertainty/uncertainty.css +++ b/docs/assets/uncertainty/uncertainty.css @@ -7,11 +7,9 @@ #display_box { width: 100%; - height: 469px; border: 1px solid black; cursor: pointer; position: relative; - float: left; } #right_box { diff --git a/docs/mvc.md b/docs/mvc.md index 40c6466..dfe3984 100644 --- a/docs/mvc.md +++ b/docs/mvc.md @@ -110,11 +110,9 @@ Het oorspronkelijke script dat je gebruikte voor je meting is steeds leger gewor
-
-
- +
\ No newline at end of file From 461d37edaedaad5247e81b2b646584eb204b98ea Mon Sep 17 00:00:00 2001 From: Olivier Swaak Date: Sun, 14 Jul 2024 12:03:06 +0200 Subject: [PATCH 11/16] feat: calculate error #24 --- docs/assets/uncertainty/uncertainty.js | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/docs/assets/uncertainty/uncertainty.js b/docs/assets/uncertainty/uncertainty.js index b78382c..b8bb020 100644 --- a/docs/assets/uncertainty/uncertainty.js +++ b/docs/assets/uncertainty/uncertainty.js @@ -42,9 +42,20 @@ function updateCentre() { y += ys[i]/ys.length; } + var x_square_sum = 0; + var y_square_sum = 0; + + for (var i = 0; i < xs.length; i++) { + x_square_sum += Math.pow((xs[i] - x), 2); + y_square_sum += Math.pow((ys[i] - y), 2); + } + + var dx = Math.pow(x_square_sum, 0.5) / xs.length + var dy = Math.pow(y_square_sum, 0.5) / ys.length + const meanpoint = document.getElementById("mean_point"); meanpoint.style.left = x + "%"; meanpoint.style.top = y + "%"; - console.log(y); + console.log(dx, dy); } \ No newline at end of file From 70e09f01bcdf43aab3e46073455d6c7ec9f1f0d5 Mon Sep 17 00:00:00 2001 From: Olivier Swaak Date: Sun, 14 Jul 2024 12:31:10 +0200 Subject: [PATCH 12/16] feat: svg line for errorbar https://github.com/NatuurkundePracticumAmsterdam/ecpc/issues/24#issuecomment-2227295768 --- docs/assets/uncertainty/uncertainty.js | 5 +++++ docs/mvc.md | 11 +++++++++-- 2 files changed, 14 insertions(+), 2 deletions(-) diff --git a/docs/assets/uncertainty/uncertainty.js b/docs/assets/uncertainty/uncertainty.js index b8bb020..58f2946 100644 --- a/docs/assets/uncertainty/uncertainty.js +++ b/docs/assets/uncertainty/uncertainty.js @@ -53,6 +53,11 @@ function updateCentre() { var dx = Math.pow(x_square_sum, 0.5) / xs.length var dy = Math.pow(y_square_sum, 0.5) / ys.length + const xbar = document.getElementById("bar"); + const click_box = document.getElementById("click_box"); + var rect = click_box.getBoundingClientRect(); + xbar.x1.baseVal.value = dx; + const meanpoint = document.getElementById("mean_point"); meanpoint.style.left = x + "%"; meanpoint.style.top = y + "%"; diff --git a/docs/mvc.md b/docs/mvc.md index dfe3984..f35a81c 100644 --- a/docs/mvc.md +++ b/docs/mvc.md @@ -108,11 +108,18 @@ Het oorspronkelijke script dat je gebruikte voor je meting is steeds leger gewor 1. Gebruik het plan om je eigen code aan te passen en test dat het werkt.
+
-
+
+
+
-
+
+ + +
+
\ No newline at end of file From b7b1b7ace8ab6e55f49e7cc404a3a63ed851fb5f Mon Sep 17 00:00:00 2001 From: Olivier Swaak Date: Sun, 14 Jul 2024 12:37:40 +0200 Subject: [PATCH 13/16] feat: basic errorbars https://github.com/NatuurkundePracticumAmsterdam/ecpc/issues/24#issuecomment-2227297569 --- docs/assets/uncertainty/uncertainty.js | 16 ++++++++++++---- docs/mvc.md | 3 ++- 2 files changed, 14 insertions(+), 5 deletions(-) diff --git a/docs/assets/uncertainty/uncertainty.js b/docs/assets/uncertainty/uncertainty.js index 58f2946..52f9341 100644 --- a/docs/assets/uncertainty/uncertainty.js +++ b/docs/assets/uncertainty/uncertainty.js @@ -53,10 +53,18 @@ function updateCentre() { var dx = Math.pow(x_square_sum, 0.5) / xs.length var dy = Math.pow(y_square_sum, 0.5) / ys.length - const xbar = document.getElementById("bar"); - const click_box = document.getElementById("click_box"); - var rect = click_box.getBoundingClientRect(); - xbar.x1.baseVal.value = dx; + const xbar = document.getElementById("xbar"); + const ybar = document.getElementById("ybar"); + + xbar.x1.baseVal.value = x - dx; + xbar.x2.baseVal.value = x + dx; + xbar.y1.baseVal.value = y; + xbar.y2.baseVal.value = y; + + ybar.x1.baseVal.value = x; + ybar.x2.baseVal.value = x; + ybar.y1.baseVal.value = y - dy; + ybar.y2.baseVal.value = y + dy; const meanpoint = document.getElementById("mean_point"); meanpoint.style.left = x + "%"; diff --git a/docs/mvc.md b/docs/mvc.md index f35a81c..e010ebd 100644 --- a/docs/mvc.md +++ b/docs/mvc.md @@ -118,7 +118,8 @@ Het oorspronkelijke script dat je gebruikte voor je meting is steeds leger gewor
- + +
From 7fb0a4166e8cbf554cda137bd208be95fd41a23b Mon Sep 17 00:00:00 2001 From: Olivier Swaak Date: Sun, 14 Jul 2024 12:43:44 +0200 Subject: [PATCH 14/16] fix: centred errorbars on dot https://github.com/NatuurkundePracticumAmsterdam/ecpc/issues/24#issuecomment-2227298922 --- docs/assets/uncertainty/uncertainty.js | 23 +++++++++++++---------- 1 file changed, 13 insertions(+), 10 deletions(-) diff --git a/docs/assets/uncertainty/uncertainty.js b/docs/assets/uncertainty/uncertainty.js index 52f9341..fdc7a26 100644 --- a/docs/assets/uncertainty/uncertainty.js +++ b/docs/assets/uncertainty/uncertainty.js @@ -4,8 +4,8 @@ const ys = []; function addPoint(e) { const click_box = document.getElementById("click_box"); var rect = click_box.getBoundingClientRect(); - var x = (e.clientX - rect.left - 6) / rect.width * 100; - var y = (e.clientY - rect.top - 6) / rect.width * 100; + var x = (e.clientX - rect.left - 5) / rect.width * 100; + var y = (e.clientY - rect.top - 5) / rect.width * 100; xs.push(x); ys.push(y); @@ -53,18 +53,21 @@ function updateCentre() { var dx = Math.pow(x_square_sum, 0.5) / xs.length var dy = Math.pow(y_square_sum, 0.5) / ys.length + const display_box = document.getElementById("display_box"); + var rect = display_box.getBoundingClientRect(); + const xbar = document.getElementById("xbar"); const ybar = document.getElementById("ybar"); - xbar.x1.baseVal.value = x - dx; - xbar.x2.baseVal.value = x + dx; - xbar.y1.baseVal.value = y; - xbar.y2.baseVal.value = y; + xbar.x1.baseVal.value = x - dx + 5 / rect.width * 100; + xbar.x2.baseVal.value = x + dx + 5 / rect.width * 100; + xbar.y1.baseVal.value = y + 5 / rect.width * 100; + xbar.y2.baseVal.value = y + 5 / rect.width * 100; - ybar.x1.baseVal.value = x; - ybar.x2.baseVal.value = x; - ybar.y1.baseVal.value = y - dy; - ybar.y2.baseVal.value = y + dy; + ybar.x1.baseVal.value = x + 5 / rect.width * 100; + ybar.x2.baseVal.value = x + 5 / rect.width * 100; + ybar.y1.baseVal.value = y - dy + 5 / rect.width * 100; + ybar.y2.baseVal.value = y + dy + 5 / rect.width * 100; const meanpoint = document.getElementById("mean_point"); meanpoint.style.left = x + "%"; From 4572d14bb5512f2fe3991c25b2123fd80e6ab0ac Mon Sep 17 00:00:00 2001 From: Olivier Swaak Date: Sun, 14 Jul 2024 13:14:45 +0200 Subject: [PATCH 15/16] feat: slimmer errorbars https://github.com/NatuurkundePracticumAmsterdam/ecpc/issues/24#issuecomment-2227307379 --- docs/mvc.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/mvc.md b/docs/mvc.md index e010ebd..46dd5a7 100644 --- a/docs/mvc.md +++ b/docs/mvc.md @@ -118,8 +118,8 @@ Het oorspronkelijke script dat je gebruikte voor je meting is steeds leger gewor
- - + +
From a891a518a6f4351dee8e0b2d38c809fedf9411bb Mon Sep 17 00:00:00 2001 From: Olivier Swaak Date: Sun, 14 Jul 2024 13:22:36 +0200 Subject: [PATCH 16/16] style: added comments to js #24 --- docs/assets/uncertainty/uncertainty.js | 17 +++++++++++++---- 1 file changed, 13 insertions(+), 4 deletions(-) diff --git a/docs/assets/uncertainty/uncertainty.js b/docs/assets/uncertainty/uncertainty.js index fdc7a26..f3271fd 100644 --- a/docs/assets/uncertainty/uncertainty.js +++ b/docs/assets/uncertainty/uncertainty.js @@ -2,30 +2,36 @@ const xs = []; const ys = []; function addPoint(e) { + // get coordinates of mouseclick const click_box = document.getElementById("click_box"); var rect = click_box.getBoundingClientRect(); var x = (e.clientX - rect.left - 5) / rect.width * 100; var y = (e.clientY - rect.top - 5) / rect.width * 100; + // save coordinates xs.push(x); ys.push(y); - // console.log(x + ", " + y); - + // create new datapoint const datapoint = document.createElement("span"); datapoint.classList.add("datapoint"); + // add datapoint to div click_box.appendChild(datapoint); + // place datapoint at correct coordinates datapoint.style.left = x + "%"; datapoint.style.top = y + "%"; + // let datapoint be behind border to prevent clipping edge datapoint.style.zIndex = -1; + // update mean and errorbars view box updateCentre(); } function updateCentre() { + // create and append mean point to view box if it does not exist yet if (xs.length == 1) { const datapoint = document.createElement("span"); datapoint.classList.add("datapoint"); @@ -35,6 +41,7 @@ function updateCentre() { display_box.appendChild(datapoint); } + // calculate mean var x = 0; var y = 0; for (var i = 0; i < xs.length; i++) { @@ -42,6 +49,7 @@ function updateCentre() { y += ys[i]/ys.length; } + // calculate standard error var x_square_sum = 0; var y_square_sum = 0; @@ -53,9 +61,11 @@ function updateCentre() { var dx = Math.pow(x_square_sum, 0.5) / xs.length var dy = Math.pow(y_square_sum, 0.5) / ys.length + // get dimensions of view box const display_box = document.getElementById("display_box"); var rect = display_box.getBoundingClientRect(); + // set errorbars const xbar = document.getElementById("xbar"); const ybar = document.getElementById("ybar"); @@ -69,9 +79,8 @@ function updateCentre() { ybar.y1.baseVal.value = y - dy + 5 / rect.width * 100; ybar.y2.baseVal.value = y + dy + 5 / rect.width * 100; + // set mean point const meanpoint = document.getElementById("mean_point"); meanpoint.style.left = x + "%"; meanpoint.style.top = y + "%"; - - console.log(dx, dy); } \ No newline at end of file