![]() |
|
|
Planilha de Dimensionamento de Tubulações
Hidráulicas Água Fria e Água Quente CompletaNossa planilha automática de dimensionamento de tubulações de água fria e quente é uma ferramenta desenvolvida para auxiliar engenheiros e projetistas no cálculo rápido e preciso das redes hidráulicas de edificaçoes. Por meio da inserçao de dados como vazao, diâmetro da tubulaçao, comprimento da rede, material do tubo e coeficientes hidráulicos, a planilha realiza automaticamente os cálculos necessários para verificar velocidade da água, perda de carga e dimensionamento adequado das tubulaçoes. |
||
HTML5 ::: Aplicativos Completos ::: Programas de desenho, edição e visualização de imagens e fotos |
Como criar um programa de desenho simples usando o objeto Canvas do HTML5Quantidade de visualizações: 7993 vezes |
|
Revisando alguns códigos que desenvolvi para clientes ao longo desses anos, encontrei um exemplo de um programa de desenho bem simples demonstrando as possibilidades gráficas do elemento Canvas do HTML. Este código foi escrito há uns dois anos e resolvi compartilhar com todos, para que vocês possam aprimorá-lo e acrescentar novas idéias, afinal, o HTML5 está mais atual do que nunca. Veja o resultado no navegador: ![]() Eu o escrevi de forma bem simples, sem usar jQuery ou qualquer outro framework, apenas JavaScript raiz mesmo, de forma que até os estudantes mais iniciantes não terão dificuldade de entender. Veja a listagem completa e com comentários:
<html>
<head>
<title>Desenhando no canvas do HTML5</title>
</head>
<body style="padding: 15px">
<b>Clique e arraste para desenhar</b><br><br>
<canvas id="quadro" style="border: 1px solid #666"
width="600" height="350"></canvas>
<br><br><button onClick="limpar()">Limpar</button>
<script type="text/javascript">
// obtém uma referência ao canvas
var quadro = document.getElementById('quadro');
// vamos obter o contexto de desenho
var areaDesenho = quadro.getContext("2d");
// podemos desenhar?
var podeDesenhar = false; // ainda não
// vetores para guardar as posições x, y, e se o mouse está sendo
// movimentado pressionado
var vetorX = new Array();
var vetorY = new Array();
var vetorArrastar = new Array();
// agora vamos adicionar na área de desenho um "ouvidor" de
// eventos mousedown, ou seja, vamos detectar quando o usuário
// pressionar o botão do mouse (sem soltar)
quadro.addEventListener('mousedown', function(e){
// podemos iniciar o desenho
podeDesenhar = true;
registrarClique(e.pageX - this.offsetLeft, e.pageY - this.offsetTop, false);
desenhar(); // faça o desenho, moço
});
// o "ouvidor" de evento que detecta se o mouse está sendo arrastado
// pressionado
quadro.addEventListener('mousemove', function(e){
if(podeDesenhar){
registrarClique(e.pageX - this.offsetLeft, e.pageY -
this.offsetTop, true);
desenhar(); // faça o desenho, moço
}
});
// o "ouvidor" de evento que detecta se o mouse foi liberado
// e interrompe o desenho
quadro.addEventListener('mouseup', function(e){
podeDesenhar = false;
});
// o mouse saiu da área de desenho?
quadro.addEventListener('mouseleave', function(e){
podeDesenhar = false;
});
function registrarClique(x, y, arrastar){
// aqui nós guardamos em vetores as posições x, y do clique ou
// o movimento do mouse pressionado.
vetorX.push(x);
vetorY.push(y);
vetorArrastar.push(arrastar);
}
// é aqui que a mágica ocorre
function desenhar(){
// primeiro vamos limpar o quadro de desenho
areaDesenho.clearRect(0, 0, areaDesenho.canvas.width,
areaDesenho.canvas.height);
areaDesenho.strokeStyle = "#5c5cd6"; // cor
areaDesenho.lineJoin = "round"; // formato da junção de linha
areaDesenho.lineWidth = 5; // largura da linha
// percorremos os vetores, usando como base o vetor de coordenadas x
for(var i = 0; i < vetorX.length; i++){
areaDesenho.beginPath(); // inicia o caminho
// o mouse foi arrastado neste evento?
if((vetorArrastar[i] == true && i > 0)){
areaDesenho.moveTo(vetorX[i - 1], vetorY[i - 1]);
}
else{
// é o início do desenho
areaDesenho.moveTo(vetorX[i] - 1, vetorY[i]);
}
// desenha a linha do ponto X ao ponto Y
areaDesenho.lineTo(vetorX[i], vetorY[i]);
// fecha o caminho
areaDesenho.closePath();
// conclui de fato o desenho
areaDesenho.stroke();
}
}
// e aqui nós limpamos a área de desenho e esvaziamos os vetores
function limpar(){
areaDesenho.clearRect(0, 0, areaDesenho.canvas.width,
areaDesenho.canvas.height);
vetorX = [];
vetorY = [];
vetorArrastar = [];
}
</script>
</body>
</html>
Salve o código como "desenho.html" (cuidado para não salvar como "desenho.html.txt") e abra-o no seu navegador, remoto ou localmente. Você pode começar suas modificações alterando a cor do desenho, a largura da linha, etc. Você pode também deixar figuras pré-configuradas e até permitir que o usuário inclua fotos no Canvas. Para os estudantes que já sabem Node.js, saiba que é possível enviar os três vetores via sockets em um ambiente real time para que outros usuários na rede vejam o seu desenho em tempo real. Bons estudos. |
Java ::: Java Swing - Gerenciadores de Layout ::: GridBagLayout |
Como adicionar espaço entre o GridBagLayout do Java Swing e as bordas da janela JFrame usando o método setBorder()Quantidade de visualizações: 11956 vezes |
Se o GridBagLayout for o gerenciador de layout principal da janela, pode ser interessante adicionar algum espaço (padding) entre ele e as bordas da janela JFrame ou JDialog. Isso pode ser feito obtendo-se uma referência ao painel de conteúdo (ContentPane) da JFrame e adicionando uma borda EmptyBorder. Veja como isso é feito no trecho de código abaixo:
package arquivodecodigos;
import javax.swing.*;
import javax.swing.border.*;
import java.awt.*;
public class Estudos extends JFrame{
public Estudos(){
super("Como usar a classe GridBagLayout");
// define o layout
setLayout(new GridBagLayout());
// define uma borda para aumentar o espaço
// entre as bordas da janela e o gerenciador
// de layout
((JComponent)getContentPane()).setBorder(
new EmptyBorder(10, 10, 10, 10));
// cria o GridBagConstraints
GridBagConstraints gbc = new GridBagConstraints();
// controla o espaço entre os componentes
// e as linhas do GridBagLayout.
// aqui nós definimos 5 pixels para os
// lados de cima, esquerda, inferior e direita
gbc.insets = new Insets(5, 5, 5, 5);
// adiciona componentes à janela
gbc.gridy = 0; // linha
gbc.gridx = 0; // coluna
add(new JButton("Botão 1"), gbc);
gbc.gridy = 0; // linha
gbc.gridx = 1; // coluna
add(new JButton("Botão 2"), gbc);
gbc.gridy = 0; // linha
gbc.gridx = 2; // coluna
add(new JButton("Botão 3"), gbc);
gbc.gridy = 1; // linha
gbc.gridx = 0; // coluna
add(new JButton("Botão 4"), gbc);
gbc.gridy = 1; // linha
gbc.gridx = 1; // coluna
add(new JButton("Botão 5"), gbc);
gbc.gridy = 1; // linha
gbc.gridx = 2; // coluna
add(new JButton("Botão 6"), gbc);
//setSize(350, 150);
pack(); // ajusta o tamanho da janela ao
// dos componentes
setVisible(true);
}
public static void main(String args[]){
Estudos app = new Estudos();
app.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
}
}
Ao executar este código Java Swing nós teremos o seguinte resultado: ![]() |
Java ::: Estruturas de Dados ::: Lista Ligada Simples |
Estruturas de Dados em Java - Como inserir nós no final de uma lista singularmente ligada em JavaQuantidade de visualizações: 8638 vezes |
Esta dica mostra como inserir nós no final de uma lista singularmente ligada. A classe usada para representar cada nó é a seguinte (No.java):
// classe No
public class No{
public int valor;
public No proximo;
}
// fim da classe No
Note que cada nó contém apenas um valor inteiro e um ponteiro para o próximo nó. Ao analisar o código você perceberá que tanto a inserção no final quanto a exibição dos nós são feitas usando métodos. Isso permitirá o reaproveitamento deste código em suas próprias implementações. Vamos ao código para a lista singularmente ligada (Lista.java):
public class Lista {
No inicio, fim; // início e fim da lista
// método que permite exibir os valores de
// todos os nós da lista
public void exibir() {
// vamos obter uma referência ao início da lista
No no = inicio;
if (no != null) { // a lista não está vazia
while (no != null) { // enquanto a lista não estiver vazia
System.out.println(no.valor);
no = no.proximo; // pula para o nó seguinte
}
}
else {
System.out.println("A lista está vazia\n\n");
}
}
// método que permite inserir nós no
// final da lista.
// veja que o método recebe o valor a ser
// armazenado em cada nó
public void inserirFinal(int v) {
No novo = new No(); // cria um novo nó
novo.valor = v;
// é o nó no final, portanto não deverá apontar para nenhum
// outro nó
novo.proximo = null;
// verifica se a lista está vazia
if (inicio == null) {
// novo aponta para o novo nó
inicio = novo;
// final deve apontar para o novo nó também
fim = novo;
}
else { // não está vazia....vamos inserir o nó no final da lista
// o campo próximo do último nó aponta para o nó recém-criado
fim.proximo = novo;
// o campo fim aponta para o novo nó...o campo inicio permanece igual
fim = novo;
}
}
}
Compile as classes No.java e Lista.java e vamos escrever um aplicativo de teste (Main.java):
public class Main {
public static void main(String[] args) {
// vamos criar uma nova lista
Lista lista = new Lista();
// vamos inserir quatro valores no
// finalo da lista
lista.inserirFinal(45);
lista.inserirFinal(3);
lista.inserirFinal(98);
lista.inserirFinal(17);
// exibe os valores na lista
lista.exibir();
}
}
Ao executar o aplicativo teremos o seguinte resultado: 45 3 98 17 |
JavaScript ::: Dicas & Truques ::: Arrays e Matrix (Vetores e Matrizes) |
Como testar se ao menos um elemento de um array satisfaz uma condição em JavaScript usando a função some()Quantidade de visualizações: 2711 vezes |
|
O método some(), adicionado à linguagem JavaScript por meio do ECMAScript 5 (JavaScript 5, ECMAScript 2009, ES5) pode ser usado quando queremos verificar se um ou mais elementos de um vetor satisfaz uma determinada condição. Este método nos permite fornecer uma função de callback que será chamada para cada um dos elementos do vetor. E o retorno do método some() é um valor true se ao menos um dos elementos passar no teste e false em caso contrário. Tão logo o valor true seja satisfeito, a função some() encerra sua execução imediatamente. Veja um exemplo no qual testamos se AO MENOS um elemento do array é maior que 70:
<script type="text/javascript">
function testar(valor, indice, vetor){
if(valor > 70){
return true;
}
}
var valores = new Array(21, 50, 30, 71, 12, 3);
// vamos verificar se AO MENOS um valor é maior que 70
var res = valores.some(testar);
window.alert("Alguns valores passaram no teste: " + res);
</script>
Aqui o resultado será true, pois o valor 71 passou no teste. É importante observar que, assim que a função de callback retorna true pela primeira vez, o método some() já abandona sua execução. Uma função passada para o método some() pode conter os seguintes argumentos (nessa mesma ordem): a) O valor do item; b) O índice do item (opcional); c) O vetor a partir do qual o método some() está sendo chamado (opcional). Como última observação, o método some() não modifica o array original. |
Nossas 20 dicas & truques de programação mais populares |
|
JavaScript - Como testar se ao menos um elemento de um array satisfaz uma condição em JavaScript usando a função some() JavaScript - Como adicionar zeros (ou outro caractere) no início de uma string usando o método padStart() da linguagem JavaScript |
Você também poderá gostar das dicas e truques de programação abaixo |
|
Delphi - Como calcular MDC em Delphi JavaScript - JavaScript para iniciantes - Como usar o método escape() para codificar uma frase em JavaScript JavaScript - Como adicionar elementos no início de um array JavaScript usando a função unshift() do objeto Array C - Como alocar memória para instâncias de uma estrutura (struct) e acessá-las usando ponteiros em C JavaScript - JavaScript para iniciantes - Como converter uma string em um valor numérico usando o método Number() do JavaScript JavaScript - Como retornar o dia da semana em JavaScript no formato Domingo, Segunda-feira, Terça-feira, etc |
Nossas 20 dicas & truques de programação mais recentes |
Últimos Projetos e Códigos Fonte Liberados Para Apoiadores do Site |
|
Python - Como criar o jogo Pedra, Papel, Tesoura em Python - Jogo completo em Python com código comentado |
Últimos Exercícios Resolvidos |
E-Books em PDF |
||||
|
||||
|
||||
Linguagens Mais Populares |
||||
|
1º lugar: Java |






