# @qtpiofficial/qtwc

> Qt UI elements library based on web components

Latest version **1.2.3** (published 2022-03-25) · SEE LICENSE IN license.txt license · 0 weekly downloads

## Install

```sh
npm install @qtpiofficial/qtwc
pnpm add @qtpiofficial/qtwc
yarn add @qtpiofficial/qtwc
bun add @qtpiofficial/qtwc
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.2.3 |
| Published | 2022-03-25 |
| First published | 2022-03-20 |
| Weekly downloads | 0 |
| License | SEE LICENSE IN license.txt |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 1.2 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | QtPi |
| Maintainers | qtpiofficial |
| Keywords | web-component, web-components, qtpi, robotic stem components, qtcomponents |

## Links

- npm: https://www.npmjs.com/package/@qtpiofficial/qtwc
- Repository: https://github.com/QtLearnCodeLab/qtwc
- Homepage: https://github.com/QtLearnCodeLab/qtwc#readme
- Issues: https://github.com/QtLearnCodeLab/qtwc/issues
- npm.io page: https://npm.io/package/@qtpiofficial/qtwc

## Recent versions

- 1.2.3 (latest) — 2022-03-25
- 1.2.2 — 2022-03-24
- 1.2.1 — 2022-03-23
- 1.2.0 — 2022-03-20

## README

<!-- START doctoc generated TOC please keep comment here to allow auto update -->
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->

- [QtComponents from QtPi](#qtcomponents-from-qtpi)
  - [Installation](#installation)
  - [Usage](#usage)
  - [What it contains](#what-it-contains)
    - [Components](#components)
    - [Tutorials](#tutorials)
  - [About QtPi](#about-qtpi)

<!-- END doctoc generated TOC please keep comment here to allow auto update -->

# QtComponents from QtPi

QtComponents component library, which communicate with QtPi's BLE/BT based STEM educational controller boards.

## Installation

Installation is as simple as include library in the `<script>` tag

Ex:  `<script defer="defer" src="https://qtlearncodelab.github.io/qtpi-shared/qtwc/js/releases/latest/qtwc.js"></script>`

## Usage

Use in the DOM like this:

`<qt-led id="led1"></qt-led>`

Use the API:

```
const led = document.querySelector('#led1');
//Turn On LED
led.led("on");
//Turn Off LED
led.led("off");
```

If you want, you can just create the element on your own and add it to the DOM:

```
const led1 = document.createElement('qt-led');
document.body.appendChild(led1);
led1.on()
```

## What it contains

### Components

There are Board , Actuator, Sensor and Alexa and Google Voice integrated components :

Actuators

- {@link QtLED}
- {@link QtMotor}
- {@link QtServo}
- {@link QtPumpMotor}
- {@link QtBuzzer}

Sensors

- {@link QtAPDS}
- {@link QtMPU6050}
- {@link QtUltraSonic}
- {@link QtTOF}

IOT Components

- {@link QtGv}
- {@link QtAlexa}

AI Components

- {@link QtPose}
- {@link QtImage}
- {@link QtSound}
 
Boards

- {@link QtBoard}
- {@link QtBoardBLE}
  
On the respective pages you can see:

- programming interface with props, methods, and events
- Examples you can fork and modify our templates in codesandbox in the browser.

### Tutorials

Using NPM Module
In your package.json add the dependencies section add qtwc

```
 "dependencies": {
    "@qtpiofficial/qtwc": "1.2.0"
  }
```

Below example for adding a BLE board, APDS module and a Motor Qt Components

Script tag in head section of html

`<script src="./node_modules/@qtpiofficial/qtwc/index.js" type="module"></>`

Adding QtComponents to the HTML's body section

`<qt-board-ble board-type="qtneo" board-name="test" service-uuid="1011"></qt-board-ble>`

`<qt-motor id="dcmotor"></qt-motor>`

`<qt-apds id="proximity"></qt-apds>`

If you wanted to add pose detection code :
Add the below `<script>` tag in html head section
`<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@1.3.1/dist/tf.min.js"></script>`

`<script src="https://cdn.jsdelivr.net/npm/@teachablemachine/pose@0.8/dist/teachablemachine-pose.min.js">
</script>`

In your HTML tags add the below
`<qt-pose id='mypose'> </qt-pose>`

In your script file or section add
```
  let elem = document.getElementById('mypose');
  elem.setAttribute('onPrediction', 'onPrediction');
  function onPrediction(index, className, probability) {
    console.log(index, className, probability);
  }
```

## About QtPi

Since inception in 2016, QtPi Robotics has built an ecosystem of over 30,000 children aged between 7-17 across India, since we started in 2016. It's about time we pull students out of the rat race and teach them how to think instead of what to think!

<img src="https://qtpi.in/assets/logo.png" width=240>

---
_Source: https://npm.io/package/@qtpiofficial/qtwc · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._