Commit 3e44d78d155c0ac127cda9d2b661db7ec9a2255b
1 parent
241f8b38
Exists in
master
and in
7 other branches
criação da nova ferramenta para geração de gráficos (gráfico de pizza inicialmen…
…te) e inclusão de botaão para geração de gráficos na ferramenta de seleção.
Showing
4 changed files
with
56 additions
and
154 deletions
Show diff stats
ferramentas/graficointerativo/index.htm
... | ... | @@ -1,139 +0,0 @@ |
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 | -<title></title> | |
6 | -<style type="text/css" >button{background:url(../../imagens/tic.png) 98% 50% no-repeat;}</style> | |
7 | -<link rel="stylesheet" type="text/css" href="../../pacotes/yui270/build/button/assets/skins/sam/button.css"/> | |
8 | -<style type="text/css"> | |
9 | -body { | |
10 | - margin:0; | |
11 | - padding:0; | |
12 | - border:0px; | |
13 | -} | |
14 | -</style> | |
15 | -</head> | |
16 | -<body name="ancora" class="yui-skin-sam" > | |
17 | - <div id=guiasYUI class="yui-navset" style="top:0px;cursor:pointer;left:0px;"> | |
18 | - <ul class="yui-nav" style="border-width:0pt 0pt 0px;border-color:rgb(240,240,240);border-bottom-color:white;"> | |
19 | - <li><a href="#ancora"><em><div id="guia1" style="text-align:center;font-size:10px;left:0px;" >Pegar no mapa</div></em></a></li> | |
20 | - <li><a href="#ancora"><em><div id="guia2" style="text-align:center;font-size:10px;left:0px;" >Por atributo</div></em></a></li> | |
21 | - <li><a href="#ancora"><em><div id="guia3" style="text-align:center;font-size:10px;left:0px;" >Por tema</div></em></a></li> | |
22 | - <li><a href="#ancora"><em><div id="guia5" style="text-align:center;font-size:10px;left:0px;" >Gráfico</div></em></a></li> | |
23 | - <li><a href="#ancora"><em><div id="guia4" style="text-align:center;font-size:10px;left:0px;" >Opções</div></em></a></li> | |
24 | - </ul> | |
25 | - </div> | |
26 | - <div id=geral style="left:0px;top:0px;"> | |
27 | - <div id="botoesopc" style=top:1px;left:0px;text-align:center;width:90%; > | |
28 | - <img alt="selpt.png" id=selecaopt onclick="tiposel(this)" src="../../imagens/selpt.png" title="Clique no mapa para selecionar" style="cursor:pointer;border:1px solid white" /> | |
29 | - <img alt="selext.png" id=selecaoext onclick="tiposel(this)" src="../../imagens/selext.png" title="Seleciona o que estiver visível no mapa" style="cursor:pointer;border:1px solid gray" /> | |
30 | - <img alt="selbox.png" id=selecaobox onclick="tiposel(this)" src="../../imagens/selbox.png" title="Desenhe um retângulo no mapa para selecionar" style="cursor:pointer;border:1px solid gray" /> | |
31 | - <img alt="selpoli.png" id=selecaopoli onclick="tiposel(this)" src="../../imagens/selpoli.png" title="Desenhe um polígono no mapa para selecionar" style="cursor:pointer;border:1px solid gray" /> | |
32 | - </div> | |
33 | - <input type=button id=parapoli style="cursor:pointer;display:none;text-align:center" value="concluir polígono" onclick="concluipoligono()"/> | |
34 | - <div id=opc1 style=top:0px;left:10px;text-align:left;width:90%; > | |
35 | - Escolha um ou mais temas: | |
36 | - <div id="temas" > | |
37 | - </div> | |
38 | - <br>Tipo de seleção: | |
39 | - <div id="operacao" > | |
40 | - </div> | |
41 | - </div> | |
42 | - <div id=guia1obj style="text-align:left;top:10px;left:10px;width:95%;"> | |
43 | - <div id=opc2 onclick="criatemaf()" style="text-align:left;top:0px;left:0px;"> | |
44 | - <input id=botao1 size=40 type=button value="Criar um tema novo com a seleção"/> | |
45 | - </div> | |
46 | - <div id=men1 style=top:20px;left:0px;width:100%; > | |
47 | - Escolha o tema que receberá a seleção e o tipo de operação. | |
48 | - Depois, clique no mapa no elemento desejado para selecionar. | |
49 | - </div> | |
50 | - </div> | |
51 | - <div id=guia2obj style="width:95%;display:none;left:10px;top:5px"> | |
52 | - <div id=opc3 style=top:0px;left:0px;text-align:left;display:none;> | |
53 | - Utilize as opções abaixo para construir a expressção: | |
54 | - <table summary="" id="parametros" > | |
55 | - </table> | |
56 | - <div onclick="aplicaselecao()" style="text-align:left;position:relative;top:10px;left:0px"> | |
57 | - <input id=botao2 size=10 type=button value="Aplicar" /> | |
58 | - </div> | |
59 | - <div id=valores class=digitar style="width:100%;height:60px;text-align:left;top:15px;left:0px;overflow:auto"> | |
60 | - </div> | |
61 | - </div> | |
62 | - </div> | |
63 | - <div id=guia3obj style="width:95%;display:none;left:10px;top:10px"> | |
64 | - <div id=opc4 style=top:0px;left:0px;text-align:left;width:100%;> | |
65 | - Tema que será utilizado para selecionar o outro (esse tema deve possuir elementos já selecionados): | |
66 | - <div id="overlay" style="text-align:left;top:0px;left:0px"> | |
67 | - </div> | |
68 | - <div onclick="aplicaselecaoTema()" style="text-align:left;top:0px;left:0px"> | |
69 | - <br><input id=botao3 size=10 type=button value="Aplicar"> | |
70 | - </div> | |
71 | - </div> | |
72 | - </div> | |
73 | - <div id=guia4obj style="width:95%;display:none;left:10px;top:10px"> | |
74 | - <table summary="" class=lista3 width="90%"> | |
75 | - <tr> | |
76 | - <td>Distância utilizada ao selecionar por ponto (em metros):</td> | |
77 | - <td><input style="cursor:text" size=4 class=digitar type='text' id=toleranciapt value='0' /></td> | |
78 | - </tr> | |
79 | - <tr> | |
80 | - <td>Esquema de cores para o gráfico:</td> | |
81 | - <td> | |
82 | - <select id="colorScheme" > | |
83 | - <option value="Blue">Azul</option> | |
84 | - <option value="Red">Vermelho</option> | |
85 | - <option value="Green">Verde</option> | |
86 | - <option value="Purple">Roxo</option> | |
87 | - <option value="Cyan">Ciano</option> | |
88 | - <option value="Orange">Laranja</option> | |
89 | - </select> | |
90 | - </td> | |
91 | - <tr> | |
92 | - </tr> | |
93 | - <td>Tipo de gráfico</td> | |
94 | - <td> | |
95 | - <select id="chartStyle"> | |
96 | - <option value="bar">Barras</option> | |
97 | - <option value="line">Linhas</option> | |
98 | - <option value="pie">Pizza</option> | |
99 | - </select> | |
100 | - </td> | |
101 | - </tr> | |
102 | - </table> | |
103 | - </div> | |
104 | - <div id=guia5obj style="width:95%;display:block;left:10px;top:5px"> | |
105 | - <div id=opcgr style=top:0px;left:0px;text-align:left;display:block;> | |
106 | - Defina as colunas que comporão os eixos x e y do gráfico: | |
107 | - <table summary="" id="itensgrafico" > | |
108 | - <tr> | |
109 | - <td>Eixo X (Classes)</td><td>Eixo Y (Valores)</td><td onclick="atualizaGrafico()"><input id=botaoGr size=10 type=button value="Gerar"></td> | |
110 | - </tr> | |
111 | - <tr> | |
112 | - <td id=lugarComboX ></td><td id=lugarComboY ></td><td></td> | |
113 | - </tr> | |
114 | - </table> | |
115 | - </div> | |
116 | - <div id=lugarGrafico style="text-align:center;left:5px;width:95%" ></div> | |
117 | - </div> | |
118 | - | |
119 | - </div> | |
120 | -<!--- | |
121 | -O Mochikit possui uma incompatibilidade com o CPAINT | |
122 | -Para resolver o problema, foi criado uma cópia de cpaint2.inc.js | |
123 | -no diretório desta ferramenta. | |
124 | -Por isso, a carga dos js é feita de cada componente | |
125 | ----> | |
126 | -<script src="../funcoes_compacto.js"></script> | |
127 | -<script src="../../pacotes/yui270/build/yahoo-dom-event/yahoo-dom-event.js"></script> | |
128 | -<script src="../../pacotes/yui270/build/element/element-min.js"></script> | |
129 | -<script src="../../pacotes/yui270/build/button/button-min.js"></script> | |
130 | -<script src="../../pacotes/yui270/build/tabview/tabview-min.js"></script> | |
131 | -<script src="../../pacotes/yui270/build/animation/animation-min.js"></script> | |
132 | -<script src="cpaint2.inc.js"></script> | |
133 | -<script language="JavaScript" type="text/javascript" src="index.js"></script> | |
134 | -<script src="../../pacotes/MochiKit/packed/MochiKit/MochiKit.js" type="text/javascript"></script> | |
135 | -<script src="../../pacotes/plotkit/PlotKit/excanvas.js" type="text/javascript"></script> | |
136 | -<script src="../../pacotes/plotkit/PlotKit/PlotKit.js" type="text/javascript"></script> | |
137 | - | |
138 | -</body> | |
139 | -</html> | |
140 | 0 | \ No newline at end of file |
ferramentas/i3geo_tudo_compacto.js
... | ... | @@ -7813,6 +7813,19 @@ i3GEO.util = { |
7813 | 7813 | // Pixel width of the scroller |
7814 | 7814 | return (wNoScroll - wScroll); |
7815 | 7815 | }, |
7816 | + /* | |
7817 | + Function: scriptTag | |
7818 | + | |
7819 | + Insere um javascript no documento HTML | |
7820 | + | |
7821 | + Parametros: | |
7822 | + | |
7823 | + js {String} - endereco do JS | |
7824 | + | |
7825 | + ini - funcao do JS que será executada ao ser carregado o script (pode ser "") | |
7826 | + | |
7827 | + id - id do elemento script que será criado | |
7828 | + */ | |
7816 | 7829 | scriptTag: function(js,ini,id){ |
7817 | 7830 | if(typeof(console) !== 'undefined'){console.info("i3GEO.util.scriptTag()");} |
7818 | 7831 | var head,script; |
... | ... | @@ -7821,14 +7834,16 @@ i3GEO.util = { |
7821 | 7834 | head= document.getElementsByTagName('head')[0]; |
7822 | 7835 | script= document.createElement('script'); |
7823 | 7836 | script.type= 'text/javascript'; |
7824 | - if(navm){ | |
7825 | - script.onreadystatechange = function(){ | |
7826 | - if(this.readyState === 'loaded' || this.readyState === 'complete') | |
7827 | - {eval(ini);} | |
7828 | - }; | |
7837 | + if(ini !== ""){ | |
7838 | + if(navm){ | |
7839 | + script.onreadystatechange = function(){ | |
7840 | + if(this.readyState === 'loaded' || this.readyState === 'complete') | |
7841 | + {eval(ini);} | |
7842 | + }; | |
7843 | + } | |
7844 | + else | |
7845 | + {script.onload=function(){eval(ini);};} | |
7829 | 7846 | } |
7830 | - else | |
7831 | - {script.onload=function(){eval(ini);};} | |
7832 | 7847 | script.src= js; |
7833 | 7848 | script.id = id; |
7834 | 7849 | head.appendChild(script); | ... | ... |
ferramentas/i3geo_tudo_compacto.js.php
... | ... | @@ -7813,6 +7813,19 @@ i3GEO.util = { |
7813 | 7813 | // Pixel width of the scroller |
7814 | 7814 | return (wNoScroll - wScroll); |
7815 | 7815 | }, |
7816 | + /* | |
7817 | + Function: scriptTag | |
7818 | + | |
7819 | + Insere um javascript no documento HTML | |
7820 | + | |
7821 | + Parametros: | |
7822 | + | |
7823 | + js {String} - endereco do JS | |
7824 | + | |
7825 | + ini - funcao do JS que será executada ao ser carregado o script (pode ser "") | |
7826 | + | |
7827 | + id - id do elemento script que será criado | |
7828 | + */ | |
7816 | 7829 | scriptTag: function(js,ini,id){ |
7817 | 7830 | if(typeof(console) !== 'undefined'){console.info("i3GEO.util.scriptTag()");} |
7818 | 7831 | var head,script; |
... | ... | @@ -7821,14 +7834,16 @@ i3GEO.util = { |
7821 | 7834 | head= document.getElementsByTagName('head')[0]; |
7822 | 7835 | script= document.createElement('script'); |
7823 | 7836 | script.type= 'text/javascript'; |
7824 | - if(navm){ | |
7825 | - script.onreadystatechange = function(){ | |
7826 | - if(this.readyState === 'loaded' || this.readyState === 'complete') | |
7827 | - {eval(ini);} | |
7828 | - }; | |
7837 | + if(ini !== ""){ | |
7838 | + if(navm){ | |
7839 | + script.onreadystatechange = function(){ | |
7840 | + if(this.readyState === 'loaded' || this.readyState === 'complete') | |
7841 | + {eval(ini);} | |
7842 | + }; | |
7843 | + } | |
7844 | + else | |
7845 | + {script.onload=function(){eval(ini);};} | |
7829 | 7846 | } |
7830 | - else | |
7831 | - {script.onload=function(){eval(ini);};} | |
7832 | 7847 | script.src= js; |
7833 | 7848 | script.id = id; |
7834 | 7849 | head.appendChild(script); | ... | ... |
ferramentas/selecao/index.js.php
... | ... | @@ -122,6 +122,7 @@ i3GEOF.selecao = { |
122 | 122 | ' <img id=i3GEOselecaopoli onclick="i3GEOF.selecao.tiposel(this)" src="'+i3GEO.configura.locaplic+'/imagens/gisicons/polygon.png" title="Desenhe um poligono no mapa para selecionar" style="cursor:pointer;border:1px solid RGB(230,230,230);" />' + |
123 | 123 | ' <img id=i3GEOselecaoext onclick="i3GEOF.selecao.tiposel(this)" src="'+i3GEO.configura.locaplic+'/imagens/gisicons/map.png" title="Seleciona o que estiver visivel no mapa" style="cursor:pointer;border:1px solid RGB(230,230,230);" />' + |
124 | 124 | ' <img id=i3GEOselecaobox onclick="i3GEOF.selecao.tiposel(this)" src="'+i3GEO.configura.locaplic+'/imagens/gisicons/region.png" title="Desenhe um retangulo no mapa para selecionar" style="cursor:pointer;border:1px solid RGB(230,230,230);" />' + |
125 | + ' <img onclick="i3GEOF.selecao.grafico()" src="'+i3GEO.configura.locaplic+'/imagens/gisicons/layer-vector-chart-add.png" title="Grafico" style="cursor:pointer;border:1px solid RGB(230,230,230);" />' + | |
125 | 126 | ' <img onclick="i3GEOF.selecao.operacao(\'inverte\')" src="'+i3GEO.configura.locaplic+'/imagens/gisicons/undo.png" title="Inverte a selecao" style="cursor:pointer;border:1px solid RGB(230,230,230);" />' + |
126 | 127 | ' <img onclick="i3GEOF.selecao.operacao(\'limpa\')" src="'+i3GEO.configura.locaplic+'/imagens/gisicons/erase.png" title="Limpa a selecao" style="cursor:pointer;border:1px solid RGB(230,230,230);" />' + |
127 | 128 | ' <img onclick="i3GEOF.selecao.criatema()" src="'+i3GEO.configura.locaplic+'/imagens/gisicons/save1.png" title="Salva a selecao como um novo tema" style="cursor:pointer;border:1px solid RGB(230,230,230);" />' + |
... | ... | @@ -179,7 +180,7 @@ i3GEOF.selecao = { |
179 | 180 | }; |
180 | 181 | titulo = "Seleção <a class=ajuda_usuario target=_blank href='" + i3GEO.configura.locaplic + "/ajuda_usuario.php?idcategoria=5&idajuda=48a' > </a>"; |
181 | 182 | janela = i3GEO.janela.cria( |
182 | - "360px", | |
183 | + "370px", | |
183 | 184 | "210px", |
184 | 185 | "", |
185 | 186 | "", |
... | ... | @@ -859,6 +860,16 @@ i3GEOF.selecao = { |
859 | 860 | alert("Erro: "+e); |
860 | 861 | i3GEOF.selecao.aguarde.visibility = "hidden"; |
861 | 862 | } |
863 | + }, | |
864 | + /* | |
865 | + Function: grafico | |
866 | + | |
867 | + Abre uma janela flutuante para criar gráficos | |
868 | + */ | |
869 | + grafico: function(){ | |
870 | + var js = i3GEO.configura.locaplic+"/ferramentas/graficointerativo/index.js.php"; | |
871 | + i3GEO.util.scriptTag(js,"i3GEOF.graficointerativo.criaJanelaFlutuante()","i3GEOF.graficointerativo_script"); | |
862 | 872 | } |
873 | + | |
863 | 874 | }; |
864 | 875 | <?php if(extension_loaded('zlib')){ob_end_flush();}?> |
865 | 876 | \ No newline at end of file | ... | ... |