Getting all polygon coordinates of specific area of image? [closed] - html

Closed. This question is off-topic. It is not currently accepting answers.
Want to improve this question? Update the question so it's on-topic for Stack Overflow.
Closed 10 years ago.
Improve this question
I have an image were I put links and text with html image map. That works fine. I would like to have some hover effect on specific areas of the image. For example take a world map and when you hover over a country that one get highlighted. With the html image map and some css it is not a problem, that is, if you have a list of all polygon coordinates of all countries.
So how do I get those? You cant possibly do that manually.
I am not a photoshop expert but I imagine you would do a "magic wand" selection on an area and then somehow list the coordinates that is used to create the selection. Is there such functionality?
I personally use Paint.Net for simple image editing and it does not have that feature that I know of.
Do you know the way to do this?

I'll tell you how to do it with JavaScript, since this is a programming Q/A site.
To get the rectangular coordinates of the selection bounds is easiest:
#target photoshop
// Save the current unit preferences (optional)
var startRulerUnits = app.preferences.rulerUnits
var startTypeUnits = app.preferences.typeUnits
// Set units to PIXELS
app.preferences.rulerUnits = Units.PIXELS
app.preferences.typeUnits = TypeUnits.PIXELS
// Use the top-most document
var doc = app.activeDocument;
var coords = doc.selection.bounds;
// Write coords to textfile on the desktop. Thanks krasatos
var f = File( '~/Desktop/coords.txt' );
f.open( 'w' );
f.write( coords );
f.close();
// Reset to previous unit prefs (optional)
app.preferences.rulerUnits = startRulerUnits;
app.preferences.typeUnits = startTypeUnits;
This will give the rectangular bounds (think of the bounding box you see when transforming) of the selection in the current active document. It outputs in the order minX, minY, maxX, maxY. This should be enough info to translate to CSS coordinates.
To get the coordinates of individual polygon points you can make the selection into a path and output each pathPoint.anchor on the path using this script:
#target photoshop
// Save the current unit preferences (optional)
var startRulerUnits = app.preferences.rulerUnits
var startTypeUnits = app.preferences.typeUnits
// Set units to PIXELS
app.preferences.rulerUnits = Units.PIXELS
app.preferences.typeUnits = TypeUnits.PIXELS
// Use the top-most document
var doc = app.activeDocument;
// Turn the selection into a work path and give it reference
doc.selection.makeWorkPath();
var wPath = doc.pathItems['Work Path'];
// This will be a string with the final output coordinates
var coords = '';
// Loop through all path points and add their anchor coordinates to the output text
for (var i=0; i<wPath.subPathItems[0].pathPoints.length; i++) {
coords += wPath.subPathItems[0].pathPoints[i].anchor + "\n";
}
// Write coords to textfile on the desktop. Thanks krasatos
var f = File( '~/Desktop/coords.txt' );
f.open( 'w' );
f.write( coords );
f.close();
// Remove the work path
wPath.remove();
// Reset to previous unit prefs (optional)
app.preferences.rulerUnits = startRulerUnits;
app.preferences.typeUnits = startTypeUnits;
Instructions:
-open your map image
-make a selection of the region using your favorite selection tool
-run the script with the extendscript toolkit or by choosing File>Scripts>Browse... and select the .jsx file where the script is saved.

there isn't any option in ps you have to make coordinates in Dreamweaver.

Related

In Google Earth Engine: Most efficiently reduceRegions over each image in ImageCollection, saving mean as a Feature property?

I have a FeatureCollection made up of many (100-200) polygons ('ftr_polygons'). I also have an ImageCollection made up of monthly median Landsat8 bands and indices ('byMonth'). I want to ReduceRegions and save a median (or mean) spatial average from each polygon in the FeatureCollection. End goal is to export to csv a timeseries of monthly mean bands/indices within each polygons over multiple years (2013-2019).
With the code below, I am able to do this for ~1 year, but any more than that, and I get an error: 'FeatureCollection (Error) Computation timed out’. Is there a better way to do this?
// define the function that will grab median (or mean) spatial reductions for each polygon, for each month
var extractdata = function(medianImage,ftr_polygons) {
var date_start = ee.Date(medianImage.get('system:time_start')).format("YYYY-MM"); // get date as string to append to each property
// spatial MEDIAN
ftr_polygons = medianImage.reduceRegions({ // create feature collection with new properties, bands for each month, uniquely named
collection: ftr_polygons,
reducer: ee.Reducer.median(),
scale: 30,
tileScale: 1}); // tile scale
var ftr_polygons_propnames = ftr_polygons.first().propertyNames(); // get property names first
var ftr_polygons_newnames = ftr_polygons_propnames.replace('NDVI_median',
ee.String('NDVI_median_').cat(date_start)); //replace property names with band+date
ftr_polygons_newnames = ftr_polygons_newnames.replace('EVI_median',
ee.String('EVI_median_').cat(date_start)); //replace property names with band+date
ftr_polygons_newnames = ftr_polygons_newnames.replace('NIRv_median',
ee.String('NIRv_median_').cat(date_start)) ; //replace property names with band+date
ftr_polygons = ftr_polygons.map(function(f) {return f.select(ftr_polygons_propnames,ftr_polygons_newnames)});
return ftr_polygons;
};
// apply the function over ImageCollection byMonth, beginning with feature collection ftr_polygons
var ftr_polygons = ee.FeatureCollection(byMonth.iterate(extractdata,ftr_polygons));
// remove geometry on each feature before printing or exporting
var myproperties=function(feature){
feature=ee.Feature(feature).setGeometry(null);
return feature;
};
var ftr_polygon_export = ftr_polygon.map(myproperties)
print(ftr_polygon_export.limit(1), 'For export w monthly properties');
Maybe this answer: https://stackoverflow.com/a/48412324/12393507 alludes to a better way:
The same approach can be used with reduceRegions() as well, mapping over images and then over regions. However, you will have to map over the resulting features to set dates.
I would appreciate more info on this approach.
Thanks.
For computationally intensive operations that will run for a long time you should always export your results instead of visualizing/printing them.
For more info read through this section of the debugging page in the Earth Engine manual.

Find the co-ordinates of matching image using sikuli in java

I need to get the co-ordinates of matched image within the actualImage so that I can perform operations on it. However, I tried below two approaches,but both doesn't seem to work:
Approach 1:
Using below, I'm able to find a match but co-ordinates returned are just the width & height of image to be matched(which I already know). I want to get the position of the same within actual image.
BufferedImage actualImg = ImageIO.read(new File("C:/Images/SrcImg.PNG"));
ImageTarget actualTgt = new ImageTarget(actualImg);
BufferedImage searchImg = ImageIO.read(new File("C:/Images/TgtImg.PNG"));
ImageTarget searchTgt = new ImageTarget(searchImg);
ScreenRegion scrReg = new StaticImageScreenRegion(actualTgt.getImage());
ScreenRegion resReg = scrReg.find(searchTgt);
ScreenLocation center = resReg.getCenter();
System.out.println(":getElementFromImage: x_loc,y_loc =["+center.getX()+","+center.getY()+"]");
Approach 2:
In below code I tried with sikulix Finder. However, with this src.hasNext() returned true BUT src.next() threw nullpointer exception.Not sure what is the problem here:
Finder src = new Finder("C:/Images/SrcImg.PNG");
Pattern pat = new Pattern("C:/Images/TgtImg.PNG").similar(0.5);
src.find(pat);
Match m;
while( src.hasNext())
m = src.next();
src.destroy();
java.lang.NullPointerException
at org.sikuli.script.Finder.next(Finder.java:484)
at com.work.ImageFinder.main(ImageFinder.java:38)
I already spent good amount of time to make this work. Any help would be much appreciated.
Thanks!
It works fine after passing the Region to Finder like below:
Finder src = new Finder("C:/Images/SrcImg.PNG", new Region(0,0,<width>,<height>))
Pattern pat = new Pattern("C:/Images/TgtImg.PNG").similar(0.5);
src.find(pat);
Match m;
while( src.hasNext())
m = src.next();
src.destroy();
More details can be found below link:
Is it possible to use Sikuli to assert that images are the same in GUI-less mode?

Oxyplot showing HeatMapSeries behind ScatterSeries

I am trying to combine LineSeries, ScatterSeries and HeatmapSeries on a single OxyPlot instance. I am able to show the first two just fine on the same plot and it looks like the following:
The axes for this are generated by the following code:
var xAxis = new DateTimeAxis();
xAxis.Key = "X";
xAxis.Position = AxisPosition.Bottom;
xAxis.AbsoluteMinimum = DateTimeAxis.ToDouble(CurrentPass.AOS);
xAxis.AbsoluteMaximum = DateTimeAxis.ToDouble(CurrentPass.LOS);
xAxis.AxislineColor = xAxis.TextColor = xAxis.TicklineColor = xAxis.MajorGridlineColor = OxyColors.DarkGray;
var yAxis = new LinearAxis();
yAxis.Key = "Y";
yAxis.Position = AxisPosition.Left;
yAxis.AbsoluteMinimum = 0.0;
yAxis.AbsoluteMaximum = MaximumFrequency;
yAxis.Maximum = MaximumFrequency;
yAxis.AxislineColor = yAxis.TextColor = yAxis.TicklineColor = yAxis.MajorGridlineColor = OxyColors.DarkGray;
If I add in a third axes for the Heatmap (not even a HeatMapSeries yet), I get the following:
The extra code here for the axis for the HeatMap is:
var heatmapAxis = new LinearColorAxis();
heatmapAxis.AbsoluteMinimum = 0.0;
heatmapAxis.AbsoluteMaximum = MaximumFrequency;
heatmapAxis.Palette = OxyPalettes.Gray(1024);
heatmapAxis.Key = "HeatMap";
I am not sure what's going on here. The line series still shows. And all the ScatterPoints from the scatterseries I have are definitely there - the tracker shows up and I can interact with the points (hover, click etc.). But the points don't show. If I add a HeatMapSeries, the HeatMapSeries data does show up as expected, the LineSeries data still shows up but no ScatterSeries data.
Again, the HeatMap data and the Scatter Series data show up individually, but never together.
Has anyone encountered this before? Are there workarounds?
Thanks,
Aditya
Sorry this is a bit late but just stumbled upon this. I had something similar with a line not showing up on a Heatmap and after some experimenting i realized the order in which the series' are added to the plot model make a big difference. Make sure you add your ScatterSeries after you've added your Heatmap to the plot model.

Masked images not displaying in AS3

I am trying to mask an image on another so that I only view the specific portion of the unmasked image through the masked one. My problem is that I cannot see anything on the screen.. no Image, no effect at all
cardMask = new Image(Root.assets.getTexture("card_mask"));
cardMask.y = Constants.STAGE_HEIGHT*0.40;
cardMask.x = Constants.STAGE_WIDTH *0.48;
trace("it's add mask");
cardLight = new Image(Root.assets.getTexture("card_light_mask"));
cardLight.y = Constants.STAGE_HEIGHT*0.46;
cardLight.x = Constants.STAGE_WIDTH *0.48;
cardLight.mask=cardMask;
maskedDisplayObject = new PixelMaskDisplayObject(-1,false);
maskedDisplayObject.addChild(cardLight);
maskedDisplayObject.x=cardLight.x;
maskedDisplayObject.y=cardLight.y;
maskedDisplayObject.mask=cardMask;
maskedDisplayObject.blendMode = BlendMode.SCREEN;
addChild(maskedDisplayObject);
First, for masking an object the mask object should also be added to the display list. Your code does not add cardMask to display list anywhere. Second, if your maskedDisplayObject should be visible at all times, the mask should be assigned not to it, but to some other object which displayed part you desire to control. And third, it is also possible that this.stage is null, therefore the entire tree (this -> maskedDisplayObject -> cardLight) is plain not rendered. You need to check all three of these conditions to get something displayed.
Also, if you desire cardLight as an object to move independently of maskedDisplayObject, you should add it to this instead, and check that it's displayed on top of maskedDisplayObject (call addChild(cardLight) after addChild(maskedDisplayObject)).
This all totals to this code:
trace("Stage is null:", (this.stage==null)); // if this outputs true, you're out of display
cardMask = new Image(Root.assets.getTexture("card_mask"));
cardMask.y = Constants.STAGE_HEIGHT*0.40;
cardMask.x = Constants.STAGE_WIDTH *0.48; // mask creation unaltered
trace("it's add mask");
cardLight = new Image(Root.assets.getTexture("card_light_mask"));
cardLight.y = Constants.STAGE_HEIGHT*0.46;
cardLight.x = Constants.STAGE_WIDTH *0.48;
cardLight.mask=cardMask; // this is right
maskedDisplayObject = new PixelMaskDisplayObject(-1,false);
// maskedDisplayObject.addChild(cardLight); this is moved to main part of display list
maskedDisplayObject.x=cardLight.x;
maskedDisplayObject.y=cardLight.y;
// maskedDisplayObject.mask=cardMask; NO masking of this, you're only masking cardLight
cardLight.blendMode = BlendMode.SCREEN; // display mode is also changed
addChild(maskedDisplayObject);
addChild(cardLight);

erasing a layer where mouse is over it

I got the following question.
i added the following elements to the stage:
homeBg = new HomeBg();
homeMask = new HomeDrawBg();
addChild(homeBg);
addChild(homeMask);
I allready instantiated them in the beginning of the document. But my problem is the following. the homeBg layer is a image, the homeMask layer is the same image but it has a pencil scetch look. What i want is that wherever i move my mouse, the homemask layer should be erased so the bottom layer becomes visible(only where the mask is erased). So how can i tell the mask layer to erase itself if the mouse is over it?
Answer attempt 2
You can use the blendMode property of a display object to achieve this. Here's the code (tested):
// set the eraser width (diameter)
var eraserWidth:int = 20;
//get the HomeMask library item
var homeMask:HomeMask = new HomeDrawBg();
homeMask.blendMode = BlendMode.LAYER;
addChild(homeMask);
// create the eraser shape
var eraser:Shape = new Shape();
eraser.graphics.beginFill(0x000000);
eraser.graphics.drawCircle(0,0,eraserWidth/2);
eraser.blendMode = BlendMode.ERASE;
homeMask.addChild(eraser);
homeMask.addEventListener(MouseEvent.MOUSE_MOVE,mouseOverMask);
function mouseOverMask(evt:MouseEvent):void
{
eraser.x = homeMask.mouseX;
eraser.y = homeMask.mouseY;
}
There are a couple of important bits here.
Firstly, you must set the blendMode of the thing you want to erase to BlendMode.LAYER.
Secondly (and this is what has tricked me before) your eraser, with BlendMode.ERASE, must be a child of the object you're wanting to erase.
Have a look on the following:http://www.piterwilson.com/personal/2008/05/07/bitmapdata-erasing-in-as3-with-custom-brush-shape/