Extract image dimensions from the watchOS HIG

extract_watch_image_sizes.js

// Run this on https://developer.apple.com/design/human-interface-guidelines/watchos/icons-and-images/complication-images/
function pascalCase(str) {
  var fixed = str.replace(/(\w)(\w*)/g, function(g0,g1,g2){return g1.toUpperCase() + g2.toLowerCase();}).split(' ').join('');

  if(fixed.indexOf('(') > -1) {
    fixed = fixed.substring(0, fixed.indexOf('('));
  }

  return fixed;
}

var templates = {};

$('table').each(function(i,t){
  var family = $(this).prev('h4').text().replace(' ', '');

  var devices = [];

  $(t).find('thead th').each(function(){
    devices.push($(this).text());
  });

  devices.shift();

  $(t).find('tr').each(function(){
    var datas = [];
    $(this).find('td').each(function(){ datas.push($(this).text()) });

    if (datas.length > 0) {
      var template = datas.shift();

      var name = family+pascalCase(template);

      if(typeof templates[name] === "undefined") templates[name] = {};
    
      datas.forEach(function(v, i) {
        if(family == '') {
          return
        }
    
        var screensize = devices[i];

        if(v === "N/A") {
          v = "20px × 20px"
        }

        if(screensize === "40mm and 42mm") {
          templates[name]["40"] = v;
          templates[name]["42"] = v;
        } else if(screensize === "38mm") {
          templates[name]["38"] = v;
        } else if(screensize === "40mm") {
          templates[name]["40"] = v;
        } else if(screensize === "44mm") {
          templates[name]["44"] = v;
        }
      });
    }
  });
});

console.log(JSON.stringify(templates));

watchOS_Sizes.swift

import Foundation
import UIKit
import WatchKit
import ClockKit

func getWatchImageSize(templateName: String): CGSize? {
        // Template: Device Size: Image Size @1x
        let imageSizes: [String: [Int: CGSize]] = [
            "CircularSmallRingImage": [
                38: CGSize(width: 40, height: 40),
                40: CGSize(width: 44, height: 44),
                42: CGSize(width: 44, height: 44),
                44: CGSize(width: 48, height: 48)
            ],
            "CircularSmallSimpleImage": [
                38: CGSize(width: 32, height: 32),
                40: CGSize(width: 36, height: 36),
                42: CGSize(width: 36, height: 36),
                44: CGSize(width: 40, height: 40)
            ],
            "CircularSmallStackImage": [
                38: CGSize(width: 32, height: 14),
                40: CGSize(width: 34, height: 16),
                42: CGSize(width: 34, height: 16),
                44: CGSize(width: 38, height: 18)
            ],
            "ModularSmallRingImage": [
                38: CGSize(width: 36, height: 36),
                40: CGSize(width: 38, height: 38),
                42: CGSize(width: 38, height: 38),
                44: CGSize(width: 42, height: 42)
            ],
            "ModularSmallSimpleImage": [
                38: CGSize(width: 52, height: 52),
                40: CGSize(width: 58, height: 58),
                42: CGSize(width: 58, height: 58),
                44: CGSize(width: 64, height: 64)
            ],
            "ModularSmallStackImage": [
                38: CGSize(width: 52, height: 28),
                40: CGSize(width: 58, height: 30),
                42: CGSize(width: 58, height: 30),
                44: CGSize(width: 64, height: 34)
            ],
            "ModularLargeColumnsImage": [
                38: CGSize(width: 64, height: 22),
                40: CGSize(width: 74, height: 24),
                42: CGSize(width: 74, height: 24),
                44: CGSize(width: 84, height: 28)
            ],
            "ModularLargeStandardBody": [
                38: CGSize(width: 64, height: 22),
                40: CGSize(width: 74, height: 24),
                42: CGSize(width: 74, height: 24),
                44: CGSize(width: 84, height: 28)
            ],
            "ModularLargeTable": [
                38: CGSize(width: 64, height: 22),
                40: CGSize(width: 74, height: 24),
                42: CGSize(width: 74, height: 24),
                44: CGSize(width: 84, height: 28)
            ],
            "UtilitarianSmallFlatImage": [
                38: CGSize(width: 42, height: 18),
                40: CGSize(width: 44, height: 20),
                42: CGSize(width: 44, height: 20),
                // 44: CGSize(width: 20, height: 20) -- 44mm is marked "N/A" in HIG
            ],
            "UtilitarianSmallRingImage": [
                38: CGSize(width: 28, height: 28),
                40: CGSize(width: 28, height: 28),
                42: CGSize(width: 28, height: 28),
                44: CGSize(width: 32, height: 32)
            ],
            "UtilitarianSmallSquareImage": [
                38: CGSize(width: 40, height: 40),
                40: CGSize(width: 44, height: 44),
                42: CGSize(width: 44, height: 44),
                44: CGSize(width: 50, height: 50)
            ],
            "UtilitarianLargeFlatImage": [
                38: CGSize(width: 42, height: 18),
                40: CGSize(width: 44, height: 20),
                42: CGSize(width: 44, height: 20),
                // 44: CGSize(width: 20, height: 20) -- 44mm is marked "N/A" in HIG
            ],
            "ExtraLargeRingImage": [
                38: CGSize(width: 126, height: 126),
                40: CGSize(width: 133, height: 133),
                42: CGSize(width: 133, height: 133),
                44: CGSize(width: 146, height: 146)
            ],
            "ExtraLargeSimpleImage": [
                38: CGSize(width: 182, height: 182),
                40: CGSize(width: 203, height: 203),
                42: CGSize(width: 203, height: 203),
                44: CGSize(width: 224, height: 224)
            ],
            "ExtraLargeStackImage": [
                38: CGSize(width: 156, height: 84),
                40: CGSize(width: 174, height: 90),
                42: CGSize(width: 174, height: 90),
                44: CGSize(width: 192, height: 102)
            ],
            "GraphicCornerCircularImage": [
                40: CGSize(width: 64, height: 64),
                44: CGSize(width: 72, height: 72)
            ],
            "GraphicCornerGaugeImage": [
                40: CGSize(width: 40, height: 40),
                44: CGSize(width: 44, height: 44)
            ],
            "GraphicCornerTextImage": [
                40: CGSize(width: 40, height: 40),
                44: CGSize(width: 44, height: 44)
            ],
            "GraphicCircularImage": [
                40: CGSize(width: 84, height: 84),
                44: CGSize(width: 94, height: 94)
            ],
            "GraphicCircularClosedGaugeImage": [
                40: CGSize(width: 54, height: 54),
                44: CGSize(width: 62, height: 62)
            ],
            "GraphicCircularOpenGaugeImage": [
                40: CGSize(width: 22, height: 22),
                44: CGSize(width: 24, height: 24)
            ],
            "GraphicRectangularLargeImage": [
                40: CGSize(width: 300, height: 94),
                44: CGSize(width: 342, height: 108)
            ],
            "GraphicRectangularStandardBody": [
                40: CGSize(width: 24, height: 24),
                44: CGSize(width: 27, height: 27)
            ],
            "GraphicRectangularTextGauge": [
                40: CGSize(width: 24, height: 24),
                44: CGSize(width: 27, height: 27)
            ]
        ]

        let deviceSize = WKInterfaceDevice.currentResolution().rawValue

        if let sizeDict = imageSizes[templateName], let size = sizeDict[deviceSize] {
            return size
        }

        return nil
    }