open-index/open-npm huggingface dataset:
npm package: @helios-interactive/vue-nfc-reader
Description: Vue Plugin to interface with the NFC Reader Server
Author: Gonzalo Eyzaguirre
Latest version: 0.1.0

# Vue NFC Reader

> Vue Plugin to interface with the NFC Reader Server

This plugin requires the NFC Reader Server to be active. (nfc-reader-server-electron)

## Installation
``` bash
# install
npm i -S @helios-interactive/vue-nfc-reader
```

## Usage
To use the `CardReader` component:

### Register Plugin with Vue
``` javascript
import Vue from 'vue';
import NFCRead from '@helios-interactive/vue-nfc-reader';

Vue.use(NFCRead, { host: 'http://localhost', port: 3333 });
```
This will register the `CardReader` component with Vue and make it available for use in other components.

The `host` and `port` properties are used to set the host and port for the NFC Reader Server.

### Use Within a Component
``` html
<template>
  <card-reader
    @ready="scannerReady"
    @error="scannerError"
    @uid="handleUid"
    @info="handleInfo"
  />
  <p>STATUS: {{ status }}</p>
  <p>UID: {{ uid }}</p>
  <p>INFO: {{ info }}</p>
</template>

<script>
export default {
  name: 'MyComponent',
  data() {
    return {
      status: '[scanner status]',
      uid: '',
      info: '',
    };
  },
  methods: {
    scannerReady() {
      this.status = 'Ready to scan';
    },
    scannerError(error) {
      this.status = `Error: ${error.message}`;
    },
    handleUid(uid) {
      this.uid = uid;
    },
    handleInfo(data) {
      this.info = data;
    },
  },
};
</script>
```

The `CardReader` component emits 4 different events:
- **ready**: Event emitted when the app is connected to the server and scanner is ready to scan. Wait for this event to fire before prompting the user to scan.
- **error**: Event emitted when an error occurs. This could be a disconnection from the server, or a disconnection of the scanning device. Payload includes a javascript error with a message. *NOTE: If an error occurs after the `ready` event has been fired, ready status should be revoked. `ready` will fire again if the error resolves itself.*
- **uid**: Event emitted when a card is successfully scanned. Payload is the UID.
- **info**: Event emitted whenever any activity is relayed to the plugin from the server. The payload includes all message info of communication between the plugin and the NFC Reader Server. Not necessary for production, but can be useful for debugging.
npm package: @helios-interactive/vue-siskin
Description: App Simulator using Video and Hotspots for Vue
Author: Gonzalo Eyzaguirre
Latest version: 0.0.8

# Siskin

> App Simulator Vue Plugin using video and hotspots

Siskin is a plugin that provides a Vue component called `Scene`. This component can render videos with overlayed image hotspots that allow navigating to different timestamps in the video, or away from the component.

The plugin also optionally provides a custom router and vuex store module for convenience in managing the state of many scenes and transitions.

## Installation
``` bash
# install
npm i -S @helios-interactive/vue-siskin
```

## Usage
There are two main ways to use Siskin. Using the `Scene` component alone or using the provided router and store module.

### Scene Component
To use the `Scene` component:
``` javascript
import Vue from 'vue';
import AppSimulator from '@helios-interactive/vue-siskin';

Vue.use(AppSimulator);
```
This will register the `Scene` component with Vue and make it available for use in other components.

In a component file:
``` vue
<template>
  <scene :scene="scene" />
</template>

<script>
export default {
  name: 'MyComponent',
  data() {
    return {
      scene: {...},
    };
  },
};
</script>
```

The `Scene` component expects a `scene` property that contains data for rendering a vidoe or image with overlayed hotspots.

Example Scene Data:

``` javascript
{
  type: 'video',
  asset: 'intro/intro.mp4',
  position: {
    left: 0,
    top: 0,
  },
  hotspots: [
    {
      width: 100,
      height: 100,
      left: 100,
      top: 100,
      action: 'otherScene'
    },{
      width: 100,
      height: 100,
      left: 300,
      top: 100,
      time: 2,
      action: {
        type: 'continue',
        startTime: 4,
      },
    }
  ],
}
```

### Router and Store Module
To use the additional router functionality and store module inclue the router and store when instantiating the plugin:
``` javascript
import Vue from 'vue';
import AppSimulator from '@helios-interactive/vue-siskin';
import router from './router';
import store from './store';

Vue.use(AppSimulator, { router, store });
```
This will include an additional `SceneRouter` component that manages transitions between multiple scenes as well as loading scene data and preloading images for smooth transitions.
``` vue
<template>
  <scene-router />
</template>
```