• Hello everyone!

    Yesterday my Bangle finally arrived. I immediatly started with my project to develop a timer app for Football Officiating and came unpleasant problem of the flickering screen. I red the tutorial with the possibility to Buffer the Screen output and gave it a try.

    If the display is on, the countdown timer will draw every second a new screen with g.flip(). But this always resets the Screen timeout so the Display stays on forever, until the countdown timer stops or ist interrupted.

    Is there a workaround or best practice to get along with this or is it no problem to keep the display on for a longer period? If we officiate a tournament, I need the clock for ~ 6 hours.

    Thank you for support. :)

  • Hi! Ahh, that's an interesting problem - I'd always intended the .flip to be used for games and stuff like that so it made sense to make it keep the display on. In your case it doesn't seem useful at all.

    What I'd suggest is to actually use an offscreen buffer if you can... So something like is done here: https://github.com/espruino/BangleApps/b­lob/master/apps/speedo/speedo.js

    That way you can have everything coexist with widgets as well - if you're planning on using it for 6 hours or so, battery level and stuff like that might be handy.

    That way you can use g.drawImage (g.flip is used in the example just to keep the screen on).

    The speedo uses a single color - I'm not sure if that'd work for you? You can use a color palette to do the lookup if you need more colors though: https://github.com/espruino/BangleApps/b­lob/master/apps/gpsnav/app.js#L7

  • Hi Gordon. Thank you for the quick feedback. I will try the offscreen buffer this evening. Is there a maximum size or can I use the full 240x240px?

    I also came over another little thing: it would be nice to get the acual brightness or the default value from settings. This is maybe possible already (didn't find it in the Reference).

    Thank you again so much!

  • Is there a maximum size or can I use the full 240x240px?

    It's just how much RAM you have available. 1bpp x 240 x 240 is 7.2k, which will fit in memory just fine. Even better if you do 240x192 to leave room for widgets.

    That size at 2bpp would also be fine, but you just need to be a little careful not to try to allocate too much other memory :)

    it would be nice to get the acual brightness or the default value from settings

    Not sure I understand?

  • Not sure I understand?

    As example an app could dim the brightness down for power saving and restore the user-set value by event or closing the app. So how can I get/read the actual state of brightness to restore it later (if possible)?

  • Okay, now I mixed up a sample of your two suggestions. But now I have heavy flickering again:

    require("FontDylex7x13").add(Graphics);
    
    let fnt = 'Dylex7x13';
    
    let pal2color = new Uint16Array([0x0000,0xffff,0x07ff,0xC618­],0,2);
    let buf = Graphics.createArrayBuffer(240,192,2,{ms­b:true});
    
    const pad = (number, length) => {
        let str = '' + number;
        while (str.length < length) {
            str = '0' + str;
        }
    
        return str;
    };
    
    const printClock = ts => {
      if(ts === undefined) {
        ts = new Date();
      }
      
      h = ts.getHours();
      m = ts.getMinutes();
      s = ts.getSeconds();
      
      return `${pad(h,2)}:${pad(m,2)}:${pad(s,2)}`;
    };
    
    const renderMain = () => {
      g.clear();
    
      buf.clear();
      buf.setColor(1);
      buf.setFontAlign(0,-1);
      buf.setFont(fnt,5);
      buf.drawLine(0,0,240,0);
      buf.drawString("Hello",120,0);
    
      buf.setFont(fnt,3);
      buf.setColor(2);
      buf.drawString(printClock(),120,60);
    
      g.drawImage({width:buf.getWidth(),height­:buf.getHeight(),bpp:2,buffer:buf.buffer­,palette:pal2color},0,48);
    };
    
    const ticker = () => {
      renderMain();
      // g.flip();
    };
    
    setInterval(ticker,1000);
    

    I guess I have still a big misunderstanding of the usage of rendering with the Bangle.js.

  • You don't need to call g.clear(), since you're just going to overwrite the entire screen with the contents of the buffer. If you remove that line the flicker should go away.

  • You don't need to call g.clear()

    Yep, this :)

    So how can I get/read the actual state of brightness to restore it later (if possible)?

    It's just handled here: https://github.com/espruino/BangleApps/b­lob/master/apps/setting/boot.js#L5

    So you basically do what's in that code. Load the settings, check settings.brightness, job done :)

  • @NebbishHacker & @Gordon, thank you both so much. Removing g.clear() did the job and I will check for the brightness in the settings-file.

    With the buffer I recognized that the normal buf.setColor(r,g,b) does not work and I have to use a color palette (Array) of 2/4/16 elements. buf.setColor(1) is then the index inside the array? That works for me with indexes not larger 3 (4-element-array).

  • buf.setColor(1) is then the index inside the array?

    Yep, that's right :) Another option is to go for a half-res image (120x120) and then use a higher bit depth...

  • Yep, that's right :) Another option is to go for a half-res image
    (120x120) and then use a higher bit depth...

    So can I find that somewhere in the documentation? Which resolution works with how many colors? Or is this something that can be calculated?

    Would it be better to use multiple buffers for different areas on the screen or is this not advisable?

  • You can calculate the amount of ram a buffer will take up as width*height*bpp/8.

    A 240x192 2bpp buffer takes up 11952 bytes, or about 12kb. If you halve the size to 120x96 you can fit quadruple the bit depth (8bpp) in the exact same amount of space.

    Using multiple buffers should work fine - I was actually just experimenting with that the other night.

  • Yes, I experimenting this evening and just getting more and more behind the concept.

    I will render the different components of my app with the suitable bpp instead of the one fullscreen component, hoping to save memory this way.

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

Flickering Problem - Screen Buffering but also turn off Display

Posted by Avatar for AxelRHD @AxelRHD

Actions