• QtComponents from QtPi
  • Installation
  • Usage
  • What it contains
    • Components
    • Tutorials
  • About QtPi

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/[email protected]/dist/tf.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/@teachablemachine/[email protected]/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!