IoT Studio大屏组件(DataV)使用教程-阿里云开发者社区

开发者社区> 阿里云物联网> 正文

IoT Studio大屏组件(DataV)使用教程

简介: 物联网应用开发(IoT Studio)的Web可视化开发平台提供了大屏组件功能,支持使用可视化大屏的方式来分析并展示庞杂的数据。大屏组件可帮助非专业的工程师通过图形化的界面轻松搭建专业水准的可视化应用,满足您会议展览、业务监控、风险预警、地理信息分析等多种业务的展示需求。本文通过基本折线图展示设备上报的属性,DataV组件数据源通过数据分析API实现。

创建产品和设备

1、创建产品
图片.png

2、编辑产品功能,添加温度属性
图片.png

3、添加设备
图片.png
图片.png

设备上报属性

import com.alibaba.taro.AliyunIoTSignUtil;
import com.google.common.util.concurrent.ThreadFactoryBuilder;
import org.eclipse.paho.client.mqttv3.*;
import org.eclipse.paho.client.mqttv3.persist.MemoryPersistence;
import java.util.HashMap;
import java.util.Map;
import java.util.Random;
import java.util.concurrent.ScheduledExecutorService;
import java.util.concurrent.ScheduledThreadPoolExecutor;
import java.util.concurrent.TimeUnit;

public class IoTDemoPubSubDemoForQuickStartProduct {
    // 设备三元组信息
    public static String productKey = "a1L********";
    public static String deviceName = "Device1";
    public static String deviceSecret = "c96a082fcfa6e817********";
    public static String regionId = "cn-shanghai";

    // 物模型-属性上报topic
    private static String pubTopic = "/sys/" + productKey + "/" + deviceName + "/thing/event/property/post";
    // 自定义topic,在产品Topic列表位置定义
    private static String subTopic = "/sys/" + productKey + "/" + deviceName + "/thing/event/property/post_reply";

    private static MqttClient mqttClient;

    public static void main(String [] args){

        initAliyunIoTClient();
        ScheduledExecutorService scheduledThreadPool = new ScheduledThreadPoolExecutor(1,
                new ThreadFactoryBuilder().setNameFormat("thread-runner-%d").build());

        scheduledThreadPool.scheduleAtFixedRate(()->postDeviceProperties(), 2,2, TimeUnit.SECONDS);

        try {
            mqttClient.subscribe(subTopic); // 订阅Topic
        } catch (MqttException e) {
            System.out.println("error:" + e.getMessage());
            e.printStackTrace();
        }

        // 设置订阅监听
        mqttClient.setCallback(new MqttCallback() {
            @Override
            public void connectionLost(Throwable throwable) {
                System.out.println("connection Lost");
            }

            @Override
            public void messageArrived(String s, MqttMessage mqttMessage) throws Exception {
                System.out.println("Sub message");
                System.out.println("Topic : " + s);
                System.out.println(new String(mqttMessage.getPayload())); //打印输出消息payLoad
            }

            @Override
            public void deliveryComplete(IMqttDeliveryToken iMqttDeliveryToken) {
            }
        });

    }

    /**
     * 初始化 Client 对象
     */
    private static void initAliyunIoTClient() {

        try {
            // 构造连接需要的参数
            String clientId = "java" + System.currentTimeMillis();
            Map<String, String> params = new HashMap<>(16);
            params.put("productKey", productKey);
            params.put("deviceName", deviceName);
            params.put("clientId", clientId);
            String timestamp = String.valueOf(System.currentTimeMillis());
            params.put("timestamp", timestamp);
            // cn-shanghai
            String targetServer = "tcp://" + productKey + ".iot-as-mqtt."+regionId+".aliyuncs.com:1883";

            String mqttclientId = clientId + "|securemode=3,signmethod=hmacsha1,timestamp=" + timestamp + "|";
            String mqttUsername = deviceName + "&" + productKey;
            String mqttPassword = AliyunIoTSignUtil.sign(params, deviceSecret, "hmacsha1");

            connectMqtt(targetServer, mqttclientId, mqttUsername, mqttPassword);

        } catch (Exception e) {
            System.out.println("initAliyunIoTClient error " + e.getMessage());
        }
    }

    public static void connectMqtt(String url, String clientId, String mqttUsername, String mqttPassword) throws Exception {

        MemoryPersistence persistence = new MemoryPersistence();
        mqttClient = new MqttClient(url, clientId, persistence);
        MqttConnectOptions connOpts = new MqttConnectOptions();
        // MQTT 3.1.1
        connOpts.setMqttVersion(4);
        connOpts.setAutomaticReconnect(false);
        connOpts.setConnectionTimeout(10);
//        connOpts.setCleanSession(true);
        connOpts.setCleanSession(false);

        connOpts.setUserName(mqttUsername);
        connOpts.setPassword(mqttPassword.toCharArray());
        connOpts.setKeepAliveInterval(60);

        mqttClient.connect(connOpts);
    }

    /**
     * 汇报属性
     */
    private static void postDeviceProperties() {

        try {
            //上报数据
            //高级版 物模型-属性上报payload
            System.out.println("上报属性值");
//            String payloadJson = "{\"params\":{\"Temperature\":12}}";

            String payloadJson = "{\"params\":{\"Temperature\":"+RandomNextIntDemo2()+"}}";
            MqttMessage message = new MqttMessage(payloadJson.getBytes("utf-8"));
            message.setQos(1);
            mqttClient.publish(pubTopic, message);
        } catch (Exception e) {
            System.out.println(e.getMessage());
        }
    }

    /**
     * 生成[0,100)区间的整数
     */
    public static Integer RandomNextIntDemo2(){
        Random r = new Random();
        int n2 = r.nextInt(100);
        System.out.println("n2:"+n2);
        return n2;
    }
}

参考:

基于开源JAVA MQTT Client连接阿里云IoT

数据分析开发API接口

1、配置数据源
图片.png
图片.png

2、创建SQL分析
图片.png

图片.png

调整SQL语句,规范化时间显示格式及排序

select `t0`.`Temperature` as t0_Temperature, `t0`.`$iot_id` as iot_id, `t0`.`$product_key` as product_key, from_unixtime(`t0`.`$event_time`/1000, '%Y-%m-%d %H:%i:%S')  as t0_event_time from `${pk.替换为您自己的产品ProductKey}` t0 order by 't0'.'$event_time' desc

3、生成API
图片.png

图片.png

图片.png

DataV组件配置

1、创建Web可视化项目
图片.png

2、添加DataV组件
图片.png

3、编辑大屏
图片.png

图片.png

图片.png

图片.png

图片.png

图片.png

图片.png

4、发布后预览效果

图片.png

5、域名绑定
图片.png

参考链接

大屏组件概述
案例

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
阿里云物联网
使用钉钉扫一扫加入圈子
+ 订阅

致力于实现万物互联的美好世界,为生态合作伙伴提供基于云计算、大数据、人工智能、云端一体化、安全的物联网基础平台和内容服务平台。

官方博客
物联网相关产品售前咨询
开发者交流群