Commit last-minute
This commit is contained in:
francesco-bufalini
parent
b4a97a65ab
commit
0ba7189bfc
221 changed files with 139931 additions and 1 deletions
238
index.html
Normal file
238
index.html
Normal file
|
|
@ -0,0 +1,238 @@
|
|||
<!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>
|
||||
Loading…
Add table
Add a link
Reference in a new issue