diff --git a/assets/images/a-week-of-aframe.png b/assets/images/a-week-of-aframe.png
new file mode 100644
index 000000000..911052b3c
Binary files /dev/null and b/assets/images/a-week-of-aframe.png differ
diff --git a/assets/images/aframe-astronaut.png b/assets/images/aframe-astronaut.png
new file mode 100644
index 000000000..efb0f2a8f
Binary files /dev/null and b/assets/images/aframe-astronaut.png differ
diff --git a/assets/images/alien-creeper.png b/assets/images/alien-creeper.png
new file mode 100644
index 000000000..9fa7e2ef4
Binary files /dev/null and b/assets/images/alien-creeper.png differ
diff --git a/assets/images/flying-man.png b/assets/images/flying-man.png
new file mode 100644
index 000000000..2edd9c98a
Binary files /dev/null and b/assets/images/flying-man.png differ
diff --git a/assets/images/man-and-butterfly.png b/assets/images/man-and-butterfly.png
new file mode 100644
index 000000000..6c388bb9e
Binary files /dev/null and b/assets/images/man-and-butterfly.png differ
diff --git a/assets/images/skull-head.png b/assets/images/skull-head.png
new file mode 100644
index 000000000..145be9485
Binary files /dev/null and b/assets/images/skull-head.png differ
diff --git a/assets/images/spongebob-imagination.png b/assets/images/spongebob-imagination.png
new file mode 100644
index 000000000..619f11eb5
Binary files /dev/null and b/assets/images/spongebob-imagination.png differ
diff --git a/assets/images/tree-stub.png b/assets/images/tree-stub.png
new file mode 100644
index 000000000..24ad2d17e
Binary files /dev/null and b/assets/images/tree-stub.png differ
diff --git a/assets/images/you-shall-not-pass.png b/assets/images/you-shall-not-pass.png
new file mode 100644
index 000000000..6c8717d72
Binary files /dev/null and b/assets/images/you-shall-not-pass.png differ
diff --git a/index.html b/index.html
index 24fc0a9fd..9d5c49188 100644
--- a/index.html
+++ b/index.html
@@ -19,6 +19,16 @@
+
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+
@@ -44,6 +54,12 @@
rotation="-90 0 0"
material="shader: flat; src: #floor">
+
+
+
+
+
+
diff --git a/src/components/gallery-controls.js b/src/components/gallery-controls.js
new file mode 100644
index 000000000..03ed80646
--- /dev/null
+++ b/src/components/gallery-controls.js
@@ -0,0 +1,119 @@
+/* globals AFRAME THREE */
+AFRAME.registerComponent('gallery-controls', {
+ dependencies: ['tracked-controls', 'brush'],
+
+ schema: {},
+
+ galleryIndex: 1,
+
+ gallery: [{
+ image: 'aframe-astronaut',
+ href: 'https://ucarecdn.com/9687f762-43ff-488d-8e33-8885770f59b3/',
+ }, {
+ image: 'you-shall-not-pass',
+ href: 'https://ucarecdn.com/962b242b-87a9-422c-b730-febdc470f203/',
+ }, {
+ image: 'alien-creeper',
+ href: 'https://ucarecdn.com/c9c89a30-7259-46aa-9b02-64b72adb3fb2/',
+ }, {
+ image: 'flying-man',
+ href: 'https://ucarecdn.com/bacf6186-96b1-404c-9751-e955ece04919/',
+ }, {
+ image: 'skull-head',
+ href: 'https://ucarecdn.com/d939bcb0-bc69-4600-a5d2-3e0b47e0639c/',
+ }, {
+ image: 'spongebob-imagination',
+ href: 'https://ucarecdn.com/b6298564-d13b-4917-89cd-6a6b2ceb8efd/',
+ }, {
+ image: 'man-and-butterfly',
+ href: 'https://ucarecdn.com/3e089e07-be62-48e1-9f12-9a284c249e77/',
+ }, {
+ image: 'tree-stub',
+ href: 'https://ucarecdn.com/3f92dffd-1c66-400d-898a-9a9decd5f07a/',
+ }],
+
+ init: function () {
+ var el = this.el;
+ var self = this;
+
+ this.setPreviews();
+
+ var handleAxisMoveDebounced = debounce(this.handleAxisMove.bind(this), 250);
+ document.addEventListener('keydown', this.handleKeyDown.bind(this));
+ // this.el.addEventListener('axismove', handleAxisMoveDebounced);
+
+ function debounce(func, wait, immediate) {
+ var timeout;
+ return function() {
+ var context = this, args = arguments;
+ var later = function() {
+ timeout = null;
+ if (!immediate) func.apply(context, args);
+ };
+ var callNow = immediate && !timeout;
+ clearTimeout(timeout);
+ timeout = setTimeout(later, wait);
+ if (callNow) func.apply(context, args);
+ };
+ };
+ },
+
+ handleKeyDown: function(evt) {
+ if (evt.keyCode === 40 || evt.keyCode === 38) {
+ this.handleAxisMove(evt);
+ }
+
+ if (evt.keyCode === 13) {
+ this.handlePreviewSelect.apply(this);
+ }
+ },
+
+ handleAxisMove: function(evt) {
+ // evt = { detail: { axis: [1, -1] } };
+ // if ((evt.detail.axis[0] === 0 && evt.detail.axis[1] === 0) &&
+ // this.data.hand === 'left') {
+ // return;
+ // }
+
+ var direction;
+ if (evt.keyCode === 40) {
+ direction = 'forward';
+ } else if (evt.keyCode === 38) {
+ direction = 'backward';
+ }
+
+ // direction = evt.detail.axis[1] < 0 ? 'forward' : 'backward';
+ if (direction === 'backward' && this.galleryIndex >= 1) {
+ this.galleryIndex--;
+ this.setPreviews();
+ } else if (this.galleryIndex < this.gallery.length - 1 &&
+ direction === 'forward') {
+ this.galleryIndex++;
+ this.setPreviews();
+ }
+ },
+
+ setPreviews: function () {
+ var preview0 = document.querySelector('#preview-0');
+ var preview1 = document.querySelector('#preview-1');
+ var preview2 = document.querySelector('#preview-2');
+
+ if (!this.gallery[this.galleryIndex - 1]) {
+ preview0.setAttribute('src', null);
+ } else {
+ preview0.setAttribute('src', '#preview-' + this.gallery[this.galleryIndex - 1].image);
+ }
+
+ preview1.setAttribute('src', '#preview-' + this.gallery[this.galleryIndex].image);
+
+ if (!this.gallery[this.galleryIndex + 1]) {
+ preview2.setAttribute('src', null);
+ } else {
+ preview2.setAttribute('src', '#preview-' + this.gallery[this.galleryIndex + 1].image);
+ }
+ },
+
+ handlePreviewSelect: function() {
+ this.el.sceneEl.systems.brush.loadFromUrl(this.gallery[this.galleryIndex].href);
+ },
+});
diff --git a/src/index.js b/src/index.js
index da925782b..4fb25804d 100644
--- a/src/index.js
+++ b/src/index.js
@@ -17,6 +17,7 @@ require('./components/line.js');
require('./components/look-controls-alt.js');
require('./components/orbit-controls.js');
require('./components/paint-controls.js');
+require('./components/gallery-controls.js');
require('./components/ui.js');
require('./components/ui-raycaster.js');
diff --git a/src/systems/painter.js b/src/systems/painter.js
index b96ccecc7..aa0091ae5 100644
--- a/src/systems/painter.js
+++ b/src/systems/painter.js
@@ -30,6 +30,13 @@ AFRAME.registerSystem('painter', {
document.getElementById('apainter-author').classList.remove('hidden');
}
+ if (urlParams.gallery) {
+ document.getElementById('apainter-logo').classList.remove('hidden');
+ document.getElementById('logo').setAttribute('visible', false);
+ document.getElementById('right-hand').setAttribute('gallery-controls', '');
+ document.getElementById('carousel').setAttribute('visible', true);
+ }
+
this.startPainting = false;
var self = this;
document.addEventListener('stroke-started', function (event) {