Face Manager : Add drag and drop for faces between folders in UI
Moe
parent
b71de38e77
commit
e7099d1dbb
|
|
@ -91,17 +91,57 @@ module.exports = function(s,config,lang,app,io){
|
|||
faceName: req.params.name,
|
||||
fileName: req.params.image,
|
||||
})
|
||||
getFaceFolderNames((faces) => {
|
||||
s.sendToAllDetectors({
|
||||
f: 'recompileFaceDescriptors',
|
||||
faces: faces
|
||||
})
|
||||
})
|
||||
})
|
||||
}
|
||||
res.end(s.prettyPrint({
|
||||
ok: true,
|
||||
}))
|
||||
getFaceFolderNames((faces) => {
|
||||
s.sendToAllDetectors({
|
||||
f: 'recompileFaceDescriptors',
|
||||
faces: faces
|
||||
},res,req)
|
||||
})
|
||||
app.get(config.webPaths.superApiPrefix+':auth/faceManager/image/:name/:image/move/:newName/:newImage', function (req,res){
|
||||
s.superAuth(req.params,function(resp){
|
||||
res.setHeader('Content-Type', 'application/json')
|
||||
const oldImagePath = config.facesFolder + req.params.name + '/' + req.params.image
|
||||
const newImagePath = config.facesFolder + req.params.newName + '/' + req.params.newImage
|
||||
const fileExists = fs.existsSync(oldImagePath)
|
||||
if(fileExists){
|
||||
fs.readFile(oldImagePath,(err,data) => {
|
||||
fs.writeFile(newImagePath,data,() => {
|
||||
fs.unlink(oldImagePath,() => {
|
||||
s.file('delete',oldImagePath)
|
||||
if(req.query.websocketResponse){
|
||||
sendDataToConnectedSuperUsers({
|
||||
f:'faceManagerImageDeleted',
|
||||
faceName: req.params.name,
|
||||
fileName: req.params.image,
|
||||
})
|
||||
var fileLink = config.webPaths.superApiPrefix + req.params.auth + `/faceManager/image/${req.params.newName}/${req.params.newImage}`
|
||||
sendDataToConnectedSuperUsers({
|
||||
f:'faceManagerImageUploaded',
|
||||
faceName: req.params.newName,
|
||||
fileName: req.params.newImage,
|
||||
url: fileLink
|
||||
})
|
||||
}
|
||||
getFaceFolderNames((faces) => {
|
||||
s.sendToAllDetectors({
|
||||
f: 'recompileFaceDescriptors',
|
||||
faces: faces
|
||||
})
|
||||
})
|
||||
})
|
||||
})
|
||||
})
|
||||
})
|
||||
}
|
||||
res.end(s.prettyPrint({
|
||||
ok: fileExists,
|
||||
}))
|
||||
},res,req)
|
||||
})
|
||||
app.post(config.webPaths.superApiPrefix+':auth/faceManager/image/:name/:image', fileUpload(), function (req,res){
|
||||
|
|
|
|||
|
|
@ -1,7 +1,29 @@
|
|||
#faceManagerImages .face-image {
|
||||
transition: 0s;
|
||||
}
|
||||
#faceManagerImages h3:first-child {
|
||||
margin-top: 0!important;
|
||||
}
|
||||
#faceManagerImages > .row {
|
||||
background: #fafafa;
|
||||
border-radius: 5px;
|
||||
padding: 5px;
|
||||
margin: 0;
|
||||
}
|
||||
#faceManagerImages > .row.ui-droppable-hover {
|
||||
background: #eee;
|
||||
}
|
||||
#faceManagerImages > .row:empty {
|
||||
height: 200px;
|
||||
}
|
||||
#faceManagerImages .face-image-bg {
|
||||
position: relative;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
border-radius: 5px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: 1px solid #eee;
|
||||
}
|
||||
#faceManagerImages .face-image .controls,
|
||||
#faceManagerImages .face-image .controls-bottom {
|
||||
|
|
|
|||
|
|
@ -13,32 +13,47 @@ $(document).ready(function(){
|
|||
callback(response)
|
||||
})
|
||||
}
|
||||
var moveFaceImage = function(name,image,newFaceName,callback){
|
||||
$.get(superApiPrefix + $user.sessionKey + '/faceManager/image/' + name + '/' + image + '/move/' + newFaceName + '/' + image + '?websocketResponse=1' ,function(response){
|
||||
callback(response)
|
||||
})
|
||||
}
|
||||
var getFaceImageHtml = function(name,image){
|
||||
return `<div class="col-3 p-0 face-image" face="${name}" image="${image}" style="background-image:url('${superApiPrefix}${$user.sessionKey}/faceManager/image/${name}/${image}')">
|
||||
<div class="controls row m-0">
|
||||
<div class="col p-0">
|
||||
<a href="#" class="btn btn-sm btn-danger m-0 delete"><i class="fa fa-trash-o"></i></a>
|
||||
return `<div class="col-3 p-2 face-image" face="${name}" image="${image}">
|
||||
<div class="face-image-bg" style="background-image:url('${superApiPrefix}${$user.sessionKey}/faceManager/image/${name}/${image}')">
|
||||
<div class="controls row m-0">
|
||||
<div class="col p-0">
|
||||
<a href="#" class="btn btn-sm btn-danger m-0 delete"><i class="fa fa-trash-o"></i></a>
|
||||
</div>
|
||||
<div class="col p-0 text-right">
|
||||
<span class="badge badge-sm bg-dark pull-right">${name}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col p-0 text-right">
|
||||
<span class="badge badge-sm bg-dark pull-right">${name}</span>
|
||||
<div class="controls-bottom">
|
||||
<span class="badge badge-sm bg-dark">${image}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="controls-bottom">
|
||||
<span class="badge badge-sm bg-dark">${image}</span>
|
||||
</div>
|
||||
</div>`
|
||||
}
|
||||
var createFaceHeader = function(name){
|
||||
return `<span class="mt-4 mb-2 badge bg-dark badge-lg">${name}</span>`
|
||||
}
|
||||
var drawFaceImages = function(){
|
||||
getFaceImages(function(faces){
|
||||
var html = ''
|
||||
$.each(faces,function(name,images){
|
||||
html += `<div class="row" face="${name}">`
|
||||
// if(images.length === 0)return
|
||||
html += `${createFaceHeader(name)}<div class="row" face="${name}">`
|
||||
$.each(images,function(n,image){
|
||||
html += getFaceImageHtml(name,image)
|
||||
})
|
||||
html += `</div>`
|
||||
})
|
||||
faceManagerImages.html(html)
|
||||
$.each(faces,function(name,images){
|
||||
activateDroppableContainer(name)
|
||||
})
|
||||
activateDraggableImages()
|
||||
prettySizeFaceImages()
|
||||
})
|
||||
}
|
||||
|
|
@ -47,6 +62,49 @@ $(document).ready(function(){
|
|||
var faceHeight = faceImagesRendered.first().width()
|
||||
faceImagesRendered.css('height',faceHeight)
|
||||
}
|
||||
var activateDroppableContainer = function(name){
|
||||
var row = faceManagerImages.find(`.row[face="${name}"]`)
|
||||
try{
|
||||
row.droppable("destroy")
|
||||
}catch(err){
|
||||
|
||||
}
|
||||
row.droppable({
|
||||
tolerance: "intersect",
|
||||
accept: ".face-image",
|
||||
activeClass: "ui-state-default",
|
||||
hoverClass: "ui-state-hover",
|
||||
drop: function(event, ui) {
|
||||
var el = $(this)
|
||||
var newFace = el.attr('face')
|
||||
var faceImageElement = $(ui.draggable)
|
||||
var oldFace = faceImageElement.attr('face')
|
||||
var fileName = faceImageElement.attr('image')
|
||||
if(oldFace !== newFace){
|
||||
moveFaceImage(oldFace,fileName,newFace)
|
||||
}else{
|
||||
faceImageElement.css({
|
||||
top: 0,
|
||||
left: 0,
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
var activateDraggableImages = function(name){
|
||||
var imageEls = faceManagerImages.find(`.face-image`)
|
||||
try{
|
||||
imageEls.draggable("destroy")
|
||||
}catch(err){
|
||||
|
||||
}
|
||||
imageEls.draggable({
|
||||
appendTo: "body",
|
||||
cursor: "move",
|
||||
// helper: 'clone',
|
||||
revert: "invalid"
|
||||
});
|
||||
}
|
||||
faceManagerModal.on('shown.bs.modal',function(){
|
||||
drawFaceImages()
|
||||
})
|
||||
|
|
@ -60,7 +118,7 @@ $(document).ready(function(){
|
|||
var faceImage = el.attr('image')
|
||||
$.confirm.create({
|
||||
title: lang.deleteImage,
|
||||
body: lang.deleteImageText,
|
||||
body: lang.deleteImageText + `<div class="mt-3"><img style="width:100%;border-radius:5px;" src="${superApiPrefix}${$user.sessionKey}/faceManager/image/${faceName}/${faceImage}"></div>`,
|
||||
clickOptions: {
|
||||
class: 'btn-danger',
|
||||
title: lang.Delete,
|
||||
|
|
@ -98,10 +156,12 @@ $(document).ready(function(){
|
|||
case'faceManagerImageUploaded':
|
||||
var row = faceManagerImages.find(`.row[face="${d.faceName}"]`)
|
||||
if(row.length === 0){
|
||||
faceManagerImages.append(`<div class="row" face="${d.faceName}"></div>`)
|
||||
faceManagerImages.append(`${createFaceHeader(d.faceName)}<div class="row" face="${d.faceName}"></div>`)
|
||||
row = faceManagerImages.find(`.row[face="${d.faceName}"]`)
|
||||
activateDroppableContainer(d.faceName)
|
||||
}
|
||||
row.prepend(getFaceImageHtml(d.faceName,d.fileName))
|
||||
activateDraggableImages()
|
||||
prettySizeFaceImages()
|
||||
break;
|
||||
case'faceManagerImageDeleted':
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@
|
|||
<div class="form-group">
|
||||
<input value="myFace" placeholder="<%- lang['Face Name'] %>" class="form-control form-control-lg" name="faceName" id="faceNameField">
|
||||
</div>
|
||||
<input type="file" id="fileinput" name="files" />
|
||||
<input type="file" id="fileinput" name="files" multiple="multiple" />
|
||||
</form>
|
||||
<div class="col-8" id="faceManagerImages">
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue