智能物联网鱼缸

硬件部分及接线图

工具

继电器、开发板、物联网os、云平台

微信小程序

结构:images、pages两个为主体。

标题头部分

javascript 复制代码
<view class="container">
<view class="head_box">
<image src="/images/面性鱼缸.png"></image>
<view>{{title}}</view>
</view>

图片png可以自己根据实际情况进行更换。这是一个view盒子,里面实现了标题效果。

对应的css样式:

css 复制代码
.head_box{
  display: inline-flex;
  padding-top: 120rpx;
}
.head_box > image{
  height: 100rpx;
  width: 100rpx;
}

天气预报盒子

javascript 复制代码
<view class="weather_box">
<view class="welcome_text">{{welcome}}</view>
<view class="flex">
<view class="w50">
<image wx:if="{{weatherText==='晴天'}}" src="/images/晴天.png" mode="widthFix" class="weather_png"></image>
<image wx:if="{{weatherText==='阴'}}" src="/images/阴天.png" mode="widthFix" class="weather_png"></image>
<image wx:if="{{weatherText==='多云'}}" src="/images/多云.png" mode="widthFix" class="weather_png"></image>
<image wx:if="{{weatherText==='小雨'}}" src="/images/小雨.png" mode="widthFix" class="weather_png"></image>
<image wx:if="{{weatherText==='中雨'}}" src="/images/中雨.png" mode="widthFix" class="weather_png"></image>
<image wx:if="{{weatherText==='大雨'}}" src="/images/大雨.png" mode="widthFix" class="weather_png"></image>
<image wx:if="{{weatherText==='暴雨'}}" src="/images/暴雨.png" mode="widthFix" class="weather_png"></image>
<image wx:if="{{weatherText==='雾'}}" src="/images/雾.png" mode="widthFix" class="weather_png"></image>
</view>
<view>
<view class="location_text">
<image src="/images/定位.png" class="location_png" mode="widthFix" ></image>
<text class="location_text">{{location}}</text>
</view>
<view class="tmp_text">{{tmp}}℃</view>
</view>
</view>
</view>

传感器信息盒子

javascript 复制代码
<view class="sensors_text">传感器设备</view>

<view class="sensors_system">
<view wx:for="{{sensorList}}" class="sensors_info">
      <view class="sensors_info1"> 
          <image src="{{item.img}}" style="height: 80rpx" mode="heightFix" ></image>
      </view>
      <view class="sensors_info2"> 
            <view>{{item.name}} </view>
            <view> {{item.parameter}}</view>
            <view> {{item.value}} {{item.unit}}</view>         
      </view>
      <view class="sensors_info3">! </view>
</view>
</view>

控制器盒子

javascript 复制代码
<view class="sensors_text">控制设备</view>

<view class="other_sensors" wx:for="{{otherSensorList}}" style="height: 120rpx" >

<view class="sensors_info1">
<image src="{{item.img}}" style="height: 70rpx; " mode="heightFix" ></image>
</view>
<view class="other_sensors_info2">{{item.name}}</view>

<view class=".other_sensors_info3"><switch checked="{{item.isOpen}}" data-param="{{item}}" bindchange="statusChange"/></view>
 

</view>

<view style="height: 60rpx;"></view>
</view>
相关推荐
玩转4G物联网4 小时前
零基础玩转物联网-串口转以太网模块如何快速实现与MQTT服务器通信
服务器·物联网·网络协议·tcp/ip·信息与通信·iot·fs100p
TDengine (老段)13 小时前
TDengine 快速体验(云服务方式)
大数据·物联网·时序数据库·数据库架构·iot·tdengine·涛思数据
深圳市尚想信息技术有限公司15 小时前
【深尚想】SX1276IMLTRT LoRa射频收发器芯片 物联网 电子元器件解析
物联网·芯片·电子元器件·射频收发器·收发器芯片
工业通讯探索者16 小时前
数据采集器在轴承温度与振动远程监控中的应用
物联网·数据采集·边缘计算网关·工业智能网关·4g远程网关
TDengine (老段)1 天前
TDengine 开发指南—— UDF函数
java·大数据·数据库·物联网·数据分析·tdengine·涛思数据
学习噢学个屁1 天前
基于STM32物联网智能鱼缸智能家居系统
c语言·stm32·单片机·嵌入式硬件·物联网·智能家居
Stanford_11061 天前
关于大数据的基础知识(二)——国内大数据产业链分布结构
大数据·开发语言·物联网·微信小程序·微信公众平台·twitter·微信开放平台
网易独家音乐人Mike Zhou2 天前
【无人机】MavLink通讯协议的回调解析函数及状态机
单片机·mcu·物联网·嵌入式·无人机·iot
我身高一米七三2 天前
ADC数据采集
物联网
虾球xz2 天前
CppCon 2015 学习:Reactive Stream Processing in Industrial IoT using DDS and Rx
开发语言·c++·物联网·学习