2017-10-08 49 views
0

的想法是,让我按HTML页面上的一个按钮来执行命令,对相机的反馈显示在开始复制和删除所有照片和执行结束。显示在一个功能的OSC API开始和结束的信息

目前,之后点击“获取图像从相机”,textarea的正显示出这样的文字:

执行的命令:\ copyImages

结果如下:复制从图像 这两个相机... \ n

它继续复制和删除所有图像像我想要的。但是在这个过程结束时,没有东西会返回到屏幕上,所以用户不知道会发生什么。 Node js中回调的性质使我很难理解如何做到这一点。

P.S.在我来这里得到你的帮助之前,我尝试了我所知道的一切。所以知道任何建议都非常感谢!

所以,我的问题是如何更改下面的代码,这样我可以 显示一条消息,表明复制成功完成,如用户:

请等待复制完成...

已完成!

下面是HTML标记

<button id="copyImages" type="button" class="button">Get Images From Camera</button> 
<textarea id="output" readonly></textarea> 

这里是JavaScript事件处理:

copyImages.onclick = function() { 
    dest = '/copyImages'; 
    writeToOutput(dest); 
} 
function writeToOutput(dest) { 
     $.get(dest, null, function(data) { 
      resultText += "Executed command: "+dest+"\n" 
            +"Result is as below: \n"+data; 
      $("#output").val(resultText); 
     }, "text"); 
     return true; 
    } 

这些下面的功能是使用Express模块​​听设置节点应用服务器HTML页面传递给它的任何东西。他们在不同的设备上运行。

expressServer.listen(expressPort, function() { 
    console.log('expressServer listening at *:%d', expressPort); 

}); 

// allow CORS on the express server 
expressServer.use(function(req, res, next) { 
    // enable cross original resource sharing to allow html page to access commands 
    res.header("Access-Control-Allow-Origin", "*"); 

    // return to the console the URL that is being accesssed, leaving for clarity 
    console.log("\n"+req.url); 

    next(); 
}); 

expressServer.get('/copyImages', function (req, res) { 
    // user accesses /copyImages and the copyImages function is called 
    copyImages(function(result) { 
     res.end(result + "\n"); 
    }); 
}); 

复制图片来自西塔的摄像头,以树莓派和删除那些从相机

var resultCopyImages = ""; 

copyImages = function (callback) { 
    resultCopyImages = "Copying images from both cameras...\n"; 
    for (var i = 0; i < camArray.length; i++) { 
     copyOneCamImages(i, callback); 
    } 
    return (callback(resultCopyImages)); 
//how to return multiple messages? 
} 

copyOneCamImages = function (camID, callback) { 

    d.on('error', function(err){ 
     console.log('There was an error copying the images'); 
     return(callback('There was an error running a function, please make sure all cameras are connected and restart the server')); 
    }) 

    d.run(function(){ 

     var imageFolder = baseImageFolder + camID; 
     // if the directory does not exist, make it 
     if (!fs.existsSync(imageFolder)) { 
      fs.mkdirSync(imageFolder); 
      console.log("no 'images' folder found, so a new one has been created!"); 
     } 

     // initialise total images, approximate time 
     var totalImages = 0; 
     var approxTime = 0; 

     // get the first image and do not include thumbnail 
     var entryCount = 1; 
     var includeThumb = false; 
     var filename; 
     var fileuri; 

     // get the total amount of images 
     camArray[camID].oscClient.listImages(entryCount, includeThumb) 
      .then(function (res) { 
      totalImages = res.results.totalEntries; 
      approxTime = totalImages * 5; 
      resultCopyImages = ''; 
      resultCopyImages = 'Camera ' + (camID + 1) + ': Copying a total of: ' + totalImages + ' images' 
       + '\nTo folder: ' + imageFolder 
       + '\nThis process will take approximately: ' + approxTime + ' seconds \n'; 
      console.log(resultCopyImages); 
      callback(resultCopyImages); 
      }); 

     // copy a single image, with the same name and put it in images folder 
     camArray[camID].oscClient.listImages(entryCount, includeThumb) 
      .then(function (res) { 
      filename = imageFolder + '/' + res.results.entries[0].name; 
      fileuri = res.results.entries[0].uri; 
      imagesLeft = res.results.totalEntries; 

      // gets the image data 
      camArray[camID].oscClient.getImage(res.results.entries[0].uri) 
       .then(function (res) { 

       var imgData = res; 
       fs.writeFile(filename, imgData); 
       camArray[camID].oscClient.delete(fileuri).then(function() { 
        if (imagesLeft != 0) { 
         // callback to itself to continue copying if images are left 
         callback(copyOneCamImages(camID, callback)); 

     //???????????????????????????????????????????????????????????????????????????? 
     //if(imagesLeft==1) return(callback("Finished copying")); 
        }/* else { 
     resultCopyImages = "Finshed copying image.\n"; 
     console.log(resultCopyImages); 
     } 
      else if 
         return(callback(resultCopyImages)); 
        }*/ 
        }); 
       }); 
     }); 
    }) 

} 
+0

嗨,你在哪里显示图像?容器HTML中摄像机显示的图像在哪里显示? – 2017-10-08 11:56:40

+0

@headmax,我不显示它们。只需将它们复制到设备并从相机中删除即可。尽管如此,我想在完成任务时显示一个消息。 –

+0

OSC API没有说明你是如何做到的withtout屏幕显示图像,例如:画布,然后采取截图,从那里,但在你的情况监听端口,并采取数据不知道至极头MIME类型,使用的包是怎么,对不起,没有了这个API的经验安装任何NPM? – 2017-10-08 12:21:46

回答

0

目前为止,还没有真正的答案,我问这样的问题,我们已经结束的项目并跳过该功能。但是,这只是在NodeJs中掌握REST API和异步功能的问题。该项目预计将继续为下一个版本明年的某个时候。

相关问题