Diego Henrique Guilherme

Fevereiro 24, 2021

On 2/22/2021 at 5:11 PM, cesarasfilho said:

@Diego Henrique Guilherme seria de grande ajuda meu amigo, estou tentando pesquisar mas realmente é complicado sozinho

Ok, vou desenvolver um exemplo pra você poder mexer e modificar a teu gosto.

Observação! - "Continue visitando este post regularmente, pois vou atualizar o código até que fique no ponto ideal para uso."

Copie e Cole o Código abaixo, em um bloco de notas [editor de texto] e Salve com o nome que bem entender desde que tenha a extensão .html . Após salvo, abra-o arquivo no seu Navegador Web e veja como ficou o projeto até o momento.



<!DOCTYPE html>
<html>
   <head>
      <title>Page Title</title>
      <style>
         /* Este é um comentário em CSS */
         #conteiner {
         width:75%;
         margin: 0 auto;
         border: thin solid teal;
         border-radius: 5px;
         padding: 20px;
         }
         form {
         width:75%;
         margin: 0 auto;
         }
         fieldset {
         width: 42%;
         padding: 50px;
         border: thin solid teal;
         border-radius: 5px;
         }
         select {
         color: #f00;
         width: 360px;
         height: 30px;
         background: white;
         border: thin solid silver;
         border-radius: 5px;
         }
         option:hover {
         font-weight: bold;
         }
         input {
         background-color: black;
         border: thin solid silver;
         border-radius: 2px;
         color: white;
         padding: 10px 25px;
         }
         input:hover {
         color: black;
         background-color: white;
         cursor: pointer;
         }
         #box {
         display: none;
         position: absolute;
         top: 0%;
         left: 0%;
         width: 100%;
         height: 100%;
         background-color: black;
         z-index:1;
         -moz-opacity: 0.8;
         opacity:.80;
         filter: alpha(opacity=80);
         }
         #shadow {
         display:none;
         position: absolute;
         top: 25%;
         left: 25%;
         width: 50%;
         height: 100%;
         z-index:2;
         padding: 16px;
         border: 1px solid gray;
         border-radius: 5px;
         background-color: white;
         overflow: auto;
         }
         #print {
         width: 75%;
         height: 360px;
         background-color: white;
         margin: 0 auto;
         padding: 20px;
         }
         big { text-align: center; }
         large { float: left; }
         small,img { float: right; display: block; }
         p, span { font-size: 12px; }
         span { color: indianred; }
      </style>
      <script>
         function impressora(){
            var conteudo = document.getElementById('print').innerHTML;
            tela_impressao = window.open('about:blank');
            tela_impressao.document.write(conteudo);
            tela_impressao.window.print();
            tela_impressao.window.close();
         }
         
         document.onclick = function(e) {
         var x = document.getElementById('box');
         var y = document.getElementById('shadow');
         	if (x.style.display != 'box') {
         	  x.style.display='none';	  
         y.style.display='none';
         }
         }
         
         // Code select option in the form
         function Tipo(tipo) {
            var tipo = (tipo.value);
         document.getElementsByName('listTipo')[0].value = tipo;
         document.getElementById('tipo').textContent = tipo;
         console.log(tipo);
         }
         
         function Partida(partida) {
            var partida = (partida.value);
         document.getElementsByName('listPartida')[0].value = partida;
         document.getElementById('partida').textContent = partida;
         console.log(partida);
         }
         
         function Tensao(tensao) {
            var tensao = (tensao.value);
         document.getElementsByName('listTensao')[0].value = tensao;
         document.getElementById('tensao').textContent = tensao;
         console.log(tensao);
         }
         
         function TensaoComando(comando) {
            var comando = (comando.value);
         document.getElementsByName('listTensaoComando')[0].value = comando;
         document.getElementById('comando').textContent = comando;
         console.log(comando);
         }
         
         function Potencia(potencia) {
            var potencia = (potencia.value);
         document.getElementsByName('listPotencia')[0].value = potencia;
         document.getElementById('potencia').textContent = potencia;
         console.log(potencia);
         }
         
         function Corrente(corrente) {
            var corrente = (corrente.value);
         document.getElementsByName('listCorrente')[0].value = corrente;
         document.getElementById('corrente').textContent = corrente;
         console.log(corrente);
         }
         
         function validar(obj_form){
         
         for (var i = 0; i < obj_form.elements.length; i++) {
         if (obj_form.elements[i].type == "text") {
         if (obj_form.elements[i].value == "") {
         alert("Por favor, Preencha o Campo: " + obj_form.elements[i].name);
         obj_form.elements[i].focus();
         return false;
         break;
         }
         }
         }   
	 
	 document.getElementById('box').style.display = 'block';
         document.getElementById('shadow').style.display = 'block';
         var tam = document.body.scrollHeight;
         document.getElementById('box').style.height = (15 + tam) + 'px';
         return false;
          	   return true;	       	                   	     	   
         
         }
         
         function aviso(inative) {
             var msg = (inative.options[inative.selectedIndex].value);
         if(msg) {
         window.open('https://tools.schneider-electric.com.br/modulos/regua/classe_desligamento.aspx', '', 'width=520,height=500,toolbar=no,location=no,left=150,top=100, scrollbars=no'); 
         console.log(msg);
          }
         }
      </script>
   </head>
   <body>
      <!-- Este é um comentário em HTML -->
      <div id="conteiner">
      	 <figura id="fig1">
	 <img src="https://2.bp.blogspot.com/_AMf-sRm3UJE/TFHeEG1mgvI/AAAAAAAAAAU/g2Fc_Qpr_4c/s200/Blog.jpg" width="200px" hieght="157px" align="left">
	 </figura>
         <h2>CÉSAR AS FILHOS</h2>
         <p><strong>Elétrica</strong></p>
         </br>
         <form name="calc" method="post" onSubmit="return validar(this);">
            <fieldset>
               <legend>Escolha de Partidas de Motores</legend>
               <label for="campo1">Tipo de coordenação:</label></br></br>
               <select name="campo1" onchange="Tipo(this)">
                  <option value="Tipo 1" selected="selected">Tipo 1</option>
                  <option value="Tipo 2">Tipo 2</option>
                  <option value="Total">Total</option>
               </select>
               </br></br>
               <label for="campo2">Tipo de partida:</label></br></br>
               <select name="campo2" onchange="Partida(this)">
                  <option value="1" selected="selected">Direta com Disjuntor Termomagnético</option>
                  <option value="2">Direta com Disjuntor Magnético e Relé Térmico</option>
                  <option value="3">Inversor de Frequência</option>
                  <option value="4">Estrela - Triângulo</option>
                  <option value="5">Autotransformador (Compensadora)</option>
                  <option value="6">Softstarter (Partida suave)</option>
                  <option value="7">Direta com Integral</option>
                  <option value="8">Direta com TeSys U</option>
               </select>
               </br></br>
               <label for="campo3">Tensão do Motor (V):</label></br></br>
               <select name="campo3" onchange="Tensao(this)">
                  <option value="220" selected="selected">220</option>
                  <option value="380">380</option>
                  <option value="440">440</option>
               </select>
               </br></br>
               <label for="campo4">Tensão de comando:</label></br></br>
               <select name="campo4" onchange="TensaoComando(this)">
                  <option>Se for necessário selecione ..</option>
                  <option value="F7">110 VCA</option>
                  <option value="M7">220 VCA</option>
                  <option value="Q7">380 VCA</option>
                  <option value="R7">440 VCA</option>
               </select>
               </br></br>
               <label for="campo5">Potência do Motor (CV):</label></br></br>
               <select name="campo5" onchange="Potencia(this)">
                  <option selected="selected">Escolher Potência ..</option>
                  <option value="4">4</option>
                  <option value="5">5</option>
                  <option value="6">6</option>
                  <option value="7.5">7.5</option>
                  <option value="10">10</option>
                  <option value="12.5">12.5</option>
                  <option value="15">15</option>
                  <option value="20">20</option>
                  <option value="25">25</option>
                  <option value="30">30</option>
                  <option value="40">40</option>
                  <option value="50">50</option>
                  <option value="60">60</option>
                  <option value="75">75</option>
                  <option value="100">100</option>
                  <option value="125">125</option>
                  <option value="150">150</option>
                  <option value="175">175</option>
                  <option value="200">200</option>
               </select>
               </br></br>
               <label for="campo6">Corrente (A):</label></br></br>
               <select name="campo6" onchange="Corrente(this)">
                  <option selected="selected">Escolher Corrente ..</option>
                  <option value="13">13</option>
                  <option value="17">17</option>
                  <option value="20">20</option>
                  <option value="31">31</option>
                  <option value="40">40</option>
                  <option value="54">54</option>
                  <option value="65">65</option>
                  <option value="75">75</option>
                  <option value="112">112</option>
                  <option value="138">138</option>
                  <option value="164">164</option>
                  <option value="195">195</option>
                  <option value="259">259</option>
                  <option value="320">320</option>
                  <option value="381">381</option>
                  <option value="450">450</option>
                  <option value="500">500</option>
                  <option value="675">675</option>
               </select>
               </br></br>
               <label for="inative">Classe de Desligamento:</label></br></br>
               <select name="inative" onchange="aviso(this)">
                  <option selected="selected">Selecione ..</option>
                  <option value="Indisponível" selected="selected">Indisponível</option>
               </select>
               </br>
               </br>
               <hr color="teal" size="1" width="100%"/>
               </br>
               </br>
               <center>
                  <input type="submit" value="Validar">
                  </br>
                  <input type="hidden" name="listTipo" value="" style="color:white">
                  <input type="hidden" name="listPartida" value="" style="color:white">
                  <input type="hidden" name="listTensao" value="" style="color:white">
                  <input type="hidden" name="listTensaoComando" value="" style="color:white">
                  <input type="hidden" name="listPotencia" value="" style="color:white">
                  <input type="hidden" name="listCorrente" value="" style="color:white">
               </center>
      </div>
      </fieldset>
      </form>
      </div>
      <div id="box">
      </div>
      <div id="shadow">
         <div id="print" class="conteudo">
            <big>Potência ou corrente deve ser selecionada</big>
            </br>
            </br>
            <large>A Escolha de Partida de Motor <span id="legenda"></span></large>
            </br>
            </br>
            <small>* Imagem meramente ilustrativa</small>
            </br>
            </br>
            <img src="https://tools.schneider-electric.com.br/modulos/regua/imagens/partida_direta.jpg" align="center">
            <div>
               <!-- Tipo de coordenação -->
               <p>Tipo de coordenação: <span id="tipo"></span></p>
               <!-- Tipo de partida -->
               <p>Tipo de partida: <span id="partida"></span></p>
               <!-- Tensão do Motor (V) -->
               <p>Tensão do Motor (V): <span id="tensao"></span></p>
               <!-- Tensão do comando -->
               <p>Tensão do comando: <span id="comando"></span></p>
               <!-- Poêtncia do Motor (CV) -->
               <p>Poêtncia do Motor (CV): <span id="potencia"></span></p>
               <!-- Corrente (A) -->
               <p>Corrente (A): <span id="corrente"></span></p>
            </div>
         </div>
         <center>
            </br>
            </br>
            </br>
            <hr color="silver" size="1" width="89%">
            <input type="button" onclick="impressora();" value="Imprimir">
         </center>
      </div>
   </body>
</html>

*** Então aqui temos uma pequena Engenharia Reversa do que você quis mostrar no link da sua pergunta. Note que ainda não está completo para o propósito final, ainda farei melhorias quanto a programação das combinações de valores Entre Tipo de Partida, Tensão e Ampéres e outros. Mas por Hoje é só!

Fevereiro 20, 2021

Se quiser posso te dar uma ajuda à mais, fazer um exemplo um tanto que completo para fins didático.

Fevereiro 19, 2021

Se tratando de uma aplicação na web, você pode muito bem começar com HTML5, CSS3 e Javascript.

Isso pode te ajudar a se atualizar:

HTML:

http://www.macoratti.net/Cursos/html5/html5_NovosElementos.zip

https://portaldesenvolvedor.com/html/introducao-ao-html5/

Javascript:

https://www.codigofonte.net/scripts/javascript/tutoriais/1280_apostilha-javascript

https://www.academia.edu/11637466/Apostila_JavaScript

https://www.scriptbrasil.com.br/codigos/javascript/

CSS:

https://w3c.br/pub/Cursos/CursoCSS3/css-web.pdf

Pelo que pude perceber dessa aplicação em execução on-line, tudo é feito através da selecão de opções no formulário do documento HTML.

Então você pode começar pela estrutura básica HTML:

<html>
  <head></head>
  <body></body>
</html>

Vamos inserir entre a tag body um componente Formulário:

Em seguida, incluir entre a tag form um componente select:

Agora, será preciso colocar dentro da tag select os componente option:

<html>
  <head></head>
  <body>
    <form>
      <select>
        <option>Opção 1</option>
        <option>Opção 2</option>
        <option>Opção 3</option>
      </select>
    </form>
   </body>
</html>

Após ter criado a estrutura HTML, é hora de criar um estilo de cores, letras e afins para esta estrutura e isto é feito com CSS. Mas vou me a ter somente ao necessário/essencial e peço que você busque o conhecimento sobre o assunto fazendo pesquisa na internet.

w3schools tem vários exemplos de uso sobre: HTML, CSS e Javascript

A LÓGICA FICA POR CONTA DO JAVASCRIPT

Para executar uma função quando seleciona um item option dentro do select do form, você pode se utilizar da linguagem javascript. Por exemplo:

Executar uma função sem a necessidade de clicar num botão depois de selecionar uma opção.

Nesse caso, primeiro você cria a função javascript. Após, você chama ela no evento onchange do elemento select.

Quando uma nova opção for selecionada, dispara o evento onchange, que faz a chamada para a função escolheuItem().

Segue código de exemplo:

Javascript:

<script>
      function escolheuItem(elemento) {
        // Caso você queira extrair o texto e não o valor do value="item A"
        // Basta sustituir o "value" por "text" ou "textContent" ou ainda "innerHTML"
        // Fica assim: window.alert(elemento.text)
        alert(elemento.value);
    }
</script>

HTML:

<select name="teste" onchange="escolheuItem(this);">
    <option value="item A">Opção 1</option>
    <option value="item B">Opção 2</option>
    <option value="item C">Opção 2</option>
</select>

A lógica para tal feito pode ser conseguido com poucas linhas de codificação em Javascript. Embora, no site original a linguagem utilizada em partes foi asp, isso nos mostra que não foi inteiramente codificada só do lado cliente, e sim boa parte do lado do servidor(Para onde são enviado as opções do formulário, processado, e retorna o resultado final). Mas nada que nos impede de fazer uma engenharia reversa afim de obter o mesmo propósito que nos traz o resultado por uma imagem ilustrativa como resposta do qual cada resultado esta associada a uma seleta combinação entre si.

Mas também pode se desenvolver tal aplicação similar com outros tipos de linguagens de programação.

Basta utilizar a criatividade aliada ao nível de conhecimento que se tem numa certa linguagem de máquina e, esta pode ser tanto de -; "alto nível" -ou- "baixo nível" (isto é, linguagens de script ou de compilação). Após escolher o tipo de linguagem a ser estudada, é só soltar a imaginação e pensar no que se pode fazer com ela .. surgir-se assim uma idéia de um programa.

Agora, é a hora de definir qual será a lógica deste programa (imagine como ele vai se comportar, faça um esboço(desenhe janelas, campos de texto, botões, adicione imagem) e escreva um roteiro a ser seguido e depois é abrir um editor de texto e codificar e testar, testar e testar novamente, até que funcione conforme o planejado.

Entrar

Diego Henrique Guilherme

Total de itens

Registro em

Última visita

Tipo de Conteúdo

Perfis

Fóruns

Posts postados por Diego Henrique Guilherme

Programador Iniciante - Ajuda para Iniciar um Projeto Pessoal

Programador Iniciante - Ajuda para Iniciar um Projeto Pessoal

Programador Iniciante - Ajuda para Iniciar um Projeto Pessoal

Navegação

Atividades