Skip to content

Commit

Permalink
Initial work making tiles clickable for demo
Browse files Browse the repository at this point in the history
  • Loading branch information
@atruskie
atruskie committed Feb 25, 2015
1 parent 499b59a commit f439c0e
Show file tree
Hide file tree
Showing 5 changed files with 130 additions and 31 deletions.
100 changes: 85 additions & 15 deletions src/app/d3Bindings/eventDistribution/_eventDistribution.scss
View file
Original file line number Diff line number Diff line change
@@ -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 {

Expand Down Expand Up @@ -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;
}
}
}
Expand All @@ -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;
}
}

}
36 changes: 29 additions & 7 deletions src/app/d3Bindings/eventDistribution/distributionVisualisation.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,7 @@ angular
that.spectrogramWindowSize = 512;
that.visibleDuration = oneDay;
that.middle = null;
that.category = null;
that.updateData = updateData;
that.updateMiddle = updateMiddle;

Expand Down Expand Up @@ -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);
});
}
}
Expand Down Expand Up @@ -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() + "<br/>" + 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
Expand All @@ -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();
Expand Down
7 changes: 6 additions & 1 deletion src/app/d3Bindings/eventDistribution/distributionVisualisation.tpl.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,12 @@
<!--<img ng-src="assets/temp/eabad986-56d9-47b5-bec6-47458ffd3eae_101023-0000.ACI-ENT-EVN-trimmed-PLACEHOLDER.png"-->
<!--src=""/>-->
<!--</div>-->

<dl>
<dt class="missing">&nbsp;</dt>
<dd>= no audio data</dd>
<dt class="generating">&nbsp;</dt>
<dd>= visualisation generating</dd>
</dl>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
Expand Down
4 changes: 4 additions & 0 deletions src/app/d3Bindings/eventDistribution/eventDistributionController.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"
}
};

Expand Down
14 changes: 6 additions & 8 deletions src/app/visualize/visualize.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 = {
Expand Down Expand Up @@ -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;
}
}
};
Expand Down

0 comments on commit f439c0e

Please sign in to comment.