Add random and slideshow directory

slideshow/scripts/index.js

@@ -0,0 +1,232 @@
+// For an introduction to the Blank template, see the following documentation:
+// http://go.microsoft.com/fwlink/?LinkID=397704
+// To debug code on page load in cordova-simulate or on Android devices/emulators: launch your app, set breakpoints, 
+// and then run "window.location.reload()" in the JavaScript Console.
+(function () {
+    "use strict";
+
+    var _Root;
+    var _RootAlt;
+    var _JsonTimer;
+    var _ImageTimer;
+
+    var _Pause = 0;
+    var _Images = [];
+    var _ImageIndex = 0;
+    var _OpaqueIndex = 0;
+    var _JsonInterval = 59000;
+    var _ImageInterval = 5000;
+    var _DeviceReadyDiv = $("#deviceReady div");
+
+    $(document).ready(function () {
+
+        console.log("onDeviceReady");
+
+        // Handle the Cordova pause and resume events
+        document.addEventListener('pause', onPause.bind(this), false);
+        document.addEventListener('resume', onResume.bind(this), false);
+
+        document.addEventListener('keyup', getInput, false);
+
+        loadDevice();
+        loadData();
+
+        _JsonTimer = setInterval(onTickJSON, _JsonInterval);
+        _ImageTimer = setInterval(onTickImage, _ImageInterval);
+
+    });
+
+    function onPause() {
+        // TODO: This application has been suspended. Save application state here.
+    }
+
+    function onResume() {
+        // TODO: This application has been reactivated. Restore application state here.
+    }
+
+    function goBack() {
+        _Pause = 1;
+        if (_Pause === 0) {
+            _ImageIndex -= 1;
+        }
+        else {
+            _ImageIndex -= 2;
+        }
+        if (_ImageIndex === 0) {
+            _ImageIndex = _Images.length - 1;
+        }
+        var backgroundImage = GetBackgroundImage();
+        _DeviceReadyDiv.attr('style', backgroundImage);
+    }
+
+    function goForward() {
+        _Pause = 1;
+        _ImageIndex += 1;
+        if (_ImageIndex >= _Images.length) {
+            _ImageIndex = 0;
+        }
+        var backgroundImage = GetBackgroundImage();
+        _DeviceReadyDiv.attr('style', backgroundImage);
+    }
+
+    function changeImageTimer(imageInterval) {
+        _ImageInterval = imageInterval;
+        clearTimeout(_ImageTimer);
+        _ImageTimer = setInterval(onTickImage, _ImageInterval);
+    }
+
+    function getInput(e) {
+        var which = e.which;
+        switch (which) {
+            case 13: //Okay
+                if (_Pause === 0) {
+                    _Pause = 1;
+                }
+                else {
+                    _Pause = 0;
+                }
+                break;
+            case 37: //Left
+                goBack();
+                break;
+            case 38: //Up
+                goForward();
+                break;
+            case 39: //Right
+                goForward();
+                break;
+            case 40: //Down
+                goBack();
+                break;
+            case 173: //Fast Forward
+                goForward();
+                break;
+            case 177: //Rewind
+                goBack();
+                break;
+            case 8: //Delete
+                console.log('Delete key was pressed!');
+                break;
+            case 48: //0
+                changeImageTimer(10000);
+                break;
+            case 49: //1
+                changeImageTimer(1000);
+                break;
+            case 50: //2
+                changeImageTimer(2000);
+                break;
+            case 51: //3
+                changeImageTimer(3000);
+                break;
+            case 52: //4
+                changeImageTimer(4000);
+                break;
+            case 53: //5
+                changeImageTimer(5000);
+                break;
+            case 54: //6
+                changeImageTimer(6000);
+                break;
+            case 55: //7
+                changeImageTimer(7000);
+                break;
+            case 56: //8
+                changeImageTimer(8000);
+                break;
+            case 57: //9
+                changeImageTimer(9000);
+                break;
+            default:
+        }
+    }
+
+    function loadDevice() {
+        _Root = '../pictures';
+        _RootAlt = null;
+    }
+
+    function loadData() {
+        var isoString = new Date().toISOString();
+        var url = '../random/' + isoString.substring(5, isoString.indexOf("T")) + '.json';
+        console.log(url);
+        var _ = $.getJSON(url, function (data) {
+            console.log("success", data.length);
+            _Images = [];
+            $.each(data, function (index, value) {
+                _Images.push(value.replaceAll("\\", "/"));
+            });
+        })
+            .done(function () {
+                console.log("second success");
+            })
+            .fail(function (er) {
+                console.log("error", er);
+                //_Images = ['images/img_tree.gif'];
+                //_Images = ['images/output-onlinepngtools.png'];
+                _Images = ['images/1x1_00000000.png']; // https://shoonia.github.io/1x1/#00000000
+            })
+            .always(function () {
+                console.log("complete");
+            });
+    }
+
+    function onTickJSON() {
+        var currentDate = new Date();
+        var currentHours = currentDate.getHours();
+        if (currentHours === 21) {
+            var currentMinutes = currentDate.getMinutes();
+            if (currentMinutes === 0) {
+                loadData();
+            }
+        }
+    }
+
+    function GetBackgroundImage() {
+        var result = "background-image: url('" + _Root + _Images[_ImageIndex] + "'), url('";
+        if (_RootAlt !== null) {
+            result = result + _RootAlt + _Images[_ImageIndex] + "'), url('";
+        }
+        //result = result + "images/img_tree.gif');";
+        //result = result + "images/output-onlinepngtools.png');";
+        result = result + "images/1x1_00000000.png');"; // https://shoonia.github.io/1x1/#00000000
+        return result;
+    }
+
+    function onTickImage() {
+        if (_Images.length > 0 && _Pause === 0) {
+            var currentDate = new Date();
+            var currentHours = currentDate.getHours();
+            if (currentHours >= 22 || currentHours <= 6) {
+                _DeviceReadyDiv.attr('style', 'background-color: #191717;');
+            }
+            else {
+                _DeviceReadyDiv.eq(_OpaqueIndex).removeClass("opaque");
+                _ImageIndex += 1;
+                if (_ImageIndex >= _Images.length) {
+                    _ImageIndex = 0;
+                }
+                var loadIndex;
+                switch (_OpaqueIndex) {
+                    case 0:
+                        loadIndex = 2;
+                        _OpaqueIndex = 1;
+                        break;
+                    case 1:
+                        loadIndex = 0;
+                        _OpaqueIndex = 2;
+                        break;
+                    case 2:
+                        loadIndex = 1;
+                        _OpaqueIndex = 0;
+                        break;
+                    default:
+                }
+                var backgroundImage = GetBackgroundImage();
+                _DeviceReadyDiv.eq(loadIndex).attr('style', backgroundImage);
+                _DeviceReadyDiv.eq(_OpaqueIndex).addClass("opaque");
+            }
+        }
+    }
+
+})();

slideshow/scripts/jquery.bgswitcher.js

@@ -0,0 +1,498 @@
+/*!
+ * jQuery.BgSwitcher
+ *
+ * @version  0.4.0
+ * @author   rewish <rewish.org@gmail.com>
+ * @license  MIT License (https://github.com/rewish/jquery-bgswitcher/LICENSE.md)
+ * @link     https://github.com/rewish/jquery-bgswitcher
+ */
+!function ($) {
+    'use strict';
+
+    var loadedImages = {},
+
+        slice = Array.prototype.slice,
+        toString = Object.prototype.toString,
+
+        edges = ['Top', 'Right', 'Bottom', 'Left'],
+        backgroundProperties = [
+            'Attachment', 'Color', 'Image', 'Repeat',
+            'Position', 'Size', 'Clip', 'Origin'
+        ];
+
+    $.fn.bgswitcher = function () {
+        var args = arguments,
+            instanceKey = BgSwitcher.keys.instance;
+
+        return this.each(function () {
+            var instance = $.data(this, instanceKey);
+
+            if (!instance) {
+                instance = new BgSwitcher(this);
+                $.data(this, instanceKey, instance);
+            }
+
+            instance.dispatch.apply(instance, args);
+        });
+    };
+
+    // Backward Compatibility
+    $.fn.bgSwitcher = $.fn.bgswitcher;
+
+    /**
+     * BgSwitcher
+     *
+     * @param {HTMLElement} el
+     * @constructor
+     */
+    function BgSwitcher(el) {
+        this.$el = $(el);
+        this.index = 0;
+        this.config = $.extend({}, BgSwitcher.defaultConfig);
+
+        this._setupBackgroundElement();
+        this._listenToResize();
+    }
+
+    $.extend(BgSwitcher.prototype, {
+        /**
+         * Dispatch
+         *
+         * @param {string|Array} one
+         */
+        dispatch: function (one) {
+            switch (toString.call(one)) {
+                case '[object String]':
+                    this[one].apply(this, slice.call(arguments, 1));
+                    break;
+                case '[object Object]':
+                    this.setConfig(one);
+                    break;
+                default:
+                    this.setConfig();
+            }
+        },
+
+        /**
+         * Set config
+         *
+         * @param {Object} config
+         */
+        setConfig: function (config) {
+            this.config = $.extend(this.config, config);
+
+            if (typeof this.config.random !== 'undefined') {
+                this.config.shuffle = this.config.random;
+            }
+
+            this._prepare();
+        },
+
+        /**
+         * Set images
+         *
+         * @param {Array} images
+         */
+        setImages: function (images) {
+            this.imageList = new this.constructor.ImageList(images);
+            this.config && this.config.shuffle && this.imageList.shuffle();
+        },
+
+        /**
+         * Set switch handler
+         *
+         * @param {Function} fn
+         */
+        setSwitchHandler: function (fn) {
+            this.switchHandler = $.proxy(fn, this);
+        },
+
+        /**
+         * Default switch handler
+         *
+         * @param {string} type
+         * @returns {Function}
+         */
+        getBuiltInSwitchHandler: function (type) {
+            return this.constructor.switchHandlers[type || this.config.effect];
+        },
+
+        /**
+         * Adjust rectangle
+         */
+        adjustRectangle: function () {
+            var edge, i = 0,
+                offset = this.$el.position(),
+                copiedStyles = {
+                    top: offset.top,
+                    left: offset.left,
+                    width: this.$el.innerWidth(),
+                    height: this.$el.innerHeight()
+                };
+
+            while (edge = edges[i++]) {
+                copiedStyles['margin' + edge] = this.$el.css('margin' + edge);
+                copiedStyles['border' + edge] = this.$el.css('border' + edge);
+            }
+
+            this.$bg.css(copiedStyles);
+        },
+
+        /**
+         * Start switching
+         */
+        start: function () {
+            if (!this._timerID) {
+                this._timerID = setTimeout($.proxy(this, 'next'), this.config.interval);
+            }
+        },
+
+        /**
+         * Stop switching
+         */
+        stop: function () {
+            if (this._timerID) {
+                clearTimeout(this._timerID);
+                this._timerID = null;
+            }
+        },
+
+        /**
+         * Toggle between start/stop
+         */
+        toggle: function () {
+            if (this._timerID) {
+                this.stop();
+            } else {
+                this.start();
+            }
+        },
+
+        /**
+         * Reset switching
+         */
+        reset: function () {
+            this.index = 0;
+            this._prepareSwitching();
+        },
+
+        /**
+         * Go to next switching
+         */
+        next: function () {
+            var max = this.imageList.count();
+
+            if (!this.config.loop && this.index + 1 === max) {
+                return;
+            }
+
+            if (++this.index === max) {
+                this.index = 0;
+            }
+
+            this.switching();
+        },
+
+        /**
+         * Go to previous switching
+         */
+        prev: function () {
+            if (!this.config.loop && this.index === 0) {
+                return;
+            }
+
+            if (--this.index === -1) {
+                this.index = this.imageList.count() - 1;
+            }
+
+            this.switching();
+        },
+
+        /**
+         * Switching the background image
+         */
+        switching: function () {
+            var started = !!this._timerID;
+            started && this.stop();
+
+            this.$clone && this.$clone.remove();
+            this.$clone = this.$bg.clone();
+            this.$clone.css({ top: 0, left: 0, border: 'none' });
+            this.$bg.append(this.$clone);
+            this._prepareSwitching();
+            this.switchHandler(this.$clone);
+
+            started && this.start();
+        },
+
+        /**
+         * Destroy...
+         */
+        destroy: function () {
+            this.stop();
+            this._stopListeningToResize();
+
+            if (this.$clone) {
+                this.$clone.stop();
+                this.$clone.remove();
+                this.$clone = null;
+            }
+
+            if (this.$bg) {
+                this.$bg.remove();
+                this.$bg = null;
+            }
+
+            this.$el.removeAttr('style');
+            this.$el.removeData(this.constructor.keys.instance);
+            this.$el = null;
+        },
+
+        /**
+         * Prepare
+         */
+        _prepare: function () {
+            this.setImages(this.config.images);
+            this.setSwitchHandler(this.getBuiltInSwitchHandler());
+            this._prepareSwitching();
+            this.config.start && this.start();
+        },
+
+        /**
+         * Setup background element
+         */
+        _setupBackgroundElement: function () {
+            this.$bg = $(document.createElement('div'));
+            this.$bg.css({
+                position: 'absolute',
+                zIndex: (this.$el.css('zIndex') | 0) - 1,
+                overflow: 'hidden'
+            });
+
+            this._copyBackgroundStyles();
+            this.adjustRectangle();
+
+            if (this.$el[0].tagName === 'BODY') {
+                this.$el.prepend(this.$bg);
+            } else {
+                this.$el.before(this.$bg);
+                this.$el.css('background', 'none');
+            }
+        },
+
+        /**
+         * Copy background styles
+         */
+        _copyBackgroundStyles: function () {
+            var prop,
+                copiedStyle = {},
+                i = 0;
+
+            while (prop = backgroundProperties[i++]) {
+                prop = 'background' + prop;
+                copiedStyle[prop] = this.$el.css(prop);
+            }
+
+            this.$bg.css(copiedStyle);
+        },
+
+        /**
+         * Listen to the resize event
+         */
+        _listenToResize: function () {
+            var that = this;
+            this._resizeHandler = function () {
+                that.adjustRectangle();
+            };
+            $(window).on('resize', this._resizeHandler);
+        },
+
+        /**
+         * Stop listening to the resize event
+         */
+        _stopListeningToResize: function () {
+            $(window).off('resize', this._resizeHandler);
+            this._resizeHandler = null;
+        },
+
+        /**
+         * Prepare to switching the background image
+         */
+        _prepareSwitching: function () {
+            this.$bg.css('backgroundImage', this.imageList.url(this.index));
+        }
+    });
+
+    /**
+     * Data Keys
+     * @type {Object}
+     */
+    BgSwitcher.keys = {
+        instance: 'bgSwitcher'
+    };
+
+    /**
+     * Default Config
+     * @type {Object}
+     */
+    BgSwitcher.defaultConfig = {
+        images: [],
+        interval: 5000,
+        start: true,
+        loop: true,
+        shuffle: false,
+        effect: 'fade',
+        duration: 1000,
+        easing: 'swing'
+    };
+
+    /**
+     * Built-In switch handlers (effects)
+     * @type {Object}
+     */
+    BgSwitcher.switchHandlers = {
+        fade: function ($el) {
+            $el.animate({ opacity: 0 }, this.config.duration, this.config.easing);
+        },
+
+        blind: function ($el) {
+            $el.animate({ height: 0 }, this.config.duration, this.config.easing);
+        },
+
+        clip: function ($el) {
+            $el.animate({
+                top: parseInt($el.css('top'), 10) + $el.height() / 2,
+                height: 0
+            }, this.config.duration, this.config.easing);
+        },
+
+        slide: function ($el) {
+            $el.animate({ top: -$el.height() }, this.config.duration, this.config.easing);
+        },
+
+        drop: function ($el) {
+            $el.animate({
+                left: -$el.width(),
+                opacity: 0
+            }, this.config.duration, this.config.easing);
+        },
+
+        hide: function ($el) {
+            $el.hide();
+        }
+    };
+
+    /**
+     * BgSwitcher.ImageList
+     *
+     * @param {Array} images
+     * @constructor
+     */
+    BgSwitcher.ImageList = function (images) {
+        this.images = images;
+        this.createImagesBySequence();
+        this.preload();
+    };
+
+    $.extend(BgSwitcher.ImageList.prototype, {
+        /**
+         * Images is sequenceable
+         *
+         * @returns {boolean}
+         */
+        isSequenceable: function () {
+            return typeof this.images[0] === 'string' &&
+                typeof this.images[1] === 'number' &&
+                typeof this.images[2] === 'number';
+        },
+
+        /**
+         * Create an images by sequence
+         */
+        createImagesBySequence: function () {
+            if (!this.isSequenceable()) {
+                return;
+            }
+
+            var images = [],
+                base = this.images[0],
+                min = this.images[1],
+                max = this.images[2];
+
+            do {
+                images.push(base.replace(/\.\w+$/, min + '$&'));
+            } while (++min <= max);
+
+            this.images = images;
+        },
+
+        /**
+         * Preload an images
+         */
+        preload: function () {
+            var path, i = 0;
+
+            while (path = this.images[i++]) {
+                if (!loadedImages[path]) {
+                    loadedImages[path] = new Image();
+                    loadedImages[path].src = path;
+                }
+            }
+        },
+
+        /**
+         * Shuffle an images
+         */
+        shuffle: function () {
+            var j, t,
+                i = this.images.length,
+                original = this.images.join();
+
+            if (!i) {
+                return;
+            }
+
+            while (i) {
+                j = Math.floor(Math.random() * i);
+                t = this.images[--i];
+                this.images[i] = this.images[j];
+                this.images[j] = t;
+            }
+
+            if (this.images.join() === original) {
+                this.shuffle();
+            }
+        },
+
+        /**
+         * Get the image from index
+         *
+         * @param {number} index
+         * @returns {string}
+         */
+        get: function (index) {
+            return this.images[index];
+        },
+
+        /**
+         * Get the URL with function of CSS
+         *
+         * @param {number} index
+         * @returns {string}
+         */
+        url: function (index) {
+            return 'url(' + this.get(index) + ')';
+        },
+
+        /**
+         * Count of images
+         *
+         * @returns {number}
+         */
+        count: function () {
+            return this.images.length;
+        }
+    });
+
+    $.BgSwitcher = BgSwitcher;
+}(jQuery);

slideshow/scripts/platformOverrides.js

@@ -0,0 +1,4 @@
+/*
+	This file is replaced with platform-specific code from the /merges folder.
+	More info at http://taco.visualstudio.com/en-us/docs/configure-app/#Content.
+*/