Hololens and Image capture

sgreywilson — Tue, 31 May 2022 15:55:05 GMT

In the past I have posted how to do image capture in mobile. Here is a HoloLens approach - the link is to a video that talks about the approach https://www.brainshark.com/ptc/vu?pi=zGizA1n5IzBRxnz0

Re: Hololens and Image capture

sgreywilson — Tue, 31 May 2022 19:55:56 GMT

Sometimes looking at code can help provide different insights

// $scope, $element, $attrs, $injector, $sce, $timeout, $http, $ionicPopup, and $ionicPopover services are available

console.log($scope.app);

// *****************************************************************************************************************
// Globals indicated by uppercase naming
// // **************************************************************************************************************

var WIDTH_USED ;
var UPLOAD_IMAGE_AS_IS;
var NUMBER_OF_HISTORY_IMAGES = 4;
var IMAGE_BORDER = 15;
var IMAGE_BORDER_COLOR = '#FFF832';

// ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
// *****************************************************************************************************************
//
// Local functions
// These functions can not be used directly with studio
// The are help function to make the main $scope visible function be more readable
//
// *****************************************************************************************************************

// *****************************************************************************************************************
// draw image to a canvas to reduce size
// *****************************************************************************************************************
drawImageToCanvas = function (imageToDraw , imageWidth) {

var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");

var image = new Image();
image.src=imageToDraw ;

var aspect_width = imageWidth;
var aspect_height = parseInt( (image.height / image.width ) * imageWidth );

canvas.width = aspect_width; // target width
canvas.height =aspect_height; // target height

ctx.drawImage(image,
0, 0, image.width, image.height,
0, 0, aspect_width, aspect_height
);
ctx.beginPath();
ctx.strokeStyle = IMAGE_BORDER_COLOR; // some color/style
ctx.lineWidth = IMAGE_BORDER; // thickness
ctx.strokeRect(0, 0, ctx.canvas.width, ctx.canvas.height);

return canvas

}

// *****************************************************************************************************************
// Set the the 4 images src values
// *****************************************************************************************************************
setImages = function() {

var imagesArray = $scope.view.wdg["3DLabelPhotoListHolder"].text;
try {

if (imagesArray.length > 0 ) {
imagesArray.forEach((value, index, array) => {
if (index < NUMBER_OF_HISTORY_IMAGES) {
id = index+1;
$scope.app.view.Home.wdg["3DImageHistory"+ id ].src=value.downloadLink ;
}

});

}

} catch(ex) {
console.log ("Possible Error: When trying to work through images passed from IOT service there Exception:"+ex);
}

resetMessage("...", 5000);

}

resetMessage = function ( message , time) {
if (time != undefined) {
$timeout(function() { $scope.app.view.Home.wdg["3DLabelMessage"].text= message}, time);
} else {
$scope.app.view.Home.wdg["3DLabelMessage"].text= message
}

}

// ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
// *****************************************************************************************************************
// Trigger a services
// *****************************************************************************************************************

// *****************************************************************************************************************
// Trigger GetPhotoList of external servce FE_RWTakePhoto_Repo
// *****************************************************************************************************************
$scope.TriggerPhotoList = function () {

resetMessage("...Getting List");
var parameters = {'numberFilesToReturn' : 4 , 'returnImageContent' : false};
console.log("Getting PhotoList");
twx.app.fn.triggerDataService('FE_RWTakePhoto_Repo', 'GetPhotoList', parameters);

}

// *****************************************************************************************************************
// Trigger UploadPhoto of external servce FE_RWTakePhoto_Repo
// *****************************************************************************************************************
$scope.TriggerUpload = function (width) {

// console.log("Image URL =" + $scope.app.view.Home.wdg["cameraPhoto"].imageUrl);
UPLOAD_IMAGE_AS_IS = true;
WIDTH_USED = width;

resetMessage("...Working");

if (width != null && width != "") {
UPLOAD_IMAGE_AS_IS = false;
canvas = drawImageToCanvas($scope.app.view.Home.wdg["cameraPhoto"].imageUrl , width );

contextArray = canvas.toDataURL().split(",");

//console.log("contextArray =" + contextArray[0]);
//console.log("contextArray =" + contextArray[1]);

var d = new Date();
var parameters = { 'fileName' : '/' + d.getTime() + '.png', 'imageContent' : contextArray[1] };

console.log("Starting UPLOAD using image size " + width);
twx.app.fn.triggerDataService('FE_RWTakePhoto_Repo', 'UploadPhoto', parameters);

} else {

var uploadDate = new Date();
var uploadParameters = { 'fileName' : '/' + uploadDate.getTime() + '.png', 'imageContent' : $scope.app.view.Home.wdg["cameraPhoto"].image };

console.log("Starting UPLOAD using image size as is");
twx.app.fn.triggerDataService('FE_RWTakePhoto_Repo', 'UploadPhoto', uploadParameters);

}

}

// ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
// *****************************************************************************************************************
// Do action after a service has finished
// *****************************************************************************************************************

// *****************************************************************************************************************
// After UploadPhoto service completes set labels
// *****************************************************************************************************************
$scope.$on("UploadPhoto.serviceInvokeComplete", function(evt, arg)
{
if (UPLOAD_IMAGE_AS_IS) {
resetMessage("... Uploaded ");

} else {
resetMessage("... Uploaded width=" + WIDTH_USED);
}

resetMessage( "..." , 1000);
}

)

// *****************************************************************************************************************
// If UploadPhoto service fails inform user
// *****************************************************************************************************************
$scope.$on("UploadPhoto.serviceFailure", function(evt, arg)
{

var chars ;
try {

chars = $scope.app.view.Home.wdg["cameraPhoto"].imageUrl.substring(0, 100);

} catch (ex) {
// ignore
console.log("Error during substring action of image content expection=" + ex);
}
resetMessage("... Upload Failed try again!");

console.log("Upload Failed - please check user is logged in otherwise upload will fail. The returned args="+ arg.message.message + "The ouput here shows the first 100 chars of content " + chars);

resetMessage( "...", 5000);

}

)

// *****************************************************************************************************************
// After GetPhotoList service completes set Images
// *****************************************************************************************************************
$scope.$on("GetPhotoList.serviceInvokeComplete", function(evt, arg)
{

$scope.$applyAsync();
$timeout(function() { setImages();}, 1000);

}
)

// *****************************************************************************************************************
// If GetPhotoList service fails inform user
// *****************************************************************************************************************
$scope.$on("GetPhotoList.serviceFailure", function(evt, arg)
{

resetMessage( "... Get List Failed!");
resetMessage( "...", 5000);

}

)

// ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

topic Re: Hololens and Image capture in Vuforia Studio

Hololens and Image capture

Re: Hololens and Image capture