物联网试验室设备使用教程之四.pdfVIP

飞比物联网培训教程--玩转物联网之四、web网页控制Zigbee电灯(B/S模式) 这是很好玩的一步：把自己的传感器用网页画出来，放在自己的服务器上，别人可以登 录你的网站，查看你传感器的值；或者把自己的“电灯”放在网页上，别人可以来开关。当 然，“别人”一定事先要征求你的同意才可以这样做，否则你卧室的灯，一会就有人来开一 下，这样的“高科技”估计没人愿意要！ 而且这种B/S模式的最大好处就是只要有一个浏览器(Brower)就可以了，不需要装别的 软件，而且不管你用的是电脑，PAD还是手机，是windows、iOS或者是Android的操作系 统。 我们重新来回顾下“飞比云”平台的拓扑结构中，用户自建服务器的位置（注意下图红 色边框部分）： 也就是说，您自己的web服务器需要和“飞比云服务平台”建立双向的通信：将传感器 数据反映在网页上；同时将用户通过网页发送的控制指令传递给飞比云。要实现这个功能， 需要借助html语言与javascript脚本，另外需要用到Ajax与JSON技术。作为网页编程 技术在物联网中的应用，这里我们不过分地深入到细节，仅了解下基本的原理和实现技巧。 步骤和以前一样，对于我们这些“画家”，第一步仍然是构思，然后只是用不同的画笔 画相同的图而已。 注：以下内容需要在保证您已经完成了前面的硬件安装与C/S模式的实验，并打开节 点的前提下进行。 一、用html语言实现基本的界面 1、构思中的界面－－ 2、基本界面的html实现 1. !DOCTYPEhtml 2. 3. html 4. head 5. /head 6. 7. body 8. scripttype=text/javascript 9. //界面加载时初始化界面 10.window.onload=function() 11.{ 12.//电灯状态 13. document.getElementById(IMG).src=on.png; 14. document.getElementById(txtHint).innerHTML=电灯状态; 15. //控制指令发送状态 16. document.getElementById(ctRspStr).innerHTML =控制指令发送状态 ; 17.} 18./script 19.divid=D 20.img id=IMG/ 21.br/ 22./div 23. 24.divid=txtHintb/b/div 25.p/p 26.buttontype=button1style=background：#FFFF99;width:100px; height:40pxonclick=开灯/button 27.buttontype=button2style=background：#FFFF99;width:100px; height:40pxonclick=关灯/button 28.divid=ctRspStrb/b/div 29./body 30. 31./html 复制代码 把这段代码保存成index.html，并且将on.png和off.png两个文件放到同一目录下。 这里面除了一个加载时运行到的javascript函数外，其它的都是最基本的html代码， 这里不再赘述，仅强调这里的三个变量的传递： 1. //界面加载时初始化界面 2. window.onload=function() 3. { 4. //电灯状态 5. document.getElementById(IMG).src=on.png; 6. document.getElementById(txtHint).innerHTML=电灯状态; 7. //控制指令发送状态