Skip to content
This repository was archived by the owner on Mar 28, 2024. It is now read-only.

Commit

Permalink
Merge pull request #1 from fhrk-78/master
Browse files Browse the repository at this point in the history 
画像のプレビュー機能の実装
  • Loading branch information
Marumasa authored Mar 28, 2024
2 parents 2f8455e + ae3f6de commit 8a4d6e4
Show file tree
Hide file tree
Showing 4 changed files with 89 additions and 46 deletions.
2 changes: 1 addition & 1 deletion src/main/java/marumasa/maruma_sign_webui/http/service/WebUIService.java
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ public class WebUIService {

// アクセスできるファイルのパス一覧
private static final String[] allowPaths = {
"/index.html", "/style.css", "/script.js", "/utils.js", "/favicon.ico"
"/index.html", "/style.css", "/script.js", "/utils.js", "/preview.js", "/favicon.ico"
};

public static void Handle(HttpExchange exchange) throws IOException {
Expand Down
88 changes: 47 additions & 41 deletions src/main/resources/webui/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,50 +11,56 @@
</head>

<body>
<div class="main">
<div class="input">
<div class="box">
<label class="upload">
<input type="file" id="upload" name="upload" accept=".png, .jpg, .jpeg, .gif"
onchange="onFile(this)" aria-label="file" />
</label>
<label>
<p class="form">画像アドレス</p><input type="text" id="address" autocomplete="url" aria-label="address">
</label>
<label>
<p class="form">横幅</p><input type="number" id="width" value="1">
</label>
<label>
<p class="form">高さ</p><input type="number" id="height" value="1">
</label>
</div>
<div class="box">
<label>
<p class="form">X軸位置</p><input type="number" id="x" value="0">
</label>
<label>
<p class="form">Y軸位置</p><input type="number" id="y" value="0">
</label>
<label>
<p class="form">Z軸位置</p><input type="number" id="z" value="0">
</label>
</div>
<div class="box">
<label>
<p class="form">X軸回転</p><input type="number" id="rx" value="0">
</label>
<label>
<p class="form">Y軸回転</p><input type="number" id="ry" value="0">
</label>
<label>
<p class="form">Z軸回転</p><input type="number" id="rz" value="0">
</label>
</div>
<div class="run">
<input type="submit" value="giveコマンド実行" onclick="toMC()">
<div class="flex">
<div class="main">
<div class="input">
<div class="box">
<label class="upload">
<input type="file" id="upload" name="upload" accept=".png, .jpg, .jpeg, .gif"
onchange="onFile(this)" aria-label="file" />
</label>
<label>
<p class="form">画像アドレス</p><input type="text" id="address" autocomplete="url" aria-label="address">
</label>
<label>
<p class="form">横幅</p><input type="number" id="width" value="1">
</label>
<label>
<p class="form">高さ</p><input type="number" id="height" value="1">
</label>
</div>
<div class="box">
<label>
<p class="form">X軸位置</p><input type="number" id="x" value="0">
</label>
<label>
<p class="form">Y軸位置</p><input type="number" id="y" value="0">
</label>
<label>
<p class="form">Z軸位置</p><input type="number" id="z" value="0">
</label>
</div>
<div class="box">
<label>
<p class="form">X軸回転</p><input type="number" id="rx" value="0">
</label>
<label>
<p class="form">Y軸回転</p><input type="number" id="ry" value="0">
</label>
<label>
<p class="form">Z軸回転</p><input type="number" id="rz" value="0">
</label>
</div>
<div class="run">
<input type="submit" value="giveコマンド実行" onclick="toMC()">
</div>
</div>
</div>
<div class="sub">
<img id="previewimg" src="" />
</div>
</div>
<script src="preview.js" async defer></script>
</body>

</html>
26 changes: 26 additions & 0 deletions src/main/resources/webui/preview.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
// HTMLElement取得
const imgelem = document.getElementById('previewimg');
const urlinput = document.getElementById("address");

// URLが変更されたときにリソースを置き換えする
function detectChangeURL() {
console.log('URL Change Detected');

// initエラーチェック
if (imgelem == null | urlinput == null | urlinput.value == undefined | imgelem.src == undefined) {
console.error('Cannnot get HTMLElement')
return;
}

const imgurl = urlinput.value;
imgelem.src = imgurl;

// 読み込み正常完了
imgelem.onload = () => console.log(`Loaded image: ${imgurl}`);

// 読み込み異常終了
imgelem.onerror = () => console.error(`Cannnot get Image: ${imgurl}`);
}

// イベントリスナーにchangeイベントを登録する
urlinput.addEventListener('change', detectChangeURL);
19 changes: 15 additions & 4 deletions src/main/resources/webui/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,10 @@ body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.flex {
display: flex;
}

label {
display: flex;
}
Expand All @@ -13,10 +17,10 @@ a img {
}

.box {
width: 80%;
margin: 50px;
margin-left: auto;
margin-right: auto;
width: 60vw;
padding: 50px;
padding-left: auto;
padding-right: auto;
}

.box p {
Expand Down Expand Up @@ -158,4 +162,11 @@ input#upload {
.upload {
display: flex;
justify-content: flex-end;
}

#previewimg {
width: 20vw;
padding: 50px;
padding-left: auto;
padding-right: auto;
}

0 comments on commit 8a4d6e4

Please sign in to comment.