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

e-conte-board-dev-story.pdf

codelynx
April 27, 2020
570

 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 Slide

  2. About me

    View Slide

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

  4. What is
    e-Conte board?

    View Slide

  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

    View Slide

  6. UITableViewCell
    Apple Pencil to draw
    Finger to scroll

    View Slide

  7. UIScrollView

    View Slide

  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

    View Slide

  9. Apple Pencil
    and
    Touch

    View Slide

  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

    View Slide

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

    View Slide

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

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

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

    View Slide

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

    View Slide

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

    View Slide

  16. Segmented
    Tool Control

    View Slide

  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

    View Slide

  18. View Slide

  19. View Slide

  20. View Slide

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

    View Slide

  22. codelynx/SegmentedToolControl

    View Slide

  23. Fin

    View Slide