[0.7.1] Decoded Images Display

InBinaryWorld · Nov 13, 2021 · d88c59e · d88c59e
1 parent e219a1d
commit d88c59e
Show file tree

Hide file tree

Showing 5 changed files with 80 additions and 21 deletions.
diff --git a/build/main.js b/build/main.js
@@ -29,9 +29,12 @@ const checkbox2 = document.getElementById("method-2-checkbox");
 const checkbox3 = document.getElementById("method-3-checkbox");
 // Images
 const originalImageDiv = document.getElementById("original-image");
-const method1ImageDiv = document.getElementById("method1-image");
-const method2ImageDiv = document.getElementById("method2-image");
-const method3ImageDiv = document.getElementById("method3-image");
+const diffExpEncodedDiv = document.getElementById("diff-exp-encoded-image");
+const histShiftEncodedDiv = document.getElementById("hist-shift-encoded-image");
+const singValDecompEncodedDiv = document.getElementById("sing-val-decomp-encoded-image");
+const diffExpDecodedDiv = document.getElementById("diff-exp-decoded-image");
+const histShiftDecodedDiv = document.getElementById("hist-shift-decoded-image");
+const singValDecompDecodedDiv = document.getElementById("sing-val-decomp-decoded-image");
 // Label Counters
 const imageSizeCounterLabel = document.getElementById("image-size-counter");
 const availableSizeCounterLabel = document.getElementById("availalbe-size-counter");
@@ -109,9 +112,12 @@ btnEncrypt.addEventListener("click", function () {
         return;
     }
     image_output = encryptAndDecrypt(bmp, encrypted_text);
-    loadImage(image_output.diffExpBMPEncrypted.toBlob(), function (img) { method1ImageDiv.appendChild(img); }, { maxWidth: 300 });
-    loadImage(image_output.diffExpBMPEncrypted.toBlob(), function (img) { method2ImageDiv.appendChild(img); }, { maxWidth: 300 });
-    loadImage(image_output.diffExpBMPEncrypted.toBlob(), function (img) { method3ImageDiv.appendChild(img); }, { maxWidth: 300 });
+    loadImage(image_output.diffExpBMPEncrypted.toBlob(), function (img) { diffExpEncodedDiv.appendChild(img); }, { maxWidth: 300 });
+    loadImage(image_output.diffExpBMPEncrypted.toBlob(), function (img) { histShiftEncodedDiv.appendChild(img); }, { maxWidth: 300 });
+    loadImage(image_output.diffExpBMPEncrypted.toBlob(), function (img) { singValDecompEncodedDiv.appendChild(img); }, { maxWidth: 300 });
+    loadImage(image_output.diffExpBMPDecrypted.toBlob(), function (img) { diffExpDecodedDiv.appendChild(img); }, { maxWidth: 300 });
+    loadImage(image_output.diffExpBMPDecrypted.toBlob(), function (img) { histShiftDecodedDiv.appendChild(img); }, { maxWidth: 300 });
+    loadImage(image_output.diffExpBMPDecrypted.toBlob(), function (img) { singValDecompDecodedDiv.appendChild(img); }, { maxWidth: 300 });
 });
 btnEncrypt.addEventListener('click', function () {
     if (checkbox1 && image_output && checkbox1.checked) {

diff --git a/docs/CHANGELOG.md b/docs/CHANGELOG.md
@@ -7,6 +7,19 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ---
 
+## [[0.7.1]] - 2021-11-13 _(MJ)_
+
+###### _([diff: 0.7.0-0.7.1])_
+
+Added:
+
+- Decoded Image Display on Main Website.
+  - ![Displaying Images](./img/changelog/071_decoded_display.gif)
+
+Changed:
+
+- More meaningful identifiers for HTML Elements.
+
 ## [[0.7.0]] - 2021-11-13 _(MJ)_
 
 ###### _([diff: 0.6.2-0.7.0])_
@@ -198,6 +211,7 @@ Added:
 - Created [**`CHANGELOG.md`**](../docs/CHANGELOG.md) for the project that contains the history of changes for this project.
 - Created [**`README.md`**](../README.md) for the project that contains various useful information, requirements and instructions in order ot run the program.
 
+[diff: 0.7.0-0.7.1]: https://github.com/Luzkan/CryptoImage/compare/0.7.0...0.7.1
 [diff: 0.6.2-0.7.0]: https://github.com/Luzkan/CryptoImage/compare/0.6.2...0.7.0
 [diff: 0.6.1-0.6.2]: https://github.com/Luzkan/CryptoImage/compare/0.6.1...0.6.2
 [diff: 0.6.0-0.6.1]: https://github.com/Luzkan/CryptoImage/compare/0.6.0...0.6.1
@@ -211,6 +225,7 @@ Added:
 [diff: 0.1.0-0.1.1]: https://github.com/Luzkan/CryptoImage/compare/0.1.0...0.1.1
 [diff: 0.0.1-0.1.0]: https://github.com/Luzkan/CryptoImage/compare/0.0.1...0.1.0
 [diff: 0.0.0-0.0.1]: https://github.com/Luzkan/CryptoImage/compare/0.0.0...0.0.1
+[0.7.1]: https://github.com/Luzkan/CryptoImage/releases/tag/0.7.1
 [0.7.0]: https://github.com/Luzkan/CryptoImage/releases/tag/0.7.0
 [0.6.2]: https://github.com/Luzkan/CryptoImage/releases/tag/0.6.2
 [0.6.1]: https://github.com/Luzkan/CryptoImage/releases/tag/0.6.1

diff --git a/docs/img/changelog/071_decoded_display.gif b/docs/img/changelog/071_decoded_display.gif
diff --git a/index.html b/index.html
@@ -241,25 +241,54 @@ <h3>Save it via mouse right click.</h3>
         <div class="container">
           <div class="row">
             <div class="to-animate">
-              <div class="col-md-4 text-center to-animate alt-project-grid" id="method1-image">
+              <div class="col-md-4 text-center to-animate alt-project-grid" id="diff-exp-decoded-image">
                   <div class="desc">
                     <h3><a href="#">Differential Expansion</a></h3>
-                    <span>Simple Explanation of Method #1</span>
+                    <span>Encoded</span>
+                  </div>
+                  <div id="diff-exp-encoded-image"></div>
+                  <div class="desc" style="margin-top: 6rem; margin-bottom: 1.5rem; height: 4rem;">
+                    <span>Decoded</span>
                   </div>
               </div>
-              <div class="col-md-4 text-center to-animate alt-project-grid" id="method2-image">
+              <div class="col-md-4 text-center to-animate alt-project-grid" id="hist-shift-decoded-image">
                   <div class="desc">
                     <h3><a href="#">Histogram Shifting</a></h3>
-                    <span>Simple Explanation of Method #2</span>
+                    <span>Encoded</span>
+                  </div>
+                  <div id="hist-shift-encoded-image"></div>
+                  <div class="desc" style="margin-top: 6rem; margin-bottom: 1.5rem; height: 4rem;">
+                    <span>Decoded</span>
                   </div>
               </div>
-              <div class="col-md-4 text-center to-animate alt-project-grid" id="method3-image">
+              <div class="col-md-4 text-center to-animate alt-project-grid" id="sing-val-decomp-decoded-image">
                   <div class="desc">
                     <h3><a href="#">Singular Value Decomposition</a></h3>
-                    <span>Simple Explanation of Method #3</span>
+                    <span>Encoded</span>
+                  </div>
+                  <div id="sing-val-decomp-encoded-image"></div>
+                  <div class="desc" style="margin-top: 6rem; margin-bottom: 1.5rem; height: 4rem;">
+                    <span>Decoded</span>
                   </div>
               </div>
             </div>
+            <!-- <div class="to-animate">
+              <div class="col-md-4 text-center to-animate alt-project-grid" id="diff-exp-decoded-image">
+                  <div class="desc">
+                    <span>Decoded</span>
+                  </div>
+              </div>
+              <div class="col-md-4 text-center to-animate alt-project-grid" id="hist-shift-decoded-image">
+                  <div class="desc">
+                    <span>Decoded</span>
+                  </div>
+              </div>
+              <div class="col-md-4 text-center to-animate alt-project-grid" id="sing-val-decomp-decoded-image">
+                  <div class="desc">
+                    <span>Decoded</span>
+                  </div>
+              </div>
+            </div> -->
 
 
             <!-- <div class="col-md-12 text-center">
@@ -282,7 +311,7 @@ <h3><a href="#">Original Image</a></h3>
                 <div class="desc">
                   <h3><a href="#">Method #1</a></h3>
                   <span>Simple Explanation of Method #1</span>
-                  <div id="method1-image"></div>
+                  <div id="diff-exp-encoded-image"></div>
                 </div>
               </div>
             </div>
@@ -294,7 +323,7 @@ <h3><a href="#">Method #1</a></h3>
                 <div class="desc">
                   <h3><a href="#">Method #2</a></h3>
                   <span>Simple Explanation of Method #2</span>
-                  <div id="method2-image"></div>
+                  <div id="hist-shift-encoded-image"></div>
                 </div>
               </div>
             </div>
@@ -306,7 +335,7 @@ <h3><a href="#">Method #2</a></h3>
                 <div class="desc">
                   <h3><a href="#">Method #3</a></h3>
                   <span>Simple Explanation of Method #3</span>
-                  <div id="method3-image"></div>
+                  <div id="sing-val-decomp-encoded-image"></div>
                 </div>
               </div>
             </div> -->

diff --git a/src/main.ts b/src/main.ts
@@ -36,9 +36,14 @@ const checkbox3 = document.getElementById("method-3-checkbox") as HTMLInputEleme
 
 // Images
 const originalImageDiv = document.getElementById("original-image") as HTMLInputElement;
-const method1ImageDiv = document.getElementById("method1-image") as HTMLInputElement;
-const method2ImageDiv = document.getElementById("method2-image") as HTMLInputElement;
-const method3ImageDiv = document.getElementById("method3-image") as HTMLInputElement;
+
+const diffExpEncodedDiv = document.getElementById("diff-exp-encoded-image") as HTMLInputElement;
+const histShiftEncodedDiv = document.getElementById("hist-shift-encoded-image") as HTMLInputElement;
+const singValDecompEncodedDiv = document.getElementById("sing-val-decomp-encoded-image") as HTMLInputElement;
+
+const diffExpDecodedDiv = document.getElementById("diff-exp-decoded-image") as HTMLInputElement;
+const histShiftDecodedDiv = document.getElementById("hist-shift-decoded-image") as HTMLInputElement;
+const singValDecompDecodedDiv = document.getElementById("sing-val-decomp-decoded-image") as HTMLInputElement;
 
 // Label Counters
 const imageSizeCounterLabel = document.getElementById("image-size-counter") as HTMLSpanElement;
@@ -131,9 +136,13 @@ btnEncrypt.addEventListener("click", function() {
 
   image_output = encryptAndDecrypt(bmp, encrypted_text);
 
-  loadImage(image_output.diffExpBMPEncrypted.toBlob(), function (img: any) { method1ImageDiv.appendChild(img); }, { maxWidth: 300 });
-  loadImage(image_output.diffExpBMPEncrypted.toBlob(), function (img: any) { method2ImageDiv.appendChild(img); }, { maxWidth: 300 });
-  loadImage(image_output.diffExpBMPEncrypted.toBlob(), function (img: any) { method3ImageDiv.appendChild(img); }, { maxWidth: 300 });
+  loadImage(image_output.diffExpBMPEncrypted.toBlob(), function (img: any) { diffExpEncodedDiv.appendChild(img); }, { maxWidth: 300 });
+  loadImage(image_output.diffExpBMPEncrypted.toBlob(), function (img: any) { histShiftEncodedDiv.appendChild(img); }, { maxWidth: 300 });
+  loadImage(image_output.diffExpBMPEncrypted.toBlob(), function (img: any) { singValDecompEncodedDiv.appendChild(img); }, { maxWidth: 300 });
+
+  loadImage(image_output.diffExpBMPDecrypted.toBlob(), function (img: any) { diffExpDecodedDiv.appendChild(img); }, { maxWidth: 300 });
+  loadImage(image_output.diffExpBMPDecrypted.toBlob(), function (img: any) { histShiftDecodedDiv.appendChild(img); }, { maxWidth: 300 });
+  loadImage(image_output.diffExpBMPDecrypted.toBlob(), function (img: any) { singValDecompDecodedDiv.appendChild(img); }, { maxWidth: 300 });
 
 });