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)技术方兴未艾,智能手环,智能血压计,智能眼镜甚至智能鞋垫都开始进入我们的生活,各种智能设备层出不穷,世界已经到了一个"人有多大胆,地有多大产"的时代,不玩儿点物联网 ...
随机推荐
- linux 命令ls
命令格式 ls -la /etc -a 查看所有隐藏文件 以.开头的,就是隐藏文件.改名.开头,就可以改成隐藏文件 -l 长格式显示 ]# ls -al total 8 drwxr-xr-x ...
- 【BZOJ2876】【Noi2012】骑行川藏 拉格朗日乘法
题目描述 给你 \(n,E,s_i,k_i,v_i'\),要求在 \[ \sum_{i=1}^nk_i{(v_i-v_i')}^2s_i\leq E \] 的前提下最小化 \[ \sum_{i=1}^ ...
- 爬虫，基于request，bs4 的简单实例整合
简单爬虫示例 爬取抽屉,以及自动登陆抽屉点赞 先查看首页拿到cookie,然后登陆要携带首页拿到的 cookie 才可以通过验证 """""" ...
- MT【320】依次动起来
已知$ BC=6,AC=2AB, $点$ D $满足$ \overrightarrow{AD}=\dfrac{2x}{x+y}\overrightarrow{AB}+\dfrac{y}{2(x+y)} ...
- 51nod 1318 最大公约数与最小公倍数方程组（2-SAT）
题意 给你 \(n\) 个元素,\(m\) 个方程. 每个方程形如 \[ \begin{align} \gcd(x_i, y_i)=c_i\\ \mathrm{lcm}(x_i,y_i) = d_i ...
- 一文入门NodeJS
NodeJS¶ 1.环境配置¶ 之前讲ES6的时候有提过一部分Node的知识,简单回顾下:一文读懂ES6 1.1.NPM国内镜像¶ npm国内镜像:https://npm.taobao.org 配 ...
- Springboot配置多数据源（Mysql和Orcale）--（Idea Maven JDBCTemplate支持下的）
1.配置 orcale jdbc 对于一个Maven项目,使用Mysql时,可直接添加如下依赖: <dependency> <groupId>mysql</groupId ...
- C++回顾day03---<多态>
一:错误理解下的多态 #include <iostream> using namespace std; class Parent { public: Parent() { cout < ...
- 16、爬取知乎大v张佳玮的文章“标题”、“摘要”、“链接”，并存储到本地文件
爬取知乎大v张佳玮的文章“标题”.“摘要”.“链接”,并存储到本地文件 # 爬取知乎大v张佳玮的文章“标题”.“摘要”.“链接”,并存储到本地文件 # URL https://www.zhihu.co ...
- [物理学与PDEs]第1章第4节 电磁能量和电磁动量, 能量、动量守恒与转化定律 4.3 电磁能量 (动量) 密度, 电磁能量流 (动量流) 密度
1. 电磁能量密度: $\cfrac{1}{2}\sex{\ve_0E^2+\cfrac{1}{\mu_0}B^2}$. 2. 电磁能量流密度向量: ${\bf S}=\cfrac{1}{\mu_0} ...