got zoom surface working

QutEcoacoustics · Feb 10, 2015 · 01ae44d · 01ae44d
1 parent 3504cda
commit 01ae44d
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 3 deletions.
diff --git a/src/app/d3Bindings/eventDistribution/_eventDistribution.scss b/src/app/d3Bindings/eventDistribution/_eventDistribution.scss
@@ -91,6 +91,7 @@ event-distribution-visualisation {
 
           & div {
             font-size: 8pt;
+            color: white;
             height: 60px;
             width: 256px;
             @include vendor-prefix(transform, rotate(-90deg));

diff --git a/src/app/d3Bindings/eventDistribution/distributionDetail.js b/src/app/d3Bindings/eventDistribution/distributionDetail.js
@@ -164,7 +164,7 @@ angular
                             fill: "white",
                             opacity: 1.0
                         })
-                        .classed("zoomSurface");
+                        .classed("zoomSurface", true);
 
                     // group for separator lines between lanes/categories
                     laneLinesGroup = main.append("g").classed("laneLinesGroup", true);

diff --git a/src/app/d3Bindings/eventDistribution/distributionVisualisation.js b/src/app/d3Bindings/eventDistribution/distributionVisualisation.js
@@ -172,26 +172,34 @@ angular
                     var style = {
                         top: 0,
                         left: left,
-                        width: tileSizePixels + "px"
+                        width: tileSizePixels + "px",
+
                     };
 
                     function getOffset(d) {
                         return d.offset.toISOString();
                     }
 
+                    function getTileImage(d, i) {
+                        var hourOfDay = d.offset.getHours();
+                        return "url(assets/temp/tiles/tile_" + hourOfDay + ".png)";
+                    }
+
                     // update old tiles
                     var tileElements = tiles.selectAll(".tile")
                         .data(visibleTiles, function (d) {
                             return d.key;
                         });
 
                     // update old tiles
-                    tileElements.style("left", left);
+                    tileElements.style("left", left)
+                        .style("background-image", getTileImage);
 
                     // add new tiles
                     tileElements.enter()
                         .append("div")
                         .style(style)
+                        .style("background-image", getTileImage)
                         .classed("tile", true)
                         .append("div")
                         .text(getOffset);