112 lines
4.4 KiB
HTML
112 lines
4.4 KiB
HTML
<style>
|
|
.button {
|
|
cursor: pointer;
|
|
}
|
|
</style>
|
|
|
|
<body>
|
|
<ul id='messages'></ul>
|
|
</body>
|
|
|
|
<body style="background-color: #121212">
|
|
<div>
|
|
<img id="image" src="http://localhost:3000/image" width="700" style="display: block; margin: auto; image-rendering: pixelated;" />
|
|
<br>
|
|
<div style="position: absolute; left: 50%; transform: translate(-50%, 0);">
|
|
<a id="UP" class="button">
|
|
<img src="https://raw.githubusercontent.com/Giingu/Giingu/main/images/blank.png" width="35" />
|
|
<img src="https://raw.githubusercontent.com/Giingu/Giingu/main/images/up.png" width="35" />
|
|
</a>
|
|
<br>
|
|
<a id="LEFT" class="button">
|
|
<img src="https://raw.githubusercontent.com/Giingu/Giingu/main/images/left.png" width="35" />
|
|
</a>
|
|
<img src="https://raw.githubusercontent.com/Giingu/Giingu/main/images/blank.png" width="35" />
|
|
<a id="RIGHT" class="button">
|
|
<img src="https://raw.githubusercontent.com/Giingu/Giingu/main/images/right.png" width="35" />
|
|
</a>
|
|
<img src="https://raw.githubusercontent.com/Giingu/Giingu/main/images/blank.png" width="35" />
|
|
<img src="https://raw.githubusercontent.com/Giingu/Giingu/main/images/blank.png" width="35" />
|
|
<img src="https://raw.githubusercontent.com/Giingu/Giingu/main/images/blank.png" width="35" />
|
|
<a id="B" class="button">
|
|
<img src="https://raw.githubusercontent.com/Giingu/Giingu/main/images/B.png" width="35" />
|
|
</a>
|
|
<a id="A" class="button">
|
|
<img src="https://raw.githubusercontent.com/Giingu/Giingu/main/images/A.png" width="35" />
|
|
</a>
|
|
<br>
|
|
<a id="DOWN" class="button">
|
|
<img src="https://raw.githubusercontent.com/Giingu/Giingu/main/images/blank.png" width="35" />
|
|
<img src="https://raw.githubusercontent.com/Giingu/Giingu/main/images/down.png" width="35" />
|
|
</a>
|
|
<br>
|
|
<img src="https://raw.githubusercontent.com/Giingu/Giingu/main/images/blank.png" width="35" />
|
|
<img src="https://raw.githubusercontent.com/Giingu/Giingu/main/images/blank.png" width="35" />
|
|
<a id="SELECT" class="button">
|
|
<img src="https://raw.githubusercontent.com/Giingu/Giingu/main/images/select.png" height="35" />
|
|
</a>
|
|
<a id="START" class="button">
|
|
<img src="https://raw.githubusercontent.com/Giingu/Giingu/main/images/start.png" height="35" />
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/js-base64@3.7.2/base64.min.js"></script>
|
|
<script>
|
|
$(document).ready(function() {
|
|
|
|
function updateImage() {
|
|
toDataURL('http://localhost:3000/image', function(dataUrl) {
|
|
$('#image').attr('src', dataUrl);
|
|
updateImage();
|
|
});
|
|
}
|
|
|
|
function toDataURL(url, callback) {
|
|
var xhr = new XMLHttpRequest();
|
|
xhr.onload = function() {
|
|
var reader = new FileReader();
|
|
reader.onloadend = function() {
|
|
callback(reader.result);
|
|
}
|
|
reader.readAsDataURL(xhr.response);
|
|
};
|
|
xhr.open('GET', url);
|
|
xhr.responseType = 'blob';
|
|
xhr.send();
|
|
}
|
|
|
|
updateImage();
|
|
|
|
const controls = ["UP", "DOWN", "LEFT", "RIGHT", "A", "B", "SELECT", "START"];
|
|
const keyboard_key = {
|
|
"UP": "ArrowUp",
|
|
"DOWN": "ArrowDown",
|
|
"LEFT": "ArrowLeft",
|
|
"RIGHT": "ArrowRight",
|
|
"A": "Enter",
|
|
"B": "Return",
|
|
"SELECT": "KeyS",
|
|
"START": "KeyP"
|
|
};
|
|
|
|
$("body").keypress(function(key) {
|
|
console.log("key pressed: " + key);
|
|
});
|
|
|
|
for (const key in controls) {
|
|
const control = controls[key];
|
|
$("#" + control).click(() => {
|
|
console.log("click " + control);
|
|
var settings = {
|
|
"url": "http://localhost:3000/control?button=" + control,
|
|
"method": "GET",
|
|
"timeout": 0,
|
|
};
|
|
|
|
$.ajax(settings).done(function(response) {});
|
|
})
|
|
}
|
|
});
|
|
</script> |