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.
Related
I am using the [lightweight-charts] javascript library to generate some charts. For this example I am using the Realtime emulation chart.
In this example the background color is white. I would like to set the background color to black. I am following the documentation but I can't achieve the goal.
Following is the code I am using but it is not working:
var chart = LightweightCharts.createChart(document.getElementById('chart'), {
width: 1200,
height: 800,
background: '#000000',
textColor: '#ffffff'
});
var candleSeries = chart.addCandlestickSeries();
var data = [...]
What am I missing?
You'll need to wrap both background & textColor within a layout property like
var chart = LightweightCharts.createChart(document.getElementById('chart'), {
width: 1200,
height: 800,
layout: {
background: {
color: '#000000'
},
textColor: '#ffffff'
}
});
as seen in this doc
I'm trying to create a function that pastes an image from the user's clipboard to the canvas as a new fabric.Image(). Any search result I find either describes cloning objects already on the canvas or pasting IText data. This SO question is related to what I'm asking about, but it's 4 years old and the function in the top answer doesn't work:
How to do Copy and paste the image from User system to Canvas using fabric.js
Here's the code I'm currently trying to use. I'm trying to set up a paste function I can call later:
var $wrapper = $('#content'),
canvas = new fabric.Canvas('canvas', {
width: 400,
height: 550
}),
pasteImage = function (e) {
var items=e.originalEvent.clipboardData.items;
e.preventDefault();
e.stopPropagation();
// Fabric.js image function
function canvasImage(url) {
var img = new fabric.Image(url);
img.scale(0.75).center().setCoords();
canvas.add(img).renderAll();
}
//Loop through files
for(var i=0;i<items.length;i++){
var file = items.items[i],
type = file.type;
if (type.indexOf("image")!=-1) {
var imageData = file.getAsFile();
var imageURL=window.webkitURL.createObjectURL(imageData);
canvasImage(imageURL);
}
}
};
$wrapper.on('paste', pasteImage);
Here's a fiddle to see it in action (or inaction, I guess). This will eventually be part of a Photoshop plugin, so thankfully I only need to worry about this working in Chrome.
I couldn't get your paste event handler to trigger, because i'm not sure if div can natively take the past event unless you make it a contenteditable div, which in your use case i doubt you want to do.
I just recently implemented this in an app of my own, but i wasn't using fabric, just native canvas and js.
You're going to have to rework your code, but try changing
$wrapper.on('paste', pasteImage);
to
$(window).on('paste', pasteImage);
Regardless, I tinkered with your current code, and this is what I got to work, albeit it might not have your settings being triggered completely, but it is pasting the image in:
(function() {
var $wrapper = $('#content'),
canvas = new fabric.Canvas('canvas', {
width: 400,
height: 550
}),
txtStyles = {
top: 100,
left: 200,
padding: 6,
fill: '#d6d6d6',
fontFamily: 'sans-serif',
fontSize: '24',
originY: 'center',
originX: 'center',
borderColor: '#d6d6d6',
cornerColor: '#d6d6d6',
cornerSize: 5,
cornerStyle: 'circle',
transparentCorners: false,
lockUniScaling: true
},
imgAttrs = {
left: 200,
top: 200,
originY: 'center',
originX: 'center',
borderColor: '#d6d6d6',
cornerColor: '#d6d6d6',
cornerSize: 5,
cornerStyle: 'circle',
transparentCorners: false,
lockUniScaling: true
},
introTxt = new fabric.Text('Paste images here', txtStyles),
pasteImage = function (e) {
var items=e.originalEvent.clipboardData.items;
e.preventDefault();
e.stopPropagation();
//Loop through files
for(var i=0;i<items.length;i++){
if (items[i].type.indexOf('image')== -1) continue;
var file = items[i],
type = items[i].type;
var imageData = file.getAsFile();
var URLobj = window.URL || window.webkitURL;
var img = new Image();
img.src = URLobj.createObjectURL(imageData);
fabric.Image.fromURL(img.src, function(img){
canvas.add(img);
});
}
},
//Canvas starter text
introCanvas = function() {
canvas.add(introTxt);
};
introCanvas();
$(window).on('paste', pasteImage);
})();
fiddlers: https://jsfiddle.net/c0kw5dbu/3/
I'm using Appcelerator for developing for Android devices. Since I need to draw some lines, I downloaded and install "com.wwl.canvas" module on my project. When I do try the app.js example on my project, everything is working... anyway when I write this code:
var Canvas = require('com.wwl.canvas');
var canvas = Canvas.createCanvasView({
backgroundColor: "transparent",
right: "20dp",
bottom: "80dp",
top: "20dp",
left: "20dp",
zIndex: 10
});
overlay.add(canvas);
var shapes = [
{
name: 'polygon',
fn: function(){
canvas.beginPath();
canvas.lineWidth = 7;
canvas.strokeStyle = 'blue';
canvas.drawLine(0,0,400,400);
canvas.drawLine(400,400,400,300);
canvas.drawLine(400,300,800,300);
canvas.drawLine(800,300,700,200);
canvas.drawLine(700,200,0,0);
}
}
];
shapes[0].fn();
it says: "Attempt to read from field 'com.wwl.canvas.CanvasView$CView com.wwl.canvas.CanvasView.cView' on a null object reference
at com.wwl.canvas.CanvasViewProxy.beginPath(CanvasViewProxy.java:109)
...."
Can anyone help me?
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;
});
I create a window A in Titanium (latest ver) and add some views which works well.
var winA = Titanium.UI.createWindow({
backgroundColor: bgColor,
statusBarHidden:true
});
var circle = createDragCircle('Dent'); //This is a Ti.Draggable view
winA.add(circle);
I then open a modal window B i.e:
winB.open({modal: true});
The winB opens fine but as it's, opening all the winA child views I've added are removed. I can tell it isn't reloading the winA.
Is this default behaviour?
Edit:
OK. On further investigation, it's not removing the added views. It resets them to the position they were at before the drag event. Essentially, I'm doing the following:
var drag = require('ti.draggable');
var win = Titanium.UI.createWindow({
backgroundColor: bgColor,
statusBarHidden:true
});
var circle = drag.createView({
height: 30,
width: 30,
zIndex: 100,
top: top,
left: 25,
minLeft: 65,
maxLeft: 285,
minTop: 105,
maxTop: 370,
isDragged: false,
type: type
});
//Add an event listener to catch drag end
circle.addEventListener('end', function(e) {
var editwin; //Call to create winB
editwin.open({modal: true});
});
winB opens fine but the circle object moves back to the place it was before it was dragged.
if you are opening winB within winA with modal property then it will create a problem.
Thanks for help all.
I sorted it out by doing the following:
circle.addEventListener('end', function(e) {
this.top = e.source.top;
this.left = e.source.left;
});
This forces the object to take on the drop top & left properties.