Skip to content

Commit

Permalink
Merge pull request #24 from lawrencexli/client_app
Browse files Browse the repository at this point in the history 
Updated Client app v1
  • Loading branch information
@lawrencexli
lawrencexli authored Dec 18, 2023
2 parents ebd4d93 + a448a60 commit 4f663ca
Show file tree
Hide file tree
Showing 3 changed files with 184 additions and 100 deletions.
200 changes: 113 additions & 87 deletions Image_Client/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,98 +9,124 @@
<script src="script.js"></script>
<link rel="stylesheet" href="style.css">

<title>Image Client</title>
<link rel="apple-touch-icon" sizes="180x180" href="./resources/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="./resources/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="./resources/favicon-16x16.png">

<title>CKLT 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>
<br>
<div id="img_overlay" class="img_func_box">
<b>Overlay</b><br><br>
<form id="img_overlay_form" name="img_overlay_form">
<label for="x_start">X begin:</label>
<input type="text" size="5" id="x_start"><br><br>
<label for="y_start">Y begin:</label>
<input type="text" size="5" id="y_start"><br><br>
<label for="back_dropdown">Select Background</label>
<select name="back_dropdown" id="back_dropdown">
<div class="row">
<div class="column">
<div id="img_upload" class="img_func_box">
<form id="img_upload_form" name="img_upload_form">
<label for="img_input">
<b class="func_title">Upload Image</b>
<br><br>
</label>
<input type="file" name="img_input" id="img_input" onchange="previewImage(event)"><br><br>
<div class="preview">
<img id="preview-selected-image" src=""/>
</div>
<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>
<br><br>
<select name="img_dropdown" id="img_dropdown">
<option>--select--</option>
</select>
<br>
<br>
<label for="fore_dropdown">Select Foreground</label>
<select name="fore_dropdown" id="fore_dropdown">
<option>--select--</option>
</select>
<br>
<br>
<button type="button" id="img_overlay_btn">Apply</button>
</form>
</div>
<br>
<div id="img_dropdown" class="img_func_box">
<b class="func_title">Download Image</b>
<br><br>
<button type="button" id="img_download_btn">Download</button>
</div>
</div>

<div class="column">
<div id="img_crop" class="img_func_box">
<b class="func_title">Crop</b>
<br><br>
<form id="img_crop_form" name="img_crop_form">
<div class="row">
<div class="column">
<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>
</div>
<div class="column">
<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>
</div>
</div>
<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 class="func_title">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>
<br><br>
<button type="button" id="img_tran_btn">Apply</button>
</form>
</div>
<br>
<div id="img_satu" class="img_func_box">
<b class="func_title">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>
<br><br>
<button type="button" id="img_satu_btn">Apply</button>
</form>
</div>
<br>
<div id="img_overlay" class="img_func_box">
<b class="func_title">Overlay</b>
<br><br>
<form id="img_overlay_form" name="img_overlay_form">
<div class="row">
<div class="column">
<label for="x_start">X begin:</label>
<input type="text" size="5" id="x_start"><br><br>
<label for="y_start">Y begin:</label>
<input type="text" size="5" id="y_start">
</div>
<div class="column">
<label for="back_dropdown">Select Background</label>
<select name="back_dropdown" id="back_dropdown">
<option>--select--</option>
</select>
<br>
<br>
<label for="fore_dropdown">Select Foreground</label>
<select name="fore_dropdown" id="fore_dropdown">
<option>--select--</option>
</select>
</div>
</div>
<br>
<br>
<button type="button" id="img_overlay_btn">Apply</button>
</form>
</div>
</div>
</div>
</body>
Expand Down
11 changes: 11 additions & 0 deletions Image_Client/script.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -76,6 +76,17 @@ $(function () {
});
});

const previewImage = (event) => {
const imageFiles = event.target.files;
const imageFilesLength = imageFiles.length;
if (imageFilesLength > 0) {
const imageSrc = URL.createObjectURL(imageFiles[0]);
const imagePreviewElement = document.querySelector("#preview-selected-image");
imagePreviewElement.src = imageSrc;
imagePreviewElement.style.display = "block";
}
};

async function generate_id() {
const response = await fetch("http://localhost:8080/api/generate");
const data = await response.json();
Expand Down
73 changes: 60 additions & 13 deletions Image_Client/style.css
View file
Original file line number Diff line number Diff line change
@@ -1,22 +1,69 @@
.img_io {
width: 30%;
float: left;
height: 100px;
* {
font-family: Arial;
}

.img_view {
width: 20%;
float: left;
height: 100px;
body {
background-image: linear-gradient(orange, #DA5552);
}

.img_func {
width: 30%;
float: left;
height: 100px;
.row {
display: flex;
padding: 25px;
column-gap: 10%;
}

.column {
flex: 50%;
float: center;
width: 45%;
}

img {
border: 2px solid #555;
display: block;
margin-left: auto;
margin-right: auto;
width: 90%;
}

img[src=""] {
display: none;
}

.img_func_box {
background-color: gainsboro;
border-radius: 25px;
background-color: aqua;
padding: 25px;
float: center;
justify-content: center;
text-align: center;
box-shadow: 10px 10px;
object-fit: contain;
}

button {
outline: 0;
color: #fff;
background-color: #0d6efd;
border-color: #0d6efd;
display: inline-block;
font-weight: 400;
line-height: 1.5;
text-align: center;
border: 1px solid transparent;
padding: 6px 12px;
font-size: 16px;
border-radius: .25rem;
transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

button:hover {
color: #fff;
background-color: #0b5ed7;
border-color: #0a58ca;
}

.func_title {
font-family: Arial, Helvetica, sans-serif;
float: center;
}

0 comments on commit 4f663ca

Please sign in to comment.