rurtubia
4/24/2015 - 6:03 PM
Formulario de cálculo Figuras Geométricas. Uses HTML and Java to calculate the area of rectangles and circles whose data (base, height, radi
Formulario de cálculo Figuras Geométricas. Uses HTML and Java to calculate the area of rectangles and circles whose data (base, height, radius) have been submitted through a form. Uses Javascript to draw shapes on a Canvas.
<%--
Document : index
Created on : Apr 23, 2015, 5:08:04 PM
Author : rurtubiac
--%>
<%@page import="figurasgeometricas.entities.Circle"%>
<%@page import="figurasgeometricas.entities.Rectangle"%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
</head>
<body>
<!--If code to decide which figure to calculate-->
<%
//Java variables to show in HTML
String ladoa= "0";
String ladob= "0";
String areaRectangulo = "0";
String radio= "0";
String areaCirculo = "0";
String informacion = "";
//IFs that look for pressed buttons:
if (request.getParameter("area_rectangulo")!= null) {
figurasgeometricas.entities.Rectangle rectangle = new Rectangle();
rectangle.setLadoa(Double.valueOf(request.getParameter("ladoa")));
rectangle.setLadob(Double.valueOf(request.getParameter("ladob")));
ladoa = String.valueOf(rectangle.getLadoa());
ladob = String.valueOf(rectangle.getLadob());
areaRectangulo = String.valueOf(rectangle.calculateRectangle(rectangle.getLadoa(),
rectangle.getLadob()));
informacion = "(Base: "+ladoa+" * Altura: "+ladob+") = Área: "+areaRectangulo;
figurasgeometricas.entities.Data.rectangle = rectangle;
}
if (request.getParameter("area_circulo")!= null) {
figurasgeometricas.entities.Circle circle = new Circle();
circle.setRadio(Double.valueOf(request.getParameter("radio")));
radio = String.valueOf(circle.getRadio());
areaCirculo= String.valueOf(circle.calculateRadio(circle.getRadio())) ;
figurasgeometricas.entities.Data.circle = circle;
informacion = "(Radio: "+radio+ "* 2 * PI) = Área: " + areaCirculo;
}
%>
<!--Dibujos cuadrado-->
<script>
//Position parameters used for drawing the figures
var x = 440;
var y = 150;
var width = <%=ladoa%>;
var height = <%=ladob%>;
//Create a canvas element
var canvas = document.createElement('canvas');
//Set canvas width/height
canvas.style.width='100%';
canvas.style.height='100%';
//Set canvas drawing area width/height
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
//Position canvas
canvas.style.position='absolute';
canvas.style.left=0;
canvas.style.top=0;
canvas.style.zIndex=100000;
//Make sure you can click 'through' the canvas
canvas.style.pointerEvents='none';
document.body.appendChild(canvas);
//Append canvas to body element
var context = canvas.getContext('2d');
//Draw rectangle
context.rect(x, y, width, height);
context.lineWidth='1';
context.strokeStyle='blue';
context.stroke();
//Draw circle
context.beginPath();
context.arc((<%=radio%>+x), (<%=radio%>+y), <%=radio%>, 0, 2*Math.PI);
context.stroke();
</script>
<font face="Verdana">
<h2>Formulario de cálculo Figuras Geométricas</h2>
<!--Main Table and Form-->
<font size="2">
<form action="index.jsp" method="POST">
<table>
<tr>
<td>
<!--Cálculos cuadrado-->
<table border="0" bgcolor="yellow" width="405">
<tbody>
<tr bgcolor="red">
<td><font color="white">CÁLCULO RECTÁNGULO</td>
<td bgcolor="red"></td>
</tr>
<tr>
<td>Ingrese base:</td>
<td>
<input type="text" name="ladoa" value="<%=ladoa%>"/>
</td>
</tr>
<tr>
<td>Ingrese altura:</td>
<td>
<input type="text" name="ladob" value="<%=ladob%>"/>
</td>
</tr>
<tr>
<td></td>
<td>
<input type="submit" value="Area Rectangulo" name="area_rectangulo" />
</td>
</tr>
<tr>
<td>Resultado</td>
<td>
<input type="text" name="resultado_rectangulo" readonly="readonly" value="<%=areaRectangulo%>"/>
</td>
</tr>
</tbody>
</table>
</td>
<td>
<table bgcolor="white">
<tbody>
<tr>
<td style="vertical-align:top">
<%=informacion%>
</td>
</tr>
<tr><td><font color="white">.</td></tr>
<tr><td><font color="white">.</td></tr>
<tr><td><font color="white">.</td></tr>
<tr><td><font color="white">.</td></tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>
<p></p>
<!--Cálculos círculo-->
<table bgcolor="yellow" width="405">
<tbody >
<tr bgcolor="red">
<td><font color="white">CÁLCULO CÍRCULO
</td>
<td bgcolor="red"></td>
</tr>
<tr>
<td>Ingrese radio:</td>
<td>
<input type="text" name="radio" value="<%=radio%>" />
</td>
</tr>
<tr>
<td></td>
<td>
<input type="submit" value="Area Círculo" name="area_circulo"/>
</td>
</tr>
<tr>
<td>Resultado</td>
<td>
<input type="text" name="resultado_circulo" readonly="readonly" value="<%=areaCirculo%>"/>
</td>
</tr>
</tbody>
</table>
</td>
<td>
<!--Dibujos círculo-->
</td>
</tr>
</table>
</form>
</font>
</body>
</html>