I am new in Titanium Studio. I am trying to do that when user clicks the any button in window1, it goes the second window. I mean I cannot connect to button1 and button2 in order to pass through the second window.
Here is the my sample code. Can anyone help me please?
Titanium.UI.setBackgroundColor('#000');
var win1 = Ti.UI.createWindow({
layout : 'vertical',
title : 'Welcome to BMI'
});
var button1 = Ti.UI.createButton(
{
title:'Standart',
top : 300,
height: 20,
width: 100
});
button1.addEventListener('click', function(e)
{
win1.close();
win2.open();
});
var button2 = Ti.UI.createButton(
{
title:'Metric',
top : 350,
height: 20,
width: 100
});
button2.addEventListener('click', function(e)
{
win1.close();
win2.open();
});
win1.add(button1);
win1.add(button2);
win1.open();
var win2 = Ti.UI.createWindow({
backgroundColor: 'white',
layout: 'vertical',
title: 'BMI'
});
var label1 = Ti.UI.createLabel({
color: '#900',
font: { fontSize:48 },
shadowColor: '#aaa',
shadowOffset: {x:5, y:5},
text: 'Body Mass Index',
textAlign: Ti.UI.TEXT_ALIGNMENT_CENTER,
top: 30,
width: Ti.UI.SIZE, height: Ti.UI.SIZE
});
var label2 = Ti.UI.createLabel({
color:'blue',
text: 'Welcome to BMI',
textAlign: Ti.UI.TEXT_ALIGNMENT_LEFT,
top: 30,
width: 300, height: 200
});
win2.add(label1);
win2.add(label2);
I think you should not face problem to execute this code but i think you need to do some modification in your code.
Titanium.UI.setBackgroundColor('#000');
function openNewWin(){
var win2 = Ti.UI.createWindow({
backgroundColor: 'white',
layout: 'vertical',
title: 'BMI'
});
var label1 = Ti.UI.createLabel({
color: '#900',
font: { fontSize:48 },
shadowColor: '#aaa',
shadowOffset: {x:5, y:5},
text: 'Body Mass Index',
textAlign: Ti.UI.TEXT_ALIGNMENT_CENTER,
top: 30,
width: Ti.UI.SIZE, height: Ti.UI.SIZE
});
var label2 = Ti.UI.createLabel({
color:'blue',
text: 'Welcome to BMI',
textAlign: Ti.UI.TEXT_ALIGNMENT_LEFT,
top: 30,
width: 300, height: 200
});
win2.add(label1);
win2.add(label2);
win2.open({
modal : true
});
}
var win1 = Ti.UI.createWindow({
layout : 'vertical',
title : 'Welcome to BMI'
});
var button1 = Ti.UI.createButton(
{
title:'Standart',
top : 300,
height: 20,
width: 100
});
button1.addEventListener('click', function(e)
{
win1.close();
openNewWin();
});
var button2 = Ti.UI.createButton(
{
title:'Metric',
top : 350,
height: 20,
width: 100
});
button2.addEventListener('click', function(e)
{
win1.close();
openNewWin();
});
win1.add(button1);
win1.add(button2);
win1.open({
modal : true
});
Related
I am new to Google earth engine and coding as well. I am trying to create an panel with a dropdown and a text box in google earth engine. The drop down menu has two options 1. link to shapefile and 2. draw your polygon. When the user selects option 1 from the menu, I want the textbox to get active else it needs to stay deactivated. If the user selects second option of drawing a polygon, I want the drawing tools to get active else stay deactivated. How do I achieve this. Please help me, Thanking you in advance.
var panel = ui.Panel();
panel.style().set({
width: '20%',
});
ui.root.insert(0,panel)
var asset = 'Use Shapefile'
var boundary = 'Draw boundary'
var geometry
var aoi
var selectboundary = ui.Select({
items:[asset, boundary],
placeholder:'Select boundary',
style: {padding: '0px 10px', stretch: 'horizontal', color: 'black'}
});
panel.add(selectboundary)
var shapefilelink = ui.Textbox({
style: {
maxWidth: '390px',
padding: '0px 10px',
stretch: 'horizontal',
color: 'black'
},
placeholder: 'users/your_username/asset_name',
onChange: function(input){
var userInput = input;
userInput = ee.String(userInput);
geometry = ee.FeatureCollection(userInput);
},
disabled: true,
});
panel.add(shapefilelink)
var startdate = ui.Textbox({
placeholder: 'Start: yyyy-mm-dd',
style: {
minWidth: '0px',
maxWidth: '200px',
padding: ('0px 0px 0px 10px' ),
color: ('black'),
},
})
var enddate = ui.Textbox({
placeholder: 'End: yyyy-mm-dd',
style: {
minWidth: '0px',
maxWidth: '200px',
padding: ('0px 0px 0px 15px' ),
color: ('black'),
},
})
panel.add(ui.Panel([startdate,enddate],ui.Panel.Layout.flow('horizontal')))
I want to assign text or label using OpenLayers to Icons. I am able to assign the label to the icon but it places text on the icon .but I want to display label at offset so icon and label both display properly. I have tried using offsetY but it is not working and does not change the placement.
var styleToponimiFunction = function(feature,resolution) {
console.log(feature);
var iconName;
if (feature.get("remark")=='Daerah Istimewa') {
iconName='daerah_istimewa2.png';
}
else if (feature.get("remark")=='Kecamatan'){
iconName='kecamatan.png';
}
iconStyle = [new ol.style.Style({
image: new ol.style.Icon(({
anchor: [0.5, 46],
anchorXUnits: "fraction",
anchorYUnits: "pixel",
scale:0.03,
opacity:1,
src: "icons/" + iconName,
})),
text: new ol.style.Text({
text: feature.get('namobj'),
font: '12px Calibri,sans-serif',
fill: new ol.style.Fill({ color: 'black' }),
stroke: new ol.style.Stroke({
color: '#fff',
width: 2,
textAlign: 'center',
Baseline: 'hanging',
offsetX : 0,
offsetY : -12,
}),
declutter: true,
overflow: true
}),
})
]
return iconStyle;
}
The text options should not be inside the Stroke constructor, also Baseline should be textBaseline
stroke: new ol.style.Stroke({
color: '#fff',
width: 2,
}),
textAlign: 'center',
textBaseline: 'hanging',
offsetX : 0,
offsetY : -12,
I have few elements (triangles) and I want to be able to highlight(setShadow) them as I hover above each one (mouse:over/mouse:move), and reset highlight when mouse not over.
I tried this, but it doesn't do anything. Below is my code:
var canvas = new fabric.Canvas('canvas');
var petal1 = new fabric.Triangle({
width: 200,
height: 300,
fill: '#DBDBDB',
left: 500,
top: 350,
angle: 200,
strokeLineJoin: 'round',
strokeWidth: 20,
stroke: '#DBDBDB'
});
var petal2 = new fabric.Triangle({
// same options as above
});
var petal3 = new fabric.Triangle({
// same options as above
});
canvas.on('mouse:over', function(e) {
e.target.set('fill', 'red');
canvas.renderAll();
});
canvas.on('mouse:out', function(e) {
e.target.set('fill', 'green');
canvas.renderAll();
});
canvas.add(petal1, petal2, petal3);
I added console.log(e.target);, but it printed nothing.
Your snippet works and check target before setting property to it.
DEMO
var canvas = new fabric.Canvas('canvas');
var options = {
width: 100,
height: 200,
fill: '#DBDBDB',
strokeLineJoin: 'round',
strokeWidth: 20,
stroke: '#DBDBDB'
};
var petal1 = new fabric.Triangle(options);
var petal2 = new fabric.Triangle(options);
var petal3 = new fabric.Triangle(options);
canvas.on('mouse:over', function(e) {
if(e.target){
e.target.set('fill', 'red');
canvas.requestRenderAll();
}
});
canvas.on('mouse:out', function(e) {
if(e.target){
e.target.set('fill', 'green');
canvas.requestRenderAll();
}
});
canvas.add(petal1, petal2, petal3);
canvas{
border:1px solid;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.7.0/fabric.js"></script>
<canvas id="canvas" width="300" height="300"></canvas>
In my code I created method to clip images using fabric shapes. I have used stackoverflow answer for achieving this. Somehow after using this method I cannot render the canvas using default fabric canvas render method.
var img01URL = 'https://www.google.com/images/srpr/logo4w.png';
var img02URL = 'http://fabricjs.com/lib/pug.jpg';
var canvas = new fabric.Canvas('c');
document.getElementById('download').addEventListener('click', function() {
canvas.renderAll();
this.href = canvas.toDataURL({
format: 'png',
multiplier: 2
});
this.download = "test.png";
}, false);
var clipRect1 = new fabric.Rect({
originX: 'left',
originY: 'top',
angle: 90,
left: 195,
top: 0,
width: 200,
height: 200,
fill: '#DDD', /* use transparent for no fill */
strokeWidth: 1,
lockMovementX: true,
lockMovementY: true,
angle: 5,
stroke: 'red'
});
var pugImg = new Image();
pugImg.onload = function (img) {
var pug = new fabric.Image(pugImg, {
angle: 0,
width: 500,
height: 500,
left: 245,
top: 35,
scaleX: 0.3,
scaleY: 0.3,
clipName: 'pug',
clipTo: function(ctx) {
ctx.save();
ctx.setTransform(1, 0, 0, 1, 0, 0);
clipRect1.render(ctx);
ctx.restore();
}
});
canvas.add(pug);
};
pugImg.src = img02URL;
pugImg.setAttribute('crossOrigin', 'anonymous');
#c {
border:0px solid #ccc;
}
<script src="//cdn.bootcss.com/fabric.js/1.5.0/fabric.js"></script>
<canvas id="c" width="500" height="400"></canvas>
<a id="download">Download as image</a>
Your problem is the multiplier.
When using that kind of clipTo functions, you are setting the transform of canvas to plain. When rendering with canvas with multiplier, the base canvas transformation is scaled by the multiplier.
Your rect will be drawn without this transform ( because of setTransform(1,0,0,1,0,0) and will clip out the image.
Instead of setting the transform to [1,0,0,1,0,0] you should set to the invers of the current transformation of the object you are clipping.
var img01URL = 'https://www.google.com/images/srpr/logo4w.png';
var img02URL = 'http://fabricjs.com/lib/pug.jpg';
var canvas = new fabric.Canvas('c');
document.getElementById('download').addEventListener('click', function() {
var data = canvas.toDataURL({
format: 'png',
multiplier: 2
});
console.log(data);
//var img = document.getElementById('export');
//img.src = data;
}, false);
var clipRect1 = new fabric.Rect({
originX: 'left',
originY: 'top',
angle: 90,
left: 195,
top: 0,
width: 200,
height: 200,
fill: '#DDD', /* use transparent for no fill */
strokeWidth: 1,
lockMovementX: true,
lockMovementY: true,
stroke: 'red',
angle: 5
});
var pugImg = new Image();
pugImg.onload = function (img) {
var pug = new fabric.Image(pugImg, {
angle: 0,
width: 500,
height: 500,
left: 245,
top: 35,
scaleX: 0.3,
scaleY: 0.3,
clipName: 'pug',
clipTo: function(ctx) {
ctx.save();
var myMatrix = this.calcTransformMatrix();
myMatrix = fabric.util.invertTransform(myMatrix);
ctx.transform.apply(ctx, myMatrix);
clipRect1.render(ctx);
ctx.restore();
}
});
canvas.add(pug);
};
pugImg.src = img02URL;
#c {
border:0px solid #ccc;
}
<script src="//www.deltalink.it/andreab/fabric/fabric.js"></script>
<canvas id="c" width="500" height="400"></canvas>
<a id="download">Download as image</a>
<img id="export" >
I am trying to display total records in jqgrid.
Here is the code i am using to display.grid is displaying but i am not getting total.
and i am getting Error:footer-row is invalid propert
Can anyone tell me what is mistake?
$("#JqGrid").jqxGrid(
{
pagesize: 5,
source: dataAdapter,
width: 700,
sortable: true,
pageable: true,
autoheight: true,
columnsresize: true,
filterable: true,
showfilterrow: true,
showtoolbar: true,
footerrow: true,
userDataOnFooter:true,
rendertoolbar: function (toolbar) {
var container = $("<div style='overflow: hidden; position: relative; margin: 3px;'></div>");
var exportButton = $("<div style='float: right; margin-right: 5px;'> <img style='position: relative; margin-top: 2px; width: 16px; height: 16px;' src='images/excel.png' /><span style='margin-left: 4px; position: relative; top: -3px;'>Export to Excel</span></div>");
container.append(exportButton);
toolbar.append(container);
exportButton.jqxButton({ width: 150, height: 20 });
exportButton.click(function (event) {
$("#JqGrid").jqxGrid('exportdata', 'xls', 'Report');
});
},
selectionmode: 'checkbox',
//rendertoolbar: function (toolbar) {
// var container = $("<div style='overflow: hidden; position:relative;margin:3px;'></div>");
// var exportButton = $("<div style='float:right;margin-right:20px;'><img style='position:relative;margin-top:2px;width:16px;height:16px' src='./images/excel.png'/><span style='margin-left:4px;position:relative;top:2px'>Export to Excel</span></div>");
// exportButton.jqxButton({ width: '130' });
// container.append(exportButton);
// toolbar.append(container);
//}
columns: [
{ text: 'VillageName', datafield: 'VillageName', width: 'auto' },
{ text: 'Samples Collected', datafield: 'VillageSamples', width: 'auto' }
],
gridComplete: function () {
calculateTotal();
},
});
var themeSetting = { theme: "darkblue" };
$("#JqGrid").jqxGrid(themeSetting);
var calculateTotal = function () {
var gridData = $("#JqGrid").jqGrid('getGridParam', 'data'),
i = 0, totalAmount = 0, totalTax = 0;
for (; i < gridData.length; i++) {
var rowData = gridData[i];
totalAmount += Number(rowData.VillageSamples);
}
$("#JqGrid").jqGrid('footerData', 'set', { name: 'TOTAL', VillageSamples: totalAmount });
}