| <!-- |
| |
| Licensed to the Apache Software Foundation (ASF) under one |
| or more contributor license agreements. See the NOTICE file |
| distributed with this work for additional information |
| regarding copyright ownership. The ASF licenses this file |
| to you under the Apache License, Version 2.0 (the |
| "License"); you may not use this file except in compliance |
| with the License. You may obtain a copy of the License at |
| |
| http://www.apache.org/licenses/LICENSE-2.0 |
| |
| Unless required by applicable law or agreed to in writing, |
| software distributed under the License is distributed on an |
| "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY |
| KIND, either express or implied. See the License for the |
| specific language governing permissions and limitations |
| under the License. |
| |
| --> |
| |
| <!DOCTYPE html> |
| <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en"> |
| <head> |
| <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> |
| <meta name="viewport" content="target-densitydpi=high-dpi, user-scalable=no" /> |
| <title>Cordova Sample</title> |
| <script type="text/javascript" src="./js/cordova.js"></script> |
| <style type="text/css"> |
| button.btn { |
| color:#050; |
| font: bold 24px 'trebuchet ms',helvetica,sans-serif; |
| background-color:#fed; |
| width: 400px; |
| height: 100px; |
| border: 1px solid; |
| border-color: #696 #363 #363 #696; |
| /* filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr='#ffffffff',EndColorStr='#ffeeddaa'); */ |
| } |
| |
| button.btn2 { |
| color:#050; |
| font: bold 24px 'trebuchet ms',helvetica,sans-serif; |
| background-color:#fed; |
| width: 200px; |
| height: 100px; |
| border: 1px solid; |
| border-color: #696 #363 #363 #696; |
| /* filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr='#ffffffff',EndColorStr='#ffeeddaa'); */ |
| } |
| </style> |
| <link href="osp://webapp/css/style.css" rel="stylesheet" type="text/css" />f |
| <script type="text/javascript" src="osp://webapp/js/webapp_core.js"> </script> |
| <script type="text/javascript" src="osp://webapp/js/webapp_ui.js"> </script> |
| <script> |
| document.addEventListener("deviceready", function(e) {alert('Cordova is ready');}); |
| </script> |
| </head> |
| <body> |
| <ul> |
| <li> |
| <h3>Device</h3> |
| <div><button type="button" class="btn" onclick="setDeviceInfo()">DeviceInfo</button></div> |
| <span id="device"></span> |
| </li> |
| <li> |
| <h3>Acceleration</h3> |
| <div> |
| <button type="button" class="btn" onclick="getCurrentAcceleration();">getCurrentAcceleration</button> |
| </div> |
| <div> |
| <button type="button" class="btn" id="accelBtn" onclick="toggleAcceleration();">watchAcceleration</button> |
| </div> |
| <div> |
| <span id="acceleration"></span> |
| </div> |
| </li> |
| <li> |
| <h3>Geolocation</h3> |
| <div> |
| <button type="button" class="btn" onclick="getCurrentPosition();">getCurrentPosition</button> |
| </div> |
| <div> |
| <button type="button" class="btn" id="geoBtn" onclick="togglePosition();">watchPosition</button> |
| </div> |
| <div> |
| <span id="geolocation"></span> |
| </div> |
| </li> |
| <li> |
| <h3>Compass</h3> |
| <div> |
| <button type="button" class="btn" onclick="getCurrentHeading();">getCurrentHeading</button> |
| </div> |
| <div> |
| <button type="button" class="btn" id="compassBtn" onclick="toggleCompass();">watchHeading</button> |
| </div> |
| <div> |
| <span id="heading"></span> |
| </div> |
| </li> |
| <li> |
| <h3>Connection</h3> |
| <div> |
| <button type="button" class="btn" onclick="getConnection();">getConnectionType</button> |
| </div> |
| <div> |
| <span id="connection"></span> |
| </div> |
| </li> |
| <li> |
| <h3>Notifications</h3> |
| <div> |
| <button type="button" class="btn" onclick="notificationAlert();">Alert</button> |
| </div> |
| <div> |
| <button type="button" class="btn" onclick="notificationAlert();">Confirm</button> |
| </div> |
| <div> |
| <button type="button" class="btn" onclick="notificationVibrate();">Vibrate</button> |
| </div> |
| <div> |
| <button type="button" class="btn" onclick="notificationBeep();">Beep</button> |
| </div> |
| <div> |
| <button type="button" class="btn" onclick="notificationLightOn();">Light ON</button> |
| </div> |
| </li> |
| <li> |
| <h3>Camera</h3> |
| <div> |
| <button type="button" class="btn" onclick="cameraPreview();">cameraPreview</button> |
| </div> |
| <div id="cameraControls" style="display:none;"> |
| <span> |
| <button type="button" class="btn2" onclick="startVideoCapture();">startVideoCapture</button> |
| <button type="button" class="btn2" onclick="stopVideoCapture();">stopVideoCapture</button> |
| </span> |
| <div> |
| <button type="button" class="btn" onclick="captureImage2();">captureImage</button> |
| </div> |
| </div> |
| <div id="preview"></div> |
| </li> |
| <li> |
| <h3>Capture</h3> |
| <div> |
| <button type="button" class="btn" onclick="captureImage();">captureImage</button> |
| <button type="button" class="btn" onclick="captureVideo();">captureVideo</button> |
| <button type="button" class="btn" onclick="getPicture();">getPicture</button> |
| </div> |
| <div id="media"> |
| </div> |
| </li> |
| <li> |
| <h3>Contacts</h3> |
| <div> |
| <button type="button" class="btn" onclick="createContact();">createContact</button> |
| <button type="button" class="btn" onclick="findContact();">findContact</button> |
| <button type="button" class="btn" onclick="updateContact();">updateContact</button> |
| <button type="button" class="btn" onclick="removeContact();">removeContacts</button> |
| </div> |
| </li> |
| </ul> |
| <script type="text/javascript" src="./js/sample.js"></script> |
| </body> |
| </html> |
