diff --git a/libs/sql.js b/libs/sql.js index 5ddf9cc3..60352803 100644 --- a/libs/sql.js +++ b/libs/sql.js @@ -119,7 +119,7 @@ module.exports = function(s,config){ if(err)console.error(err) },true) //add Timelapses and Timelapse Frames tables, will remove in future - s.sqlQuery("CREATE TABLE IF NOT EXISTS `Timelapses` (`ke`varchar(50)NOT NULL,`mid`varchar(50)NOT NULL,`details`longtext,`date`date NOT NULL,`time`timestamp NOT NULL,`end`timestamp NOT NULL,`size`int(11)NOT NULL)" + mySQLtail + ';',[],function(err){ + s.sqlQuery("CREATE TABLE IF NOT EXISTS `Timelapses` (`ke` varchar(50) NOT NULL,`mid` varchar(50) NOT NULL,`details` longtext,`date` date NOT NULL,`time` timestamp NOT NULL,`end` timestamp NOT NULL,`size` int(11)NOT NULL)" + mySQLtail + ';',[],function(err){ if(err)console.error(err) },true) s.sqlQuery("CREATE TABLE IF NOT EXISTS `Timelapse Frames` (`ke` varchar(50) NOT NULL,`mid` varchar(50) NOT NULL,`details` longtext,`filename` varchar(50) NOT NULL,`time` timestamp NULL DEFAULT NULL,`size` int(11) NOT NULL)" + mySQLtail + ';',[],function(err){ diff --git a/web/libs/css/dash2.basic.css b/web/libs/css/dash2.basic.css index 0b1b3103..e7926376 100644 --- a/web/libs/css/dash2.basic.css +++ b/web/libs/css/dash2.basic.css @@ -409,7 +409,7 @@ ul.msg_list li .message { } .demo-drawer .mdl-menu__container{ - height: 500px!important; + max-height: 500px!important; overflow-y: auto; overflow-x: hidden; } diff --git a/web/libs/css/dash2.timelapse.jpeg.css b/web/libs/css/dash2.timelapse.jpeg.css index e7bf6cef..8c300659 100644 --- a/web/libs/css/dash2.timelapse.jpeg.css +++ b/web/libs/css/dash2.timelapse.jpeg.css @@ -12,12 +12,8 @@ top:0; left:0; } -#timelapsejpeg .contained{ - position:relative; - height:100px; -} -#timelapsejpeg .row, -#timelapsejpeg .row > div { +#timelapsejpeg .modal-body > .row, +#timelapsejpeg .modal-body > .row > div { position:relative; height: 100%; } @@ -32,13 +28,46 @@ } #timelapsejpeg .frameStrip{ position:absolute; - height:10px; - width:100%; + height:30px; + width:90%; + margin:auto; bottom:0; left:0; + right:0; border-radius:5px; overflow:hidden; } +#timelapsejpeg .frameStripPreview{ + position:absolute; + height:80px; + width:100px; + border:3px solid #333; + border-radius:5px; + background-size: cover; + z-index: 10; + transition: none; + bottom: 40px; +} +#timelapsejpeg .frameIcons{ + overflow-y: auto; + overflow-x: hidden; +} +#timelapsejpeg .frameIcons .frame{ + background-size: cover; + width: 100%; + height: 100px; + position: relative; + cursor: pointer; +} +#timelapsejpeg .frameIcons .frame .shade{ + position: absolute; + bottom: 0; + left: 0; + width: 100%; + padding: 5px 10px; + font-family: monospace; + background: rgba(0,0,0,0.6); +} #timelapsejpeg .playBackView{ position:absolute; height: calc(100% - 100px); diff --git a/web/libs/js/dash2.timelapse.jpeg.js b/web/libs/js/dash2.timelapse.jpeg.js index 8a29be3c..ab40cef6 100644 --- a/web/libs/js/dash2.timelapse.jpeg.js +++ b/web/libs/js/dash2.timelapse.jpeg.js @@ -4,6 +4,10 @@ $(document).ready(function(e){ $.timelapseJpeg.datepicker = $('#timelapsejpeg_date') $.timelapseJpeg.framesContainer = $.timelapseJpeg.e.find('.frames') $.timelapseJpeg.frameStrip = $.timelapseJpeg.e.find('.frameStrip') + $.timelapseJpeg.frameIcons = $.timelapseJpeg.e.find('.frameIcons') + $.timelapseJpeg.fieldHolder = $.timelapseJpeg.e.find('.fieldHolder') + $.timelapseJpeg.frameStripPreview = $.timelapseJpeg.e.find('.frameStripPreview') + $.timelapseJpeg.frameStripContainer = $.timelapseJpeg.e.find('.frameStripContainer') $.timelapseJpeg.playBackViewImg = $.timelapseJpeg.e.find('.playBackView img') $.timelapseJpeg.monitors=$.timelapseJpeg.e.find('.monitors_list') $.timelapseJpeg.datepicker.daterangepicker({ @@ -18,9 +22,12 @@ $(document).ready(function(e){ $.timelapseJpeg.draw(start._d.valueOf()) }) $.timelapseJpeg.draw = function(selectedDate){ - var html = '' + $.timelapseJpeg.frameStripContainerOffset = $.timelapseJpeg.frameStripContainer.offset() + var frameStripHtml = '' + var frameIconsHtml = '' var selectedMonitor = $.timelapseJpeg.monitors.val() - var apiURL=$.ccio.init('location',$user)+$user.auth_token+'/timelapse/'+$user.ke+'/'+selectedMonitor+'/'+selectedDate + var apiURL = $.ccio.init('location',$user)+$user.auth_token+'/timelapse/'+$user.ke+'/'+selectedMonitor+'/'+selectedDate + $.timelapseJpeg.frameStripHrefPrefix = apiURL + '/' $.getJSON(apiURL,function(data){ if(data && data[0]){ var firstFilename = data[0].filename @@ -30,11 +37,13 @@ $(document).ready(function(e){ $.each(data.reverse(),function(n,fileInfo){ fileInfo.href = apiURL + '/' + fileInfo.filename fileInfo.number = n - html += '
' + // frameStripHtml += '
' + frameIconsHtml += '
' + moment(fileInfo.time).format('YYYY-MM-DD HH:mm:ss') + '
' $.timelapseJpeg.playlist[fileInfo.filename] = fileInfo }) $.timelapseJpeg.playlistArray = data - $.timelapseJpeg.frameStrip.html(html) + // $.timelapseJpeg.frameStrip.html(frameStripHtml) + $.timelapseJpeg.frameIcons.html(frameIconsHtml) $.timelapseJpeg.resetFilmStripPositions() }else{ html = lang['No Data'] @@ -43,21 +52,25 @@ $(document).ready(function(e){ }) } $.timelapseJpeg.resetFilmStripPositions = function(){ - var numberOfFrames = Object.keys($.timelapseJpeg.playlist).length - var frameStripWidth = $.timelapseJpeg.frameStrip.width() - var widthForEachFrame = frameStripWidth / numberOfFrames - $.timelapseJpeg.frameStrip.find('.frame').css('width',widthForEachFrame) + // var numberOfFrames = Object.keys($.timelapseJpeg.playlist).length + // var frameStripWidth = $.timelapseJpeg.frameStrip.width() + // var widthForEachFrame = frameStripWidth / numberOfFrames + // $.timelapseJpeg.frameStrip.find('.frame').css('width',widthForEachFrame) + var fieldHolderHeight = $.timelapseJpeg.fieldHolder.height() + console.log("calc(100% - " + fieldHolderHeight + "px)") + $.timelapseJpeg.frameIcons.css({height:"calc(100% - " + fieldHolderHeight + "px)"}) } $.timelapseJpeg.setPlayBackFrame = function(href){ $.timelapseJpeg.playBackViewImg[0].src = href } - $.timelapseJpeg.playInterval = 200 + $.timelapseJpeg.playInterval = 400 $.timelapseJpeg.play = function(){ var selectedFrame = $.timelapseJpeg.playlist[$.timelapseJpeg.frameSelected] var selectedFrameNumber = $.timelapseJpeg.playlist[$.timelapseJpeg.frameSelected].number $.timelapseJpeg.setPlayBackFrame(selectedFrame.href) - $.timelapseJpeg.e.find('.frameStrip .frame').removeClass('selected') - $.timelapseJpeg.e.find(`.frameStrip .frame[data-filename="${selectedFrame.filename}"]`).addClass('selected') + // $.timelapseJpeg.frameStrip.find(`.frameStrip .frame.selected`).removeClass('selected') + // $.timelapseJpeg.frameStrip.find(`.frameStrip .frame[data-filename="${selectedFrame.filename}"]`).addClass('selected') + clearTimeout($.timelapseJpeg.playIntervalTimer) $.timelapseJpeg.playIntervalTimer = setTimeout(function(){ ++selectedFrameNumber var newSelectedFrame = $.timelapseJpeg.playlistArray[selectedFrameNumber] @@ -92,6 +105,17 @@ $(document).ready(function(e){ var href = $.timelapseJpeg.playlist[selectedFrame].href $.timelapseJpeg.setPlayBackFrame(href) }) + // $.timelapseJpeg.frameStrip.on('mouseover','.frame',function(e){ + // var relativeX = (e.pageX - $.timelapseJpeg.frameStripContainerOffset.left) - 50 + // var selectedFrameHref = $.timelapseJpeg.frameStripHrefPrefix + $(this).attr('data-filename') + // $.timelapseJpeg.frameStripPreview.css({ + // left:relativeX, + // backgroundImage: 'url(' + selectedFrameHref + ')' + // }) + // }) + // $.timelapseJpeg.e.on('mouseout','.frame',function(e){ + // + // }) $.timelapseJpeg.e.on('hidden.bs.modal', function (e) { $.timelapseJpeg.destroy() }) diff --git a/web/pages/blocks/timelapse.ejs b/web/pages/blocks/timelapse.ejs index 13782f81..2acbecd1 100644 --- a/web/pages/blocks/timelapse.ejs +++ b/web/pages/blocks/timelapse.ejs @@ -91,21 +91,24 @@
-
- +
+
+ +
+
+ +
-
- -
-
+
-
+
+