From 0ff8bb0636030dc7de7b9e738194b90a6cb9b2a4 Mon Sep 17 00:00:00 2001 From: "Alex A. Naanou" Date: Sat, 1 Jun 2013 18:21:48 +0400 Subject: [PATCH] added loading animations (disabled), cursor now auto-hides... Signed-off-by: Alex A. Naanou --- ui/TODO.otl | 12 ++++++++ ui/data.js | 58 ++++++++++++++++++----------------- ui/images/loading-180deg.gif | Bin 0 -> 522 bytes ui/images/loading-270deg.gif | Bin 0 -> 497 bytes ui/images/loading-90deg.gif | Bin 0 -> 496 bytes ui/images/loading.gif | Bin 0 -> 521 bytes ui/index.html | 28 +++++++++++++++++ ui/layout.css | 18 +++++++++++ 8 files changed, 88 insertions(+), 28 deletions(-) create mode 100755 ui/images/loading-180deg.gif create mode 100755 ui/images/loading-270deg.gif create mode 100755 ui/images/loading-90deg.gif create mode 100755 ui/images/loading.gif diff --git a/ui/TODO.otl b/ui/TODO.otl index f872c402..3437c7ef 100755 --- a/ui/TODO.otl +++ b/ui/TODO.otl @@ -109,6 +109,18 @@ Roadmap [_] BUG: jumping screen images does not load the adjacent ribbons... | positioning is OK but ribbons are not fully visible... [_] ASAP: test on Android... + [_] empty view (no data) usable... + [_] propper system init (start w.o. any data) + [_] default STUB image... + | or a loading animation.. + | + | ...would be good to make something pixilated so as to look nise + | on various magnifications. + | + | keep always cached. + [_] tweak image pre-caching size -- keep as many images cached as possible. + | might be good to always cache the smaller previews so as to make things + | look faster... [_] slideshow mode... [_] single ribbon mode | should this have up/down navigation? diff --git a/ui/data.js b/ui/data.js index 8c0154d8..c37850b6 100755 --- a/ui/data.js +++ b/ui/data.js @@ -71,6 +71,20 @@ var BASE_URL = '.' var IMAGE_CACHE = [] +/* +var UI_IMAGE_CACHE = [] +$.each([ + 'images/loding.gif', + 'images/loding-90deg.gif', + 'images/loding-180deg.gif', + 'images/loding-270deg.gif' +], function(i, e){ + var img = new Image() + img.src = e + UI_IMAGE_CACHE.push(img) +}) +*/ + /********************************************************************** @@ -92,16 +106,6 @@ function makeDistanceCmp(start, get){ // Make a cmp function to compare two gids by distance from gid. -/* -function makeImageGIDDistanceCmp(gid, order){ - order = order == null ? DATA.order : order - var i = order.indexOf(gid) - return function(a, b){ - return (Math.abs(i - order.indexOf(a)) - - Math.abs(i - order.indexOf(b))) - } -} -*/ function makeImageGIDDistanceCmp(gid, get, order){ order = order == null ? DATA.order : order return makeDistanceCmp(gid, get == null ? @@ -117,6 +121,7 @@ function makeImageGIDDistanceCmp(gid, get, order){ // NOTE: essentially this is a 2D distance compatison from gid... // // XXX make this faster... +// XXX this is fun, but do we actually need this? function makeImageRibbonDistanceCmp(gid, get, data, images){ data = data == null ? DATA : data images = images == null ? IMAGES : images @@ -375,7 +380,7 @@ function normalizePath(url, base, mode){ } -// Same as getImageBefore, but uses gids and searches in DATA... +// Same as getImageBefore(...), but uses gids and searches in DATA... // // NOTE: this uses it's own predicate... function getGIDBefore(gid, ribbon, search){ @@ -652,8 +657,7 @@ function updateImage(image, gid, size){ .attr('gid', JSON.stringify(gid)) .css({ // clear the old preview... - // XXX set a now loading animation here... - 'background-image': 'none', + 'background-image': '', }) } size = size == null ? getVisibleImageSize('max') : size @@ -668,20 +672,18 @@ function updateImage(image, gid, size){ // preview... var preview = getBestPreview(gid, size) - // pre-cache... + // pre-cache and load image... // NOTE: make images load without a blackout.. var img = new Image() - img.src = preview.url img.onload = function(){ image.css({ 'background-image': 'url("'+ preview.url +'")', }) } + img.src = preview.url + // main attrs... image - //.css({ - // 'background-image': 'url("'+ preview.url +'")', - //}) .attr({ order: DATA.order.indexOf(gid), orientation: img_data.orientation == null ? 0 : img_data.orientation, @@ -700,7 +702,7 @@ function updateImage(image, gid, size){ var UPDATE_SORT_ENABLED = false // XXX for some reason the sync version appears to work faster... -var UPDATE_SYNC = true +var UPDATE_SYNC = false // Same as updateImage(...) but will update all images. // @@ -952,7 +954,9 @@ function loadSettings(){ */ // NOTE: this will always overwrite the previous cache set for a ribbon... -// XXX sort images in cache by closeness to current image... +// NOTE: it appears that sorting images by priority before loading them +// to cache has little or no affect on the order they are +// loaded/rendered... function preCacheRibbonImages(ribbon){ var i = getRibbonIndex(ribbon) var size = getVisibleImageSize('max') @@ -965,8 +969,6 @@ function preCacheRibbonImages(ribbon){ var gids = getImageGIDs(first, -cache_frame_size) .concat(getImageGIDs(last, cache_frame_size)) - // XXX sort gids... - var cache = [] IMAGE_CACHE[i] = cache $.each(gids, function(i, e){ @@ -1167,7 +1169,7 @@ function loadFileImages(path, no_load_diffs, callback){ callback != null && callback() }) .fail(function(){ - updateErrorStatus('Loading: ' + path) + showErrorStatus('Loading: ' + path) }) } @@ -1183,7 +1185,7 @@ function saveFileImages(name){ name = name == null ? normalizePath(CACHE_DIR +'/'+ Date.timeStamp()) : name if(window.dumpJSON == null){ - updateErrorStatus('Can\'t save to file.') + showErrorStatus('Can\'t save to file.') return } @@ -1239,7 +1241,7 @@ function loadFileState(data_path, callback){ } }) .fail(function(){ - updateErrorStatus('Loading:', data_path) + showErrorStatus('Loading:', data_path) }) return res @@ -1293,7 +1295,7 @@ function loadDir(path, raw_load){ var files = listDir(path) if(files == null){ - updateErrorStatus('Path: ' + path) + showErrorStatus('Path: ' + path) return } @@ -1336,7 +1338,7 @@ function loadDir(path, raw_load){ }) if(image_paths.length == 0){ - updateErrorStatus('No images in:', orig_path) + showErrorStatus('No images in:', orig_path) return } @@ -1363,7 +1365,7 @@ function updateRibbonsFromFavDirs(){ // NOTE: this will open the default editor/viewer. function openImage(){ if(window.runSystem == null){ - updateErrorStatus('Can\'t run external programs.') + showErrorStatus('Can\'t run external programs.') return } // XXX if path is not present try and open the biggest preview... diff --git a/ui/images/loading-180deg.gif b/ui/images/loading-180deg.gif new file mode 100755 index 0000000000000000000000000000000000000000..c9110774bb8a627288d04a1a8bfabf4787b7b7ab GIT binary patch literal 522 zcmZ?wbhEHbJi%~+;UfbGq^71GIB)>SQ2fclA_AiSbNji51UowhxEkphFf#&$bbuJB z;RFK%)4!Jfm8akGFP^jIR`=$6dw%n`J@T0LtaI6`Q`_EgAOGZY{af$zU+2F6puQu)6X8i)z{x_`_0>b`uUe#fBVkA z{{Cm*e|`xK3y+A5ijEm8cAU8J;s=MMrln_OW@YEhl{-(~eEE}8O3TVCDyyn%)~a2n zZoT@&C9Q4k9i3g>J$v=;)3;y$=9ba1@rlW)>CutiaAwb)3wQqTyp^%?-J2k*V5>W8 zFYjO3*j(9jF?D}mo?X!AYj@G_r6@*>o5zJk-h~ zZB@fzxadfyh<4PT4#UOA?0RLatNw5pEjck!#e0@br_s_=Q+1+u)o>awJ2TTH`_`UL zP_9>tcjRniG zGBPkT=p+Hd3MM0=rp3(ZSQ2fclA_AiSbNji51UowhxEkphFf#&$bbuJB z;RFK%)4!Jfm8akGFP^jIR`=$6dw%n`J@T0LtaI6`Q`_EgAOGZY{af$zU+2F6puQu)6X8i)z{x_`_0>b`uUe#fBVkA z{{Cm*e|`xK3y+A5ijEm8cAU8J;s=MMrln_OW@YEhl{-(~eEE}8O3TVCDyyn%)~a2n zZoT@&C9Q4k9i81RHDUGaYUz!;Z*zZKE&a#fO!S=snF(uZ?wr}cvsb}3x3+ig+P!D* zzFiwSSGLc#E;g^$ZZ6;6dw2fv%In+v$LH72{}Z=H{>=T?_1p_|8@F;?GV0J@c&L>} z+Ny@baM6)Y5$&iw9fpgKnfJ>ymwWSQ2fclA_AiSbNji51UowhxEkphFf#&$bbuJB z;RFK%)4!Jfm8akGFP^jIR`=$6dw%n`J@T0LtaI6`Q`_EgAOGZY{af$zU+2F6puQu)6X8i)z{x_`_0>b`uUe#fBVkA z{{Cm*e|`xK3y+A5ijEm8cAU8J;s=MMrln_OW@YEhl{-(~eEE}8O3TVCDyyn%)~a2n zZoT@&C9Q4keOtVsyE@u>;_Thp7rTE;3$C&L6ChL26SL>dgg18>WPM|EYkTLe-Fx<} z+1$UqvURq3v2nG2bLIBld;5=1UfJNv}k`ohEyl2^T8ZA9FRVR8^4X5$4Gc!%HZ|&(c zUVd(_P4%xooF*$SEOhCXvhCWE!3Yjqc2GzrGWarZ03ibt`xH<}#)1Q$m63rNCMOA$ tlWfUf2nuDM#gI_eX@P_?#3WXBi0U|?InqGYQfR90b3#;SMKLf~0|2cm+(`fc literal 0 HcmV?d00001 diff --git a/ui/images/loading.gif b/ui/images/loading.gif new file mode 100755 index 0000000000000000000000000000000000000000..9d3dce025a44453f44e8b1e92f205da315be3d17 GIT binary patch literal 521 zcmZ?wbhEHbJi%~+;UfbGq^71GIB)>SQ2fvB=Nc01>=@u`q-Vg)2on0q!Xm=(pFs!6 z25LCLz`*psrGMq=xBQFeY`N9F`QD!2{B4gsrakLi_UhEOcihK6`CR|j`~26r@BjFD zxY~~_`q<&4HT}%8&z!wp%df2Z+I2Q-`<->)x%s+}KiTxN$8YuZH`{*m_Md+KW!K-n z^RK`E+4rAcLc_u%BBP>X#)=&$ZoK%xA*pHU8JStxIdkRClQ&=fYBA` z*Qr~tesM`_TYE=mS9i}|z5Dd-*T1=CbZmTLa%!X|teJCX!=5{D&d5mV?sbr5kkzf4 z`}WRX8{fZcZQ}l(Jll|`E4Oa$xqa{WR;_cGpK!mkenI|$`ak>z3l220a7)>A7%V*0 z$|G%6!(q7SNT-N))SeE*#m9PWWvr|Ia2PE)F;T^PmQAP8(o<7)qIcDB8ZSFD(Oi&G7xaww?{^}hmj9_i- yAZ>9#6Q#l0ltJ2TnUqal?$B0Ud;RGS)!5IzQ%&`j3Mj3N+Lp2F)T!NK4AubET;sI> literal 0 HcmV?d00001 diff --git a/ui/index.html b/ui/index.html index 311c7aa0..e5d8b1f2 100755 --- a/ui/index.html +++ b/ui/index.html @@ -33,6 +33,9 @@ //DEBUG = true +var CURSOR_SHOW_THRESHOLD = 10 +var CURSOR_HIDE_TIMEOUT = 2000 + // setup... $(function(){ @@ -46,6 +49,31 @@ $(function(){ // XXX for some reason this messes up alignment on initial view... //.dblclick(dblClickHandler) + // hide cursor... + .on('mousemove', function(evt){ + _cursor_pos = window._cursor_pos == null || $('.viewer').css('cursor') == 'auto' ? + [evt.clientX, evt.clientY] + : _cursor_pos + + if(Math.abs(evt.clientX - _cursor_pos[0]) > CURSOR_SHOW_THRESHOLD + || Math.abs(evt.clientY - _cursor_pos[1]) > CURSOR_SHOW_THRESHOLD){ + + if(window._cursor_timeout != null){ + clearTimeout(_cursor_timeout) + } + + $('.viewer').css('cursor', '') + + } else { + _cursor_timeout = setTimeout(function(){ + if(Math.abs(evt.clientX - _cursor_pos[0]) < CURSOR_SHOW_THRESHOLD + || Math.abs(evt.clientY - _cursor_pos[1]) < CURSOR_SHOW_THRESHOLD){ + $('.viewer').css('cursor', 'none') + } + }, CURSOR_HIDE_TIMEOUT) + } + }) + $(window) .resize(function() { // XXX should this be animated or not? diff --git a/ui/layout.css b/ui/layout.css index a3df092b..da6163b0 100755 --- a/ui/layout.css +++ b/ui/layout.css @@ -134,6 +134,24 @@ body { } +/* default backgrounds */ +/* XXX not sure if we need these... */ +/* +.image { + background-image: url(images/loading.gif); +} +.image[orientation="90"] { + background-image: url(images/loading-90deg.gif); +} +.image[orientation="180"] { + background-image: url(images/loading-180deg.gif); +} +.image[orientation="270"] { + background-image: url(images/loading-270deg.gif); +} +*/ + + /***************************************************** Image marks ***/ .marks-visible.viewer .marked.image:after {