Mercurial > hg > human-echolocation-java-webapp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
  <head>
    <title>Human Echolocation</title>
    <link href="http://fonts.googleapis.com/css?family=Mako" rel="stylesheet" type="text/css">
    <link href="screen.css" rel="stylesheet" type="text/css" />

    <!-- no default value for distance -->
    <c:choose>
      <c:when test="${not empty param.dist}">
        <c:set var="dist" value="${param.dist}" />
        <c:set var="distSet" value="true" />
      </c:when>
      <c:otherwise>
        <c:set var="distSet" value="false" />
      </c:otherwise>
    </c:choose>

    <!-- Default values for remaining parameters -->
    <c:set var="azim" value="0" />
    <c:set var="dirweight" value="0.2" />
    <c:set var="orient" value="horz" />

    <c:if test="${not empty param.azim}">
      <c:set var="azim" value="${param.azim}" />
    </c:if>
    <c:if test="${not empty param.dirweight}">
      <c:set var="dirweight" value="${param.dirweight}" />
    </c:if>
    <c:if test="${not empty param.orient}">
      <c:set var="orient" value="${param.orient}" />
    </c:if>

  </head>

  <body>
    <!-- NB the form submits back to this very page -->
    <form action="index.jsp" method="get">
      <table width="100%" cellpadding="0" cellspacing="0">
        <tr>
          <td align="right"><img src="soton-logo.png" alt="University of Southampton"/></td>
        </tr>
      </table>
      <br />

      <h1>Human Echolocation WebApp Test Page</h1>

      <h2>Simulated environment</h2>
      <table>
	<tr>
	  <th>Distance<br>
	    <span class="description">In metres. Typical value: 0.9</span>
	  </th>
	  <td><input type="text" name="dist" size="8" value="${dist}"></td>
	</tr>
	<tr>
	  <th>Azimuth<br>
	    <span class="description">-90 to +90</span>
	  </th>
          <td><input type="text" name="azim" size="8" value="${azim}" ></td>
	</tr>
	<tr>
          <th>Orientation</th>
	  <td>
            <input type="radio" name="orient" value="horz" checked> Horizontal<br>
            <input type="radio" name="orient" value="angled"> Angled
	  </td>
	</tr>
	<tr>
	  <th>Dirweight<br>
            <span class="description">Controls how easy it is to distinguish whether the reflector is to the left or the right (the lower dirweight is, the easier).</span>
	  </th>
	  <td>
            <input type="text" name="dirweight" size="8" value="${dirweight}">
            <br />
	  </td>
	</tr>
	<tr>
	  <td></td>
	  <td>
            <input type="submit" value="Generate audio">
	  </td>
	</tr>
      </table>
    </form>

    <div class="player">
      <c:choose>
        <c:when test="${distSet==true}">
          <audio src="/echoapp/HumanEcho?dist=<c:out value="${dist}"/>&amp;azim=<c:out value="${azim}"/>&amp;dirweight=<c:out value="${dirweight}"/>&amp;orient=<c:out value="${orient}"/>" id="generated" controls preload="yes" autobuffer></audio>
        </c:when>
        <c:otherwise>
          <c:out value="Please set the distance parameter and select 'Generate audio'"/>
        </c:otherwise>
      </c:choose>
    </div>
    <br />

    <div class="debug">
      <h3>Debug info</h3>
      <p>
        Distance: <c:out value="${dist}"/>;
        Azim: <c:out value="${azim}"/>;
        Dirweight: <c:out value="${dirweight}"/>;
        Orient: <c:out value="${orient}"/>
      </p>
    </div>

  </body>
</html>
author	Chris Cannam
date	Tue, 30 Sep 2014 16:52:50 +0100
parents	55ce07768e33
children