Once opening profile page, I ran a Cloud.Users.showMe function. In this function I put this in
var upperppicview = Ti.UI.createImageView({
image:'user.photo.urls.original',
width: '70%',
top: '10%',
height: '80%',
borderRadius: 5,
left: '5%'
});
upperpview.add(upperppicview);
The view is there but not showing the image of the user, I have already uploaded the photo on arrowdb and passed the User(photo_id) the photo.id of the created photo.
The photo was uploaded, it seemed to be attached backend as the user had an image attached but was not showing the particular image(as seen in the attachment below).
How do I show the image as I need to also do this for events.
arrowdb
You put a string into your createImageView function.
Try this instead
var upperppicview = Ti.UI.createImageView({
image:user.photo.urls.original,
width: '70%',
top: '10%',
height: '80%',
borderRadius: 5,
left: '5%'
});
upperpview.add(upperppicview);
In your given code, image property value should be image location. It would be local or remote URL.
When you assign like image:'user.photo.urls.original' then image property value is string which is not local image or remote image locations that why its not working.
If you want to display from ACS server its store in user variable.
user is object so you need to set like image:user.photo.urls.original not image:'user.photo.urls.original'
Here is final code for image display in your apps will be
var upperppicview = Ti.UI.createImageView({
image:user.photo.urls.original,
width: '70%',
top: '10%',
height: '80%',
borderRadius: 5,
left: '5%'
});
upperpview.add(upperppicview);
For more details please visit following link:
https://docs.appcelerator.com/platform/latest/#!/api/Titanium.UI.ImageView-property-image
https://docs.appcelerator.com/arrowdb/latest/#!/api/Users-property-photo
Thanks
Related
I m creating a PDF file in nodejs using PDFkit, that contains a background image and an profile image of user. I tried looking through the documentation of pdfkit, but could not find any parameter to make another image float over the previous one.
Is there any solution present to make that happen or do I need to switch to other packages?
Any help would be appreciated.
//Background Image
doc.image(__dirname+'../../../resources/images/' + 'background.jpg',
{
height:400,
width:600,
margin: 0,
padding:0
});
//Image to be floated
doc.image(body,
{
height:200,
width:200,
margin: 0,
padding:0,
absolutePosition: {x: 50, y: 100}
}).moveTo(100, 150);
I expect a image over background but pdfkit is making new image to be pushed down the orignal image.
Can see this was asked a long time ago, but it is definitely doable today. Try this example.
let defaultImageOptions = {
width: 200,
height: 300,
};
// Add background image
doc.image("bg_image.png", 0, 0, defaultImageOptions);
doc.image("front_image.png", 0, 0, defaultImageOptions);
According to the docs, the react native's Image component support the following resizeModes:
'cover', 'contain', 'stretch', 'repeat', 'center'
If the image is larger then the Image component, the center mode fits the image in the Image in the component by uniformly scaling the image such that the center point of the image is in center of the Image component.
I would like to know if there is a hack or a solution in which we can define a custom point (say 0,300) as a focus point such that it is the center of the Image view.
What I want to achieve is somewhat like focus crop in fresco, but should also work for IOS.
I think you need to handle like this
const CroppedImage = React.createClass({
render() {
return (
<View
style={[
{
overflow: 'hidden',
height: this.props.cropHeight,
width: this.props.cropWidth,
backgroundColor: 'transparent'
},
this.props.style
]}
>
<Image
style={{
position: 'absolute',
top: this.props.cropTop * -1,
left: this.props.cropLeft * -1,
width: this.props.width,
height: this.props.height
}}
source={this.props.source}
resizeMode={this.props.resizeMode}
>
{this.props.children}
</Image>
</View>
);
}
});
Look at this example
Link
React-Native has a built-in API to handle image cropping, ImageEditor. It makes image cropping fairly simple. See the function below for an example.
The inputted image takes the form of a URI. The image is cropped, and a URI pointing to a cropped image is provided (the image is housed via React-Native's ImageStore API). Subsequently use this URI to display the cropped image as you wish.
// Make sure you import ImageEditor from react-native!
async cropImage(){
// Construct a crop data object.
cropData = {
offset:{x:0,y:0},
size:{width:20, height:20},
// displaySize:{width:20, height:20}, THESE 2 ARE OPTIONAL.
// resizeMode:'contain',
}
// Crop the image.
try{
await ImageEditor.cropImage(uri,
cropData, (successURI) => {Something awesome with successURI!},
(error) =>{console.log('cropImage,',error)}
)
}
catch(error){
console.log('Error caught in this.cropImage:', error)
}
}
// End of function.
My original size of the canvas is 800X700.
I am using clipTo to work in a selected portion of a canvas:
var rect = new fabric.Rect({
left: 100,
top: 50,
fill: '#fff',
width: 376,
height: 602,
strokeWidth: 0,
selectable: false
});
rect.set({
clipFor: 'mainCanvas',
});
I make sure all the images and text fall within this portion of the canvas.
What I want to Do:
I want to scale up this portion of canvas to a width and height of 1500X2400 so that it can be used for printing
I am using the below toDataURL function with multiplier as 3
var imgData= canvas.toDataURL({
format: 'png',
width: 376,
height: 602,
top: 50,
left: 100,
multiplier: 3
});
But I am getting only top most portion of the image. Any solution?
Update: More info about the problem
I am using Ubuntu 16.04 and Fabric.js-1.6.2
Demonstrating the problem on JsFiddle
When I click on the enhance image button, only the top left portion of the image is displayed.
I am working on titanium and creating view from controller. I have four fields and i need to set values with their IDs. Please check following code
var row = Ti.UI.createTableViewRow();
var first_name = Ti.UI.createTextField({
borderStyle: Ti.UI.INPUT_BORDERSTYLE_ROUNDED,
color: 'black',
top: 10,
left: 10,
width: 250,
height: 60,
id:'first_name',
//value:data.first_name
});
row.add(first_name);
var tbl_data=[];
tbl_data.push(row);
var tbl= Ti.UI.createTableView({
data:tbl_data
});
$.home_view.add(tbl);
The id:'first_name' does not seem to work and i have not found any example where an ID is being assigned to any UI element. Please guide
You can't set ID. But there are 2 options
1: Don't make an input in the controller, but make it a separate controller instead (see my blogpost on reusable components)
2: Just set it like this:
$.first_name = Ti.UI.createTextField({
borderStyle: Ti.UI.INPUT_BORDERSTYLE_ROUNDED,
color: 'black',
top: 10,
left: 10,
width: 250,
height: 60
});
Then you can reference it later, like this: $.first_name.value;
You can also set a custom property to the create function (any property works fine) and identify it with that using events. Like this:
var field = Ti.UI.createTextField({
borderStyle: Ti.UI.INPUT_BORDERSTYLE_ROUNDED,
color: 'black',
top: 10,
left: 10,
width: 250,
height: 60,
textFieldId: 'first_name'
});
field.addEventListener('blur',function(e){
var id = e.source.textFieldId;
});
Hello I'm new to titanium studio I'm reading the docs 2 days now and trying to make a simple slide animation or even any animation of any kind except opening a modal window. but I can't make it work.Here is what I was trying now but fails:
var slide_it_left = Titanium.UI.createAnimation();
slide_it_left.left = 500;
slide_it_left.duration = 500;
var mainWinOpts = {
backgroundColor:'#fff',
fullscreen:true,
navBarHidden: true
}
var animWinOpts = {
navBarHidden: true,
backgroundColor:'#000',
top:0,
left:0,
width: Ti.Platform.displayCaps.platformWidth,
height: Ti.Platform.displayCaps.platformHeight,
fullscreen:false,
animated:true
}
var mainWin = Ti.UI.createWindow(mainWinOpts);
var animWin = Ti.UI.createWindow(animWinOpts);
var labelOpts = {
text: 'click me!',
textAlign: Ti.UI.TEXT_ALIGNMENT_CENTER,
font: {
fontFamily: 'monospace',
fontSize: 24
},
borderWidth: 1,
color: '#2e2e2e',
borderColor: '#2e2e2e',
backgroundColor: '#dedede',
top: 50,
left: 50,
width: Ti.Platform.displayCaps.platformWidth,
height: Ti.Platform.displayCaps.platformHeight,
opacity: 1.00,
width: Ti.UI.SIZE,
height: Ti.UI.SIZE
};
var label = Ti.UI.createLabel(labelOpts);
label.addEventListener('click',function(){
animWin.open(slide_it_left);
})
mainWin.add(label);
mainWin.open();
This among other snippets I tried from their docs - forums isn't working.
Could someone please provide me some working samples or references for android window or view animation. Or point out what I'm doing wrong. Thank you in advance.
Please try changing your code to the following:
label.addEventListener('click',function(){
animWin.open();
animWin.animate(slide_it_left);
});
You cannot use the animation object as a parameter for open().
Have a look at the valid params here.
Moreover, the docs give an example for sliding in a window on Android, which is very likely what you are trying to achieve:
var win2 = Ti.UI.createWindow({fullscreen:false});
win2.open({
activityEnterAnimation: Ti.Android.R.anim.slide_in_left,
activityExitAnimation: Ti.Android.R.anim.slide_out_right
});
You can find the animations for the Android platform here.