Hlasování: základ SVG grafu, výpočet. TODO: validita SVG vloženého do XHTML.
authorFrantišek Kučera <franta-hg@frantovo.cz>
Tue, 27 Apr 2010 13:14:23 +0200
changeset 1066209f3d550c5
parent 105 f9c0ce760189
child 107 e8371105fcc8
Hlasování: základ SVG grafu, výpočet. TODO: validita SVG vloženého do XHTML.
html/graf.svg
java/nekurak.net-web/web/WEB-INF/casti/uvod.jsp
java/nekurak.net-web/web/WEB-INF/tags/nekurak/hlasovani.tag
java/nekurak.net-web/web/hlasovani-svg.jsp
java/nekurak.net-web/web/styl.css
     1.1 --- a/html/graf.svg	Tue Apr 27 11:15:36 2010 +0200
     1.2 +++ b/html/graf.svg	Tue Apr 27 13:14:23 2010 +0200
     1.3 @@ -4,16 +4,6 @@
     1.4       xmlns:xlink="http://www.w3.org/1999/xlink">
     1.5  
     1.6  
     1.7 -    <!--
     1.8 -    <a xlink:href="http://frantovo.cz"  xlink:title="Moje stránky!">
     1.9 -	<circle cx="150" cy="100" r="50" style="fill:red; stroke-width: 3; stroke:rgb(0,0,0)"/>
    1.10 -    </a>
    1.11 -
    1.12 -    <a xlink:href="javascript:alert('To čumíš, co? :-)')" xlink:title="Nečum!">
    1.13 -	<circle cx="200" cy="100" r="50" style="fill:blue; stroke-width: 3; stroke:rgb(0,0,0)"/>
    1.14 -    </a>
    1.15 -    -->
    1.16 -
    1.17      <style type="text/css">
    1.18  	rect.ne {
    1.19  	fill:  url(#ne_prechod);
    1.20 @@ -52,8 +42,8 @@
    1.21      <!-- pozadí – přechod -->
    1.22      <defs>
    1.23  	<linearGradient id="pozadi_prechod" x1="0%" y1="0%" x2="100%" y2="100%">
    1.24 -	    <stop offset="0%" style="stop-color:silver; stop-opacity:1"/>
    1.25 -	    <stop offset="100%" style="stop-color:gray; stop-opacity:1"/>
    1.26 +	    <stop offset="0%" style="stop-color:white; stop-opacity:0.5"/>
    1.27 +	    <stop offset="100%" style="stop-color:silver; stop-opacity:0.8"/>
    1.28  	</linearGradient>
    1.29      </defs>
    1.30  
     2.1 --- a/java/nekurak.net-web/web/WEB-INF/casti/uvod.jsp	Tue Apr 27 11:15:36 2010 +0200
     2.2 +++ b/java/nekurak.net-web/web/WEB-INF/casti/uvod.jsp	Tue Apr 27 13:14:23 2010 +0200
     2.3 @@ -35,7 +35,7 @@
     2.4  
     2.5  		<!-- Hlasování a graf -->
     2.6  		<div class="hlasovani">
     2.7 -		    <nk:hlasovani podnik="${p.id}"/>
     2.8 +		    <nk:hlasovani podnik="${p.id}" hlasuAno="5" hlasuNe="10"/>
     2.9  		</div>
    2.10  
    2.11  		<!-- Fotky podniku -->
     3.1 --- a/java/nekurak.net-web/web/WEB-INF/tags/nekurak/hlasovani.tag	Tue Apr 27 11:15:36 2010 +0200
     3.2 +++ b/java/nekurak.net-web/web/WEB-INF/tags/nekurak/hlasovani.tag	Tue Apr 27 13:14:23 2010 +0200
     3.3 @@ -6,7 +6,111 @@
     3.4  	  version="2.0">
     3.5  
     3.6      <jsp:directive.attribute name="podnik" type="java.lang.Integer" required="true" description="ID podniku"/>
     3.7 +    <jsp:directive.attribute name="hlasuAno" type="java.lang.Integer" required="true" description="počet hlasů pro ano – aby se tu kouřilo"/>
     3.8 +    <jsp:directive.attribute name="hlasuNe" type="java.lang.Integer" required="true" description="počet hlasů pro ne – aby se tu nekouřilo"/>
     3.9 +    <jsp:directive.attribute name="svgUvnitrXhtml" type="java.lang.Boolean" required="false" description="true = SVG vložené přímo do XHTML (XML) | false = SVG jako externí obrázek – &lt;img src='…'/&gt;"/>
    3.10  
    3.11 -    <p>TODO: tady bude graf a hlasování.</p>
    3.12 +    <c:if test="${svgUvnitrXhtml == null}">
    3.13 +	<c:set var="svgUvnitrXhtml" value="${true}"/>
    3.14 +    </c:if>
    3.15 +
    3.16 +    <c:choose>
    3.17 +	<c:when test="${svgUvnitrXhtml}">
    3.18 +	    <svg width="200" height="200"
    3.19 +		 xmlns="http://www.w3.org/2000/svg"
    3.20 +		 xmlns:xlink="http://www.w3.org/1999/xlink">
    3.21 +
    3.22 +
    3.23 +		<style type="text/css">
    3.24 +		    rect.ne {
    3.25 +			fill:  url(#ne_prechod);
    3.26 +			stroke: black;
    3.27 +		    }
    3.28 +		    rect.ano {
    3.29 +			fill: url(#ano_prechod);
    3.30 +			stroke: black;
    3.31 +		    }
    3.32 +
    3.33 +		    a:hover rect.ano, a:hover rect.ne {
    3.34 +			fill: url(#zvyrazneny_prechod);
    3.35 +		    }
    3.36 +
    3.37 +		    a:hover text {
    3.38 +			fill: green;
    3.39 +		    }
    3.40 +
    3.41 +		    line.ramecek {
    3.42 +			stroke: black;
    3.43 +			stroke-width: 2;
    3.44 +		    }
    3.45 +
    3.46 +
    3.47 +		    rect.pozadi {
    3.48 +			fill: url(#pozadi_prechod);
    3.49 +		    }
    3.50 +
    3.51 +		    text {
    3.52 +			font-size: 12px;
    3.53 +			font-family: Sans;
    3.54 +		    }
    3.55 +
    3.56 +		</style>
    3.57 +
    3.58 +		<!-- pozadí – přechod -->
    3.59 +		<defs>
    3.60 +		    <linearGradient id="pozadi_prechod" x1="0%" y1="0%" x2="100%" y2="100%">
    3.61 +			<stop offset="0%" style="stop-color:white; stop-opacity:0.5"/>
    3.62 +			<stop offset="100%" style="stop-color:silver; stop-opacity:0.8"/>
    3.63 +		    </linearGradient>
    3.64 +		</defs>
    3.65 +
    3.66 +		<!-- nekuřácký graf – přechod -->
    3.67 +		<defs>
    3.68 +		    <linearGradient id="ne_prechod" x1="0%" y1="0%" x2="100%" y2="100%">
    3.69 +			<stop offset="0%" style="stop-color:white; stop-opacity:1"/>
    3.70 +			<stop offset="100%" style="stop-color:blue; stop-opacity:1"/>
    3.71 +		    </linearGradient>
    3.72 +		</defs>
    3.73 +
    3.74 +		<!-- zvýrazněný graf – přechod -->
    3.75 +		<defs>
    3.76 +		    <linearGradient id="zvyrazneny_prechod" x1="0%" y1="0%" x2="100%" y2="100%">
    3.77 +			<stop offset="0%" style="stop-color:white; stop-opacity:1"/>
    3.78 +			<stop offset="100%" style="stop-color:green; stop-opacity:1"/>
    3.79 +		    </linearGradient>
    3.80 +		</defs>
    3.81 +
    3.82 +		<!-- kuřácký graf – přechod -->
    3.83 +		<defs>
    3.84 +		    <linearGradient id="ano_prechod" x1="0%" y1="0%" x2="100%" y2="100%">
    3.85 +			<stop offset="0%" style="stop-color:white; stop-opacity:1"/>
    3.86 +			<stop offset="100%" style="stop-color:red; stop-opacity:1"/>
    3.87 +		    </linearGradient>
    3.88 +		</defs>
    3.89 +
    3.90 +		<!-- pozadí a linka -->
    3.91 +		<rect x="0" y="0" width="200" height="200" class="pozadi"/>
    3.92 +		<line x1="10" y1="180" x2="190" y2="180" class="ramecek"/>
    3.93 +
    3.94 +		<!-- Nadpis grafu -->
    3.95 +		<text x="60" y="20">Mělo by se tu:</text>
    3.96 +
    3.97 +		<!-- nekuřáci -->
    3.98 +		<a xlink:href="javascript:alert('To čumíš, co? :-)')" xlink:title="Hlasů: ${hlasuNe}">
    3.99 +		    <text x="30" y="195" class="ne">nekouřit</text>
   3.100 +		    <rect x="30" y="${180 - (150*hlasuNe/(hlasuAno+hlasuNe))}" width="50" height="${150*hlasuNe/(hlasuAno+hlasuNe)}" class="ne"/>
   3.101 +		</a>
   3.102 +
   3.103 +		<!-- kuřáci -->
   3.104 +		<a xlink:href="javascript:alert('To čumíš, co? :-)')" xlink:title="Hlasů: ${hlasuAno}">
   3.105 +		    <text x="130" y="195" class="ano">kouřit</text>
   3.106 +		    <rect x="120" y="${180 - (150*hlasuAno/(hlasuAno+hlasuNe))}" width="50" height="${150*hlasuAno/(hlasuAno+hlasuNe)}" class="ano"/>
   3.107 +		</a>
   3.108 +	    </svg>
   3.109 +	</c:when>
   3.110 +	<c:otherwise>
   3.111 +	    <object data="hlasovani-svg.jsp?podnik=${podnik}&amp;amp;hlasuAno=${hlasuAno}&amp;amp;hlasuNe=${hlasuNe}" type="image/svg+xml"/>
   3.112 +	</c:otherwise>
   3.113 +    </c:choose>
   3.114  
   3.115  </jsp:root>
   3.116 \ No newline at end of file
     4.1 --- /dev/null	Thu Jan 01 00:00:00 1970 +0000
     4.2 +++ b/java/nekurak.net-web/web/hlasovani-svg.jsp	Tue Apr 27 13:14:23 2010 +0200
     4.3 @@ -0,0 +1,12 @@
     4.4 +<?xml version="1.0" encoding="UTF-8"?>
     4.5 +<jsp:root xmlns:jsp="http://java.sun.com/JSP/Page"
     4.6 +	  xmlns:c="http://java.sun.com/jsp/jstl/core"
     4.7 +	  xmlns:fmt="http://java.sun.com/jsp/jstl/fmt"
     4.8 +	  xmlns:nk="urn:jsptagdir:/WEB-INF/tags/nekurak"
     4.9 +	  version="2.0">
    4.10 +    <jsp:directive.page contentType="image/svg+xml"/>
    4.11 +
    4.12 +    <!-- na této úrovni nemusíme ošetřovat vstup – jako parametry projdou jen správné datové typy -->
    4.13 +    <nk:hlasovani svgUvnitrXhtml="true" hlasuAno="${param.hlasuAno}" hlasuNe="${param.hlasuNe}" podnik="${param.podnik}"/>
    4.14 +
    4.15 +</jsp:root>
    4.16 \ No newline at end of file
     5.1 --- a/java/nekurak.net-web/web/styl.css	Tue Apr 27 11:15:36 2010 +0200
     5.2 +++ b/java/nekurak.net-web/web/styl.css	Tue Apr 27 13:14:23 2010 +0200
     5.3 @@ -165,8 +165,16 @@
     5.4  }
     5.5  .podnik .hlasovani {
     5.6      float: left;
     5.7 -    width: 280px;
     5.8 +    width: 200px;
     5.9      height: 280px;
    5.10 +    padding-top: 16px;
    5.11 +    margin-right: 20px;
    5.12 +}
    5.13 +
    5.14 +.podnik .hlasovani object {
    5.15 +    overflow: hidden;
    5.16 +    width: 200px;
    5.17 +    height: 200px;
    5.18  }
    5.19  
    5.20  .podnik .fotky {