From 6557cc05109d3ee01204b98e3487a4b4b358e26e Mon Sep 17 00:00:00 2001 From: Muskan Date: Sat, 9 Apr 2022 22:55:07 +0530 Subject: [PATCH 1/2] Moved Q&A section to HELP Menu --- .github/config.yml | 24 +- .github/indexm.html | 22 + .github/stylem.css | 19 + dist/infragram.css | 170 +- dist/infragram.js | 4451 +++++++++++--------- dragndrop.js | 67 + help.html | 56 + index.html | 518 ++- package-lock.json | 9467 +------------------------------------------ pi/dragndrop.js | 71 + pi/index.html | 448 +- spam.html | 547 +++ style.css | 47 + 13 files changed, 4215 insertions(+), 11692 deletions(-) create mode 100644 .github/indexm.html create mode 100644 .github/stylem.css create mode 100644 dragndrop.js create mode 100644 help.html create mode 100644 pi/dragndrop.js create mode 100644 spam.html create mode 100644 style.css diff --git a/.github/config.yml b/.github/config.yml index ec4955e9..2562508e 100644 --- a/.github/config.yml +++ b/.github/config.yml @@ -7,23 +7,21 @@ newIssueWelcomeComment: | Thanks for opening your first issue here! Please follow the issue template to help us help you 👍🎉😄 If you have screenshots to share demonstrating the issue, that's really helpful! 📸 You can [make a gif](https://www.cockos.com/licecap/) too! # Configuration for new-pr-welcome - https://github.com/behaviorbot/new-pr-welcome - # Comment to be posted on PRs from first time contributors in your repository newPRWelcomeComment: | - Thanks for opening this pull request! This space is [protected by our Code of Conduct](https://publiclab.org/conduct) - and we're here to help. - `Dangerbot` will test out your code and reply in a bit with some pointers and requests. - There may be some errors, **but don't worry!** We'll work through them with you! 👍🎉😄 -
- One thing that can help to get started is to make sure you've included a link back to the original issue you're solving, in the format `fixes #0000` (for example). And to make sure the PR title describes what you're trying to do! (often it can be the same as the issue title) Thanks! 🙌 -
- Then, you can [say hello in our chatroom](https://gitter.im/publiclab/publiclab) & share a link to this PR to get a review! 👋 ✅ + Thanks for opening this pull request! This space is [protected by our Code of Conduct](https://publiclab.org/conduct) - and we're here to help. + `Dangerbot` will test out your code and reply in a bit with some pointers and requests. + There may be some errors, **but don't worry!** We'll work through them with you! 👍🎉😄 +
+ One thing that can help to get started is to make sure you've included a link back to the original issue you're solving, in the format `fixes #0000` (for example). And to make sure the PR title describes what you're trying to do! (often it can be the same as the issue title) Thanks! 🙌 +
+ Then, you can [say hello in our chatroom](https://gitter.im/publiclab/publiclab) & share a link to this PR to get a review! 👋 ✅ # Configuration for first-pr-merge - https://github.com/behaviorbot/first-pr-merge - # Comment to be posted on pull requests merged by a first time user firstPRMergeComment: | - Congrats on merging your first pull request! 🙌🎉⚡️ - Your code will likely be published to http://infragram.org in the next few days. - Now that you've completed this, you can help someone else take their first step! - See: [Public Lab's coding community!](https://code.publiclab.org) + Congrats on merging your first pull request! 🙌🎉⚡️ + Your code will likely be published to http://infragram.org in the next few days. + Now that you've completed this, you can help someone else take their first step! + See: [Public Lab's coding community!](https://code.publiclab.org) # It is recommended to include as many gifs and emojis as possible diff --git a/.github/indexm.html b/.github/indexm.html new file mode 100644 index 00000000..fdb82f70 --- /dev/null +++ b/.github/indexm.html @@ -0,0 +1,22 @@ + + + + + + + Drag and Drop + + + + + + +
+
+ Drop file here or click to upload + +
+
+ + + \ No newline at end of file diff --git a/.github/stylem.css b/.github/stylem.css new file mode 100644 index 00000000..5fb4c6ff --- /dev/null +++ b/.github/stylem.css @@ -0,0 +1,19 @@ +#image-container{ + max-width: 200px; + height: 200px; + padding: 25px; + display: flex; + align-items: center; + justify-content: center; + text-align: center; + font-family: "Quicksand", sans-serif; + font-weight: 500; + font-size: 20px; + cursor: pointer; + color: #cccccc; + border: 4px dashed #009578; + border-radius: 10px; +} +.drop-zone__input { + display: none; +} \ No newline at end of file diff --git a/dist/infragram.css b/dist/infragram.css index bbcd08f8..e51d7988 100644 --- a/dist/infragram.css +++ b/dist/infragram.css @@ -1,120 +1,162 @@ /* https://github.com/theleagueof/junction */ @font-face { - font-family:'junctionregular'; - src:url("https://raw.githubusercontent.com/theleagueof/junction/master/_webfonts/junction-webfont.eot"); - src:url("https://raw.githubusercontent.com/theleagueof/junction/master/_webfonts/junction-webfont.eot?#iefix") format("embedded-opentype"), - url("https://raw.githubusercontent.com/theleagueof/junction/master/_webfonts/junction-webfont.woff") format("woff"), - url("https://raw.githubusercontent.com/theleagueof/junction/master/_webfonts/junction-webfont.ttf") format("truetype"), - url("https://raw.githubusercontent.com/theleagueof/junction/master/_webfonts/junction-webfont.svg#junctionregular") format("svg"); + font-family: "junctionregular"; + src: url("https://raw.githubusercontent.com/theleagueof/junction/master/_webfonts/junction-webfont.eot"); + src: url("https://raw.githubusercontent.com/theleagueof/junction/master/_webfonts/junction-webfont.eot?#iefix") + format("embedded-opentype"), + url("https://raw.githubusercontent.com/theleagueof/junction/master/_webfonts/junction-webfont.woff") + format("woff"), + url("https://raw.githubusercontent.com/theleagueof/junction/master/_webfonts/junction-webfont.ttf") + format("truetype"), + url("https://raw.githubusercontent.com/theleagueof/junction/master/_webfonts/junction-webfont.svg#junctionregular") + format("svg"); } -h1,h2,h3,h4,h5,h6{ - font-family: junctionregular, "lucida grande", "lucida sans console", sans-serif; - font-weight:normal +h1, +h2, +h3, +h4, +h5, +h6 { + font-family: junctionregular, "lucida grande", "lucida sans console", + sans-serif; + font-weight: normal; } -body { padding-top: 20px; } -span.group { display: inline-block; } +body { + padding-top: 20px; +} +span.group { + display: inline-block; +} footer.footer { - clear: both; - padding-top: 10px; + clear: both; + padding-top: 10px; } div#image-container { - text-align: center; + text-align: center; } div#image-container canvas#image { - margin: 0px auto; + margin: 0px auto; } div#colorbar-container { - display: inline-block; - width: 70%; + display: inline-block; + width: 70%; } div#colorbar-container canvas#colorbar { - width: 80%; - height: 2em; - vertical-align: middle; + width: 80%; + height: 2em; + vertical-align: middle; } #toolbar { - clear:both; - background:#eee; - margin-bottom:10px; + clear: both; + background: #eee; + margin-bottom: 10px; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; - } #toolbar .zone { - margin:6px 0 6px 6px; - padding:0 12px 0 6px; - border-right:1px solid #ddd; - float:left; + margin: 6px 0 6px 6px; + padding: 0 12px 0 6px; + border-right: 1px solid #ddd; + float: left; } #toolbar .zone.last { - border:none; + border: none; } #toolbar .zone p { - color:#bbb; - font-weight:bold; - font-size:10px; - margin-bottom:0; + color: #bbb; + font-weight: bold; + font-size: 10px; + margin-bottom: 0; } #image { - background:#ddd; - width:800px; - height:600px; + background: #ddd; + width: 800px; + height: 600px; } -@media (max-width: 700px){ +@media (max-width: 700px) { #image { - width:100%; - height:auto; + width: 100%; + height: auto; } } #overlay-container { - position:absolute; - display: inline-block; - overflow:hidden; - width:800px; - height:600px; + position: absolute; + display: inline-block; + overflow: hidden; + width: 800px; + height: 600px; } #overlay-save-btn { - margin-top:2px; + margin-top: 2px; } -#overlay-img { - opacity:0.5; +#-img { + opacity: 0.5; } -ul.dropdown-menu li:hover{ +ul.dropdown-menu li:hover { cursor: pointer; background-color: #e0e0e0; } #file-sel { - position:absolute; - left:0; - width:55px; - height:44px; - opacity:0; + position: absolute; + left: 0; + width: 55px; + height: 44px; + opacity: 0; } .vr #toolbar { - position:absolute; - left:0; - top:0; - width:100%; - z-index:99; + position: absolute; + left: 0; + top: 0; + width: 100%; + z-index: 99; } .vr .canvas { - width:50% !important; - height:100% !important; - left:0; - top:100px; - position:absolute; -} \ No newline at end of file + width: 50% !important; + height: 100% !important; + left: 0; + top: 100px; + position: absolute; +} +#helping_hands { + border-color: #2e6da4; + background-color: #337ab7; /* Green */ + border: none; + color: white; + padding: 12px 30px; + text-align: center; + text-decoration: none; + display: inline-block; + font-size: 16px; + display: inline-block; + margin-bottom: 10; + font-weight: 400; + text-align: center; + white-space: nowrap; + vertical-align: middle; + touch-action: manipulation; + cursor: pointer; + background-image: none; + border: 1px solid transparent; + border-radius: 4px; + margin-top: 20px; + margin-left: 10px; + /*padding: 6px 12px; + font-size: 14px; + line-height: 1.42857143; + + margin-top: 10; +} diff --git a/dist/infragram.js b/dist/infragram.js index eae35d60..e2a1f73b 100644 --- a/dist/infragram.js +++ b/dist/infragram.js @@ -1,12 +1,61 @@ -function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } - -function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } - -function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; } - -function _sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } - -function _slicedToArray(arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return _sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } } +function _classCallCheck(instance, Constructor) { + if (!(instance instanceof Constructor)) { + throw new TypeError("Cannot call a class as a function"); + } +} + +function _defineProperties(target, props) { + for (var i = 0; i < props.length; i++) { + var descriptor = props[i]; + descriptor.enumerable = descriptor.enumerable || false; + descriptor.configurable = true; + if ("value" in descriptor) descriptor.writable = true; + Object.defineProperty(target, descriptor.key, descriptor); + } +} + +function _createClass(Constructor, protoProps, staticProps) { + if (protoProps) _defineProperties(Constructor.prototype, protoProps); + if (staticProps) _defineProperties(Constructor, staticProps); + return Constructor; +} + +function _sliceIterator(arr, i) { + var _arr = []; + var _n = true; + var _d = false; + var _e = undefined; + try { + for ( + var _i = arr[Symbol.iterator](), _s; + !(_n = (_s = _i.next()).done); + _n = true + ) { + _arr.push(_s.value); + if (i && _arr.length === i) break; + } + } catch (err) { + _d = true; + _e = err; + } finally { + try { + if (!_n && _i["return"] != null) _i["return"](); + } finally { + if (_d) throw _e; + } + } + return _arr; +} + +function _slicedToArray(arr, i) { + if (Array.isArray(arr)) { + return arr; + } else if (Symbol.iterator in Object(arr)) { + return _sliceIterator(arr, i); + } else { + throw new TypeError("Invalid attempt to destructure non-iterable instance"); + } +} (function () { function r(e, n, t) { @@ -17,22 +66,35 @@ function _slicedToArray(arr, i) { if (Array.isArray(arr)) { return arr; } else i if (!f && c) return c(i, !0); if (u) return u(i, !0); var a = new Error("Cannot find module '" + i + "'"); - throw a.code = "MODULE_NOT_FOUND", a; + throw ((a.code = "MODULE_NOT_FOUND"), a); } - var p = n[i] = { - exports: {} - }; - e[i][0].call(p.exports, function (r) { - var n = e[i][1][r]; - return o(n || r); - }, p, p.exports, r, e, n, t); + var p = (n[i] = { + exports: {}, + }); + e[i][0].call( + p.exports, + function (r) { + var n = e[i][1][r]; + return o(n || r); + }, + p, + p.exports, + r, + e, + n, + t + ); } return n[i].exports; } - for (var u = "function" == typeof require && require, i = 0; i < t.length; i++) { + for ( + var u = "function" == typeof require && require, i = 0; + i < t.length; + i++ + ) { o(t[i]); } @@ -40,2113 +102,2584 @@ function _slicedToArray(arr, i) { if (Array.isArray(arr)) { return arr; } else i } return r; -})()({ - 1: [function (require, module, exports) { - function urlHash() { - function getUrlHashParameter(param) { - var params = getUrlHashParameters(); - return params[param]; - } - - function getUrlHashParameters() { - var sPageURL = window.location.hash; - if (sPageURL) sPageURL = sPageURL.split('#')[1]; - var pairs = sPageURL.split('&'); - var object = {}; - pairs.forEach(function (pair, i) { - pair = pair.split('='); - if (pair[0] != '') object[pair[0]] = pair[1]; - }); - return object; - } // accepts an object like { paramName: value, paramName1: value } - // and transforms to: url.com#paramName=value¶mName1=value - - - function setUrlHashParameters(params) { - var keys = Object.keys(params); - var values = Object.values(params); - var pairs = []; - keys.forEach(function (key, i) { - if (key != '') pairs.push(keys[i] + '=' + values[i]); - }); - var hash = pairs.join('&'); - window.location.hash = hash; - } - - function setUrlHashParameter(param, value) { - var params = getUrlHashParameters(); - params[param] = value; - setUrlHashParameters(params); - } - - return { - getUrlHashParameter: getUrlHashParameter, - getUrlHashParameters: getUrlHashParameters, - setUrlHashParameter: setUrlHashParameter, - setUrlHashParameters: setUrlHashParameters - }; - } - - module.exports = urlHash; - }, {}], - 2: [function (require, module, exports) { - window.Infragram = function Infragram(options) { - options = options || {}; - options.uploader = options.uploader || false; - options.processor = options.processor || 'javascript'; - options.camera = require('./io/camera')(options); - options.colorized = options.colorized || false; - options.mode = options.mode || "raw", options.video_live = options.video_live || false, options.webGlSupported = options.webGlSupported || false; // move into processor - - options.processors = { - 'webgl': require('./processors/webgl'), - 'javascript': require('./processors/javascript') - }; - options.processor = options.processors[options.processor](options); - options.file = require('./io/file')(options, options.processor); - options.logger = require('./logger')(options); - - var Interface = require('./ui/interface')(options); // this can change processor based on URL hash - //options.processor.initialize(options); // double initialize after end of processor code? - - - console.log('processor:', options.processor.type); - - options.colorize = function colorize(map) { - options.processor.colorize(map); - }; // this should accept an object with parameters r,g,b,h,s,v,m and mode - - - options.run = function run(mode) { - options.logger.save_log(); - return options.processor.run(mode); - }; // split into processor.video() methods - - - options.video = function video() { - options.camera.initialize(); - var interval; - if (options.processor.type == "webgl") interval = 15;else interval = 150; - setInterval(function () { - if (image) options.run(options.mode); - options.camera.getSnapshot(); //if (options.colorized) return options.colorize(); - }, interval); - }; // TODO: this doesn't work; it just downloads the unmodified image. - // probably a timing issue? - - - function download() { - //options.run(options.mode); - //if (options.colorized) return options.colorize(); - options.file.downloadImage(); - } - - return { - Camera: options.camera, - Interface: Interface, - logger: options.logger, - run: options.run, - colorize: options.colorize, - processors: options.processors, - download: download, - options: options - }; - }; - - module.exports = Infragram; - }, { - "./io/camera": 7, - "./io/file": 8, - "./logger": 9, - "./processors/javascript": 10, - "./processors/webgl": 11, - "./ui/interface": 15 - }], - 3: [function (require, module, exports) { - module.exports = function segmented_colormap(segments) { - return function (x) { - var i, l, len, m, ref, result, x0, x1, xstart, y0, y1; - y0 = 0; - y1 = 0; - var _ref = [segments[0][0], 1]; - x0 = _ref[0]; - x1 = _ref[1]; - - if (x < x0) { - return y0; - } - - for (i = l = 0, len = segments.length; l < len; i = ++l) { - var _segments$i = _slicedToArray(segments[i], 3); - - xstart = _segments$i[0]; - y0 = _segments$i[1]; - y1 = _segments$i[2]; - x0 = xstart; - - if (i === segments.length - 1) { - x1 = 1; - break; +})()( + { + 1: [ + function (require, module, exports) { + function urlHash() { + function getUrlHashParameter(param) { + var params = getUrlHashParameters(); + return params[param]; } - x1 = segments[i + 1][0]; - - if (xstart <= x && x < x1) { - break; + function getUrlHashParameters() { + var sPageURL = window.location.hash; + if (sPageURL) sPageURL = sPageURL.split("#")[1]; + var pairs = sPageURL.split("&"); + var object = {}; + pairs.forEach(function (pair, i) { + pair = pair.split("="); + if (pair[0] != "") object[pair[0]] = pair[1]; + }); + return object; + } // accepts an object like { paramName: value, paramName1: value } + // and transforms to: url.com#paramName=value¶mName1=value + + function setUrlHashParameters(params) { + var keys = Object.keys(params); + var values = Object.values(params); + var pairs = []; + keys.forEach(function (key, i) { + if (key != "") pairs.push(keys[i] + "=" + values[i]); + }); + var hash = pairs.join("&"); + window.location.hash = hash; } - } - result = []; + function setUrlHashParameter(param, value) { + var params = getUrlHashParameters(); + params[param] = value; + setUrlHashParameters(params); + } - for (i = m = 0, ref = y0.length; 0 <= ref ? m < ref : m > ref; i = 0 <= ref ? ++m : --m) { - result[i] = (x - x0) / (x1 - x0) * (y1[i] - y0[i]) + y0[i]; + return { + getUrlHashParameter: getUrlHashParameter, + getUrlHashParameters: getUrlHashParameters, + setUrlHashParameter: setUrlHashParameter, + setUrlHashParameters: setUrlHashParameters, + }; } - return result; - }; - }; - }, {}], - 4: [function (require, module, exports) { - module.exports = { - "greyscale": { - "author": "publiclab", - "description": "A simple linear greyscale colormap, black to white.", - "url": "https://publiclab.org/colormaps#greyscale", - "colormapRanges": [[0, [0, 0, 0], [255, 255, 255]], [1, [255, 255, 255], [255, 255, 255]]] - }, - "default": { - "author": "publiclab", - "description": "A full-colorwheel colormap, covering the colors in the spectrum.", - "url": "https://publiclab.org/colormaps#default", - "colormapRanges": [[0, [45, 1, 121], [25, 1, 137]], [0.125, [25, 1, 137], [0, 6, 156]], [0.1875, [0, 6, 156], [7, 41, 172]], [0.25, [7, 41, 172], [22, 84, 187]], [0.3125, [22, 84, 187], [25, 125, 194]], [0.375, [25, 125, 194], [26, 177, 197]], [0.4375, [26, 177, 197], [23, 199, 193]], [0.47, [23, 199, 193], [25, 200, 170]], [0.50, [25, 200, 170], [21, 209, 27]], [0.5625, [21, 209, 27], [108, 215, 18]], [0.625, [108, 215, 18], [166, 218, 19]], [0.6875, [166, 218, 19], [206, 221, 20]], [0.75, [206, 221, 20], [222, 213, 19]], [0.7813, [222, 213, 19], [222, 191, 19]], [0.8125, [222, 191, 19], [227, 133, 17]], [0.875, [227, 133, 17], [231, 83, 16]], [0.9375, [231, 83, 16], [220, 61, 48]]] + module.exports = urlHash; }, - "stretched": { - "author": "publiclab", - "description": "A simple colormap from blue to red, with no purple overlap.", - "url": "https://publiclab.org/colormaps#stretched", - "colormapRanges": [[0, [0, 0, 255], [0, 0, 255]], [0.1, [0, 0, 255], [38, 195, 195]], [0.5, [0, 150, 0], [255, 255, 0]], [0.7, [255, 255, 0], [255, 50, 50]], [0.9, [255, 50, 50], [255, 50, 50]]] - }, - "bluwhtgrngis": { - "author": "MaggPi", - "description": "A colormap from blue to white to green to....", - "url": "https://publiclab.org/colormaps#bluwhtgrngis", - "colormapRanges": [[0, [6, 23, 86], [6, 25, 84]], [0.0625, [6, 25, 84], [6, 25, 84]], [0.125, [6, 25, 84], [6, 25, 84]], [0.1875, [6, 25, 84], [6, 25, 84]], [0.25, [6, 25, 84], [6, 25, 84]], [0.3125, [6, 25, 84], [9, 24, 84]], [0.3438, [9, 24, 84], [119, 120, 162]], [0.375, [119, 129, 162], [249, 250, 251]], [0.406, [249, 250, 251], [255, 255, 255]], [0.4375, [255, 255, 255], [255, 255, 255]], [0.50, [255, 255, 255], [214, 205, 191]], [0.52, [214, 205, 191], [178, 175, 96]], [0.5625, [178, 175, 96], [151, 176, 53]], [0.593, [151, 176, 53], [146, 188, 12]], [0.625, [146, 188, 12], [96, 161, 1]], [0.6875, [96, 161, 1], [30, 127, 3]], [0.75, [30, 127, 3], [0, 99, 1]], [0.8125, [0, 99, 1], [0, 74, 1]], [0.875, [0, 74, 1], [0, 52, 0]], [0.9375, [0, 52, 0], [0, 34, 0]], [0.968, [0, 34, 0], [68, 70, 67]]] - }, - "brntogrn": { - "author": "MaggPi", - "description": "A colormap from brown to green.", - "url": "https://publiclab.org/colormaps#brntogrn", - "colormapRanges": [[0, [110, 12, 3], [118, 6, 1]], [0.0625, [118, 6, 1], [141, 19, 6]], [0.125, [141, 19, 6], [165, 35, 13]], [0.1875, [165, 35, 13], [177, 59, 25]], [0.2188, [177, 59, 25], [192, 91, 36]], [0.25, [192, 91, 36], [214, 145, 76]], [0.3125, [214, 145, 76], [230, 183, 134]], [0.375, [230, 183, 134], [243, 224, 194]], [0.4375, [243, 224, 194], [250, 252, 229]], [0.50, [250, 252, 229], [217, 235, 185]], [0.5625, [217, 235, 185], [184, 218, 143]], [0.625, [184, 218, 143], [141, 202, 89]], [0.6875, [141, 202, 89], [80, 176, 61]], [0.75, [80, 176, 61], [0, 147, 32]], [0.8125, [0, 147, 32], [1, 122, 22]], [0.875, [1, 122, 22], [0, 114, 19]], [0.90, [0, 114, 19], [0, 105, 18]], [0.9375, [0, 105, 18], [7, 70, 14]]] - }, - "blutoredjet": { - "author": "MaggPi", - "description": "A colormap from blue to red.", - "url": "https://publiclab.org/colormaps#blutoredjet", - "colormapRanges": [[0, [0, 0, 140], [1, 1, 186]], [0.0625, [1, 1, 186], [0, 1, 248]], [0.125, [0, 1, 248], [0, 70, 254]], [0.1875, [0, 70, 254], [0, 130, 255]], [0.25, [0, 130, 255], [2, 160, 255]], [0.2813, [2, 160, 255], [0, 187, 255]], [0.3125, [0, 187, 255], [6, 250, 255]], [0.348, [0, 218, 255], [8, 252, 251]], [0.375, [8, 252, 251], [27, 254, 228]], [0.406, [27, 254, 228], [70, 255, 187]], [0.4375, [70, 255, 187], [104, 254, 151]], [0.47, [104, 254, 151], [132, 255, 19]], [0.50, [132, 255, 19], [195, 255, 60]], [0.5625, [195, 255, 60], [231, 254, 25]], [0.5976, [231, 254, 25], [253, 246, 1]], [0.625, [253, 246, 1], [252, 210, 1]], [0.657, [252, 210, 1], [255, 183, 0]], [0.6875, [255, 183, 0], [255, 125, 2]], [0.75, [255, 125, 2], [255, 65, 1]], [0.8125, [255, 65, 1], [247, 1, 1]], [0.875, [247, 1, 1], [200, 1, 3]], [0.9375, [200, 1, 3], [122, 3, 2]]] + {}, + ], + 2: [ + function (require, module, exports) { + window.Infragram = function Infragram(options) { + options = options || {}; + options.uploader = options.uploader || false; + options.processor = options.processor || "javascript"; + options.camera = require("./io/camera")(options); + options.colorized = options.colorized || false; + (options.mode = options.mode || "raw"), + (options.video_live = options.video_live || false), + (options.webGlSupported = options.webGlSupported || false); // move into processor + + options.processors = { + webgl: require("./processors/webgl"), + javascript: require("./processors/javascript"), + }; + options.processor = options.processors[options.processor](options); + options.file = require("./io/file")(options, options.processor); + options.logger = require("./logger")(options); + + var Interface = require("./ui/interface")(options); // this can change processor based on URL hash + //options.processor.initialize(options); // double initialize after end of processor code? + + console.log("processor:", options.processor.type); + + options.colorize = function colorize(map) { + options.processor.colorize(map); + }; // this should accept an object with parameters r,g,b,h,s,v,m and mode + + options.run = function run(mode) { + options.logger.save_log(); + return options.processor.run(mode); + }; // split into processor.video() methods + + options.video = function video() { + options.camera.initialize(); + var interval; + if (options.processor.type == "webgl") interval = 15; + else interval = 150; + setInterval(function () { + if (image) options.run(options.mode); + options.camera.getSnapshot(); //if (options.colorized) return options.colorize(); + }, interval); + }; // TODO: this doesn't work; it just downloads the unmodified image. + // probably a timing issue? + + function download() { + //options.run(options.mode); + //if (options.colorized) return options.colorize(); + options.file.downloadImage(); + } + + return { + Camera: options.camera, + Interface: Interface, + logger: options.logger, + run: options.run, + colorize: options.colorize, + processors: options.processors, + download: download, + options: options, + }; + }; + + module.exports = Infragram; }, - "colors16": { - "author": "publiclab", - "description": "A segmented colormap of the full color spectrum, divided into 16 colors.", - "url": "https://publiclab.org/colormaps#colors16", - "colormapRanges": [[0, [0, 0, 0], [0, 0, 0]], [0.0625, [3, 1, 172], [3, 1, 172]], [0.125, [3, 1, 222], [3, 1, 222]], [0.1875, [0, 111, 255], [0, 111, 255]], [0.25, [3, 172, 255], [3, 172, 255]], [0.3125, [1, 226, 255], [1, 226, 255]], [0.375, [2, 255, 0], [2, 255, 0]], [0.4375, [198, 254, 0], [190, 254, 0]], [0.50, [252, 255, 0], [252, 255, 0]], [0.5625, [255, 223, 3], [255, 223, 3]], [0.625, [255, 143, 3], [255, 143, 3]], [0.6875, [255, 95, 3], [255, 95, 3]], [0.75, [242, 0, 1], [242, 0, 1]], [0.8125, [245, 0, 170], [245, 0, 170]], [0.875, [223, 180, 225], [223, 180, 225]], [0.9375, [255, 255, 255], [255, 255, 255]]] + { + "./io/camera": 7, + "./io/file": 8, + "./logger": 9, + "./processors/javascript": 10, + "./processors/webgl": 11, + "./ui/interface": 15, }, - "fastie": { - "author": "cfastie", - "description": "A colormap for highlighting NDVI values over 0 on a scale from -1 to 1; in this scale, values from 0-0.5 are greyscale, while those over 0.5 are color.", - "url": "https://publiclab.org/colormaps#fastie", - "colormapRanges": [[0, [255, 255, 255], [0, 0, 0]], [0.167, [0, 0, 0], [255, 255, 255]], [0.33, [255, 255, 255], [0, 0, 0]], [0.5, [0, 0, 0], [140, 140, 255]], [0.55, [140, 140, 255], [0, 255, 0]], [0.63, [0, 255, 0], [255, 255, 0]], [0.75, [255, 255, 0], [255, 0, 0]], [0.95, [255, 0, 0], [255, 0, 255]]] - } - }; - }, {}], - 5: [function (require, module, exports) { - // This file was adapted from infragram-js: - // http://github.com/p-v-o-s/infragram-js. - module.exports = function Colormaps(options) { - // see https://github.com/publiclab/image-sequencer/tree/main/src/modules/Colormap/ - var colormapFunctionGenerator = require('./colormapFunctionGenerator.js'); - - var colormaps = require('./colormaps.json'); - - Object.keys(colormaps).forEach(function (key) { - // make a function from the colormap, which we can't easily do in JSON - colormaps[key].fn = colormapFunctionGenerator(colormaps[key].colormapRanges); - }); - - var JsImage = require('../util/JsImage.js'); - - function colorify(jsImage, colormap) { - var b, data, g, i, j, l, n, r, ref; - $('#btn-colorize').addClass('active'); - n = jsImage.width * jsImage.height; - data = new Uint8ClampedArray(4 * n); - j = 0; - - for (i = l = 0, ref = n; 0 <= ref ? l < ref : l > ref; i = 0 <= ref ? ++l : --l) { - var _colormap = colormap(jsImage.data[i]); - - var _colormap2 = _slicedToArray(_colormap, 3); - - r = _colormap2[0]; - g = _colormap2[1]; - b = _colormap2[2]; - data[j++] = r; - data[j++] = g; - data[j++] = b; - data[j++] = 255; - } + ], + 3: [ + function (require, module, exports) { + module.exports = function segmented_colormap(segments) { + return function (x) { + var i, l, len, m, ref, result, x0, x1, xstart, y0, y1; + y0 = 0; + y1 = 0; + var _ref = [segments[0][0], 1]; + x0 = _ref[0]; + x1 = _ref[1]; + + if (x < x0) { + return y0; + } - return new JsImage(data, jsImage.width, jsImage.height, 4); - } + for (i = l = 0, len = segments.length; l < len; i = ++l) { + var _segments$i = _slicedToArray(segments[i], 3); - return { - colorify: colorify, - colormap1: colormaps['default'].fn, - colormap2: colormaps['stretched'].fn, - greyscale_colormap: colormaps['greyscale'].fn, - segmented_colormap: colormapFunctionGenerator - }; - }; - }, { - "../util/JsImage.js": 18, - "./colormapFunctionGenerator.js": 3, - "./colormaps.json": 4 - }], - 6: [function (require, module, exports) { - // This file was adapted from infragram-js: - // http://github.com/p-v-o-s/infragram-js. - module.exports = window.Converters = { - // modified from: - // http://axonflux.com/handy-rgb-to-hsl-and-rgb-to-hsv-color-model-c - hsv2rgb: function hsv2rgb(h, s, v) { - var data, f, i, p, q, rgb, t; - data = []; - - if (s === 0) { - rgb = [v, v, v]; - } else { - i = Math.floor(h * 6); - f = h * 6 - i; - p = v * (1 - s); - q = v * (1 - f * s); - t = v * (1 - (1 - f) * s); - data = [v * (1 - s), v * (1 - s * (h - i)), v * (1 - s * (1 - (h - i)))]; - - switch (i) { - case 0: - rgb = [v, t, p]; - break; - - case 1: - rgb = [q, v, p]; - break; - - case 2: - rgb = [p, v, t]; - break; - - case 3: - rgb = [p, q, v]; - break; - - case 4: - rgb = [t, p, v]; - break; - - default: - rgb = [v, p, q]; - } - } + xstart = _segments$i[0]; + y0 = _segments$i[1]; + y1 = _segments$i[2]; + x0 = xstart; - return rgb; - }, - rgb2hsv: function rgb2hsv(r, g, b) { - var d, h, max, min, s, v; - max = Math.max(r, g, b); - min = Math.min(r, g, b); - h = s = v = max; - d = max - min; - s = max === 0 ? 0 : d / max; - - if (max === min) { - h = 0; // achromatic - } else { - switch (max) { - case r: - h = (g - b) / d + (g < b ? 6 : 0); - break; - - case g: - h = (b - r) / d + 2; - break; - - case b: - h = (r - g) / d + 4; - } + if (i === segments.length - 1) { + x1 = 1; + break; + } - h /= 6; - } + x1 = segments[i + 1][0]; - return [h, s, v]; - } - }; - }, {}], - 7: [function (require, module, exports) { - // This file was adapted from infragram-js: - // http://github.com/p-v-o-s/infragram-js. - module.exports = function Camera(options) { - var canvas, ctx; // Initialize getUserMedia with options - - function initialize() { - getUserMedia(webRtcOptions, success, deviceError); // iOS Safari 11 compatibility: https://github.com/webrtc/adapter/issues/685 - - webRtcOptions.videoEl.setAttribute('autoplay', 'autoplay'); - webRtcOptions.videoEl.setAttribute('playsinline', 'playsinline'); - window.webcam = webRtcOptions; // this is weird but maybe used for flash fallback? - - canvas = options.canvas || document.getElementById("image"); - ctx = canvas.getContext("2d"); // Trigger a snapshot w/ button - // -- move this to interface.js? - - $("#snapshot").show(); - $("#live-video").show(); - $("#webcam").show(); - } // webRtcOptions contains the configuration information for the shim - // it allows us to specify the width and height of the video - // output we"re working with, the location of the fallback swf, - // events that are triggered onCapture and onSave (for the fallback) - // and so on. - - - var webRtcOptions = options.webRtcOptions || { - "audio": false, - "video": true, - // the element (by id) you wish to use for - // displaying the stream from a camera - el: "webcam", - extern: null, - append: true, - // height and width of the output stream - // container - width: 640, - height: 480, - // the recommended mode to be used is - // "callback " where a callback is executed - // once data is available - mode: "callback", - // a debugger callback is available if needed - debug: function debug() {}, - // callback for capturing the fallback stream - onCapture: function onWebRtcCapture() { - return window.webcam.save(); - }, - // callback for saving the stream, useful for - // relaying data further. - onSave: onSaveGetUserMedia, - onLoad: function onLoadGetUserMedia() {} - }; - - function onSaveGetUserMedia(data) { - var col, - h, - i, - img, - j, - ref, - tmp, - w, - pos = 0; - col = data.split(""); - img = camera.image; - tmp = null; - w = webRtcOptions.width; - h = webRtcOptions.height; - - for (i = j = 0, ref = w - 1; 0 <= ref ? j <= ref : j >= ref; i = 0 <= ref ? ++j : --j) { - tmp = parseInt(col[i], 10); - img.data[pos + 0] = tmp >> 16 & 0xff; - img.data[pos + 1] = tmp >> 8 & 0xff; - img.data[pos + 2] = tmp & 0xff; - img.data[pos + 3] = 0xff; - pos += 4; - } + if (xstart <= x && x < x1) { + break; + } + } - if (pos >= 4 * w * h) { - ctx.putImageData(img, 0, 0); - return pos = 0; - } - } + result = []; - function success(stream) { - var video; + for ( + i = m = 0, ref = y0.length; + 0 <= ref ? m < ref : m > ref; + i = 0 <= ref ? ++m : --m + ) { + result[i] = ((x - x0) / (x1 - x0)) * (y1[i] - y0[i]) + y0[i]; + } + + return result; + }; + }; + }, + {}, + ], + 4: [ + function (require, module, exports) { + module.exports = { + greyscale: { + author: "publiclab", + description: "A simple linear greyscale colormap, black to white.", + url: "https://publiclab.org/colormaps#greyscale", + colormapRanges: [ + [0, [0, 0, 0], [255, 255, 255]], + [1, [255, 255, 255], [255, 255, 255]], + ], + }, + default: { + author: "publiclab", + description: + "A full-colorwheel colormap, covering the colors in the spectrum.", + url: "https://publiclab.org/colormaps#default", + colormapRanges: [ + [0, [45, 1, 121], [25, 1, 137]], + [0.125, [25, 1, 137], [0, 6, 156]], + [0.1875, [0, 6, 156], [7, 41, 172]], + [0.25, [7, 41, 172], [22, 84, 187]], + [0.3125, [22, 84, 187], [25, 125, 194]], + [0.375, [25, 125, 194], [26, 177, 197]], + [0.4375, [26, 177, 197], [23, 199, 193]], + [0.47, [23, 199, 193], [25, 200, 170]], + [0.5, [25, 200, 170], [21, 209, 27]], + [0.5625, [21, 209, 27], [108, 215, 18]], + [0.625, [108, 215, 18], [166, 218, 19]], + [0.6875, [166, 218, 19], [206, 221, 20]], + [0.75, [206, 221, 20], [222, 213, 19]], + [0.7813, [222, 213, 19], [222, 191, 19]], + [0.8125, [222, 191, 19], [227, 133, 17]], + [0.875, [227, 133, 17], [231, 83, 16]], + [0.9375, [231, 83, 16], [220, 61, 48]], + ], + }, + stretched: { + author: "publiclab", + description: + "A simple colormap from blue to red, with no purple overlap.", + url: "https://publiclab.org/colormaps#stretched", + colormapRanges: [ + [0, [0, 0, 255], [0, 0, 255]], + [0.1, [0, 0, 255], [38, 195, 195]], + [0.5, [0, 150, 0], [255, 255, 0]], + [0.7, [255, 255, 0], [255, 50, 50]], + [0.9, [255, 50, 50], [255, 50, 50]], + ], + }, + bluwhtgrngis: { + author: "MaggPi", + description: "A colormap from blue to white to green to....", + url: "https://publiclab.org/colormaps#bluwhtgrngis", + colormapRanges: [ + [0, [6, 23, 86], [6, 25, 84]], + [0.0625, [6, 25, 84], [6, 25, 84]], + [0.125, [6, 25, 84], [6, 25, 84]], + [0.1875, [6, 25, 84], [6, 25, 84]], + [0.25, [6, 25, 84], [6, 25, 84]], + [0.3125, [6, 25, 84], [9, 24, 84]], + [0.3438, [9, 24, 84], [119, 120, 162]], + [0.375, [119, 129, 162], [249, 250, 251]], + [0.406, [249, 250, 251], [255, 255, 255]], + [0.4375, [255, 255, 255], [255, 255, 255]], + [0.5, [255, 255, 255], [214, 205, 191]], + [0.52, [214, 205, 191], [178, 175, 96]], + [0.5625, [178, 175, 96], [151, 176, 53]], + [0.593, [151, 176, 53], [146, 188, 12]], + [0.625, [146, 188, 12], [96, 161, 1]], + [0.6875, [96, 161, 1], [30, 127, 3]], + [0.75, [30, 127, 3], [0, 99, 1]], + [0.8125, [0, 99, 1], [0, 74, 1]], + [0.875, [0, 74, 1], [0, 52, 0]], + [0.9375, [0, 52, 0], [0, 34, 0]], + [0.968, [0, 34, 0], [68, 70, 67]], + ], + }, + brntogrn: { + author: "MaggPi", + description: "A colormap from brown to green.", + url: "https://publiclab.org/colormaps#brntogrn", + colormapRanges: [ + [0, [110, 12, 3], [118, 6, 1]], + [0.0625, [118, 6, 1], [141, 19, 6]], + [0.125, [141, 19, 6], [165, 35, 13]], + [0.1875, [165, 35, 13], [177, 59, 25]], + [0.2188, [177, 59, 25], [192, 91, 36]], + [0.25, [192, 91, 36], [214, 145, 76]], + [0.3125, [214, 145, 76], [230, 183, 134]], + [0.375, [230, 183, 134], [243, 224, 194]], + [0.4375, [243, 224, 194], [250, 252, 229]], + [0.5, [250, 252, 229], [217, 235, 185]], + [0.5625, [217, 235, 185], [184, 218, 143]], + [0.625, [184, 218, 143], [141, 202, 89]], + [0.6875, [141, 202, 89], [80, 176, 61]], + [0.75, [80, 176, 61], [0, 147, 32]], + [0.8125, [0, 147, 32], [1, 122, 22]], + [0.875, [1, 122, 22], [0, 114, 19]], + [0.9, [0, 114, 19], [0, 105, 18]], + [0.9375, [0, 105, 18], [7, 70, 14]], + ], + }, + blutoredjet: { + author: "MaggPi", + description: "A colormap from blue to red.", + url: "https://publiclab.org/colormaps#blutoredjet", + colormapRanges: [ + [0, [0, 0, 140], [1, 1, 186]], + [0.0625, [1, 1, 186], [0, 1, 248]], + [0.125, [0, 1, 248], [0, 70, 254]], + [0.1875, [0, 70, 254], [0, 130, 255]], + [0.25, [0, 130, 255], [2, 160, 255]], + [0.2813, [2, 160, 255], [0, 187, 255]], + [0.3125, [0, 187, 255], [6, 250, 255]], + [0.348, [0, 218, 255], [8, 252, 251]], + [0.375, [8, 252, 251], [27, 254, 228]], + [0.406, [27, 254, 228], [70, 255, 187]], + [0.4375, [70, 255, 187], [104, 254, 151]], + [0.47, [104, 254, 151], [132, 255, 19]], + [0.5, [132, 255, 19], [195, 255, 60]], + [0.5625, [195, 255, 60], [231, 254, 25]], + [0.5976, [231, 254, 25], [253, 246, 1]], + [0.625, [253, 246, 1], [252, 210, 1]], + [0.657, [252, 210, 1], [255, 183, 0]], + [0.6875, [255, 183, 0], [255, 125, 2]], + [0.75, [255, 125, 2], [255, 65, 1]], + [0.8125, [255, 65, 1], [247, 1, 1]], + [0.875, [247, 1, 1], [200, 1, 3]], + [0.9375, [200, 1, 3], [122, 3, 2]], + ], + }, + colors16: { + author: "publiclab", + description: + "A segmented colormap of the full color spectrum, divided into 16 colors.", + url: "https://publiclab.org/colormaps#colors16", + colormapRanges: [ + [0, [0, 0, 0], [0, 0, 0]], + [0.0625, [3, 1, 172], [3, 1, 172]], + [0.125, [3, 1, 222], [3, 1, 222]], + [0.1875, [0, 111, 255], [0, 111, 255]], + [0.25, [3, 172, 255], [3, 172, 255]], + [0.3125, [1, 226, 255], [1, 226, 255]], + [0.375, [2, 255, 0], [2, 255, 0]], + [0.4375, [198, 254, 0], [190, 254, 0]], + [0.5, [252, 255, 0], [252, 255, 0]], + [0.5625, [255, 223, 3], [255, 223, 3]], + [0.625, [255, 143, 3], [255, 143, 3]], + [0.6875, [255, 95, 3], [255, 95, 3]], + [0.75, [242, 0, 1], [242, 0, 1]], + [0.8125, [245, 0, 170], [245, 0, 170]], + [0.875, [223, 180, 225], [223, 180, 225]], + [0.9375, [255, 255, 255], [255, 255, 255]], + ], + }, + fastie: { + author: "cfastie", + description: + "A colormap for highlighting NDVI values over 0 on a scale from -1 to 1; in this scale, values from 0-0.5 are greyscale, while those over 0.5 are color.", + url: "https://publiclab.org/colormaps#fastie", + colormapRanges: [ + [0, [255, 255, 255], [0, 0, 0]], + [0.167, [0, 0, 0], [255, 255, 255]], + [0.33, [255, 255, 255], [0, 0, 0]], + [0.5, [0, 0, 0], [140, 140, 255]], + [0.55, [140, 140, 255], [0, 255, 0]], + [0.63, [0, 255, 0], [255, 255, 0]], + [0.75, [255, 255, 0], [255, 0, 0]], + [0.95, [255, 0, 0], [255, 0, 255]], + ], + }, + }; + }, + {}, + ], + 5: [ + function (require, module, exports) { + // This file was adapted from infragram-js: + // http://github.com/p-v-o-s/infragram-js. + module.exports = function Colormaps(options) { + // see https://github.com/publiclab/image-sequencer/tree/main/src/modules/Colormap/ + var colormapFunctionGenerator = require("./colormapFunctionGenerator.js"); + + var colormaps = require("./colormaps.json"); + + Object.keys(colormaps).forEach(function (key) { + // make a function from the colormap, which we can't easily do in JSON + colormaps[key].fn = colormapFunctionGenerator( + colormaps[key].colormapRanges + ); + }); - if (webRtcOptions.context === "webrtc") { - video = webRtcOptions.videoEl; + var JsImage = require("../util/JsImage.js"); + + function colorify(jsImage, colormap) { + var b, data, g, i, j, l, n, r, ref; + $("#btn-colorize").addClass("active"); + n = jsImage.width * jsImage.height; + data = new Uint8ClampedArray(4 * n); + j = 0; + + for ( + i = l = 0, ref = n; + 0 <= ref ? l < ref : l > ref; + i = 0 <= ref ? ++l : --l + ) { + var _colormap = colormap(jsImage.data[i]); + + var _colormap2 = _slicedToArray(_colormap, 3); + + r = _colormap2[0]; + g = _colormap2[1]; + b = _colormap2[2]; + data[j++] = r; + data[j++] = g; + data[j++] = b; + data[j++] = 255; + } - if (navigator.mozGetUserMedia) { - video.mozSrcObject = stream; - } else { - video.srcObject = stream; + return new JsImage(data, jsImage.width, jsImage.height, 4); } - return video.onerror = function (e) { - return stream.stop(); + return { + colorify: colorify, + colormap1: colormaps["default"].fn, + colormap2: colormaps["stretched"].fn, + greyscale_colormap: colormaps["greyscale"].fn, + segmented_colormap: colormapFunctionGenerator, }; - } else {} - } - - function deviceError(error) { - alert("No camera available."); - console.log(error); - return console.error("An error occurred: [CODE " + error.code + "]"); - } // not doing anything now... for copying to a 2nd canvas - - - function getSnapshot() { - var video; // If the current context is WebRTC/getUserMedia (something - // passed back from the shim to avoid doing further feature - // detection), we handle getting video/images for our canvas - // from our HTML5