Simple question for the pros.. I'm want to ouptut array items, and change y position. I'm missing something. The output is on the same line. Here is my Jsfiddle. Thanks for the help.
var s = new Kinetic.Stage({container: 'toolpanel', width:500, height:700});
var l = new Kinetic.Layer();
var cp3 = new Kinetic.Rect({x: 100,y: 10,width: 400,height:700, stroke:'black'});
l.add(cp3);
var desc = new Kinetic.Text({x: cp3.getWidth()/ 2,y: 20,text: 'Your Personalization',fontSize: 16,fontFamily: 'arial',fill: 'black',padding: 4});
l.add(desc);
s.add(l);
var odesc = [];
odesc.push("Glove Type:_20");
odesc.push("Glove Series:_40");
odesc.push("Glove Positons:_60");
for (var s = 0; s < odesc.length; s++){
var db = odesc[s];
var sdb = db.split("_");
var text = sdb[0];
var ly = 0;
var label = new Kinetic.Text({
x: 100,
y: ly+=20,
text: text,
fontSize: 16 ,
fontFamily: 'arial',
fill: 'black',
padding: 1,
align: 'left'
});
l.add(label); ly += 10;
} l.draw();
This will help you
Move var ly = 0; above for loop. Currently it's taking y position for all the text as 50 that is the reason all the text are messed up.
DEMO
Related
I am trying to import an image using columns and rows numbers and then automatically create guides from these numbers and then create slices from these guides. I am using chatGPT to implement this code. It gave me this code but it doesn't work giving me 'TypeError: undefined is not an object' error.(Both options don't work tried separately) I checked out reference and there isn't a property for document object as .slices.But I can't find any code that gives me access to slice the image from reference. Can you help me how can I slice the image using guides. I also need to access to slice info for copy paste options later for my code
// MAKE DOC PIXEL
app.preferences.rulerUnits = Units.PIXELS
app.preferences.typeUnits = TypeUnits.PIXELS
var colCount = 0;
var rowCount = 0;
// OPEN DIALOG
var dlg = new Window('dialog', 'SpriteSheet Importer', [100, 100, 600, 600]);
// INPUT FIELDS FOR NUMBER OF COLUMNS AND ROWS
var colLabel = dlg.add("statictext", [10, 40, 100, 60], "Columns:");
var colInput = dlg.add("edittext", [120, 40, 180, 60], "");
var rowLabel = dlg.add("statictext", [10, 70, 100, 90], "Rows:");
var rowInput = dlg.add("edittext", [120, 70, 180, 90], "");
// IMPORT SPRITESHEET
var openBtn = dlg.add("button", [10, 10, 100, 30], "Import spriteSheet...");
openBtn.onClick = function () {
var file = File.openDialog("Select a file to open:");
if (file) {
var doc = app.open(file);
colCount = Number(colInput.text);
rowCount = Number(rowInput.text);
// ADD VERTICAL GUIDES
var vGuideInterval = doc.width / colCount;
for (var i = 0; i < colCount; i++) {
doc.guides.add(Direction.VERTICAL, vGuideInterval * i);
}
// ADD HORIZONTAL GUIDES
var hGuideInterval = doc.height / rowCount;
for (var i = 0; i < rowCount; i++) {
doc.guides.add(Direction.HORIZONTAL, hGuideInterval * i);
}
// OPTION 1 FOR SLICING
var sliceWidth = doc.width / colCount;
var sliceHeight = doc.height / rowCount;
try {
for (var i = 0; i < colCount; i++) {
for (var j = 0; j < rowCount; j++) {
var x = i * sliceWidth;
var y = j * sliceHeight;
var slice = doc.slices.add(x, y, x + sliceWidth, y + sliceHeight);
}
}
} catch (error) {
alert(error);
}
// OPTION 2 FOR SLICING
try {
doc.slices.createFromGuides();
} catch (error) {
alert(error);
}
dlg.close();
}
}
// ADD CLOSE BUTTON
var closeBtn = dlg.add("button", [320, 10, 410, 30], "CLOSE");
closeBtn.onClick = function () {
dlg.close();
}
// SHOW DIALOG
dlg.show();
``
function maskS2clouds(image) {
var qa = image.select('QA60');
// Bits 10 and 11 are clouds and cirrus, respectively.
var cloudBitMask = 1 << 10;
var cirrusBitMask = 1 << 11;
// Both flags should be set to zero, indicating clear conditions.
var mask = qa.bitwiseAnd(cloudBitMask).eq(0)
.and(qa.bitwiseAnd(cirrusBitMask).eq(0));
return image.updateMask(mask).divide(10000).set({ 'system:time_start': image.get('system:time_start') });//error with or without it
}
var start='2018-01-01'
var end='2018-12-31'
var rgbVis = {
min: 0.0,
max: 0.3,
bands: ['red', 'green', 'blue'],
}
Map.centerObject(table, 14);
// Map the function over one month of data and take the median.
// Load Sentinel-2 TOA reflectance data.
var S2_BANDS = ['QA60','B12','B11', 'B8','B4', 'B3', 'B2']
var S2_NAMES = ['QA60','swir2','swir1', 'nir', 'red', 'green', 'blue']
var adds2 = function(image){
var awei= image.expression(
'4*(green-SWIR1)-(0.25*NIR+2.75*SWIR2)',{
green:image.select('green'),
NIR:image.select('nir'),
SWIR1:image.select('swir1'),
SWIR2:image.select('swir2'),
}).float().rename('AWEI')
var wetness = image.expression(
'(Blue*0.2578)+(Green* 0.2305)+(Red*0.0883)+(NIR1* 0.1071)+(SWIR1*-0.7611)+(SWIR2*-0.5308)',
{
Red: image.select('red'),
NIR1: image.select('nir'),
Blue: image.select('blue'),
Green: image.select('green'),
SWIR1: image.select('swir1'),
SWIR2: image.select('swir2')
}).float().rename('TCWetness')
var nwi= image.expression(
'Blue-(NIR+SWIR1+SWIR2)/Blue+(NIR+SWIR1+SWIR2)',{
Blue: image.select('blue'),
NIR:image.select('nir'),
SWIR1:image.select('swir1'),
SWIR2:image.select('swir2'),
}).float().rename('NWI')
var ndvi = image.normalizedDifference(['nir','red']).rename('NDVI')
var mndwi = image.normalizedDifference(['green','swir1']).rename('MNDWI')
var ndwi = image.normalizedDifference(['green','nir']).rename('NDWI')
return image.addBands([awei,wetness,nwi,ndvi,mndwi,ndwi]);
}
var dataset = ee.ImageCollection('COPERNICUS/S2')
.filter(ee.Filter.lt('CLOUDY_PIXEL_PERCENTAGE', 10))
.map(maskS2clouds)
.select(S2_BANDS,S2_NAMES)
.filterBounds(table)
// .filterDate(start,end )
// .map(adds2)
Map.addLayer(dataset.median(), rgbVis, 'RGB')
var mos=function(start,end){
var one=dataset.filterDate(start,end ).mosaic()
return(one)
}
var y2015=mos('2015-01-01','2015-12-31')
var y2016=mos('2016-01-01','2016-12-31')
var y2017=mos('2017-01-01','2017-12-31')
var y2018=mos('2018-01-01','2018-12-31')
var y2019=mos('2019-01-01','2019-12-31')
var y2020=mos('2020-01-01','2020-12-31')
var y2021=mos('2021-01-01','2021-12-31')
var images=ee.ImageCollection.fromImages([y2015,y2016,y2017,y2018,y2019,y2020,y2021])
var images=images.map(adds2)
print(images)
var NDWI=dataset.select("NDWI")//-0.0429
var MNDWI=dataset.select("MNDWI")//0.355
var TCWetness=dataset.select("TCWetness")//-224.229
var AWEI=dataset.select('AWEI')//-1284.206
var NDVI=dataset.select('NDVI')//0.074
var otsu = function(histogram) {
var counts = ee.Array(ee.Dictionary(histogram).get('histogram'));
var means = ee.Array(ee.Dictionary(histogram).get('bucketMeans'));
var size = means.length().get([0]);
var total = counts.reduce(ee.Reducer.sum(), [0]).get([0]);
var sum = means.multiply(counts).reduce(ee.Reducer.sum(), [0]).get([0]);
var mean = sum.divide(total);
var indices = ee.List.sequence(1, size);
var bss = indices.map(function(i) {
var aCounts = counts.slice(0, 0, i);
var aCount = aCounts.reduce(ee.Reducer.sum(), [0]).get([0]);
var aMeans = means.slice(0, 0, i);
var aMean = aMeans.multiply(aCounts)
.reduce(ee.Reducer.sum(), [0]).get([0])
.divide(aCount);
var bCount = total.subtract(aCount);
var bMean = sum.subtract(aCount.multiply(aMean)).divide(bCount);
return aCount.multiply(aMean.subtract(mean).pow(2)).add(
bCount.multiply(bMean.subtract(mean).pow(2)));
});
print(ui.Chart.array.values(ee.Array(bss), 0, means));
return means.sort(bss).get([-1]);
};
var ALOSDEM = ee.Image("JAXA/ALOS/AW3D30_V1_1")
var slope = ee.Terrain.slope(ALOSDEM.clip(table))
var imgs=images.select('MNDWI')//'AWEI','NDWI','NWI','TCWetness',
var chart = ui.Chart.image.series(imgs,table, ee.Reducer.mean(),100)
chart.style().set({
position: 'bottom-right',
width: '500px',
height: '300px'
});
Map.add(chart);
var label=ui.Label('Date:M-D-Y')
Map.add(label)
https://code.earthengine.google.com/6eed1d39dc4cf1f284214293fab6af01
My plan is to create a function that clicks on the chart some year it will layer a water mask I wrote. After the problem above, still there will be errors if I wrote .onClick(function( var equalDate=ee.Filter.equals('system:time_start',x). how can I replace it?
I'm trying to create a slot game;
I have some images that I put into an array
var createSlots = function(){
//setup images as tilingSprites
var slot1 = new PIXI.extras.TilingSprite(t1, 200, 200);
var slot2 = new PIXI.extras.TilingSprite(t2, 200, 200);
var slot3 = new PIXI.extras.TilingSprite(t3, 200, 200);
var slot4 = new PIXI.extras.TilingSprite(t4, 200, 200);
var slot5 = new PIXI.extras.TilingSprite(t5, 200, 200);
var slot6 = new PIXI.extras.TilingSprite(t6, 200, 200);
var slot7 = new PIXI.extras.TilingSprite(t7, 200, 200);
var slot8 = new PIXI.extras.TilingSprite(t8, 200, 200);
var slot9 = new PIXI.extras.TilingSprite(t9, 200, 200);
var slot10 = new PIXI.extras.TilingSprite(t10, 200, 200);
//push slots into array; images, sprites etc.
mainSlotArr.push(slot1, slot2, slot3, slot4, slot5, slot6, slot7, slot8, slot9, slot10);
};
for the moment I have 2 functions (will combine them once I get this working)
createReels1 and createReels2
what they do is copy the mainSlotArray use a shuffle function
Then populate to 2 columns (reels) each (at the moment createReels2 only does one reel)
it then removes the array element from the array it's using
The trouble I'm having is that whatever image tiles are used in createReels2, disappear if they are being used in createReels1 function, e.g if image1.png used in createReels2 and createReels1, then it is not visible in the first 2 reels
createReels functions below (alot of hard coding!)
var createReels1 = function(){
slotArr1 = mainSlotArr.slice();
shuffle(slotArr1);
var counter = 0;
var num = 0
for(var i = 0; i <2; i++){
var slotContainer = new PIXI.Container();
slotContainer.width = 100;
slotContainer.height = 400;
slotContainer.y = 100;
slotContainer.x = i*130;
stage.addChild(slotContainer);
slotContainerArr.push(slotContainer);
for(var j = 0; j < 3; j++){
var slot = slotArr1[j];
var toDel = slotArr1.indexOf(slot);
slot.scale.y = slot.scale.x = .5;
console.log(slot);
var nextY = j*(slot.height/2);
slot.y = nextY;
slotContainerArr[i].addChild(slot);
slotArr1.splice(toDel, 1);//remove from array
}
}
}
var createReels2 = function(){
slotArr2 = mainSlotArr.slice();
shuffle(slotArr2);
var counter = 0;
var num = 0
for(var i = 0; i <1; i++){
var slotContainer = new PIXI.Container();
slotContainer.width = 100;
slotContainer.height = 400;
slotContainer.y = 100;
slotContainer.x = 260;
stage.addChild(slotContainer);
slotContainerArr.push(slotContainer);
for(var j = 0; j < 3; j++){
var slot = slotArr2[j];
var toDel = slotArr2.indexOf(slot);
slot.scale.y = slot.scale.x = .5;
var nextY = j*(slot.height/2);
slot.y = nextY;
slotContainerArr[2].addChild(slot);
slotArr2.splice(toDel, 1);//remove from array
}
}
}
If I understood the code correctly, with quick check:
Sprites can have only one parent. If you check the Sprite object, it actually has a parent property. So slotArr1 and slotArr2 have identical Sprites and that fact doesn't change id you slice them. Then when you are assigning them to different containers, they get moved from one container to the other. You can reuse textures sure, but one Sprite can only have on parent.
I'm just starting to explore Smartface - could you please clarify how can I change property of few objects inside "for" cylcle?
I have few oblects:
Pages.Page.MainPage.TextButton1,
Pages.Page.MainPage.TextButton2,
Pages.Page.MainPage.TextButton3 etc
I have to change a property "text" of these objects:
Pages.Page.MainPage.TextButtonN.text = captions[i];
where N is integer from 1 to 10.
How can I do it?
Thank you and sorry for the dummy question. )
You can create dynamic objects. I made an example that creates 5 different TextButton objects inside a for loop.
You can use the below code to see how it works on device:
var i = 0, N = 5, myTop = 100, temp = "button";
var createButtons = new SMF.UI.TextButton({
top : "80%",
width : "100%",
height : "10%",
left : "0%",
text : "create buttons",
onPressed : function (e) {
for (i = 0; i < N; i++) {
var myObjectName = temp + i;
var myObjectName = new SMF.UI.TextButton();
myObjectName.name = temp + i;
myObjectName.top = myTop;
myObjectName.text = temp + i;
myObjectName.onPressed = function (e) {
// some actions
}
Pages.Page1.add(myObjectName);
myTop = myTop + 80;
}
}
});
Pages.Page1.add(createButtons);
I'm creating buttons and label from arrays via loop. I assign layer.id and layer.name to the buttons and labels. What I would like to do when button is pressed, is to draw text, describing the button color, on the appropriate line. The problem is when the button is clicked, the appropriate label is positioned , but only to the last label position and when another button is clicked the caption is written over the last caption. I want to find/assign the appropriate label using l.find("." + v2) I'm using the same function for other parts of the script and the binding works.
var s = new Kinetic.Stage({container: 'toolpanel', width:500, height:700});
var l = new Kinetic.Layer();
var cp3 = new Kinetic.Rect({x: 100,y: 10,width: 400,height:700, stroke:'black', draggable:true});
var db = [];
db.push("red_Glove Type:");
db.push("blue_Glove Type:");
db.push("black_Throws:");
var lx = 50;
for (var i = 0;i < db.length;i++){ var ser = db[i]; var sdb = ser.split("_"); v1 = sdb[0]; v2 = sdb[1];
var box = new Kinetic.Rect({x: lx+=20 , y:5, fill: v1, id: v2, name:v2, height: 30, width:30});
l.add(box); lx+=30; l.draw();
var posY = box.getPosition().y;
box.on('mousedown', (function(v1,v2){ return function(){
var check = l.find("." + "v2");
var caption = new Kinetic.Text({
x: 230,
y:posY ,
fontSize: 16,
text: v1,
id:v2,
draggable: true,
fill:v1
});
caption.setText(v1);
l.add(caption); l.draw();
}})(v1,v2),false);
}
var desc = new Kinetic.Text({x: cp3.getWidth()/ 2,y: 20,text: 'Your Personalization',fontSize: 16,fontFamily: 'arial',fill: 'black',padding: 4});
l.add(desc);
s.add(l);
var odesc = [];
odesc.push("Glove Type:_20");
odesc.push("Glove Series:_40");
odesc.push("Glove Positons:_60");
odesc.push("Throws:_80");
odesc.push("Glove Back Style:_100");
odesc.push("Hand Size:_120");
var ly = 20;
for (var s = 0; s < odesc.length; s++){
var db = odesc[s];
var sdb = db.split("_");
var text = sdb[0];
var label = new Kinetic.Text({
x: 100,
y: ly+=50,
text: text,
fontSize: 16 ,
id: text,
fontFamily: 'arial',
fill: 'black',
padding: 1,
align: 'left'
);
l.add(label); ly += 10;
var posY = label.getPosition().y;
} l.draw();
Please checkout shortened scriptjsfiddle