Avatar for NebbishHacker

NebbishHacker

Member since Apr 2020 • Last active Sep 2021
  • 3 conversations
  • 68 comments

Most recent activity

  • in Bangle.js
    Avatar for NebbishHacker

    How hard would it be to make the only the selected item bigger? That would allow us to fit nearly as many items on screen, while simultaneously allowing the user to clearly read what they're about to select. It might also make it more obvious that you have to scroll to highlight the item before tapping on it.

    If text overrun is a problem, maybe we could add some sort of marquee affect?

  • in Bangle.js
    Avatar for NebbishHacker

    I imagine for the vast majority of apps you probably don't want things to start moving around on the screen when text changes?

    Having things move around on screen when the text changes was pretty much the entire original motivation behind my 'trui' library 🙂

    I think for most apps the question is how well they can predict the maximum size of each element - if each piece of text has a predictable maximum size they can calculate the layout once and leave it fixed, but if there's a chance of the text overflowing its original bounds that risks breaking the layout. This can especially be an issue due to localization, if the localized strings end up being longer than the app developer was imagining.

    No, you can have more than one in layout.

    I stand corrected!

  • in Bangle.js
    Avatar for NebbishHacker

    Since there appears to be some interest in lazy rendering, I've created pull request implementing it in the Layout library.

    Just pass the third argument {lazy: true} to the layout constructor, and updates are as easy as:

    layout.time.label = require("locale").time(d,1);
    layout.update(); // Only needed if there's a chance that something moved
    layout.render();
    

    Demo here: https://www.espruino.com/ide/?gist=cc5f2­6ad897ecaa531b698781d47964a#

    Edit: I see my demo has the same issue as before. If it gives you any errors enable "Pretokenise code before upload" in the web ide settings.

  • in News
    Avatar for NebbishHacker

    I updated to 2v10 and now I'm having an issue where if I switch apps while a notification is open, the notification will get "stuck" and won't go away until I either get another notification or restart the device. It looks to me like the LCD offset isn't being reset.

  • in Bangle.js
    Avatar for NebbishHacker

    I like the idea of the lazy rendering too (with the CRC to check for changes). Although it looks like you don't use it in that example?

    My example does use lazy rendering! Each time canvas.render is called, the only things that get redrawn are those that don't already have their hash recorded. The thing to pay attention to is the rects property of the canvas, which acts as a map between the hashes of the elements currently on screen and the areas they occupy.

    I wonder if it'd just make things too slow to try and handle it automatically

    The hashing is pretty fast, since it just delegates to E.toJS and E.CRC32, and the rest of the logic honestly isn't too complicated. I'd say it's at least worth investigating.

    The Vector Clock app I just submitted also uses very similar lazy rendering logic, without all the layout stuff.

    I think the row/col layout and 'flex' areas are pretty similar to what Layout does with {fillx:true} so hopefully feature-wise they are reasonably comparable there.

    Correct me if I'm wrong, but it sounds like my 'flex' system is a bit more powerful? I'm guessing that only one element can be set to {fillx:true} in a row or column, whereas in my system the remaining space can be divided between any number of flexible elements, in proportion to their flex numbers. This means, for example, you could allocate 1/3 of the space in a row to one element and 2/3 to another by giving the first one a flex number of "1" and the second a flex number of "2".

  • in Bangle.js
    Avatar for NebbishHacker

    The problem was my use of a particularly long immediately invoked function expression - it only worked for me because I had enabled "Pretokenise code before upload" in the web ide settings.

    I've tweaked it so it should work now regardless.

  • in Bangle.js
    Avatar for NebbishHacker

    I haven't looked too deeply at the new layout library yet, but maybe this will serve as some inspiration...

    A while back I was experimenting with a layout library of my own. I never quite got it to the point where I was happy releasing it to the world, but it did have some interesting features. Most notably:

    • A flexbox-inspired layout system, with column and row support
    • Support for elements with dependencies between their width and their height (eg. wrapping text)
    • Easy to extend with new types of elements
    • Automatic lazy rerendering - it would detect which elements were new or different each frame (by way of hashing them) and only clear / redraw those elements

    Usage looked like this:

    let canvas = trui.canvas();
    
    canvas.render(
      trui.column({x: 0, y: 24, width: 240, height: 216, children: [
        {flex: 1},
        trui.padding({left: 10, right: 10, child:
          trui.text({font: "Vector", fitWidth: true, text: `${hours}:${padNum(d.getMinutes(), 2)}`})
        }),
        {flex: 1},
        trui.row({children: [
          {flex: 1},
          trui.text({font: "Vector", fontSize: 28, text: meridian}),
          {flex: 1},
          trui.text({font: "Vector", fontSize: 28, text: padNum(d.getSeconds(), 2)}),
          {flex: 1}
        ]}),
        {flex: 1},
        trui.wrappingText({font: "Vector", fontSize: 18, lineHeight: 30, align: 0, text: locale.date(d,false)}),
      ]})
    );
    

    (Each {flex: 1} there is a flexible spacer)

    If anyone would like to see it in action, they can try it here: https://www.espruino.com/ide/?gist=bde5d­085b2723a87e93f55411c03983a

    • 7 comments
    • 1,237 views
  • in Bangle.js
    Avatar for NebbishHacker

    In theory you could avoid some of the memory overhead of the array returned by match() by instead using replace to generate a new string that contains only the newlines:

    s.replace(/[^\n]/g, "").length
    

    Unfortunately, there seems to be a bug in replace() that prevents this from working perfectly.

  • in Bangle.js
    Avatar for NebbishHacker

    only way to disconnect it is with a wire cutter

    At that point you might as well just open it up and take out the battery :)

Actions