Pebble SDK provides very cool features for programming watchapps and watchfaces. And combining them can yield very useful results. For example “out of the box” Pebble doesn’t have a slider layer – a layer that would slide in over existing information to display new one. But we have all the basic ingredients to create one:
- Basic Layer – to act as a container for the rest of the items
- Bitmap Layer – to host an image we want to display
- PropertyAnimation – to move our images
This example uses BitmapLayer to display images, but it just as well maybe text or other items.
Here’s a basic flow of how SliderLayer works:
- Create a standard layer at a coordinates of your chosing
- Add 2 BitmapLayers to that layer. First will be used to statically hold previous image, second – to slide in new image
- Begin animation routine by placing second BitmapLayer outside of bounds of parent layer – this will effectively create effect of “sliding in”
- When animation stopped copy the bitmap from moving BitmapLayer to static one, this is done so when you animate moving BitmapLayer again – previous image persists (don’t forget to destroy bitmap previously stored in static BitmapLayer to avoid memory leak)
And this is pretty much it. By varying animation duration and start position you can produce various sliding effects
Some useful links:
- Source code of Rustic Slider watchface using Slide Layer library
- Rustic Layer watchface in Pebble Appstore
ANNIVERSARY UPDATE (03/27/2017): Slide Layer is now available as NPM package for Pebble
hi yuriy – i’ve just updated my new watchface to use your library. am going to have a look at making it conform to 12hr time as well. will instagram a pic wednesday. i was previously doing it like on the steampebble watchface.
mark
@mark, thanks for using the library, after seeing your collection I am really honored. And if you look at the source of “Rustic Layer” you will see that 12/24 switch is pretty easy, just check the value of
clock_is_24h_style()function and adjust hours accordingly.cheers! i think i’ve got it all sorted. just working on my color icons now. and testing..
hi again – i let the watchface run uninterrupted overnight and noticed in the morning it had crashed. it reset back to the face ok, but afterwards i noticed that as the minutes updated the current num disappeared then the next seemed to take at least 30 to slide up. a quick change to another watchface then back seemed to fix this. not sure if it’s an issue with my code or your slidelayer library. here’s my github repo if you have time to take a look.
github.com/mereed/pebbleface-widgetface
cheers
mark
@mark I run mine pretty much coinstantly and so far haven’t experienced symptoms you describe. But perhaps there’s a scenario I am not accounting for. Do you continue to receive notifications thru the night? If so, do you use 3rd party notification app? I will try to take a look at the code today to see if I have any ideas.
hi yuriy – i haven’t noticed anything since – though i’ve been constantly re-loading stuff on my watch since ie. been constantly playing with it. notifications continue to arrive ok (if i leave my wifi enabled on my phone overnight – i turn it off most nghts so i’m not woken ). i don’t use any other notification apps – just the std/latest pebble firmware. i’ll let you know if it happens again.
@markm by the way, VERY nice looking face, I might borrow a few tricks from it as well. And everything seems to be in order, no memory leaks. I may have to investigate specific scenario – what happens when you change faces while animation is still ongoing, but even that doesn’t cause crash.
If you’d like to add effect a la “SteamPebble” (when old number slides down first and new one slides up then), I can investigate adding this option to the library. I think it may actually look nice on your watchface.
hi yuriy. thanks i guess we just have to go from the emulator at the moment re how colours look in reality. i cleaned up some bits since which ‘may’ have caused a conflict in the code. your suggestion sounds great. but no rush, just whenever you get around to it 🙂 hopefully the next java release isn’t far away – i’ll prob wait ’til then before releasing the B&W version (though it will support colour too. changing face midway through an animation seems fine. it could have just been a one-off glitch..
yuriy – it’s been fine over the past 24hrs – no errors or weirdness!
hi yuriy – i did notice a crash again tonight [my time]. i was just exiting notification when i saw it – pressed any button and it was ok again. not sure why the crash…
@mark, damn and I still can’t reproduce it. It would help if crash happen when watch is still attached to debugger, to see the logs, but I understand it’s not feasible. Did the crash happen when notification came or just by itself? Most likely cause is something trying to free the memory already freed, but this should not happen in the library. I will try to add some preventive measures to the updated version though.