Here comes my first Streamlit web app.
- It is hosted on [GitHub](https://github.com/luomein/Apple_Watch_Complication_Lookbook)
- And use Streamlit to publish it as a [web app](https://share.streamlit.io/luomein/apple_watch_complication_lookbook/main/app.py)
- I also use Datapane to publish a simple network graph which could render interactively in Medium.
In this network graph, the nodes are Complication Family. The edge connects two nodes whenever the two Complication Families coexist on the Watch Face. If the two Complication Families coexist on more Watch Faces, then the edge will become thicker. If the Watch Face only has one Complication Family, it contributes to the self connected nodes. Click on the edge could see which Watch Face contributes to this edge.
So from their relation, we could find 4 clusters in the Complication Family
- circularSmall with utilitarians: these are from early days Watch Faces
- modulars: these are from early days Watch Faces
- graphics: these are more recent Watch Faces and have more flexibility
- extraLarge and graphicExtraLarge: this is the special relation, not as coexistence, but as substitution. It only applies to one Watch Face, which is X-Large
The newer Watch Faces which using graphics Complication Family start to support SwiftUI view and timer gauge. While older Watch Faces only support text, image and static ring. The difference between a timer gauge and a static ring is whenever you set a timer gauge in your Complication, Apple Watch will auto update the progress bar in the timer gauge, while in a static ring, you need to update the ring programatically.
And since you could use SwiftUI view in the Complication, you could dynamically render with Path and Shape. There is no need for static image anymore. But Apple still keeps this option for you.
Here is an example in the graphicCircular Complication Family
CLKComplicationTemplateGraphicCircularView and CLKComplicationTemplateGraphicCircularImage could present the same look. One is using SwiftUI view, the other is using image. Since an image could be embedded in a view, they present the same look.
One other benefit to use SwiftUI view is to set font size. Traditionally CLKTextProvider could not set font size and could only present a very limited length of string. While in the SwiftUI view, you could use smaller font to present a longer string.
However if you want to use SwiftUI view with time gauge, there is very limited choices. In each family, there is at most only one Complication Template having SwiftUI view and time gauge together. But the SwiftUI view here is just a bottomLabel, not really a view to put your overall content.
So if you want to use a whole view to put your content in the Complication, you may need to render the gauge-style or ring-style thing by your self.
In the next article, I will use some minimal viable code to generate the Complication and test it on different Watch Faces.
