Это программируемое на Tibbo BASIC/C устройство, функциональность которого определяет загруженное приложение.
Мы предлагаем различные готовые к использованию приложения, например, Serial-over-IP (SoI), Modbus Gateway и Sensor Hub.
Управление светодиодами через web-браузер

Управление светодиодами через web-браузер

О приложении

  • Это элементарное приложение, позволяющее управлять GPIO-линией через web-браузер: щелчок кнопкой мыши по квадрату переключает линии в HIGH/LOW. Приложение можно использовать для управления Тиббитами со светодиодами, Тиббитами с реле или другими модулями вывода.
  • Приложение использует популярную библиотеку socket.io для обеспечения непрерывного соединения между платформой TPS и браузером, а также библиотеку AngularJS V1.x.x для пользовательского интерфейса, которая упрощает разработку одностраничных приложений.

Щёлкните кнопкой мыши по квадрату, чтобы увидеть, как работает web-интерфейс

Вам потребуется:

Аппаратное обеспечение

*Данные светодиоды можно заменить любыми другими Тиббитами вывода.

Программное обеспечение:

  • Node.js V6.x.x (уже установлено)

Приложение Node.js

  • Express и socket.io используются для поддержки функциональности web-интерфейса
  • Программа для управления светодиодами, связью между web-интерфейсом и HTTP-сервером находится в файле server.js.
  • Файлы web-клиента располагаются в папке /public

Настройка и установка

  • Задайте необходимую конфигурацию в web-интерфейсе LTPS.
  • Войдите на LTPP3 при помощи SSH-клиента.
  • Установите необходимые инструментальные средства NPM и др.
  • Установите приложение:
git clone https://github.com/tibbotech/tps-gpio-tutorials
cd tps-gpio-tutorials
npm install .
cd one-led
  • Запустите приложение:
node server

server.js

Комментарии в программе поясняют, как это работает:

// Requires HTTP as WebSocket server modules
const express = require("express");
const app = express();
const http = require('http').Server(app);
const io = require('socket.io')(http);
const gpio = require("@tibbo-tps/gpio");

// Serves static assets from the 'public' folder
app.use("/", express.static('public'));

const led = gpio.init("S15A");

if(led.getDirection() === "input"){
    led.setDirection('output');
    led.setValue(1);
}

// Listens to the incoming WebSocket connection
var clients = io.on('connection', function(socket){
    // When the connection is established
    console.log('USER CONNECTED');

    // Reads I/O line state..
    // ..and broadcasts it to all the connected clients
    var value = led.getValue();

    clients.emit('tps:state:changed', value);

    // When any of the connected clients require a change of the line state
    socket.on('web:state:changed', function(value){
        // Changes the line state...
        led.setValue(value);

        //.. and broadcasts it to all the clients
        clients.emit('tps:state:changed', value);
    });

    socket.on('disconnect', function(){
        console.log('USER DISCONNECTED');
    });
});

// Runs HTTP server on :3000 port
http.listen(3000,function(){
    console.log("LISTENING");
});

Web-клиент

index.html

Комментарии в программе поясняют, как это работает:

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/1.4.8/socket.io.min.js"></script>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.min.js"></script>
        <script type="text/javascript" src="client.js"></script>
        <link href="main.css" rel="stylesheet" type="text/css"/>
    </head>
    <body ng-app="leds"> <!-- The ng-app directive bootstraps your Angular application -->

    <!-- The ng-controller directive attaches controller to a view -->
    <!-- The ng-hide directive hides DOM element depending on the 'locked' varibale -->
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="110px" height="110px" xml:space="preserve"
                ng-controller="ledsController"
                ng-hide="locked">

                <!-- The ng-class directive changes class of the DOM element depending on the 'state' variable -->
        <!-- The ng-click directive evokes the function on click by DOM element -->
                <g transform="translate(5,5)" class="led-icon">
                    <rect width="100" height="100" class="frame"></rect>
                    <rect x="10" y="10" width="80" height="80"
                        class="led"
                        ng-class="(state ? 'on' : 'off')"
                        ng-click="switch()">
                    </rect>
                </g>
            </svg>
    </body>
</html>

client.js

Комментарии в программе поясняют, как это работает:

angular.module('leds', [])
    .controller('ledsController', function($scope) {
        var socket = io(); //

        $scope.locked = true; // Disables the view by default

        socket.on('connect', function () { // On connection established
            $scope.locked = false; // Enables the view
            $scope.$apply(); // Re-renders the view
        });

        socket.on('disconnect', function () { // Hides everything on disconnect
            $scope.locked = true;
            $scope.$apply();
        });

        socket.on('tps:state:changed', function (value) { // Catches the 'tps:state:changed' event
            $scope.state = value == 0;
            $scope.$apply();
        });

        $scope.switch = function() { // Sends the inversed value of the 'state' variable
            console.log($scope.state ? 1 : 0);
            socket.emit('web:state:changed', $scope.state ? 1 : 0);
        }
    });
Управление светодиодами через web-браузер