Avoid alpha summation in Line that overlap itself in Carto Mobile SDK - carto-mobile

Disclaimer: I posted this question originally in gis.stackexchange. Apparently it may fit better in here according to carto support. I'll keep both questions updated, and remove one of them if the moderators tell me to.
I need to draw a big line that can overlap itself. I am using this doc:
https://carto.com/docs/carto-engine/mobile-sdk/getting-started/#add-a-line
And I need the line to have a opacity of 0.3. So far so good; I have a line that is almost transparent. The problem is that when the line overlaps itself, the alpha in the overlapping area is 0.6 (because you see the line over itself)
In this link you can find an image of the problem:
https://i.imgur.com/87ouwc8.png
Is it possible to keep the alpha consistent, even if the line cross with itself?

Mobile SDK latest version (4.1.3) added feature that instead of opacity of individual lines you set alpha for whole layer. This is exactly for cases like yorus.

Related

html canvas font scaling problem , text is flickering without reason

I readed many forums, but never found some analogue case.
Javascript canvas font displays in a flickering fashion. The conditions appears to be:
scale of the canvas is not an integer (for example setScale(0.1,0.3))
setTransform(1,0,0,1,0,0); and setScale are used widely to restore setting at every draw of new objects.
Windows. In linux this effect is barely visible (only in some single chars of the text !?).
If the scale is too little (0.5 or less) the effect cannot be seen.
Using save() and restore() seems to have different effect other than setTransform(1,0,0,1,0,0); ans setScale(sx,sy); so i never use them.
I solved the question opting for using only saves and restores : no more flickering. This seems to avoid direct using of setTransoform, and for some reason there should no difference in it.
Sorry for the lack of code, it's a very complicated set of instructions to extract from my coded game.
I hope this is the definitive solution to flickering. Thanks.

Why are my SVG bezier curves broken in Firefox?

I came across a problem today where diagrams I have created are not working in Firefox when created via getPointAtLength. Here is a fiddle showing the problem:
http://jsfiddle.net/xfpDA/9/
Note comments at the top of the javascript.
The relevant part of the SVG path is:
C189.5,423.237,266.965,390.696,266.965,390.696
This works perfectly in Chrome and IE, but Firefox skips right over the curve and just closes the path.
However, a tiny change to the curve is enough to fix the problem:
C189.5,423.236,266.965,390.696,266.965,390.696
^
Why does changing that value by a thousandth make the difference between a pretty curve and a broken SVG?
EDIT: That coordinate is not the only one that can be changed to 'fix' the problem, so it appears that Firefox does not play nicely with high-precision curve values.
Firefox is not able to calculate the length of the curve under some circumstances (e.g. delta=0/0). So the result for that path part is NaN/0/undefined and therefore is not added to the total length and the domain for getPointAtLength is smaller.

Google Charts line thickness(& Sharpness) differ

I just found that there are some difference in the line thickness (and sharpness) even tough their line thickness property has be set to the same. I have searched all over the Google Charts webpage. But I could find nothing. How to solve this kind of error ?
Check all the lines you find the difference. Some will blur and other will be sharp.
This isn't really specific to Google charts, its an artefact of Anti aliasing. In brief, the pixels in most computer displays are relatively large, which makes precise display difficult. Anti aliasing uses shading to make an image look like it was rendered with more pixels than are actually available, at the cost of being blurry. When you have some lines that match the real pixels, you will see the difference.
There doesn't seem to be an option to turn off antialiasing that I can see in the Google Charts documentation.
If you are exporting images (e.g. PNGs) you could export at a larger size and reduce the image back at a non-integral scale: that way all lines will be blurred roughly equally as no source pixel will exactly line up with a destination pixel.
If you are trying to display SVGs, you might be able to turn off antialiasing using CSS styles. (Maybe try this)

Javascript “Jigsaw puzzle” with irregular .png shapes

Soooo, what I'm trying to do is essentially a jigsaw puzzle. On the left side is an area with a stack of a dozen or so overlapping .png files of "ripped" paper pieces (all different irregular shapes with alpha) that when put together, in order on the right side, form a sheet of paper with notes on it. A visual (disregard rotated pieces):
Nothing new I know, but my two main caveats in developing this are that it has to work in ie8+ and on touch devices. So this means no flash (where this would of been very easy) and no canvas (stupid ie); which leaves me with js and maybe svg?
The drag and drop part in js is easy enough but the issue I'm having is that, as I'm sure you know, the alpha channel is ignored and the irregular ripped piece is actually a rectangle. Which makes this unusable given that pieces are a stack with pieces overlapping each other.
I can do granular hit detection on the drop by using an image map and setting a variable on rollover.
I've looked around a lot (here + google) and tried some ideas but I'm unable to solve the irregular shape select/drag issue. Any ideas?
Thanks for your time.
Low-tech solution
Nested elements with absolute position
If you're willing to spend a little extra time, there's a way to achieve this fairly closely, without having to use Flash, Canvas, SVG, or even image maps. And unlike an image map, it allows you to nest related content inside each hotspot if needed (e.g., pop-ups).
In the simplest case, you could use a single rectangular hyperlink hotspot for each piece of the puzzle. Obviously that greatly limits the range of shapes you can support (without interfering with overlapping elements).
But, if you take that hyperlink tag and give it a number of span tag children, and give each one absolute position (relative to the hyperlink), and apply the appropriate portion of the image to the background, then you can "construct" irregular image shapes that occupy a single irregular hotspot, with relatively-little interference with overlapping elements.
In effect, the image (with areas of transparency) is treated as a sprite file, with the hyperlink tag and the child span tags each occupying one portion of the "sprite file". Most of the transparent parts of the image will not be occupied by the hyperlink tag or the span tags.
Most shapes can probably be built using a hyperlink tag and 4 - 10 spans. Granted, the more irregular the shapes are, the more spans it will tend to require.
I've done this before, to create hotspots for each of the states on a US map, without using an image map (or Flash, Canvas, SVG), and it wasn't nearly as problematic as you'd think. It just requires a bit of time to figure out the details of how to break up each shape into the right number of rectangles.
The catch
Rounding error on mobile devices
Here's the catch, and it's a doozy. When a web page is scaled on mobile devices (and a regular page is almost always scaled on smaller devices), that introduces a rounding error that causes the px placement of the hyperlink tag and the span tags to possibly vary by at least 1 pixel horizontally and/or vertically. This also happens if desktop browsers are scaled; it's just that desktop browsers are not often scaled.
What would happen is that you would tend to wind up with 1 pixel or so of separation (or overlap) between the different parts of each shape. In many cases, that will tend to be very obvious and not acceptable visually. And depending on the implementation, the locations can vary by as much as 2px or 3px. When it occurs it's difficult to solve, and there are limits to how much of it can be solved.
Last I checked, Firefox is the only browser that's smart enough about rounding px values on scaled pages to avoid this problem. Hopefully other browsers will eventually support it better, as even simple pages often suffer from rounding errors.
The solution
Separate the images from the hotspots
The rounding error isn't much of a problem with hotspots (where precision isn't important). Where it really causes problems is with images (when you see an image not lining up where it should).
It may be possible to avoid the worst of the image rounding errors by doing the following:
Have one set of HTML code for the hotspots, same as described above, except don't display any part of the images in the hotspots. Give them all transparent backgrounds.
Have another set of HTML code for the images. Each one would be a single rectangular element that displays all of the image.
Place each image at the same position as the related hotspot.
Make sure the set of hotspots and the set of images both have the same z-index order. All of the hotspots will be on top of all of the images, but within the hotspots and within the images the order needs to be consistent.
When the hotspot for a piece is dragged, update the position of the related image to keep them at the same location. In effect, the image shadows the hotspot while it's being dragged.
Isn't ExplorerCanvas an option for you? I would think that that would allow you to create a canvas-based solution. That will be much better than anything done with plain html element manipulation through javascript

HTML Canvas Tracing

I'm trying to build something in HTML5/Canvas to allow tracing over an image and alert if deviating from a predefined path.
I've figured out how to load an external image into the canvas, and allow mousedown/mousemovement events over it to draw over the image, but what I'm having trouble getting my head around is comparing the two.
Images are all simple black on white outlines, so from what I can tell a getPixel style event can tell if there is black underneath where has been drawn upon or underneath where the mouse is on.
I could do it with just the mouse position, but that would require defining the paths of every image outline (and there are a fair number, hence ideally wanting to do it by analyzing the underlying image)..
I've been told that its possible with Flash, but would like to avoid that if possible so that compatability with non-flash platforms (namely the ipad) can be maintained as they are the primary target for the page to run.
Any insight or assistance would be appreciated!
I think you already touched upon the most straight-forward approach to solving this.
Given a black and white image on a canvas, you can attach a mousemove event handler to the element to track where the cursor is. If the user is holding left-mouse down, you want to determine whether or not they are currently tracing the pre-defined path. To make things less annoying for the user, I would approach this part of the problem by sampling a small window of pixels. Something around 9x9 pixels would probably be a good size. Note that you want your window size to be odd in both dimensions so that you have a symmetric sampling in both directions.
Using the location of the cursor, call getImageData() on the canvas. Your function call would look something like this: getImageData(center_x - Math.floor(window_size / 2), center_y - Math.floor(window_size / 2), window_size, window_size) so that you get a sample window of pixels with the center right over the cursor. From there, you could do a simple check to see if any non-white pixels are within the window, or you could be more strict and require a certain number of non-white pixels to declare the user on the path.
The key to making this work well, I think, is making sure the user doesn't receive negative feedback when they deviate the tiniest bit from the path (unless that's what you want). At that point you run the risk of making the user annoyed and frustrated.
Ultimately it comes down to one of two approaches. Either you load the actual vector path for the application to compare the user's cursor to (ie. do point-in-path checks), or you sample pixel data from the image. If you don't require the perfect accuracy of point-in-path checking, I think pixel sampling should work fine.
Edit: I just re-read your question and realized that, based on your reference to getPixel(), you might be using WebGL for this. The approach for WebGL would be the same, except you would of course be using different functions. I don't think you need to require WebGL, however, as a 2D context should give you enough flexibility (unless the app is more involved than it seems).

Resources