Skip to content

Instantly share code, notes, and snippets.

@robbiet480
Created October 1, 2018 14:08
Show Gist options
  • Save robbiet480/2a38d499323cb964d47b2f5d8004694a to your computer and use it in GitHub Desktop.
Save robbiet480/2a38d499323cb964d47b2f5d8004694a to your computer and use it in GitHub Desktop.
Extract image dimensions from the watchOS HIG
// 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));
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
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment