e-Conte board Story behind the development Kaz Yoshikawa April 2020

About me

Kaz Yoshikawa • Electricwoods LLC / Digital Lynx Systems Inc. • e-mail: [email protected] • twitter: @codelynx1 • Working History • Adobe Systems Tokyo • Lionbridge Tokyo • Quark Tokyo / Denver • Hummingbird Communications Mountain View • Fact International Vancouver • Perle Systems Ltd Toronto • Nihon Software Kaihatsu Nagoya

What is e-Conte board?

C PICTURE DIALOGUE ACTION TIME No. 18 SE ܯใԻ Φϖ OFF ʮʢӳʣ֎นഁ ଛʂʯ Φϖ ʮઈର๷Ӵ۠ഁΒΕ· ͢ʯ ࢘ྩࣨ ࢘ྩͨͪͳΊϞχ λʔ 4+00 C73 SE ཛྷ ΰΥΥΥ SE όΩόΩΩɽɽɽ ج஍֎෦ ཱͪฒͿϓϥϯτͷԞͰߕ ൘͕Ί͘Ε্͕Δ ※֎͸ ܹ͍͠෩Ӎ 2+00 C74 ఱ࢖ͷྠΛ·ͱͬͨ࢖ె্ ঢͯ͘͠Δɻ Ӎ 2+01 C75 ΦΦΦΦ ๺ۃج஍શܠ ʢւ্ϓϥϯτͷ࿈݁ঢ়ʣ ্ঢ͍ͯ͘͠ ࢖ ੺ࠇ͘௜Μͩւ໘ PAN ※Մ ͳΒߥΕͨւ໘ͷന೾ ࢀߟɿ๺ւ༉ా 5+08 C76 TOTAL(13+09) Storyboard

UITableViewCell Apple Pencil to draw Finger to scroll

UIScrollView

e-Conte board • Wished to implement drawing engine with Metal • But implemented with Core Graphics • Planed to implement like Catmull-rom line smoothing • Apple Pencil is fast enough moveto lineto

Apple Pencil and Touch

To draw or to scroll? • Case 1 • Pen tool to draw • Hand tool to scroll and zoom • Case 2 • Single finger to draw • Double finger to scroll and zoom

To draw or to scroll? • Case 3 • Apple Pencil to draw • Finger to scroll and zoom

Apple Pencil to draw GVODUPVDIFT.PWFE @UPVDIFT4FU6*5PVDI XJUIFWFOU6*&WFOU \ GPSUPVDIJOUPVDIFT\ TXJUDIUZQF\ DBTFEJSFDU'JOHFS DBTFJOEJSFDU CSFBL DBTFQFODJM DPEFUPESBX !BWBJMBCMF J04 DBTFJOEJSFDU1PJOUFS CSFBL EFGBVMU ˠ ^ ^ Reject finger Accept Apple Pencil

Touch to scroll or zoom PWFSSJEFGVODWJFX%JE-PBE \ TVQFSWJFX%JE-PBE TFMGUBCMF7JFXQBO(FTUVSF3FDPHOJ[FS BMMPXFE5PVDI5ZQFT <6*5PVDI5PVDI5ZQFEJSFDUSBX7BMVFBT/4/VNCFS> ^ Reject Apple Pencil

Touch to scroll or zoom TFMGTDSPMM7JFXQBO(FTUVSF3FDPHOJ[FSBMMPXFE5PVDI5ZQFT <6*5PVDI5PVDI5ZQFEJSFDUSBX7BMVFBT/4/VNCFS> Reject Apple Pencil

–Kaz Yoshikawa “Touch to scroll and zoom Apple Pencil to draw” provide better user experience if arrowed

Segmented Tool Control

SegmentedToolControl • Not a UIControl it’s a UIView • SegmentedControl like UI object • for Vertical and Horizontal • Item can only be image (icon) not text • Two Level Grouping • Category > Item • Only one among all can be selected

No content

No content

No content

class SomeViewController: UIViewController { @IBOutlet weak var control: SegmentedToolControl! static let heartKey = "hammer" ... static let itemSize = CGSize(width: 32, height: 32) func makeSegmentedItem(_ identifier: String) -> SegmentedItem { return SegmentedItem(identifier: identifier, image: UIImage(systemName: identifier)!.resizing(to: Self.itemSize)!) } func setup() { control.itemSize = Self.itemSize control.orientation = .vertical control.direction = .right control.delegate = ... control.segmentedCategoryItems = [ SegmentedCategoryItem(items: [ self.makeSegmentedItem(Self.heartKey), self.makeSegmentedItem(Self.spadeKey), self.makeSegmentedItem(Self.diamondKey), self.makeSegmentedItem(Self.clubKey), ]), ] } } extension ViewController: SegmentedToolControlDelegate { func segmentedToolControl(_ control: SegmentedToolControl, didSelectItem item: SegmentedItem) { switch item { case Self.heartKey: ... case Self.spadeKey: ... ... } } }

codelynx/SegmentedToolControl

Fin