Install Eclipse Mars DSL Tool
Install Vorto - Download from here
Set Network preferences in eclipse IDE
Set maven settings
Configure Information Model Repository in preferences
In this tutorial, you are going to implement a web application for the information model (e.g. TI SensorTag) through a series of steps.
Here is an overview of the system where are going to implement:
The webapplication that is going to communicate with mqtt client will appear as shown below:
Step 1: Implement MQTT client for functionblocks
- From eclipse, switch to Vorto perspective.
- Select Model Repository tab, Search for the info model TI_Sensor
- TI_SensorTag info model gets listed in the search result.
- Drag and drop this infomodel into the infomodel frame
- Select the info model -> Right-click -> Generate Code -> choose MQTT Generator
- Switch back to java perspective. The generated project will not compile, since it requires some Java model classes for the device.
- Switch back to the Vorto Repository and Generate also the Javabeans for the TI SensorTag
Update mqtt and javabeans project. The MQTT Client project should fully compile now.
Congratulations! You have just generated a MQTT client for the functionblocks, offered as functionality by the TI SensorTag.
Step 2: Implement a Web Application for the information model
In this exercise we are making our IoT app a little more sophisticated and display the MQTT sensor data in web UI Elements.
- Switch to the Vorto Perspective and find the TI SensorTag information model.
- Right-click and choose Web UI Generator from the list of Generators
- Switch back to the Java Perspective. You should see another Eclipse Project added by the Web UI Generator (webdevice.example)
Convert this Project to an Eclipse Project as well. The Web application is a Spring Boot application and already fully runnable.Run the application.
- Open your browser under [http://localhost:8080/webdevice]
In the web application, switch to the Accelerometer tab. You will see status fields that have been generated from the Accelerometer functionblock.
Congratulations! You just implemented a small AngularJS web application with the help of Vorto. However the Accelerometer UI fields are not yet populated with the sensor data. Let’s do that in the next exercise.
Step 3: Sign up for a PubNub account
- You’ll need to sign up for a PubNub account.Once you sign up, you can get your unique PubNub keys in the PubNub Developer Portal. You will use those same keys when you want to leverage our MQTT gateway.
- Take note of the Publish and Subscribe keys generated under Demo Keyset screen of PubNub.
Step 4: Receive MQTT status events and bind it to the Web UI Elements
In this exercise we are going to glue the Web application together with the MQTT client, that Vorto had so nicely generated for us.
In the pom.xml of the web application, add a dependency to the generated MQTT client
- Go to the Spring Boot Application class and import the MQTT configuration for the Accelerometer (@Import (MqttConfigurationAccelerometer.class)).
- Find the commented code that handles the incoming MQTT events and un-comment it.
- Remove the annotation @EnableScheduling
Edit MqttConfigurationAccelerometer.java by adding the following lines to inboundAccelerometer method
MqttPahoMessageDrivenChannelAdapter adapter = new MqttPahoMessageDrivenChannelAdapter(this.connectionUrl, "pub-c-xxxx/sub-c-xxxx/clientAccelerometer_00c740db-9245-4e5a-8c80-8a50908ee69f"); adapter.addTopic(this.topicName);
The MQTT configuration of the Accelerometer requires the MQTT topic and connection url in order to receive status events properly. Therefore we must add the following configuration to the application.yml file
server: port: 8080 contextPath: /webdevice publish_key : "pub-c-xxxx" subscribe_key : "sub-c-xxxx" mqtt: connectionUrl: tcp://mqtt.pubnub.com topic: accelerometer: pub-c-xxxx/sub-c-xxxx/accelerometerTopic
- Add MQTTlens extension to chrome browser.
- Create a new connection in MQTTlens by adding the following details in respective fields:
- Connection name : pubnub
- Hostname : mqtt.pbnub.com
- Client ID: pub-c-xxxx/sub-c-xxxx/123
Enter the following as Subscribe Topic
Enter the following as Publish Topic
- Click on Subscribe.
Enter the following message
- Click on Publish
- Switch back to Web UI (http://localhost:8080/webdevice/#/accelerometer)
- The Speed field is updated with the value 44.4