Search code examples
swiftwatchkitapple-watch-complication

What is the name of these icons on Apple watch complications list & where can I access to them?

I downloaded the apple famous watch app example (Creating and Updating Complications)

in this project, the complications list has a nice gauge icon like below:

enter image description here enter image description here

As far as I know, these should be the placeholder icons but all the icons in placeholder assets are these:

enter image description here

So where is the source of those gauge icons?

Solution

  • This is a CLKComplicationTemplateGraphicCircularOpenGaugeSimpleText. (What a mouthful!) The relevant lines are found in line 256 of ComplicationController.swift in the linked sample code.

    private func createGraphicCircleTemplate(forDate date: Date) -> CLKComplicationTemplate {
    // Create the data providers.
    let percentage = Float(min(data.mgCaffeine(atDate: date) / 500.0, 1.0))
    let gaugeProvider = CLKSimpleGaugeProvider(style: .fill,
                                               gaugeColors: [.green, .yellow, .red],
                                               gaugeColorLocations: [0.0, 300.0 / 500.0, 450.0 / 500.0] as [NSNumber],
                                               fillFraction: percentage)
    
    let mgCaffeineProvider = CLKSimpleTextProvider(text: data.mgCaffeineString(atDate: date))
    let mgUnitProvider = CLKSimpleTextProvider(text: "mg Caffeine", shortText: "mg")
    mgUnitProvider.tintColor = data.color(forCaffeineDose: data.mgCaffeine(atDate: date))
    
    // Create the template using the providers.
    let template = CLKComplicationTemplateGraphicCircularOpenGaugeSimpleText()
    template.gaugeProvider = gaugeProvider
    template.centerTextProvider = mgCaffeineProvider
    template.bottomTextProvider = CLKSimpleTextProvider(text: "mg")
    return template
}

    It's not an icon/image, just a kind of CLKComplicationTemplate.