Skip to content

Instantly share code, notes, and snippets.

@rurtubia

rurtubia/FigurasGeometricas.jsp

Last active August 29, 2015 14:19
Show Gist options
  • Save rurtubia/8b3a0264401f71771d3e to your computer and use it in GitHub Desktop.
Save rurtubia/8b3a0264401f71771d3e to your computer and use it in GitHub Desktop.
Download ZIP
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.
Raw
FigurasGeometricas.jsp
<%--
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment