@qtpiofficial/qtwc v1.2.3
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!