IEI: tema9 added

This commit is contained in:
TiagoRG 2023-01-11 18:05:31 +00:00
parent 6a346bdcca
commit 0e7c62132a
14 changed files with 282 additions and 0 deletions

5
1ano/iei/projeto/.idea/.gitignore vendored Normal file
View File

@ -0,0 +1,5 @@
# Default ignored files
/shelf/
/workspace.xml
# Editor-based HTTP Client requests
/httpRequests/

View File

@ -0,0 +1,7 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="DiscordProjectSettings">
<option name="show" value="PROJECT_FILES" />
<option name="description" value="" />
</component>
</project>

View File

@ -0,0 +1,6 @@
<component name="InspectionProjectProfileManager">
<profile version="1.0">
<option name="myName" value="Project Default" />
<inspection_tool class="LatexMissingLabel" enabled="false" level="WEAK WARNING" enabled_by_default="false" />
</profile>
</component>

View File

@ -0,0 +1,8 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="ProjectModuleManager">
<modules>
<module fileurl="file://$PROJECT_DIR$/.idea/tema09.iml" filepath="$PROJECT_DIR$/.idea/tema09.iml" />
</modules>
</component>
</project>

View File

@ -0,0 +1,12 @@
<?xml version="1.0" encoding="UTF-8"?>
<module type="WEB_MODULE" version="4">
<component name="NewModuleRootManager">
<content url="file://$MODULE_DIR$">
<excludeFolder url="file://$MODULE_DIR$/temp" />
<excludeFolder url="file://$MODULE_DIR$/.tmp" />
<excludeFolder url="file://$MODULE_DIR$/tmp" />
</content>
<orderEntry type="inheritedJdk" />
<orderEntry type="sourceFolder" forTests="false" />
</component>
</module>

View File

@ -0,0 +1,6 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="VcsDirectoryMappings">
<mapping directory="$PROJECT_DIR$/../../.." vcs="Git" />
</component>
</project>

View File

@ -0,0 +1,22 @@
<!DOCTYPE html>
<html lang="pt">
<head>
<meta charset="UTF-8">
<title>About</title>
<link rel="stylesheet"
href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!-- Personal Styles -->
<link rel="stylesheet" href="css/style.css">
</head>
<body class = "style_about">
<h2>Introdução à Engenharia Informática</h2>
<br><br>
<h2>Integração de Componentes — Component Integration</h2>
<h2>(Popups - Graphics - Maps - Images)</h2>
<br><br>
<img src="images/ua.png" alt="UA">
<h2>Tiago Garcia - 22/12/22</h2>
<br>
<input type="button" class="btn btn-success" value="Close" onclick="self.close()">
</body>
</html>

View File

@ -0,0 +1,19 @@
/* style for the about page */
.style_about {
color: black;
background-color: gray;
text-align: center;
}
/* Create two columns (left and right boxes) with the same size */
/* Put map and image side by side */
.columnleft {
float: left;
height: 450px;
width: 550px;
margin: 10px;
}
.columnright {
float: right;
height: 450px;
width: 550px;
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

124
1ano/iei/projeto/index.html Normal file
View File

@ -0,0 +1,124 @@
<!DOCTYPE html>
<html lang="pt">
<head>
<meta charset="UTF-8">
<title>Integração de Componentes em Páginas WEB</title>
<!-- Bootstrap minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
<!-- Personal Styles -->
<link rel="stylesheet" href="css/style.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Bootstrap JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<!-- Personal JavaScript -->
<script src="js/index.js"></script>
<!-- Personal Stylesheet -->
<link rel="stylesheet" href="css/style.css">
<!-- Highcharts JavaScript -->
<script src="http://code.highcharts.com/highcharts.js"></script>
<!-- LeaftLet CSS e JavaScript -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.2/dist/leaflet.css">
<script src="https://unpkg.com/leaflet@1.0.2/dist/leaflet.js"></script>
<!-- Chart builder -->
<script src="js/chart.js"></script>
<!-- Images -->
<script src="js/image.js"></script>
</head>
<body>
<nav class="navbar navbar-default">
<div class="navbar-header">
<a class="navbar-brand" href="#">Introdução à Engenharia Informática</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Outras páginas<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Contacto</a></li>
<li class="divider"></li>
<li><a href="#popups">Pop Up</a></li>
<li class="divider"></li>
<li><a href="#charts">Chart</a></li>
<li class="divider"></li>
<li><a href="#maps">Maps</a></li>
<li class="divider"></li>
<li><a href="#images">Images</a></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="about.html" target="_blank">
<span class="glyphicon glyphicon-user"></span> About</a>
</li>
</ul>
</div>
</nav>
<div class="container">
<h2 id="popups" style="text-align:center">Popups</h2>
<div id="myPopup" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button
type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;
</button>
<h4 class="modal-title">Popup Title</h4>
</div>
<div class="modal-body">
<p>Popup Contents</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<button class="btn btn-primary" data-toggle="modal" data-target="#myPopup">
Popup Throw
</button>
<h2 id="charts" style="text-align:center">Charts</h2>
<div id="myGraph" style="width: 400px; height: 300px;"></div>
<label for="selection">Tipo de gráfico</label><select id="selection" onchange="graphic()">
<option value="line">Line</option>
<option value="column">Column</option>
<option value="pie">Pie</option>
<option value="scatter">Scatter</option>
<option value="bar">Bar</option>
<option value="area">Area</option>
</select>
<button class="btn btn-primary" onclick="draw()">Graphic Draw</button>
<h2 id="maps" style="text-align: center">Maps</h2>
<div class="row">
<div class="columnleft" style="text-align: center">
<div id="myMap" style="width: 550px; height: 450px"></div>
<!-- JavaScript for map design and other functionalities -->
<script src="js/map.js"></script>
</div>
<span style="color:blue" id="coordinates"></span>
</div>
<div class="row">
<h2 id="images" style="text-align: center">Images</h2>
<div class="columnright" style="text-align: center">
<div>
<button onclick="decreaseImage(document.getElementById('myImage'))">
Decrease Image
</button>
<button onclick="resetImage(document.getElementById('myImage'))">
Reset Image
</button>
</div>
<img id="myImage" src="images/ua.png" alt="Ups!" style="width: 550px; height: 450px;">
</div>
</div>
</div>
</body>
</html>

View File

@ -0,0 +1,30 @@
var type = "line"; // line graphic by default
function graphic(element) {
let e = document.getElementById( "selection" );
type = e.options[e.selectedIndex].value;
}
function draw() {
$("#myGraph").highcharts({
chart: { type: type },
title: { text: "Temperatures Average" },
xAxis: { categories: ["Jan", "Fev", "Mar", "Abr", "Mai", "Jun",
"Jul", "Ago", "Set", "Out", "Nov", "Dez"]
},
series:[
{
name: "Lisboa",
data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
},
{
name: "Aveiro",
data: [5.0, 6.2, 8.4, 10.7, 13.5, 16.5, 16.9, 21.7, 22.7, 16.2, 12.5, 7.6]
},
{
name: "Leiria - No Data",
data: []
}
]
});
}

View File

@ -0,0 +1,7 @@
function decreaseImage(element){
let height = parseInt(element.style.height) - 10 ;
element.style.height = height+"px";
}
function resetImage(element){
element.style.height = "200px";
}

View File

View File

@ -0,0 +1,36 @@
let map = new L.Map("myMap", {center: [40.633258,-8.659097],zoom: 15});
let osmUrl="http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png";
let osmAttrib="Map data OpenStreetMap contributors";
let osm = new L.TileLayer(osmUrl, {attribution: osmAttrib});
map.addLayer(osm);
map.on("click", showCoordinates);
function showCoordinates(e){
var s = document.getElementById("coordinates");
s.innerHTML = "Latitude, Longitude = "+e.latlng.lat+", "+e.latlng.lng;
}
let pontos = [
L.marker([40.633258, -8.659097]),
L.marker([40.642729, -8.747899])
]
for (let i in pontos) {
pontos[i].addTo(map)
}
L.marker([40.633258, -8.659097]).bindPopup("LABI@DETI").addTo(map);
let grupo = new L.featureGroup(pontos);
map.fitBounds(grupo.getBounds());
let iconeUA = L.icon({ iconUrl: "images/ua.png" });
L.marker([40.633258, -8.659097], {icon: iconeUA}).bindPopup("LABI@DETI").addTo(map);
let reitoria = L.polygon(
[ [40.63102, -8.65793], [40.63149, -8.65731],
[40.63126, -8.65699], [40.63078, -8.65759] ],
{ color: "red" } );
reitoria.addTo(map);
reitoria.bindPopup("Reitoria")