IEI: tema9 added
This commit is contained in:
TiagoRG
parent
7c01d14c5b
commit
2112b9b96f
GPG Key ID:
DFCD48E3F420DB42
|
|
@ -0,0 +1,5 @@
|
||||||
|
# Default ignored files
|
||||||
|
/shelf/
|
||||||
|
/workspace.xml
|
||||||
|
# Editor-based HTTP Client requests
|
||||||
|
/httpRequests/
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -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>
|
||||||
|
|
@ -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 |
|
|
@ -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">×
|
||||||
|
</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>
|
||||||
|
|
@ -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: []
|
||||||
|
}
|
||||||
|
]
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
@ -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";
|
||||||
|
}
|
||||||
|
|
@ -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")
|
||||||
Loading…
Reference in New Issue