ngColorThief
ngColorThief copied to clipboard
ianmurrays
Problems with Ionic Framework
Sorry, I am a bit newbisch and trying to implement ngColorThief in a Ionic project. I am adding
app.config(function ($colorThiefProvider) {
// Set the default quality
$colorThiefProvider.setDefaultQuality(50);
// Set the default palette color count
$colorThiefProvider.setDefaultColorCount(4);
// Set wether to return arrays (ColorThief's default) or
// objects like {r: 242, g: 124, b: 91} (false by default).
$colorThiefProvider.setReturnObjects(true);
});
in my app.js file. So far so good, but when I am adding this to my controllers.js I am getting only errors:
app.controller('MyCtrl', function ($colorThief) {
var image = /*...*/;
var dominant = $colorThief.getColor(image);
var palette = $colorThief.getPalette(image);
});
Sorry for my ignorance but what is this:
var image = /*...*/;
Would it be possible to provide a short but complete example?
Thanks!
What errors are you getting? You're supposed to pass an Image object to colorThief if that's of any help.
Thanks for the quick reply! Here is the beginning of my log:
Error: [$injector:modulerr] Failed to instantiate module starter due to:
[$injector:modulerr] Failed to instantiate module starter.controllers due to:
[$injector:modulerr] Failed to instantiate module ngColorThief due to:
Can't find variable: ColorThief
file:///Users/Home/Desktop/ionic/barebone_master/www/js/angular-colorthief.min.js:1:90
[native code]
This is my 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'
// 'starter.controllers' is found in controllers.js
angular.module('starter', ['ionic', 'starter.controllers'])
.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);
cordova.plugins.Keyboard.disableScroll(true);
}
if (window.StatusBar) {
// org.apache.cordova.statusbar required
StatusBar.styleDefault();
}
});
})
.config(function($stateProvider, $urlRouterProvider, $colorThiefProvider) {
$colorThiefProvider.setDefaultQuality(50);
// Set the default palette color count
$colorThiefProvider.setDefaultColorCount(4);
// Set wether to return arrays (ColorThief's default) or
// objects like {r: 242, g: 124, b: 91} (false by default).
$colorThiefProvider.setReturnObjects(true);
$stateProvider
.state('app', {
url: '/app',
abstract: true,
templateUrl: 'templates/menu.html',
controller: 'AppCtrl'
})
.state('app.search', {
url: '/search',
views: {
'menuContent': {
templateUrl: 'templates/search.html'
}
}
})
.state('app.browse', {
url: '/browse',
views: {
'menuContent': {
templateUrl: 'templates/browse.html'
}
}
})
.state('app.playlists', {
url: '/playlists',
views: {
'menuContent': {
templateUrl: 'templates/playlists.html',
controller: 'masterCtrl'
}
}
})
.state('app.single', {
url: '/playlists/:requestId',
views: {
'menuContent': {
templateUrl: 'templates/playlist.html',
controller: 'detailsCtrl'
}
}
});
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/app/playlists');
});
This is my controller.js:
angular.module('starter.controllers', ['ngColorThief'])
.controller('AppCtrl', function($scope, $ionicModal, $timeout) {
// With the new view caching in Ionic, Controllers are only called
// when they are recreated or on app start, instead of every page change.
// To listen for when this page is active (for example, to refresh data),
// listen for the $ionicView.enter event:
//$scope.$on('$ionicView.enter', function(e) {
//});
// Form data for the login modal
$scope.loginData = {};
// Create the login modal that we will use later
$ionicModal.fromTemplateUrl('templates/login.html', {
scope: $scope
}).then(function(modal) {
$scope.modal = modal;
});
// Triggered in the login modal to close it
$scope.closeLogin = function() {
$scope.modal.hide();
};
// Open the login modal
$scope.login = function() {
$scope.modal.show();
};
// Perform the login action when the user submits the login form
$scope.doLogin = function() {
console.log('Doing login', $scope.loginData);
// Simulate a login delay. Remove this and replace with your login
// code if using a login system
$timeout(function() {
$scope.closeLogin();
}, 1000);
};
})
.controller('PlaylistsCtrl', function($scope) {
$scope.playlists = [
{ title: 'Reggae', id: 1 },
{ title: 'Chill', id: 2 },
{ title: 'Dubstep', id: 3 },
{ title: 'Indie', id: 4 },
{ title: 'Rap', id: 5 },
{ title: 'Cowbell', id: 6 }
];
})
.controller('PlaylistCtrl', function($scope, $stateParams) {
})
.factory('RequestService', function($http) {
var requests = [];
return {
getRequests: function(){
return $http.get("http://vimeo.com/api/v2/user11774916/videos.json").then(function(response){
requests = response.data;
console.log(requests);
return requests;
});
},
getRequest: function(id){
for(i=0;i<requests.length;i++){
if(requests[i].id == id){
return requests[i];
}
}
}
}
})
.controller('masterCtrl', function($q, $scope, RequestService, $colorThief) {
RequestService.getRequests().then(function(data){
$scope.requests = data;
console.log($scope.requests);
var image = request.thumbnail_medium;
var dominant = $colorThief.getColor(image);
var palette = $colorThief.getPalette(image);
})
})
.controller('detailsCtrl', function($scope, $stateParams, RequestService, $sce, $httpParamSerializer) {
$scope.request = RequestService.getRequest($stateParams.requestId);
$scope.frameSrc = $sce.trustAsResourceUrl(
'http://player.vimeo.com/video/' + $stateParams.requestId + '?portrait=0&title=0&byline=0&portrait=0&badge=0' + $httpParamSerializer($scope.properties)
);
});
/*.controller('materializeCtrl', function($scope, $stateParams) {
$('.modal-trigger').leanModal();
})*/
This is my template:
<ion-view view-title="Playlists">
<ion-content>
<ion-list>
<div class="container" ng-style="{'background-color': 'rgb('+colors.dominantColor[0]+', '+colors.dominantColor[1]+', '+colors.dominantColor[2]+')'}">
<img ng-src="{{myImage}}" color-thief color-thief-dominant="colors.myDominantColor">
</div>
<ion-item class="item item-thumbnail-left" ng-repeat="request in requests" href="#/app/playlists/{{request.id}}">
<img src="{{request.thumbnail_medium}}">
<h2>{{request.title}}</h2>
<p>Von: {{request.user_name}}</p>
</ion-item>
</ion-list>
</ion-content>
</ion-view>
The error you're getting is because you haven't included the ColorThief library itself, which ngColorThief depends on.