Hello! So here is the gist of what I’m trying to do.
short version: what is wrong with
template.html
ng-src={{photo}}
and
app.js
$scope.photo = file:///storage/emulated/0/Android/data/com.ionicframework.hourglasssimple410460/cache/1428009011219.jpg;
(or something like that?)
view 1 “setup” - set settings that determine the rate of photo-taking (similar to timelapse)
view 2 “takePhotos” - open and close camera app when appropriate & ask user to take a photo
view 3 “selectPhotos” - display all of the images
that’s all I’m trying to do (for now). presently, everything works, except that none of the images are showing up as expected in view 3 .
relevant stuff here:
app.js
// Ionic Starter App
// angular.module is a global place for creating, registering and retrieving Angular modules
// 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)
// the 2nd parameter is an array of 'requires'
angular.module('starter', ['ionic', 'ngCordova', 'starter.services', 'myFactory'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
if(window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}
if(window.StatusBar) {
StatusBar.styleDefault();
}
});
})
.config(function($stateProvider, $urlRouterProvider, $compileProvider) {
// honestly not sure what this does. probably something to make sure that the image is legible angular
$compileProvider.imgSrcSanitizationWhitelist(/^\s*(https?|ftp|mailto|file|tel):/);
$stateProvider
// what the state is called
.state('takePhoto', {
// the url that can be accessed via href propertiess
url: '/takePhoto',
// the path to view the template html file
templateUrl: 'templates/takePhoto.html',
// the controller to be used in this view
controller: 'PhotoCtrl'
})
.state('setup', {
url: '/setup',
templateUrl: 'templates/setup.html',
controller: 'MainCtrl'
})
.state('selectPhoto', {
url: '/selectPhoto',
templateUrl: 'templates/selectPhoto.html',
controller: 'SelectCtrl'
})
$urlRouterProvider.otherwise('/setup')
// function($compileProvider){
// $compileProvider.imgSrcSanitizationWhitelist(/^\s*(https?|ftp|mailto|file|tel):/);
// }
})
// controller for the settings page
.controller('MainCtrl', function($scope, Camera, $localstorage) {
console.log("using the 'MainCtrl' controller");
// basically initializing them to 60 and 10, if the user has old settings
// it will remember them
$scope.durVal = $localstorage.get('durVal',60);
$scope.freqVal = $localstorage.get('freqVal',10);
$scope.setSettings = function(newDurVal, newFreqVal){
//clear local storage
localStorage.clear();
// This sets durVal and freqVal equal to the newDurVal and newFreqVal that we passed in
$localstorage.set('durVal',newDurVal);
$localstorage.set('freqVal',newFreqVal);
// This does two things, it defines our scope's durVal & freqVal based on what's in the local storage
// and if it doesn't find anything, it reverts to those default values
$scope.durVal = $localstorage.get('durVal',60);
$scope.freqVal = $localstorage.get('freqVal',10)
// log the inputs that are passed in
console.log('passed in DurVal ' + newDurVal);
console.log('passed in FreqVal ' + newFreqVal);
// log what we can read from the local storage
console.log('durVal ' + $localstorage.get('durVal','durVal undefined'));
console.log('freqVal '+ $localstorage.get('freqVal','freqVal undefined'));
};
})
//this is the controller for taking photos
.controller('PhotoCtrl', function(Camera, $scope, $localstorage, $timeout, $interval, $location) {
console.log("using the 'PhotoCtrl' controller");
$scope.durVal = $localstorage.get('durVal',60);
$scope.freqVal = $localstorage.get('freqVal',10);
//the amount of photos we want to take
$scope.photosCount = parseInt($scope.durVal / $scope.freqVal);
$localstorage.set('photosCount', $scope.photosCount);
//the amount of photos we have taken so far
$scope.photosTaken = 0;
// print them out for sanity
console.log('duration: ' + $scope.durVal);
console.log('frequency: ' + $scope.freqVal);
console.log('expecting x photos: ' + $scope.photosCount);
// ask user to take a photo every frequency * 60 seconds/ minute * 1000 millis/second
$interval( function(){ $scope.callAtInterval(); }, $scope.freqVal*60000);
$scope.callAtInterval = function() {
//if the amount of photos we've taken is less than the amount we are going to take
if( $scope.photosTaken < $scope.photosCount)
{
//console message to let me know that an interval occurred
//console.log("$scope.callAtInterval - Interval occurred");
//declare a variable, whose name is photoN where N = the photo number
//define this variable as equal to the number of photos taken (for now)
//$localstorage.set('photo' + $scope.photosTaken, $scope.photosTaken);
//get a photo, and pass it the name of the variable that we want to give the imageURI
$scope.getPhoto("photo" + $scope.photosTaken);
// log to see if the variable here is in fact what we expect it to be
//console.log("variable photo" + $scope.photosTaken + " is equal to " + $localstorage.get("photo" + $scope.photosTaken , 'undefined') );
// confirm that the variable has actually been changed
console.log("I think you've taken " + $scope.photosTaken + " photos" );
}
}
// every three seconds, call function
$timeout( function(){ $scope.callAtTimeout(); }, $scope.durVal*60000);
// this function doesn't do anything except for console.log
$scope.callAtTimeout = function() {
console.log("$scope.callAtInterval - Timeout occurred");
$location.url('/selectPhoto');
}
$scope.getPhoto = function(imageName) {
Camera.getPicture().then(function(imageURI) {
//set the name of the image (something like photo1) equal to whatever imageURI is
$localstorage.set(imageName,imageURI);
//print out the imageURI
console.log("saved: " + imageName + " = " + imageURI);
//register that we just took an image
$scope.photosTaken++;
}, function(err) {
console.err(err);
}, {
quality: 75,
targetWidth: 320,
targetHeight: 320,
saveToPhotoAlbum: false
});
};
})
//this is the controller for selecting photos
.controller('SelectCtrl', function($scope, Camera, $localstorage) {
$scope.durVal = $localstorage.get('durVal',60);
$scope.freqVal = $localstorage.get('freqVal',10);
$scope.photosCount = $localstorage.get('photosCount',10);
$scope.photo0 = $localstorage.get('photo0');
$scope.photo1 = $localstorage.get('photo1');
$scope.photo2 = $localstorage.get('photo2');
$scope.photo3 = $localstorage.get('photo3');
$scope.photo4 = $localstorage.get('photo4');
$scope.photo5 = $localstorage.get('photo5');
$scope.photo6 = $localstorage.get('photo6');
$scope.photo7 = $localstorage.get('photo7');
$scope.photo8 = $localstorage.get('photo8');
$scope.photo9 = $localstorage.get('photo9');
$scope.photo10 = $localstorage.get('photo10');
$scope.photo11 = $localstorage.get('photo11');
$scope.photo12 = $localstorage.get('photo12');
$scope.photo13 = $localstorage.get('photo13');
$scope.photo14 = $localstorage.get('photo14');
$scope.photo15 = $localstorage.get('photo15');
$scope.photo16 = $localstorage.get('photo16');
$scope.photo17 = $localstorage.get('photo17');
console.log($scope.photo0);
console.log($scope.photo1);
console.log($scope.photo2);
console.log($scope.photo3);
console.log($scope.photo4);
});
templates:
setup.html
<ion-view view-title="setup">
<ion-header-bar class="bar-stable">
<h1 class="title">setup</h1>
</ion-header-bar>
<ion-content>
<center>
<img src="img/hourglassSetup.svg" width = 300 id="hourglassSetup"></img>
</center>
<div class="list">
<div class="item range range-positive">
<i class="icon ion-clock"></i>
<p class="sideMenuLabel">duration</p>
<!-- for realsies duration-->
<!-- <input id = "duration" type="range" name="volume" min="30" max="120" value="{{durVal}}" step="{{freqVal}}" ng-model="durVal"> -->
<!-- for debugging, these values are much smaller than the above -->
<input id = "duration" type="range" name="volume" min="1" max="5" value="{{durVal}}" step="{{freqVal}}" ng-model="durVal">
<p id="sliderValue">{{durVal}} min</p>
</div>
<div class="item range range-positive">
<i class="icon ion-speedometer"></i>
<p class="sideMenuLabel">frequency</p>
<!-- for realsies frequency-->
<!-- <input id = "frequency" type="range" name="volume" min="2" max="15" value="{{freqVal}}" step="1" ng-model="freqVal"> -->
<!-- for debugging, these values are much smaller than the above -->
<input id = "frequency" type="range" name="volume" min=".1" max="5" value="{{freqVal}}" step=".1" ng-model="freqVal">
<p id="sliderValue">{{freqVal}} min</p>
</div>
<div class="item item-button-right">
<p>
<a class="button icon icon-right ion-chevron-right" ui-sref="takePhoto" ng-click="setSettings(durVal,freqVal)">start</a>
</p>
</div>
</div>
</ion-content>
</ion-view>
takePhoto:
<!-- This is the template for taking a photo -->
<ion-view title="takePhoto">
<ion-header-bar class="bar-stable">
<h1 class="title">Photo</h1>
</ion-header-bar>
<ion-content padding="true">
<center>
<img height=270 src="img/glassGIF2.gif" style="position: absolute; top: 30px;"/>
<img src="img/glassGIF.gif" style="position: relative; top: 0; left: 0;"/>
<p ng-model="photosTaken">{{photosTaken}}</p><p ng-model="photosCount">/ {{photosCount}}</p>
</center>
</ion-content>
</ion-view>
selectPhoto.html:
<!-- This is the template for selecting a photo to tweet-->
<ion-view title="selectPhoto">
<ion-header-bar class="bar-stable">
<h1 class="title">image selection</h1>
</ion-header-bar>
<ion-content padding="true">
<p>image selection happens here</p>
<img class="choosePhoto" id="photo0" ng-src="{{photo0}}"></img>
<img class="choosePhoto" id="photo1" ng-src="{{photo1}}"></img>
<img class="choosePhoto" id="photo2" ng-src="{{photo2}}"></img>
<img class="choosePhoto" id="photo3" ng-src="{{photo3}}"></img>
<img class="choosePhoto" id="photo4" ng-src="{{photo4}}"></img>
<img class="choosePhoto" id="photo5" ng-src="{{photo5}}"></img>
<img class="choosePhoto" id="photo6" ng-src="{{photo6}}"></img>
<img class="choosePhoto" id="photo7" ng-src="{{photo7}}"></img>
<img class="choosePhoto" id="photo8" ng-src="{{photo8}}"></img>
<img class="choosePhoto" id="photo9" ng-src="{{photo9}}"></img>
<img class="choosePhoto" id="photo10" ng-src="{{photo10}}"></img>
<img class="choosePhoto" id="photo11" ng-src="{{photo11}}"></img>
<img class="choosePhoto" id="photo12" ng-src="{{photo12}}"></img>
<img class="choosePhoto" id="photo13" ng-src="{{photo13}}"></img>
<img class="choosePhoto" id="photo14" ng-src="{{photo14}}"></img>
<img class="choosePhoto" id="photo15" ng-src="{{photo15}}"></img>
<img class="choosePhoto" id="photo16" ng-src="{{photo16}}"></img>
<img class="choosePhoto" id="photo17" ng-src="{{photo17}}"></img>
</ion-content>
</ion-view>
here’s what my logs look like:
0 947082 log using the 'MainCtrl' controller
1 950497 log passed in DurVal 1.6
2 950498 log passed in FreqVal 0.3
3 950498 log durVal 1.6
4 950499 log freqVal 0.3
5 950555 log using the 'PhotoCtrl' controller
6 950557 log duration: 1.6
7 950558 log frequency: 0.3
8 950559 log expecting x photos: 5
9 968660 log I think you've taken 0 photos
10 978424 log saved: photo0 = file:///storage/emulated/0/Android/data/com.ionicframework.hourglasssimple410460/cache/1428008977682.jpg
11 986584 log I think you've taken 1 photos
12 994487 log saved: photo1 = file:///storage/emulated/0/Android/data/com.ionicframework.hourglasssimple410460/cache/1428008993708.jpg
13 004582 log I think you've taken 2 photos
14 011970 log saved: photo2 = file:///storage/emulated/0/Android/data/com.ionicframework.hourglasssimple410460/cache/1428009011219.jpg
