2017-10-08 20 views
0

HTMLページのボタンを押して、最初にフィードバックが表示されているカメラのすべての写真をコピーして削除するコマンドを実行できるようにすることです。実行終了。OSC APIの機能の開始と終了時にメッセージを表示

現時点では、「カメラの画像を取得」をクリックした後、テキストエリアには、このテキストを示しているが:

実行されたコマンド:\ copyImages

結果は以下の通りです:からコピーした画像 両方のカメラ... \ n

そして、私が望むようにすべての画像をコピーして削除します。しかし、このプロセスの最後に何も画面に戻されないので、ユーザーは何が起こるか分かりません。ノードjのコールバックの性質は、これを行う方法を理解するのが私を混乱させます。

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

以下これらの機能はを聞くために急行モジュールを使用してノードアプリケーションサーバーを設定するためのものですHTMLページが何かに渡します。それらは別のデバイス上で実行されます。シータSカメラからのカメラからのものラズベリーパイにして削除

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カメラの画像が表示されるHTML? –

+0

@headmax、私はそれらを表示しません。それらをデバイスにコピーし、カメラから削除してください。私はタスクの完了時にmsgsを表示したい。 –

+0

OSC APIは、キャンバスにイメージを表示して画面を表示しない方法を説明していませんでした。そこからスクリーンショットを撮っていましたが、あなたのケースでは、ポートタイプを聞いて、 、申し訳ありません、npmがインストールされているこのAPIの経験はありませんでしたか?@headmax、確かに –

答えて

0
我々はプロジェクトを締結しているこれまでのところ、私はそう尋ねた質問に対する本当の答えはありません

機能をスキップしました。しかし、NodeJsのREST APIと非同期関数を習得するだけです。このプロジェクトは来年いつか次のバージョンに向けて継続する予定です。