removed border of buttons and add refresh button to image viewer widget

WebGde/WebContent/WebGde-Widgets/ImageViewerWidget/modules/imageViewer/imageViewer.css

@@ -103,7 +103,7 @@ body {
 
 .image-btn-control{
     width: fit-content;
-    /* border: 1px solid #fff; */
+    border: 0px solid #fff;
     color: white;
     height: 5vh;
     width: 5vh;
@@ -119,48 +119,39 @@ body {
 
 #fitContentBtn{
     background: no-repeat center/90% url("./resources/fullscreen_icon.png"); 
-    /* background-color: #000; */
 }
 
 #flipVerticalBtn{
     background: no-repeat center/90% url("./resources/flip_vertical_icon.png");
-    /* background-color: #000; */
 }
 
 #flipHorizontalBtn{
     background: no-repeat center/90% url("./resources/flip_horizontal_icon.png");
-    /* background-color: #000; */
 }
 
 #leftRotateBtn{
     background: no-repeat center/90% url("./resources/rotate_left_icon.png");
-    /* background-color: #000; */
 }
 
 #rightRotateBtn{
     background: no-repeat center/90% url("./resources/rotate_right_icon.png");
-    /* background-color: #000; */
 }
 
 #zoomInBtn{
     background: no-repeat center/90% url("./resources/zoom_in_icon.png");
-    /* background-color: #000; */
 }
 
 #zoomOutBtn{
     background: no-repeat center/90% url("./resources/zoom_out_icon.png");
-    /* background-color: #000; */
 }
 
 #previousRecordImage{
     background: no-repeat center/90% url("./resources/previous_rec.png");
-    /* background-color: #000; */
     margin-left: 1px;
 }
 
 #nextRecordImage{
     background: no-repeat center/90% url("./resources/next_rec.png");
-    /* background-color: #000; */
     margin-right: 2px;
 }
 
@@ -178,12 +169,14 @@ body {
 
 #previousPageBtn{
     background: no-repeat center/90% url("./resources/previous_icon.png");
-    /* background-color: #000; */
 }
 
 #nextPageBtn{
     background: no-repeat center/90% url("./resources/next_icon.png");
-    /* background-color: #000; */
+}
+
+#refreshCurrentImage{
+    background: no-repeat center/90% url("./resources/refresh_icon.png") ;
 }
 
 #imageViewerHeader .row{
@@ -206,7 +199,7 @@ body {
     display: none;
 } 
 
-.progress-bar__container {
+/* .progress-bar__container {
     width: 80%;
     height: 2rem;
     border-radius: 2rem;
@@ -236,4 +229,4 @@ body {
   
   .progress-bar__text {
     display: none;
-  }
\ No newline at end of file
+  } */
\ No newline at end of file

WebGde/WebContent/WebGde-Widgets/ImageViewerWidget/modules/imageViewer/imageViewer.js

@@ -462,14 +462,21 @@ export class ImageViewer {
         this.previousPageButton.setAttribute("id", "previousPageBtn");
         this.previousPageButton.setAttribute("class", "button image-btn-control");
 
-
         pagesDiv.appendChild(this.previousPageButton);
         pagesDiv.appendChild(pageDetails);
         pagesDiv.appendChild(this.nextPageButton);
 
+        let refreshDiv = document.createElement("div");
+        refreshDiv.setAttribute("class", "row");
+        let refreshBtn = document.createElement("button");
+        refreshBtn.setAttribute("id", "refreshCurrentImage");
+        refreshBtn.setAttribute("class", "button image-btn-control");
+        refreshBtn.setAttribute("title", "Refresh");
+        refreshDiv.appendChild(refreshBtn);
 
         header.appendChild(fileNameDiv);
         header.appendChild(pagesDiv);
+        header.appendChild(refreshDiv);
 
         return header;
     }

WebGde/WebContent/WebGde-Widgets/config.js

@@ -38,9 +38,9 @@ export const  HIGH_LIGHT_SCHEMA = "./WebGde-Widgets/sample_schema/dbSchema_anno.
 export const ROOT_FOLDER = "/WebGde-Widgets";
 
 //this determines if the images will be retrieved from the gfs
-export const  DOMAIN = "http://3.82.122.231:8080"
+export const  DOMAIN = "http://184.73.93.160:8080"
 export const  CONTEXTROOT = "gfs-explorer-ws"
-export const  GFS_URL = "http://3.82.122.231:8080" + "/WebGde/svc/gfs-rest"
+export const  GFS_URL = "http://184.73.93.160:8080" + "/WebGde/svc/gfs-rest"
 export const  FOLDER_URL = DOMAIN + "/" + CONTEXTROOT + "/svc/gfs-rest/get-folder?parentPath=/Users/"
 export const  DOWNLOAD_URL = DOMAIN + "/" + CONTEXTROOT +  "/svc/gfs-rest/get-download-link"
 export const  IS_RETRIEVE_FROM_GFS = "N"
@@ -51,7 +51,7 @@ export const  INVALID_KEYS = "F1,F2,F3,F4,F5,F6,F7,F8,F9,F10,F11,F12,PrintScreen
 export const  IS_RETRIEVE_FROM_BPO = "Y"
 // export const  BPO_URL = "http://35.171.20.94:8080/bpo-sqa/"
 // export const  CURRENT_NODE = "Web GDE"
-export const  BPO_URL = "http://3.82.122.231:8080/bpo/"
+export const  BPO_URL = "http://184.73.93.160:8080/bpo/"
 export const  CURRENT_NODE = "Web_GDE_DEV"
 export const  ENCODING_PASS = "PASS1"
 export const  NEXT_NODE = "Complete"

WebGde/WebContent/WebGde-Widgets/globalVariable.js

@@ -5,6 +5,7 @@ export let BPO_OBJECT = null;
 
 export let INDEXED_DB_NAME = "ImageDB";
 export let INDEXED_DB_TBL_NAME = "images";
+export let DISPLAY_FIELD_OBJECT = null;
 
 
 export function setIndexedDBStorage(DBOject){
@@ -21,4 +22,8 @@ export function setHighlightObject(HObject){
 
 export function setBPOObject(BPO){
     BPO_OBJECT = BPO;
+}
+
+export function setDisplayFieldObject(displayField){
+    DISPLAY_FIELD_OBJECT = displayField;
 }
\ No newline at end of file

WebGde/WebContent/script.js

@@ -11,9 +11,6 @@ import { DocumentControlWidget } from "./WebGde-Widgets/documentControlWidget/do
 import { INDEXED_DB_STORAGE , HIGHLIGHT_OBJECT, IMAGE_VIEWER_OBJECT, INDEXED_DB_NAME, INDEXED_DB_TBL_NAME, setIndexedDBStorage, setHighlightObject, setImageViewerObject, setBPOObject, BPO_OBJECT } from "./WebGde-Widgets/globalVariable.js";
 import { searchStringInArray, startMetricCapture, keyArray } from "./WebGde-Widgets/captureMetrics/captureMetrics.js";
 
-
-
-
 export async function startApplication(){
     createLoadingScreen();
     await initializeWebGDE();   
@@ -36,7 +33,7 @@ async function initializeWebGDE(){
     //     "https://images.unsplash.com/source-404?fit=crop&fm=jpg&h=800&q=60&w=1200"
     // ];
 
-    sessionStorage.setItem("dir_files", JSON.stringify(urls));
+    //sessionStorage.setItem("dir_files", JSON.stringify(urls));
     
 
 
@@ -193,6 +190,16 @@ async function createImageViewer() {
         getFiles();
     });
 
+    let refresh = document.getElementById("refreshCurrentImage");
+    refresh.addEventListener("click", async ()=>{
+        document.getElementById("currentImage").remove();
+        let urls = JSON.parse(sessionStorage.getItem("dir_files"));
+        let currentDisplayIndex = parseInt(sessionStorage.getItem("display_counter"));
+        const url = urls[currentDisplayIndex-1];
+        let filename = url.split('/').pop(); 
+        let imageBlob = await INDEXED_DB_STORAGE.getStoreFile("imageNum_"+ currentDisplayIndex);
+        await IMAGE_VIEWER_OBJECT.createCurrentImage(filename.split(".").pop(), filename, imageBlob);
+    });
 };
 
 export const getFiles = async () => {