Adding GraphicCircular Apple Watch Complications to an existing Xcode Project

Question

I can't find any documentation online that explains how to add any of the new "graphic" complications available on the Watch Series 4. These are my steps:

(1) added class that conforms to CLKComplicationDataSource (code below) (2) set complications configuration to point to (1) and Complications asset folder (4) exported pngs from Sketch and dragged into the Complications asset folder to Modular/Utilitarian/Circular Graphic (Corner, Bezel, and Circular) placeholders in Complications asset folder would not accept pngs (only pdfs). After all this the old Modular Utilitarian and Circular complications work fine, however the images (pdfs) for the Graphics (Corner, Bezel, and Circular) do not render on device

import Foundation
import ClockKit

class HockeyTrackerComplication: NSObject, CLKComplicationDataSource {
    func getSupportedTimeTravelDirections(for complication: CLKComplication, withHandler handler: @escaping (CLKComplicationTimeTravelDirections) -> Void) {
        handler([])
    }

    func getCurrentTimelineEntry(for complication: CLKComplication, withHandler handler: @escaping (CLKComplicationTimelineEntry?) -> Void) {
        if #available(watchOSApplicationExtension 5.0, *) {
            if complication.family == .circularSmall {

                let template = CLKComplicationTemplateCircularSmallRingImage()
                guard let image = UIImage(named: "Circular") else { handler(nil); return}
                template.imageProvider = CLKImageProvider(onePieceImage: image)
                let timelineEntry = CLKComplicationTimelineEntry(date: Date(), complicationTemplate: template)
                handler(timelineEntry)

            } else if complication.family == .utilitarianSmall {

                let template = CLKComplicationTemplateUtilitarianSmallRingImage()
                guard let image = UIImage(named: "Utilitarian") else { handler(nil); return}
                template.imageProvider = CLKImageProvider(onePieceImage: image)
                let timelineEntry = CLKComplicationTimelineEntry(date: Date(), complicationTemplate: template)
                handler(timelineEntry)

            } else if complication.family == .modularSmall {

                let template = CLKComplicationTemplateModularSmallRingImage()
                guard let image = UIImage(named: "Modular") else { handler(nil); return}
                template.imageProvider = CLKImageProvider(onePieceImage: image)
                let timelineEntry = CLKComplicationTimelineEntry(date: Date(), complicationTemplate: template)
                handler(timelineEntry)

            } else if complication.family == .graphicCircular {
                let template = CLKComplicationTemplateGraphicCircularImage()
                guard let image = UIImage(named: "GraphicCircular") else { handler(nil); return}
                template.imageProvider = CLKFullColorImageProvider(fullColorImage: image)
                let timelineEntry = CLKComplicationTimelineEntry(date: Date(), complicationTemplate: template)
                handler(timelineEntry)

            } else if complication.family == .graphicBezel {
                let template = CLKComplicationTemplateModularSmallRingImage()
                guard let image = UIImage(named: "GraphicBezel") else { handler(nil); return}
                template.imageProvider = CLKImageProvider(onePieceImage: image)
                let timelineEntry = CLKComplicationTimelineEntry(date: Date(), complicationTemplate: template)
                handler(timelineEntry)

            } else if complication.family == .graphicCorner {
                let template = CLKComplicationTemplateGraphicCornerCircularImage()
                guard let image = UIImage(named: "GraphicCorner") else { handler(nil); return}
                template.imageProvider = CLKFullColorImageProvider(fullColorImage: image)
                let timelineEntry = CLKComplicationTimelineEntry(date: Date(), complicationTemplate: template)
                handler(timelineEntry)

            } else {

                handler(nil)

            }
        } else {
            // Fallback on earlier versions
        }
    }



}

Answer 1

My problem was that I wasn't implementing getLocalizableSampleTemplate(for:withHandler:) https://developer.apple.com/documentation/clockkit/clkcomplicationdatasource/1650686-getlocalizablesampletemplate while it's listed as optional and not part of the required methods of CLKComplicationDataSource implementing it made my images show up in the complication.

Answer 2

1. convert next:

   • UIImage name: "GraphicBezel" -> "Complication/GraphicBezel"
   • UIImage name: "GraphicCircular" -> "Complication/GraphicCircular"
   • UIImage name: "GraphicCorner" -> "Complication/GraphicCorner"

2. Image Assets, Config Image Set > Screen Width > Individual Width And set image to watch size area(38mm, 40mm, 42mm, 44mm).

it's work for my case.