CSS Filter for realistic BJS2 screen preview? - LCD mimicry proof of concept

[espruino-discuss2]

Posted at 2023-11-04 by morganwable

Hey, all - I came up with a quick patch to the web IDE that makes it display colors that mimic the actual in-person look and feel of a Bangle.js 2. It isn't 100% accurate, but I think it's pretty good for having eyeballed it, and especially so for it being a CSS filter. Here are some before and after comparisons:

the following CSS will not work if copy and pasted directly because it has been edited for readability. Find and replace the fake pound signs with real ones to fix it, or download the attached file.

/* Bangle.JS 2 Screen Color Response Simulation
                      v0.1
                  Morgan Wable                   */

body {
  /* This turns the background black to assist visibility: */
  background-color: black; 
}

/* This selector targets the wrapper for the emulated screen: */
＃gfxdiv { 
  /* And this forces the simulated Bangle.JS 2 screen to render at
     a 1:1 pixel ratio. This should help a lot when it comes to
     doing anything with precision, or with previewing
     dithered graphics: */
  transform: translate(-50%, -50%) scale(1, 1) !important;
}

/* This selector targets the emulated screen itself: */
＃gfxdiv canvas {  
  /* This filter has multiple attributes, each of which do a lot
     of heavy lifting. */

  filter: blur(0.55px)  /* Mimic the sweet, soft glow of your
                           Bangle.JS's transflective LCD display. */

        brightness(.7)  /* Let's temper our expectations for the
                           backlight while we're at it. */

        contrast(.75)   /* The contrast is pretty good in the sun...
                           but this stylesheet is here to help
                           you prepare for the worst!  */

        grayscale(.66); /* Raw 3-bit color viewed on any other kind
                           of display looks awful. This filter simply
                           decreases the saturation to avoid that
                           while also making the filter look 
                           a bit more releastic. */

  /* The following two lines remove the border because it looks
     better that way. */
  border: none;
  position: relative; top: 6px; left: 6px;
}

＃border {
  display:none; /* Hides the border button. */
}

​/* Here's the secret sauce - this is a pseudo element that acts as a
   slight indigo overlay over the whole image, to mimic the backlight.  */
＃gfxdiv:after {
  position: absolute;
  content: '';
  display: block;
  top: 6px;
  left: 6px;
  height: 176px;
  width: 176px;
  background: hsla(245, 45%, 25%, .4);
  mix-blend-mode: normal;
  pointer-events: none;
}

I'd make a pull request to add this as an option within the IDE, but I'd be out of my depth. Failing that, this works perfectly fine as a user style - I currently have it enabled through Stylus.

Hopefully this is useful to anyone who wants it!

The filter values are all adjusted by eye and to taste - they should be more or less self-explanatory enough to tweak if you'd like the effect to be less exaggerated - but in my case, holding the watch up to my screen looks shockingly accurate in person - moreso than I expected.

Anyway, let me know if you have any comments or suggestions.

Edit: The forum rich text editor keeps adding text to my CSS selectors and I haven't been able to get rid of them, so I've attached a raw .css file containing the same styles except they should theoretically work.
It also won't let me delete that duplicate screenshot attachment for some reason. Sorry.

---

Attachments:

• mac2 comparison.png
• bangle js color sim v0.1.css

[gfwilliams]

Posted at 2023-11-06 by @gfwilliams

Thanks! That seems like a neat idea!

I was at one point thinking of having a 3D preview, but that's probably over the top :)