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">
           &copy; 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">
           &copy; 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的更多相关文章

  1. Cordova IOT Lesson003

    bot index.html <!DOCTYPE html> <html> <head> <title>Arduino蓝牙机械昆虫控制器</tit ...

  2. H5程序员如何利用cordova开发跨平台应用

    什么是Cordova? Cordova以前也叫PhoneGap,它提供了一组设备相关的API,通过这组API,移动应用能够以JavaScript访问原生的设备功能,如摄像头.麦克风等.Cordova还 ...

  3. Apache Cordova开发Android应用程序——番外篇

    很多天之前就安装了visual studio community 2015,今天闲着么事想试一下Apache Cordova,用它来开发跨平台App.在这之前需要配置N多东西,这里找到了一篇MS官方文 ...

  4. Win10 UWP开发系列:使用VS2015 Update2+ionic开发第一个Cordova App

    安装VS2015 Update2的过程是非常曲折的.还好经过不懈的努力,终于折腾成功了. 如果开发Cordova项目的话,推荐大家用一下ionic这个框架,效果还不错.对于Cordova.PhoneG ...

  5. VS2015 Update2中有关cordova和xamarin安装的问题

    最近VS2015出了Update2,当然是第一时间进行了安装,中间过程曲折,反复安装卸载n次,也算是获得了一定的安装经验值.现在说一下经常出的问题. Update2里最吸引人的当然是跨平台开发的部分, ...

  6. 《连载 | 物联网框架ServerSuperIO教程》-4.如开发一套设备驱动,同时支持串口和网络通讯。附:将来支持Windows 10 IOT

    1.C#跨平台物联网通讯框架ServerSuperIO(SSIO)介绍 <连载 | 物联网框架ServerSuperIO教程>1.4种通讯模式机制. <连载 | 物联网框架Serve ...

  7. 开源物联网框架ServerSuperIO 3.0正式发布(C#),跨平台:Win&Win10 Iot&Ubuntu&Ubuntu Mate,一套设备驱动跨平台挂载,附:开发套件和教程。

    3.0版本主要更新内容: 1.增加跨平台能力:Win&Win10 Iot&Ubuntu&Ubuntu Mate 2.统一设备驱动接口:可以一套设备驱动,跨平台挂载运行,降低人力 ...

  8. 开源物联网通讯框架ServerSuperIO,成功移植到Windows10 IOT,在物联网和集成系统建设中降低成本。附:“物联网”交流大纲

    [开源]C#跨平台物联网通讯框架ServerSuperIO(SSIO)介绍 一.概述 经过一个多月晚上的时间,终于把开源物联网通讯框架ServerSuperIO成功移植到Windows10 IOT上, ...

  9. 玩儿转物联网IoT - 在Beagle Bone Black上运行node.js 程序

    物联网(IoT)技术方兴未艾,智能手环,智能血压计,智能眼镜甚至智能鞋垫都开始进入我们的生活,各种智能设备层出不穷,世界已经到了一个"人有多大胆,地有多大产"的时代,不玩儿点物联网 ...

随机推荐

  1. 基于stm32智能车的设计(ucosiii)---北京之行

    实物演示视频:https://v.youku.com/v_show/id_XMzc3MDE3NjMyNA==.html?x&sharefrom=android&sharekey=172 ...

  2. NOI真题记录

    NOI2001 食物链,拓展域并查集. 炮兵阵地,棋盘状压DP. NOI2002 银河英雄传说,kruskal重构树/带权并查集. 贪吃的九头龙,树形DP. NOI2003 逃学的小孩,树形DP,二次 ...

  3. numpy中的随机数模块

    https://www.cnblogs.com/td15980891505/p/6198036.html numpy.random模块中提供啦大量的随机数相关的函数. 1 numpy中产生随机数的方法 ...

  4. Java EE 开发环境搭建

    1 Windows 1.1 JDK 下载: 下载地址:https://developer.oracle.com/java 安装文件:jdk-8u201-windows-x64.exe JDK 并不是越 ...

  5. mysql 连接 django

    版本: django:1.11.9 python3 mysql 5.7.18 在这里我们认为你已经安装好了mysql,python ,django 下面是来自django官方教程的一段话 If you ...

  6. Numpy系列(五)- 复制和视图

    当计算和操作数组时,它们的数据有时被复制到新的数组中,有时不复制.这里我们做个区分. 完全不复制 简单赋值不会创建数组对象或其数据的拷贝. import numpy as np a = np.aran ...

  7. Numpy系列(十三)- 文件IO

    NumPy提供了多种存取数组内容的文件操作函数.保存数组数据的文件可以是二进制格式或者文本格式.二进制格式的文件又分为NumPy专用的格式化二进制类型和无格式类型. 一,tofile()和fromfi ...

  8. C++回顾day03---<输入输出流>

    一:C++输入输出包含下面3个方面 (一)标准I/O 对系统指定的标准设备的输入和输出.即从键盘输入数据,输出到显示器屏幕.这种输入输出称为标准的输入输出. (二)文件I/O 以外存磁盘文件为对象进行 ...

  9. 使用nuxt.js官方脚手架构建项目时ES6编译问题SyntaxError: Unexpected token import

    用nuxt集成koa2做vue后台,官方自带脚手架搭建的koa2仍是ES5语法,在构建koa2时默认的nodemon是没有使用babel编译的, 所以首先需要在启动命令后加上--exec babel- ...

  10. 语义化标签和jQuery选择器

    关于语义化标签 https://blog.csdn.net/nongweiyilady/article/details/53885433 更详细的语义化标签:https://www.cnblogs.c ...