Search results for:

I'm working on an analog watchface using drawn objects such as g.fillCircle, g.fillPoly, etc.
I have about 15-20 shapes being drawn, and I'm seeing a flicker every second, which is consistent with my setInterval rate. The whole thing flickers for the tiniest fraction of a second, but is noticable enough to be annoying. I'm noticing that the last things drawn (the clock hands) flicker a little darker than the first things drawn (the 12 and 1 hour markers) so I figure the tiny moment of flicker I'm seeing is the time it takes to draw each object after g.clear is called.

I get no flicker when running the same app on the js2, and I'm not sure if it's a difference in processor speed, or refresh rate of the different LCDs.

I also tried removing the anti-aliasing options where possible, but that didn't improve the draw time at all, so I put it back.

Anyway I'm not sure if I'm doing something wrong, or if I've simply hit the limits of the device, but I'll post my code here and hope that someone can spot my issue, or clue me in to a workaround. Thanks!

// Load fonts
require("Font7x11Numeric7Seg").add(Graphics);
// position on screen
const xc = 120, yc = 133;
let twoPi  = 2*Math.PI;
  let Pi     = Math.PI;
  let halfPi = Math.PI/2;

function glowface() {
  g.reset();
  g.clear();
  //TopDot
  g.setColor(0,1,0.62);
  g.drawCircleAA(120,4,4);
  g.fillCircle(120,4,3);
  //HourMarkers
  g.setColor(0,1,1);
  g.fillRect(123,37,128,57);
  g.drawCircleAA(164,54,5);
  g.fillCircle(164,54,4);
  g.drawCircleAA(197,87,5);
  g.fillCircle(197,87,4);
  g.fillRect(212,129,214,135);
  g.drawCircleAA(197,176,5);
  g.fillCircle(197,176,4);
  g.drawCircleAA(164,208,5);
  g.fillCircle(164,208,4);
  g.fillRect(111,37,116,57);
  g.drawCircleAA(75,208,5);
  g.fillCircle(75,208,4);
  g.drawCircleAA(42,176,5);
  g.fillCircle(42,176,4);
  g.fillRect(25,129,45,135);
  g.drawCircleAA(42,87,5);
  g.fillCircle(42,87,4);
  g.drawCircleAA(75,54,5);
  g.fillCircle(75,54,4);
  g.fillRect(117,206,122,226);

  let now = new Date();
  let Hours   = now.getHours() % 12;
  let Minutes = now.getMinutes();
  let Seconds = now.getSeconds();
  let HoursAngle   = (Hours+(Minutes/60))/12 * twoPi - Pi;
  let MinutesAngle = (Minutes/60)            * twoPi - Pi;
  let SecondsAngle = (Seconds/60)            * twoPi - Pi;
  //Hours
  let hSin = Math.sin(HoursAngle), hCos = Math.cos(HoursAngle);
  g.setColor(0,1,1);
  g.drawCircleAA(xc-57*hSin,yc+57*hCos,4);
  g.fillCircle(xc-57*hSin,yc+57*hCos,3);
  g.drawLineAA(xc-52*hSin+5*hCos,yc+52*hCos+5*hSin,xc-20*hSin+5*hCos,yc+20*hCos+5*hSin);
  g.drawLineAA(xc-52*hSin-5*hCos,yc+52*hCos-5*hSin,xc-20*hSin-5*hCos,yc+20*hCos-5*hSin);
  //Minutes
  let mSin = Math.sin(MinutesAngle), mCos = Math.cos(MinutesAngle);
  g.setColor(0,0,0);
  g.fillPolyAA([xc-96*mSin,yc+96*mCos,
                xc-78*mSin-11*mCos,yc+78*mCos-11*mSin,
                xc-14*mSin-5*mCos,yc+14*mCos-5*mSin,
                xc-14*mSin-5*mCos,yc+14*mCos-5*mSin,
                xc-14*mSin,yc+14*mCos,
                xc-16*mSin,yc+16*mCos,
                xc-16*mSin-1*mCos,yc+16*mCos-1*mSin,
                xc-77*mSin-7*mCos,yc+77*mCos-7*mSin,
                xc-77*mSin+7*mCos,yc+77*mCos+7*mSin,
                xc-16*mSin+1*mCos,yc+16*mCos+1*mSin,
                xc-16*mSin,yc+16*mCos,
                xc-14*mSin,yc+14*mCos,
                xc-14*mSin+5*mCos,yc+14*mCos+5*mSin,
                xc-14*mSin+5*mCos,yc+14*mCos+5*mSin,
                xc-78*mSin+11*mCos,yc+78*mCos+11*mSin
                ]);  //minuteHandShadow
  g.setColor(0,1,0.62);
  g.fillPolyAA([xc-91*mSin,yc+91*mCos,
                xc-80*mSin+7*mCos,yc+80*mCos+7*mSin,
                xc-80*mSin-7*mCos,yc+80*mCos-7*mSin]);
  g.drawLineAA(xc-76*mSin+9*mCos,yc+76*mCos+9*mSin,
               xc-17*mSin+3*mCos,yc+17*mCos+3*mSin);
  g.drawLineAA(xc-76*mSin-9*mCos,yc+76*mCos-9*mSin,
               xc-17*mSin-3*mCos,yc+17*mCos-3*mSin);
  //Seconds
  let sSin = Math.sin(SecondsAngle), sCos = Math.cos(SecondsAngle);
  g.setColor(0,0,0);
  g.drawCircleAA(xc-64*sSin,yc+64*sCos,4);
  g.fillCircle(xc-64*sSin,yc+64*sCos,3);
  g.fillPolyAA([xc+1*sCos,yc+1*sSin,
                xc-1*sCos,yc-1*sSin,
                xc-102*sSin,yc+102*sCos]);
  //g.drawLineAA(xc,yc,xc-102*sSin,yc+102*sCos);  
  g.setColor(0,1,1);
  g.drawCircleAA(xc-64*sSin,yc+64*sCos,2);
  g.fillCircle(xc-64*sSin,yc+64*sCos,1);
}

var secondInterval = setInterval(glowface, 1000);
// Stop updates when LCD is off, restart when on
Bangle.on('lcdPower',on=>{
  g.clear();
  if (secondInterval) {clearInterval(secondInterval);
  secondInterval = undefined;}
  if (on) {
    secondInterval = setInterval(glowface, 1000);
    glowface(); // draw immediately
  }
});
glowface();

// Show launcher when middle button pressed
Bangle.setUI("clock");

Thanks for the tip @Gordon it's working now.

@Serj nice idea, I think it would be great to limit the number of characters in the note feature, in the spirit of the original's record feature.

I guess what NoMusicTuesdays wants to say is...

Yeah, that was my train of thought exactly!

Well cheers to the bangle.js team on both the js1 and js2! I've been having so much fun with the js2 this past week, that I purchased a gently used js1 on ebay, and just received it today. So far I've just upgraded the firmware and swapped a few apps in and out (and LOVING the color and contrast on the js1) but I'm super excited to have it in time to be able to develop my second app on both watches! This whole thing really is a great project, easy enough for an entry-level dabbler like myself to take on the challenge, with rewarding results, and a nice community to share ideas and projects. Very cool.

Thanks, I guess I initially tested it the wrong way by uploading a png through the IDE and having my code reference that file. I was unable to change to any other clock in settings/system/select clock, no matter what I did as far as removing the files through the IDE in any order. So I did a factory reset.

I finally figured out how to use the image string thing, and finally found the right place on my new github account, from when I had tried to follow the tutorial a few nights ago.

My github fork seems to be running, but when I try to upload from the apploader to my JS2, it loads up to about 95% rather quickly, then stays there indefinitely. I'm sure I must have missed some minute detail. I'll post some links to my github fork and the app in the loader, it's a clock called Bradbury.

https://github.com/nomusictuesdays/BangleApps/tree/master/apps/bradbury
https://nomusictuesdays.github.io/BangleApps/?q=bradbury

Ok, I removed the image used as the background of the watch, and once I replaced the image, everything works once again, including the updated bradbury.app.js file. Strange thing is that while I understand why my watch face didn't work without the image, I don't understand why the launcher and menus didn't work during that time. Is it because without the image my app crashed, and the Bangle.setUI("clock"); function thus couldn't be accessed?

I followed the "making an app" section on the page https://www.espruino.com/Bangle.js+Clock
and was able to set the app as my primary clock, and try it out for a day or two. I wanted to make a couple last minute tweaks and wanted to replace the app, but writing over the file didn't show my changes. So I tried, using the IDE, to remove the files associated with my app, and now my bangleJS2 only shows a black screen, no matter what I do.
I went to the app loader, and saw my app listed as "unknown app bradbury (unknown version)" and when I clicked the trash icon, I was given the alert "Unknown app bradbury removal failed, TypeError: Cannot read properties of undefined (reading 'split')" and my watch says "Erasing bradbury..." but stays there, and does nothing beyond that. I tried long-press rebooting, but only returned to a black screen. I repeated the process to the same results.

I'm not sure what to do, and I'm fine with factory resetting if necessary, but not sure how to do that since I only see a black screen.

After a day of ordinary use, I'm finding that the widpedom app is only counting about a third as many steps as other widgets that use the Bangle.getHealthStatus("day").steps count. I appreciate you including both options in the latest LCARS update, and I intend to follow your lead on that in apps that I'm working on.

Awesome, thank you!

Thanks for the help, it's great to have the steps working and hiding the top row widgets with the beautiful fullscreen mode.

I had seen the names widpedom and wpedom mentioned, but couldn't find any such apps, so I thought maybe they were a deprecated dependency.
It sounds like apps have an ID which isn't the same as their name, is there a reason the IDs for apps aren't searchable in the app loader page?

Ok, so let's say I want to pull the number of steps from widpedom rather than Bangle.getHealthStatus("day").steps how would I do that?

Perfect! Yes that does it!
Thank you for all your awesome support, I've had the bangle 3 days now, and really having a great time playing with it and learning to develop. I have a couple cool apps in the works.

I LOVE this LCARS watch, but wondering why the dependency on this elusive wpedom app? I finally found wpedom in your github (I'll have to figure out how to get it onto the bangle) but why not allow LCARS to read the watch's steps from Bangle.getHealthStatus("day").steps as some widgets do? And/or why not include the wpedom app on the bangle app loader?

The g.fillPoly function is great, but I'm wondering if there's a way to fill it with dithered colors. For example, let's say I want my polygon to be filled with a black/blue checkerboard pattern. I tried setting the color to (0,0,127) like so:

g.setColor(0,0,127);
g.fillPoly([14,14,20,14,25,25,15,20]);

but it still filled my polygon with full 0000FF blue.
It appears that even (0,0,1) will show the same 0000FF color that would be expected from (0,0,255)

I enjoy the challenge of designing in 3-bit color, just trying to learn the best practices for this sort of situation.

An interesting idea, Andrew. The Bayer filter concept makes sense, but could there be a CMYK version of that concept? As comfortable as I am working/thinking in RGB, LCDs work on the principle of subtractive color, so perhaps we could get more out of an LCD display by thinking in terms of the subtractive model. Of course that would mean finding a manufacturer who
produces that type of screen. Do CMYK LCD displays even exist?