Posted at 2020-05-26 by @gfwilliams

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/blob/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/blob/master/apps/gpsnav/app.js#L7

Posted at 2020-05-26 by AxelRHD

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!

Posted at 2020-05-26 by @gfwilliams

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?

Posted at 2020-05-26 by AxelRHD

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)?

Posted at 2020-05-26 by AxelRHD

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,{msb: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.

Posted at 2020-05-26 by NebbishHacker

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.

Posted at 2020-05-27 by @gfwilliams

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/blob/master/apps/setting/boot.js#L5

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

Posted at 2020-05-27 by AxelRHD

@nebbishhacker & @gfwilliams, 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).

Posted at 2020-05-27 by @gfwilliams

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

Posted at 2020-05-27 by AxelRHD

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?

Posted at 2020-05-27 by NebbishHacker

You can calculate the amount of ram a buffer will take up as widthheightbpp/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.

Posted at 2020-05-27 by AxelRHD

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.