e-conte-board-dev-story.pdf

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

 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. 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
  2. 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
  3. 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
  4. 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
  5. 11.

    To draw or to scroll? • Case 3 • Apple

    Pencil to draw • Finger to scroll and zoom
  6. 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
  7. 13.

    Touch to scroll or zoom PWFSSJEFGVODWJFX%JE-PBE \ TVQFSWJFX%JE-PBE  TFMGUBCMF7JFXQBO(FTUVSF3FDPHOJ[FS

    BMMPXFE5PVDI5ZQFT <6*5PVDI5PVDI5ZQFEJSFDUSBX7BMVFBT/4/VNCFS> ^ Reject Apple Pencil
  8. 15.

    –Kaz Yoshikawa “Touch to scroll and zoom Apple Pencil to

    draw” provide better user experience if arrowed
  9. 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
  10. 18.
  11. 19.
  12. 20.
  13. 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: ... ... } } }
  14. 23.

    Fin