Skip to content
GitLab
Commit 8860f4ca authored by Traboulsi's avatar Traboulsi
Browse files

Deleted public/3d-globe/add_avartar_billboard.js, public/3d-globe/favicon.ico,... 

Deleted public/3d-globe/add_avartar_billboard.js, public/3d-globe/favicon.ico, public/3d-globe/globe.css, public/3d-globe/index.html, public/leaflet-stoeckach-heatdemand/building_data.js, public/leaflet-stoeckach-heatdemand/building_data.json, public/leaflet-stoeckach-heatdemand/index.css, public/leaflet-stoeckach-heatdemand/index.html, public/leaflet-stoeckach-heatdemand/leaflet-stoeckach-heatdemand.7z, public/vis_workshop/img/1.JPG, public/vis_workshop/img/1a.JPG, public/vis_workshop/img/2.JPG, public/vis_workshop/img/3.JPG, public/vis_workshop/img/4.JPG, public/vis_workshop/img/5.JPG, public/vis_workshop/img/6.JPG, public/vis_workshop/img/Deutschland3D.JPG, public/vis_workshop/img/StreamlinesMultipart.png, public/vis_workshop/img/architecture.JPG, public/vis_workshop/img/logo.jpg, public/vis_workshop/source/bootstrap.min.css, public/vis_workshop/source/bootstrap.min.js, public/vis_workshop/favicon.ico, public/vis_workshop/index.css, public/vis_workshop/index.html, public/content/muhamamd/1_PG3_Alfakhori_Muhamamd_MasterThesis.pdf, public/content/muhamamd/UGLthumbnail.gif, public/content/justin/assets/css/mobile.css, public/content/justin/assets/css/style.css, public/content/justin/assets/images/avatar.png, public/content/justin/assets/images/charlotte.jpg, public/content/justin/assets/images/facebook.png, public/content/justin/assets/images/header.jpg, public/content/justin/assets/images/hft_logo.svg, public/content/justin/assets/images/justin.jpg, public/content/justin/assets/images/linkedin.png, public/content/justin/assets/images/list.png, public/content/justin/assets/images/top.png, public/content/justin/assets/images/twitter.png, public/content/justin/assets/images/webpage.png, public/content/justin/assets/logos/Logo_M4_LAB.jpg, public/content/justin/assets/logos/logo1.png, public/content/justin/assets/logos/logo2.png, public/content/justin/assets/logos/logo3.png, public/content/justin/cover.jpg, public/content/justin/ezgif.com-gif-maker.gif, public/content/justin/index.html, public/content/justin/thesis.pdf, public/content/juan/.gitkeep, public/content/juan/juan.jpg
parent 0e550bce
Pipeline #8567 passed with stage
in 15 seconds
Hide whitespace changes
Inline Side-by-side
public/content/justin/index.html deleted 100644 → 0
View file @ 0e550bce
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="generator" content="GitLab Pages">
<title></title>
<link rel="stylesheet" href="assets/css/style.css">
<link rel="stylesheet" href="assets/css/mobile.css">
<style>
.cover{margin-top:48px;display:flex}.cover img{width:250px;object-fit:contain;margin-bottom:auto;box-shadow:0 1px 4px -1px #00000069}.metadata{display:flex;flex-direction:column;margin-left:1em}.title{flex-grow:1;font-size:2em;font-weight:700}.metadata-item{display:flex;flex-direction:column;margin-top:24px}.download-item{display:flex;margin-top:24px}.metadata-name{border-bottom:1px solid #cacaca;border-image:linear-gradient(to right,#cacaca,#ffffff00) 1;margin-bottom:5px}.supervisors{display:flex;flex-direction:column}.button{background-color:#4caf50;border:none;color:#fff;padding:15px 32px;text-align:center;text-decoration:none;display:inline-block;font-size:16px}@media only screen and (max-width :450px){.cover{flex-wrap:wrap}.cover img{width:100%}}
</style>
</head>
<body>
<header id="header">
<div class="row">
<div class="logo" id="logo"></div>
<div class="hamburger">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
<nav></nav>
</div>
<div id='projectname'></div>
</header>
<div class="content">
<div class="cover">
<img src="cover.jpg">
<ul class="metadata">
<li class="metadata-item title">
Outdoor Mobile Augmented Reality in Urban Planning; Concepts of Visualizing Focus and Context Using Grayscale Filter in Video-based AR.
</li>
<li class="metadata-item">
<div class="metadata-name">Author</div>
<div>Justin Jing Hui</div>
</li>
<li class="metadata-item">
<div class="metadata-name">Supervisors</div>
<div class="supervisors">
<div>Prof. Dr.-Ing. Volker Coors</div>
<div>Prof. Dr.-Ing. Eberhard Gülch</div>
</div>
</li>
<li class="metadata-item">
<div class="metadata-name">Year</div>
<div>2021</div>
</li>
<li class="download-item"><a href="thesis.pdf" class="button" download>download</a></li>
</ul>
</div>
<h1>Abstract</h1>
<p>
Urban planners and designers often use grayscale masking filters to highlight a selected urban feature and its context without the overwhelming information. With the rising interest in applying augmented reality (AR) technology into the field of urban planning for increasing social engagement, this thesis aims to develop an outdoor mobile AR application that visualizes the urban environment using the mentioned grayscale masking filters. The application is able to apply the grayscale masking filter to the designated buildings in Nordbahnhof, Stuttgart when the device’s camera is pointing to them. State of the art of outdoor mobile AR technologies are studied and reviewed. This thesis proposes the concepts and methodology of the video-based AR visualization and the development of the app. The implementation of the concepts and methodology is documented and the implementation process and result are evaluated.
</p>
<h1>The AR Application</h1>
<p>
The application developed for the thesis is able to visualize a series of desingated buildings in Nordbahnhof, Stuttgart with the grayscale masking filter. With the app on, once the user points the camera to the designated building, the system will in-real-time detects the building and render the surrounding in monochrome and leaving the building in color. The moving image below demonstrates the visualization from a screen recording when using the app.
<br></br>
<img src="ezgif.com-gif-maker.gif" alt="video demonstration"/>
<br></br>
Codes and assets used for the development of this application can be found <a href="https://transfer.hft-stuttgart.de/gitlab/huijustinjing/ar-building-visualization-with-grayscale-filter"> here</a>.
</p>
</div>
<div class="footer"></div>
<div class="legal"></div>
<script src="../settings.js"> </script>
<script src="../main.js"> </script>
</body>
</html>
public/leaflet-stoeckach-heatdemand/building_data.js deleted 100644 → 0
View file @ 0e550bce
This source diff could not be displayed because it is too large. You can view the blob instead.
public/leaflet-stoeckach-heatdemand/building_data.json deleted 100644 → 0
View file @ 0e550bce
This source diff could not be displayed because it is too large. You can view the blob instead.
public/leaflet-stoeckach-heatdemand/index.css deleted 100644 → 0
View file @ 0e550bce
#mapid {
height: 100%;
}
body {
display: flex;
flex-direction: row;
margin: 0;
padding: 0;
}
#map-container {
flex: 1;
height: 100vh;
}
#chart-container {
flex: 1;
padding: 20px;
display: flex;
align-items: center;
justify-content: center;
}
public/leaflet-stoeckach-heatdemand/index.html deleted 100644 → 0
View file @ 0e550bce
<html>
<head>
<title>Building - Heat Demand</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
crossorigin="">
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
crossorigin=""></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="building_data.js"></script>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div id="map-container">
<div id="mapid"></div>
</div>
<div id="chart-container">
<canvas id="yocChart"></canvas>
</div>
<script>
var mymap = L.map('mapid').setView([48.79205, 9.20758], 16);
var OpenStreetMap_DE = L.tileLayer('https://{s}.tile.openstreetmap.de/tiles/osmde/{z}/{x}/{y}.png', {
maxZoom: 18,
attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
});
// select one basemap from https://leaflet-extras.github.io/leaflet-providers/preview/
var CartoDB_Positron = L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png', {
attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors &copy; <a href="https://carto.com/attributions">CARTO</a>',
subdomains: 'abcd',
maxZoom: 19
});
CartoDB_Positron.addTo(mymap);
function onEachFeature(feature, layer) {
layer.bindPopup(
'<h4>' +
feature.properties.gml_id + '</h4><p>Specific Space Heating Demand: ' + feature.properties
.Specific_s +
'[kWh/m².year] </p>');
}
function getColor(d) {
return d > 250 ? '#F22E22' :
d > 200 ? '#F56D1F' :
d > 150 ? '#F9A717' :
d > 125 ? '#FECE02' :
d > 100 ? '#F6EC00' :
d > 75 ? '#D1E023' :
d > 50 ? '#B2D531' :
d > 25 ? '#A4C711' :
d > 0 ? '#61B949' :
'#FFEDA0';
}
function style(feature) {
return {
fillColor: getColor(feature.properties.Specific_s),
weight: 1,
opacity: 1,
color: 'white',
// dashArray: '3',
fillOpacity: 0.95
};
}
L.geoJSON(building_data, {
onEachFeature: onEachFeature,
style: style,
}).addTo(mymap);
// Retrieve the building year of construction data from the GeoJSON
var buildingYoc = building_data.features.map(function(feature) {
return feature.properties.Year_of_co;
});
// Count the occurrences of each building age
var yocCounts = {};
buildingYoc.forEach(function(Year_of_co) {
if (yocCounts[Year_of_co]) {
yocCounts[Year_of_co]++;
} else {
yocCounts[Year_of_co] = 1;
}
});
// Prepare the chart data
var yocLabels = Object.keys(yocCounts);
var yocData = Object.values(yocCounts);
// Create the building year of construction distribution chart using Chart.js
var ctx = document.getElementById('yocChart').getContext('2d');
var yocChart = new Chart(ctx, {
type: 'bar',
data: {
labels: yocLabels,
datasets: [{
label: 'No. of buildings',
data: yocData,
backgroundColor: 'rgba(75, 192, 192, 0.5)',
borderColor: 'rgba(75, 192, 192, 1)',
borderWidth: 1
}]
},
options: {
responsive: true,
plugins: {
legend: {
position: 'bottom',
},
title: {
display: true,
text: 'Building Distribution According to its Year of Construction'
}
},
scales: {
y: {
beginAtZero: true,
stepSize: 15
}
}
}
});
</script>
</body>
</html>
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment

Dies ist die Gitlab-Instanz des Transferportals der Hochschule für Technik Stuttgart. Hier geht es zurück zum Portal