在 OSC API 中开始和完成功能时显示消息

Display a message upon the beginning and completion of a function in OSC API

这个想法是让我在 HTML 页面上按下一个按钮来执行一个命令来复制和删除相机上的所有照片,并在执行开始和结束时显示反馈。

此时,点击“从相机获取图片”后,文本框显示的是:

Executed command: \copyImages

Result is as below: Copying images from both cameras...\n

然后它继续复制和删除我想要的所有图像。但是在这个过程结束时,没有任何东西返回到屏幕,所以用户不知道发生了什么。 Node js 中回调的性质让我很困惑,不知道该怎么做。

P.S。在我来这里寻求你的帮助之前,我已经尝试了所有我知道的事情。所以知道非常感谢任何建议!

所以,我的问题是如何更改下面的代码,以便我可以 显示一条消息,向用户显示复制已成功完成,例如:

Please wait for the copying to complete...

Completed!

下面是 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 模块设置 Node App 服务器,以侦听 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");
    });
});

将图像从 Theta S 相机复制到 Raspberry Pi 并从相机中删除这些图像

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));
                    }*/
                    });
                });
        });
    })
    
 }

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