Dúvidas, comentários e doaçoes: +55 62 9 8513 2505

Planilha de Dimensionamento de Tubulações Hidráulicas Água Fria e Água Quente Completa
Nossa 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 HTML5

Quantidade 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 Java

Quantidade 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

Você também poderá gostar das dicas e truques de programação abaixo

Nossas 20 dicas & truques de programação mais recentes

Últimos Projetos e Códigos Fonte Liberados Para Apoiadores do Site

Últimos Exercícios Resolvidos

E-Books em PDF

E-Book 650 Dicas, Truques e Exercícios Resolvidos de Python - PDF com 1.200 páginas
Domine lógica de programação e a linguagem Python com o nosso E-Book 650 Dicas, Truques e Exercícios Exercícios de Python, para você estudar onde e quando quiser.

Este e-book contém dicas, truques e exercícios resolvidos abrangendo os tópicos: Python básico, matemática e estatística, banco de dados, programação dinâmica, strings e caracteres, entrada e saída, estruturas condicionais, vetores e matrizes, funções, laços, recursividade, internet, arquivos e diretórios, programação orientada a objetos e muito mais.
Ver Conteúdo do E-book
E-Book 350 Exercícios Resolvidos de Java - PDF com 500 páginas
Domine lógica de programação e a linguagem Java com o nosso E-Book 350 Exercícios Exercícios de Java, para você estudar onde e quando quiser.

Este e-book contém exercícios resolvidos abrangendo os tópicos: Java básico, matemática e estatística, programação dinâmica, strings e caracteres, entrada e saída, estruturas condicionais, vetores e matrizes, funções, laços, recursividade, internet, arquivos e diretórios, programação orientada a objetos e muito mais.
Ver Conteúdo do E-book

Linguagens Mais Populares

1º lugar: Java
2º lugar: Python
3º lugar: C#
4º lugar: PHP
5º lugar: C
6º lugar: Delphi
7º lugar: JavaScript
8º lugar: C++
9º lugar: VB.NET
10º lugar: Ruby


E-Book 650 Dicas, Truques e Exercícios Resolvidos de Python - PDF com 1.200 páginas
Domine lógica de programação e a linguagem Python com o nosso E-Book 650 Dicas, Truques e Exercícios Exercícios de Python, para você estudar onde e quando quiser. Este e-book contém dicas, truques e exercícios resolvidos abrangendo os tópicos: Python básico, matemática e estatística, banco de dados, programação dinâmica, strings e caracteres, entrada e saída, estruturas condicionais, vetores e matrizes, funções, laços, recursividade, internet, arquivos e diretórios, programação orientada a objetos e muito mais.
Ver Conteúdo do E-book Apenas R$ 32,90

Planilha Web - Planilhas e Calculadoras online para estudantes e profissionais de Engenharia Civil, Engenharia Elétrica e Engenharia Mecânica.


© 2026 Arquivo de Códigos - Todos os direitos reservados
Neste momento há 33 usuários muito felizes estudando em nosso site.