I'm using two types of cordova plugin to store image into gallery and make retrieve it back.
File: https://github.com/apache/cordova-plugin-file
Camera: https://github.com/apache/cordova-plugin-camera
My project based on backbone.js. But the problem is, I got this weird problem last week. The image still can't appear on the next page after I click button. I got 2 pages, first page to store image into gallery after I capture picture using camera cordova plugin. Below is my code
page 1
javascript
function onPhotoURISuccess(imageURI) {
var largeImage = document.getElementById('image');
largeImage.style.display = 'block';
largeImage.src = imageURI;
localStorage.imageUrl = imageURI;
}
html
<button onclick="getPhoto(pictureSource.PHOTOLIBRARY);">From Photo
Library</button> <img id="image" name="image" src="" style=
"display:none;width:100%;" />
Then I want to retrieve back my image in my gallery using imageURI that I store into localStorage.imageUrl. I testing using hard corded imageURI, retrieve using console.log.
file:///var/mobile/Applications/0CD4797D-0852-4C3A-BC25-C35642799E9E/tmp/cdv_photo_048.jpg
page 2
html
<img id="image" name="image" src="file:///var/mobile/Applications/0CD4797D-0852-4C3A-BC25-C35642799E9E/tmp/cdv_photo_048.jpg" style="display:none;width:100%;" />
It didn't working.
So, I try inject imageURI into my view page (page 2) in programmatic way. I create a model and collection for imageURI so i can render it into my second page.
model
define(['underscore', 'backbone'], function(_, Backbone) {
var linkModel = Backbone.Model.extend({
defaults:{
imageUrl: localStorage.imageUrl
}
});
return linkModel;
});
collection
define(['underscore', 'backbone', 'model/link/linkModel'], function(_, Backbone, linkModel) {
var linkCollection = Backbone.Collection.extend({
model: linkModel
});
return linkCollection;
});
view
define(['jquery', 'underscore', 'backbone', 'model/link/linkCollection', 'text!modules/link/linkConfirmViewTemplate.html'], function($, _, Backbone, linkCollection, linkConfirmViewTemplate) {
var LinkConfirmView = Backbone.View.extend({
render: function() {
var variables = {
imageUrl: localStorage.imageUrl
};
var compiledTemplate = _.template(linkConfirmViewTemplate, variables);
this.$el.html(compiledTemplate);
}
});
return LinkConfirmView;
});
<img id="image" name="image" src="<%= imageUrl %>" style="display:none;width:100%;" />
I follow this site but still not working.
http://backbonetutorials.com/organizing-backbone-using-modules/
I already doing some research for this issue in stakeoverflow, still same.
http://docs.phonegap.com/en/3.0.0/cordova_camera_camera.md.html
Phonegap - Choose Image From Gallery
Yes, I remove display:none on my html.
<img id="image" name="image" src="" style=
"display:none;width:100%;" />
to
<img id="image" name="image" src="" style="width:100%;" />
Related
I am working on an Ionic project with the api from the Movie Database. I have this array in an ng-repeat that shows me some images (cast pictures). But not all the images in the array have an actual picture.
Now I am trying to show a default image when the api does not provide an image. My question is how to do this with ng-if i suppose. In my controller I created a scope as followed:
$scope.default_image = '../img/default_poster.png';
Part of my controller:
.controller('MovieDetailCtrl', function($scope, $stateParams, $ionicLoading, MovieService) {
$ionicLoading.show({template: 'Loading ...'});
$scope.init = function(){
MovieService.getCastCrewInfo($stateParams.id).then(function(data){
$scope.casts = MovieService.castMovie;
$scope.default_image = '../img/default_poster.png';
});
$ionicLoading.hide();
}
})
Part of my HTML code:
<div class="content-cast">
<!-- <h3>Cast</h3> -->
<br>
<hscroller>
<ion-scroll direction="x" scrollbar-x="false" >
<hcard ng-repeat="cast in casts" >
<img ng-src="http://image.tmdb.org/t/p/w154/{{cast.profile_path}} || default_image" >
<p class="cast-name">{{cast.name}}</p>
</hcard>
</ion-scroll>
</hscroller>
</div>
Either use a scope function or ng-if
$scope.getImage = function(item){
return item.profile_path ? 'http://image.tmdb.org/t/p/w154/' + item.profile_path : $scope.default_image;
});
View
<img ng-src="{{getImage(cast)}}" >
For ng-if
<img ng-if="cast.profile_path" ng-src="http://image.tmdb.org/t/p/w154/{{cast.profile_path}}">
<img ng-if="!cast.profile_path" ng-src="{{default_image}}">
I'm trying to add the wysiwyg nicEdit text editor to my text areas. When I goto the actual templateUrl the textbox and tool bar do work but they do not submit correctly (to my firebase db). When I goto the page that is to render the template I am unable to get get nicEdit toolbar features and just get a regular text area box. I'm using angularjs and have the templateurl as addPost.html.
So again the template does render when I goto #/addPost but not with the working nicEdit features, yet going directly to the template url addPost.html does have the nicEdit features working but then won't submit to my firebase db. Anyone have an idea on why this is so? Thanks.
Template file addPost.html:
<head>
<script type="text/javascript" language="javascript" src="../nicEdit.js"></script>
<script type="text/javascript" language="javascript">
bkLib.onDomLoaded(nicEditors.allTextAreas);
</script>
<!-- Bootstrap core CSS -->
<link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet">
<nav class="blog-nav">
<a class="blog-nav-item " href="#/welcome">Home</a>
<a class="blog-nav-item active" href="#/addPost">Add Post</a>
<a class="blog-nav-item " style="cursor:pointer;" ng-click="logout();">Logout</a>
</nav>
</head>
<body ng-controller="AddPostCtrl">
<div class="container" >
<form class="form-horizontal" ng-submit="AddPost()">
<fieldset>
<!-- Form Name -->
<legend>Create Post</legend>
<!-- Textarea -->
<div class="form-group">
<label class="col-md-4 control-label" for="txtPost">Post</label>
<div class="col-md-4">
<textarea class="form-control" id="txtPost" ng-model="article.post" name="txtPost" ></textarea>
</div>
</div>
</fieldset>
</form>
</div><!-- /.container -->
</body>
addPost.js
'use strict';
angular.module('myApp.addPost', ['ngRoute'])
.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/addPost', {
templateUrl: 'addPost/addPost.html',
controller: 'AddPostCtrl'
});
}])
.controller('AddPostCtrl', ['$scope','$firebase','$location','CommonProp',function($scope,$firebase, $location,CommonProp) {
if(!CommonProp.getUser()){
$location.path('/main');
}
$scope.logout = function(){
CommonProp.logoutUser();
}
$scope.AddPost = function(){
var title = $scope.article.title;
var date = $scope.article.date;
var post = $scope.article.post;
var firebaseObj = new Firebase("http://..");
var fb = $firebase(firebaseObj);
fb.$push({ title: title, date: date, post: post,emailId: CommonProp.getUser() }).then(function(ref) {
console.log(ref);
$location.path('/welcome');
}, function(error) {
console.log("Error:", error);
});
}
}]);
Going to #addPost shows the template with out nicEdit working
But going to the actual templateUrl addPost.html it works fine, minus not being able to submit
The problem has to do with trying to run scripts Angular html partials. The simple solution is to move the scripts you need to the head of your main index file, outside of ng-view, though it does seem (according to other stackoverflow posts) technically possibly to try to get these scripts to execute:
"AngularJS: How to make angular load script inside ng-include?"
https://stackoverflow.com/a/19715343/1078450
(Also, you have html in your head file that is not likely to be rendered: <nav class="blog-nav">)
Well, I have had the same problem, with initialisation of NicEdit in templates.
First I used onDomLoaded() else, but it's better to wait for the document. With jQuery I use document.ready.
Take a look here, pure JavaScript equivalent to jQuery's $.ready() how to call a function when the page/dom is ready for it
The problem is to tell NicEditor the new textarea.
Here a code sample to do this in jQuery.
var idnr = 0;
var NicEditor = new nicEditor();
$('#add').click(function(){
var $clone = $('#dummy').clone();
var id = 't_' + idnr;
idnr = idnr + 1;
$clone.attr('id',id).attr('name',id).removeClass('dummy');
$('#wrapper').append($clone);
NicEditor.panelInstance(id);
$(nicEditors.findEditor(id).elm).focus();
});
And here is a working Example of dynamic NicEdit use.
THE SITUATION:
I need to display a Twitter timeline in my Ionic app. Just that. No further action is needed (login, retweet etc..)
ATTEMPT 1 - SIMPLE EMBED (as in a normal website)
In the view:
<a class="twitter-timeline" href="https://twitter.com/MY_TWITTER" data-widget-id="TWITTER_WIDGET_ID">Tweets by #MY_TWITTER</a>
The script in index.html:
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
Is not working. Testing the actual app in the phone, is not showing up. Testing the app in the browser it appears only after refreshing the page.
Bu if i put that same lines of code into a simple angular web app (not a Ionic app) than it works fine.
Why there is this strange behavior? Is ionic related?
ATTEMPT 2 - NGTWITTER
This is the code as explained in this tutorial: http://devdactic.com/twitter-rest-api-angularjs/
The controller:
.controller('TwitterCtrl', function($scope, $ionicPlatform, $twitterApi, $cordovaOauth) {
var twitterKey = 'STORAGE.TWITTER.KEY';
var clientId = 'MY_CLIENT_ID';
var clientSecret = 'MY_CLIENT_SECRET';
var myToken = '';
$scope.tweet = {};
$ionicPlatform.ready(function() {
myToken = JSON.parse(window.localStorage.getItem(twitterKey));
if (myToken === '' || myToken === null) {
$cordovaOauth.twitter(clientId, clientSecret).then(function (succ) {
myToken = succ;
window.localStorage.setItem(twitterKey, JSON.stringify(succ));
$twitterApi.configure(clientId, clientSecret, succ);
$scope.showHomeTimeline();
}, function(error) {
console.log(error);
});
} else {
$twitterApi.configure(clientId, clientSecret, myToken);
$scope.showHomeTimeline();
}
});
$scope.showHomeTimeline = function() {
$twitterApi.getUserTimeline({screen_name: 'MY_TWITTER_FEED'}).then(function(data) {
$scope.home_timeline = data;
});
};
$scope.submitTweet = function() {
$twitterApi.postStatusUpdate($scope.tweet.message).then(function(result) {
$scope.showHomeTimeline();
});
};
$scope.doRefresh = function() {
$scope.showHomeTimeline();
$scope.$broadcast('scroll.refreshComplete');
};
$scope.correctTimestring = function(string) {
return new Date(Date.parse(string));
};
});
The view:
<div class="list">
<div class="item item-input-inset">
<label class="item-input-wrapper">
<input type="text" placeholder="My tweet..." ng-model="tweet.message" ng-maxlength="140">
</label>
<button class="button button-small" ng-click="submitTweet()">
Tweet
</button>
</div>
</div>
<ion-refresher on-refresh="doRefresh()"></ion-refresher>
<div ng-show="home_timeline.length == 0">Loading tweets...</div>
<div ng-repeat="entry in home_timeline" class="list card">
<div class="item item-avatar">
<img ng-src="{{entry.user.profile_image_url}}"/>
<h2>{{entry.user.name}}</h2>
<p>{{correctTimestring(entry.created_at) | date:'medium'}}</p>
</div>
<div class="item item-body">
<p ng-bind-html="entry.text"></p>
<img ng-if="entry.extended_entities" ng-src="{{ entry.extended_entities.media[0].media_url }}" style="width: 100%;"/>
</div>
</div>
In this way i can properly see the twitter feed requested plus the possibility to write tweets.
Is not exactly what i want, because it requires the user to login into Twitter and allow the app to be granted access to his twitter account, while i just want to display a twitter feed and nothing more.
Besides, once the twitter section of the app is opened the app is not working anymore as excepted, some links in the menu stop to work.
THE QUESTION:
How can i simply display a twitter timeline inside a Ionic app?
Thank you!
I uploaded a sample project in git hub for Twitter Login in Ionic framework if you have any queries please let me know
Before cloning the project follow these step's :
1)Create a developer project in Twitter Developer console
2)Replace the APPID and APPSECRET in project with your values created in twitter developer console
3)Please write the call back url in twitter developer application as http://tinyurl.com/krmpchb
4)Have a look at README.md file in github
I'm new to angularjs and I need to display an image when a thumbnail is clicked.
I wanted to display its Preview picture. It will be fetched on my database.
My Database table on mysql goes something like this:
Materials:{
[name:'material1',
thumbnail:'thumbnail1',
preview:'preview1'],
[name:'material2',
thumbnail:'thumbnail2',
preview:'preview2']
}
I'm also using Laravel as my backend framework. The list of materials are now Displaying but when I clicked on the thumbnail the preview image didn't appear. Is there any way i can fix this?
var imageCtrl = function($scope, $http) {
$scope.materials = [];
$scope.init = function(){
$http.get('api/materials').
success(function(data, status, headers, config){
$scope.materials = data;
});
}
$scope.loadimage = function() {
$scope.image.path = $scope.materials.preview;
}
};
app.controller('imageCtrl', imageCtrl);
<div ng-controller="imageCtrl">
<ul>
<li ng-repeat='material in materials'>
<div>#{{material.name}}</div>
<img ng-src="#{{material.thumbnail}}" alt="" ng-click="loadimage()>
</li>
</ul>
<img ng-src="#{{image.path}}" alt="">
</div>
On your html page, pass current material object to loadImage function.
<div ng-controller="imageCtrl">
<ul>
<li ng-repeat='material in materials'>
<div>{{material.name}}</div>
<img ng-src="{{material.thumbnail}}" ng-click="loadimage(material)>
</li>
</ul>
<img ng-src="{{image.path}}" alt="">
</div>
and then from inside controller, update image object.
$scope.loadimage = function(material) {
$scope.image.path = $scope.material.preview;
}
I want to Upload image file before upload i want to show preview of image, but i found issue like i am trying to upload image it is changing only in first grid view.
i want
If someone can point me in the right direction, than would be great! Thanks!
I am using Code like this:
$(function () {
$(":file").change(function () {
if (this.files && this.files[0]) {
var reader = new FileReader();
reader.onload = imageIsLoaded;
reader.readAsDataURL(this.files[0]);
}
});
});
function imageIsLoaded(e) {
$('#myImg').attr('src', e.target.result);
};
<div ng-repeat 1 to 4>
<div class="col-md-4 col-4-custom">
<img id="myImg" src="http://imagepath" width=600px height=250px class="img-full" alt="Image not found" >
</div>
<label type='file' for="file-input1" id="file-input1" ng-file-select ng-model="files">
</div>