ThumbnailBuilder
Changes
gallery.html 39(+35 -4)
help.html 8(+8 -0)
img/gallery/fishing.png 0(+0 -0)
img/gallery/odfw.png 0(+0 -0)
img/gallery/odfw_logo.png 0(+0 -0)
img/gallery/odot.png 0(+0 -0)
img/gallery/odot_logo.png 0(+0 -0)
img/gallery/roads.png 0(+0 -0)
index.html 1(+1 -0)
js/editCanvas.js 258(+141 -117)
Details
gallery.html 39(+35 -4)
diff --git a/gallery.html b/gallery.html
index de00909..ac34dab 100644
--- a/gallery.html
+++ b/gallery.html
@@ -15,6 +15,8 @@
<a href="./index.html" class="brand-logo">ArcGIS Thumbnail Builder</a>
<ul id="nav-mobile" class="right hide-on-med-and-down">
<li><a href="index.html" target="_self">Home</a></li>
+ <li><a href="gallery.html" target="_self">Gallery</a></li>
+ <li><a href="help.html" target="_self">Help</a></li>
</ul>
</div>
</nav>
@@ -26,33 +28,62 @@
</div>
<div class="row">
- <div class="col s12 m6">
+ <div class="col s12 m4">
<div class="card">
<div class="card-image">
<img src="./img/gallery/bigfoot_theme.png">
</div>
<div class="card-content">
- <p>Bigfoot theme. Rugged and hairy.</p>
+ <p>Forestry</p>
</div>
<div class="card-action">
<a href="./index.html?background=./img/gallery/forest.jpg&logo=./img/gallery/odf_logo.png&title=Harry%20and%20the%20Hendersons%20Adventures&category=Story%20Map&titleColor=3,77,0,0.6&sidebarColor=255,200,0,0.6">Use this theme</a>
</div>
</div>
</div>
- <div class="col s12 m6">
+ <div class="col s12 m4">
<div class="card">
<div class="card-image">
<img src="./img/gallery/jaws.png">
</div>
<div class="card-content">
- <p>Jaws theme. We're gonna need a bigger boat.</p>
+ <p>Marine Board</p>
</div>
<div class="card-action">
<a href="./index.html?background=./img/gallery/boat.jpg&logo=./img/gallery/osmb.png&titleColor=111,166,166,0.7&title=Great%20White%20Shark%20Migratory%20Patterns&category=Feature%20Service&sidebarColor=166,17,3,0.7">Use this theme</a>
</div>
</div>
</div>
+ <div class="col s12 m4">
+ <div class="card">
+ <div class="card-image">
+ <img src="./img/gallery/odot.png">
+ </div>
+ <div class="card-content">
+ <p>Transportation</p>
+ </div>
+ <div class="card-action">
+ <a href="./index.html?title=Transportation%20Cameras&titleColor=57%2C100%2C63%2C0.77&sidebarColor=202%2C210%2C198%2C0.71&category=Feature%20Service&background=./img/gallery/roads.png&logo=./img/gallery/odot_logo.png">Use this theme</a>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="row">
+ <div class="col s12 m4">
+ <div class="card">
+ <div class="card-image">
+ <img src="./img/gallery/odfw.png">
+ </div>
+ <div class="card-content">
+ <p>Fish and Wildlife</p>
+ </div>
+ <div class="card-action">
+ <a href="./index.html?title=Trout%20Stocking%20Locations&titleColor=248%2C204%2C70%2C0.82&sidebarColor=82%2C150%2C66%2C0.77&category=Web%20Map&background=./img/gallery/fishing.png&logo=./img/gallery/odfw_logo.png">Use this theme</a>
+ </div>
+ </div>
+ </div>
</div>
+</div>
</div> <!-- /container -->
help.html 8(+8 -0)
diff --git a/help.html b/help.html
index 16cae16..7b3ad7d 100644
--- a/help.html
+++ b/help.html
@@ -15,6 +15,8 @@
<a href="./index.html" class="brand-logo">ArcGIS Thumbnail Builder</a>
<ul id="nav-mobile" class="right hide-on-med-and-down">
<li><a href="index.html" target="_self">Home</a></li>
+ <li><a href="gallery.html" target="_self">Gallery</a></li>
+ <li><a href="help.html" target="_self">Help</a></li>
</ul>
</div>
</nav>
@@ -53,6 +55,12 @@
</thead>
<tbody>
<tr>
+ <td>title</td>
+ <td>Title Text</td>
+ <td>String</td>
+ <td>Address Points</td>
+ </tr>
+ <tr>
<td>titleColor</td>
<td>Title BG Color</td>
<td>RGBA Color</td>
img/gallery/fishing.png 0(+0 -0)
diff --git a/img/gallery/fishing.png b/img/gallery/fishing.png
new file mode 100644
index 0000000..ab11d3c
Binary files /dev/null and b/img/gallery/fishing.png differ
img/gallery/odfw.png 0(+0 -0)
diff --git a/img/gallery/odfw.png b/img/gallery/odfw.png
new file mode 100644
index 0000000..9a65ef6
Binary files /dev/null and b/img/gallery/odfw.png differ
img/gallery/odfw_logo.png 0(+0 -0)
diff --git a/img/gallery/odfw_logo.png b/img/gallery/odfw_logo.png
new file mode 100644
index 0000000..24d771e
Binary files /dev/null and b/img/gallery/odfw_logo.png differ
img/gallery/odot.png 0(+0 -0)
diff --git a/img/gallery/odot.png b/img/gallery/odot.png
new file mode 100644
index 0000000..da253ab
Binary files /dev/null and b/img/gallery/odot.png differ
img/gallery/odot_logo.png 0(+0 -0)
diff --git a/img/gallery/odot_logo.png b/img/gallery/odot_logo.png
new file mode 100644
index 0000000..4f93ebb
Binary files /dev/null and b/img/gallery/odot_logo.png differ
img/gallery/roads.png 0(+0 -0)
diff --git a/img/gallery/roads.png b/img/gallery/roads.png
new file mode 100644
index 0000000..648b8b9
Binary files /dev/null and b/img/gallery/roads.png differ
index.html 1(+1 -0)
diff --git a/index.html b/index.html
index 96a4672..6b0d3c6 100644
--- a/index.html
+++ b/index.html
@@ -15,6 +15,7 @@
<div class="nav-wrapper">
<a href="./index.html" class="brand-logo">ArcGIS Thumbnail Builder</a>
<ul id="nav-mobile" class="right hide-on-med-and-down">
+ <li><a href="index.html" target="_self">Home</a></li>
<li><a href="gallery.html" target="_self">Gallery</a></li>
<li><a href="help.html" target="_self">Help</a></li>
</ul>
js/editCanvas.js 258(+141 -117)
diff --git a/js/editCanvas.js b/js/editCanvas.js
index f76b382..e65a450 100644
--- a/js/editCanvas.js
+++ b/js/editCanvas.js
@@ -1,121 +1,121 @@
-var editCanvas = document.querySelector("#edit-canvas");
-editCanvas.height = 400;
-editCanvas.width = 600;
+var editCanvas = document.querySelector("#edit-canvas")
+editCanvas.height = 400
+editCanvas.width = 600
-var ctx = editCanvas.getContext('2d');
+var ctx = editCanvas.getContext('2d')
// Title and Title Background
var titleComponent = {
properties: {
- text : function () {
+ text: function () {
return document.querySelector("#title").value
},
bgColor: function () {
- return $("#title-color").colorpicker('getValue');
+ return $("#title-color").colorpicker('getValue')
}
},
draw: function () {
- this._bg();
- this._text();
+ this._bg()
+ this._text()
},
_bg: function () {
- ctx.fillStyle = this.properties.bgColor();
- ctx.fillRect(0,300,500,120);
+ ctx.fillStyle = this.properties.bgColor()
+ ctx.fillRect(0, 300, 500, 120)
},
- _text: function() {
- editCanvas.letterSpacing = 2;
- ctx.fillStyle = 'rgba(255, 255, 255, 1)';
- ctx.font = '30px sans-serif';
- ctx.textAlign = 'center';
- ctx.textBaseline = 'top';
+ _text: function () {
+ editCanvas.letterSpacing = 2
+ ctx.fillStyle = 'rgba(255, 255, 255, 1)'
+ ctx.font = '30px sans-serif'
+ ctx.textAlign = 'center'
+ ctx.textBaseline = 'top'
+
function wrapText(context, text, x, y, maxWidth, lineHeight) {
- var words = text.split(' ');
- var line = '';
+ var words = text.split(' ')
+ var line = ''
- for(var n = 0; n < words.length; n++) {
- var testLine = line + words[n] + ' ';
- var metrics = context.measureText(testLine);
- var testWidth = metrics.width;
+ for (var n = 0; n < words.length; n++) {
+ var testLine = line + words[n] + ' '
+ var metrics = context.measureText(testLine)
+ var testWidth = metrics.width
if (testWidth > maxWidth && n > 0) {
- context.fillText(line, x, y);
- line = words[n] + ' ';
- y += lineHeight;
- }
- else {
- line = testLine;
+ context.fillText(line, x, y)
+ line = words[n] + ' '
+ y += lineHeight
+ } else {
+ line = testLine
}
}
- context.fillText(line, x, y);
+ context.fillText(line, x, y)
}
- wrapText(ctx, this.properties.text(), 255, 326, 450, 35);
+ wrapText(ctx, this.properties.text(), 255, 326, 450, 35)
}
}
// Category and Category Background
var categoryComponent = {
properties: {
- text : function () {
- return document.querySelector('#category').value;
+ text: function () {
+ return document.querySelector('#category').value
},
bgColor: function () {
- return $("#category-color").colorpicker('getValue');
+ return $("#category-color").colorpicker('getValue')
}
},
draw: function () {
- this._bg();
- this._text();
+ this._bg()
+ this._text()
},
_bg: function () {
- ctx.fillStyle = this.properties.bgColor();
- ctx.fillRect(500,0,150,400);
+ ctx.fillStyle = this.properties.bgColor()
+ ctx.fillRect(500, 0, 150, 400)
},
_text: function () {
- ctx.save();
+ ctx.save()
ctx.translate(524, 200)
- ctx.rotate(-0.5*Math.PI);
- editCanvas.style.letterSpacing = 4;
- ctx.fillStyle = 'rgba(255, 255, 255, 0.8)';
- ctx.font = '48px sans-serif';
- ctx.textAlign = "center";
- ctx.fillText(this.properties.text(), 0, 0);
- ctx.restore();
+ ctx.rotate(-0.5 * Math.PI)
+ editCanvas.style.letterSpacing = 4
+ ctx.fillStyle = 'rgba(255, 255, 255, 0.8)'
+ ctx.font = '48px sans-serif'
+ ctx.textAlign = "center"
+ ctx.fillText(this.properties.text(), 0, 0)
+ ctx.restore()
}
}
// Background Image
var backgroundComponent = {
properties: {
- domId: "#background",
+ domId: "#background"
},
draw: function () {
- this._addImage();
+ this._addImage()
},
_addImage: function () {
- var file = document.querySelector(this.properties.domId).files[0];
+ var file = document.querySelector(this.properties.domId).files[0]
- var background = new Image();
- background.crossOrigin = "Anonymous";
- var reader = new FileReader();
+ var background = new Image()
+ background.crossOrigin = "Anonymous"
+ var reader = new FileReader()
background.onload = function () {
- sourceHeight = background.height;
- sourceWidth = background.width;
- ctx.globalCompositeOperation = 'destination-over';
+ sourceHeight = background.height
+ sourceWidth = background.width
+ ctx.globalCompositeOperation = 'destination-over'
ctx.drawImage(background, 0, 0, sourceWidth, sourceHeight,
- 0, 0, 600, 400);
- ctx.globalCompositeOperation = 'source-over';
+ 0, 0, 600, 400)
+ ctx.globalCompositeOperation = 'source-over'
}
- if(file) {
+ if (file) {
reader.addEventListener("load", function () {
- background.src = reader.result;
- }, false);
+ background.src = reader.result
+ }, false)
- reader.readAsDataURL(file);
+ reader.readAsDataURL(file)
}
- if(!file && document.querySelector('#background-url').value !== '') {
- background.src = document.querySelector('#background-url').value;
+ if (!file && document.querySelector('#background-url').value !== '') {
+ background.src = document.querySelector('#background-url').value
}
}
}
@@ -127,32 +127,32 @@ var logoComponent = {
domId: "#logo",
},
draw: function () {
- this._addImage();
+ this._addImage()
},
_addImage: function () {
- var file = document.querySelector(this.properties.domId).files[0];
- var background = new Image();
- background.crossOrigin = "Anonymous";
- var reader = new FileReader();
+ var file = document.querySelector(this.properties.domId).files[0]
+ var background = new Image()
+ background.crossOrigin = "Anonymous"
+ var reader = new FileReader()
background.onload = function () {
- sourceHeight = background.height;
- sourceWidth = background.width;
+ sourceHeight = background.height
+ sourceWidth = background.width
ctx.drawImage(background, 0, 0, sourceWidth, sourceHeight,
- 5, 5, 145, 145);
+ 5, 5, 145, 145)
}
- if(file) {
+ if (file) {
reader.addEventListener("load", function () {
- background.src = reader.result;
- }, false);
+ background.src = reader.result
+ }, false)
- reader.readAsDataURL(file);
+ reader.readAsDataURL(file)
}
- if(!file && document.querySelector('#logo-url').value !== '') {
- background.src = document.querySelector('#logo-url').value;
+ if (!file && document.querySelector('#logo-url').value !== '') {
+ background.src = document.querySelector('#logo-url').value
}
}
}
@@ -160,82 +160,106 @@ var logoComponent = {
// main function to draw / redraw canvas
function draw() {
//Draw Title Component
- ctx.clearRect(0, 0, editCanvas.width, editCanvas.height);
- titleComponent.draw();
- categoryComponent.draw();
- backgroundComponent.draw();
- logoComponent.draw();
+ ctx.clearRect(0, 0, editCanvas.width, editCanvas.height)
+ titleComponent.draw()
+ categoryComponent.draw()
+ backgroundComponent.draw()
+ logoComponent.draw()
//Store to local storage.. next
}
-document.addEventListener('DOMContentLoaded', function() {
+document.addEventListener('DOMContentLoaded', function () {
// Color Picker
$('#title-color').colorpicker({
- component: '.btn'
+ component: '.btn'
}).on('changeColor', draw)
$('#category-color').colorpicker({
- component: '.btn'
+ component: '.btn'
}).on('changeColor', draw)
// Update Events
- document.querySelector('#title').addEventListener('keyup', draw);
- document.querySelector('#category').addEventListener('change', draw);
+ document.querySelector('#title').addEventListener('keyup', draw)
+ document.querySelector('#category').addEventListener('change', draw)
document.querySelector('#background')
- .addEventListener('change', draw);
+ .addEventListener('change', draw)
document.querySelector('#logo')
- .addEventListener('change', draw);
+ .addEventListener('change', draw)
// Any Query Params?
- if(getUrlParameter('titleColor')) {
+ if (getUrlParameter('titleColor')) {
$("#title-color")
- .colorpicker('setValue', 'rgba(' + getUrlParameter('titleColor') + ')');
+ .colorpicker('setValue', 'rgba(' + getUrlParameter('titleColor') + ')')
}
- if(getUrlParameter('sidebarColor')) {
+ if (getUrlParameter('sidebarColor')) {
$("#category-color")
- .colorpicker('setValue', 'rgba(' + getUrlParameter('sidebarColor') + ')');
+ .colorpicker('setValue', 'rgba(' + getUrlParameter('sidebarColor') + ')')
}
- if(getUrlParameter('title')) {
+ if (getUrlParameter('title')) {
$("#title").val(getUrlParameter('title'))
}
- if(getUrlParameter('category')) {
+ if (getUrlParameter('category')) {
$("#category option").each(function (i, opt) {
- if($(opt).val().toLowerCase() == getUrlParameter('category').toLowerCase()) {
+ if ($(opt).val().toLowerCase() == getUrlParameter('category').toLowerCase()) {
$(opt).attr('selected', true)
}
})
}
- if(getUrlParameter('background')) {
- $("#background-url").val(getUrlParameter('background'));
+ if (getUrlParameter('background')) {
+ $("#background-url").val(getUrlParameter('background'))
}
- if(getUrlParameter('logo')) {
- $("#logo-url").val(getUrlParameter('logo'));
+ if (getUrlParameter('logo')) {
+ $("#logo-url").val(getUrlParameter('logo'))
}
// Select Dropdowns to Material Styles
- var elems = document.querySelectorAll('select');
- instances = M.FormSelect.init(elems);
+ var elems = document.querySelectorAll('select')
+ instances = M.FormSelect.init(elems)
- draw();
+ draw()
document.querySelector('#download-image').addEventListener('click', function () {
//to png
- var img = document.createElement('img');
- img.src = editCanvas.toDataURL();
- var a = document.createElement('a');
- a.href = img.src;
- a.download = 'thumbnail.png';
- document.body.appendChild(a);
- a.click();
- document.body.removeChild(a);
- });
-});
+ var img = document.createElement('img')
+ img.src = editCanvas.toDataURL()
+ var a = document.createElement('a')
+ a.href = img.src
+ a.download = 'thumbnail.png'
+ document.body.appendChild(a)
+ a.click()
+ document.body.removeChild(a)
+ })
+})
// Helper function to get URL Query Params
function getUrlParameter(name) {
- name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');
- var regex = new RegExp('[\\?&]' + name + '=([^&#]*)');
- var results = regex.exec(location.search);
- return results === null ? false : decodeURIComponent(results[1].replace(/\+/g, ' '));
-};
+ name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]')
+ var regex = new RegExp('[\\?&]' + name + '=([^&#]*)')
+ var results = regex.exec(location.search)
+ return results === null ? false : decodeURIComponent(results[1].replace(/\+/g, ' '))
+}
+
+// Hidden function for users to generate a shareable URL
+var developer = {}
+developer.getShareUrl = function () {
+ var params = {}
+ params.title = titleComponent.properties.text()
+ params.titleColor = titleComponent.properties.bgColor().replace(/(rgba|\(|\))/g, '')
+ params.sidebarColor = categoryComponent.properties.bgColor().replace(/(rgba|\(|\))/g, '')
+ params.category = categoryComponent.properties.text()
+ // background and logo will need base64
+
+ return window.location.origin + window.location.pathname + '?' + generateQueryParams(params)
+
+ function generateQueryParams(obj) {
+ var str = ""
+ for (var key in obj) {
+ if (str != "") {
+ str += "&"
+ }
+ str += key + "=" + encodeURIComponent(obj[key])
+ }
+ return str
+ }
+}
\ No newline at end of file