A quick question regarding Tiles Material, how can I build a Data centric Tile with Tiles Material s...

# compose-wear

[Yingding Wang]

A quick question regarding Tiles Material, how can I build a Data centric Tile with Tiles Material such as the fitbit heart rate tile on Pixel Watch. Is there a Layout in Tiles Material for the Data centric Tile to create graph dynamically?

https://developer.android.com/static/wear/images/tiles/Templatetype-Data.png▾

[John Nichol]

What do you mean by data centric? Do you mean with a graph? If so then those are done with images as far as I know

[Yingding Wang]

Right, I mean the graph. I see, it is an image. Initially, i thought it would be impossible to draw all the lines via Builder.

[Yingding Wang]

@yschimke @John Nichol Can you elaborate on the horologist feature regarding “sharing Compose Canvas code with the app and tile”, does that mean when I draw graphics on the Compose Canvas, I can also render that Compose Canvas inside the Tile Materials?

I am thinking of generating Image dynamically from an AndroidView composable and reload that Image inside TileServices, would that be possible

[yschimke]

@Ataul Munim covers this in this ADS talk

https://youtu.be/w3KvfvgUIds?t=1033▾

[yschimke]

The function is canvasToImageResource https://github.com/google/horologist/blob/6d119aae93d2b117d23cb39bfd9134f5b61d6f91[…]/main/java/com/google/android/horologist/tiles/canvas/Canvas.kt

[yschimke]

If you find a Charting library for compose, if it doesn't strictly need a Canvas composable, but just draws to a DrawScope then you should be able to use them.

[Yingding Wang]

Thanks so much, you saved my day 🙂 It is fantastic.

[yschimke]

Try it first 🙂 , any issues you find I can look into next week.

[Yingding Wang]

Sure 🙂 I can see a path and have a plan now.

[yschimke]

This is a ugly unmaintained (it never made a submitted PR) sample that draws manually https://github.com/yschimke/horologist/commit/c2ec34918fb4efae71adf7d8d034ae4091e55d8f#diff-8c99f3d8d5bfcbe1ad6bfdaf[…]b8fa1b8e03a88b66409f2cad94180

[Yingding Wang]

wow, I surely can learn a lot from this code.

[yschimke]

Maybe some bad things also. I'd love to see this applied to one of the compose charting libraries, but I never got that far.

[yschimke]

But you can use Previews in Android Studio so you see what the Chart or in the Tile will look like.

[Yingding Wang]

I will play with the code. I think there shall be some simple compose chart lib draw on the compose canvas.

[Yingding Wang]

@yschimke I worked through the WeeklyGoalTileRenderer.kt of your horologist fitness3 branch , the Preview doesn’t show for WeeklyGoalTilePreviewWithDrawing(), does that works? I can see the TilePreview from SampleTileRenderer just want to ask before I start to change things.

[yschimke]

It should. I can update that branch and test it again. But we used this functionality in the ADS talk, so definitely working.

[Yingding Wang]

I have merged horologist main into your branch, probably I changed something with the merge, thanks.

[Yingding Wang]

Sorry for the confusion, it works. There is a new Source code Editor With Preview tab on the bottom of the Renderer file, I need to tap open that. Now i see the previews of your tiles. I am all good now.

[Yingding Wang]

@yschimke
I made some progress to render graphics dynamically from a modified chart lib. The Preview is really slow in AS Electric Eel.
But my sample TileRenderer works in Preview with dynamic graph
https://github.com/yingding/horologist/commit/85db9141cb17475b200fdb6e97d9463fc5a82984

Would love to hear your thoughts on this next week.

[Ataul Munim]

@Yingding Wang is there a maven central charting lib you can use instead of jitpack?

[Yingding Wang]

@Ataul Munim
The YCharts from maven central might also work
https://mvnrepository.com/artifact/co.yml/ycharts
There are some DrawScope function defined, please find an example here.
https://github.com/yml-org/YCharts/blob/main/YChartsLib/src/main/java/co/yml/charts/ui/barchart/BarChart.kt

In terms of the Charty lib, i have opened an issue ticket at https://github.com/hi-manshu/Charty/pull/62,
Himanshu is an Android GDE, he is very supportive to the idea of rewriting the DrawScope function and to put them in a module https://github.com/hi-manshu

[Yingding Wang]

Would you also like to put a comment on https://github.com/hi-manshu/Charty/pull/62 ? The charty lib is more lightweighted than YCharts IMO, which might work better for Tiles.

[Yingding Wang]

I haven’t deployed my charty clone to the maven central but only at jitpack for testing, since i would rather work with the original creator of charty: Himanshu together, instead of rewriting his repo.