Download as
Browse Code »

Commit 122762fcb8973ee56e730d6cee75a942d5aa2ea0

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

Adicionada ferramenta de geração automatica de graficos em elementos de um tema

Showing 2 changed files with 205 additions and 0 deletions   Show diff stats
ferramentas/graficotema/index.htm 0 → 100644
  Diff comments   View file @122762f
... ... @@ -0,0 +1,70 @@
  1 +<html>
  2 +<head>
  3 +<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-8859-1">
  4 +<link rel="stylesheet" type="text/css" href="../../css/i3geo_ferramentas.css">
  5 +<link rel="stylesheet" type="text/css" href="../../pacotes/yui231/build/tabview/assets/skins/sam/tabview.css">
  6 +<style>.yuibutton button{padding-left:2em;background:url(../../imagens/tic.png) 5% 50% no-repeat;}</style>
  7 +</head>
  8 +<body class="yui-skin-sam" >
  9 + <div class=verdeescuro style="top:0px;cursor:pointer;left:0px;">
  10 + <div id=guia1 >Fonte dos dados</div>
  11 + <div id=guia2 >Propriedades</div>
  12 + <div id=guia3 >?</div>
  13 + </div>
  14 + <span id=geral style="left:0px;top:0px;">
  15 + <div class=guiaobj id="guia1obj" style="display:block;left:0px" >
  16 + <div id=opc1 style=top:0px;left:5px; >
  17 + <div id=combot style="position:relative;top:5px;left:0px;">
  18 + </div>
  19 + Escolha os itens to tipo num&eacute;rico que compor&atilde;o cada parte do gr&aacute;fico
  20 + <div id=listai class=digitar style="left:0px;top:20px;330px;height:80px;overflow:auto;display:block;">Escolha o tema para ver a lista de itens</div>
  21 + <br><br>
  22 + <div onclick="criar()" style=top:0px;left:0px;text-align:left >
  23 + <input id=botao1 size=35 type=button value="Criar gráficos" />
  24 + </div>
  25 + </div>
  26 + <div id=men1 style=top:10px;left:5px >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>
  27 + </div>
  28 + <div class=guiaobj id="guia2obj" style="display:none;left:0px" >
  29 + <div id=opc2 style="display:block;top:0px;left:0px">
  30 + <table class=lista2 width="70%">
  31 + <tr>
  32 + <td>Tipo:</td>
  33 + <td>
  34 + <select id=tipo >
  35 + <option value='PIE'>Pizza</option>
  36 + <option value='BAR'>Barras</option>
  37 + </select>
  38 + </td>
  39 + </tr>
  40 + <tr>
  41 + <td>Largura (em pixels):</td>
  42 + <td><input style="cursor:text" size=4 class=digitar type='text' id=largura value='50' /></td>
  43 + </tr>
  44 + <tr>
  45 + <td>Altura (em pixels):</td>
  46 + <td><input style="cursor:text" size=4 class=digitar type='text' id=altura value='50' /></td>
  47 + </tr>
  48 + </table>
  49 + </div>
  50 + </div>
  51 + <div class=guiaobj id="guia3obj" style="display:none;" >
  52 + <div style="display:block;position:relative;top:5px;left:0px;font-size:12px">
  53 + <p>Para a montagem de cada gr&aacute;fico &eacute; necess&aacute;rio selecionar um tema que contenha
  54 + os dados que ser&atilde;o representados.
  55 + <p>Os dados s&atilde;o aqueles que encontram-se na tabela de atributos do tema.
  56 + <p>Ap&oacute;s selecionado o tema, &eacute; mostrada uma lista com os itens existentes na tabela de atributos.
  57 + Escolha os itens que ser&atilde;o utilizados no gr&aacute;fico clicando no box que aparece na lista de itens. Cada item ir&aacute; compor uma fatia do gr&aacute;fico.
  58 + Ao lado do item, &eacute; mostrada a cor que ser&aacute; utilizada na representa&ccedil;&atilde;o. Cada cor &eacute; definida em RGB.
  59 + <p>Na guia "propriedades" &eacute; poss&iacute;vel definir propriedades de representa&ccedil;&atilde;o de cada gr&aacute;fico. As defini&ccedil;&otilde;es afetar&atilde;o a forma de cada gr&aacute;fico.
  60 + Ap&oacute;s escolhidos os itens e as propriedades, clique no mapa para adicionar o gr&aacute;fico.
  61 + <p>Os dados que ser&atilde;o utilizados s&atilde;o buscados no elemento clicado.
  62 + <p>Cada gr&aacute;fico adicionado &etilde; inclu&iacute;do no mapa como um novo tema.<br><br><br>
  63 + </div>
  64 + </div>
  65 + <div id="resultado" style="display:none;position:relative;top:10px;left:0px;"></div>
  66 + </span>
  67 +</body>
  68 +<script src="../i3geo_tudo_compacto.js.php" type="text/javascript"></script>
  69 +<script language="JavaScript" type="text/javascript" src="index.js"></script>
  70 +</html>
0 71 \ No newline at end of file
... ...
ferramentas/graficotema/index.js 0 → 100644
  Diff comments   View file @122762f
... ... @@ -0,0 +1,135 @@
  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 +ativaGuias("")
  25 +mostraGuia("guia1")
  26 +comboi = ""
  27 +//eventos das guias
  28 +$i("guia1").onclick = function()
  29 +{mostraGuia("guia1")}
  30 +$i("guia2").onclick = function()
  31 +{mostraGuia("guia2")}
  32 +$i("guia3").onclick = function()
  33 +{mostraGuia("guia3")}
  34 +mensagemAjuda("men1",$i("men1").innerHTML)
  35 +//combo com as camadas
  36 +comboCamadas("selCamada",tema,function(retorno)
  37 +{
  38 + if (retorno.dados == "") //tema unico
  39 + {$i("combot").innerHTML="";registrosf()}
  40 + else
  41 + {
  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 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.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 +
  120 + var tipo = $i("tipo").value
  121 + if (tipo == "PIE")
  122 + var tamanho = $i("largura").value
  123 + else
  124 + var tamanho = $i("largura").value+" "+$i("altura").value
  125 + var temp = function(retorno)
  126 + {
  127 + aguarde("none")
  128 + window.parent.ajaxredesenha(retorno)
  129 + }
  130 + var p = g_locaplic+"/classesphp/mapa_controle.php?g_sid="+g_sid+"&funcao=graficotema&tema="+tema+"&lista="+lista+"&tamanho="+tamanho+"&tipo="+tipo
  131 + var cp = new cpaint();
  132 + //cp.set_debug(2)
  133 + cp.set_response_type("JSON");
  134 + cp.call(p,"graficotema",temp);
  135 +}
... ...