From f439c0e83a5f6f9ede5b79972e253401da99a48a Mon Sep 17 00:00:00 2001 From: Anthony Truskinger Date: Wed, 25 Feb 2015 17:34:40 +1000 Subject: [PATCH] Initial work making tiles clickable for demo --- .../eventDistribution/_eventDistribution.scss | 100 +++++++++++++++--- .../distributionVisualisation.js | 36 +++++-- .../distributionVisualisation.tpl.html | 7 +- .../eventDistributionController.js | 4 + src/app/visualize/visualize.js | 14 ++- 5 files changed, 130 insertions(+), 31 deletions(-) diff --git a/src/app/d3Bindings/eventDistribution/_eventDistribution.scss b/src/app/d3Bindings/eventDistribution/_eventDistribution.scss index 9dd582a4..5ae87e78 100644 --- a/src/app/d3Bindings/eventDistribution/_eventDistribution.scss +++ b/src/app/d3Bindings/eventDistribution/_eventDistribution.scss @@ -1,4 +1,44 @@ -$mini-backgrounds: darksalmon darkolivegreen slategray #8f7f6f #7a6f8f #8f6f8f; +//http://paletton.com/#uid=72S0B0kmqrpsOf3p4mljsvMfRHr +$color-primary-0: #32A746; /* Main Primary color */ +$color-primary-1: #095C18; +$color-primary-2: #1D8830; +$color-primary-3: #4CC261; +$color-primary-4: #6EDA81; + +$color-secondary-1-0: #2F6A8B; /* Main Secondary color (1) */ +$color-secondary-1-1: #0B354C; +$color-secondary-1-2: #1D5471; +$color-secondary-1-3: #4480A1; +$color-secondary-1-4: #69A6C6; + +$color-secondary-2-0: #DA9541; /* Main Secondary color (2) */ +$color-secondary-2-1: #78470C; +$color-secondary-2-2: #B27227; +$color-secondary-2-3: #FDB763; +$color-secondary-2-4: #FFC581; + +$color-complement-0: #DA4D41; /* Main Complement color */ +$color-complement-1: #78140C; +$color-complement-2: #B23127; +$color-complement-3: #FD6F63; +$color-complement-4: #FF8A81; + +$mini-backgrounds: ( + $color-primary-0 $color-secondary-1-0 $color-secondary-2-0 $color-complement-0 + $color-primary-1 $color-secondary-1-1 $color-secondary-2-1 $color-complement-1 + $color-primary-2 $color-secondary-1-2 $color-secondary-2-2 $color-complement-2 + $color-primary-3 $color-secondary-1-3 $color-secondary-2-3 $color-complement-3 + $color-primary-4 $color-secondary-1-4 $color-secondary-2-4 $color-complement-4 +); + +//$mini-backgrounds: darksalmon darkolivegreen slategray #8f7f6f #7a6f8f #8f6f8f; + +$visualize-no-data-color: #DDD; +$tile-border-color: #777; +$tile-background-color: #e5ffd8; +$generating-tile-color: $text-color; +$legend-size: 2em; + event-distribution-overview, event-distribution-detail { @@ -75,30 +115,33 @@ event-distribution-visualisation { .imageTrack { .tiles { - background-color: paleturquoise; + background-color: $visualize-no-data-color; position: relative; height: 256px; .tile { width: 60px; - border: grey solid 1px; - border-left: deeppink solid 1px; - border-right: blue solid 1px; - background-color: rgba(255, 0, 0, 0.2); + border: $tile-border-color solid 1px; + //border-left: deeppink solid 1px; + //border-right: blue solid 1px; + background-color: $tile-background-color; height: 256px; - display: inline-block; + display: flex; + align-items: center; + justify-content: center; + position: absolute; + text-align: center; + + cursor: pointer; & div { font-size: 8pt; - color: white; - height: 60px; - width: 256px; - @include vendor-prefix(transform, rotate(-90deg)); - @include vendor-prefix(transform-origin, right center 0); - top: -31px; - right: 30px; - position: absolute; + color: $generating-tile-color; + font-weight: bold; + padding: 0 1px; + width: 100%; + flex: none; } } } @@ -112,4 +155,31 @@ event-distribution-visualisation { } } + dl { + + dt { + width: $legend-size; + height: $legend-size; + display: inline-block; + vertical-align: middle; + + border: $tile-border-color solid 1px; + } + + dd { + display: inline; + margin-right: 1em; + vertical-align: middle; + + } + + .missing { + background-color: $visualize-no-data-color; + } + + .generating { + background-color: $tile-background-color; + } + } + } diff --git a/src/app/d3Bindings/eventDistribution/distributionVisualisation.js b/src/app/d3Bindings/eventDistribution/distributionVisualisation.js index 701561df..ad7a6348 100644 --- a/src/app/d3Bindings/eventDistribution/distributionVisualisation.js +++ b/src/app/d3Bindings/eventDistribution/distributionVisualisation.js @@ -46,6 +46,7 @@ angular that.spectrogramWindowSize = 512; that.visibleDuration = oneDay; that.middle = null; + that.category = null; that.updateData = updateData; that.updateMiddle = updateMiddle; @@ -132,10 +133,10 @@ angular function generateTiles() { if (that.items && that.items.length > 0) { // need to generate a series of tiles that can show the data in that.items - that.items.forEach(function(current) { + that.items.forEach(function (current) { // warning: to future self: this is creating cyclic references // as each tile keeps a reference to current - current.tiles = splitIntoTiles(current); + current.tiles = splitIntoTiles(current); }); } } @@ -173,16 +174,23 @@ angular top: 0, left: left, width: tileSizePixels + "px", - + "z-index": function (d) { + return d.source.recordedDate.getDay(); + } }; function getOffset(d) { - return d.offset.toISOString(); + return d.offset.toLocaleDateString() + "
" + d.offset.toLocaleTimeString(); } function getTileImage(d, i) { - var hourOfDay = d.offset.getHours(); - return "url(assets/temp/tiles/tile_" + hourOfDay + ".png)"; + var url = dataFunctions.getTileUrl(d.offset, that.category, tileSizeSeconds, tileSizePixels, d, i); + + if (url) { + return "url(" + url + ")"; + } + + return ""; } // update old tiles @@ -201,8 +209,22 @@ angular .style(style) .style("background-image", getTileImage) .classed("tile", true) + .on("click", function (datum) { + // HACK: temporary behaviour for demo + // construct url + var ar = datum.source, + id = ar.id, + startOffset = (datum.offset - ar.recordedDate) / 1000, + endOffset = startOffset + 30.0; + + var url = "/listen/" + id + "?start=" + startOffset + "&end=" + endOffset; + + console.warn("navigating to ", url); + + window.location = url; + }) .append("div") - .text(getOffset); + .html(getOffset); // remove old tiles tileElements.exit().remove(); diff --git a/src/app/d3Bindings/eventDistribution/distributionVisualisation.tpl.html b/src/app/d3Bindings/eventDistribution/distributionVisualisation.tpl.html index 1ce2a5b3..f318d560 100644 --- a/src/app/d3Bindings/eventDistribution/distributionVisualisation.tpl.html +++ b/src/app/d3Bindings/eventDistribution/distributionVisualisation.tpl.html @@ -12,7 +12,12 @@ - +
+
 
+
= no audio data
+
 
+
= visualisation generating
+

 

 

 

diff --git a/src/app/d3Bindings/eventDistribution/eventDistributionController.js b/src/app/d3Bindings/eventDistribution/eventDistributionController.js index 98fbbc1f..6f226736 100644 --- a/src/app/d3Bindings/eventDistribution/eventDistributionController.js +++ b/src/app/d3Bindings/eventDistribution/eventDistributionController.js @@ -26,6 +26,10 @@ angular }, getText: function (d) { return d.text; + }, + getTileUrl: function(date, category, tileSizeSeconds, tileSizePixels, datum, index) { + var hourOfDay = date.getHours(); + return "/tile_" + hourOfDay + ".png" } }; diff --git a/src/app/visualize/visualize.js b/src/app/visualize/visualize.js index a06830b3..3da69643 100644 --- a/src/app/visualize/visualize.js +++ b/src/app/visualize/visualize.js @@ -46,14 +46,6 @@ angular ); } - /* - $http.get("assets/temp/dummyData.json").then(function (response) { - $scope.recordingData = response.data; - }, function () { - console.error("loading dummy data failed", arguments); - }); - */ - // options that bind the generic event distribution // controls to our particular data structures $scope.distributionOptions = { @@ -87,6 +79,12 @@ angular }, getText: function (d) { return d.id; + }, + getTileUrl: function(date, category, tileSizeSeconds, tileSizePixels, datum, index) { + //var hourOfDay = date.getHours(); + + // do not attempt to load dll's for demo + return; } } };