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
   

   View Slide

2. About me
   

   View Slide

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
   

   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