TimberVis Flexiboard: Visualization and Exploration Flexiboard for Timber Buildings IoT data sensors.
The pulse of the wood
Monitoring of Wooden houses: Time series of sensors data measuring
humidity, temperatures, vibrations and weather conditions.
https://lnu.se/forskning/forskningsprojekt/projekt-flexiboard-for-visualisering-och-utforskning-av-trabyggnader/
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
108 lines
3.6 KiB
108 lines
3.6 KiB
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>TraHus homepage</title>
|
|
|
|
<!-- Required meta tags -->
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
|
|
<!-- Bootstrap CSS -->
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
|
|
<style>
|
|
.card {
|
|
padding: 1rem;
|
|
border: 1px solid black;
|
|
margin: 1rem;
|
|
max-height: 390px;
|
|
scroll-behavior: auto;
|
|
overflow-y: scroll;
|
|
}
|
|
.card-img-top {
|
|
max-height:110px;
|
|
width:150px;
|
|
}
|
|
|
|
.card-body {
|
|
position: relative;
|
|
height: 390px; /*Set the desired height of the container*/
|
|
}
|
|
.card-text {
|
|
max-height: 100px;
|
|
overflow-y:auto;
|
|
}
|
|
.card-text:-webkit-scrollbar {
|
|
width: 8px;
|
|
}
|
|
.homeButtons {
|
|
position: absolute;
|
|
bottom: 0
|
|
}
|
|
</style>
|
|
|
|
<!-- JS libs-->
|
|
<script src="https://code.jquery.com/jquery-3.7.0.min.js" integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=" crossorigin="anonymous"></script>
|
|
|
|
<!-- JS local & config-->
|
|
<script src="./config/config.js"></script>
|
|
<script src="./config/datamap.js"></script>
|
|
<script src="./js/home.js"></script>
|
|
|
|
|
|
<title>TräHus data fkexiboard by Infravis.se</title>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<div class="container" style="max-width:90%">
|
|
<!-- Navbar-->
|
|
<nav id ="navbar" class="navbar navbar-dark bg-primary navbar-expand-lg navbar-light bg-light">
|
|
</nav>
|
|
|
|
<!-- CHAnge here the title! -->
|
|
<h1>Welcome to the TräHus dashboard.</h1>
|
|
<p>List of available houses:</p>
|
|
|
|
<div id="card_list" class="row">
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
<script>
|
|
console.log(PROJECTS.items);
|
|
// Getting the list of houses and buiding faceted view:
|
|
PROJECTS.items.forEach((houses) => {
|
|
var card = `
|
|
<div class="col-sm-6">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<a href="${houses.images}" target="picture of ${houses.hname}"><img src="${houses.image}" class="card-img-top" alt="..."></a>
|
|
<a href="${houses.map_url}" target="map of ${houses.hname}"><img src="${houses.map}" class="card-img-top" alt="..."></a>
|
|
<h5 class="${houses.name}">${houses.hname}</h5>
|
|
<p class="card-text">${houses.subtitle}</p>
|
|
<p class="homeButtons">Open dashboard
|
|
<a href="dash.html?h=${houses.xname}" class="btn btn-primary">inthis window</a>
|
|
<a href="dash.html?h=${houses.xname}" target="_${houses.name}" class="btn btn-primary">In a new window</a>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>`;
|
|
|
|
document.getElementById("card_list").innerHTML += card;
|
|
});
|
|
|
|
|
|
// Adding HTML navbar
|
|
document.getElementById("navbar").innerHTML = HTML_navBar;
|
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<!-- Bootstrap Bundle with Popper -->
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
|
|
|
|
</body>
|
|
</html>
|
|
|