e-conte-board-dev-story.pdf

Story behind the development of e-conte board app.

Transcript

1. e-Conte board Story behind the development Kaz Yoshikawa April 2020
2. About me
3. Kaz Yoshikawa • Electricwoods LLC / Digital Lynx Systems Inc. • e-mail: kyoshikawa@electricwoods.com • 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
4. What is e-Conte board?
5. 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
6. UITableViewCell Apple Pencil to draw Finger to scroll
7. UIScrollView
8. 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
9. Apple Pencil and Touch
10. 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
11. To draw or to scroll? • Case 3 • Apple Pencil to draw • Finger to scroll and zoom
12. Apple Pencil to draw GVOD
    UPVDIFT.PWFE @
    UPVDIFT
    4FU6*5PVDI
    XJUI
    FWFOU
    6*&WFOU
    \
    
    
    GPS
    UPVDI
    JO
    UPVDIFT
    \
    
    
    
    
    TXJUDI
    UZQF
    \
    
    
    
    
    DBTF
    EJSFDU
    
    'JOHFS
    
    
    
    
    DBTF
    JOEJSFDU
    
    
    
    
    
    
    
    
    CSFBL
    
    
    
    
    
    DBTF
    QFODJM
    
    
    
    
    
    
    
    DPEF
    UP
    ESBX
    
    
    
    
    
    
    
    
    
    
    
    !BWBJMBCMF J04
    
    
    
    
    
    
    DBTF
    JOEJSFDU1PJOUFS
    
    
    
    
    
    
    CSFBL
    
    
    
    
    
    EFGBVMU
    
    
    
    
    
    
    
    ˠ
    
    
    ^
    ^
    Reject finger Accept Apple Pencil
13. Touch to scroll or zoom PWFSSJEF
    GVOD
    WJFX%JE-PBE
    \
    
    
    
    
    TVQFSWJFX%JE-PBE
    
    
    
    
    TFMGUBCMF7JFXQBO(FTUVSF3FDPHOJ[FS
    
    
    
    
    
    
    
    
    BMMPXFE5PVDI5ZQFT
    
    
    
    
    
    
    
    
    
    
    
    
    
    <6*5PVDI5PVDI5ZQFEJSFDUSBX7BMVF
    BT
    /4/VNCFS>
    ^ Reject Apple Pencil
14. Touch to scroll or zoom TFMGTDSPMM7JFXQBO(FTUVSF3FDPHOJ[FSBMMPXFE5PVDI5ZQFT
    
    
    
    
    
    <6*5PVDI5PVDI5ZQFEJSFDUSBX7BMVF
    BT
    /4/VNCFS>
    Reject Apple Pencil
15. –Kaz Yoshikawa “Touch to scroll and zoom Apple Pencil to draw” provide better user experience if arrowed
16. Segmented Tool Control
17. 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
21. 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: ... ... } } }
22. codelynx/SegmentedToolControl
23. Fin