Skip to content

Commit

Permalink
Completed zooming tiles addressing
Browse files Browse the repository at this point in the history 
URL generation for all tiles at all resolutions completed.
All URLs use the new API endpoints.

Also moved text meta data on tiles to DOM attributes (left for debugging pusposes)

Added a diffing tool to Karma's unit test reporter. Makes it easier to debug unit tests.
  • Loading branch information
@atruskie
atruskie committed Nov 20, 2015
1 parent bc25fc2 commit d3400f5
Show file tree
Hide file tree
Showing 7 changed files with 230 additions and 182 deletions.
6 changes: 4 additions & 2 deletions buildConfig/karma-unit.tpl.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,8 @@ module.exports = function (config) {
require("../node_modules/karma-chrome-launcher"),
"karma-phantomjs-launcher",
/*require('../node_modules/karma-phantomjs-launcher'),*/
"karma-sourcemap-loader"
"karma-sourcemap-loader",
require("../node_modules/karma-jasmine-diff-reporter")
];

configObject.preprocessors = {
Expand All @@ -54,7 +55,7 @@ module.exports = function (config) {
/**
* How to report, by default. 'dots', 'progress'
*/
configObject.reporters = ["dots"];
configObject.reporters = ["jasmine-diff", "dots"];

/**
* Set up the coverage reporter
Expand Down Expand Up @@ -98,6 +99,7 @@ module.exports = function (config) {
*/
configObject.browsers = [ browserToUse ];

config.colors = true;

config.set(configObject);
};
1 change: 1 addition & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,7 @@
"karma-coverage": "^0.4",
"karma-firefox-launcher": "~0.1.3",
"karma-jasmine": "^0.3.x",
"karma-jasmine-diff-reporter": "^0.3.1",
"karma-phantomjs-launcher": "~0.2",
"karma-sourcemap-loader": "^0.3.5",
"lodash": "^3.7",
Expand Down
127 changes: 59 additions & 68 deletions src/app/d3Bindings/eventDistribution/distributionVisualisationMultiScale.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -79,7 +79,8 @@ angular
*/
tileCache = new WeakMap();

const timeFormatter = d3.time.format("%H:%M:%S");
const timeFormatter = d3.time.format("%H:%M:%S"),
msInS = 1e3;

// exports
self.items = [];
Expand Down Expand Up @@ -152,7 +153,7 @@ angular
self.middle = null;
self.currentZoomValue = 1;
self.availableResolutions = data.availableResolutions || [];
self.availableResolutions.sort((a,b) => a - b);
self.availableResolutions.sort((a, b) => a - b);
}

function setDimensions() {
Expand Down Expand Up @@ -190,7 +191,7 @@ angular
delta = max - min,
visibleFraction = delta / self.currentZoomValue;
// finally, convert to seconds
self.visibleDuration = visibleFraction / 1000;
self.visibleDuration = visibleFraction / msInS;
// TODO: snap tile domain to zoom levels that are available
self.tileSizeSeconds = self.visibleDuration / tileCount;
self.resolution = self.tileSizeSeconds / tileWidthPixels;
Expand Down Expand Up @@ -221,11 +222,11 @@ angular
//self.availableResolutions[0] || 0,
...self.availableResolutions
//(self.availableResolutions.slice(-1) || [1])[0]
]);
]);
}

function filterTiles(visibleExtent, category) {
var filterPaddingMs = self.tileSizeSeconds * 1000;
var filterPaddingMs = self.tileSizeSeconds * msInS;
// item filter
// pad the filtering extent with tileSize so that recordings that have
// duration < tileSize aren't filtered out prematurely
Expand Down Expand Up @@ -371,22 +372,39 @@ angular
//</editor-fold>

function updateElements() {
var imageAttrs = {
height: tilesHeightPixels,
/**
* Disable automatic aspect ratio setting
*/
preserveAspectRatio: "none",
/**
* The relative width of the image is a function of the
* the zoom panel's current scale vs the ideal scale of the tile.
*/
width (d) {
var imageScale = d.resolution / self.resolution;
console.debug("DistributionVisualisation:updateElements:width: current image ratio:", imageScale, d.resolution, self.resolution);
return tileWidthPixels * (imageScale);
}
};
var rectAttrs = {
height: tilesHeightPixels,

/**
* The relative width of the image is a function of the
* the zoom panel's current scale vs the ideal scale of the tile.
*/
width: d => {
var imageScale = d.resolution / self.resolution;
//console.debug("DistributionVisualisation:updateElements:width: current image ratio:", imageScale, d.resolution, self.resolution);
return tileWidthPixels * (imageScale);
}
},
imageAttrs = {
height: rectAttrs.height,
/**
* Disable automatic aspect ratio setting
*/
preserveAspectRatio: "none",
width: rectAttrs.width
};


const debugAttrs = {
date: getOffsetDate,
time: getOffsetTime,
tileResolution: d => d.resolution,
tileResolutionRatio: d => (d.resolution / self.resolution).toFixed(4)
},
debugGroupAttrs = {
actualResolution: self.resolution.toFixed(4),
tileSize: self.tileSizeSeconds.toLocaleString()
};

// reposition
focusGroup.translate(() => [xScale(self.middle), 0]);
Expand All @@ -400,31 +418,34 @@ angular
});
focusAnchor.attr("xlink:href", url);
focusAnchor.classed("disabled", !url);
// this IS MEGA bad for performance- forcing a layout
// this IS MEGA bad for performance - forcing a layout
//focusStem.attr("d", getFocusStemPath(focusText.node().getComputedTextLength()));
focusStem.attr("d", getFocusStemPath());

// debug only
tilesGroup.attr(debugGroupAttrs);

// create data join
var tileElements = tilesGroup.selectAll(".tile")
.data(visibleTiles, tileKey);

// update old tiles
tileElements.translate(tileGTranslation)
.attr(debugAttrs)
.select("image")
.attr({
"xlink:href": checkImage,
width: imageAttrs.width
});

tileElements
.select("text.resolution")
.html(d => `<tspan dx="0" dy="20">${ self.tileSizeSeconds.toLocaleString() }</tspan>
<tspan dx="-80" dy="10">${self.resolution.toFixed(4)} / ${d.resolution}</tspan>`);
// update dimensions for tile rects
tileElements.select("rect")
.attr({width: rectAttrs.width});

// add new tiles
var newTileElements = tileElements.enter()
.append("g")
.attr(debugAttrs)
.translate(tileGTranslation)
.classed("tile", true);

Expand All @@ -435,36 +456,7 @@ angular
//.data(visibleTiles, tileKey)
//.enter();
failedOrUnknownTileElements.append("rect")
.attr(imageAttrs);

failedOrUnknownTileElements.append("text")
.text(getOffsetDate)
.attr({
y: tilesHeightPixels / 2.0,
x: tileWidthPixels / 2.0,
width: tilesTotalWidthPixels,
"text-anchor": "middle",
dy: "0em"
});
failedOrUnknownTileElements.append("text")
.text(getOffsetTime)
.attr({
y: tilesHeightPixels / 2.0,
x: tileWidthPixels / 2.0,
width: tileWidthPixels,
"text-anchor": "middle",
dy: "1em"
});
failedOrUnknownTileElements.append("text")
.text(d => `${ self.tileSizeSeconds.toLocaleString() }`)
.attr({
y: tilesHeightPixels / 2.0,
x: tileWidthPixels / 2.0,
width: tileWidthPixels,
"text-anchor": "middle",
"class": "resolution",
dy: "2em"
});
.attr(rectAttrs);

// but always add the image element
newTileElements.append("image")
Expand Down Expand Up @@ -563,7 +555,9 @@ angular
// use d3's in built range functionality to generate steps
var tiles = [];
while (offset < niceHigh) {
var nextOffset = d3.time.second.offset(offset, idealTileSizeSeconds);
// d3's offset floor's the input! FFS!
//var nextOffset = d3.time.second.offset(offset, idealTileSizeSeconds);
var nextOffset = new Date(+offset + (idealTileSizeSeconds * msInS));
var item = {
audioNavigationUrl: getNavigateUrl(source, offset),
key: offset.toISOString() + dataFunctions.getId(source),
Expand All @@ -572,7 +566,7 @@ angular
resolution,
source,
tileImageUrl: "",

zoomStyleImage: true
};
item.tileImageUrl = getTileImage(item);
tiles.push(item);
Expand Down Expand Up @@ -608,6 +602,12 @@ angular
return xScale(d.offset);
}

//function getComment() {
// return
//
// //return `Data:: Date: ${ getOffsetDate(d) }, Time: ${ getOffsetTime(d) }, TileSize: ${ self.tileSizeSeconds.toLocaleString() }, Actual Resolution: ${ self.resolution.toFixed(4) }, Tile Resolution: ${ d.resolution }`;
//}

function getOffsetDate(d) {
return d.offset.toLocaleDateString();
}
Expand All @@ -634,22 +634,13 @@ angular


function getTileImage(d) {
//if (Math.floor(d.offset / 3600000) % 2 === 1) {
return "/assets/temp/test_tile_180px.png";
//}
/*
var url = dataFunctions.getTileUrl(d.offset,
self.category,
self.tileSizeSeconds,
tileWidthPixels,
d);

if (url) {
return url;
}
return "";
*/
return url || "";
}

function getFocusStemPath(width) {
Expand Down
15 changes: 8 additions & 7 deletions src/app/visualize/visualize.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -100,16 +100,17 @@ angular
return d.id;
},
getTileUrl: function(date, category, tileSizeSeconds, tileSizePixels, tileDatum) {
var url = AnalysisResultFile.getLongDurationImageTile(
tileDatum.source,
date,
tileDatum.resolution,
null,
tileDatum.zoomStyleImage === true
);

// temporarily disable images for debugging
return;
/*
var url = AnalysisResultFile.getLongDurationImageTile(tileDatum.source, date, 60);
return url;*/
return url;
},
getNavigateUrl: function(date, category, tileSizeSeconds, tileSizePixels, itemDatum) {

var ar = itemDatum,
id = ar.id,
startOffset = (date - ar.recordedDate) / 1000;
Expand Down
5 changes: 3 additions & 2 deletions src/baw.paths.nobuild.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,8 @@ module.exports = function (environment) {
"show": "/bookmarks/{bookmarkId}"
},
"analysisResults": {
"system": "/audio_recordings/{recordingId}/analysis.{format}"
"system": "/analysis_jobs/system/audio_recordings/{recordingId}",
"job": "/analysis_jobs/{analysisJobId}/audio_recordings/{recordingId}",
}
},
"links": {
Expand Down Expand Up @@ -209,4 +210,4 @@ module.exports = function (environment) {
recursivePath(paths.site.ngRoutes, paths.api.root);

return paths;
};
};
Loading

0 comments on commit d3400f5

Please sign in to comment.