• 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
                      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.

    2 Attachments

  • 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 :)

  • Post a reply
    • Bold
    • Italics
    • Link
    • Image
    • List
    • Quote
    • code
    • Preview

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

Posted by Avatar for morganwable @morganwable