npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

elice-canvas-plugin

v0.231227.0

Published

Neo smart pen app of Elice platform.

Downloads

4

Readme

Elice-canvas-plugin

Elice-canvas-plugin is a canvas drawing library that makes it easier and faster to implement handwriting on the web.

Initially, we will use the web_pen_sdk to implement pen drawing, but we will enhance it to implement features with other handwriting tools.

Getting Started

This example is how to use the libraries in your app. And you need to create instance.

HTML

First create new html file and add elements which include container. Default id is set to elice-smart-pen-container and if you want to customize then set container option in EliceSmartPen.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Elice Smart Pen - Core</title>
</head>
<body>
  <header>
      <h3>Elice Smart Pen</h1>
      <button id="pen-connection" type="button">펜 연결하기</button>
  </header>
  <div id="elice-smart-pen-container"></div>
</body>
</html>

Script

Add script tag which import plugin module. After import module you can initialize plugin by init method in instance.

<script type="module">
    import { EliceSmartPen } from 'elice-canvas-plugin';

    const eliceSmartPen = new EliceSmartPen();
    eliceSmartPen.init();
</script>

Event & Subscribe

This example codes are placed in script tag where you import plugin. So first you need to add pen connection handler at element.

const penConnectionButton = document.getElementById("pen-connection");
penConnectionButton?.addEventListener("click", () => {
void eliceSmartPen.togglePenConnection(true);
});

Then you need to subscribe instance store state to detect pen controller is created. If controller is created, you can create new drawing canvas by createDrawingStage method.

eliceSmartPen.store.subscribe((current, prev) => {
if (current.penController !== prev.penController) {
  const isConnected = Boolean(current.penController);

  if (penConnectionButton) {
    penConnectionButton.innerText = isConnected
      ? "펜 연결중"
      : "펜 연결하기";
  }

  if (current.penController) {
    eliceSmartPen.createDrawingStage();
  }
}
});

You can simply add event listeners by on method.

eliceSmartPen.on(EliceSmartPenEvents.PenUp, () => {
  localStorage.setItem("saved-drawing", eliceSmartPen.extractDrawingStage('json'));
});
eliceSmartPen.on(EliceSmartPenEvents.NeoPUI, (_, payload) => {
  alert(`This is Neo pen PUI data\n${JSON.stringify(payload)}`);
});

Provider

You need to pass instance as prop at EliceSmartPenProvider. It automatically call init method in instance. Finally you can use helpful hooks useEliceSmartPen and useEliceSmartPenState in Component.

import { useState } from 'react';
import { EliceSmartPen, EliceSmartPenProvider } from "elice-canvas-plugin";

function App() {
const [eliceSmartPen] = useState(() => new EliceSmartPen());

return (
  <EliceSmartPenProvider eliceSmartPen={eliceSmartPen}>
    <Tool/>
    <Note/>
  </EliceSmartPenProvider>
);
}

export default App;

Hooks

This plugin provide useEliceSmartPen, useEliceSmartPenState hooks. useEliceSmartPen returns instance that provide properties and method of canvas core logics. useEliceSmartPenState returns states in instance store. You can use this states to create on demand ui, effects, message events.

import React from 'react';
import { useEliceSmartPen, useEliceSmartPenState, EliceSmartPenEvents } from "elice-canvas-plugin";

function Tool() {
  const eliceSmartPen = useEliceSmartPen();
  const penController = useEliceSmartPenState((state => state.penController));

  const handlePenConnection = () => {
      eliceSmartPen.togglePenConnection(true);
  }

  // create drawing
  React.useEffect(() => {
      if(!penController){
          return;
      }

      eliceSmartPen.createDrawingStage();
  }, [penController]);

  React.useEffect(() => {
      // add listeners.
      eliceSmartPen.on(
      EliceSmartPenEvents.PenUp,
      (eliceSmartPen) => {
          console.log('Pen-up event is fired.');
      },
      );

      return () => {
          // remove listeners.
          eliceSmartPen.off(EliceSmartPenEvents.PenUp);
      }
  }, []);

  return (
      <div>
          <button onClick={handlePenConnection}>penController ? Connected : Connect</button>
      </div>
  )
}

export default Tool;

Container

Basically, this plugin find container by getElementById. By default it set to elice-smart-pen-container and also you can customize it. If container is not found, document body is set to container of drawing canvas. Canvas is basically set to absolute position, so you have to set relative position at container.

import { ELICE_SMART_PEN_CONTAINER } from "elice-canvas-plugin";

function Note() {
  return (
    <div
      id={ELICE_SMART_PEN_CONTAINER}
      style={{ position: "relative", width: "30rem", aspectRatio: 1 }}
    />
  )
}

export default Note;

Demos

All demos located in ./playground folder. There you will find Core (HTML, JS), React versions.

To open demo, run:

yarn core

Runs the playground which implement with core. Open http://localhost:3120 to view it in your browser.

yarn react

Runs the playground which implement with core and react. Open http://localhost:3121 to view it in your browser.

Core

All features are based on EliceSmartPen. You need to initialize it and optionally set configuration.

Methods & Properties

After you initialize EliceSmartPen, you have initialized instance in variable with helpful methods and properties:

| properties | type | | |------------|-----------------------------------|---| | store | StoreApi<EliceSmartPenState> | State manager which used zustand. | | options | EliceSmartPenOptions | Initial configuration. |

You can see store detail information in here.

| methods | type | | |---------------------|------------------------------------------------------------------------------------------------------------------------------------------------------|---| | init | () => void | Initialize configuration of pen, drawing, store. | | togglePenConnection | (value) => Promise | Connect or disconnect pen. | | readDrawingStage | (drawing) => void |Redraw passed drawing stage. | | createDrawingStage | () => void | Create new drawing stage. | | extractDrawingStage | () => string | Extract drawing stage result that formatted by json. | | clearDrawingStage | () => void | Clear drawing in current stage. | | scanDrawingStage | () => Promise |Scan drawing stage to find overlapped drawings on inputs. Those drawings are converted to text which implement by ocr and set value of target input. | | on | (event, callback) => void | Add event at event stack. | | off | (event) => void | Remove event which stored in event stack. |

React

If you use react, you can use those helpful hooks. Before you use those hooks, you must wrap your app or page component with EliceSmartPenProvider.

| hooks | | |-----------------------|-------------------------------------------------| | useEliceSmartPen | React hooks that return EliceSmartPen instance. | | useEliceSmartPenStore | React hooks that return states in store. |

Event

We support extra helpful custom events. For performance, this listeners are bind with debounce. You can get event types from enum EliceSmartPenEvents.

| Event | type | | |-------|----------------------------------|------------------------------------------------------------------| | PenUp | (eliceSmartPen) => void | This event is fired when last of Pen_UP event callback is fired. | | NeoPUI | (eliceSmartPen, payload) => void | This event is fired when you point ncode data in note. |