diff --git a/ui/data.js b/ui/data.js
index f3c7913d..573ee381 100755
--- a/ui/data.js
+++ b/ui/data.js
@@ -1350,9 +1350,30 @@ function getGIDsAfter(count, gid, ribbon, inclusive, data){
// If gid does not exist in the requested ribbon then getGIDBefore() is
// used to get an appropriate alternative gid.
//
+// If gid is less than count/2 to ribbon head/tail, then less than count
+// gids will be returned
+//
+// count
+// |<------>|
+// oXoooooooooooooooo -> ___oXoooo
+// ^
+// gid
+//
+//
+// Setting force_count will make this always return count images, even
+// at the start and end of the ribbon.
+//
+// count
+// |<------>|
+// oXoooooooooooooooo -> oXooooooo
+// ^
+// gid
+//
+// Otherwise this will return less.
+//
// NOTE: skipping gid and ribbon while passing data may not work correctly...
// NOTE: count represents section diameter...
-function getGIDsAround(count, gid, ribbon, data){
+function getGIDsAround(count, gid, ribbon, data, force_count){
if(count == 0){
return []
}
@@ -1360,6 +1381,7 @@ function getGIDsAround(count, gid, ribbon, data){
data = data == null ? DATA : data
gid = gid == null ? getImageGID() : gid
ribbon = ribbon == null ? getRibbonIndex() : ribbon
+ // XXX is this out of context here???
count = count == null ? Math.round(LOAD_SCREENS * getScreenWidthInImages()) : count
var ribbon_data = data.ribbons[ribbon]
@@ -1375,6 +1397,17 @@ function getGIDsAround(count, gid, ribbon, data){
var end = i + Math.ceil(count/2)
end = end > ribbon_data.length ? ribbon_data.length : end
+ // force count by extending the ribbon at the opposite end...
+ if(force_count && ribbon_data.length > count){
+ var d = count - (end - start)
+
+ start = end >= ribbon_data.length ? start - d : start
+ start = start < 0 ? 0 : start
+
+ end = start <= 0 ? end + d : end
+ end = end > ribbon_data.length ? ribbon_data.length : end
+ }
+
// get the actual data...
return ribbon_data.slice(start, end)
}
@@ -1436,7 +1469,7 @@ function getCommonSubArray(L1, L2){
// Load count images around a given image/gid into the given ribbon.
//
-function loadImagesAround(count, gid, ribbon, data){
+function loadImagesAround(count, gid, ribbon, data, force_count){
// default values...
data = data == null ? DATA : data
ribbon = ribbon == null ? getRibbonIndex() : ribbon
@@ -1451,7 +1484,7 @@ function loadImagesAround(count, gid, ribbon, data){
.find('.image')
.map(function(_, e){ return getImageGID(e) })
.toArray()
- var new_ribbon = getGIDsAround(count, gid, ribbon, data)
+ var new_ribbon = getGIDsAround(count, gid, ribbon, data, force_count)
// get the common sub-ribbon...
// NOTE: we are only interested in continuous sub-ribbons...
@@ -1622,27 +1655,34 @@ function loadSettings(){
// NOTE: it appears that sorting images by priority before loading them
// to cache has little or no effect on the order they are
// loaded/rendered...
+// NOTE: this is not meant to be a real cache, rather a que for the OS and
+// backend/webkit on what's next...
function preCacheRibbonImages(ribbon){
- var i = getRibbonIndex(ribbon)
- var size = getVisibleImageSize('max')
- var screen_size = getScreenWidthInImages(getVisibleImageSize())
- var cache_frame_size = (screen_size * LOAD_SCREENS) / 2
- var images = ribbon.find('.image')
- var first = getImageGID(images.first())
- var last = getImageGID(images.last())
+ var deferred = $.Deferred()
+ setTimeout(function(){
+ var i = getRibbonIndex(ribbon)
+ var size = getVisibleImageSize('max')
+ var screen_size = getScreenWidthInImages(getVisibleImageSize())
+ // XXX
+ var cache_frame_size = (screen_size * LOAD_SCREENS) / 2
+ var images = ribbon.find('.image')
+ var first = getImageGID(images.first())
+ var last = getImageGID(images.last())
- var gids = getGIDsAfter(-cache_frame_size, first)
- .concat(getGIDsAfter(cache_frame_size, last))
+ var gids = getGIDsAfter(-cache_frame_size, first)
+ .concat(getGIDsAfter(cache_frame_size, last))
- var cache = []
- IMAGE_CACHE[i] = cache
- $.each(gids, function(i, e){
- var img = new Image()
- img.src = getBestPreview(e, size).url
- cache.push(img)
- })
+ var cache = []
+ IMAGE_CACHE[i] = cache
+ $.each(gids, function(i, e){
+ var img = new Image()
+ img.src = getBestPreview(e, size).url
+ cache.push(img)
+ })
- return cache
+ deferred.resolve(cache)
+ }, 0)
+ return deferred
}
diff --git a/ui/index.html b/ui/index.html
index cdb9caac..261fa95c 100755
--- a/ui/index.html
+++ b/ui/index.html
@@ -221,13 +221,17 @@ Populated
+ ...
-->
diff --git a/ui/setup.js b/ui/setup.js
index 1ab4490d..a275de89 100755
--- a/ui/setup.js
+++ b/ui/setup.js
@@ -85,9 +85,6 @@ function setupDataBindings(viewer){
// NOTE: we do not need to worry about explicit centering the ribbon
// here, just ball-park-load the correct batch...
- // XXX need to maintain the correct number of images per ribbon
- // per zoom setting -- things get really odd when a ribbon
- // is smaller than it should be...
// XXX this does not get called on marking...
.on('preCenteringRibbon', function(evt, ribbon, image){
var r = getRibbonIndex(ribbon)
@@ -97,14 +94,6 @@ function setupDataBindings(viewer){
return
}
- var gid = getImageGID(image)
- var gr = DATA.ribbons[r]
- var img_before = getImageBefore(image, ribbon)
- var gid_before = getGIDBefore(gid, r)
- var screen_size = getScreenWidthInImages()
- screen_size = screen_size < 1 ? 1 : screen_size
- var l = ribbon.find('.image').length
-
// skip the whole thing if the ribbon is not visible -- outside
// of viewer are...
var viewer = $('.viewer')
@@ -116,38 +105,45 @@ function setupDataBindings(viewer){
return
}
- // load images if we do a long jump -- start, end or some mark
- // outside of currently loaded section...
- if(gid_before == null
- || gid_before != getImageGID(img_before)
- // also load if we run out of images in the current ribbon,
- // likely due to shifting...
- || ( gr.length > l
- && l < Math.round(screen_size * LOAD_SCREENS))){
- loadImagesAround(Math.round(screen_size * LOAD_SCREENS), gid, ribbon)
+ // prepare for loading...
+ var gid = getImageGID(image)
+ var gr = DATA.ribbons[r]
+ var img_before = getImageBefore(image, ribbon)
+ var gid_before = getGIDBefore(gid, r)
+ var screen_size = getScreenWidthInImages()
+ screen_size = screen_size < 1 ? 1 : screen_size
+ var load_frame_size = Math.round(screen_size * LOAD_SCREENS)
+ var roll_frame_size = Math.ceil(load_frame_size / 3)
+ var threshold = Math.floor(load_frame_size / 4)
+ threshold = threshold < 1 ? 1 : threshold
+ var index = gr.indexOf(gid)
+ var at_start = index < threshold
+ var at_end = (gr.length-1 - index) < threshold
- // roll the ribbon while we are advancing...
- } else {
- var head = img_before.prevAll('.image')
- var tail = img_before.nextAll('.image')
+ // current image is loaded...
+ if(gid_before == getImageGID(img_before)){
+ var head = img_before.prevAll('.image').length
+ var tail = img_before.nextAll('.image').length
+ var l = ribbon.find('.image').length
- // NOTE: if this is greater than the number of images currently
- // loaded, it might lead to odd effects...
- var frame_size = Math.ceil((screen_size * LOAD_SCREENS) / 2)
- var threshold = Math.floor(frame_size / 2)
- threshold = threshold < 1 ? 1 : threshold
+ // less images than expected - extend ribbon...
+ if(l < load_frame_size){
+ // NOTE: we are forcing the count of images...
+ loadImagesAround(load_frame_size, gid, ribbon, null, true)
- // do the loading...
- // XXX need to expand/contract the ribbon depending on speed...
- // ...might also be a good idea to load smaller images
- // while scrolling really fast...
- // XXX use extendRibbon, to both roll and expand/contract...
- if(tail.length < threshold){
- var rolled = rollImages(frame_size, ribbon)
- }
- if(head.length < threshold){
- var rolled = rollImages(-frame_size, ribbon)
+ // tail at threshold - roll ->
+ } else if(!at_end && tail < threshold){
+ var rolled = rollImages(roll_frame_size, ribbon)
+
+ // head at threshold - roll <-
+ } else if(!at_start && head < threshold){
+ var rolled = rollImages(-roll_frame_size, ribbon)
}
+
+ // we jumped, load new set...
+ } else {
+ // NOTE: we are forcing the count of images...
+ loadImagesAround(load_frame_size, gid, ribbon, null, true)
}
})
@@ -194,6 +190,7 @@ function setupDataBindings(viewer){
})
.on('fittingImages', function(evt, n){
+ console.log('!!!! fittingImages')
// load correct amount of images in each ribbon!!!
var screen_size = getScreenWidthInImages()
var gid = getImageGID()
@@ -217,7 +214,7 @@ function setupDataBindings(viewer){
return
}
*/
- loadImagesAround(Math.round(screen_size * LOAD_SCREENS), gid, r)
+ loadImagesAround(Math.round(screen_size * LOAD_SCREENS), gid, r, null, true)
})
centerView(null, 'css')