134 lines
5.0 KiB
HTML
134 lines
5.0 KiB
HTML
<!doctype html>
|
||
<html>
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<title>Webservices & Applications</title>
|
||
<link href="reset.css" rel="stylesheet" />
|
||
<link href="index.css" rel="stylesheet" />
|
||
</head>
|
||
|
||
<body>
|
||
<div>
|
||
<header>
|
||
<img class="logo" src="st.bmp" alt="STM"/>
|
||
<p class="title">
|
||
Webservices & Applications
|
||
</p>
|
||
</header>
|
||
|
||
<form action="cgi">
|
||
<div class="content row">
|
||
<div class="column left">
|
||
<div class="card">
|
||
<h2>Adjustments</h2>
|
||
<label for="send_text">Text LCD:</label>
|
||
<input type="text" id="send_text" name="vtxt"><br><br>
|
||
<label for="send_colorTxt">Select the text color:</label>
|
||
<input type="color" id="send_colorTxt" name="vktxt" value="#0000ff"><br><br>
|
||
<label for="send_colorBack">Select the background color:</label>
|
||
<input type="color" id="send_colorBack" name="vka" value="#0000ff"><br><br>
|
||
<!--<span class="sendButton" onClick="start();">
|
||
<input type="submit" value="Send">
|
||
</span>-->
|
||
<input type="submit" value="Send" class="sendButton" onClick="start();">
|
||
</div>
|
||
</div>
|
||
<div class="column right">
|
||
<div class="card">
|
||
<h2 >Images</h2>
|
||
<label for="vfo">Choose your photo:</label>
|
||
<div class="gallery" id="gallery">
|
||
<input type="hidden" id="gallery1" name="vfo" value="">
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</form>
|
||
<script>
|
||
|
||
document.getElementById('send_colorBack').addEventListener('input', function() { document.body.style.backgroundColor = this.value; });
|
||
document.getElementById('send_colorTxt').addEventListener('input', function() { document.getElementById('send_text').style.color = this.value; });
|
||
|
||
/*--------------------------------------------------------------*/
|
||
|
||
// Function to load images from the folder
|
||
function loadImages() {
|
||
console.log("loadImages");
|
||
const xhttp = new XMLHttpRequest();
|
||
|
||
xhttp.onload = function() {
|
||
const imageContainer = document.getElementById('gallery');
|
||
console.log(this.responseText);
|
||
images = this.responseText.split('|');
|
||
console.log(images);
|
||
for (let i = 0; i < images.length; i++) {
|
||
console.log(images[i]);
|
||
const img = document.createElement('img');;
|
||
img.src= images[i];
|
||
img.alt = images[i];
|
||
img.className = `image ${i}`;
|
||
img.value = images[i];
|
||
img.onload = () => {
|
||
imageContainer.appendChild(img);
|
||
}
|
||
img.onclick = () => {
|
||
selecteerFoto(img, i, images[i]);
|
||
}
|
||
}
|
||
}
|
||
xhttp.open("GET", "images.info");
|
||
xhttp.send();
|
||
}
|
||
|
||
function selecteerFoto(image, i, images) {
|
||
var gallery = document.getElementById('gallery1');
|
||
var value = gallery.getAttribute('value');
|
||
var Pictures = document.querySelectorAll('.gallery img');
|
||
Pictures.forEach(function(image) {
|
||
image.removeAttribute('id');
|
||
image.removeAttribute('name');
|
||
});
|
||
image.id = "selected";
|
||
image.name = "vfo";
|
||
image.value = images[i];
|
||
gallery.setAttribute('value', images);
|
||
}
|
||
|
||
// Call the function to load the images
|
||
loadImages();
|
||
const xhr = new XMLHttpRequest();
|
||
|
||
function start() {
|
||
var send_text = document.getElementById("send_text").value;
|
||
var send_colorTxt = document.getElementById("send_colorTxt").value;
|
||
var send_colorBack = document.getElementById("send_colorBack").value;
|
||
var sendPicture = document.getElementById("selected").alt;
|
||
var url = "cgi?";
|
||
|
||
var queryString = url + "vtxt=" + send_text + "&vktxt=" + encodeURIComponent(send_colorTxt) + "&vka=" + encodeURIComponent(send_colorBack) + "&vfo=" + sendPicture;
|
||
console.log(queryString);
|
||
|
||
xhr.onreadystatechange = showAnswer;
|
||
xhr.open("GET", queryString);
|
||
xhr.send();
|
||
}
|
||
|
||
function showAnswer() {
|
||
if (xhr.readyState == 4 && xhr.status == 200) {
|
||
alert(xhr.responseText);
|
||
}
|
||
}
|
||
</script>
|
||
<footer>
|
||
<p class="foot">
|
||
Copyright © Thomas More Mechelen-Antwerpen vzw -
|
||
Campus De Nayer - Professionele bachelor elektronica-ict –
|
||
2023
|
||
</p>
|
||
</footer>
|
||
</div>
|
||
</body>
|
||
</html>
|
||
|