Neo smartpen View SDK for Web Platform

Web View SDK

This document is written to be used the web_view_sdk for NeoSmartPen. ( Caution! ViewSDK require web_pen_sdk )

Installation

# web_view_sdk setting

$ npm install web_view_sdk
$ yarn add web_view_sdk

전체적인 Flow

Library Set

import { MainViewFC, RenderHelper, PenManager, savePDF, appendPdfToStorage, ViewMessageType } from 'web_view_sdk';

Step1: View에 해당하는 MainViewFC를 렌더 영역에 추가합니다.

/** Add MainView Component */
<div>
  <MainViewFC/>
</div>

Step2: PenManager.registerPen()을 사용하여 BLE 접속이 성공된 pen을 ViewSDK에 연결합니다.

/** Connect SmartPen to ViewSDK */
const controller = PenHelper.pens.filter((c) => c.info.MacAddress === mac)[0]; 
PenManager.registerPen(controller);

Step3: 펜에서 전송되는 Dot 정보를 ViewSDK에 연결합니다.

/** Send Dot Data to ViewSDK*/
useEffect(() => {
  PenHelper.dotCallback = async (mac, dot) => {
    penManager.passingDot(dot);
  }
});

Step4: ViewSDK로부터 콜백을 받아옵니다.

/** Get a callback from the ViewSDK. */
useEffect(() => {
  renderHelper.current.messageCallback = async (type, args) => {
    viewMessage(type, args);
  }
});

const viewMessage = (type, args) => {
  switch(type){
    case ViewMessageType.T:
    ...
    case OptionMessageType.T:
    ...
  }
}

🐾 Sample Page

https://github.com/neostudio-team/WebSDKSample

📑 web_view_sdk 공식문서

Google Docs

📜 License

Copyright(c) 2022, NeoLAB Convergence INC. No license allowed.

Release Note

~2022. 06. 30. (WONHO, MHCHOI)

Updates

• Pen Connect+Render, Zoom, PDF Load
• Sample page 구성

===== ~2022. 07. 29. (WONHO)

Updates

• Replay, paperHub

===== ~ (???)

ToDo

• Print(POD), NDP