appearance of element diagrams on front page

[dnarnold]

The images used in the front page table to label the 1D elements did not scale well. If you download the image used in the P3 box, for instance and magnify it, you can see that the interval line itself got very antialiased and is no longer black and the interior dots, especially, became fuzzy. The net effect is that they are hard to see. I think a small sharp image would work better. This problem effects the 2D elements somewhat as well. The 3D elements are better, probably because we see mostly the black rather than gray interior DOFs. In an ideal world, probably even they would be reoptimized for the scaled down web version.

[hnarayanan]

I've tried improving this but couldn't improve the situation starting from the PNGs in shared Dropbox folder. @alogg, could you ask the designer to scale the original vector images down to two sizes: small (100px width) and large (480 px width) such that they look acceptably clear?

Replacing the current set of images with this better set should resolve this issue.

[dnarnold]

Anders -- Please encourage Mattias to move swiftly on this. Our article should start appearing in people's mailboxes in a bit over 3 weeks, and it would be embarrassing if the web site were not operational by then.

Thanks -- Doug

On 10/05/2014 06:41 AM, Harish Narayanan wrote:

I've tried improving this but couldn't improve the situation starting from the PNGs in shared Dropbox folder. @alogg https://github.com/alogg, could you ask the designer to scale the original vector images down to two sizes: small (100px width) and large (480 px width) such that they look acceptably clear?

Replacing the current set of images with this better set should resolve this issue.

— Reply to this email directly or view it on GitHub https://github.com/hnarayanan/fe-table/issues/13#issuecomment-57933530.

[alogg]

Will try to get these images from the designer today. Is this only for the 2D images?

[hnarayanan]

Preferably all images, but 1-D, 2-D and 3-D in decreasing order of priority as @dnarnold pointed out initially.

[alogg]

I got the response now that the images are already in Dropbox. Check the directory "2d-figurer PNG". These are 472x472. Will they do? It seems close enough to 480 to me.

[hnarayanan]

That's not the problem (the large ones I mean). The problem is with the tiny scaled down ones on the table itself. If I scale down the PNGs from this to say 100px wide, they look aliased as @darnold mentioned. If the designer can start with his original vector images and create these scaled down ones that look good, that will help.

[alogg]

ok, I'll ask.

[alogg]

A bunch of new files just dropped into my dropbox. Check it again now.

[hnarayanan]

Are these the _lo folders in the elements folder? (I ask because I don't see a list of recently updated files on the web UI and need to guess).

[alogg]

Yes

[dnarnold]

I wasn't much convinced by the images in the Linjer_lo directory, so I made my own set of 1D images using inkscape. You can find them in the Dropbox in a subdirectory called diagrams-1D. Harish, can you check whether these are useful to you? These are 80 x 6 pixels with the interval being 2 pixels thick, not 1. I made the interior DOFs black, same as the end point DOFs. All of this is easy to adjust if desired.

[dnarnold]

Now that we're in the final stages I took another look at what would be needed to improve the 1D element diagrams in the front page and I made a new version of the diagram for dP3_interval which is a drop in replacement for the image file currently used. I think its a big improvement, but before I make the others, see what you think. Here is a screen shot. Compare dP3 to the other diagrams here.

[hnarayanan]

It is a big improvement, please make the others.

[dnarnold]

All seven files can be found in the subdirectory diagrams-1D of the dropbox. They should be drop in replacements for the files there now. These use a 2 pixel line, 6x6 dots, and absolutely no antialiasing or grayscale. Of course it would not be a big deal to change if desired.

[hnarayanan]

I have replaced the images and they look a lot clearer.

I've left the larger images (in the popup unchanged, and with the grayscale) because it fits the pattern of the rest of the images in the table. For this smaller set, we've made a conscious choice to go with something slightly inconsistent with the express goal of visual clarity.

Thanks for the figures.

[dnarnold]

Yes, this is what I had in mind, and it does look a lot better. I tried using my diagrams on the front page but with the interior DOFs in 50% gray and it did not look nearly as good to me.

[alogg]

I think the new diagrams with the more prominent dots are an improvement, but if I wanted to be picky I'd like the lines to be thinner. They look too thick compared to the lines in the 2D and 3D drawings. To be really picky, I think the dots could be reduced by say 15% and the lines by 50%...

[hnarayanan]

When you guys reach a consensus, please send me the drop-in replacement images. It is trivial to change.

[dnarnold]

OK, I have made a thinner set of diagrams which is now diagrams-1D-thinlines. Attached is a screenshot comparing the two sets. I think I agree with Anders that the thinner set is better, but let's see what you all think.

Here's the story on this. The first set I made had the line exactly 2 pixels thick, solid black. The dots were exactly 6x6 black rectangles, except the four corners were gone. Every other pixel was transparent. The new set is also pure black and transparent, but the line is 1 pixel thick and the dots are 5x5 rectangles minus the four corner pixels.

I didn't use any antialiasing. But the thing is, when the browser renders the image it is not at its normal size (100x43 pixels including the background) and so the browser displays it with antialiasing. The result then depends on a lot of things, especially the screen resolution and the size of the browser window. So the actual appearance will vary greatly. If you want to see the images as created, you can right click the mouse precisely over the image and use your browser's version of "Open image in another tab".

Anyway, take a look and decide.

[hnarayanan]

1. I see both sides of this argument and don't have a strong opinion on this. I will go with whatever you two concur on.
2. And when you next generate the final set of graphics, please make it 80px instead of 100px wide, which will allow it to be less scaled (and thus fewer aliasing-related problems) on a wider range of screens.

[dnarnold]

Cropping all the images is just the imagemagick (convert -crop command. I have created two new directories diagrams-1D-80wide (with the 2 pixel bar) and diagrams-1D-thinlines-80wide (with the 1 pixel) bar.

[hnarayanan]

Great! I will replace these images once Anders agrees that this latest set is good enough (given the concerns we're trying to address here).

[alogg]

I agree! New images look great. Please go ahead.

[hnarayanan]

I've updated them. And with that, this long-standing issue gets closed (yet again)!