I am using the upload image widget and I want to add a text overlay but don't know how, can someone answer me?
thumbnailTransformation: [{ width: 300, height: 300, crop: 'fill', border: "2px_solid_red" }],
You'll need to include an overlay key that's an object with overlay parameters, in this case, text specific.
For example -
thumbnailTransformation: [
{
width: 300,
height: 300,
crop: 'fill',
border: "2px_solid_red"
},
{
overlay: {
font_family: "Arial",
font_size: 20,
text: "Test"
},
gravity: "north_east"
}
]
Below is a JSFiddle you can try: https://jsfiddle.net/rhdvgy19/
All the other available text styling options can be found here -
https://cloudinary.com/documentation/image_transformations#styling_parameters
Related
I want to pass the colorModelData for rectangle shown below.
Requirement is: on click of button i want to open a popup. And inside popup want to display multiple number of circles with different colors. Using button can i create a popup which will give me list of colors? ALso list of color should be exposed from outside.
How can i do it?
Rectangle {
id: control
property var colorModelData: ["Red", "Green", "Blue"]
Button{
id: btn
width: 100
height: 100
onClicked: {
rect.visible = true
}
}
Rectangle{
id: rect
visible: false
width: 400
height: 300
color: "gray"
anchors.top: btn.bottom
GridView{
width: rect.width
height: rect.height
model: colorModelData
delegate: Column{
Rectangle {
width: 20
height: 20
radius: width/2
//color: colorModelData [..... getting error]
}
}
}
}
}
I tested your code and it works for me. So I assume the only part you're missing is the line you have commented out. Use this:
color: colorModelData[index]
There are chart.js pie charts in a html table.
The issue: on zoom-out and then zoom-in, the cells do not resize to their initial size.
The layout looks something like this:
__________________________
| inner div | inner div |
|_____________|____________|
| | |
| Pie1 | Pie2 |
|_____________|____________|
I have referred the documentation on resizing and this link to add responsive and maintainAspectRatio fields in options object.
On setting responsive:true, the diagram is enabled to resize on zoom.
Setting maintainAspectRatio:false, to fix previous irregular zoom issue where the multiple charts do not resize proportionally since they take table cell's width.
Just for reference there is a blurry text issue with chart.js zoom mentioned at
github here.
Sourcecode of issue on JS fiddle: http://jsfiddle.net/rfaLvuho/.
Use zoom-out and zoom-in back to reproduce.
You can switch to <div> elements for the layout to fix this. I used float in the snippet below but it should work with flex or grid layout as well.
var randomScalingFactor = function() {
return Math.round(Math.random() * 100);
};
chartColors = {
red: 'rgb(255, 99, 132)',
orange: 'rgb(255, 159, 64)',
yellow: 'rgb(255, 205, 86)',
green: 'rgb(75, 192, 192)',
blue: 'rgb(54, 162, 235)',
purple: 'rgb(153, 102, 255)',
grey: 'rgb(201, 203, 207)'
};
var config = {
type: 'pie',
data: {
datasets: [{
data: [
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
],
backgroundColor: [
chartColors.red,
chartColors.orange,
chartColors.yellow,
chartColors.green,
chartColors.blue,
],
label: 'Dataset 1'
}],
labels: [
'Red',
'Orange',
'Yellow',
'Green',
'Blue'
]
},
options: {
responsive: true,
maintainAspectRatio: false,
legend: false
}
};
var myPie1 = new Chart('chart-area1', config);
var myPie2 = new Chart('chart-area2', config);
.canvas-holder {
width: 50%;
float: left;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>
<div class="canvas-holder">
<canvas id="chart-area1"></canvas>
</div>
<div class="canvas-holder">
<canvas id="chart-area2"></canvas>
</div>
I have created a button, I need some response from button like, on touch of the button, the button focus should enable like change in background color. How can I do that?
My code is,
View:
<Button class="button" id="proceedButton" onClick="openQuestionnaire">Proceed</Button>
Style:
".button":{
width: '50%',
top: '25dp',
borderRadius: 8,
borderWidth: 1,
borderColor: '#808080',
backgroundGradient: {
type: "linear",
startPoint: { x: "0%", y:"0%"},
endPoint: { x: "0%", y:"100%"},
colors: [
{ color: "#4F94CD", offset: 0.0 },
{ color: "#4F94CD", offset: 1.0 }
]
}
}
Controller:
$.proceedButton.addEventListener('touchstart', function() {
$.proceedButton.isFocused = true;
});
$.proceedButton.addEventListener('touchend', function() {
$.proceedButton.isFocused = false;
});
The above code is not working. Just I need to slight chage in background color while touch of the button.
Any solution!!
Use this property and pass colour code
backgroundSelectedColor : "RED"
focusable must be true for normal views.
for more you can refer this http://docs.appcelerator.com/titanium/latest/#!/api/Titanium.UI.Button-property-backgroundSelectedColor
I hope it may help you,
Alloy xml would be like this
<Button class="button" id="proceedButton" onClick="openQuestionnaire">Proceed</Button>
Then the button property would be like this
".button":{
width: '50%',
top: '25dp',
borderRadius: 8,
borderWidth: 1,
borderColor: '#808080',
backgroundSelectedColor : "red",
backgroundSelectedImage : "/my_image.png",
backgroundGradient: {
type: "linear",
startPoint: { x: "0%", y:"0%"},
endPoint: { x: "0%", y:"100%"},
colors: [
{ color: "#4F94CD", offset: 0.0 },
{ color: "#4F94CD", offset: 1.0 }
]
}
}
You can set your selected image or background color on touch focus.
You wont need the controller code you have written in the controller.
Also for some object you can also have selectedColor.
You can also set backgroundFocusedImage,
As #CodeForFun mentioned you can use backgroundSelectedColor property of button.
Also following are all the states which can be used by a button in Titanium.
Disabled : backgroundDisabledImage and backgroundDisabledColor
Normal : backgroundImage and backgroundColor
Focus : backgroundFocusedImage and backgroundFocusedColor
Selected : backgroundSelectedImage and backgroundSelectedColor
Hope this would be helpful.
Edit : An example of usage:
View :
<Button class="button" >Proceed</Button>
TSS :
".button":{
width: '50%',
top: '25dp',
backgroundSelectedColor : "#4F94CD" //usage
}
Sencha Touch 2 includes Ext.util.Droppable and Ext.util.Draggable classes. Does anyone have a simple example showing how basic drag and drop behavior works?
It seems any component can be made draggable with the 'draggable' config option. Here I create a simple Panel with a draggable image component:
Ext.create("Ext.Panel", {
fullscreen: true,
items: [
{
xtype: 'image',
src: 'http://www.sencha.com/assets/images/sencha-avatar-64x64.png',
height: 64,
width: 64,
left: '10px',
top: '10px',
draggable: {
direction: 'both',
},
}
]
});
and that works fine: the component can now be dragged around inside the Panel.
But how do we now make a simple "drop target" using the Ext.util.Droppable class?
So, I have a panel in Sencha Touch and I have an image which I want to display as a component in that panel. I have tried several things along the lines of:
logo = {
xtype: 'component',
autoEl: {
src: 'http://addressofmyimage.com/image.png',
tag: 'img',
style: { height: 100, width: 100 }
}
};
Then adding above component as an item in my panel. No image is displayed. All of my other components are displayed but not the image. Not even a broken-image-link icon. I can't figure this out...
I'd rather not just insert raw html, as I cannot format that as I wish.
Probably better off using a panel to display the image itself. Replace the above code with...
logo = {
xtype: 'panel',
html: '<img style="height: 100px; width: 100px;" src="http://addressofmyimage.com/image.png" />'
};
You could override the Component's getElConfig method and return what you have in your autoEl object.
{
xtype: 'component',
getElConfig : function() {
return {tag: 'img',
src: 'http://addressofmyimage.com/image.png',
style: { height: 100, width: 100 },
id: this.id};
}
}
That method is used when the component is rendered to get the makeup of the underlying element.
You can use src.sencha.io API to resize image as you wish. Belowed example works for me.
{
xtype: 'image',
src: 'http://src.sencha.io/100/100/http://www.skinet.com/skiing/files/imagecache/gallery_image/_images/201107/windells_hood.jpg',
height: 100
}
You can find documentation here.