 |
|
|
 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. |
||
Você está aqui: Cards de Python |
||
|
||
 Link para compartilhar na Internet ou com seus amigos: |
||
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: 7958 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. |
Python ::: Python para Engenharia ::: Geometria Analítica e Álgebra Linear |
Python para Engenharia - Como multiplicar um vetor por um escalar usando Python e NumPyQuantidade de visualizações: 3864 vezes |
|
Esta dica de Python e NumPy é direcionada, principalmente, aos estudantes de Engenharia, que se deparam, logo no início do curso, com o estudo da Geometria Analítica e gostariam de entender melhor a multiplicação de vetores por um escalar. Lembre-se de que um escalar é um valor único, enquanto vetores e matrizes são estruturas que guardam vários valores ao mesmo tempo. Nosso primeiro exemplo será feito em cima de um vetor no R3, ou seja, no espaço, com os seguintes valores: [3, -5, 4]. O escalar usado será o valor 2, ou seja, temos que multiplicar cada valor no vetor pelo valor 2 e, dessa forma, obtermos um novo vetor, também no R3. Vetores no R3 possuem valores para x, y e z (três dimensões), enquanto vetores no R2 possuem apenas o x e y. Veja como a linguagem Python facilita a operação da multiplicação de um vetor R3 por um escalar:
# importamos a bibliteca NumPy
import numpy as np
def main():
# declara e cria o vetor
vetor = np.array([3, -5, 4])
# agora vamos multiplicar este vetor pelo escalar 2
escalar = 2
novoVetor = vetor * escalar
# vamos exibir o resultado
print("Vetor inicial: ", vetor)
print("Valor do escalar: ", escalar)
print("Novo vetor: ", novoVetor)
if __name__== "__main__":
main()
Este código Python vai gerar o seguinte resultado: Vetor inicial: [3 -5 4] Valor do escalar: 2 Novo vetor: [6 -10 8] Agora, saindo da Geometria Analítica e indo para a Álgebra Linear, veja como podemos efetuar a mesma operação em uma matriz de 2 linhas e 3 colunas (recorde que, em Python, uma matriz nada mais é do que um vetor de vetores, ou seja, cada elemento do vetor contém outro vetor):
# importamos a bibliteca NumPy
import numpy as np
def main():
# declara e cria a matriz
matriz = np.array([(4, 12, 50), (5, 3, 1), (11, 9, 7)])
# agora vamos multiplicar esta matriz pelo escalar 2
escalar = 2
novaMatriz = matriz * escalar
# vamos exibir o resultado
print("Matriz inicial: ", matriz)
print("Valor do escalar: ", escalar)
print("Nova matriz: ", novaMatriz)
if __name__== "__main__":
main()
Ao executarmos este código Python nós teremos o seguinte resultado: Matriz inicial: [[4 12 50] [5 3 1] [11 9 7]] Valor do escalar: 2 Nova matriz: [[8 24 100] [10 6 2] [22 18 14]] |
React Native ::: React Native - Componentes Visuais ::: Image |
Como exibir imagens e fotos em aplicações React Native usando o componente ImageQuantidade de visualizações: 1540 vezes |
|
O componente Image do React Native é usado quando queremos carregar imagens e exibí-las em nossas aplicações mobile. Este componente possibilita a exibição de diferentes tipos de imagens, incluindo imagens remotas (em um site, por exemplo), recursos estáticos, imagens em locais temporários e imagens a partir do armazenamento local, tais como imagens da câmera. Veja uma aplicação React Native completa que mostra como carregar uma imagem da internet e exibí-la em um componente Image. Note que a imagem a ser exibida é a logo do nosso site. Eis o código:
import React, {Component} from 'react';
import {Image, View} from 'react-native';
type Props = {};
export default class App extends Component<Props> {
render() {
return (
<View style={{padding: 10, flexDirection: 'column'}}>
<Image style={{width: 237, height: 49}} source={{uri:
'https://www.arquivodecodigos.com.br/logo2.jpg'}} />
</View>
);
}
}
É importante observar que, quando a imagem estiver sendo carregada de uma rede (internet, por exemplo) ou via propriedade data, temos que, manualmente, indicar as dimensões da imagem a ser exibida. |
JavaScript ::: Dicas & Truques ::: Validação de Formulários |
Validação de formulários em JavaScript - Como validar CPF (com pontos e hífen) usando expressões regularesQuantidade de visualizações: 45218 vezes |
|
Nesta dica mostrarei como podemos escrever uma função JavaScript para a validação de números de CPF, dessa vez usando pontos e o hífen. Isso é interessante porque, muitas vezes, o usuário copia seu CPF de outro lugar e cola nas caixas de texto de nossas aplicações. A pagina HTML que contém o formulário se parece com a imagem abaixo:  E agora veja o código JavaScript completo para o exemplo, incluindo o código HTML para a página:
<html>
<head>
<title>Estudando JavaScript</title>
<style type="text/css">
input {margin-bottom: 3px; margin-top: 3px}
</style>
<script type="text/javascript">
function validarCPF(){
var cpf = document.cadastro.cpf.value;
var filtro = /^\d{3}.\d{3}.\d{3}-\d{2}$/i;
if(!filtro.test(cpf)){
window.alert("CPF inválido. Tente novamente.");
return false;
}
cpf = remove(cpf, ".");
cpf = remove(cpf, "-");
if(cpf.length != 11 || cpf == "00000000000" ||
cpf == "11111111111" ||
cpf == "22222222222" || cpf == "33333333333" ||
cpf == "44444444444" ||
cpf == "55555555555" || cpf == "66666666666" ||
cpf == "77777777777" ||
cpf == "88888888888" || cpf == "99999999999"){
window.alert("CPF inválido. Tente novamente.");
return false;
}
soma = 0;
for(i = 0; i < 9; i++){
soma += parseInt(cpf.charAt(i)) * (10 - i);
}
resto = 11 - (soma % 11);
if(resto == 10 || resto == 11){
resto = 0;
}
if(resto != parseInt(cpf.charAt(9))){
window.alert("CPF inválido. Tente novamente.");
return false;
}
soma = 0;
for(i = 0; i < 10; i ++){
soma += parseInt(cpf.charAt(i)) * (11 - i);
}
resto = 11 - (soma % 11);
if(resto == 10 || resto == 11){
resto = 0;
}
if(resto != parseInt(cpf.charAt(10))){
window.alert("CPF inválido. Tente novamente.");
return false;
}
window.alert("CPF válido. Muito obrigado.");
return true;
}
function remove(str, sub) {
i = str.indexOf(sub);
r = "";
if (i == -1) return str;
r += str.substring(0,i) + remove(str.substring(i + sub.length), sub);
return r;
}
</script>
</head>
<body>
<form name="cadastro" onSubmit="return validarCPF()">
Informe seu CPF (use os pontos e o hífen):<br>
<input type="text" maxlength="14" name="cpf">
<input type="submit" value="Enviar!">
</form>
</body>
</html>
|
JavaScript ::: Dicas & Truques ::: Strings e Caracteres |
Como remover os espaços no final de uma string em JavaScript usando uma função trim_final() personalizadaQuantidade de visualizações: 1 vezes |
|
Há muitos anos eu precisava remover espaços no final de uma string em JavaScript e percebi que o objeto String, na época, não oferecia a função trim(). Não me restou opção a não ser sentar e escrever o código na mão mesmo. Hoje em dia não precisamos mais dele, mas fica aí para que você entenda a lógica empregada na resolução do problema. Veja a página HTML completa com o exemplo:
<!doctype html>
<html>
<head>
<title>Strings em JavaScript</title>
</head>
<body>
<script type="text/javascript">
// função personalizada que remove os espaços
// no final de uma string
function trim_final(string){
// primeiro definimos o código do espaço
var espaco = String.fromCharCode(32);
// obtemos o tamanho da string
var tamanho = string.length;
// e criamos uma string temporária
var temp = "";
// a string está vazia?
if(tamanho < 0){
return "";
}
// uma variável temporária para percorrermos
// a string de trás para frente
var temp2 = tamanho - 1;
while(temp2 > -1){
if(string.charAt(temp2) == espaco){
// não faz nada
}
else{
temp = string.substring(0, temp2 + 1);
break;
}
// decrementamos a variável temp2
temp2--;
}
return temp;
}
// vamos testar a função trim_final()
var frase = "Gosto muito de JavaScript ";
document.write("Com espaços no final: " +
frase + "#" + "<br>");
// vamos remover os espaços no final da string
frase = trim_final(frase);
document.write("Sem espaços no final: " +
frase + "#" + "<br>");
</script>
</body>
</html>
Ao executar este código JavaScript nós teremos o seguinte resultado: Com espaços no final: Gosto muito de JavaScript # Sem espaços no final: Gosto muito de JavaScript# |
Desafios, Exercícios e Algoritmos Resolvidos de JavaScript |
Veja mais Dicas e truques de JavaScript |
Dicas e truques de outras linguagens |
E-Books em PDF |
||||
|
||||
|
||||
Linguagens Mais Populares |
||||
|
1º lugar: Java |
