Align different plot shapes

Background:

I have a kind of Gantt chart, composed of horizontal segments with different events marked by symbols of different shapes. I want the symbols to have exactly the same height as the segment (potential topic for next question!), and symbols should be center aligned within each segment.

Issue:

The problem is that different shapes seem to have different alignment. In my small example, shape 0, 3, 4, 5 are center aligned (four first symbols from left). In contrast, the circle and the two triangles are offset.

d1 <- data.frame(x = -1, xend = 7, y = 1, yend = 1) d2 <- data.frame(x = 0:6, y = 1)  library(ggplot2) ggplot(data = d1, aes(x = x, y = y)) +   geom_segment(aes(xend = xend, yend = yend), size = 8, color = "grey80") +   geom_segment(aes(xend = xend, yend = yend), color = "red") +   geom_point(data = d2, shape = c(0, 3, 4, 5, 1, 2, 6), size = 8) +   theme_void() 

Zoom in on PDF output:

---

I have also desperately tried a geom_text equivalent with unicode symbols. However, the alignment is now even harder to fathom.

geom_text(data = d2,           label = c("\u25A1", "\uFF0B","\u2715","\u25C7", "\u25CB", "\u25B3", "\u25BD"),           size = 8, vjust = "center")  

---

No obvious hints in ?geom_point, ?aes_linetype_size_shape or ?pch. I have googled "r plot align center justify symbol shape pch" - have I missed any keywords?

---

Question: How can I align different shapes without hardcoding?

3 Answers

Answers 1

It's not really an answer, but didn't fit in a comment.

To me, the circle isn't worse than the square, and looking at all first 26 symbols (pch = 0:25), it seems that (theoretically, not sure about various devices) only the triangles wouldn't fit your purpose.
I think it's generally reasonable that the point they represent sits at their mass center, because that's where the eye would expect it with the most common use cases of such symbols.

Proof for the mass center is here: https://github.com/wch/r-source/blob/91dda45a5e4e418d0efed17db858736a973d4996/src/main/engine.c

void GESymbol(...

case 2: /* S triangle - point up */         xc = RADIUS * GSTR_0;         r = toDeviceHeight(TRC0 * xc, GE_INCHES, dd);         yc = toDeviceHeight(TRC2 * xc, GE_INCHES, dd);         xc = toDeviceWidth(TRC1 * xc, GE_INCHES, dd);         xx[0] = x; yy[0] = y+r;         xx[1] = x+xc; yy[1] = y-yc;         xx[2] = x-xc; yy[2] = y-yc;         gc->fill = R_TRANWHITE;         GEPolygon(3, xx, yy, gc, dd);         break; 

So you could of course modify the source here to say:

yy[0] = y + (r+yc)/2;

yy[1] = y - (r+yc)/2;

yy[2] = y - (r+yc)/2;

Answers 2

I have a feeling that this problem doesn't have a solution (at least not one that is reasonably feasible). The issue itself seems to be rooted in grid which is what ggplot2 is built upon. For example:

library(grid) grid.newpage() vp <- viewport() pushViewport(vp) grid.rect(x = 0.5 , y = 0.5 , width= 1 , height = 0.14) grid.points(x = 0.1 , y = 0.5, pch = 0 ,size = unit(1,"in")) grid.points(x = 0.3 , y = 0.5, pch = 24 ,size = unit(1,"in")) grid.points(x = 0.5 , y = 0.5, pch = 25  ,size = unit(1,"in")) 

Because of this I think it is highly unlikely that there will be any ggplot2 options that will fix it. As RolandASc points out I think your best bet is to modify the source data to adjust for the offset of the symbols though I believe this in practice is very risky and personally wouldn't advise doing it.

Answers 3

You have four options:

1. Write (/adapt) a new R graphics device that centres points as you require – you could have a look at gridSVG for instance

2. Get R-core to accept a modification of the underlying drawing routine (they may be open to a non-breaking new option to centre the points if you have a good use case to present)

3. Create a new geom at ggplot2 level wrapping geom_point with a hard-coded offset to undo the optical offset in the engine

4. Create a new geom that does not rely on those shapes but draws polygons of your own design

Read More

Align two images in OpenCV

I have two images (see below). These images represent the contours of a pair of cables and were captured using laser based 3D triangulation. The first image is captured with the left camera, while the second one with the right camera. As can be seen, these images are partially overlapping. The left part on the first image partly corresponds to the left part on the second image. The same holds for the right part. I want to merge these two images into one image so that the corresponding parts overlap.

Next to these images, I also have the following information at my disposal:

• A 3x3 homography matrix H of left and right camera
• Intrinsic camera parameters K of left and right camera
• Distortion coefficients D (9 of them) of left and right camera
• Offset O of left and right camera

This data is specified below.

In Halcon, I have tried to do this using mosaicking:

• Extract characteristic points in both images using Harris
• Compute a projective transformation matrix from one image to the other using Ransac.
• Apply the found projective transformation matrix.

This approach was however not successful. I am looking for a similar approach in OpenCV or Halcon or an approach (also in OpenCV or Halcon) that makes use of the calibration data I have at my disposal, such as the homography matrix and camera matrix.

Please provide ample explanations, if possible, since I am only starting out with Machine Vision.

Hl := [0.00175186,   4.73083e-05, -0.00108921,        0.000780817, -0.00145615,   0.00118631,        0.0534139,   -0.030823,     1.0        ] Kl := [4578.21,   -5.05144, 759.766,        0.0,     4576.87,    568.223,        0.0,        0.0,       1.0   ] Dl := [-0.12573, 0.0533453, -0.575361, -0.0130272, 0.00348033, 0.00852617, -0.0271142, 0.0176706, -0.00575124] Ol := [0.0, 150.0]  Hr := [0.00173883, -2.94597e-05, 0.00109873,       -0.00077676, -0.0014687,   0.00121393,       -0.0653829,  -0.0443924,   1.0        ] Kr := [4591.96,  -4.55317, 1284.74,        0.0,    4591.19,     534.317,        0.0,       0.0,        1.0   ] Dr := [-0.110751, -0.349716, 3.86535, 0.017393, -0.00364957, -0.00633656, 0.0338833, -0.0212222, 0.00543694] Or := [0.0, 100.0] 

0 Answers

Read More

Multiline string alignment / indenting in Eclipse

I'm using Eclipse Luna and I want to align / indent multi-line string literals so that that each line begins on the same column. But I'm having trouble convincing Eclipse to do it in the Code Style Formatter.

This is how it's currently formatting:

    final String string1 =         "abc" +             "def" +             "ghi";      System.out.println(         "abc" +             "def" +             "ghi");      System.out.println("" + // an ugly workaround         "abc" +         "def" +         "ghi");      method("xyz",         "" +           // Especially ugly in this case             "abc" +             "def" +             "ghi"); 

But this is what I really want:

    final String string2 =         "abc" +         "def" +         "ghi";      System.out.println(         "abc" +         "def" +         "ghi");      // Or something like this would be fine too     final String string3 =         "abc"       + "def"       + "ghi";      System.out.println(         "abc"       + "def"       + "ghi"); 

It seems like such a simple and desirable format. Just start each part of the broken-up line on the same column. But I haven't been able to find a way to do it anywhere.

1 Answers

Answers 1

The following settings sort of work for your 2 first examples. Copy paste the your example into a block and then reformat. With this setting however you need to manually break the lines, the formatter will then indent them and keep from joining them. You will probably need to tweek other settings since the "default indention for wrapped lines" is 0.

Under Line Wrapping:

1. Check "Never join already wrapped lines"

2. Set "Default indention for wrapped lines:" to 0

3. Expressions / Assignments:

   • Wrap where necessary,
   • Indent by one

4. Expressions / Binary expressions:

   • Wrap where necessary,
   • Check Wrap before operator,
   • Default indention

There is also the option to disable the formatter and then re-enable it after the code you want to format manually. This can be useful when you have tabular data in initializers you want to format for readability. This is under Off/On Tags in the formatter settings.

Read More

cannot center table in firefox

So I have these two tables

    <table  id="pointsTable" >           <th> One </th>                                                      <th> Two </th>                                          <th> Three </th>           <tr>            <td  id="one" ></td>                           <td  id="two"></td>                          <td  id="three"></td>                                       </tr>     </table>                                                                                 <table id="pointsTableSmall" style="text-align: center;">           <tr>              <th> One </th>           </tr>           <tr>           <td  id="one"></td>           </tr>           <tr>           <th>Two </th>           </tr>           <tr>           <td  id="two" ></td>           </tr>           <tr>           <th>Three</th>           </tr>           <tr>           <td  id="three" ></td>           </tr>    </table> 

The first is visible in large screens and the second one, the smaller, is visible in smaller screens.

Their css is

#pointsTable, #pointsTableSmall{     border: 0;     border-style: 0;        margin: auto !important;     padding: auto;     text-align: center !important;      }  

Their wrap div has

#pointWrap{     text-align: center; }  

In Firefox 45.0.1 the table is aligned left , has margin : auto and no padding . There is a gap in the right side between the left aligned-gap an its container div.

I cannot center that pointsTableSmall table. How can I fix this?

Thanks

Update

Now, the table is

            <div class="container center-block" id="pointsTableSmallWrap">                 <table id="pointsTableSmall" align="center" class="center-block">                     <tr>                       <th>Hey </th>                     </tr>                     <tr>                       <td class="heyT", id="heyTS"> more hey</td>                     </tr>                     <tr>                       <th>Hi</th>                     </tr>                     <tr>                       <td class="hiA" id="hiAS" ></td>                     </tr>                     <tr>                       <th>Yo</th>                     </tr>                     <tr>                       <td class="yoU" id="yoUS" ></td>                     </tr>                </table>             </div> 

Each <td> has graphics from the progressbar.js library.

The css is

#pointsTableSmall{     display: none;     text-align: center !important;           align-self: center;      alignment-adjust: central;      align-content: center;     align : center;     padding: 0;     margin: 0 auto;     width: 100%;     margin-left: 1%;     margin-right: 1%; }  #pointsTableSmallWrap{     align-content: center;     align-self: center;     align-items: center;     text-align: center;     align :center;     margin: 0 auto;     width: 100%; }  #pointsTableSmall > tbody, #pointsTableSmall > tbody > tr{     align-content: center;     align-self: center;     align-items: center;     text-align: center;     align :center;     margin: 0 auto;     width: 100%;     margin-left: 1%;     margin-right: 1%; } 

The problem

In Firefox the table always sits on the left (check image to help you). I dont know how to center it. I tried

I replaced table with bootstrap div class="col-md-4" but they go one under the other even in medium screen sizes and look ugly

I replaced table with flexbox that is awesome in small screens , but again in medium screens they dont stick one net to the other and look ugly

I tried adding margin-left, margin-right on the tables and the wrap , but nothing.

Please help me center this table

Thanks

8 Answers

Answers 1

There are quite a few things wrong in your code.

You've put a comma between class="heyT" and id="heyTS" in your HTML, as well as some unneeded whitespace

In your CSS, you've used alignment-adjust, which isn't supported by any browser (I think?). Googling the property didn't make the W3C or Mozilla spec show up. You've also used align-self and align-content, which are flex-box properties. You are not using flex-box in your code. You're also using align, which doesn't have a meaning.

Then there's the place where you apply margin: 0 auto;, but after that you apply margin-left: 1%; and margin-right: 1%;. Having these rules together means you end up with a margin of 0 1% 0 1% (0 at the top and bottom. 1% at the left and right).

The solution to your problem

In this Fiddle, you can see that the table has a width of 50% and that it's aligned to the center. You can remove the width of 50%, and have it be as small as possible.

All I've done is remove the container div, as it didn't serve any purpose. I also removed the styles that you were applying to #pointsTableSmall > tbody, #pointsTableSmall > tbody > tr also because it didn't serve any purpose.

Basically, the thing stopping you from having it centered, was because the table had a width of 100%. The only thing necessary to center a table is margin: 0 auto; and a width that isn't 100%

Hope this helps

Answers 2

overflow:auto; 

Quite often, I find that I've missed a bit of CSS which is critical in allowing Margin: 0 auto; to work. It must have a width. It mustn't be floating left, right or centred. It must be displayed block. You mustn't give the div a fixed position.

Refer here: What, exactly, is needed for "margin: 0 auto;" to work?

Answers 3

The problem is that you're overriding your own declarations of margin, with:

margin: 0 auto; margin-left: 1%; margin-right: 1%; 

The code becomes:

margin: 0 1%; 

For hidding the table in media queries, changing display property between block and none is enough.

a) To center the table:

#pointsTableSmall {   width: 100%;   margin: 0 auto; } 

b) To center td elements:

<td align="center" id="heyTS"> more hey</td> 

Example: https://codepen.io/anon/pen/aNEgxz

Answers 4

I forgot to mention that the css of the #pointsTableSmall has display: none; and then I wrote some media-queries to make it visible in small screens.

So in my media queries I do

  #pointsTableSmall {     display: block;   } 

All I had to do is replace the css of #pointsTableSmall with the one Gust van de Wal wrote here.

Completely remove the css about #pointsTableSmallWrap and #pointsTableSmall > tbody, #pointsTableSmall > tbody > tr and remove the pointsTableSmallWrap div itself.

Also, and here is the trick, replace

  #pointsTableSmall {     display: block;   } 

with

  #pointsTableSmall {     display: inline;   } 

display: inline is the default value.

This was the trick. This. Was. The Trick. Just a simple value. Oh, I love CSS.

Answers 5

I would suggest you to encapsulate the table in a div and give the center alignment to this div with display: inline-block; and margin: auto;. You will probbaly need to give a width=100% to your table

Answers 6

the question is not clear but i think you want to make table center instead of text align center so,

May be your table has float property in other css that's why your element is not centering margin:auto; will not work with floted element if you want to center you have to remove float property.

Another Solution take another element before table and use table inside it for example

Html

<div class="center">    // your table here </div> 

CSS

.center {    width:500px; /* waht ever width */    margin:auto; } 

Note: in your code you are using Margin property in tr, The margin property don't work with display:table display:table:cell; display : table-row see here

Answers 7

if you want to make the inner table in center , no matter what you do when you resize , just add this

1. margin-left:auto
2. margin-right:auto

into the id of the specific table you want in the css...

Answers 8

<table align="center">

Use this attribute in table it will be center aligned in all browsers

Here is the fiddle

https://jsfiddle.net/yudi/m8pyhenx/3/

Read More