IEI: tema9 added
This commit is contained in:
parent
6a346bdcca
commit
0e7c62132a
|
@ -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