Search code examples
swiftxcodeapple-watchwatchosapple-watch-complication

Adding GraphicCircular Apple Watch Complications to an existing Xcode Project

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 enter image description here (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).enter image description here 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 enter image description here

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
        }
    }



}
Solution

  • 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.