getClosestFeatureToCoordinate does not work for Points - openlayers-3

I made a function to get the closer feature to the one clicked. I use Openlayers 3.9.0 and the getClosestFeatureToCoordinate method.
var select = new ol.interaction.Select();//simple click interaction
map.addInteraction(select);//add it to the map
select.on('select', function(e) {
//get the extent of the first selected feature
var aa = e.selected[0].getGeometry().getExtent();
//in case of line or polygon get the center of that extent
var oo = ol.extent.getCenter(aa);
//use it to get the name of the closest feature
console.log((sourceVector.getClosestFeatureToCoordinate(oo)).get("mylayer_name")) ;
});
But in a case like the following
if I click the "u" Polygon (bottom down) I get "u" instead of , say, "e"
if I click any point I get its name , instead of the closest feature's name. I click "testpoint9" and I get "testpoint9" instead of "u" or "e". I click "h" and I get "h" instead of "p" or "k".
So maybe has to do with points, so I changed the select.on event function to
select.on('select', function(e) {
var closestType = e.selected[0].getGeometry().getType();
var oo;
if (closestType === 'Point'){
oo = e.selected[0].getGeometry().getCoordinates();
}
else{
var aa = e.selected[0].getGeometry().getExtent();
oo = ol.extent.getCenter(aa);
}
console.log("---------------------------------------------------");
console.log("Name: "+sourceVector.getClosestFeatureToCoordinate(oo).get('mylayer_name'));
})
and still nothing. So, how I fix this?
Thanks

When You click inside the "u" polygon - the distance to it is 0.
When you click on something - that thing will always be the closest (to itself).
What you can do there, is removing the clicked element from the layer, run the algorithm (without clicked point) and put the point back on the layer.
If You are afraid that point could be invisible for too long (but it shouldn't), place it in another layer for the time of algorithm.
select.on('select', function(e) {
var clicked = e.selected[0];
sourceVector.removeFeature(clicked);
var closest = sourceVector.getClosestFeatureToCoordinate(e.coordinate);
sourceVector.addFeature(clicked);
var closestType = closest.getType();
if (closestType === 'Point'){
oo = e.selected[0].getGeometry().getCoordinates();
}
else{
var aa = e.selected[0].getGeometry().getExtent();
oo = ol.extent.getCenter(aa);
}
})

Related

(Adobe Animate ActionScript) how can iRemove specific Symballl's from the stage using name, arry, and lib()?

I'm super frustrated with this.
first for you to understand my code - My goal here is for the user to get randomly selected word appear to them in a way that every letter sits inside of a box.
Then if the user clicks on a button called "Pick a word", another word will be selected and the correct number of boxes will appear.
I have an array of words like this:
var word_group_1 = ["abolsh", "absorbent", "betrayal", "frutish", "commensurate", "eonfident", "zite"]
I'm using this function to select a random word from that array then splice it.. works perfectly:
function random_word_genereator() {
random = randomNumber(0, word_group_1.length);
//putting the chosen word from array in the chosen word variable
chosen_word = word_group_1[random]
//after we used the chosen word were removing it from the away
word_group_1.splice(random, 1)
//splitting the chosen word into an array
chosen_word_letters_arry = chosen_word.split("")
}
in a button click of "pick a word"- I'm creating 5 instances of a Movieclip I have in my library (just a blue box to put text in it) with text in at like this:
function create_boxes(e)
{
//to know which word has been displayed to the user//
old_word=chosen_word
random_word_genereator()
for (i=0;i<chosen_word.length;i++){
cell_boxes = new lib.cell_box();
stage.addChild(cell_boxes)
cell_boxes.name="cell_box"+i;
cell_boxes.x=(xlocation * i) + 50
cell_boxes.y = 80;
output = new createjs.Text();
cell_boxes.addChild(output)
output.text=chosen_word_letters_arry[i]
}
everything works fine on the first click As You Can View Here.
The word being selected and displayed on the stage
my problem is when I'm clicking Again on the button "pick a word"
its not deleting the correct number of boxes.
I'm putting visible false to the boxes which holds the "Old word" (the one I need to delete)
but As you can se here After I click again its getting messed up.
sometimes its's working, switches from 12 letter word, to a 4 one.
but it should be luck. I'm dying to get this to WORK! its for my school project.
Please help me!
Easy answer that will plug and play into your code:
js
...
//to know wichh word has been displayed to the user//
old_word=chosen_word
random_word_genereator()
for (i = 0; i < stage.numChildren; i++) // Loop through all children of the stage
if (stage.getChildAt(i) is lib.cell_box) // Checks if the child is a lib.cell_box
stage.removeChildAt(i--); // Removes child from stage and decrements i
for (i=0;i<chosen_word.length;i++){
...
Original answer (cleaner code, some restructuring):
It's best to break this kind of logic down into steps.
var boxes:MovieClip = new MovieClip();
boxes.y = 80;
addChild(boxes);
...
function createBoxes(word:String):void {
// Remove boxes first
while (boxes.numChildren > 0)
boxes.removeChildAt(0);
// Add boxes
for each(var c:String in word.split("")) {
var box:Box = new Box(c);
box.x = boxes.width + 50;
boxes.addChild(box);
}
}
Then set the text inside a Box class.

Change background of google slides shape to red

I am trying to find the answer in Google Slides API references for how to set the background color of a shape I have in my Google Slide. I have given it the title (using Alt Text feature) "rectangle1", so my intention is to write the code along the lines of "if shape's property "title" == "rectangle1", then set background color to red."
I can't see a single reference to "SetBackgroundFill" or SetBackgroundColor, or anything of that sort.
Is it possible?
This is another possible answer, using a so-called "container bound script", which is only accessible through the specific Slide's Tools/Script Editor menu (no other way, or else it won't work).
I found that this "container bound script" approach gives me more power over my slide, and it avoids these expensive calls to "batchUpdate", when using "stand alone" scripts as in my other "self-answer".
So, in a way, I recommend it to myself, but, perhaps, to someone else, my other approach would be a better choice.
For one thing, this approach has a much faster response time.
var hex_color = '#54BdeF';
function test1() {
var selection = SlidesApp.getActivePresentation().getSelection();
var currentPage = selection.getCurrentPage();
var selectionType = selection.getSelectionType();
var shapes = currentPage.getShapes();
for (i=0; i < shapes.length; i++) {
if (shapes[i].getTitle() == 'rectangle1') {
shape_fill = shapes[i].getFill();
shape_fill.setSolidFill(hex_color);
}
}
}
Again, as before, I would welcome any comments and suggestions.
To set background color, you need Element Operations.
The Slides API allows you to create and edit a variety of page
elements, including text boxes, images, tables, basic shapes, lines,
and embedded videos. The examples on this page show some common page
element operations that can be achieved with the API.
Following the steps specified here will do the changes in your specified shape or element. Check the example.
Well, here is my solution. If someone sees a way to improve it, I am all ears, but so far, it appears to work for me glitch-free.
First, I find the shape I am after using the following logic:
function ChangeColorMain()
{
ChangeShapeBackgroundColor('title', 'rectangle1', color_to_repl_r, color_to_repl_g, color_to_repl_b, alpha_value );
}
function ChangeShapeBackgroundColor(shape_property_name, shape_property_value, color_to_set_r, color_to_set_g, color_to_set_b) {
Logger.log( 'ChangeShapeBackgroundColor(shape_property_name=%s, shape_property_value=%s, color_to_set_r=%s, color_to_set_g=%s, color_to_set_b=%s) ',
shape_property_name, shape_property_value, color_to_set_r, color_to_set_g, color_to_set_b);
var presentation = Slides.Presentations.get(presentationId);
var slides = presentation.slides;
Logger.log('The presentation contains %s slides:', slides.length);
for (i = 0; i < slides.length; i++) {
for (j = 0; j < slides[i].pageElements.length; j++ ) {
if (shape_property_name == 'title' && shape_property_value == slides[i].pageElements[j].title) {
Logger.log('Found it');
//slides[i].pageElements[j].shape.shapeProperties.shapeBackgroundFill.solidFill.color.rgbColor.red = color_to_set_r;
SubmitRequest(slides[i].pageElements[j].objectId, color_to_set_r, color_to_set_g, color_to_set_b, alpha_value);
}
} //end of for that iterates through every element
}
}
So, you'll notice that I start my process by calling the function "ChangeColorMain" which also gets my global variables color_to_repl_r... which are defined in a different file of my google script project, but that's not important.
Once inside the ChangeShapeBackgroundColor(), I iterate through all "PageElements" on my slide (see the relevant for loops) and use if statements to check if I got to the shape I am looking for. Finally, once I have located it, I call the all important function SubmitRequest(), which is "expensive". You can't make too many calls in one day, or else Google blocks this function until the day ends. But not a problem if you are making less than 500 calls per day (this number might be wrong/might change).
Here are the details of "SubmitRequest()" which I was able to create by finally figuring out how to make sense of this reference page:
https://developers.google.com/slides/reference/rest/v1/presentations/request#UpdateShapePropertiesRequest
function SubmitRequest(shape_id, r, g, b, a) {
var rgb_color = {
red: r,
green: g,
blue: b
};
var opaque_color = {
rgbColor: rgb_color
};
var solid_fill = {
color: opaque_color,
alpha: a
};
var background_fill = {
solidFill: solid_fill
};
var shape_properties = {
shapeBackgroundFill: background_fill
};
var update_request = {
objectId: shape_id,
shapeProperties: shape_properties,
fields: "shapeBackgroundFill.solidFill.color"
};
var requests = [{
updateShapeProperties: update_request
}];
// Execute the request.
var batch_update_return = Slides.Presentations.batchUpdate({
requests: requests
}, presentationId);
Logger.log(
'This is what you get from Google after submitting batchUpdate request:\n%s', batch_update_return);
}

Stupid mouse move coordinates in dart

I am learning Dart and I was trying to make a very simple drageable HTML element. I followed patterns I'm used to from javascript but it doesn't work as expected.
When making drageable object from scratch you usually do the following:
Listen on mouse down event on that object
Upon mouse down, remember mouse coordinates relative to the object's top-left corner
Listen for any mouse movement. For every move operation, move the object to cursor location minus the coordinates you remembered earlier.
Upon any mouse up event, stop following mouse movement.
So I produced this code:
class DrageableControl {
DivElement _elm;
DrageableControl(String txt, int x, int y) {
//Create element and set up styles
var elm = this.setupElement(x, y);
//Append element to document, add some text and start listeners
document.body.append(elm);
elm.text = txt;
setupEvents();
}
//This function creates all event necessary for drag operations
setupEvents() {
Point relativeMouseOffset = null;
_elm.onMouseDown.listen((MouseEvent e) {
Rectangle myPos = _elm.getBoundingClientRect();
relativeMouseOffset = new Point(e.offset.x-myPos.left, e.offset.y-myPos.top);
e.preventDefault();
return false;
});
//Of course this is completely wrong, the listener should only be added for the duration of dragging
document.onMouseMove.listen((MouseEvent e) {
if(relativeMouseOffset!=null) {
print("Clicked at: ${relativeMouseOffset}\nCurrent mouse position:${e.offset}");
_elm.style.top = "${(e.offset.y/*-relativeMouseOffset.y*/)}px";
_elm.style.left = "${(e.offset.x/*-relativeMouseOffset.x*/)}px";
}
});
document.onMouseUp.listen((MouseEvent e){
relativeMouseOffset = null;
});
}
setupElement(int x, int y) {
var elm = this._elm = new DivElement();
//TODO: Use css?
elm.style.position = "absolute";
elm.style.top = "${y}px";
elm.style.left = "${x}px";
elm.style.border = "1px solid red";
elm.style.backgroundColor = "#FFAAAA";
elm.style.cursor = "default";
//elm.style.transition = "top 1s";
return elm;
}
}
Problem is, that some coordinates delivered by MouseMove are complete nonsense. See the console:
Clicked at: Point(-76.0, -143.0)
Current mouse position:Point(1, 1)
Clicked at: Point(-76.0, -143.0)
Current mouse position:Point(374, 272)
Clicked at: Point(-76.0, -143.0)
Current mouse position:Point(1, 0)
Clicked at: Point(-76.0, -143.0)
Current mouse position:Point(376, 273)
Clicked at: Point(-76.0, -143.0)
Current mouse position:Point(0, 1)
As you can see every second mouse move event delivers broken data - coordinates right around [0, 0]. So how can I filter out this invalid data? Why does it happen?
So far I'm probably fixing this by adding:
if(e.offset.x+e.offset.y<5)
return;
Use e.client.x/e.client.y instead.

Highstock get detailed info when data is grouped

In the click event "this.x" is the first point in the data group.
dataGrouping occurs when you play with the scroll, for example if select show all data, each point represent a week but you have information about every day, so in this point is represented info of all week instead of each day.
¿how I can get the last point in the data group clicked? ¿Hoy can I get the last point represented in this group (in this week)? (week is an example when you play with the scroll grouped data can happen in non common intervals)
plotOptions : {
series : {
point : {
events : {
click : function(event) {
alert(this.x + ' ' + this.y);
//HERE?
}
}
}
}
},
http://jsfiddle.net/JorgeDuenasLerin/QA2Qa/13/
After deep testing and several implementations and reimplementations... the conclusion.
You can access to the points variable. It is the solution because it always has the points draw in the screen and you can access it with no change when dataGrouping occurs.
var point = event.point;
var points = event.point.series.points;
var index = points.indexOf(point);
var index_next = index+1;
Here a working example:
http://jsfiddle.net/JorgeDuenasLerin/QA2Qa/88/
You can not work with series.data variable because it change depending on cropThreshold and number of data.
series.data
here doc:
http://api.highcharts.com/highstock#Series::data
There is no simple way to get it, but here is what you can do:
you have this.x value, now loop through this.series.options.data and compare x-value with your this.x
last object from that comparison (this.x > this.series.options.data[index][0])will be point you are looking for
You can access the series data in the click event by using this.series
events: {
click: function (event) {
var last = this.series.data[this.series.data.length - 1];
alert(last.x + ' ' + last.y);
}
}
http://jsfiddle.net/38FmW/

WP7 -Live Tiles - Count Value (number in circle) - Mango

I have a function that I'm calling that basically returns a string. If the string = "OVER DUE!" I want to display an alert on the main tile (a number inside a circle). However, if the user corrects this problem I want to clear that tile and just show a normal tile with no number.
The code below does what I want it to do the 1st time it checks. So if I get an "OVER DUE!" everything works great. But if I correct it, the second tile updates but the main tile still has the number inside the circle. What do I need to do to clear the main tile back to its original state?
I would also like to clean up this code as it really is duplicated. Does anyone have any suggestions how I can write 1 function to do what I want?
if (nextDateCheck != "OVER DUE!")
{
var standardTile = new StandardTileData
{
Title = "Change your Oil",
BackgroundImage = new Uri("w7ChangeYourOil_icon_transparent.png", UriKind.Relative),
BackTitle = "Next Oil Change",
BackContent = "Your next Oil Change is: " + nextDateCheck.ToString()
};
appTile.Update(standardTile);
}
else
{
var standardTile = new StandardTileData
{
Title = "Change your Oil",
BackgroundImage = new Uri("w7ChangeYourOil_icon_transparent.png", UriKind.Relative),
Count = 1, // any number can go here, leaving this null shows NO number
BackTitle = "Next Oil Change",
BackContent = "Your next Oil Change is: " + nextDateCheck.ToString()
};
appTile.Update(standardTile);
}
The answer is quite simple really.
You need to set the Tile count back to 0 when you want to unset the number graphic on the front of the tile.
Reason being it's due to the way the original framework used to be Push Notification driven only which the new Local Tile framework still has to support.
The Title, Front Image and count are still overlays on top of the new programmatic tile options.
Hope this helps

Resources