Finally designing a watch face with ease, with compose. Instant preview in the IDE, and runs just fi...

# compose-wear

[louiscad]

Finally designing a watch face with ease, with compose.
Instant preview in the IDE, and runs just fine as a Watch Face on actual watches.

Thanks to @mmartos for the building https://github.com/manuel-martos/compose-clock which is the base design in this video.

Screen Recording 2023-12-16 at 16.05.14.mov

[yschimke]

This is so compelling. I'll try to contribute back some screenshot generation for playstore

[Yingding Wang]

I am super interested in using compose canvas to make WatchFace. How can I do that?

[Yingding Wang]

If this is possible, can I use compose canvas also for Tiles?

[yschimke]

Yes, there is a Horologist module for that.

[yschimke]

An old sample - packages might have changed https://github.com/google/horologist/pull/249

[yschimke]

image.png

[yschimke]

This function - https://github.com/google/horologist/blob/cc3141f9d15f5367c834b36df526f95f32201279[…]/main/java/com/google/android/horologist/tiles/canvas/Canvas.kt

[yschimke]

internal fun imageResource() = canvasToImageResource(Size(100f, 100f), Density(context)) {
        // draw operations here
    }

[Yingding Wang]

Thanks Yuri, I see that I still need to use the compose canvas to generate ImageResource for that. So it is also how the WatchFace use the compose canvas works?

[yschimke]

No.

[yschimke]

The Tiles one has the Compose DrawScope API, without state tracking. Single shot, turned into a byte[] and sent in image resources. No compose state magic, no updates.

[yschimke]

@louiscad compose watchfaces will feel like Compose magic, state tracking etc.

[yschimke]

But if you want something simple like generate a static image like a chart, with rarely updating date, it will be almost the same.

[Yingding Wang]

Thanks Yuri, @louiscad I am looking forward to knowing more about how you did that.

[louiscad]

@Yingding Wang Are you interested in it for personal use only, or do you want to publish a watch face app with it on the Play Store?

[Austin Nelson]

Is this an actual watchface or just a clock app? Can you now create watchfaces with Jetpack Compose? If so, are there any examples/resources available?

[louiscad]

It's both

[louiscad]

The SDK is not released yet, I'm working on it

[Austin Nelson]

Whenever you have a preview ready, I'll be happy to test.
I just gave Watch Face Studio a try, and I'm not impressed 😕

[louiscad]

I also tried WFF, even made a Kotlin DSL for it, and I've been unimpressed as well, that's why I pivoted and made Compose O'Clock.

WFF could be cooler with an on-device API though, but it doesn't exist yet, and interactivity is really nice.

[louiscad]

WFF being the XML output of Samsung Watch Face Studio, compatible only with Wear OS 4 (only 64 bit CPUs)

[louiscad]

Hello!

Compose O'Clock has been released!
You can now build Watch Faces with Compose Canvas and Compose runtime.
Instant preview in the IDE, and lots of other goodness!

https://github.com/Splitties/ComposeOClock

[Lukáš Kúšik]

Does anyone have any practical guidance on how to use OpenGL in tandem with Compose?

[louiscad]

For a Watch Face?
It's unfortunately not possible, because of limitations in androidx.wear.watchface.

[yschimke]

I suspect if you want something past AGSL Shaders, then you need a SurfaceView/TextureView?

[louiscad]

Which you can't use inside a WatchFace.
Only the GL ES Watch Face renderer would do, and it's not possible to get a Canvas there AFAIK.

[Lukáš Kúšik]

I thought about using the OpenGL Renderer.GlesRenderer2 and creating a bitmap texture there that would be the target for Compose rendering...

[louiscad]

You mean as a Brush?

[Lukáš Kúšik]

I was able to use a classic Canvas with this approach, however, text drawing etc. in Canvas is limited. Arbitrary Compose to Bitmap would be a lot better, but I haven't looked much if it is possible to rasterize Compose like that.

[yschimke]

They added an API for that

[louiscad]

There's some leftover experiment with AGSL shaders here.

When it's not too GPU intensive, it works fine on a Watch Face.
If you try them, you'll see some work smoothly, some don't.
You probably wouldn't want to use them in ambient mode, and test performance and power consumption in interactive mode.

https://github.com/Splitties/ComposeOClock/blob/47b54181b1c8bfd534457b001218477258b95d6c/shared/src/main/kotlin/cleanthisbeforerelease/experiments/ShadersExperiments.kt

[yschimke]

You can capture a composable via a modifier.

[louiscad]

Modifier from Compose work only in a View, which you can't use inside a WatchFace, because it's not a View, and can't host one.

[yschimke]

Yep, true. That problem inside a view is discussed here https://twitter.com/riggaroo/status/1693961082761625825?t=kfgghffcZXsuhus0txy90w&s=19

[yschimke]

But not for watchfaces

[louiscad]

But I know a way to capture something drawn from Compose O'Clock and create a Bitmap with it, and probably it'd be possible to get that inside a GL ES Watch Face renderer.

[Lukáš Kúšik]

Basically to be clear, I'd like to render something using OpenGL and then draw a UI overlay on top of it, preferably using Compose 😄

[louiscad]

That's what I expected

[louiscad]

And it's not so easy to do.

Do you want to make a product out of it?

[louiscad]

You want that inside a Watch Face, correct?

[Lukáš Kúšik]

Yes. I have this watch face with a globe that was supposed to be a clutter-free way to portray the current time, but it turns out a way to display a clock there is sometimes more practical 😄
Just Globe - Earth Watch Face - Apps on Google Play

[Alex Vanyo]

For https://github.com/alexvanyo/composelife I went down the route of using GlesRenderer2 and using the Compose snapshot state system to drive the state management for what I render in OpenGL in the watchface. Which definitely isn't quite the same as using Compose's UI library to drive the pixels on a watchface.

[yschimke]

That's awesome. Surprised I hadn't seen it. Will spelunk around

[Alex Vanyo]

Actually I totally forgot I had to tackle drawing a Canvas into GlesRenderer2 already for rendering complications: https://github.com/alexvanyo/composelife/blob/562e40704ea74c724eb0d694d836c7a43b2c[…]n/com/alexvanyo/composelife/wear/watchface/ComplicationShape.kt

So if you can get the Compose UI rendering into a Canvas, you can render it as a texture into OpenGL with a bit of work

[yschimke]

So basically within the Watchface service, in the draw calls, you can safely make static calls to GLES?

[yschimke]

GLES20.glDrawElements(
            GLES20.GL_TRIANGLES,
            drawOrder.size,
            GLES20.GL_UNSIGNED_SHORT,
            drawListBuffer,
        )

[Alex Vanyo]

In the Renderer.GlesRenderer2.render yep, you can call into GLES to draw things

[yschimke]

The complication threw me. That's just standard calls for a Gles watchface. Ignore my stupid questions