Download as
Browse Code »

Commit 06e63c0b526f82f3999cf69794976b03865ca2a5

Authored by Edmar Moretti
1 parent 57bc7b90
Exists in master and in 7 other branches composer, doc-root, docker, guia, licenca, readme, unmaintened

Revisão da ferramenta de criação de tema com gráficos para usar scripttag

Showing 2 changed files with 239 additions and 136 deletions   Show diff stats
ferramentas/graficotema/index.js
View file @57bc7b9
@@ -1,136 +0,0 @@ @@ -1,136 +0,0 @@
1 -/*  
2 -About: Licença  
3 -  
4 -I3Geo Interface Integrada de Ferramentas de Geoprocessamento para Internet  
5 -  
6 -Direitos Autorais Reservados (c) 2006 Ministério do Meio Ambiente Brasil  
7 -Desenvolvedor: Edmar Moretti edmar.moretti@mma.gov.br  
8 -  
9 -Este programa é software livre; você pode redistribuí-lo  
10 -e/ou modificá-lo sob os termos da Licença Pública Geral  
11 -GNU conforme publicada pela Free Software Foundation;  
12 -tanto a versão 2 da Licença.  
13 -Este programa é distribuído na expectativa de que seja útil,  
14 -porém, SEM NENHUMA GARANTIA; nem mesmo a garantia implícita  
15 -de COMERCIABILIDADE OU ADEQUAÇÃO A UMA FINALIDADE ESPECÍFICA.  
16 -Consulte a Licença Pública Geral do GNU para mais detalhes.  
17 -Você deve ter recebido uma cópia da Licença Pública Geral do  
18 -GNU junto com este programa; se não, escreva para a  
19 -Free Software Foundation, Inc., no endereço  
20 -59 Temple Street, Suite 330, Boston, MA 02111-1307 USA.  
21 -*/  
22 -//inicializa  
23 -parametrosURL()  
24 -if(tema == "undefined"){tema = "";}  
25 -ativaGuias("")  
26 -mostraGuia("guia1")  
27 -comboi = ""  
28 -//eventos das guias  
29 -$i("guia1").onclick = function()  
30 -{mostraGuia("guia1")}  
31 -$i("guia2").onclick = function()  
32 -{mostraGuia("guia2")}  
33 -mensagemAjuda("men1",$i("men1").innerHTML)  
34 -//combo com as camadas  
35 -comboCamadas("selCamada",tema,function(retorno)  
36 -{  
37 - if (retorno.dados == "") //tema unico  
38 - {$i("combot").innerHTML="";registrosf()}  
39 - else  
40 - {  
41 - $i("combot").style.display = "block"  
42 - $i("combot").innerHTML = "<div style=top:10px class=destaca >O tema escolhido &eacute; composto por mais de uma camada de dados. Selecione uma das camadas para listar:</div><br>"+retorno.dados  
43 - $i("selCamada").onchange = function()  
44 - {  
45 - tema = $i("selCamada").value  
46 - registrosf()  
47 - }  
48 - }  
49 -},"combot"  
50 -)  
51 -function registrosf()  
52 -{  
53 - aguarde("block")  
54 - $i("men1").style.display = "block"  
55 - var cp = new cpaint();  
56 - //cp.set_debug(2)  
57 - cp.set_response_type("JSON");  
58 - cp.call(g_locaplic+"/classesphp/mapa_controle.php?g_sid="+g_sid+"&funcao=listaitens&tema="+tema,"listaItens",listaitensComPar);  
59 -}  
60 -YAHOO.example.init = function ()  
61 -{  
62 - function onPushButtonsMarkupReady()  
63 - {  
64 - new YAHOO.widget.Button("botao1");  
65 - }  
66 - YAHOO.util.Event.onContentReady("botao1", onPushButtonsMarkupReady);  
67 -}()  
68 -//monta a lista de itens com opções de cores  
69 -function listaitensComPar(retorno)  
70 -{  
71 - aguarde("none")  
72 - if (retorno.data != undefined)  
73 - {  
74 - var ins = new Array()  
75 - ins.push("<table class=lista >")  
76 - for (i=0;i<retorno.data.valores.length; i++)  
77 - {  
78 - ins.push("<tr><td><input onclick='pegaitens()' size=2 style='cursor:pointer' name="+retorno.data.valores[i].item+" type=checkbox id="+retorno.data.valores[i].item+" /></td>")  
79 - ins.push("<td>"+retorno.data.valores[i].item+"</td>")  
80 - ins.push("<td><input onclick='javascript:this.select();' id=cor"+retorno.data.valores[i].item+" type=text size=13 value="+randomRGB()+" /></td>")  
81 - ins.push("<td><img style=cursor:pointer src='../../imagens/aquarela.gif' onclick=\"corj('cor"+retorno.data.valores[i].item+"')\" /></td></tr>")  
82 - }  
83 - ins.push("</table>")  
84 - $i("listai").innerHTML = ins.join("")  
85 - }  
86 - else  
87 - {$i("listai").innerHTML = "<p style=color:red >Ocorreu um erro<br>"}  
88 -}  
89 -//abre a paleta de cores  
90 -function corj(obj)  
91 -{window.parent.i3GEO.util.abreCor("wdocai",obj)}  
92 -//pega os itens  
93 -function pegaitens()  
94 -{  
95 - var listadeitens = new Array();  
96 - var g = document.getElementById("listai")  
97 - var iguias = g.getElementsByTagName("input")  
98 - for (i=0;i<iguias.length; i++)  
99 - {  
100 - if (iguias[i].checked == true)  
101 - {  
102 - var it = iguias[i].id  
103 - var c = document.getElementById("cor"+it).value  
104 - listadeitens.push(it+","+c)  
105 - }  
106 - }  
107 - //document.getElementById("listadeitens").value = listadeitens.join("*")  
108 - return(listadeitens.join("*"))  
109 -}  
110 -//cria o tema novo  
111 -function criar()  
112 -{  
113 - aguarde("block")  
114 - var lista = pegaitens()  
115 - if (tema == "")  
116 - {alert("selecione um tema");aguarde("none");return;}  
117 - if (lista == "")  
118 - {alert("selecione um item");aguarde("none");return;}  
119 - var outlinecolor = $i("outlinecolor").value  
120 - var offset = $i("offset").value  
121 - var tipo = $i("tipo").value  
122 - if (tipo == "PIE")  
123 - var tamanho = $i("largura").value  
124 - else  
125 - var tamanho = $i("largura").value+" "+$i("altura").value  
126 - var temp = function(retorno)  
127 - {  
128 - aguarde("none")  
129 - window.parent.i3GEO.atualiza(retorno)  
130 - }  
131 - var p = g_locaplic+"/classesphp/mapa_controle.php?g_sid="+g_sid+"&funcao=graficotema&tema="+tema+"&lista="+lista+"&tamanho="+tamanho+"&tipo="+tipo+"&outlinecolor="+outlinecolor+"&offset="+offset  
132 - var cp = new cpaint();  
133 - //cp.set_debug(2)  
134 - cp.set_response_type("JSON");  
135 - cp.call(p,"graficotema",temp);  
136 -}  
ferramentas/graficotema/index.js.php 0 → 100644
  Diff comments   View file @06e63c0
@@ -0,0 +1,239 @@ @@ -0,0 +1,239 @@
  1 +<?php if(extension_loaded('zlib')){ob_start('ob_gzhandler');} header("Content-type: text/javascript"); ?>
  2 +/*jslint plusplus:false,white:false,undef: false, rhino: true, onevar: true, evil: true */
  3 +
  4 +/*
  5 +About: Licença
  6 +
  7 +I3Geo Interface Integrada de Ferramentas de Geoprocessamento para Internet
  8 +
  9 +Direitos Autorais Reservados (c) 2006 Ministério do Meio Ambiente Brasil
  10 +Desenvolvedor: Edmar Moretti edmar.moretti@mma.gov.br
  11 +
  12 +Este programa é software livre; você pode redistribuí-lo
  13 +e/ou modificá-lo sob os termos da Licença Pública Geral
  14 +GNU conforme publicada pela Free Software Foundation;
  15 +tanto a versão 2 da Licença.
  16 +Este programa é distribuído na expectativa de que seja útil,
  17 +porém, SEM NENHUMA GARANTIA; nem mesmo a garantia implícita
  18 +de COMERCIABILIDADE OU ADEQUAÇÃO A UMA FINALIDADE ESPECÍFICA.
  19 +Consulte a Licença Pública Geral do GNU para mais detalhes.
  20 +Você deve ter recebido uma cópia da Licença Pública Geral do
  21 +GNU junto com este programa; se não, escreva para a
  22 +Free Software Foundation, Inc., no endereço
  23 +59 Temple Street, Suite 330, Boston, MA 02111-1307 USA.
  24 +*/
  25 +if(typeof(i3GEOF) === 'undefined'){
  26 + i3GEOF = [];
  27 +}
  28 +
  29 +/*
  30 +Class: i3GEOF.graficoTema
  31 +
  32 +Inclui gráficos em cada elemento de um tema tendo como fonte a tabela de atributos.
  33 +
  34 +Abre uma janela com várias opções e lista de itens para os gráficos.
  35 +
  36 +O tema que será utilizado é o que estiver armazenado na variável global i3GEO.temaAtivo
  37 +*/
  38 +i3GEOF.graficoTema = {
  39 + /*
  40 + Function: inicia
  41 +
  42 + Inicia a ferramenta. É chamado por criaJanelaFlutuante
  43 +
  44 + Parametro:
  45 +
  46 + iddiv {String} - id do div que receberá o conteudo HTML da ferramenta
  47 + */
  48 + inicia: function(iddiv){
  49 + try{
  50 + $i(iddiv).innerHTML += i3GEOF.graficoTema.html();
  51 + i3GEO.guias.mostraGuiaFerramenta("i3GEOgraficotemaguia1","i3GEOgraficotemaguia");
  52 + //eventos das guias
  53 + $i("i3GEOgraficotemaguia1").onclick = function()
  54 + {i3GEO.guias.mostraGuiaFerramenta("i3GEOgraficotemaguia1","i3GEOgraficotemaguia");};
  55 + $i("i3GEOgraficotemaguia2").onclick = function()
  56 + {i3GEO.guias.mostraGuiaFerramenta("i3GEOgraficotemaguia2","i3GEOgraficotemaguia");};
  57 + new YAHOO.widget.Button(
  58 + "i3GEOgraficotemabotao1",
  59 + {onclick:{fn: i3GEOF.graficoTema.criaNovoTema}}
  60 + );
  61 + i3GEO.util.mensagemAjuda("i3GEOgraficotemamen1",$i("i3GEOgraficotemamen1").innerHTML);
  62 + //
  63 + //pega a lista de itens e chama a função de montagem das opções de escolha
  64 + //
  65 + i3GEO.php.listaItensTema(i3GEOF.graficoTema.montaListaItens,i3GEO.temaAtivo);
  66 + }
  67 + catch(erro){alert(erro);}
  68 + },
  69 + /*
  70 + Function: html
  71 +
  72 + Gera o código html para apresentação das opções da ferramenta
  73 +
  74 + Retorno:
  75 +
  76 + String com o código html
  77 + */
  78 + html:function(){
  79 + var ins = '';
  80 + ins += '<div id=i3GEOgraficotemaguiasYUI class="yui-navset" style="top:0px;cursor:pointer;left:0px;">';
  81 + ins += ' <ul class="yui-nav" style="border-width:0pt 0pt 0px;border-color:rgb(240,240,240);border-bottom-color:white;">';
  82 + ins += ' <li><a href="#ancora"><em><div id="i3GEOgraficotemaguia1" style="text-align:center;font-size:10px;left:0px;" >Fonte dos dados</div></em></a></li>';
  83 + ins += ' <li><a href="#ancora"><em><div id="i3GEOgraficotemaguia2" style="text-align:center;font-size:10px;left:0px;" >Propriedades</div></em></a></li>';
  84 + ins += ' </ul>';
  85 + ins += '</div>';
  86 + ins += '<div class="geralFerramentas" style="left:0px;top:0px;width:98%;height:86%;">';
  87 + ins += ' <div class=guiaobj id="i3GEOgraficotemaguia1obj" style="left:1px;90%;display:none;">';
  88 + ins += ' <div id=i3GEOgraficotemacombot style="display:none;position:relative;top:5px;left:0px;">';
  89 + ins += ' </div>';
  90 + ins += ' <p>Escolha os itens to tipo num&eacute;rico que compor&atilde;o cada parte do gr&aacute;fico<br><br>';
  91 + ins += ' <div id=i3GEOgraficotemalistai class=digitar style="left:0px;top:0px;330px;height:80px;overflow:auto;display:block;">Escolha o tema para ver a lista de itens</div>';
  92 + ins += ' <br><br>';
  93 + ins += ' <input id=i3GEOgraficotemabotao1 size=35 type=button value="Criar gráficos" />';
  94 + ins += ' <div id=i3GEOgraficotemamen1 style=top:10px;left:1px >Marque os itens para compor as partes do gr&aacute;fico: Edite os valores de cor (R,G,B) conforme o desejado. Ap&oacute;s escolher os itens, clique em criar gr&aacute;ficos para inserir um novo tema com os gr&aacute;ficos.</div>';
  95 + ins += ' </div>';
  96 + ins += ' <div class=guiaobj id="i3GEOgraficotemaguia2obj" style="left:1px;display:none;">';
  97 + ins += ' <table summary="" class=lista width="90%">';
  98 + ins += ' <tr>';
  99 + ins += ' <td>Tipo:</td>';
  100 + ins += ' <td>';
  101 + ins += ' <select id=i3GEOgraficotematipo >';
  102 + ins += ' <option value="PIE">Pizza</option>';
  103 + ins += ' <option value="BAR">Barras</option>';
  104 + ins += ' </select>';
  105 + ins += ' </td>';
  106 + ins += ' </tr><tr><td>&nbsp;</td><td></td></tr>';
  107 + ins += ' <tr>';
  108 + ins += ' <td>Largura (em pixels):</td>';
  109 + ins += ' <td><input onclick="javascript:this.select();" style="cursor:text" size=4 class=digitar type="text" id=i3GEOgraficotemalargura value="50" /></td>';
  110 + ins += ' </tr><tr><td>&nbsp;</td><td></td></tr>';
  111 + ins += ' <tr>';
  112 + ins += ' <td>Altura (em pixels) - relevante apenas para o tipo Barras:</td>';
  113 + ins += ' <td><input onclick="javascript:this.select();" style="cursor:text" size=4 class=digitar type="text" id=i3GEOgraficotemaaltura value="50" /></td>';
  114 + ins += ' </tr><tr><td>&nbsp;</td><td></td></tr>';
  115 + ins += ' <tr>';
  116 + ins += ' <td>Deslocamento das fatias (em pixels) - relevante apenas para o tipo Pizza:</td>';
  117 + ins += ' <td><input onclick="javascript:this.select();" style="cursor:text" size=4 class=digitar type="text" id=i3GEOgraficotemaoffset value="0" /></td>';
  118 + ins += ' </tr><tr><td>&nbsp;</td><td></td></tr>';
  119 + ins += ' <tr>';
  120 + ins += ' <td>Cor do contorno:</td>';
  121 + ins += ' <td style=width:40% ><input onclick="javascript:this.select();" style="cursor:text" size=12 class=digitar type="text" id="i3GEOgraficotemaoutlinecolor" value="0,0,0" /><img alt="aquarela.gif" style=cursor:pointer src="../imagens/aquarela.gif" onclick="i3GEOF.graficoTema.corj(\'i3GEOgraficotemaoutlinecolor\')" /></td>';
  122 + ins += ' </tr><tr><td>&nbsp;</td><td></td></tr>';
  123 + ins += ' </table>';
  124 + ins += ' </div>';
  125 + ins += '</div> ';
  126 + return ins;
  127 + },
  128 + /*
  129 + Function: criaJanelaFlutuante
  130 +
  131 + Cria a janela flutuante para controle da ferramenta.
  132 + */
  133 + criaJanelaFlutuante: function(){
  134 + var minimiza,cabecalho,janela,divid,temp,titulo;
  135 + //cria a janela flutuante
  136 + titulo = "Graficos <a class=ajuda_usuario target=_blank href='" + i3GEO.configura.locaplic + "/ajuda_usuario.php?idcategoria=8&idajuda=40' >&nbsp;&nbsp;&nbsp;</a>";
  137 + janela = i3GEO.janela.cria(
  138 + "400px",
  139 + "300px",
  140 + "",
  141 + "",
  142 + "",
  143 + titulo,
  144 + "i3GEOF.graficoTema",
  145 + true,
  146 + "hd"
  147 + );
  148 + divid = janela[2].id;
  149 + i3GEOF.graficoTema.inicia(divid);
  150 + },
  151 + /*
  152 + Function: montaListaItens
  153 +
  154 + Monta a lista de itens que poderão ser escolhidos para compor o mapa.
  155 +
  156 + A lista é inserida no elemento html com id "i3GEOgraficotemalistai"
  157 + */
  158 + montaListaItens: function(retorno){
  159 + var ins,i,n;
  160 + try{
  161 + ins = [];
  162 + ins.push("<table class=lista >");
  163 + n = retorno.data.valores.length;
  164 + for (i=0;i<n; i++){
  165 + ins.push("<tr><td><input size=2 style='cursor:pointer' name="+retorno.data.valores[i].item+" type=checkbox id=i3GEOgraficotema"+retorno.data.valores[i].item+" /></td>");
  166 + ins.push("<td>&nbsp;"+retorno.data.valores[i].item+"</td>");
  167 + ins.push("<td>&nbsp;<input onclick='javascript:this.select();' id=i3GEOgraficotema"+retorno.data.valores[i].item+"cor type=text size=13 value="+i3GEO.util.randomRGB()+" /></td>");
  168 + ins.push("<td>&nbsp;<img style=cursor:pointer src='"+i3GEO.configura.locaplic+"/imagens/aquarela.gif' onclick=\"i3GEOF.graficoTema.corj('i3GEOgraficotemacor"+retorno.data.valores[i].item+"')\" /></td></tr>");
  169 + }
  170 + ins.push("</table>");
  171 + $i("i3GEOgraficotemalistai").innerHTML = ins.join("");
  172 + }
  173 + catch(e)
  174 + {$i("i3GEOgraficotemalistai").innerHTML = "<p style=color:red >Ocorreu um erro<br>"+e;}
  175 + },
  176 + /*
  177 + Function: corj
  178 +
  179 + Abre a janela para o usuário selecionar uma cor interativamente
  180 + */
  181 + corj: function(obj)
  182 + {i3GEO.util.abreCor("",obj);},
  183 + /*
  184 + Function: pegaItensMarcados
  185 +
  186 + Recupera os itens que foram marcados e monta uma lista para enviar como parâmetro para a função de geração dos gráficos
  187 + */
  188 + pegaItensMarcados: function(){
  189 + var listadeitens = [],
  190 + inputs = $i("i3GEOgraficotemalistai").getElementsByTagName("input"),
  191 + i,
  192 + it,
  193 + c,
  194 + n;
  195 + n = inputs.length;
  196 + for (i=0;i<n; i++)
  197 + {
  198 + if (inputs[i].checked === true)
  199 + {
  200 + it = inputs[i].id;
  201 + c = $i(it+"cor").value;
  202 + listadeitens.push(it.replace("i3GEOgraficotema","")+","+c);
  203 + }
  204 + }
  205 + return(listadeitens.join("*"));
  206 + },
  207 + /*
  208 + Function: criaNovoTema
  209 +
  210 + Cria um novo tema que irá conter os gráficos e adiciona ao mapa.
  211 + */
  212 + criaNovoTema: function(){
  213 + try{
  214 + var lista = i3GEOF.graficoTema.pegaItensMarcados(),
  215 + outlinecolor = $i("i3GEOgraficotemaoutlinecolor").value,
  216 + offset = $i("i3GEOgraficotemaoffset").value,
  217 + tipo = $i("i3GEOgraficotematipo").value,
  218 + tamanho,
  219 + temp,
  220 + cp = new cpaint(),
  221 + p;
  222 + if (tipo === "PIE")
  223 + {tamanho = $i("i3GEOgraficotemalargura").value;}
  224 + else
  225 + {tamanho = $i("i3GEOgraficotemalargura").value+" "+$i("altura").value;}
  226 + if(lista === "")
  227 + {alert("selecione um item");return;}
  228 + i3GEO.janela.abreAguarde("montaMapa","Criando novo tema...");
  229 + temp = function(retorno){
  230 + i3GEO.janela.fechaAguarde("montaMapa");
  231 + i3GEO.atualiza(retorno);
  232 + };
  233 + p = i3GEO.configura.locaplic+"/classesphp/mapa_controle.php?g_sid="+i3GEO.configura.sid+"&funcao=graficotema&tema="+i3GEO.temaAtivo+"&lista="+lista+"&tamanho="+tamanho+"&tipo="+tipo+"&outlinecolor="+outlinecolor+"&offset="+offset;
  234 + cp.set_response_type("JSON");
  235 + cp.call(p,"graficotema",temp);
  236 + }catch(e){alert("Erro: "+e);i3GEO.janela.fechaAguarde();}
  237 + }
  238 +};
  239 +<?php if(extension_loaded('zlib')){ob_end_flush();}?>
0 \ No newline at end of file 240 \ No newline at end of file