Merge pull request #16 from lawrencexli/tiger_client

Client finished
lawrencexli · Nov 28, 2023 · e0f1730 · e0f1730
2 parents 1e90905 + e9465f3
commit e0f1730
Show file tree

Hide file tree

Showing 5 changed files with 317 additions and 2 deletions.
diff --git a/Image_Client/index.html b/Image_Client/index.html
@@ -0,0 +1,85 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
+    <script src="script.js"></script>
+    <link rel="stylesheet" href="style.css">
+
+    <title>Image Client</title>
+</head>
+
+<body>
+    <div class="img_io">
+        <div id="img_upload" class="img_func_box">
+            <form id="img_upload_form" name="img_upload_form">
+                <label for="img_input"><b>Upload Image</b><br><br></label>
+                <input type="file" name="img_input" id="img_input"><br><br>
+                <div id="uploaded_img"></div><br>
+                <button type="button" id="img_upload_btn">submit</button>
+            </form>
+        </div>
+        <br>
+        <div id="img_select" class="img_func_box">
+            <label for="img_dropdown"><b>Select Image</b></label>
+            <select name="img_dropdown" id="img_dropdown">
+                <option>--select--</option>
+            </select>
+        </div>
+        <br>
+        <div id="img_dropdown" class="img_func_box">
+            <b>Download Image</b>
+            <button type="button" id="img_download_btn">Download</button>
+        </div>
+    </div>
+
+    <div class="img_view"></div>
+
+    <div class="img_func">
+        <div id="img_crop" class="img_func_box">
+            <b>Crop</b><br><br>
+            <form id="img_crop_form" name="img_crop_form">
+                <label for="img_x">X:</label>
+                <input type="text" size="5" id="img_x"><br><br>
+                <label for="img_y">Y:</label>
+                <input type="text" size="5" id="img_y"><br><br>
+                <label for="img_w">Width:</label>
+                <input type="text" size="5" id="img_w"><br><br>
+                <label for="img_h">Height:</label>
+                <input type="text" size="5" id="img_h"><br><br>
+
+                <button type="button" id="img_crop_btn">Apply</button>
+                <!-- <input type="submit" value="Apply" form="img_crop_form"> -->
+            </form>
+        </div>
+        <br>
+        <div id="img_tran" class="img_func_box">
+            <b>Transparency</b><br><br>
+            <form id="img_tran_form" name="img_tran_form">
+                <label for="alpha">Alpha</label>
+                <input type="range" id="alpha" min="0" max="1" step="0.1" class="slider" value="0.5"
+                    oninput="this.nextElementSibling.value = this.value">
+                <output>0.5</output>
+                <!-- <input type="submit" value="Apply" form="img_tran_form"> -->
+                <button type="button" id="img_tran_btn">Apply</button>
+            </form>
+        </div>
+        <br>
+        <div id="img_satu" class="img_func_box">
+            <b>Saturation</b><br><br>
+            <form id="img_satu_form" name="img_satu_form">
+                <label for="sat_coeff">Saturation Coeff</label>
+                <input type="range" id="sat_coeff" min="0" max="255" class="slider" value="100"
+                    oninput="this.nextElementSibling.value = this.value">
+                <output>100</output>
+                <!-- <input type="submit" value="Apply" form="img_satu_form"> -->
+                <button type="button" id="img_satu_btn">Apply</button>
+            </form>
+        </div>
+    </div>
+</body>
+
+</html>
diff --git a/Image_Client/script.js b/Image_Client/script.js
@@ -0,0 +1,208 @@
+'use strict'
+let uploaded_img;
+let id = '';
+let selected_img;
+let op = 0;
+
+$(function () {
+    $('#img_upload_btn').click(async function () {
+        if (id == '') {
+            await generate_id();
+            upload_img();
+        } else {
+            upload_img();
+        }
+    });
+});
+
+$(function () {
+    $('#img_input').change(function () {
+        let fileName = this.files[0].name;
+        uploaded_img = this.files[0];
+        $("#uploaded_img").empty();
+        $("#uploaded_img").append(fileName + '<br>')
+    });
+});
+
+$(function () {
+    $('#img_crop_btn').click(function () {
+        if (get_selected_img()) {
+            let x = $("#img_x").val();
+            let y = $("#img_y").val();
+            let width = $("#img_w").val();
+            let height = $("#img_h").val();
+            // console.log(x, y, width, height);
+            img_crop(x, y, width, height);
+        }
+    });
+});
+
+$(function () {
+    $('#img_tran_btn').click(function () {
+        if (get_selected_img()) {
+            let alpha = $("#alpha").val();
+            img_trans(alpha);
+            // console.log(alpha);
+        }
+    });
+});
+
+$(function () {
+    $('#img_satu_btn').click(function () {
+        if (get_selected_img()) {
+            let sat = $("#sat_coeff").val();
+            img_satu(sat);
+            // console.log(values);
+        }
+    });
+});
+
+$(function () {
+    $("#img_download_btn").click(function () {
+        if (get_selected_img()) {
+            img_download();
+        }
+    });
+});
+
+async function generate_id() {
+    const response = await fetch("http://localhost:8080/api/generate");
+    const data = await response.json();
+    console.log(data);
+    id = data.responseMessage;
+}
+
+async function upload_img() {
+    let formData = new FormData();
+    // formData.append("id", id);
+    formData.append("file", uploaded_img);
+
+    fetch("http://localhost:8080/api/upload", {
+        method: "POST",
+        body: formData,
+        headers: {
+            'id': id,
+        },
+    })
+        .then((response) => response.json())
+        .then((json) => console.log(json));
+
+    let option = '<option>' + uploaded_img.name + '</option>';
+    $("#img_dropdown").append(option);
+}
+
+async function img_download() {
+    let formData = new FormData();
+    formData.append("id", id);
+    formData.append("fileName", selected_img);
+
+    const response = await fetch("http://localhost:8080/api/download?" + new URLSearchParams({
+        "fileName": selected_img
+    }), {
+        method: "GET",
+        mode: "cors",
+        headers: {
+            'id': id,
+        },
+    });
+
+    if (response.ok) {
+        const myBlob = await response.blob();
+        var a = document.createElement("a");
+        const url = window.URL.createObjectURL(myBlob);
+        a.href = url;
+        a.download = selected_img;
+        a.click();
+        window.URL.revokeObjectURL(url);
+    } else {
+        const data = await response.json();
+        console.log(data);
+    }
+}
+
+async function img_trans(alpha) {
+    let formData = new FormData();
+
+    let result_img = "alpha" + alpha + "_" + op.toString() + "_" + selected_img;
+    op++;
+
+    // formData.append("id", id);
+    formData.append("target", selected_img);
+    formData.append("result", result_img);
+    formData.append("alpha", alpha);
+
+    const response = await fetch("http://localhost:8080/api/transparent", {
+        method: "PUT",
+        body: formData,
+        headers: {
+            'id': id,
+        },
+    })
+    const data = await response.json();
+    console.log(data);
+
+    let option = '<option>' + result_img + '</option>';
+    $("#img_dropdown").append(option);
+}
+
+async function img_crop(x, y, width, height) {
+    let formData = new FormData();
+    let result_img = "crop" + op.toString() + "_" + selected_img;
+    op++;
+
+    // formData.append("id", id);
+    formData.append("target", selected_img);
+    formData.append("result", result_img);
+    formData.append("x", x);
+    formData.append("y", y);
+    formData.append("width", width);
+    formData.append("height", height);
+
+    fetch("http://localhost:8080/api/crop", {
+        method: "PUT",
+        body: formData,
+        headers: {
+            'id': id,
+        },
+    })
+        .then((response) => response.json())
+        .then((json) => console.log(json));
+
+    let option = '<option>' + result_img + '</option>';
+    $("#img_dropdown").append(option);
+}
+
+async function img_satu(saturationCoeff) {
+    let formData = new FormData();
+
+    let result_img = "sat_" + saturationCoeff + "_" + op.toString() + "_" + selected_img;
+    op++;
+
+    // formData.append("id", id);
+    formData.append("target", selected_img);
+    formData.append("result", result_img);
+    formData.append("saturationCoeff", saturationCoeff);
+
+    const response = await fetch("http://localhost:8080/api/saturation", {
+        method: "PUT",
+        body: formData,
+        headers: {
+            'id': id,
+        },
+    })
+    const data = await response.json();
+    console.log(data);
+
+    let option = '<option>' + result_img + '</option>';
+    $("#img_dropdown").append(option);
+}
+
+function get_selected_img() {
+    selected_img = $("#img_dropdown :selected").val();
+    if (selected_img == "--select--") {
+        return false;
+    } else {
+        return true;
+    }
+}
+
diff --git a/Image_Client/style.css b/Image_Client/style.css
@@ -0,0 +1,22 @@
+.img_io {
+    width: 30%;
+    float: left;
+    height: 100px;
+}
+
+.img_view {
+    width: 20%;
+    float: left;
+    height: 100px;
+}
+
+.img_func {
+    width: 30%;
+    float: left;
+    height: 100px;
+}
+
+.img_func_box {
+    background-color: gainsboro;
+    padding: 25px;
+}
diff --git a/README.md b/README.md
@@ -226,7 +226,7 @@ set up. Go to the index page in your browser and check if `Welcome to IPMS!` mes
 > |--------|----------|-----------|--------------------------------------------------------|
 > | target | required | string    | Image filename targeted for processing                 |
 > | result | required | string    | Desired filename for the image result after processing |
-> | alpha  | required | float     | Desired alpha value for transparency                   |
+> | alpha  | required | string     | Desired alpha value for transparency                   |
 
 ##### Header
 

diff --git a/src/test/java/com/project/ipms/controller/FileControllerTest.java b/src/test/java/com/project/ipms/controller/FileControllerTest.java
@@ -832,7 +832,7 @@ void testImageSaturation1() throws IOException {
             mockUtil.when(() -> ImageFileUtil.checkFileValid(testResult)).
                     thenReturn(".png");
 
-            ApiResponse response = testFileController.imageTransparent(testTarget, testResult, testID, saturationCoeff);
+            ApiResponse response = testFileController.imageSaturate(testTarget, testResult, testID, saturationCoeff);
             assertEquals(response.getResponseMessage(), "Operation success");
             assertEquals(response.getStatusCode(), 200);
         }