e-conte-board-dev-story.pdf

79874cedccd1cf5baa8cb264b5091ee6?s=47 codelynx
April 27, 2020
220

 e-conte-board-dev-story.pdf

Story behind the development of e-conte board app.

79874cedccd1cf5baa8cb264b5091ee6?s=128

codelynx

April 27, 2020
Tweet

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 GVODUPVDIFT.PWFE @UPVDIFT4FU6*5PVDI XJUIFWFOU6*&WFOU \ GPSUPVDIJOUPVDIFT\ TXJUDIUZQF\

    DBTFEJSFDU'JOHFS DBTFJOEJSFDU CSFBL DBTFQFODJM DPEFUPESBX  !BWBJMBCMF J04   DBTFJOEJSFDU1PJOUFS CSFBL EFGBVMU ˠ ^ ^ Reject finger Accept Apple Pencil
  13. Touch to scroll or zoom PWFSSJEFGVODWJFX%JE-PBE \ TVQFSWJFX%JE-PBE  TFMGUBCMF7JFXQBO(FTUVSF3FDPHOJ[FS

    BMMPXFE5PVDI5ZQFT <6*5PVDI5PVDI5ZQFEJSFDUSBX7BMVFBT/4/VNCFS> ^ Reject Apple Pencil
  14. Touch to scroll or zoom TFMGTDSPMM7JFXQBO(FTUVSF3FDPHOJ[FSBMMPXFE5PVDI5ZQFT <6*5PVDI5PVDI5ZQFEJSFDUSBX7BMVFBT/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
  18. None
  19. None
  20. None
  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