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   -/*
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 @@
  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 240 \ No newline at end of file
... ...