Upgrade to Pro — share decks privately, control downloads, hide ads and more …

e-conte-board-dev-story.pdf

codelynx
April 27, 2020
740

 e-conte-board-dev-story.pdf

Story behind the development of e-conte board app.

codelynx

April 27, 2020
Tweet

Transcript

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

    View full-size slide

  2. 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

    View full-size slide

  3. What is
    e-Conte board?

    View full-size slide

  4. 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

    View full-size slide

  5. UITableViewCell
    Apple Pencil to draw
    Finger to scroll

    View full-size slide

  6. UIScrollView

    View full-size slide

  7. 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

    View full-size slide

  8. Apple Pencil
    and
    Touch

    View full-size slide

  9. 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

    View full-size slide

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

    View full-size slide

  11. 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

    View full-size slide

  12. Touch to scroll or zoom
    PWFSSJEFGVODWJFX%JE-PBE
    \
    TVQFSWJFX%JE-PBE

    TFMGUBCMF7JFXQBO(FTUVSF3FDPHOJ[FS
    BMMPXFE5PVDI5ZQFT
    <6*5PVDI5PVDI5ZQFEJSFDUSBX7BMVFBT/4/VNCFS>
    ^
    Reject Apple Pencil

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  15. Segmented
    Tool Control

    View full-size slide

  16. 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

    View full-size slide

  17. 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:
    ...
    ...
    }
    }
    }

    View full-size slide

  18. codelynx/SegmentedToolControl

    View full-size slide