From 1e1e184069157b2ca796d4e6dd6e806f5b484f28 Mon Sep 17 00:00:00 2001 From: Jeremy Grifski Date: Thu, 18 Apr 2019 13:54:47 -0400 Subject: [PATCH 1/4] Fixed text skewing issue --- midiviz/dashboard.html | 6 +++--- midiviz/js/Dashboard.js | 1 + midiviz/js/GraphViewPane.js | 2 +- midiviz/js/NotesFrequencyPane.js | 9 +++------ midiviz/js/NotesPlayedPane.js | 11 ++++------- midiviz/js/NotesVelocityPane.js | 8 ++++---- midiviz/js/Utils.js | 24 +++++++++++++++++++----- 7 files changed, 35 insertions(+), 26 deletions(-) diff --git a/midiviz/dashboard.html b/midiviz/dashboard.html index 806181d..97e7baf 100644 --- a/midiviz/dashboard.html +++ b/midiviz/dashboard.html @@ -21,15 +21,15 @@
Welcome to the MIDI Comparison Tool! To get started, add MIDI files using the pane on the left.
- +
- +
- +
diff --git a/midiviz/js/Dashboard.js b/midiviz/js/Dashboard.js index 3b090e5..948453d 100644 --- a/midiviz/js/Dashboard.js +++ b/midiviz/js/Dashboard.js @@ -22,6 +22,7 @@ class Dashboard { clearSvgs() { d3.selectAll("svg") + .html("") .selectAll("*") .remove(); } diff --git a/midiviz/js/GraphViewPane.js b/midiviz/js/GraphViewPane.js index ca86cd6..765fe90 100644 --- a/midiviz/js/GraphViewPane.js +++ b/midiviz/js/GraphViewPane.js @@ -34,12 +34,12 @@ class GraphViewPane { switchToPane(pane) { d3.selectAll(".graph-view-buttons span").classed("disabled-view-button", false); d3.selectAll(".graph-view-buttons span").classed("selected-view-button", false); + this.dashboard.clearSvgs(); if (pane == Views.ALL) { d3.select("#view-all").classed("selected-view-button", true); d3.selectAll(".graph-pane").classed("selected-view", false); d3.selectAll(".graph-pane").classed("graph-disabled", false); d3.selectAll(".graph-pane").classed("single-graph-activated", false); - this.dashboard.clearSvgs(); this.dashboard.panes.notesPlayed.graph(); this.dashboard.panes.notesFrequency.graph(); this.dashboard.panes.notesVelocity.graph(); diff --git a/midiviz/js/NotesFrequencyPane.js b/midiviz/js/NotesFrequencyPane.js index f907733..bdd36a6 100644 --- a/midiviz/js/NotesFrequencyPane.js +++ b/midiviz/js/NotesFrequencyPane.js @@ -9,12 +9,9 @@ class NotesFrequencyPane { graph() { var svg = d3.select("#note-frequency"); - var padding = 50; - var width; - var height; - [width, height] = getGraphDimensions("#note-frequency"); - - // TODO: Separate this padding into a map? top/bottom/left/right. It appears inconsistently centered now. + var width, height, padding; + [width, height, padding] = getPaneDimensions("#note-frequency"); + setGraphDimensions("#note-frequency", width, height); var keys = Object.keys(this.dashboard.midiFiles); var mapping = this.dashboard.mappings.frequency; diff --git a/midiviz/js/NotesPlayedPane.js b/midiviz/js/NotesPlayedPane.js index c97770c..ce7c1fb 100644 --- a/midiviz/js/NotesPlayedPane.js +++ b/midiviz/js/NotesPlayedPane.js @@ -14,13 +14,10 @@ class NotesPlayedPane { var keys = Object.keys(this.dashboard.midiFiles); - // TODO: Adjust width here based on parameters? (# of notes, length of song, screen size)? - // Adjust title formula accordingly. Currently at * 2 for both - var padding = 50; - var width; - var height; - [width, height] = getGraphDimensions("#notes-over-time"); - + var padding, width, height; + [width, height, padding] = getPaneDimensions("#notes-over-time"); + width *= 2; + setGraphDimensions("#notes-over-time", width, height, 2); let mapping = this.dashboard.mappings.notes; diff --git a/midiviz/js/NotesVelocityPane.js b/midiviz/js/NotesVelocityPane.js index aa80b37..f356366 100644 --- a/midiviz/js/NotesVelocityPane.js +++ b/midiviz/js/NotesVelocityPane.js @@ -10,10 +10,10 @@ class NotesVelocityPane { graph() { var svg = d3.select("#velocity-over-time"); - var padding = 50; - var width; - var height; - [width, height] = getGraphDimensions("#velocity-over-time"); + var padding, width, height; + [width, height, padding] = getPaneDimensions("#velocity-over-time"); + width *= 2; + setGraphDimensions("#velocity-over-time", width, height, 2); var keys = Object.keys(this.dashboard.midiFiles); var timestamps = this.dashboard.mappings.velocity; diff --git a/midiviz/js/Utils.js b/midiviz/js/Utils.js index 9e433e0..91f1313 100644 --- a/midiviz/js/Utils.js +++ b/midiviz/js/Utils.js @@ -98,10 +98,24 @@ function drawYAxis(svg, yScale, padding, height, label) { .text(label); } -function getGraphDimensions(graph) { +/** + * Grabs the dimensions of the SVG container + */ +function getPaneDimensions(graph) { var svg = d3.select(graph); - var viewBox = svg.attr("viewBox").split(" "); - var width = parseInt(viewBox[2], 10); - var height = parseInt(viewBox[3], 10); - return [width, height]; + var width = svg.node().parentNode.getBoundingClientRect().width; + var height = svg.node().parentNode.getBoundingClientRect().height; + return [width, height, 50]; +} + +/** + * Sets the dimensions of the SVG + */ +function setGraphDimensions(graph, width, height, scalingFactor = 1) { + var widthPercentage = 100 * scalingFactor; + var svg = d3.select(graph) + .attr("width", `${widthPercentage}%`) + .attr("height", "100%") + .attr("viewBox", `0 0 ${width} ${height}`) + .attr("preserveAspectRatio", "none"); } From 46b05804b85f17f24c8d8d6131154a37eaaa4f14 Mon Sep 17 00:00:00 2001 From: Jeremy Grifski Date: Thu, 18 Apr 2019 14:02:42 -0400 Subject: [PATCH 2/4] Stylized labels --- midiviz/dashboard.css | 4 ++++ midiviz/js/Utils.js | 10 ++++++---- 2 files changed, 10 insertions(+), 4 deletions(-) diff --git a/midiviz/dashboard.css b/midiviz/dashboard.css index af4d620..07df089 100644 --- a/midiviz/dashboard.css +++ b/midiviz/dashboard.css @@ -121,6 +121,10 @@ div.graph-disabled { padding: 2%; } +.axes-labels { + font: 20px sans-serif; +} + .welcome-message { align-self: center; justify-self: center; diff --git a/midiviz/js/Utils.js b/midiviz/js/Utils.js index 91f1313..94c4d20 100644 --- a/midiviz/js/Utils.js +++ b/midiviz/js/Utils.js @@ -37,6 +37,7 @@ function drawTitle(svg, width, height, padding, title) { .style("text-anchor", "middle") .style("font-size", "18px") .text(title) + .classed("axes-labels", true); } /** @@ -66,12 +67,12 @@ function drawXAxis(svg, xScale, padding, height, width, label, rotated=false) { .call(d3.axisBottom(xScale)) } - // Draw x-axis title svg.append("text") - .attr("transform", "translate(" + ((width / 2) - padding / 2) + " ," + (height - 10) + ")") + .attr("transform", "translate(" + ((width / 2) - padding / 2) + " ," + (height - 5) + ")") .style("text-anchor", "middle") - .text(label); + .text(label) + .classed("axes-labels", true); } /** @@ -95,7 +96,8 @@ function drawYAxis(svg, yScale, padding, height, label) { .attr("x", 0 - (height / 2)) .attr("dy", "1em") .style("text-anchor", "middle") - .text(label); + .text(label) + .classed("axes-labels", true); } /** From 2ed791d0723a956e801cca8637da72e742354f6a Mon Sep 17 00:00:00 2001 From: Jeremy Grifski Date: Thu, 18 Apr 2019 14:04:38 -0400 Subject: [PATCH 3/4] Adjusted column widths --- midiviz/dashboard.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/midiviz/dashboard.css b/midiviz/dashboard.css index 07df089..c3da3c0 100644 --- a/midiviz/dashboard.css +++ b/midiviz/dashboard.css @@ -6,7 +6,7 @@ body { .container { display: grid; grid-gap: 10px; - grid-template-columns: 9% 42% 42% auto; + grid-template-columns: 10% 42% 42% auto; grid-template-rows: 60% auto; width: 98%; height: 98%; From 056f2f0e9b4c8d7d80da2edc37912b63754c1546 Mon Sep 17 00:00:00 2001 From: Jeremy Grifski Date: Thu, 18 Apr 2019 14:07:07 -0400 Subject: [PATCH 4/4] Changed release link --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index e8a4286..dce2e26 100644 --- a/README.md +++ b/README.md @@ -18,7 +18,7 @@ JuxtaMIDI -- a tool to compare and contrast MIDI recordings. - Final Report - [PDF][6] - [Source Code][16] - + ## Sample MIDI Files - [Mario Theme][18] @@ -55,4 +55,4 @@ JuxtaMIDI -- a tool to compare and contrast MIDI recordings. [19]: data/Mario-Few.mid [20]: data/Mario-Shift.mid [21]: #sample-midi-files -[22]: https://github.com/jrg94/JuxtaMIDI/releases/tag/v1.3.0 +[22]: https://github.com/jrg94/JuxtaMIDI/releases/tag/v1.3.1