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