Link label with Vertical Separator - linklabel

How do we achieve vertical separation between LinkLabels. Tried searching in google but all solutions point towards Horizontal separations. For reference please see image LinkLabels with vertical separation

Related

How to prevent west and East elements from overlapping center in BorderLayout

I'm trying to create a layout in this sketch
I want to have a vertical slider in the center, one SpanLabel on the left and another on the right.
I've tried using BorderLayout, but the SpanLabels overlap the slider if their texts are long. Is there a Layout that I could use to achieve a similar style or something I could do to fix BorderLayout?
CenterAbsolute and CenterCenter don't help in fixing this.
I'd use a TableLayout with percentages for each column to achieve this sort of layout.
BorderLayout assumes the preferred size of the elements on the sides/top/bottom isn't too big to cover everything so it's a bit problematic in some use cases.

Calculate distortion in equirectangular projection on a sphere

Following Quote from this source:
http://www.cambridgeincolour.com/tutorials/image-projections.htm
Equirectangular image projections map the latitude and longitude
coordinates of a spherical globe directly onto horizontal and vertical
coordinates of a grid, where this grid is roughly twice as wide as it
is tall.
I have a 13312 px width and 6656 pixel height Panorama picture. It's a equirectangular projection of a room and have a 2:1 ratio.
I use following formular to calculate the xPosition:
var xPosition = ( panorama.width / 360 ) * azimuth
Azimuth = Phi = Heading = Angle to the left or right
How do I project this now on a 1366x768px browser screen?
I think my results are wrong, because it's not on the point where it should be.. it could be because the sphere has a distortion on the left and right:
Is there any formular to calculate the position with attention to the distortion and scale it to fit on the browser screen? I looked many (MANY) sources to find a solution for this, but they always just say that equirectangular are just lat and long.. they don't consider the distortion.
Last question: To find a special solution, I tryed to put a plane on the circle and expanded the line which shows the alpha angle. I though with Phytagoras I could find the position.. but this didn't worked either.. maybe I did something wrong? Is this the way even possible or am I doing it wrong?
edit
THIS is what I'm actually looking for: http://othree.github.io/360-panorama/three-2d/
The black grid in the background. What is the name of this? For what do I have to google or look for? When you start the 2D Panorama, if you want to get the coordinations of the top right corner of the window, what do you have to do?
The whole calculation problem was about to create a Google Streetview similiar view from a 2:1 equirectangular image. We already found a solution for this with a great help from Martin Matysiak (https://github.com/marmat | Google).
It's been a while so I can't give a direct answer to what the main solution is, but I can provide a URL to an AddOn Martin wrote for adding the custom Markers that we actually were trying to make.
You can follow https://github.com/marmat/google-maps-api-addons and look for yourself. In the end it helped a lot to solve the main problem and let us continue with our main Framework for Google Business Tours.
If you follow the link in the threejs demo you included, it would take you to the source code.
particularly look at:
https://github.com/mrdoob/three.js/blob/dev/examples/webgl_panorama_equirectangular.html
and
https://github.com/mrdoob/three.js/blob/dev/src/geometries/SphereBufferGeometry.js
not sure if there is distortion though. The distortion comes from the fact that the texture is mapped to the sphere, and the sphere is rendered in 3D (openGL).

Can you right-align an SVG rectangle?

I'm using Raphael to draw rectangles. Whoo-hoo!
Is there a way to right align contents of an SVG file?
Not just text, but shapes as well?
I can do the math and get the computed x value, but I'm looking for the lazy-simple solution.
Thank you.
There isn't. Unlike normal web pages where the window is resized and the content flows into it, when a Raphael paper is resized, there is no sort of flow, so aligning is irrelevant. Instead of setting align=right, you just set the right edge to be the same position you set the width of the paper to be. If you enlarge the paper, you can scale the contents with a single operation. Once you've set the position of the right edge, you've essentially set the align position. You don't need to re-set all edge values when the paper changes size, you just scale everything with one command. Hope that helps

Understanding Element Inspector output on web page

When I select an entry in the Element Inspector, the appropriate area on the web page is overlaid with translucent blue which is very helpful in determining where elements actually appear on the web page. However, at times an additional area is shown in a dark beige overlay. This area is always adjacent to the blue overlay. I have no idea how to interpret the meaning of the beige overlay but I suspect that the answer to this question may help me debug other layout problems I am having.
This area represents margin of a block element.

Google Charts API Z-index

Given:
http://chart.apis.google.com/chart?chxr=0,0,21|1,0,320&chxt=x,y&chs=600x500&cht=s&chco=c0c0c0|c0c0c0|c0c0c0|c0c0c0|c0c0c0|c0c0c0|c0c0c0|c0c0c0|c0c0c0|c0c0c0|c0c0c0|c0c0c0|c0c0c0|c0c0c0|c0c0c0|c0c0c0|c0c0c0|c0c0c0|c0c0c0|c0c0c0|c0c0c0|c0c0c0|c0c0c0|c0c0c0|c0c0c0|c0c0c0|c0c0c0|c0c0c0|c0c0c0|c0c0c0|c0c0c0|c0c0c0|c0c0c0|c0c0c0|c0c0c0|c0c0c0|c0c0c0|c0c0c0|c0c0c0|c0c0c0|c0c0c0|c0c0c0|c0c0c0|c0c0c0|c0c0c0|c0c0c0|c0c0c0|000000|000000|000000|000000|000000|000000|000000|000000|000000|000000|000000|000000|000000|000000|000000|c0c0c0|c0c0c0|c0c0c0|c0c0c0|c0c0c0|c0c0c0|c0c0c0|c0c0c0|c0c0c0|c0c0c0|c0c0c0|c0c0c0|c0c0c0|c0c0c0|c0c0c0|c0c0c0|c0c0c0|c0c0c0|c0c0c0|c0c0c0|c0c0c0|c0c0c0|c0c0c0|c0c0c0|c0c0c0|c0c0c0|c0c0c0|c0c0c0|c0c0c0|c0c0c0|c0c0c0|c0c0c0|c0c0c0|c0c0c0|c0c0c0|c0c0c0|c0c0c0|c0c0c0|c0c0c0|c0c0c0|c0c0c0|c0c0c0|c0c0c0|c0c0c0|c0c0c0|c0c0c0|c0c0c0|c0c0c0|c0c0c0|c0c0c0&chd=t:5,5,5,5,10,5,5,5,5,10,19,29,14,14,24,62,24,5,19,10,10,24,10,14,10,29,14,24,100,14,10,10,19,24,52,14,24,43,29,14,24,24,10,19,29,24,19,29,10,38,5,5,5,24,10,10,24,52,14,14,14,10,10,5,19,10,5,14,14,10,14,19,14,19,10,5,5,10,10,10,10,24,10,5,5,5,5,10,14,24,5,5,10,5,14,14,5,5,14,5,29,10,14,5,14,10,62,10,10,19,5,5|3,2,4,4,4,10,4,10,5,100,24,56,52,69,52,75,42,29,41,35,25,35,53,45,52,75,51,75,100,53,29,75,32,83,100,62,83,100,38,29,56,62,42,62,29,39,53,32,32,48,43,20,28,37,41,27,34,43,41,17,37,17,42,22,59,24,23,47,23,43,19,50,50,47,44,43,42,42,40,40,38,37,35,35,35,35,34,34,34,33,29,26,23,22,24,35,16,20,29,25,25,21,11,16,21,23,16,20,15,22,16,23
Which produces:
I'm having trouble forcing the black dots to the top, does anyone know how I can achieve this?
Move black dots to the end:
http://chart.apis.google.com/chart?chxr=0,0,21|1,0,320&chxt=x,y&chs=600x500&cht=s&chco=c0c0c0|c0c0c0|c0c0c0|c0c0c0|c0c0c0|c0c0c0|c0c0c0|c0c0c0|c0c0c0|c0c0c0|c0c0c0|c0c0c0|c0c0c0|c0c0c0|c0c0c0|c0c0c0|c0c0c0|c0c0c0|c0c0c0|c0c0c0|c0c0c0|c0c0c0|c0c0c0|c0c0c0|c0c0c0|c0c0c0|c0c0c0|c0c0c0|c0c0c0|c0c0c0|c0c0c0|c0c0c0|c0c0c0|c0c0c0|c0c0c0|c0c0c0|c0c0c0|c0c0c0|c0c0c0|c0c0c0|c0c0c0|c0c0c0|c0c0c0|c0c0c0|c0c0c0|c0c0c0|c0c0c0|c0c0c0|c0c0c0|c0c0c0|c0c0c0|c0c0c0|c0c0c0|c0c0c0|c0c0c0|c0c0c0|c0c0c0|c0c0c0|c0c0c0|c0c0c0|c0c0c0|c0c0c0|c0c0c0|c0c0c0|c0c0c0|c0c0c0|c0c0c0|c0c0c0|c0c0c0|c0c0c0|c0c0c0|c0c0c0|c0c0c0|c0c0c0|c0c0c0|c0c0c0|c0c0c0|c0c0c0|c0c0c0|c0c0c0|c0c0c0|c0c0c0|c0c0c0|c0c0c0|c0c0c0|c0c0c0|c0c0c0|c0c0c0|c0c0c0|c0c0c0|c0c0c0|c0c0c0|c0c0c0|c0c0c0|c0c0c0|c0c0c0|c0c0c0|000000|000000|000000|000000|000000|000000|000000|000000|000000|000000|000000|000000|000000|000000|000000&chd=t:5,5,5,5,10,5,5,5,5,10,19,29,14,14,24,62,24,5,19,10,10,24,10,14,10,29,14,24,100,14,10,10,19,24,52,14,24,43,29,14,24,24,10,19,29,24,19,10,5,19,10,5,14,14,10,14,19,14,19,10,5,5,10,10,10,10,24,10,5,5,5,5,10,14,24,5,5,10,5,14,14,5,5,14,5,29,10,14,5,14,10,62,10,10,19,5,5,29,10,38,5,5,5,24,10,10,24,52,14,14,14,10|3,2,4,4,4,10,4,10,5,100,24,56,52,69,52,75,42,29,41,35,25,35,53,45,52,75,51,75,100,53,29,75,32,83,100,62,83,100,38,29,56,62,42,62,29,39,53,42,22,59,24,23,47,23,43,19,50,50,47,44,43,42,42,40,40,38,37,35,35,35,35,34,34,34,33,29,26,23,22,24,35,16,20,29,25,25,21,11,16,21,23,16,20,15,22,16,23,32,32,48,43,20,28,37,41,27,34,43,41,17,37,17
EDIT: BTW: There is no z-index for chd based on goolge's documentation
Have you tried debugging using the Chart Wizard? It seems your black data points are located in the middle of your supplied data. Move them to the start/finish and see if that helps.

Resources