ShinobiSystems
/
Shinobi
mirror of https://gitlab.com/Shinobi-Systems/Shinobi.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

improve timelapse.jpeg appearance and performance

merge-requests/63/head
Moe 2019-03-24 11:19:55 -07:00
parent bcdb54d02b
commit 85bfd75280
5 changed files with 88 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
libs/sql.js
View File

@ -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){

2
web/libs/css/dash2.basic.css
View File

@ -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;
}

45
web/libs/css/dash2.timelapse.jpeg.css
View File

@ -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);

46
web/libs/js/dash2.timelapse.jpeg.js
View File

@ -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 += '<div class="frame" data-filename="' + fileInfo.filename + '"><img src="' + fileInfo.href + '"></div>'
// frameStripHtml += '<div class="frame" data-filename="' + fileInfo.filename + '"><img src="' + fileInfo.href + '"></div>'
frameIconsHtml += '<div class="col-md-4"><div class="frame" data-filename="' + fileInfo.filename + '" style="background-image:url(\'' + fileInfo.href + '\')"><div class="shade">' + moment(fileInfo.time).format('YYYY-MM-DD HH:mm:ss') + '</div></div></div>'
$.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()
})

25
web/pages/blocks/timelapse.ejs
View File

@ -91,21 +91,24 @@
<div class="modal-body text-center">
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label><div><span><%-lang['Monitor']%></span></div>
<div><select class="form-control dark monitors_list"></select></div>
</label>
<div class="fieldHolder">
<div class="form-group">
<label><div><span><%-lang['Monitor']%></span></div>
<div><select class="form-control dark monitors_list"></select></div>
</label>
</div>
<div class="form-group">
<label><div><span><%-lang['Date']%></span></div>
<div><input type="text" id="timelapsejpeg_date" class="form-control" value="" /></div>
</label>
</div>
</div>
<div class="form-group">
<label><div><span><%-lang['Date']%></span></div>
<div><input type="text" id="timelapsejpeg_date" class="form-control" value="" /></div>
</label>
</div>
<div class="frames"></div>
<div class="frameIcons row"></div>
</div>
<div class="col-md-8 contained">
<div class="col-md-8 frameStripContainer contained">
<div class="playBackView"><img></div>
<div class="frames"></div>
<div class="frameStripPreview"></div>
<div class="frameStrip"></div>
</div>
</div>