Possible SVG Path Chrome Bug - google-chrome

I'm experiencing a possible bug with the path element in Chrome. I have copy/pasted what RaphaelJS has rendered here: http://petesaia.com/work/svg-chrome-bug/
In Safari & Firefox
(source: petesaia.com)
In Chrome (19.0.1084.46)
(source: petesaia.com)
Obviously there are very many points in this file which is why I limited 50 points per path element. As you can see, 2 paths are missing from the right side and 2 very small paths are missing from the left side. I found one of the paths that is not displaying and singled it out. You can see that here: http://petesaia.com/work/svg-chrome-bug/singled.html
You will notice that even when the path is singled out it still doesn't show. So Chrome must dislike something with that path.
I also noticed that sometimes it displays correctly, usually when I open and close the javascript console. It's very flimsy. I've experimented with changing stroke and weight and also no luck.
Has anyone experienced anything like this?
New discovery: These x/y values are the coordinates that break the single.html sample: 620.3536711111101,232.16932207146056 I know this because when you truncate the path up to that point it works perfectly. However, I still have no idea as to why they would break it.
Thanks,
Pete
PS: I do plan on simplifying the shape(s) but this has caught my attention first.

Related

gizmo based on Three.js is not visible

I created Forge viewer app w/ Transformation Extension based on GitHub sample "forge-extensions", for unknown reason, gizmo is not visible after I click on element, only very small yellow dot after zoom in, I believe it's element center point and gizmo size is too small, so my question is how to control it? in fact, all the coding is copied from that GitHub sample "forge-extensions", I must miss something simple!
Have you tried your code with different types of models, and does it behave the same for all of them? I believe it may have something to do with the scale of the particular model, especially when looking at these lines of code from the viewer extension:
_transformControlTx.setSize(
bbox.getBoundingSphere().radius * 5);
Try and put a breakpoint there, and see what the radius is. Or try adjusting the hard-coded value.

Block nodes/edges in graphhopper routing - wrong edges are getting blocked

I'm trying to block edges in my graphhopper routing, following the example described in the docs (https://github.com/graphhopper/graphhopper/blob/master/docs/core/weighting.md).
I try to find the edges which have to get blocked with
EdgeIteratorState edge = hopper.getLocationIndex().findClosest(lat, lon, EdgeFilter.ALL_EDGES ).getClosestEdge();
But when running my App, it shows up that some completely different edges are blocked, not the ones I tried to block.
What am I doing wrong, do you have any hints? I got stuck with this problem since four days now, no ideas left.
Don't know yet, if this is elegant, but I think I found a workaround:
in the config.properties of the graphhopper.sh I added
prepare.chWeighting=no
and while loading the graph, I set
tmpHopp.setCHEnable(false);
To block an edge afterwards, I simply set the speed for this edge to 0
FlagEncoder footEncoder = TempAppData.getInstance().getHopper().getEncodingManager().getEncoder("foot");
edge.setFlags(footEncoder.setSpeed(edge.getFlags(), 0));

Example of Click Map is not working for me

Sorry by this dummy question! :D
I´m trying to make a clickable map with html5 canvas element, I find this good example: http://www.rubydesigner.com/blog/click-map-using-html5-canvas
But when a download it (CTRL+S) from Chrome it doesnt work. It download the html page and files folder with the JS a images, I checked the path to the images, but still the map doesnt appear. What is the problem?
UPDATE
Initial assumption about CORS turns out to not be the case here.
The code seemed to work in Chrome and although CORS typically is the cause when downloading files and using canvas with local (file://) file references. As localhost is used here via XAMMP this won't be the cause and it turns out there are more than one bugs in the online code.
Specifically the way it calculates the coordinates for the mouse:
var datapos = ((e.offsetY-2) * 300 * 4) + ((e.offsetX-1) * 4);
This will result in a NaN value due to offsetX/Y which of course cannot be used for any index.
The more appropriate way is something like this, here also compensating for canvas offset:
var rect = map_wrapper.getBoundingClientRect();
var datapos = ((e.clientY - (rect.top |0)) * 300 * 4) +
((e.clientX - (rect.left|0)) * 4);
However, I have never came across a floating point position for an element which seem to be case here (rect.top shows a float value in my browser, another little surprise) and therefor I am forcing the value to integer here (normally not necessarily.. I didn't dig deep into this). As debugging the whole code is a bit out of the scope here I will leave it with that and to OP to locate other bugs.
Correcting the position will at least give a usable index for the pixel array which in turn will return a valid (not necessarily correct it turns out, which leave checking of image, tolerane in case gamma/color correction is applied....) value for the red component (still issues when testing but as said, it's a bit out of the scope to do a full debug and correction).
Hopefully this can lead you to where the other errors are. I did not go through the html etc.

Why is my context.getImageData() call illegal?

I have been playing around with a very simple HTML5/Canvas based drawing app, just for the browser. I am setting it up as a proof of concept to play around with different programmatic drawing effects and such. However, I running into an issue, namely a SecurityError, when I try to grab the ImageData from the canvas 2d context.
Now, I know all about the security issues with cross-browser content and running on a webserver with local content and all that. This is not my issue. I am using no images. And the weirder thing is that I can grab the ImageData in some places in my code, but not others. Specifically, not within a function, which is where I want to.
Here is a fork of my code:
http://jsfiddle.net/grimertop90/77Z42/
Feel free to play around, and try drawing on the canvas.
(Note: I have been developing in Chrome and it works fine, but I just tried running it in Firefox and it seems to have issues. For my purposes, please just check it out in Chrome.)
If you look though the JavaScript, you should see three points marked "Case 1", "Case 2", and "Case 3". These are the three points in my code where I have attempted to grab the canvas's ImageData. Cases 1 and 3 work; Case 2, the important one, does not. Case 1 is during initialization. Case 3 is upon a user's button click. Case 2, the broken one, is fired when a certain number of points have been drawn on the canvas.
I have no clue what the issue might be, especially since it work in 2 out of 3 places.
Your code works fine, your only problem are the missing arguments in the arcSketch call. Currently you have:
if (points.length >= 100) { arcSketch(); }
Just change it for
if (points.length >= 100) { arcSketch(x,y); }
You were trying to call ctx.getImageData(Nan, Nan, 200, 200) which was throwing the error.
You can see it working here

mapview stopped downloading tiles

Strange problem:
I have a program that was happily downloading map tiles in my mapview.
suddenly....poof no more tiles.
I did not change anything that might affect the download proces. all the code stayed the same,
the downloading stopped.
I was wondering if that could have anything to do with the date change.
it seemed to happen just after midnight.
any ideas where to look?
Very silly, but did find at least one person who made the same mistake.
While copy pasting the onstop into onresume i forgot to change super.onstop into super.onresume.