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
}
Related
I'm working on a project, and I'm using react-google-charts to chart my data. The problem that I am having is that no matter what I do, I can't seem to get rid of the extra white space below my control panel. Does anyone know how to get rid of this? I would really appreciate any help or advice on how to correct this. Thank you!
<div>
<h2 className="graphname">Sales</h2>
{summary.dailySales.length === 0 ? (
<MessageBox>No Orders</MessageBox>
) : (
<Chart
width="100%"
height="400px"
chartType="AreaChart"
loader={<div>Loading Chart</div>}
data={[
['Date', 'Sales'],
...summary.dailySales.map((x) => [new Date(x._id), x.sales]),
]}
options={{
chartArea: {
left: '10%',
right: '10%',
}
}}
chartPackages={["corechart", "controls"]}
controls={[
{
controlType: "ChartRangeFilter",
options: {
filterColumnIndex: 0,
ui: {
chartType: "LineChart",
chartOptions: {
chartArea: { width: "90%",
height: "20%"
},
hAxis: { baselineColor: "none" }
}
}
},
controlPosition: "bottom",
}
]}
></Chart>
)}
</div>
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]
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
How do i detect clicks outside Window {} in QML ?
Rectangle {
id: topLevel
height: 400; width: 400
Window {
id: windowObj
color: "blue"
height: 200; width: 200
onActiveChanged { console.trace(); visible = false; }
}
Component.onCompleted: windowObj.visible = true
}
Suppose I click on some part of topLevel outside windowObj.
onActiveChanged works on Windows but not on MAC.
{Using: QtQuick 2.1, QtQuick.Window 2.1, QML/Qt 5.2.0}
Put a MouseArea in your topLevel Rectangle and let the event pass through
Rectangle {
id: topLevel
MouseArea{
anchors.fill : topLevel
propagateComposedEvents : true
onClicked : console.log("clickoutside");
}
Window {
id: windowObj
color: "blue"
height: 200; width: 200
onActiveChanged { console.trace(); visible = false; }
}
}
I have a Kendo UI datawiz component, RadialGauge, which I would like to feed with real time data. It's setup using the asp.net wrappers, like so (snipped from kendo demos):
<div id="gauge-container-center">
#(Html.Kendo().RadialGauge()
.Name("tensionGauge")
.Pointer(pointer => pointer.Value(28))
.Scale(scale => scale
.MinorUnit(5)
.StartAngle(-60)
.EndAngle(240)
.Max(180)
.Labels(labels => labels
.Position(GaugeRadialScaleLabelsPosition.Inside)
)
.Ranges(ranges =>
{
ranges.Add().From(80).To(120).Color("#ffc700");
ranges.Add().From(120).To(150).Color("#ff7a00");
ranges.Add().From(150).To(180).Color("#c20000");
})
)
)
</div>
All the underlying functionality is for "real time" data is setup and working fine. My only issue is how I would go about feeding the signalR value into the .Pointer(pointer => pointer.Value(signalRValueHere) part. Any suggestions on how to do this? It doesn't seem to be an abundance of examples combining these two frameworks yet, so search results are scarce.
Ok, so I solved this using a different approach. I opted to use the javascript-initializer instead, allowing me to utilize SignalR-values in the script.
function createGauge() {
$("#tensionGauge").kendoRadialGauge({
pointer: {
value: 0,
color: "black",
},
cap: {
color: "white",
size: 1
},
scale: {
minorUnit: 50,
majorUnit: 100,
startAngle: -50,
endAngle: 230,
min: #Convert.ToInt32(Model.MinTensionRange),
max: #Convert.ToInt32(Model.MaxTensionRange),
labels: {
position: "inside"
},
ranges: [ // TODO: Fetch limits from signalR or Model
{
from: 300,
to: 100,
color: "#ffc700"
},{
from: -300,
to: -100,
color: "#ffc700"
}, {
from: #Convert.ToInt32(Model.MinTensionRange),
to: -300,
color: "#c20000"
},{
from: #Convert.ToInt32(Model.MaxTensionRange),
to: 300,
color: "#c20000"
}
]
}
});
}
$(document).ready(function () {
createGauge();
});
And the js-part to update the value:
messageHub.client.notifyTension = function (tensionMessage) {
$('#tensionGauge').data("kendoRadialGauge").value(tensionMessage);
};