Center image depending on watch type

I made an image that is 200x200 to import. I fill the screen white and then render the image.

render.begin();
render.fillRectangle(white, 0, 0, render.width, render.height);
render.drawBitmap(background, 0, 0);

This looks fine for Pebble Time 2, but the image is off center for the round version.

Can someone point me to the correct way to express centering the image depending on the watch type? 
1 Like

set the image x,y origin (top-left) to: x = ([display width] - [image width]) / 2, y = ([display height] - [image height]) / 2.

This works for all image sizes and display sizes. A 200x200px image on a 280x280 display would have an origin of x=y = (280-200)/2, or 40,40, leaving a 40-pixel margin around the image on all sides.

1 Like

I thought I tried that but I must have put in the wrong expressions.

Trying again the PT2 generates the expected image, but for the round it gives me

Untitled

Another try generated a build failure.

I will leave things as they are with two entries in the store, one for rectangular and one for round and visit this again for another face.

Thanks.

1 Like

I did note that the hours and minutes appear where they ought to even though the face is not centered, so I did something right.

1 Like

If you show your code and build errors, we can help figure out how to fix whatever issue you are running into.

2 Likes

I may take you up on that if I make another face. I just wimped out and made two versions, one for square and one for round.

I just finished making this beauty - https://tudza.org/HTML_Clocks/Harken/Index.html

Before that I made the HTML/CSS/Javascript version of Mr Penguin - https://tudza.org/HTML_Clocks/Badtz_Time/Index.html

1 Like

OK, I can’t tell what’s going on with this design.

garfield_days_digital_round.zip

I believe the images are all of the correct size 260 x 260, but those are in the .zip file so you can verify that.

I have the value of “day” hard coded to 0. It would usually be now.getDay() but I was trying to nail down this problem.

I changed the value assigned in the case statement ( which I would like to be unnecessary, I should just be able to say "load image now.getDay() + 1 you would think ) from 1-10 and try running the emulator. I get these results in the error log

Error type with numbers 1-7

[VERBOSE] xsHost.c:155: Found mod “pebble.moddable.tech”
[ERROR] gbitmap_png.c:110: PNG memory allocation failed
[ERROR] gbitmap_png.c:160: Failed to load PNG
[ERROR] xsPlatform.c:209: Error: not found
at ()
at draw ()
at ()
[ERROR] xsPlatform.c:217: fxAbort unhandled exception: not found

Error type with numbers 8->

[VERBOSE] xsHost.c:155: Found mod “pebble.moddable.tech”
[ERROR] xsPlatform.c:209: Error: not found
at ()
at draw ()
at ()
[ERROR] xsPlatform.c:217: fxAbort unhandled exception: not found

so something is different once I get through what I expect are valid values to call the draw bitmap instruction.

So, I believe I’ve checked the images I’m trying to load are of the correct size. I’ve checked what happens if maybe Sunday.png is not image 1. Not sure what’s going on.

1 Like

OK, I think I figured out the issue and it had nothing to do with the face images.

I believe the error comes about when I make the font for time larger that 47 or 48. I basically started over using just one face image and found that to be the case. I changed the code I sent a copy of just now with a smaller font size for time and it works.

Hope you get this before doing anything serious looking at my code.

Meantime, I’m either living with the time as large as it lets me make it or fooling around with a different font.

1 Like

Did you make sure to only include only the characters you need in the custom font? When large memory usage blows up real quick with more chars.

1 Like

Maybe that’s the case? Hitting a certain size of font increases the whole font to a certain maximum? Not sure how to restrict my font characters. I’m used to just importing a font file. I’ll look into that in the future.

Any idea why the errors coming out refer to PNG? Are the fonts being converted to PNG images or something?

In any case, 47 works and is a decent size. The image files are not in the desired order, but I can deal with that with a case statement as I’ve done before.

1 Like

OK, looks like it’s safe to publish.

https://apps.repebble.com/9b4321fb96a94bc881c8b920

1 Like
1 Like

Thanks for point to those for me.

It’s interesting that this face allowed me to use a character size 50 for the same font that gave me trouble. Of course, the imported face images are all smaller than those I made for the round version.

https://apps.repebble.com/garfield-days_399c2bc82bc8468fb610fe2e

I’ll revisit the round face with a reduced character set (0-9 and : ) in the near future and see if that works with a font size set to 50. Just so I know for the future as I think I’m done with what I published.

1 Like