4

I am working on the watch complication for my app. The app main feature is to time tracking some tasks. So for .graphicCircular module, I choose to use the graphic circular open gauge template. CLKComplicationTemplateGraphicCircularOpenGaugeSimpleText. However, the result looks like below. The count down doesn't fit.

Watch Simulator Screenshot

Here is the code I am using: (I have not yet hooked up with my model. Just using some placeholder for UI to try to make it looked correct first.)

let relativeProvider = CLKRelativeDateTextProvider(date: Date(), style: .timer, units: [.minute])
let template = CLKComplicationTemplateGraphicCircularOpenGaugeSimpleText()
template.centerTextProvider = relativeProvider
template.bottomTextProvider = CLKSimpleTextProvider(text: "Q", shortText: "Q")
let endDate = Calendar.current.date(byAdding: .minute, value: 1, to: Date()) ?? Date()
let gaugeProvider = CLKTimeIntervalGaugeProvider(style: .fill, gaugeColors: [UIColor.green, UIColor.yellow, UIColor.orange, UIColor.red], gaugeColorLocations: nil, start: dateUsed, end: endDate)
template.gaugeProvider = gaugeProvider
return template

I also tried different style options for relative date text provider, all of them not fit at all.

How can I make this count down fit? (The iOS timer app has the count down inside a circle and it fits. How can it do that?)

If I cannot make the text smaller so it can fit, then how can I then refactor the text from the relative date text provider so I can let it display the counting number only? Meaning instead of 0:11 it uses 11 so it can fit. I know that .offsetShort provides 11 min.... Unfortunately, this doesn't fit as well. I can only see 11 ... on the screen

Any hint appreciates. Thanks so much for all your help.

nuynait
  • 1,912
  • 20
  • 27
  • 1
    In fact I was looking at the very same issue yesterday but I have no solution yet. I have the feeling it is not possible to fix it in a clear way at the moment. As I see many of these providers are generic and the actual complication template and watch face influences the outcome. For example you can color (tint) the `CLKRelativeDateTextProvider` text in certain situations but it won't have an effect in others. This text provider works well for me in other complication templates but the space here might be too small for the 12pt/13pt font (depending on the watch size) whatever we do. – Peter Porfy Jun 30 '20 at 08:46
  • 1
    Maybe in WatchOS7 it will be possible but I didn't give up yet on a solution so will update you if I find something. – Peter Porfy Jun 30 '20 at 08:47
  • 1
    One more note on the built in timer: it works indeed but I believe there are certain built in stuff you cannot replicate in a clean way. Fix me but I think you cannot replicate the gauge of the system timer neither, right? I mean the dashed gauge of it. Not without providing your own images and timeline entries. – Peter Porfy Jun 30 '20 at 08:51
  • 1
    @PeterPorfy Thanks for leaving your comments. I will also update this when I get any better solution with this. Right now I have gone to watch connectivity and try to talk to my iOS app. When I come back to complications again, I will see what I can do to fix this. (If fixing this is not possible, I might just disable the complication for graphics circular for now.) – nuynait Jul 01 '20 at 20:13
  • 1
    So I was playing around with it a bit and didn't find a way to solve it with `CLKRelativeDateTextProvider` for GraphicCircular. In fact there are even more tight space for some other complication type: e.g. Utilitarian Small. I decided to deal with the limitation for now and retry later on with WatchOS7. Depending on the complication type I will either provide a single `CLKComplicationTimelineEntry` with the relative provider (e.g. for corner it is working well) and for others a range of entries. In fact I did that already for some before my current need of countdown (it was just a gauge). – Peter Porfy Jul 03 '20 at 11:04
  • 1
    So for those where I have no space my app will provide a range of entries in the controller's `getTimelineEntries` func. These circular complications can display numbers with 2 digits and my app can get away with that as the settings boundary allows it. For each future timeline entry I create a `CLKSimpleTextProvider` with the remaining minutes of the countdown. It is important to note that it will only show the actual remaining minutes, even for the last minute it will show `<1`. – Peter Porfy Jul 03 '20 at 11:10
  • 1
    This 'minutes only' limitation with this solution is not important just because of the space limitation but because of what I observed about the update rate: it is far from the smoothness of `CLKRelativeDateTextProvider` as with the entry range sometimes it skips a second or so - I guess it is also some internal allowance for the relative provider to be smooth. With minutes only it is nice enough for now and provides value to users already. I will save this post anyway and will get back once I find something better :) – Peter Porfy Jul 03 '20 at 11:14
  • 1
    @PeterPorfy Thanks for sharing the result of your tries and decisions. That sounds valuable to me and saves me so much time on researching and testing this issue. I agree with you. That's probably the way to go. I was pretty busy at the work for my employer right now, will try and work on this probably next weekend. Thanks for sharing your valuable results with me. So much appreciated. – nuynait Jul 03 '20 at 16:04
  • 1
    FYI @nuynait https://www.wwdcnotes.com/notes/wwdc20/10048 I didn't play around with it yet + earlier WatchOS versions will be with us for some time but this can be a good way for this issue in the future. – Peter Porfy Sep 24 '20 at 16:39
  • This is so irritating and still a problem with watchOS 8. It fits `9 H` fine, but insists in using `3 MIN` instead of `3 M`. I tried to have more freedom with a SwiftUI complication, but the `CLKTimeIntervalGaugeProvider` isn't available in SwiftUI, plus the spacing looks horrible. SwiftUI can squeeze everything indeed, but it squeezes too much like there's unnecessary padding. – TruMan1 Apr 03 '22 at 11:19

0 Answers0