Splash screen in color?

[kaikreuzer]

Is it possible to replace the slash bitmap through a colored version for the Pebble Time? I do not know the impact on the old s/w Pebble, so I don't create a PR myself and rather ask you for it :-)

[clach04]

The Pebble SDK supports different images for different targets, see https://developer.getpebble.com/guides/pebble-apps/resources/image-resources/#specifying-resources-per-platform

[kaikreuzer]

Would really love to have some color support, now that @llamahunter is back :-)

[llamahunter]

Yeah, I looked in to this a bit yesterday. There seems to be something buggy with the cloudpebble IDE that causes it to refuse to build if there are color assets (very obscure error which googling seemed to indicate was a bug that's existed for months). I ended up installing the SDK on my computer and setting up the whole pebble.js environment there. Was able to get color assets working that way. I may move away from cloudpebble's IDE if that's the only way to do it.

I only made a color splash screen. I experimented with these three. I like the black one best.

I am not a graphic artist, and only have minimal gimp skills, so if someone wants to provide better images in the limited pebble time palette, go for it.

Other useful color thoughts? I figure a ColorPicker sitemap widget might be useful to someone. Would be useful to me if openHAB 1.x had LIFX support. Unclear if there is any way to get charts via the REST api, or if that would even be useful on such a tiny screen.

[kaikreuzer]

Cool, thanks! Yeah, I'd also opt for the black version.

Other useful color thoughts?

I would definitely do the frame titles in a different color than the widget labels, so that the frames are easier visible. Also the title bar (which displays the time) should probably be orange. This should be enough for a start. Color picker and charts are more advanced, let's discuss this another time :-)

[llamahunter]

Hmm... that will probably require some aggressive hacking on the pebble.js infrastructure libraries. Most of this app actually runs in javascript on your phone, with only a C runtime engine provided by pebble running on the watch. To add color to the menus, I'll need to change the runtime engine.

That being said, I did hack on the C engine a bit yesterday to make the splash screen display faster without the white flash.

[kaikreuzer]

To add color to the menus, I'll need to change the runtime engine.

I would assume that this only applies to the frames, not to the title bar, right? Since the title has some app specific color for most apps, so I assumed that this should be easy. How about changing the black&white style to e.g. blue&white (completely)? Is this something that can be done easily?

[kaikreuzer]

(with the orange title bar and the blue&white menu, it would have a similar color scheme as the Paper UI (http://demo.openhab.org:9080/ui/index.html#/setup/wizard))

[llamahunter]

So, the pebblejs C runtime engine does support specifying menu item colors, but I had to do some hackeration on it to support different colors for the headers. https://github.com/pebble/pebblejs/pull/124

[llamahunter]

Here's a color menu example. Haven't yet explored how to make the time bar a different color.

[kaikreuzer]

Whaa, looks terrible, even for a non design guy - sorry ;-) Maybe the frame titles should be in a different blue or even grey. I would spare the orange definitely only for the header and not use it anywhere else (and is there a better fitting orange maybe...?)

[llamahunter]

Unfortunately, the color choices in the orange-y area are very limited. That was 'orange'.

https://developer.getpebble.com/more/color-picker/

I think it actually looks more like openHAB orange on the pebble than in the screen shot. I did just figure out how to set the time status colors, so perhaps I'll change it to white on orange. Having the section titles in a different color than the section items does make them stand out more, so I like that. Maybe will make the sections white on light or dark grey.

[kaikreuzer]

sounds good, looking forward to your results!

[llamahunter]

Better... maybe... tried a few group title colors. Thoughts?

[kaikreuzer]

I like the 3rd option most.

[llamahunter]

I haven't forgotten about this. Still waiting on the pebblejs project to take one of my pull requests and do a new release. If that doesn't happen soon, I could re-work openhab.pebble by incorporating all their code into it. The pebblejs project is under the MIT license, so that should be ok from the 'opensource project' perspective, I think. More of a pain to track their changes/bugfixes going forward, but at least we'll have color.

[kaikreuzer]

It seems that https://github.com/pebble/pebblejs/pull/124 has been merged today, so all is good now?

[llamahunter]

But not the status bar pull request, and they still need to release.

[kaikreuzer]

Any news on this? All I want is at least a colored splash screen - I am longing for an updated Pebble app :-)

[llamahunter]

heh... lemme check if the pebble.js update to cloudpebble has happened...

[kaikreuzer]

Checked?

[llamahunter]

Checked... see https://github.com/pebble/pebblejs/issues/156

[llamahunter]

I could pull down the entirety of pebble.js library into the openhab.pebble project and check it in, but I think that might run afoul of the openhab contributor agreement.

[kaikreuzer]

Afaik, you need this lib for adding color to the menus etc., but not for the splash screen, is that right? So maybe you can do the color splash screen already now and we wait for the Pebble guys for the rest. (I agree, we should not pull the lib into our repo).

[digitaldan]

Hi @llamahunter I was adding color to the app when I ran into this thread, it looks like cloud pebble has made some improvements in the last few weeks. I don't want to step on your toes, is this something you would like to finish up, or would you like me to take a look? I'll also want to add a round image for the chalk platform.

[digitaldan]

@llamahunter so, like you, I could not get color images working with cloud pebble, which is a real bummer. I have a PR of my working branch (sorry it's a little messy), but it requires the cli to build, which complicates things, but I don't see another way at the moment.... and having color menus and icons is really really nice ;-)

[llamahunter]

I have a color splash/menu UI in a separate branch, but it requires incorporating pebble.js source code directly into the tree, which I think we want to avoid. I think there was a recent change to cloudpebble that picked up the various pulls (and alternative approaches) I discussed with the maintainer that should make this possible now. I have to get some time to tinker with it again.

[digitaldan]

So, i was hoping the recent changes would fix the splash image, but I spent a ton of time trying to get it to work without luck. I was thinking that pebblejs could be a git sub module and not checked in. I have a bash script that copies the openhab source into the pebblejs dir and compiles. It does a git reset and clean before each build on it. This could be converted to a Makefile if needed. I also changed the splash images to be 144x168 for rect devices and 180x180 for round to avoid doing any positioning or sizing in code (makes things simplier).

[llamahunter]

I tried to get things up and running in cloudpebble again this evening, but something's not working. Can't sync between github and cloudpebble without errors right now. Working with the pebble people to try to figure out what's what.

I did need to make some minor tweaks to pebble.js to make the splash screen stuff work correctly. I could never get it working right using the old cloudpebble code.

Unfortunately, the way git modules work and the way the pebble.js source tree works, I'm not sure it would be super easy to use git modules to get the pebble.js source code into the openhab.pebble tree. It would involve a lot of copying stuff around before actually doing the build to get the tree layout looking right.

[digitaldan]

Working with the pebble people to try to figure out what's what.

Yes I had those issues as well, something with decoding the appinfo file. That would be awesome to fix.

It would involve a lot of copying stuff around before actually doing the build to get the tree layout looking right.

Right this is what my little build script does as a temporary workaround.

How would you like to move forward? One thought is to add color and keep cloudpebble support, but manually compile the project for the pebble store release until cloudpebble issues get resolved. Do you want to merge your color branches into master? I can then add the round image supoprt and other fixes from there?

[llamahunter]

My color changes require incorporating the pebble.js codebase into the tree and making the project into a C build. I would prefer to try and get it working via cloudpebble to avoid entanglement with pebble.js source. Hopefully, I'll hear back today from the cloudpebble folk on what's wrong with their github integration.

[digitaldan]

Sounds good, let me know if I can help!

[llamahunter]

I think I found a bug in cloudpebble that's preventing github integration from working if you have an 11 character filename lexicographically sorted before 'package.json'.

[digitaldan]

Well that's a weird one.

[llamahunter]

After working with the pebble people to add features to pebblejs and fix various bugs in cloudpebble, I think color support is near. See https://github.com/llamahunter/openhab.pebble/tree/color It needs a bit of cleanup, but it's close. Comments welcome.

[llamahunter]

closed by #26

[llamahunter]

I've pushed my color changes to master. It would be awesome to get some testing by others before I publish to the store. Especially pebble classic. I used the emulator, but not sure if it is 100% accurate. Also, note that some crash bug in switching sitemaps snuck in somewhere. I suspect it is somewhere deep in the pebble.js code I picked up to enable color support.

[kaikreuzer]

Yeah, I didn't expect it to take 6 months work to change a splash screen to a colored version, but it is great to hear that this is working now 😎 .

What is the easiest way to test as long as it is not pushed to the store?

[llamahunter]

It was a long slog to get the pebble.js people to update their stuff, and then to get the cloudpebble.net people to update their stuff and fix their bugs.

I'd say the easiest way is probably for me to send you the .pbw file and for you to open it on your phone in the pebble app. I'm pretty sure that works on both ios and android.

Or, you could pull the repo into your own cloudpebble.net account, do a build, and publish it to your watch (put your watch in developer mode first, tho).

[llamahunter]

Actually, I made a preview release here on github. You can download the 1.5 pbw from there.

https://github.com/openhab/openhab.pebble/releases/tag/v1.5-preview

[kaikreuzer]

Many thanks, I successfully installed it on my Pebble Time - and it seems to work well! I don't have a Pebble Classic to test, through (@jochenhiller, do you maybe want to give it a try?)

[llamahunter]

Alright, I'm going to push the new pebble app to the app store, with support for color and chalk, by the end of the day today, unless someone reports problems with the 1.5 preview 2 .pbw available here https://github.com/openhab/openhab.pebble/releases/tag/v1.5-preview2

[clach04]

I did a quick test, looks good! :+1: