Merge pull request #109 from karaxuna/jxcore-photos-sample

Sample app added for taking pictures and saving in sqlite db

sample/photos_sqlite_sample/.gitignore

@@ -0,0 +1,7 @@
+node_modules/
+io.jxcore.node/
+platforms/
+plugins/
+www/jxcore/node_modules
+/**/*.db
+build.keystore

sample/photos_sqlite_sample/README.md

@@ -0,0 +1,20 @@
+## Sample JXcore cordova app for saving photos in sqlite db
+
+![Android](./screens/android.png "Android")
+
+Supposing you have already installed [JXcore](http://jxcore.com/downloads/), cordova and gulp globally, now install local npm modules:
+
+```bash
+jx install
+```
+
+To run on android just type:
+
+```bash
+gulp run-android
+```
+
+Notes!
+
+1. Gulp tasks take care of installing plugins, but if you copy a sample manually, don't forget to install the camera plugin.
+2. Low ram devices (ram <= 512mb) **may** terminate app due to lack of memory.

sample/photos_sqlite_sample/config.xml

@@ -0,0 +1,28 @@
+<?xml version='1.0' encoding='utf-8'?>
+<widget id="com.nubisa.photos" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0" xmlns:android="http://schemas.android.com/apk/res/android">
+    <name>Photo app</name>
+    <description>
+        Sample photo app
+    </description>
+    <author email="kaxabernet@gmail.com">
+        Kakhaber Bazerashvili
+    </author>
+    <content src="index.html" />
+    <plugin name="cordova-plugin-whitelist" version="1" />
+    <access origin="*" />
+    <allow-intent href="http://*/*" />
+    <allow-intent href="https://*/*" />
+    <allow-intent href="tel:*" />
+    <allow-intent href="sms:*" />
+    <allow-intent href="mailto:*" />
+    <allow-intent href="geo:*" />
+    <platform name="android">
+        <allow-intent href="market:*" />
+    </platform>
+    <platform name="ios">
+        <allow-intent href="itms:*" />
+        <allow-intent href="itms-apps:*" />
+    </platform>
+    <feature name="http://api.phonegap.com/1.0/camera" />
+    <feature name="http://api.phonegap.com/1.0/file" />
+</widget>

sample/photos_sqlite_sample/gulpfile.js

@@ -0,0 +1,59 @@
+var gulp = require('gulp'),
+    shell = require('gulp-shell'),
+    download = require('gulp-download'),
+    fs = require('fs');
+
+gulp.task('download-jxcore-cordova', function (callback) {
+    if (fs.existsSync('./io.jxcore.node')) {
+        callback();
+    } else {
+        var url = 'https://github.com/jxcore/jxcore-cordova-release/raw/master/0.0.4/io.jxcore.node.jx';
+        return download(url).pipe(gulp.dest('.'));
+    }
+});
+
+gulp.task('unpack-jxcore-cordova', ['download-jxcore-cordova'], function (callback) {
+    if (fs.existsSync('./io.jxcore.node.jx')) {
+        return gulp.src('').pipe(shell('jx io.jxcore.node.jx'));
+    } else {
+        callback();
+    }
+});
+
+gulp.task('add-jxcore-cordova-plugin', ['unpack-jxcore-cordova'], function (callback) {
+    if (fs.existsSync('./plugins/io.jxcore.node')) {
+        callback();
+    } else {
+        require('child_process').exec('cordova plugins add ./io.jxcore.node/', callback);
+    }
+});
+
+gulp.task('install-server-packages', function () {
+    return gulp.src('').pipe(shell('jx install', {
+        cwd: 'www/jxcore'
+    }));
+});
+
+gulp.task('add-camera-plugin', function (callback) {
+    if (fs.existsSync('./plugins/cordova-plugin-camera')) {
+        callback();
+    } else {
+        require('child_process').exec('cordova plugins add cordova-plugin-camera', callback);
+    }
+});
+
+gulp.task('add-platforms', ['add-jxcore-cordova-plugin', 'add-camera-plugin'], function (callback) {
+    if (fs.existsSync('./platforms/android')) {
+        callback();
+    } else {
+        return gulp.src('').pipe(shell('cordova platforms add android'));
+    }
+});
+
+gulp.task('build', ['add-platforms', 'install-server-packages'], function () {
+
+});
+
+gulp.task('run-android', ['build'], function () {
+    return gulp.src('').pipe(shell('cordova run android'));
+});

sample/photos_sqlite_sample/package.json

@@ -0,0 +1,11 @@
+{
+    "name": "jxcore-photo",
+    "description": "Sample JXcore cordova app for saving photos in sqlite db",
+    "version": "0.0.1",
+    "author": "Kakhaber Bazerashvili",
+    "devDependencies": {
+        "gulp": "3.9.0",
+        "gulp-download": "0.0.1",
+        "gulp-shell": "0.4.0"
+    }
+}

sample/photos_sqlite_sample/www/index.css

@@ -0,0 +1,23 @@
+html, body {
+    margin: 0;
+    padding: 0;
+}
+
+#takePhoto {
+    position: relative;
+    margin: 1em;
+    padding: 12px 26px;
+    text-align: center;
+    border-radius: 5px;
+    overflow: hidden;
+    position: relative;
+    z-index: 0;
+    cursor: pointer;
+    transition: all 0.1s;
+    background: #0c84e4;
+    box-shadow: 0px 1px 1px #085a9b;
+    font-weight: bold;
+    font-size: 16px;
+    border: none;
+    color: rgba(255, 255, 255, .8);
+}

sample/photos_sqlite_sample/www/index.html

@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>JXcore repl</title>
+        <meta charset="utf-8" />
+        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <link rel="stylesheet" type="text/css" href="./slick/slick.css" />
+        <link rel="stylesheet" type="text/css" href="./slick/slick-theme.css" />
+        <link rel="stylesheet" type="text/css" href="./index.css" />
+    </head>
+
+    <body>
+        <button type="button" id="takePhoto">Take a photo</button>
+        <div id="slider"></div>
+        <script type="text/javascript" src="./cordova.js"></script>
+        <script type="text/javascript" src="./jquery/jquery.js"></script>
+        <script type="text/javascript" src="./slick/slick.js"></script>
+        <script type="text/javascript" src="./index.js"></script>
+    </body>
+</html>

sample/photos_sqlite_sample/www/index.js

@@ -0,0 +1,62 @@
+(function check() {
+    if (typeof jxcore === 'undefined') {
+        setTimeout(check, 5);
+    } else {
+        jxcore.isReady(function () {
+            jxcore('alert').register(alert);
+            jxcore('app.js').loadMainFile(function(result, err) {
+                if (err) {
+                    alert(err);
+                } else {
+                    jxcore('getPhotoUrls').call(function (err, urls) {
+                        init(urls);
+                    });
+                }
+            });
+        });
+    }
+})();
+
+var slider;
+
+function init(urls) {
+    // initialize slider
+    slider = jQuery('#slider').slick({
+        infinite: true,
+        speed: 300,
+        slidesToShow: 1
+    });
+
+    // add photos
+    urls.forEach(addPhotoToSlider);
+
+    // take photo button
+    document.getElementById('takePhoto').addEventListener('click', takeAndSavePhoto);
+}
+
+function addPhotoToSlider(url) {
+    slider.slick('slickAdd', '<div><img width="100%" src="' + url + '"/></div>');
+}
+
+function takeAndSavePhoto() {
+    navigator.camera.getPicture(function (data) {
+        jxcore('savePhoto').call(data, function (err, url) {
+            if (err) {
+                alert(err);
+            } else {
+                addPhotoToSlider(url);
+                slider.slick('slickNext');
+            }
+        });
+    }, function () {
+        alert('Taking photo failed: ' + err);
+    }, {
+        quality: 25,
+        destinationType : navigator.camera.DestinationType.DATA_URL,
+        sourceType: navigator.camera.PictureSourceType.CAMERA,
+        encodingType: navigator.camera.EncodingType.JPEG,
+        targetwidth: 900,
+        targetHeight: 900,
+        correctOrientation: true
+    });
+}