added viewer for jpg and png

WebGde/WebContent/config.js

@@ -49,12 +49,14 @@ var INVALID_KEYS = "F1,F2,F3,F4,F5,F6,F7,F8,F9,F10,F11,F12,PrintScreen,ScrollLoc
 //BPO CONFIG
 var IS_RETRIEVE_FROM_BPO = "Y"
 var BPO_URL = "http://35.169.23.0:8080/bpo/"
-var CURRENT_NODE = "Web_GDE_DEV"
+var CURRENT_NODE = "Web_GDE_DEV_2"
 var ENCODING_PASS = "PASS1"
 var NEXT_NODE = "Complete_DEV"
 var EXCEPTION_NODE = "Exception_DEV"
 
 var PDF_EXTENSION = ".pdf"
+var JPG_EXTENSION = ".jpg"
+var PNG_EXTENSION = ".png"
 
 var REASON_LIST = "Reason1,Reason2,Reason3,Reason4"
 

WebGde/WebContent/index.html

@@ -216,6 +216,7 @@
 <script src="./src/getFields/getFields.js"></script> <!--  display the input fields -->
 <script src="./src/accessFile/accessFile.js"></script>
 <script src="./src/pdfviewer/pdfv.js"></script>
+<script src="./src/imgviewer/imgviewer.js"></script>
 <script>
 
 const TiffViewer_refresh = document.getElementById("refresh");

WebGde/WebContent/src/imgviewer/imgviewer.js

+var displayImg = function(doc){ //test display image
+	//Create all Elements          		
+    const container = document.createElement('div');
+    container.setAttribute('id', 'img-container');
+    
+    let tiffHeader = document.getElementById("TiffModalHeader");
+    
+    var tiffbody = document.getElementById("TiffModalBody");
+    
+    var tiffFooter = document.getElementById("TiffModalFooter");
+    
+    var controllsContainer = document.createElement("div");
+    controllsContainer.setAttribute('id', 'controlsContainerImg');
+
+    //Info Section
+    var pageButtonInfoContainer = document.createElement("div");
+    pageButtonInfoContainer.classList.add("pageButtonInfoContainer");
+   
+    //Buttons Section
+    let centerContainer = document.createElement("div");
+    centerContainer.classList.add("footerCenterContainer");
+    
+    var fitContentButton = document.createElement("div");
+    fitContentButton.setAttribute('id', 'fit-content');
+    fitContentButton.classList.add("TiffViewer_ButtonClass");
+    const fitContentIcon = addIcon("Fit Content", "full_content_icon.png");
+    
+    var zoomInButton = document.createElement('div');
+    zoomInButton.setAttribute('id', 'zoom-in');
+    zoomInButton.classList.add("TiffViewer_ButtonClass");
+    const zoomInIcon = addIcon("Zoom In", "zoom_in_icon.png");
+    
+    var zoomOutButton = document.createElement('div');
+    zoomOutButton.setAttribute('id', 'zoom-out');
+    zoomOutButton.classList.add("TiffViewer_ButtonClass");
+    const zoomOutIcon = addIcon("Zoom Out", "zoom_out_icon.png");
+    
+    var zoomInfo = document.createElement('span');
+    zoomInfo.setAttribute('id', 'zoom-level');
+    
+    var rotateRightButton = document.createElement('div');
+    rotateRightButton.setAttribute('id', 'rotate-right');
+    rotateRightButton.classList.add("TiffViewer_ButtonClass");
+    const rotateRightIcon = addIcon("Rotate Right", "rotate_right_icon.png");
+
+    var rotateLeftButton = document.createElement('div');
+    rotateLeftButton.setAttribute('id', 'rotate-left');
+    rotateLeftButton.classList.add("TiffViewer_ButtonClass");
+    const rotateLeftIcon = addIcon("Rotate Left", "rotate_left_icon.png"); 
+    
+    var flipVerticalButton = document.createElement('div');
+    flipVerticalButton.setAttribute('id', 'flip-vertical');
+    flipVerticalButton.classList.add("TiffViewer_ButtonClass");
+    const flipVerticalIcon = addIcon("Flip Vertical", "flip_vertical_icon.png");
+
+    var flipHorizontalButton = document.createElement('div');
+    flipHorizontalButton.setAttribute('id', 'flip-horizontal');
+    flipHorizontalButton.classList.add("TiffViewer_ButtonClass");
+    const flipHorizontalIcon = addIcon("Flip Horizontal", "flip_horizontal_icon.png");
+    
+    //canva's
+    var canvas = document.createElement('canvas');
+    var img = new Image();
+        img.src = doc;
+       	img.width = 900;
+		img.height = 1200;	
+	var scale = 1;
+	// Set zoom level to 30%
+	var fitContent = false;
+	var zoom = 1;
+    var originalWidth = 0;
+    var originalHeight = 0;
+    // Set initial rotation angle to 0 degrees
+	var rotationAngle = 0;
+    // Set initial flip flags to false
+	var flipHorizontal = false;
+	var flipVertical = false;    
+        
+    var ctx = canvas.getContext('2d');
+    
+    img.onload = function() {
+            canvas.width = img.width;
+            canvas.height = img.height;
+            originalWidth = img.width;
+            originalHeight = img.height;
+            ctx.drawImage(img, 0, 0, img.width * zoom, img.height * zoom);
+    };      
+    
+    //Body
+    container.appendChild(canvas);
+    tiffbody.appendChild(container);
+    
+    //Footer
+    controllsContainer.appendChild(centerContainer);
+    tiffFooter.appendChild(controllsContainer);
+    
+    //Header 
+ 	pageButtonInfoContainer.append(zoomInfo);
+    tiffHeader.append(pageButtonInfoContainer);
+    
+    //Icons
+    fitContentButton.append(fitContentIcon);   
+    zoomInButton.append(zoomInIcon);
+    zoomOutButton.append(zoomOutIcon);
+    rotateRightButton.append(rotateRightIcon);
+    rotateLeftButton.append(rotateLeftIcon);
+    flipVerticalButton.append(flipVerticalIcon);
+    flipHorizontalButton.append(flipHorizontalIcon);
+    
+    centerContainer.appendChild(fitContentButton);
+    centerContainer.appendChild(zoomInButton);
+    centerContainer.appendChild(zoomOutButton);
+    centerContainer.appendChild(rotateRightButton);
+    centerContainer.appendChild(rotateLeftButton);
+    centerContainer.appendChild(flipVerticalButton);
+    centerContainer.appendChild(flipHorizontalButton);
+        
+    //Events Function
+    fitContentButton.addEventListener('click', function() {
+			toggleFitContent();
+  	});
+  	
+  	document.addEventListener("keydown", function(e) {
+            if (e.shiftKey && e.key == 'F') {
+                toggleFitContent();
+            }
+   	});
+    
+        
+    function toggleFitContent() {
+        fitContent = !fitContent;
+          if (fitContent) {
+		    // Calculate zoom level to fit image to canvas
+		    var zoomX = canvas.width / img.width;
+		    var zoomY = canvas.height / img.height;
+		    zoom = Math.min(zoomX, zoomY);
+		
+		    // Center image on canvas
+		    var offsetX = (canvas.width - img.width * zoom) / 2;
+		    var offsetY = (canvas.height - img.height * zoom) / 2;
+		
+		    // Draw image on canvas with new zoom level and offset
+		    ctx.clearRect(0, 0, canvas.width, canvas.height);
+        	ctx.save();
+        	ctx.scale(scale, scale);
+		    ctx.drawImage(img, offsetX, offsetY, img.width * zoom, img.height * zoom);
+		    ctx.restore();
+		  } else {
+		    // Reset zoom level and redraw image on canvas
+		    zoom = 1;
+		    ctx.clearRect(0, 0, canvas.width, canvas.height);
+        	ctx.save();
+        	ctx.scale(scale, scale);
+		    ctx.drawImage(img, 0, 0, img.width * zoom, img.height * zoom);
+		    ctx.restore();
+		  }
+		  // Update zoom info display
+  		 document.getElementById('zoom-level').innerHTML = `Zoom: ${(zoom * 100).toFixed(0)}%`;
+    }
+    
+    
+    zoomInButton.addEventListener('click', function() {
+		zoomIn();
+  	});
+  	
+    document.addEventListener("keydown", (e) => {
+	    if (e.ctrlKey && e.key === "=") {
+	    	e.preventDefault();
+	        zoomIn();
+	    }
+    })
+    
+    zoomOutButton.addEventListener('click', function() {
+		zoomOut();
+  	});
+  	
+  	document.addEventListener("keydown", (e) => {
+        if (e.ctrlKey && e.key === "-") {
+        	e.preventDefault();	
+            zoomOut()
+        }
+    })
+    
+    function zoomIn() {
+        zoom += 0.1;
+        drawScaled(zoom);
+    }    
+    
+    function zoomOut() {
+        // Decrease zoom level by 0.1 (10%)
+  		zoom -= 0.1;
+  		// Draw image on canvas with new zoom level
+  		drawScaled(zoom);
+  		
+    }
+    
+    rotateLeftButton.addEventListener('click', function() {
+	  rotationAngle -= 90;	  
+	  rotationAngle = (rotationAngle + 360) % 360;
+	  drawImage();
+	});
+	
+	document.addEventListener("keydown", (e) => {
+	    if (e.shiftKey && e.code === 'ArrowDown') {
+	        e.preventDefault();
+	        rotationAngle -= 90;	  
+		    rotationAngle = (rotationAngle + 360) % 360;
+		    drawImage();
+	    }
+	})
+	
+	rotateRightButton.addEventListener('click', function() {
+	  rotationAngle += 90;
+	  rotationAngle = (rotationAngle + 360) % 360;
+	  drawImage();
+	});
+	
+    document.addEventListener("keydown", (e) => {
+	    if (e.shiftKey && e.code === 'ArrowUp') {
+	        e.preventDefault();
+	        rotationAngle += 90;
+		    rotationAngle = (rotationAngle + 360) % 360;
+		    drawImage();
+	    }
+    })
+    
+    flipHorizontalButton.addEventListener('click', function() {
+	  flipHorizontal = !flipHorizontal;
+	  drawImage();
+	});
+	
+	document.addEventListener("keydown", (e) => {
+        if (e.ctrlKey && e.shiftKey && e.key.toUpperCase() === "H") {
+            e.preventDefault();
+            flipHorizontal = !flipHorizontal;
+  			drawImage();
+        }
+    })
+
+	flipVerticalButton.addEventListener('click', function() {
+	  flipVertical = !flipVertical;
+	  drawImage();
+	});
+	
+    document.addEventListener("keydown", (e) => {
+	    if (e.ctrlKey && e.shiftKey && e.key.toUpperCase() === "V") {
+	        e.preventDefault();
+	        flipVertical = !flipVertical;
+	  		drawImage();
+	    }
+    })
+	
+	function drawImage() {
+	  ctx.clearRect(0, 0, canvas.width, canvas.height);	
+	  ctx.setTransform(
+	    flipHorizontal ? -zoom : zoom,
+	    0,
+	    0,
+	    flipVertical ? -zoom : zoom,
+	    canvas.width / 2,
+	    canvas.height / 2
+	  );
+	  ctx.rotate(rotationAngle * Math.PI / 180);
+	  ctx.drawImage(img, -img.width / 2, -img.height / 2, img.width, img.height);
+	  ctx.setTransform(1, 0, 0, 1, 0, 0);
+	  document.getElementById('zoom-level').innerHTML = `Zoom: ${(zoom * 100).toFixed(0)}%`;
+	}
+
+    
+    
+    function drawScaled(zoomLvl) {
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+        ctx.save();
+        ctx.scale(scale, scale);
+        ctx.drawImage(img, 0, 0, img.width * zoomLvl, img.height * zoomLvl);
+        ctx.restore();
+        document.getElementById('zoom-level').textContent = `Zoom: ${(zoomLvl * 100).toFixed(0)}%`;
+    }
+    
+       
+
+}
\ No newline at end of file