isis demos (#101)

* isis demos

* jquery 3.7.1, del projection demo js, del ext themes

* cleanup unused css and layout

* moved demos, linked in nav

* update links in demos and workshops

* place 4 demos in isis-fundamentals pages, moved workshops

* toc update

docs/concepts/isis-fundamentals/bit-types.md

 # Bit-Type
 
+<script src="https://asc-public-docs.s3.us-west-2.amazonaws.com/common/scripts/isis-demos/jquery-3.7.1.min.js"></script>
+<link href="../../../css/isis-demos.css" media="all" rel="stylesheet"/>
+
+
+<script type="text/javascript">
+if (typeof window.isisDemosLoaded == 'undefined') {
+    var isisDemosLoaded = true;
+    $.getScript("https://asc-public-docs.s3.us-west-2.amazonaws.com/common/scripts/isis-demos/easeljs-0.8.1.min.js").done( function(s,t) { $.getScript("../../../js/isisDemos.js");});
+}
+</script>
+
 ## Bit-Type Basics
 -----
 
@@ -183,6 +194,10 @@ by 100 lines:
   </tbody>
 </table>
 
+### File Size Calculator
+
+<div class="app-container" id="isis-image-data-size"></div>
+
 ## How do I set the bit-type?
 
 -----

docs/concepts/isis-fundamentals/cube-format.md

 # ISIS Cube Format
 
+<script src="https://asc-public-docs.s3.us-west-2.amazonaws.com/common/scripts/isis-demos/jquery-3.7.1.min.js"></script>
+<link href="../../../css/isis-demos.css" media="all" rel="stylesheet"/>
+
+
+<script type="text/javascript">
+if (typeof window.isisDemosLoaded == 'undefined') {
+    var isisDemosLoaded = true;
+    $.getScript("https://asc-public-docs.s3.us-west-2.amazonaws.com/common/scripts/isis-demos/easeljs-0.8.1.min.js").done( function(s,t) { $.getScript("../../../js/isisDemos.js");});
+}
+</script>
+
 ## What Is A Cube?
 ---------------
 
@@ -62,11 +73,18 @@ A cube is a 3-dimensional image with axis: samples, lines, and bands. The physic
 ## What Are Pixels?
 ----------------
 
-The individual cells within a cube are called pixels. Each pixel in a cube has a location, which is similar to rectangular coordinates (i.e.., (samples, lines, bands)). A cube can be as small as one sample, by one line, by one band (1,1,1). If we had a cube of this size, it would contain only one pixel. A cube can be as large as thousands of samples, by thousands of lines, by thousands of bands. A cube with dimensions (1000, 1000, 1000) would contain one billion pixels.  See the [ISIS Cube Demo](https://doi-usgs.github.io/ISIS3/ISIS_Cube_Format.html#Cube-Demo) for an interactive visual of samples, lines, and bands.
+The individual cells within a cube are called pixels. Each pixel in a cube has a location, which is similar to rectangular coordinates (i.e.., (samples, lines, bands)). A cube can be as small as one sample, by one line, by one band (1,1,1). If we had a cube of this size, it would contain only one pixel. A cube can be as large as thousands of samples, by thousands of lines, by thousands of bands. A cube with dimensions (1000, 1000, 1000) would contain one billion pixels.  See the demo below for an interactive visual of samples, lines, and bands.
+
+### ISIS Cube Demo
+
+<div class="app-container" id="isis-cube"></div>
+
+</br>
 
 !!! tip
 
-    Notice sample 1 is on the left edge of the image and line 1 is on the top edge. Therefore, to figure out the coordinates of a pixel, count lines and samples staring with 1,1 in the upper left corner and move down and to the right.
+    Notice sample 1 is on the left edge of the image and line 1 is on the top edge. Therefore, to figure out the coordinates of a pixel, count lines and samples staring with (1, 1) in the upper left corner and move down and to the right.
+
     
 
 ## Bit-Depth (aka Bit-Type)
@@ -90,6 +108,11 @@ An 8-bit cube needs to represent elevations in meters. Unfortunately, 8-bit pixe
 
 *Base + Multiplier * DN = True DN*
 
+### Core Base and Multiplier Demo
+
+<div class="app-container" id="isis-multiplier"></div>
+
+
 ## Sub-Pixel Positioning
 --------------------
 
@@ -97,6 +120,11 @@ ISIS3 programs and users often need to interact at the sub-pixel level. That is,
 
 Take a pixel centered at (5, 5) for example.  The upper left of the pixel contains the point (4.75, 4.75), and the lower right of the pixel contains the point (5.25, 5.25).  The threshold between pixels is a value ending in .5
 
+## Sub-Pixel Demo
+
+<div class="app-container" id="isis-subpixels"></div>
+
+
 ## Summary
 -------
 

docs/css/isis-demos.css

+
+/* ISIS demos */
+
+/* General Layout */
+
+canvas {
+	padding:5px;
+	background-color:black;
+	position:relative;
+}
+
+.app-container {
+	position:relative;
+	margin:15px 0 15px 0;
+	background-color:grey;
+}
+
+.console {
+	z-index:6;
+	background-color:grey;
+	-webkit-user-select: none; /* webkit (safari, chrome) browsers */
+	-moz-user-select: none; /* mozilla browsers */
+	-khtml-user-select: none; /* webkit (konqueror) browsers */
+	-ms-user-select: none; /* IE10+ */
+}
+
+.bottom {
+	position:relative;
+	bottom:0;
+}
+
+.bottom .text {
+	margin:5px;
+	font-family:sans-serif;
+	font-size:1em;
+}
+
+.bottom span > span {
+	font-size:1em;
+	display:inline-block;
+	margin:0;
+}
+
+.right {
+	display:inline-block;
+	width:110px;
+	float:right;
+}
+
+.right > * {
+	margin:5px;
+	font-size:.9em;
+	font-family:sans-serif;
+}
+
+
+.right span {
+	margin:0;
+}
+
+.app-container textarea {
+	resize:none;
+	font-size:.9em!important;
+	display:block;
+}
+
+.updateMessage {
+	color:white;
+}
+
+/* Buttons */
+
+#calcsize, .console button {
+	font-family: Source Sans Pro Web,Helvetica Neue,Helvetica,Roboto,Arial,sans-serif;
+	font-size: 0.8rem;
+	line-height: .9;
+	color: #fff;
+	background-color: #005ea2;
+	-webkit-appearance: none;
+	-moz-appearance: none;
+	appearance: none;
+	align-items: center;
+	border: 0;
+	border-radius: .15rem;
+	cursor: pointer;
+	-moz-column-gap: .3rem;
+	column-gap: .3rem;
+	display: inline-flex;
+	font-weight: 700;
+	justify-content: center;
+	margin-right: .3rem;
+	padding: .50rem 1rem;
+	text-align: center;
+	text-decoration: none;
+	margin-top: .3rem;
+	min-width: 5rem;
+}
+
+#calcsize:hover, .console button:hover {
+	background-color: #1a4480;
+}
+
+#calcsize:active, .console button:active {
+	background-color: #162e51;
+}
+
+.console button:disabled {
+	color: #454545;
+	background-color: #c9c9c9;
+	cursor:not-allowed;
+}
+
+.console .reset-button {
+	background-color: #bd0801;
+}
+
+.console .reset-button:hover {
+	background-color: #b50909;
+}
+
+.console .reset-button:active {
+	background-color: #8b0a03;
+}
+
+.console .inverse-button {
+	box-shadow: inset 0 0 0 2px #e6e6e6;
+	background-color: transparent;
+	color: #e6e6e6;
+}
+
+.console .inverse-button:hover {
+	background: linear-gradient(
+        90deg,
+        rgb(133, 0, 0) 0%,
+        rgba(133, 77, 0, 1) 10%,
+        rgba(104, 111, 16, 1) 20%,
+        rgba(40, 110, 37, 1) 30%,
+        rgba(32, 109, 108, 1) 40%,
+        rgba(24, 100, 113, 1) 50%,
+        rgba(14, 63, 119, 1) 60%,
+        rgba(48, 10, 121, 1) 70%,
+        rgba(93, 6, 124, 1) 80%,
+        rgba(125, 3, 108, 1) 90%,
+        rgba(133, 0, 0, 1) 100%
+    );
+}
+
+.console .inverse-button:active {
+	background: linear-gradient(
+        90deg,
+        rgba(255, 0, 0, 1) 0%,
+        rgba(255, 154, 0, 1) 10%,
+        rgba(208, 222, 33, 1) 20%,
+        rgba(79, 220, 74, 1) 30%,
+        rgba(63, 218, 216, 1) 40%,
+        rgba(47, 201, 226, 1) 50%,
+        rgba(28, 127, 238, 1) 60%,
+        rgba(95, 21, 242, 1) 70%,
+        rgba(186, 12, 248, 1) 80%,
+        rgba(251, 7, 217, 1) 90%,
+        rgba(255, 0, 0, 1) 100%
+    );
+}
+
+/* demo form elements */
+
+.right label {
+	font-family: sans-serif;
+	margin:0 5px -10px 5px;
+	display: inline-block;
+}
+
+.bottom input[readonly] {
+	border:0;
+	background-color:grey;
+	display:inline-block;
+	font-size:1em;
+	width:35px;
+	padding:0;
+} 
+
+.app-container input[type=text]:not([readonly]), .boxcarContainer>input {
+	position:relative;
+	background-color:white;
+	color:black;
+	display:block;
+	width:50px;
+	float:left;
+	margin: 10px 5px;
+}
+
+/* Layout of specific demos */
+
+#isis-pixels {
+	width:500px;
+}
+
+#isis-pixels .right {
+	width: 198px;
+}
+
+#isis-subpixels {
+	width:290px;
+}
+
+#isis-multiplier {
+	width:480px;
+}
+
+#isis-multiplier .right {
+	width: 198px;
+}
+
+#isis-special-pixels {
+	width:430px;
+}
+
+#isis-special-pixels .right {
+	width:130px;
+}
+
+#trueDn {
+	width:100px;
+}
+
+#isis-cube {
+	width:810px;
+	height:610px;
+	background-color:LightGrey; 
+}
+
+#isis-cube .right {
+	width:210px;
+	padding-left:10px;
+}
+
+#isis-cube canvas {
+	position:absolute;
+}
+
+#isis-destripe {
+	width:805px;
+}
+
+#isis-destripe .special-width {
+	width:120px;
+}
+
+#isis-seams .special-width {
+	width:120px;
+}
+
+#isis-seams {
+	width:805px;
+}
+
+#isis-seams .right textarea {
+	height:67px;
+}
+
+#isis-destripe .right {
+	width:290px;
+}
+
+#isis-seams .right {
+	width:290px;
+}
+
+.app-container input[type=checkbox] {
+	background-color:grey;
+}
+
+#isis-seams-chooseArea label {
+	display:block;
+	width:100%;
+	margin:5px;
+}
+
+
+.legend {
+	height:25px;
+	width:100px;
+	line-height:25px;
+	text-align:center;
+}
+
+/* Image Data Size Calculator */
+
+.app-container {
+	color: black;
+}
+
+.app-container > div > form > table {
+	border-spacing: 1px;
+}
+
+.app-container > div > form > table > tbody > tr {
+	background-color: lightgray;
+}
\ No newline at end of file

docs/how-to-guides/isis-demos-and-workshops.md → docs/getting-started/archive/isis-demos-and-workshops.md

@@ -10,17 +10,17 @@
 
 These specific ISIS demonstrations were held on Wednesday, June 27 2012 (ISIS3.4.0 Public Release)
 
-[Overview of photogrammetric processing in ISIS Slides](../assets/isis-demos/IsisDemoIntro.pdf)
+[Overview of photogrammetric processing in ISIS Slides](../../assets/isis-demos/IsisDemoIntro.pdf)
 
-[Qnet Demo Slides](../assets/isis-demos/Qnet.pdf)
+[Qnet Demo Slides](../../assets/isis-demos/Qnet.pdf)
 
-[Jigsaw Demo Slides](../assets/isis-demos/Jigsaw.pdf)
+[Jigsaw Demo Slides](../../assets/isis-demos/Jigsaw.pdf)
 
-[Qtie Demo Slides](../assets/isis-demos/Qtie.pdf)
+[Qtie Demo Slides](../../assets/isis-demos/Qtie.pdf)
 
-[Qview Demo Slides](../assets/isis-demos/Qview.pdf)
+[Qview Demo Slides](../../assets/isis-demos/Qview.pdf)
 
-[Qmos Demo Slides](../assets/isis-demos/Qmos.pdf)
+[Qmos Demo Slides](../../assets/isis-demos/Qmos.pdf)
 
 ## **Planetary Data Workshop - Cassini ISIS Workshop - June 2012**
 ------
@@ -28,31 +28,31 @@ These specific ISIS demonstrations were held on Wednesday, June 27 2012 (ISIS3.4
 !!! warning "The subsequent workshop could be considered outdated but retained for historical reference."
 
     For the most current documentation for the listed applications, please consult the [ISIS Application Docs Website](https://isis.astrogeology.usgs.gov/).
-    Additionally, refer to our other [How-To Guides](../how-to-guides/index.md) for current tutorials.
+    Additionally, refer to our other [How-To Guides](../../how-to-guides/index.md) for current tutorials.
 
 The 'hands-on' Cassini ISIS workshop was held during the Planetary Data
 Workshop, Tuesday - June 26, 2012
 
 ### 1. Intercompare ISS/VIMS/RADAR cubes of Titan Sinlap crater region
 
-[Introduction Presentation](../assets/isis-demos/CassiniTutorial.pdf)
+[Introduction Presentation](../../assets/isis-demos/CassiniTutorial.pdf)
 
 ### 2. Generate a mosaic (two versions: uncontrolled and controlled) of ISS Enceladus cubes (with batchlist/command line script)  
 
-[Overview PDF Lesson](../assets/isis-demos/CassiniISS_EnceladusLesson.pdf)  
-[Download Hands-On Lesson](../assets/isis-demos/ISSEnceladus.tar.gz)
+[Overview PDF Lesson](../../assets/isis-demos/CassiniISS_EnceladusLesson.pdf)  
+[Download Hands-On Lesson](../../assets/isis-demos/ISSEnceladus.tar.gz)
 
 ### 3. Illustrate scripts and use of AWK for specialized VIMS-Titan processing
 
 Use Titan Sinlap Feature images to create 8 averaged bands of a specific methane windows (includes perl script)
 
-[Overview PDF Lesson](../assets/isis-demos/CassiniVIMS_mwinavg.pdf)  
-[Download Hands-On Lesson](../assets/isis-demos/Vims_titan_bandavg_lesson.tar.gz)
+[Overview PDF Lesson](../../assets/isis-demos/CassiniVIMS_mwinavg.pdf)  
+[Download Hands-On Lesson](../../assets/isis-demos/Vims_titan_bandavg_lesson.tar.gz)
 
 Assemble, mosaic and project single-line VIMS cube (includes use of 'awk' to process)
 
-[Overview PDF Lesson](../assets/isis-demos/CassiniVIMS_SingleLineLesson.pdf)
+[Overview PDF Lesson](../../assets/isis-demos/CassiniVIMS_SingleLineLesson.pdf)
 
 ### 4. Specialized VIMS processing  
-[Overview PDS Lesson](../assets/isis-demos/Vims_specialprocessing.pdf)  
-[Download Hands-On Lesson](../assets/isis-demos/SpecializedVIMS.tar.gz)
+[Overview PDF Lesson](../../assets/isis-demos/Vims_specialprocessing.pdf)  
+[Download Hands-On Lesson](../../assets/isis-demos/SpecializedVIMS.tar.gz)

docs/how-to-guides/demos/isis-demos.md

+# ISIS Demos
+
+<script src="https://asc-public-docs.s3.us-west-2.amazonaws.com/common/scripts/isis-demos/jquery-3.7.1.min.js"></script>
+<link href="../../../css/isis-demos.css" media="all" rel="stylesheet"/>
+
+
+<script type="text/javascript">
+if (typeof window.isisDemosLoaded == 'undefined') {
+    var isisDemosLoaded = true;
+    $.getScript("https://asc-public-docs.s3.us-west-2.amazonaws.com/common/scripts/isis-demos/easeljs-0.8.1.min.js").done( function(s,t) { $.getScript("../../../js/isisDemos.js");});
+}
+</script>
+
+<!-- To Use these demos on other pages, include the above css and scripts, and copy the desired div below with the id for the demo you want. -->
+
+## Image Data Size Calculator
+<div class="app-container" id="isis-image-data-size"></div>
+
+## Cube Demo
+<div class="app-container" id="isis-cube"></div>
+
+## Pixel Demo
+<div class="app-container" id="isis-pixels"></div>
+
+## Multiplier Demo
+<div class="app-container" id="isis-multiplier"></div>
+
+## Subpixels Demo
+<div class="app-container" id="isis-subpixels"></div>
+
+## Special Pixels Demo
+<div class="app-container" id="isis-special-pixels"></div>
+
+## Destripe Demo
+<div class="app-container" id="isis-destripe"></div>
+
+## Seam Removal Demo
+<div class="app-container" id="isis-seams"></div>
\ No newline at end of file