2.3.0 • Published 12 months ago

@prismadelabs/prismaid v2.3.0

Weekly downloads
5
License
ISC
Repository
github
Last release
12 months ago

Web SDK

Beta 1.0.5

Purpose

The PrismaSDK is intended to be used in a web application and collect signals created by a PrismaID tag. The PrismaSDK will internally talk to the Prismade Decoder Backend and decode that signal. The result is sent back to the application through a callback. In addition to information related to the decoded data, there are events for user interaction and potential hints to improve reading results.

Install

npm install @prismadelabs/prismaid

Usage

At the moment we provided two minimalistic samples how to use the Web SDK in

  • Javascript application
  • Ionic application

Table of Contents

Use SDK in Javascript application

It is assumed that one is experienced to create a web application, so we will not go too much into detail here. The SDK needs to collect raw touch events from any HTML element, in our example a canvas. Therefore, we will need a simple HTML page with a canvas. Secondly, the page has to include our JavaScript sample file.

# index.html

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
    <meta charset="UTF-8">
    <title>Prisma SDK</title>
    <meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
</head>

<body>
    <canvas id="prismasdk" style="position: fixed; left: 10px; top: 10px; ">
    </canvas>

    <!-- The main bundle js is generated via browserify -->
    <script src="./bundle.js"></script>
</body>

</html>
# main.js

const pl = require("@prismadelabs/prismaid")

const canvas = document.getElementById("prismasdk")
canvas.width = window.innerWidth - 20
canvas.height = window.innerHeight - 20

const sdk = new pl.PrismaSDK("YOUR_API_KEY")  
const version = "Prisma SDK version " + pl.PrismaSDK.version()

const ctx = canvas.getContext("2d")
ctx.fillStyle = "blue"
ctx.fillRect(0, 0, canvas.width, canvas.height)
ctx.fillStyle = "white"
ctx.font = "15px Arial"
ctx.fillText(version , 10, 20)

sdk.getDetectionSuccessSubject().subscribe((response) => {
    console.log("*) detection success:", response.description())

    ctx.fillStyle = "blue"
    ctx.fillRect( 10, 30, 100, 20)
    ctx.fillStyle = "white"
    ctx.fillText(`${response.codeId}-${response.direction}`, 10, 40)
})

sdk.getDetectionErrorSubject().subscribe((response) => {
    console.log("*) detection error:", response.description())

    response.hints.forEach((hint) => {
        console.log("*) hint:", hint.description())
    })
})

sdk.getInteractionSubject().subscribe((response) => {
    console.log("*) interaction event:", response.event, response.activeSignals)
})

sdk.getInitialisationSubject().subscribe((response) => {
    console.log("*) config data:", response.codeSetTypes, response.dpi, response.devicePixelRatio)
})

sdk.getProgressSubject().subscribe((response) => {
    console.log("*) progress:", response.progress)
})

sdk.getHintSubject().subscribe((response) => {
    console.log("*) hint:", response.code, response.message, response.type)
})

sdk.getConnectivitySubject().subscribe((response) => {
    console.log("*) connectivity:", response.status)
})

sdk.attachToElement(canvas)

...

Use SDK in Ionic application

It is assumed that one is experienced with Ionic applications, so we will not go into detail here. Learn more

# home.html

<ion-content>
	<canvas #canvas id="home"></canvas>
</ion-content>
import { Component, ElementRef, ViewChild } from "@angular/core"
import { NavController } from "ionic-angular"

import { CodeType, DecoderResponseError, DecoderResponseSuccess, HintResponse, InitialisationResponse, InteractionResponse, PrismaSDK, ProgressResponse, SwipeDirection, SwipingGesture } from "@prismadelabs/prismaid"

@Component({
    selector: "page-home",
    templateUrl: "home.html",
})

export class HomePage {
    @ViewChild("canvas")
    private canvasRef: ElementRef

    private sdk: PrismaSDK

    constructor(public navCtrl: NavController, private contentManager: ContentManager) {
    }

    private ionViewDidLoad() {
        console.log("ionViewDidLoad: HomePage")

        this.initialisePrismaSDK()
    }

    private initialisePrismaSDK() {
        this.sdk = new PrismaSDK("YOUR_API_KEY")

        this.sdk.getInitialisation().setExpectedCodeType(CodeType.Displacement)
        this.sdk.getInitialisation().setExpectedSwipingGesture(SwipingGesture.singleSwipe)

        this.sdk.getDetectionSuccessSubject().subscribe((response: DecoderResponseSuccess) => {
            console.log("*) callback success:", response.codeId, response.direction)
        })

        this.sdk.getDetectionErrorSubject().subscribe((response: DecoderResponseError) => {
            console.log("*) callback error:", response.description())

            response.hints.forEach((hint) => {
                console.log("*) hint:", hint.description())
            })
        })

        this.sdk.getInteractionSubject().subscribe((response: InteractionResponse) => {
            console.log("*) interaction:", response.event, response.activeSignals)
        })

        this.sdk.getInitialisationSubject().subscribe((response: InitialisationResponse) => {
            console.log("*) config data:", response.codeSetTypes, response.dpi, response.devicePixelRatio)
        })

        this.sdk.getProgressSubject().subscribe((response: ProgressResponse) => {
            console.log("*) progress:", response.progress, response.direction, response.swipeRound)
        })

        this.sdk.getHintSubject().subscribe((response: HintResponse) => {
            console.log("*) hint:", response.code, response.message, response.type)
        })

        this.sdk.attachToElement(this.canvasRef.nativeElement)
    }

    ....
2.3.0-beta.71

1 year ago

2.3.0-beta.77

12 months ago

2.3.0-beta.83

12 months ago

2.3.0-beta.84

12 months ago

2.3.0-beta.81

12 months ago

2.3.0-beta.88

12 months ago

2.3.0

12 months ago

2.2.1-beta.66

1 year ago

2.2.1-beta.64

1 year ago

2.2.1

1 year ago

2.2.1-beta.63

1 year ago

2.2.0-beta.144

1 year ago

2.2.0-beta.21

1 year ago

2.2.0-beta.143

1 year ago

2.1.2

1 year ago

2.1.2-beta.142

1 year ago

2.1.2-beta.140

1 year ago

2.1.2-beta.141

1 year ago

2.1.2-beta.137

1 year ago

2.1.2-beta.136

1 year ago

2.1.2-beta.135

1 year ago

2.1.2-beta.134

1 year ago

2.1.2-beta.139

1 year ago

2.1.2-beta.133

1 year ago

2.1.2-beta.129

1 year ago

2.1.2-beta.128

1 year ago

2.1.2-beta.127

1 year ago

2.1.2-beta.132

1 year ago

2.1.2-beta.131

1 year ago

2.1.2-beta.130

1 year ago

2.1.2-beta.126

1 year ago

2.1.2-beta.114

1 year ago

2.1.2-beta.119

1 year ago

2.1.2-beta.118

1 year ago

2.1.2-beta.117

1 year ago

2.1.2-beta.116

1 year ago

2.1.2-beta.122

1 year ago

2.1.2-beta.121

1 year ago

2.1.2-beta.120

1 year ago

2.1.2-beta.125

1 year ago

2.1.2-beta.124

1 year ago

2.1.2-beta.123

1 year ago

2.1.2-beta.111

1 year ago

2.1.2-beta.113

1 year ago

2.1.2-beta.112

1 year ago

2.1.2-beta.110

1 year ago

2.1.2-beta.104

2 years ago

2.1.2-beta.103

2 years ago

2.1.2-beta.102

2 years ago

2.1.2-beta.108

2 years ago

2.1.2-beta.107

2 years ago

2.1.2-beta.106

2 years ago

2.1.2-beta.105

2 years ago

2.1.2-beta.109

2 years ago

2.1.2-beta.101

2 years ago

2.1.2-beta.100

2 years ago

2.1.2-beta.95

2 years ago

2.1.2-beta.94

2 years ago

2.1.2-beta.99

2 years ago

2.1.2-beta.97

2 years ago

2.1.2-beta.98

2 years ago

2.1.2-beta.93

2 years ago

2.1.2-beta.74

2 years ago

2.1.2-beta.71

2 years ago

2.1.2-beta.72

2 years ago

2.1.2-beta.78

2 years ago

2.1.2-beta.75

2 years ago

2.1.2-beta.84

2 years ago

2.1.2-beta.85

2 years ago

2.1.2-beta.82

2 years ago

2.1.2-beta.83

2 years ago

2.1.2-beta.80

2 years ago

2.1.2-beta.81

2 years ago

2.1.2-beta.88

2 years ago

2.1.2-beta.89

2 years ago

2.1.2-beta.86

2 years ago

2.1.2-beta.87

2 years ago

2.1.2-beta.92

2 years ago

2.1.2-beta.69

2 years ago

2.1.2-beta.1

2 years ago

2.1.1

3 years ago

2.1.0-beta.67

3 years ago

2.1.0-beta.66

3 years ago

2.1.0-beta.65

3 years ago

2.1.0-beta.64

3 years ago

2.1.0-beta.63

3 years ago

2.1.0-beta.62

3 years ago

2.1.0-beta.61

3 years ago

2.1.0-beta.60

3 years ago

2.1.0-beta.58

3 years ago

2.1.0-beta.55

3 years ago

2.1.0-beta.54

3 years ago

2.1.0-beta.53

3 years ago

2.1.0-beta.51

4 years ago

2.1.0-beta.50

4 years ago

2.1.0-beta.7

4 years ago

2.1.0-beta.6

4 years ago

2.1.0-beta.5

4 years ago

2.1.0-beta.4

4 years ago

2.1.0-beta.3

4 years ago

2.1.0-beta.1

4 years ago

2.1.0-beta.2

4 years ago

2.1.0-beta.48

4 years ago

2.0.0-beta.11

4 years ago

1.1.1-beta.46

4 years ago

2.0.0-beta.47

4 years ago

2.0.0-beta.10

4 years ago

2.0.0-beta.9

4 years ago

2.0.0-beta.8

4 years ago

2.0.0-beta.7

4 years ago

1.1.1-beta.45

5 years ago

2.0.0-beta.2

5 years ago

2.0.0-beta.6

5 years ago

2.0.0-beta.5

5 years ago

2.0.0-beta.4

5 years ago

2.0.0-beta.3

5 years ago

2.0.0-beta.1

5 years ago

1.1.1-beta.2

5 years ago

1.1.1-beta.1

5 years ago

1.1.1-beta.44

5 years ago

1.1.1-beta.43

5 years ago

1.1.1-beta.41

5 years ago

1.1.1-beta.40

5 years ago

1.1.1-beta.38

5 years ago

1.1.1-beta.39

5 years ago

1.1.1-beta.37

5 years ago

1.1.1-beta.34

5 years ago

1.1.1-beta.33

5 years ago

1.1.1-beta.36

5 years ago

1.1.1-beta.35

5 years ago

1.2.10

5 years ago

1.1.1-beta.32

5 years ago

1.1.1-beta.31

5 years ago

1.1.1-beta.30

5 years ago

1.1.1-beta.29

5 years ago

1.2.9

5 years ago

1.1.1-beta.28

5 years ago

1.1.1-beta.27

5 years ago

1.1.1-beta.26

5 years ago

1.1.1-beta.25

5 years ago

1.1.1-beta.24

5 years ago

1.1.1-beta.23

5 years ago

1.1.1-beta.22

5 years ago

1.1.1-beta.21

5 years ago

1.1.1-beta.20

5 years ago

1.1.1-beta.19

6 years ago

1.1.1-beta.18

6 years ago

1.2.8

6 years ago

1.1.1-beta.17

6 years ago

1.1.1-beta.16

6 years ago

1.1.1-beta.15

6 years ago

1.1.1-beta.14

6 years ago

1.1.1-beta.13

6 years ago

1.1.1-beta.12

6 years ago

1.1.1-beta.11

6 years ago

1.1.1-beta.10

6 years ago

1.1.1-beta.9

6 years ago

1.2.7

6 years ago

1.1.1-beta.8

6 years ago

1.1.1-beta.7

6 years ago

1.1.1-beta.6

6 years ago

1.1.1-beta.5

6 years ago

1.1.1-beta.4

6 years ago

1.1.1-beta.3

6 years ago

1.1.0-beta.8

6 years ago

1.1.0-beta.7

6 years ago

1.1.0-beta.6

6 years ago

1.1.0-beta.5

6 years ago

1.1.0-beta.4

6 years ago

1.1.0-beta.3

6 years ago

1.1.0-beta.2

6 years ago

1.1.0-beta.1

6 years ago

1.0.16-beta.0

6 years ago

1.0.15

6 years ago

1.0.15-beta.1

6 years ago

1.0.15-beta.0

6 years ago

1.0.14

6 years ago

1.0.14-beta.3

6 years ago

1.0.14-beta.2

6 years ago

1.0.14-beta.1

6 years ago

1.0.14-beta.0

6 years ago

1.0.13

6 years ago

1.0.12

6 years ago

1.0.12-beta.0

6 years ago

1.0.11

6 years ago

1.0.10

6 years ago

1.0.10-beta.0

6 years ago

1.0.9

6 years ago

1.0.8

6 years ago

1.0.7

7 years ago

1.0.6

7 years ago

1.0.5

7 years ago

1.0.4

7 years ago

1.0.3

7 years ago

1.0.2

7 years ago

1.0.1

7 years ago

1.0.0

7 years ago