Grid not visible on a white background

[MarkkuR]

The grid is not visible on a white background. Petmate 0.8.2.

[nurpax]

Indeed it's not. :(

IIRC it's just a 0.4 opacity white grid that it layers on top of everything else (code). Would need some way to composite the grid with CSS such that it doesn't disappear on white like it does now.

[MarkkuR]

Would it be possible to use a different grid color based on the bg color ie. black grid for light colors?

[manuelvio]

I often use a function to extract luminance from background color, if it's greater of 0.5 I use a dark grid (or font), otherwise the grid is lighter. If you like it I could make a PR.

[MarkkuR]

Setting the grid color based on the bg color is ok in most cases, but even then you can get it to disappear if you, say, fill the screen with blocks of the opposite color. What I resorted to myself was a pixel-level kludge where the grid individually brightens dark pixels and vice versa. In Krissz's editor there's a stippled black/white grid that is visible on any color, but it looks rather invasive.

[manuelvio]

I think it should be possible applying something like CSS mix-blend-mode to the grid but, unfortunately, it seems unsupported in React Native (or, I wasn't able to properly apply it yet) However the black-white grid can be obtained in petmate as well, in a non too invasive way by tweaking its opacity. I've included a screenshot of the overall effect, I can modify my PR if you like.

[nurpax]

and by React Native I think you meant Electron? :)

I also thought about using some of these blend modes to do this. If a recent Chrome supports it well enough for this, there is hope as then upgrading Electron should bring the support. An upgrade is needed soon anyway to add Apple M1 support.

[manuelvio]

D'oh! Currently I'm hopping on so many typescript projects that I'm starting to mix them in my mind :D

The blend mode is the simpler way to cope with this issue IMO, it should give the best result with almost no effort. I made a few tries but I wasn't able to get the effect I expected. On the other hand, the dashed grid is more of a "plan B": it does the trick but it's less visually pleasant. I think it's more of a matter of taste.

[MarkkuR]

My issue with the stipples is that they create at char edges visual patterns that aren't actually there.

[nurpax]

@manuelvio If you have the time and motivation to try out the blend mode, it should be possible to mock it up in just some HTML and CSS. I can promise I will integrate and ship a new version if that happens. I've been just too lazy with Petmate this year.

I'm not a big fan of stipples either.. If there's no easy blend mode based solution, then of course something closer to what Markku is doing is possible too. I just like the simplicity of the current solution -- it's nice that the grid component doesn't need to know anything about the petscii color values.

[manuelvio]

Sure thing, I'll try to find a way to make it work.

[MarkkuR]

I recently fiddled around with Processing blendmodes which are very similar, but it has turned out somewhat tricky to get a sensible grid even with two passes. Some combination always disappears or the grid has to be of some ugly color. Also tried finding the most distant grayscale from any color on the palette (for Pepto it's 219), which was sort of ok but somewhat faint on certain colors.

http://www.kameli.net/~marq/bestgray.pde

[manuelvio]

So I've managed to play a little with blend modes and I've found that among these only "difference" and "exclusion" can do the trick, in order of relevance. Following here are a few screenshot of my tries:

Vice exclusion:

Vice difference:

Pepto exclusion:

Pepto difference:

Unfortunately, when it comes to middle grey tones the overlayed lines tones contrast is pretty low, but I think this is the best one can expect with blending modes as they are. Note that luminance, in this case, doesn't have a role since blending is managed by Chrome.

Let me know if this can be a suitable solution and I'll make a new PR.

[nurpax]

Looks pretty sweet to me! @MarkkuR, does this seem reasonably good for you? I like the simplicity of just using CSS blendmode.

@manuelvio the blend modes worked in the Electron version Petmate uses?

[MarkkuR]

Well, it's definitely better than a disappearing grid. Somewhat annoying that there are so many blendmodes, but none of them does exactly what's needed here :) Might be worth calculating or visually assessing which greyscale stands out best on all the colors – by my observations darkening a light color even slightly is well noticeable whereas lightening black needs a lot more difference.

[manuelvio]

@nurpax I yarndebugged against a cloned repository, so I guess Electron's version is right. Are there limitations or specific dependencies regarding this that I missed? @MarkkuR Grid lines are drawn with a #808080 gray at the moment, I tried a pure wihte and a pure black with disappointing results, so I settled on this nuance for now. It' pretty generic (and, by that means, unoptimized) and it doesn't take into consideration any specific palette. Actually, the next step could be finding the best gray for the current palette, so I could borrow your code for this task and make a few more tries.

[MarkkuR]

Even if the piece calculates the "optimal" grayscale, I'd guess it's still better to use it as a starting point only and then tweak it a bit up or down based on subjective visual evaluation. Some values are better in absolute terms but might still look worse :)

[manuelvio]

I agree, we could introduce a keyboard shortcut for that, nothing particularly invasive but still useful if the default gray falls short.

Il giorno mar 1 dic 2020 alle ore 13:00 Markku Reunanen < notifications@github.com> ha scritto:

Even if the piece calculates the "optimal" grayscale, I'd guess it's still better to use it as a starting point only and then tweak it a bit up or down based on subjective visual evaluation. Some values are better in absolute terms but might still look worse :)

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/nurpax/petmate/issues/199#issuecomment-736507611, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAGCQ74T7IQ4PW6PKK4SUMDSSTLEXANCNFSM4TXVTKLA .

[MarkkuR]

For the default palettes a fixed good enough value would probably do, but for user-defined ones need some more logic there.

[nurpax]

I like to think that a patch is good if it improves previous state and doesn't make the code itself harder to read or maintain. So it sounds like Manual already has enough done to justify merging something.. :)

[manuelvio]

Hi guys, I've just made a PR with the blend modes on grid lines. Based on my tests this should cover almost all cases, but if a problem should arise (expecially with custom palettes) let me know.

[nurpax]

Closing this as @manuelvio 's PR was merged earlier.