238 lines
7.2 KiB
HTML
238 lines
7.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="it">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Simulazione Crescita Pianta</title>
|
|
<style>
|
|
body {
|
|
font-family: Arial, sans-serif;
|
|
background: #f3f6f4;
|
|
margin: 0;
|
|
padding: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
color: #333;
|
|
}
|
|
h1 {
|
|
margin-top: 30px;
|
|
color: #2d6a4f;
|
|
}
|
|
form {
|
|
background: #ffffff;
|
|
padding: 20px 30px;
|
|
border-radius: 10px;
|
|
box-shadow: 0 2px 6px rgba(0,0,0,0.15);
|
|
margin-top: 20px;
|
|
max-width: 700px;
|
|
width: 100%;
|
|
}
|
|
fieldset {
|
|
border: none;
|
|
margin-top: 15px;
|
|
padding: 10px 0;
|
|
border-top: 1px solid #ddd;
|
|
}
|
|
legend {
|
|
font-weight: bold;
|
|
color: #2d6a4f;
|
|
margin-bottom: 10px;
|
|
}
|
|
label {
|
|
font-weight: bold;
|
|
display: block;
|
|
margin-top: 10px;
|
|
margin-bottom: 5px;
|
|
}
|
|
input[type="text"],
|
|
input[type="number"],
|
|
input[type="date"],
|
|
input[type="file"],
|
|
select {
|
|
width: 100%;
|
|
padding: 8px;
|
|
border: 1px solid #ccc;
|
|
border-radius: 6px;
|
|
box-sizing: border-box;
|
|
}
|
|
button {
|
|
margin-top: 20px;
|
|
padding: 10px 15px;
|
|
background-color: #40916c;
|
|
color: #fff;
|
|
border: none;
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
font-size: 16px;
|
|
transition: background 0.2s ease;
|
|
}
|
|
button:hover {
|
|
background-color: #2d6a4f;
|
|
}
|
|
h2 {
|
|
margin-top: 30px;
|
|
color: #1b4332;
|
|
}
|
|
#result {
|
|
margin-top: 15px;
|
|
background: #ffffff;
|
|
padding: 20px;
|
|
border-radius: 10px;
|
|
box-shadow: 0 2px 6px rgba(0,0,0,0.1);
|
|
max-width: 600px;
|
|
text-align: center;
|
|
}
|
|
#result img {
|
|
margin-top: 15px;
|
|
border-radius: 8px;
|
|
max-width: 100%;
|
|
height: auto;
|
|
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>Simulazione Crescita Pianta</h1>
|
|
|
|
<form id="plantForm">
|
|
|
|
<!-- SIMULAZIONE -->
|
|
<fieldset>
|
|
<legend>⚙️ Parametri simulazione</legend>
|
|
<label for="date_beg">Data inizio simulazione:</label>
|
|
<input type="date" id="date_beg" name="date_beg" required>
|
|
|
|
<label for="date_end">Data fine simulazione:</label>
|
|
<input type="date" id="date_end" name="date_end" required>
|
|
|
|
<label for="latitude">Latitudine:</label>
|
|
<input type="number" id="latitude" name="latitude" step="0.01">
|
|
|
|
<label for="longitude">Longitudine:</label>
|
|
<input type="number" id="longitude" name="longitude" step="0.01">
|
|
|
|
<label for="elevation">Altitudine (m):</label>
|
|
<input type="number" id="elevation" name="elevation">
|
|
|
|
<label for="tzone">Fuso orario:</label>
|
|
<input type="text" id="tzone" name="tzone" placeholder="Es. Europe/Paris">
|
|
|
|
<label for="unit_scene_length">Unità di lunghezza scena:</label>
|
|
<select id="unit_scene_length" name="unit_scene_length">
|
|
<option value="cm">cm</option>
|
|
<option value="m">m</option>
|
|
</select>
|
|
|
|
<label for="is_hydraulic_structure">Struttura idraulica:</label>
|
|
<select id="is_hydraulic_structure" name="is_hydraulic_structure">
|
|
<option value="true">Sì</option>
|
|
<option value="false">No</option>
|
|
</select>
|
|
|
|
<label for="is_energy_budget">Bilancio energetico:</label>
|
|
<select id="is_energy_budget" name="is_energy_budget">
|
|
<option value="true">Sì</option>
|
|
<option value="false">No</option>
|
|
</select>
|
|
</fieldset>
|
|
|
|
<!-- PIANTAGIONE -->
|
|
<fieldset>
|
|
<legend>🌱 Piantagione</legend>
|
|
<label for="spacing_between_rows">Spaziatura tra file (m):</label>
|
|
<input type="number" id="spacing_between_rows" name="spacing_between_rows" step="0.1">
|
|
|
|
<label for="spacing_on_row">Spaziatura sulla fila (m):</label>
|
|
<input type="number" id="spacing_on_row" name="spacing_on_row" step="0.1">
|
|
|
|
<label for="row_angle_with_south">Angolo fila rispetto al Sud (°):</label>
|
|
<input type="number" id="row_angle_with_south" name="row_angle_with_south" step="0.1">
|
|
</fieldset>
|
|
|
|
<!-- FENOLOGIA -->
|
|
<fieldset>
|
|
<legend>🌸 Fenologia</legend>
|
|
<label for="emdate">Data emergenza (semina):</label>
|
|
<input type="date" id="emdate" name="emdate">
|
|
|
|
<label for="t_base">Temperatura base (°C):</label>
|
|
<input type="number" id="t_base" name="t_base" step="0.1">
|
|
</fieldset>
|
|
|
|
<!-- MTG API -->
|
|
<fieldset>
|
|
<legend>🔗 Parametri MTG</legend>
|
|
<label for="collar_label">Etichetta colletto:</label>
|
|
<input type="text" id="collar_label" name="collar_label" value="inT">
|
|
|
|
<label for="leaf_lbl_prefix">Prefisso etichette foglie:</label>
|
|
<input type="text" id="leaf_lbl_prefix" name="leaf_lbl_prefix" value="L">
|
|
|
|
<label for="stem_lbl_prefix">Prefissi etichette steli (separati da virgola):</label>
|
|
<input type="text" id="stem_lbl_prefix" name="stem_lbl_prefix" value="in,Pet,cx">
|
|
</fieldset>
|
|
|
|
<!-- OBIETTIVO FUTURO -->
|
|
<fieldset>
|
|
<legend>📈 Obiettivi simulazione</legend>
|
|
<label for="daysFuture">Giorni da simulare:</label>
|
|
<input type="number" id="daysFuture" name="daysFuture" min="1" required>
|
|
</fieldset>
|
|
|
|
<!-- IMMAGINE -->
|
|
<fieldset>
|
|
<legend>🖼️ Stato attuale</legend>
|
|
<label for="image">Carica immagine attuale (opzionale):</label>
|
|
<input type="file" id="image" name="image" accept="image/*">
|
|
</fieldset>
|
|
|
|
<button type="submit">✨ Genera simulazione</button>
|
|
</form>
|
|
|
|
<h2>Risultato</h2>
|
|
<div id="result">Compila i dati e genera per vedere il risultato</div>
|
|
|
|
<script>
|
|
document.getElementById("plantForm").addEventListener("submit", async function(event) {
|
|
event.preventDefault();
|
|
const formData = new FormData(document.getElementById("plantForm"));
|
|
const payload = {};
|
|
for (let [key, value] of formData.entries()) {
|
|
payload[key] = value;
|
|
}
|
|
const file = document.getElementById("image").files[0];
|
|
if (file) {
|
|
payload["imageBase64"] = (await toBase64(file)).split(",")[1];
|
|
}
|
|
try {
|
|
const response = await fetch("/plant/generate", {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify(payload)
|
|
});
|
|
const result = await response.json();
|
|
if (result.error) {
|
|
document.getElementById("result").innerHTML = `<p style="color:red">Errore: ${result.error}</p>`;
|
|
} else {
|
|
document.getElementById("result").innerHTML = `
|
|
<p><b>Specie:</b> ${result.plantType || "N/A"}</p>
|
|
<p><b>Giorni simulati:</b> ${result.days}</p>
|
|
<p><b>Descrizione:</b> ${result.description || "N/A"}</p>
|
|
${result.futureImage ? `<img src="data:image/png;base64,${result.futureImage}" alt="Pianta futura">` : ""}
|
|
`;
|
|
}
|
|
} catch (err) {
|
|
document.getElementById("result").innerHTML = `<p style="color:red">Errore: ${err.message}</p>`;
|
|
}
|
|
});
|
|
function toBase64(file) {
|
|
return new Promise((resolve, reject) => {
|
|
const reader = new FileReader();
|
|
reader.readAsDataURL(file);
|
|
reader.onload = () => resolve(reader.result);
|
|
reader.onerror = (error) => reject(error);
|
|
});
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|