Avatar for morganwable


Member since Jul 2022 • Last active Jul 2024
  • 2 conversations

Motion graphics, VFX for film, and UX

Most recent activity

  • in Bangle.js
    Avatar for 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
                      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.

  • in Bangle.js
    Avatar for morganwable

    back (marks read)

    This is something that has confused me re: the current stock message notification app. I'm still not entirely clear on what the difference between "checkmark" and "X" is. I've noticed that about half the time, the checkmark opens the app on my phone.

    For my personal needs, I essentially never want that to happen. The only two options that would be relevant to my workflow would be:

    • mark as read on phone and watch
    • mark as read on watch only

    I never want to use the watch to open the relevant app, my phone can already do that from the pulldown menu.

    I also never want to exit a message dialog without marking it as read on the watch - having a backlog of notifications on my phone is already overwhelming enough, but having to navigate to the Messages app on my Bangle, then painstakingly delete ones I accidentally missed (or dismissed with the button rather than the screen) one by one is a chore. Essentially, my preferred functionality would be one and done - the only decision I have to make when faced with a message popup on my bangle should be whether or not to mark it as read on my phone. Then it's gone.

    I assume that's something I could figure out how to implement on my own next time I have some real free time to sink my teeth into.

    I'd also very much like for the buttons to be considerably larger - and stretch to the edges of the display - so that I can address those message popups without having to stop moving to aim for the buttons.

    Another question, actually - is there a way to completely disable the Messages widget? At least the visible/clickable one so that I can still get popups when in apps other than the watchface. Like I said, I want to completely do away with watch-side unread notifications. Having app icons on my widget bar at all is something I see as a minor nuisance more than anything.

  • in Bangle.js
    Avatar for morganwable

    No solutions yet, but I did narrow in on what might be causing it - it's definitely a gadgetbridge issue.

    I had my watch disconnected for over a week, and I'm 95% sure it didn't freeze that entire time. I reconnected it this morning and already had to reboot it once. Temperature doesn't seem to be a factor nor does disk space - compacting and removing apps has no apparent effect on the phenomenon.

    I forgot to enable debug logs previously but I'll just did, and I'll respond with info if I find anything promising.

    My current hypothesis is that it happens whenever too many things happen at once - specifically, whenever it's called upon to load something when a "loading" box is already on the screen. A "loading" box seems to appear 2/3s of the time it crashes. My thinking: is it possible that a notification coming in at the same time as a scheduled timer is what's causing the crash?

    Like I said... I'm 90% sure it exclusively happens whenever notifications are active.

    My branch is about 600 commits behind, though, so perhaps I should update before doing any more digging? Either way, it's a busy week for me. Not sure when I'll get around to looking into this more.

  • in Bangle.js
    Avatar for morganwable

    I second the above comment.

    While we're on this topic, it would be very nice to somehow establish a standard for some other things:

    • side button as "back" instead of "confirm"
    • standardized haptic feedback
    • usage of screen-edge buttons as opposed to buttons near the bottom of the screen (easier to hit)

    Obviously these things wouldn't be required, just suggested. The Bangle.js platform as a whole could use a slight brushing up when it comes to UX practices.

  • in Bangle.js
    Avatar for morganwable

    Is anybody else currently dealing with seemingly random crashes and freezes?

    Occasionally, multiple times a week (most days, rarely more than once a day), my Bjs2 will, without warning, become unresponsive. This almost exclusively happens on the clock face, if only because I'm usually in the habit of closing apps whenever they're open. I haven't been able to figure out how to reproduce this behavior consistently, but I'm trying to troubleshoot regardless.

    Current details:

    • I have a decent number of apps installed. I suspect it could be a memory leak?
    • The clock face in question is the LCARS one from the app loader - specifically the one with brighter colors, not Stardate Clock. It's currently in full screen mode, no widgets.
    • Said clock face intermittently gives me a "DISK" warning. Going to App Manager and running "Compact" seems to alleviate this issue. I have not yet measured the effect of doing this regularly w/r/t preventing these freeze incidents.
    • I'm connected to the BJS fork of Gadgetbridge. No weather or other online apps set up so far.
    • No suspicious battery drains.
    • I'm living in the east coast United States and the past few weeks it's been 90F / 32.2C out consistently. I'll take note of the core temp reading (if I can find a widget for it) to see if it could be an overheating issue. The most recent two freezes occurred outside and in direct sunlight; and right next to the fan on my laptop. I'm considering this a strong possibility.

    So... I'm not totally sure what to do to figure it out but I guess I have a few ideas.

    In addition to logging temp readings, I'm going to switch to a different clock face for the next few days and see if it happens less frequently - perhaps it's actually just a problem with the LCARS app... which would be disappointing seeing as I plan on creating a similar feature-rich clock face soon. But I guess we'll see.

    Anyway, does anybody else have similar experiences?

  • in Bangle.js
    Avatar for morganwable

    This just started happening to me today, as well. It's very annoying, especially when coupled with most apps not having a "return to clock" timer built in (something I plan on fixing within my own fork soon, probably in the form of a widget).

    I was just digging around in the settings when I got a text from my dad - and the watch continued vibrating until I opened the notification.

    Also troublesome - when I receive a notification while within another app, the "flash icon" setting is not respected. I have mine set to false, but while within an app other than the watch face, the message icon blinks until accessed.

    Are there any possible leads on what might be causing this behavior? Looks like someone in the official github issue tried to fix it but ran into difficulties.