UI update
git-svn-id: https://svn.apache.org/repos/asf/incubator/photark/mobile/trunk@1372925 13f79535-47bb-0310-9956-ffa450edef68
diff --git a/assets/www/css/jquery.mobile.simpledialog.css b/assets/www/css/jquery.mobile.simpledialog.css
new file mode 100644
index 0000000..cae4e8f
--- /dev/null
+++ b/assets/www/css/jquery.mobile.simpledialog.css
@@ -0,0 +1,21 @@
+/*
+ * jQuery Mobile Framework : plugin to provide a simple Dialog widget.
+ * Copyright (c) JTSage
+ * CC 3.0 Attribution. May be relicensed without permission/notifcation.
+ * https://github.com/jtsage/jquery-mobile-simpledialog
+ */
+
+/* Shared Styles */
+
+.ui-simpledialog-header h4 { margin-top: 5px; margin-bottom: 5px; text-align: center; }
+.ui-simpledialog-container { border: 5px solid #111 !important; width:85%; max-width:500px;}
+.ui-simpledialog-screen { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; }
+.ui-simpledialog-hidden { display: none; }
+.ui-simpledialog-input { width: 85% !important; display: block !important; margin-left: auto; margin-right: auto;}
+.ui-simpledialog-screen-modal { background-color: black; -moz-opacity: 0.8; opacity:.80; filter: alpha(opacity=80); }
+.ui-simpledialog-subtitle { text-align: center; }
+.ui-simpledialog-controls .buttons-separator {min-height: .6em;}
+.ui-simpledialog-controls .button-hidden { display:none; }
+
+.ui-dialog .ui-simpledialog-container { border: none !important; }
+.ui-dialog-simpledialog .ui-content { padding: 5px !important;}
diff --git a/assets/www/index.html b/assets/www/index.html
index 3c80016..a4b32c4 100644
--- a/assets/www/index.html
+++ b/assets/www/index.html
@@ -1,6 +1,6 @@
<!DOCTYPE HTML>
<html>
- <head>
+ <head >
<title>Photark Mobile</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/jquery.mobile-1.1.0.min.css" rel="stylesheet"
@@ -35,7 +35,13 @@
<script type="text/javascript" charset="utf-8" src="scripts/utils.js" ></script>
<script type="text/javascript" charset="utf-8" src="scripts/tagging.js" ></script>
<script type="text/javascript" charset="utf-8" src="scripts/dataAccess.js"></script>
- <script type="text/javascript" charset="utf-8" src="scripts/search.js"></script>
+ <script type="text/javascript" charset="utf-8" src="scripts/search.js"></script>
+ <script type="text/javascript" charset="utf-8" src="http://maps.googleapis.com/maps/api/js?libraries=places&sensor=true"></script>
+ <script type="text/javascript" charset="utf-8" src="scripts/geoLocation.js" ></script>
+ <script type="text/javascript" charset="utf-8" src="scripts/jquery.ui.map.js"></script>
+ <!-- <script type="text/javascript" charset="utf-8" src="scripts/jquery.ui.map.services.js"></script> -->
+ <script type="text/javascript" charset="utf-8" src="scripts/MapView.js"></script>
+
<!--For Flickr Implementation Start-->
<script type="text/javascript" charset="utf-8" src="scripts/childbrowser.js"></script>
<script type="text/javascript" charset="utf-8" src="scripts/jquery.md5.js"></script>
@@ -58,7 +64,9 @@
var windowWidth;
var windowHeight;
-
+
+ var tagObjects;
+ var tagObjectsSaved;
var tagObjects;
var tagObjectsSaved;
// Wait for device
@@ -75,8 +83,8 @@
var name = $(this).text();
onContactsClick(name);
});
- getLocation();
- openDB();
+
+ openDB(); //Initialize the database
//Screen orientation changed
$(window).bind( 'orientationchange', function(e){
@@ -97,19 +105,20 @@
]
};
- if(google) {
+ // if(google) {
var autocomplete = new google.maps.places.Autocomplete($("#editLocation")[0], options);
google.maps.event.addListener(autocomplete, 'place_changed', function() {
var place = autocomplete.getPlace();
//console.log(place.address_components);
});
- } else {
-
- }
+ // } else {
+//
+ // }
}
//Document ready function
$(function() {
+
// Handler for Date Picker
$('#editDate').scroller({
@@ -173,19 +182,7 @@
largeImage.style.display = 'block';
largeImage.src = imageURI;
- $('#imageInfoButton').show();
- $('#photoTagButton').show();
- $('#homeButton').show();
- $('#deleteButton').show();
- $('#editDataButton').show();
-
- $('#captureButton').hide();
- $('#galleryButton').hide();
- $('#webAlbumButton').hide();
- $('#searchButton').hide();
- $('#toolbar_message').hide();
- $('#helpButton').hide();
-
+ onImageUpdated();
$('#toolbar').listview("create");
uri= imageURI;
@@ -203,6 +200,7 @@
tagObjectsSaved=new Array();
viewData(imageURI);
$('#largeImage').click(function() { fullScreen(largeImage.src); });
+
}
function photoCaptureSuccess (uri) {
@@ -550,7 +548,7 @@
</div>
<div data-role="fieldcontain">
- <label for="textarea"> People: </label>
+ <label for="textarea"> People (Separated by commas): </label>
<textarea cols="40" rows="8" name="textarea" id="searchPeople"></textarea>
<a href="#ContactsPage" data-role="button" data-theme="a" data-mini="true">Browse</a>
</div>
diff --git a/assets/www/scripts/dataAccess.js b/assets/www/scripts/dataAccess.js
index 1983bb6..b948605 100644
--- a/assets/www/scripts/dataAccess.js
+++ b/assets/www/scripts/dataAccess.js
@@ -83,6 +83,7 @@
function viewData(img){
uri=img;
+ clearData();
db.transaction(retriviewDB, errorCB, successCB);
}
@@ -99,10 +100,20 @@
time=results.rows.item(i).time;
loc=results.rows.item(i).location;
description=results.rows.item(i).description;
- }
+ }
updateHome();
}
+function clearData(){
+ nickname="Not defined.";
+ date="";
+ time="";
+ loc="";
+ description="";
+ people=new Array();
+ tagObjectsSaved=new Array();
+}
+
function queryPeopleSuccess(tx, results) {
var len = results.rows.length;
@@ -114,8 +125,9 @@
}
function updateDB(){
- var db = window.openDatabase("photark", "1.0", "DB", 1000000);
+ //var db = window.openDatabase("photark", "1.0", "DB", 1000000);
db.transaction(insertToDB, errorCB, successCB);
+ updateHome();
}
function insertToDB(tx) {
@@ -126,6 +138,7 @@
}
function updateHome(){
+ $("#metadata").html("");
$("#metadata").append("<p> Name: "+nickname+"</p>");
$("#metadata").append("<p> Location: "+loc+"</p>");
$("#metadata").append("<p> Description: "+description+"</p>");
diff --git a/assets/www/scripts/search.js b/assets/www/scripts/search.js
index 2fd87a5..e5ccdb6 100644
--- a/assets/www/scripts/search.js
+++ b/assets/www/scripts/search.js
@@ -114,16 +114,25 @@
var largeImage = document.getElementById('largeImage');
largeImage.style.display = 'block';
largeImage.src = uri;
- $('#imageInfoButton').show();
- $('#photoTagButton').show();
- $('#toolbar_icons').show();
- $('#toolbar_message').hide();
+ onImageUpdated();
$('#toolbar').listview("create");
window.resolveLocalFileSystemURI(uri, onFileEntryComplete, isFail);
viewData(uri);
$('#largeImage').click(function() { fullScreen(largeImage.src); });
- $.mobile.changePage( $("#main") );
+
+ displayTagImage(uri) ;
+
+ tagObjects=new Array();
+
+ $('#largeImage').css({
+ // Using jQuery CSS we write the $width variable we previously specified as a pixel value. We use max-width incase the image is smaller than our viewport it won't scale it larger. Don't forget to set height to auto or else it will squish your photos.
+ 'max-width' : windowWidth , 'height' : 'auto'
+ });
+
+ tagObjectsSaved=new Array();
+ $('#largeImage').click(function() { fullScreen(largeImage.src); });
+ $.mobile.changePage( $("#main") );
}
function viewAllImages(){
diff --git a/assets/www/scripts/utils.js b/assets/www/scripts/utils.js
index f5400e1..79e569a 100644
--- a/assets/www/scripts/utils.js
+++ b/assets/www/scripts/utils.js
@@ -92,77 +92,6 @@
$('#map_canvas').css('margin-right', 'auto');
}
-function showDialog(e, x, y) {
- $('<div>').simpledialog2({
- mode : 'button',
- headerText : 'Tag',
- headerClose : true,
- buttonPrompt : 'Type Name',
- buttonInput : true,
- buttons : {
- 'OK' : {
- click : function() {
- var name = $.mobile.sdLastInput;
- showTag(name, x, y);
- var tgx=new TagObject(name,x,y);
- tagObjects.push(tg1);
- }
- },
- }
- })
-}
-
-function TagObject(name, x, y) {
- this.name = name;
- this.x = x;
- this.y = y;
-}
-
-function saveTags() {
- for (i = 0; i < tagObjects.length; i++) {
- addTag(tagObjects[i].name, tagObjects[i].x, tagObjects[i].y);
- }
- alert(tagObjects[0].x);
-}
-
-function markTags(tagObjectsSaved) {
-
- for (i = 0; i < tagObjectsSaved.length; i++) {
- showTag(tagObjectsSaved[i].name, parseInt(tagObjectsSaved[i].x),
- parseInt(tagObjectsSaved[i].y));
- }
-}
-
-function showTag(name, x, y) {
- var img = $('<p>' + name + '</p>');
- img.css('top', y);
- img.css('left', x);
- img.css('color', 'purple');
- img.appendTo('#tagPicture');
-}
-
-function clearTags() {
- deleteTags();
- $('#tagPicture').html('<img id="tagImage"/>');
- displayTagImage(getURI());
-}
-
-function displayTagImage(uri) {
- var tagImage = document.getElementById('tagImage');
- tagImage.style.display = 'block';
- tagImage.src = uri;
-
- $('#tagImage').css({
- // Using jQuery CSS we write the $width variable we previously specified
- // as a pixel value. We use max-width incase the image is smaller than
- // our viewport it won't scale it larger. Don't forget to set height to
- // auto or else it will squish your photos.
- 'max-width' : (windowWidth - 30),
- 'height' : 'auto'
- });
-
-}
-
function loadjscssfile(scriptUrl) {
var head = document.getElementsByTagName("head")[0];
script = document.createElement('script');
@@ -196,14 +125,11 @@
minutes = "0" + minutes;
}
var h;
- if (hours > 11) {
+ if (hours > 12) {
h = hours - 12;
- } else {
- if (hours < 10) {
- h = '0' + hours;
- } else {
- h = hours;
- }
+ }
+ if (h < 10) {
+ h = '0' + h;
}
time += (h + ":" + minutes + " ");
if (hours > 11) {
@@ -234,3 +160,19 @@
$('#webAlbumButton').show();
$('#helpButton').show();
}
+
+function onImageUpdated(){
+ $('#imageInfoButton').show();
+ $('#photoTagButton').show();
+ $('#homeButton').show();
+ $('#deleteButton').show();
+ $('#editDataButton').show();
+ $('#searchButton').show();
+
+ $('#captureButton').hide();
+ $('#galleryButton').hide();
+ $('#webAlbumButton').hide();
+ $('#toolbar_message').hide();
+ $('#helpButton').hide();
+ $('#searchButton').hide();
+}
