Cordova IOT Lesson002
hello
index.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>我的App</title> <meta name="format-detection" content="telephone=no"> <meta name="msapplication-tap-highlight" content="no"> <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width"> <link rel="stylesheet" href="css/jquery.mobile-1.4.5.min.css" /> <script src="js/jquery-2.1.3.min.js"></script> <script> $(document).on('mobileinit', function() { $.mobile.pushStateEnabled = false; }); </script> <script src="js/jquery.mobile-1.4.5.min.js"></script> </head> <body> <div data-role="page" id="p1"> <div data-role="header"> <h1>第 1 页</h1> </div> <div data-role="content"> <ul data-role="listview"> <li><a href="#p2">第 2 页</a></li> <li><a href="#p3">第 3 页</a></li> </ul> </div> <div data-role="footer" data-position="fixed"> <h4>页脚</h4> </div> </div> <div data-role="page" id="p2"> <div data-role="header"> <h1>第 2 页</h1> </div> <div data-role="content"> 内容 </div> <div data-role="footer" data-position="fixed"> <h4>页脚</h4> </div> </div> <div data-role="page" id="p3"> <div data-role="header"> <h1>第 3 页</h1> </div> <div data-role="content"> 内容 </div> <div data-role="footer" data-position="fixed"> <h4>页脚</h4> </div> </div> </body> </html>
hello_back
index.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>我的App</title> <meta name="format-detection" content="telephone=no"> <meta name="msapplication-tap-highlight" content="no"> <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width"> <link rel="stylesheet" href="css/jquery.mobile-1.4.5.min.css" /> <script src="js/jquery-2.1.3.min.js"></script> <script> $(document).on('mobileinit', function() { $.mobile.pushStateEnabled = false; }); </script> <script src="js/jquery.mobile-1.4.5.min.js"></script> </head> <body> <div data-role="page" id="p1"> <div data-role="header"> <h1>第 1 页</h1> </div> <div data-role="content"> <ul data-role="listview"> <li><a href="#p2">第 2 页</a></li> <li><a href="#p3">第 3 页</a></li> </ul> <br> <a href="#popAbout" data-rel="popup" data-role="button">App简介</a> <div data-role="popup" id="popAbout" class="ui-content"> <h2>App简介</h2> <p>这是用jQuery Mobile打造的App接口</p> </div> </div> <div data-role="footer" data-position="fixed"> <h4>页脚</h4> </div> </div> <div data-role="page" id="p2"> <div data-role="header"> <h1>第 2 页</h1> </div> <div data-role="content"> <a href="#" data-role="button" data-inline="true" data-rel="back">上一页</a> <br> <a href="faq.html" data-role="button" rel="external">开启FAQ</a> </div> <div data-role="footer" data-position="fixed"> <h4>页脚</h4> </div> </div> <div data-role="page" id="p3"> <div data-role="header"> <h1>第 3 页</h1> </div> <div data-role="content"> <a href="#" data-role="button" data-inline="true" data-rel="back">上一页</a> </div> <div data-role="footer" data-position="fixed"> <h4>页脚</h4> </div> </div> </body> </html>
wifiBot
index.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>灯光控制器</title> <meta name="format-detection" content="telephone=no"> <meta name="msapplication-tap-highlight" content="no"> <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width"> <link rel="stylesheet" href="css/jquery.mobile-1.4.5.min.css" /> <script src="cordova.js"></script> <script src="js/jquery-2.1.3.min.js"></script> <script> $(document).on('mobileinit', function() { $.mobile.pushStateEnabled = false; }); </script> <script src="js/jquery.mobile-1.4.5.min.js"></script> <script src="js/index.js"></script> <style type="text/css"> #splashPage { background-color:#fac800; text-align: center; } #splashPage div h1 { border-radius: 10px; padding:10px 30px; display:inline-block; background-color:#fff; margin-bottom:30px; } </style> </head> <body> <!-- 起始画面 --> <div data-role="page" id="splashPage"> <div role="main" class="ui-content"> <h1>网络灯光控制器</h1> <img src="data:images/app_logo.svg" width="300" height="300"> </div> </div> <!-- 主控画面 ---> <div data-role="page" id="ctrlPage" data-theme="a"> <div data-role="header"> <h1>灯光控制器</h1> <a href="#netPage" class="ui-btn-right ui-btn ui-btn-inline ui-mini ui-corner-all ui-btn-icon-right ui-icon-gear">网络设置</a> </div> <div role="main" class="ui-content"> <div class="ui-field-contain"> <label for="ledSw">壁灯</label> <select name="ledSw" id="ledSw" data-role="slider" data-mini="true"> <option value="0">关</option> <option value="1">开</option> </select> </div> <div class="ui-field-contain"> <label for="pwmSlider">台灯</label> <input type="range" name="pwmSlider" id="pwmSlider" value="25" min="0" max="100" data-highlight="true"> </div> <div id="msg"></div> </div> <div data-role="footer" data-position="fixed"> © 2016 swf.com.tw </div> </div> <!-- "WiFi设置画面" --> <div data-role="page" id="netPage" data-theme="a"> <div data-role="header"> <h1>网络链接设置</h1> </div> <div role="main" class="ui-content"> <form> <label for="deviceIP">设备IP地址或网域名</label> <input type="text" name="deviceIP" id="deviceIP" value="" placeholder="jarvis.local" data-clear-btn="true"> <label for="devicePort">设备端口号</label> <input type="number" name="devicePort" id="devicePort" value="80" data-clear-btn="true"> </form> <p><a href="#" id="saveBtn" class="ui-btn ui-corner-all ui-btn-b ui-btn-icon-left ui-icon-refresh ui-shadow-icon">保存设置</a></p> <p><a href="#ctrlPage" class="ui-btn ui-shadow ui-corner-all ui-btn-b">回主控画面</a></p> </div> <div data-role="footer" data-position="fixed"> © 2016 swf.com.tw </div> </div> </body> </html>
index.js
var app = { nextPage:"", host:"", port:80, splashTime:3000, init: function() { $(document).on('deviceready', app.onDeviceReady); }, onDeviceReady: function() { $("#ledSw").on("change", function(e){ var val = $(this).val(); var swData = {"pin":13, "sw":val}; // 向第13脚送出开关信号 $.ajax({ url: "http://" + app.host + ":" + app.port + "/sw", data: swData, success: function( d ) { app.showMsg("收到服务器回应:" + d ); } }); }); $('#saveBtn').on('tap', function(){ app.host = $("#deviceIP").val(); app.port = $("#devicePort").val(); localStorage.setItem('deviceIP', app.host); localStorage.setItem('devicePort', app.port); location.hash = 'ctrlPage'; }); }, timeoutId: 0, showMsg: function(msg) { if (app.timeoutId) { clearTimeout(app.timeoutId); } $('#msg').text(msg); app.timeoutId = setTimeout(function() { $('#msg').text(""); }, 4000); }, splashTimer : function(){ setTimeout(function() { // 进入下一页 location.hash = app.nextPage; }, app.splashTime); } }; $(document).on("pageshow", "#ctrlPage", pageEvt); function pageEvt (e) { $( "#pwmSlider" ).on( "slidestop", function( e ) { var pwm = Math.ceil($(this).val() * 2.55); var pwmData = {"pin":9, "pwm":pwm}; // 向第9脚送出PWM信号 $.ajax({ url: "http://" + app.host + ":" + app.port + "/pwm", data: pwmData, success: function( d ) { app.showMsg("收到服务器回应:" + d ); } }); }); $(document).off("pageshow", "#ctrlPage", pageEvt); } $(document).on("pageshow", "#splashPage", function( e ) { var host = localStorage.getItem('deviceIP'); if (host === null) { app.nextPage = "netPage"; } else { app.host = host; app.port = localStorage.getItem('devicePort'); $("#deviceIP").val(app.host); $("#devicePort").val(app.port); app.nextPage = "ctrlPage"; } // 启动计时器 app.splashTimer(); }); app.init();
Cordova IOT Lesson002的更多相关文章
- Cordova IOT Lesson003
bot index.html <!DOCTYPE html> <html> <head> <title>Arduino蓝牙机械昆虫控制器</tit ...
- H5程序员如何利用cordova开发跨平台应用
什么是Cordova? Cordova以前也叫PhoneGap,它提供了一组设备相关的API,通过这组API,移动应用能够以JavaScript访问原生的设备功能,如摄像头.麦克风等.Cordova还 ...
- Apache Cordova开发Android应用程序——番外篇
很多天之前就安装了visual studio community 2015,今天闲着么事想试一下Apache Cordova,用它来开发跨平台App.在这之前需要配置N多东西,这里找到了一篇MS官方文 ...
- Win10 UWP开发系列:使用VS2015 Update2+ionic开发第一个Cordova App
安装VS2015 Update2的过程是非常曲折的.还好经过不懈的努力,终于折腾成功了. 如果开发Cordova项目的话,推荐大家用一下ionic这个框架,效果还不错.对于Cordova.PhoneG ...
- VS2015 Update2中有关cordova和xamarin安装的问题
最近VS2015出了Update2,当然是第一时间进行了安装,中间过程曲折,反复安装卸载n次,也算是获得了一定的安装经验值.现在说一下经常出的问题. Update2里最吸引人的当然是跨平台开发的部分, ...
- 《连载 | 物联网框架ServerSuperIO教程》-4.如开发一套设备驱动,同时支持串口和网络通讯。附:将来支持Windows 10 IOT
1.C#跨平台物联网通讯框架ServerSuperIO(SSIO)介绍 <连载 | 物联网框架ServerSuperIO教程>1.4种通讯模式机制. <连载 | 物联网框架Serve ...
- 开源物联网框架ServerSuperIO 3.0正式发布(C#),跨平台:Win&Win10 Iot&Ubuntu&Ubuntu Mate,一套设备驱动跨平台挂载,附:开发套件和教程。
3.0版本主要更新内容: 1.增加跨平台能力:Win&Win10 Iot&Ubuntu&Ubuntu Mate 2.统一设备驱动接口:可以一套设备驱动,跨平台挂载运行,降低人力 ...
- 开源物联网通讯框架ServerSuperIO,成功移植到Windows10 IOT,在物联网和集成系统建设中降低成本。附:“物联网”交流大纲
[开源]C#跨平台物联网通讯框架ServerSuperIO(SSIO)介绍 一.概述 经过一个多月晚上的时间,终于把开源物联网通讯框架ServerSuperIO成功移植到Windows10 IOT上, ...
- 玩儿转物联网IoT - 在Beagle Bone Black上运行node.js 程序
物联网(IoT)技术方兴未艾,智能手环,智能血压计,智能眼镜甚至智能鞋垫都开始进入我们的生活,各种智能设备层出不穷,世界已经到了一个"人有多大胆,地有多大产"的时代,不玩儿点物联网 ...
随机推荐
- python之property、类方法和静态方法
一.完整的property1.定义一个方法被伪装成属性之后,应该可以执行一个属性的增删改查操作,增加和修改就对应着被setter装饰的方法,删除一个属性对应着被deleter装饰的方法. @prope ...
- stop()在animate中的用法
stop 是jQuery中用于控制页面动画效果的方法.运行之后立刻结束当前页面上的动画效果.stop在新版jQuery中添加了2个参数:第一个参数的意思是是否清空动画序列,也就是stop的是当前元素的 ...
- Django+Vue打造购物网站(十)
首页.商品数量.缓存和限速功能开发 将环境切换为本地,vue也切换为本地 轮播图 goods/serializers.py class BannerSerializer(serializers.Mod ...
- Magento2 API 服务合同设计模式 依赖注入 介绍
公共接口和API 什么是公共界面? 一个公共接口是一组代码,第三方开发者可以调用,实现或构建一个 插件 .Magento保证在没有重大版本更改的情况下,此代码在后续版本中不会更改. 模块的公共接口 标 ...
- 去掉 Chrome(V66) 新标签页的8个缩略图
1.Chrome程序资源文件路径: C:\Program Files (x86)\Google\Chrome\Application\66.0.3359.181\resources.pak 2.下载C ...
- java String转int int转化为String
String转int String str = "123"; int a = Integer.parseInt(str); System.out.println(a); Integ ...
- 虚拟机网络配置和NFS
Test Env: Ubuntu 16.04 VMware 克隆虚拟机 A 把一台虚拟机从一台服务器克隆到另一台服务器,拷贝.vmx(配置文件)和.vmdk文件,然后在新服务器的vmware直接打开. ...
- JQGrid导出Excel文件
系列索引 Web jquery表格组件 JQGrid 的使用 - 从入门到精通 开篇及索引 Web jquery表格组件 JQGrid 的使用 - 4.JQGrid参数.ColModel API.事件 ...
- Linux下安装部署Samba共享盘的操作手册
简述 Samba是在Linux和UNIX系统上实现SMB协议的一个免费软件,由服务器及客户端程序构成.SMB(Server Messages Block,信息服务块)是一种在局域网上共享文件和打印机的 ...
- Web of science数据下载以数据处理
目标网站分析 我们要获取的就是这几个数值 程序实现 # -*- coding: utf-8 -*- """ @Datetime: 2019/2/28 @Author: Z ...