Desenvolvimento de interface web e controlador PID para kit didático ball and beam

Desenvolvimento de interface web e controlador PID para kit did´atico ball and beam

Campos dos Goytacazes 2022

Desenvolvimento de interface web e controlador PID para kit did´atico ball and beam

Trabalho de conclus˜ao de curso apresentado ao Instituto Federal de Educa¸c˜ao, Ciˆencia e Tecno- logia Fluminense campusCentro como requisito parcial para conclus˜ao do curso de Bacharelado em Engenharia de Controle e Automa¸c˜ao.

Orientador: M. Sc. Fabio Junio dos Santos Coelho

Campos dos Goytacazes 2022

Elaborada pelo Sistema de Geração Automática de Ficha Catalográfica da Biblioteca Anton Dakitsch do IFF com os dados fornecidos pelo(a) autor(a).

O164d

Oliveira, José Matheus Vieira Salgado de

Desenvolvimento de interface web e controlador PID para kit didático ball and beam

/ José Matheus Vieira Salgado de Oliveira, João Victor Rocha de Barros - 2022.

66 f.: il. color.

Orientador: Fabio Junio dos Santos Coelho

Trabalho de conclusão de curso (graduação) -- Instituto Federal de Educação, Ciência e Tecnologia Fluminense, Campus Campos Centro, Curso de Bacharelado em Engenharia de Controle e Automação, Campos dos Goytacazes, RJ, 2022.

Referências: f. 44 a 45.

1. Controle PID. 2. Interface web. 3. Interface de usuário. 4. Ball and beam. 5. Kit didático. I. Barros, João Victor Rocha de . II. Coelho, Fabio Junio dos Santos, orient. III. Título.

INSTITUTO FEDERAL FLUMINENSE CAMPUS CAMPOS CENTRO

RUA DOUTOR SIQUEIRA, 273, PARQUE DOM BOSCO, CAMPOS DOS GOYTACAZES / RJ, CEP 28030130 Fone: (22) 2726-2903, (22) 2726-2906

TERMO 2/2022 - CBECACC/DIRESTBCC/DGCCENTRO/REIT/IFFLU

14 de março de 2022

João Victor Rocha de Barros e João Victor Rocha de Barros e José Matheus Vieira Salgado José Matheus Vieira Salgado

Trabalho de conclusão de curso apresentado ao Instituto Federal de Educação, Ciência e Tecnologia Fluminense como requisito parcial para conclusão do curso de Bacharelado em Engenharia de Controle e Automação.

Aprovado em 24 de fevereiro de 2022.

Banca avaliadora:

M.Sc. Fabio Junio dos Santos Coelho (Orientador) / IFF D.Sc. William da Silva Vianna (Examinador) / IFF M.Sc. Yago Pessanha Correa (Examinador) / IFF

Brasil 2022

Código Verificador:

Código de Autenticação:

Documento assinado eletronicamente por:

William da Silva Vianna

William da Silva Vianna, PROFESSOR ENS BASICO TECN TECNOLOGICOPROFESSOR ENS BASICO TECN TECNOLOGICO, DIRETORIA DO POLO DE INOVAÇÃO CAMPOS DOS GOYTACAZESDIRETORIA DO POLO DE INOVAÇÃO CAMPOS DOS GOYTACAZES, em 15/03/2022 07:15:30.

Yago Pessanha Correa

Yago Pessanha Correa, PROFESSOR ENS BASICO TECN TECNOLOGICOPROFESSOR ENS BASICO TECN TECNOLOGICO, COORDENACAO DE CURSO DE ENGENHARIA DE CONTROLE E AUTOMACAOCOORDENACAO DE CURSO DE ENGENHARIA DE CONTROLE E AUTOMACAO, em 14/03/2022 20:22:06.

Fabio Junio dos Santos Coelho

Fabio Junio dos Santos Coelho , PROFESSOR ENS BASICO TECN TECNOLOGICOPROFESSOR ENS BASICO TECN TECNOLOGICO, COORDENAÇÃO DO CURSO DE BACHARELADO EM ENGENHARIA DE CONTROLE ECOORDENAÇÃO DO CURSO DE BACHARELADO EM ENGENHARIA DE CONTROLE E AUTOMAÇÃO

AUTOMAÇÃO, em 14/03/2022 18:38:54.

Este documento foi emi do pelo SUAP em 14/03/2022. Para comprovar sua auten cidade, faça a leitura do QRCode ao lado ou acesse https://suap.iff.edu.br/autenticar-documento/ e forneça os dados abaixo:

332793 d0ae16ff84

TERMO 2/2022 - CBECACC/DIRESTBCC/DGCCENTRO/REIT/IFFLU | Página 1 de 2

Agradecemos primeiramente a Deus, por nos fortalecer e nos manter firmes diante de todas as dificuldades e desafios encontrados ao longo desses anos de faculdade.

Tamb´em gostar´ıamos de agradecer `as nossas fam´ılias, por todo amor e dedica¸c˜ao, sendo portos seguros nessa caminhada, nunca hesitando ou medindo esfor¸cos em nos ajudar.

Ao Instituto Federal Fluminense, por ter proporcionado ferramentas e meios que permitiram a nossa forma¸c˜ao e a todos professores que, com empenho e dedica¸c˜ao, se comprometeram a passar os seus conhecimentos e nos auxiliar em nossa forma¸c˜ao.

Em especial, agradecemos ao nosso orientador Fabio Junio, por todos os ensina- mentos, assim como toda disponibilidade, paciˆencia e aten¸c˜ao durante toda a execu¸c˜ao deste trabalho.

Por fim, a todos que participaram da nossa forma¸c˜ao e nos ajudaram de alguma forma, nossos mais sinceros agradecimentos.

Atividades pr´aticas s˜ao fundamentais na forma¸c˜ao em engenharia, visto que podem auxiliar o aluno no aprendizado de teorias e concretizar os conceitos abordados em sala de aula. Na Engenharia de Controle e Automa¸c˜ao, prot´otipos did´aticos s˜ao ´otimas ferramentas para viabilizar essa demanda, visto que, com baixo custo e f´acil implementa¸c˜ao, conseguem simular situa¸c˜oes reais em uma escala reduzida. Al´em disso prot´otipos com uma interface com o usu´ario facilitam a visualiza¸c˜ao do processo, aprimorando o entendimento das dinˆamicas de um sistema controlado. O objetivo deste trabalho foi desenvolver uma interface web e um controlador PID para um kit did´atico ball and beam. Inicialmente foi realizada a elabora¸c˜ao do design e funcionalidades da interface, em seguida, houve a integra¸c˜ao entre a interface e o micro-controlador. No que diz respeito ao controlador, a modelagem matem´atica foi realizada e um controlador discreto foi projetado para este modelo. A partir deste projeto o controlador real foi sintonizado e posteriormente validado.

O controlador foi capaz de estabilizar o processo com um tempo de acomoda¸c˜ao m´edio de 24,89 segundos e um m´aximo sobre-sinal m´edio de 14%. A interface web desenvolvida apresenta um gr´afico que ´e atualizado em tempo real com valores de setpoint e vari´avel de processo. Al´em disso, ela apresenta o erro e permite o envio de valores de setpoint e dos parˆametros do controlador PID. A partir desses resultados, o presente trabalho foi conclu´ıdo com ˆexito, visto que alcan¸cou todos os objetivos propostos e proporcionou um bom aprendizado pr´atico a respeito de desenvolvimento web e controle PID.

Palavras-chaves: Controle PID. Interface web. Interface do usu´ario. Ball and beam. Kit did´atico.

Practical activities are fundamental in engineering education, as they can help the student learn theories and implement the concepts discussed in the classroom. In Control and Automation Engineering, didactic prototypes are great tools to make this demand viable, since, with low cost and easy implementation, they can simulate real situations on a reduced scale. Furthermore, prototypes with an user interface facilitate process visualization, improving the understanding of the dynamics of a controlled system. The objective of this work was to develop a web interface and a PID controller for a ball and beam teaching kit.

Initially, the design and functionality of the interface was elaborated, then there was the integration between the interface and the micro-controller. Regarding to the controller, mathematical modeling was performed and a discrete controller was designed for this model. From this project, the real controller was tuned and later validated. The controller was able to stabilize the process with an average settling time of 24,89 seconds and an average maximum overshoot of 14%. The developed web interface displays a graph that is updated in real time with setpoint and process variable values. Furthermore, it shows the error and allows changing setpoint values and parameters of the PID controller. From these results, the present work was successfully completed, as it achieved all the proposed objectives and provided a good practical learning about web development and PID control.

Key words: PID Control. Web interface. User interface. Ball and beam. Didactic kit.

Figura 1 – Representa¸c˜ao esquem´atica do sistema ball and beam. . . 18

Figura 2 – Exemplo de utiliza¸c˜ao dos elementos H1 ao H4 no HTML. . . 21

Figura 3 – Resultado visual da utiliza¸c˜ao do Form - Cliente. . . 29

Figura 4 – Esquema visual dos elementos HTML da p´agina WEB desenvolvida. . 31

Figura 5 – Prot´otipo do sistema ball and beam. . . 33

Figura 6 – Sistema com indica¸c˜ao dos componentes utilizados. . . 33

Figura 7 – Representa¸c˜ao do sistema com as for¸cas atuantes na bola. . . 35

Figura 8 – Visualiza¸c˜ao das rela¸c˜oes entre α,θ, h, L e d. . . 36

Figura 9 – Lugar das ra´ızes do sistema sem controlador. . . 37

Figura 10 – Lugar das ra´ızes do sistema com controlador. . . 39

Figura 11 – Resposta ao step do sistema com controlador. . . 39

Figura 12 – Resposta ao step do sistema real sem ajuste fino dos ganhos. . . 40

Figura 13 – Print da Interface WEB final com gr´afico de resposta. . . 42

Figura 14 – Print da Interface WEB final com destaques no gr´afico de resposta. . . 42

Quadro 1 – Lista de vari´aveis - Controlador/Supervis´orio. . . 27 Quadro 2 – Rela¸c˜ao de DIVs. . . 32

Tabela 1 – Parˆametros do Sistema. . . 19 Tabela 2 – Tempo de acomoda¸c˜ao - testes de valida¸c˜ao. . . 43 Tabela 3 – M´aximo sobre-sinal - testes de valida¸c˜ao. . . 43

Algoritmo 1 – Exemplo de DIV no HTML e edi¸c˜ao no CSS. . . 22

Algoritmo 2 – Exemplo de seletor no CSS que edita o elemento <p> no HTML. 23 Algoritmo 3 – Edi¸c˜ao no CSS de um elemento com id=centro no HTML. . . 24

Algoritmo 4 – Exemplo da utiliza¸c˜ao do SSE - Servidor. . . 28

Algoritmo 5 – Exemplo da utiliza¸c˜ao do SSE - Cliente. . . 29

Algoritmo 6 – Exemplo da utiliza¸c˜ao do Form - Cliente. . . 29

Algoritmo 7 – Exemplo da utiliza¸c˜ao do Form - Servidor. . . 29

Algoritmo 8 – Exemplo de utiliza¸c˜ao do elemento body no CSS. . . 32

Algoritmo 9 – Main . . . 48

Algoritmo 10 – Interface Web . . . 58

CSS Cascading Style Sheets

HTML HyperText Markup Language HTTP HyperText Transfer Protocol IFF Instituto Federal Fluminense Mp M´aximo sobre-sinal

PID Proporcional Integral Derivativo Ts Tempo de acomoda¸c˜ao

α Letra grega alfa

θ Letra grega teta

P S´ımbolo de somat´orio

ζ Coeficiente de amortecimento ω_n Frequˆencia natural

ω_d Frequˆencia natural amortecida

1 INTRODUC¸ ˜AO . . . . 15

1.1 Justificativa . . . 15

1.2 Objetivo geral . . . 15

1.3 Objetivos espec´ıficos . . . 16

2 METODOLOGIA . . . . 17

3 FUNDAMENTAC¸ ˜AO TE ´ORICA . . . . 18

3.1 Sistema Ball and Beam . . . 18

3.2 HyperText Markup Language - HTML . . . 19

3.2.1 HEAD . . . 20

3.2.2 META . . . 20

3.2.3 STYLE . . . 20

3.2.4 BODY . . . 20

3.2.5 P . . . 20

3.2.6 FORM e INPUT . . . 20

3.2.7 H1 . . . 21

3.2.8 DIV . . . 21

3.2.9 CANVAS . . . 22

3.2.10 SCRIPT . . . 23

3.3 Cascading Style Sheets - CSS . . . 23

3.4 JavaScript . . . 24

3.5 HyperText Transfer Protocol - HTTP . . . 25

4 DESENVOLVIMENTO . . . . 27

4.1 Interface WEB . . . 27

4.1.1 Troca de dados . . . 27

4.1.1.1 Utiliza¸c˜ao e apresenta¸c˜ao dos dados . . . ³⁰

4.1.2 Design e elementos utilizados . . . 31

4.2 Prot´otipo Ball and Beam . . . 32

4.3 Controle. . . 34

4.3.1 Modelagem Matem´atica do Sistema . . . 34

4.3.1.1 Fun¸c˜ao de Transferˆencia . . . ³⁶

4.3.2 Projeto do Controlador . . . 37

4.3.3 Sintonia do Controlador . . . 40

5 RESULTADOS E DISCUSS ˜AO . . . . 42

REFERˆENCIAS . . . . 45

APˆ ENDICES 47

APˆENDICE A – C ´ODIGO COMPLETO DO CONTROLE E COMUNICAC¸ ˜AO . . . . 48 APˆENDICE B – C ´ODIGO DO SITE EM HTML . . . . 58

1 INTRODUC ¸ ˜ AO

Identificar e solucionar problemas ´e uma das principais habilidades que um en- genheiro precisa ter. Esta habilidade normalmente ´e trabalhada e adquirida no decorrer do curso. Todavia, ´e comum ver estudantes que se formam com pouco conhecimento pr´atico dos fundamentos te´oricos que estudaram durante o curso. Segundo Kraemer (2018), atividades experimentais s˜ao de grande importˆancia para o desenvolvimento de habilidades e competˆencias, assim como na solu¸c˜ao de problemas. Portanto, o incentivo a abordagens pr´aticas com alunos ´e de grande importˆancia para o seu desenvolvimento como profissional.

Prot´otipos e kits did´aticos s˜ao muito utilizados em cursos de engenharia, devido, principalmente, a sua facilidade de constru¸c˜ao, realiza¸c˜ao de testes, custos e seguran¸ca.

Com estes, ´e poss´ıvel colocar em pr´atica as teorias e ensinamentos aprendidos em sala de aula. Silva et al. (2020) ressalta como os kits did´aticos podem fortalecer a experiˆencia de ensino e viabilizar um aprendizado agregador e dinˆamico.

De acordo com Yu e Ortiz (2005) o sistema ball and beam ´e um dos modelos de laborat´orios mais consolidados para o ensino de sistemas de engenharia de controle, visto que ´e um sistema naturalmente inst´avel, o que exige o desenvolvimento de um sistema de controle capaz de estabiliz´a-lo.

1.1 Justificativa

No curso de Engenharia de Controle e Automa¸c˜ao, kits que tenham uma boa interface com o usu´ario permitem que os alunos sejam capazes de ter um bom primeiro contato com sistemas de controle e criar percep¸c˜oes a respeito das vari´aveis envolvidas em um processo f´ısico real. Al´em disso, a possibilidade de explorar o que foi feito no desenvolvimento do controlador auxilia na fixa¸c˜ao do conhecimento te´orico.

Aliado a estes pontos, o desenvolvimento de habilidades de programa¸c˜ao WEB ´e alavancado, devido `a interface WEB a ser desenvolvida neste trabalho. A utiliza¸c˜ao destas habilidades tamb´em pode provocar o interesse dos alunos em se aprofundar nesta ´area, estimulando o autoaprendizado e expandindo seus conhecimentos.

1.2 Objetivo geral

O principal objetivo deste trabalho ´e desenvolver um controlador PID e uma interface de us´uario com acesso remoto via Wi-Fi para um kit did´atico do sistema ball and beam.

A interface deve apresentar graficamente os dados de setpoint e vari´avel de processo em tempo real. Ela tamb´em mostrar´a o erro entre essas duas vari´aveis e possibilitar´a o envio de valores para o controlador das seguintes vari´aveis: setpoint, ganho proporcional,

tempo integral e tempo derivativo.

O controlador PID deve ser capaz de estabilizar o sistema com um tempo de acomoda¸c˜ao de no m´aximo 30 segundos e com m´aximo sobre-sinal menor ou igual a 20%

do setpoint.

1.3 Objetivos espec´ıficos

Para melhor desenvolvimento do projeto, o mesmo foi dividido em objetivos es- pec´ıficos, que ser˜ao detalhados no Cap´ıtulo 4, e podendo ser conferido nos itens abaixo:

a) desenvolver as funcionalidades da interface WEB;

b) desenvolver o design da interface WEB com uma ´area para apresentar o gr´afico de setpoint e vari´avel de processo, uma ´area para ler os valores do sistema, e uma ´area para enviar valores para o controlador (vide se¸c˜ao 1.2);

c) implementar a interface WEB no micro-controlador;

d) desenvolver a comunica¸c˜ao entre a interface e o micro-controlador viabilizando a leitura de valores em tempo real, e o envio de valores para o controlador (vide se¸c˜ao 1.2);

e) realizar a modelagem matem´atica do sistema;

f) realizar projeto do controlador discreto para o modelo do sistema;

g) implementar o controlador no sistema real de acordo com os requisitos de m´aximo sobre-sinal menor ou igual a 20% e tempo de acomoda¸c˜ao menor ou igual a 30 segundos;

h) realizar o ajuste fino dos ganhos do PID e validar o controlador aplicado ao sistema real de acordo com os requisitos acima.

2 METODOLOGIA

A metodologia do trabalho se deu pela execu¸c˜ao e conquista dos objetivos espec´ıficos (se¸c˜ao 1.3) do trabalho. Tendo o kit did´atico ball and beam dispon´ıvel, foi iniciada a etapa do desenvolvimento da interface WEB. Os objetivos ‘a’ e ‘b’ (se¸c˜ao 1.3) foram iniciados simultaneamente. O desenvolvimento das funcionalidades da interface WEB foi executado em um ambiente de desenvolvimento integrado (IDE), o Visual Studio Code. J´a o desenvolvimento do design da interface foi executado em uma ferramenta online voltada para design chamada Canva. Essa feramenta ´e definida pelo pr´oprio Canva (s.d.) como

“[...] uma ferramenta online que tem a miss˜ao de garantir que qualquer pessoa no mundo possa criar qualquer design para publicar em qualquer lugar.” (CANVA, s.d.).

Os objetivos ‘c’ e ‘d’ est˜ao interligados aos dois anteriores e a sua execu¸c˜ao foi realizada na mesma IDE. Nessa etapa era necess´ario atingir os requisitos da interface WEB descritos na se¸c˜ao 1.2. Para que a interface fosse capaz de exibir valores do sistema em tempo real, foi necess´ario estabelecer uma comunica¸c˜ao entre a interface e o controlador.

Essa comunica¸c˜ao ´e voltada somente para que a interface seja capaz de ler os valores do controlador. J´a no caso de enviar valores para o controlador, a comunica¸c˜ao desenvolvida foi voltada para a escrita de valores. Com os dois tipos de comunica¸c˜ao funcionando isoladamente, o trabalho foi direcionado para o funcionamento de leitura e escrita de forma concomitante. Para mais detalhes sobre o design e integra¸c˜ao da interface, ver subse¸c˜ao 4.1.1.1 e subse¸c˜ao 4.1.1, respectivamente.

Os objetivos ‘e’, ‘f’, ‘g’ e ‘h’ foram executados de forma sequencial. Primeiro foi realizada uma modelagem matem´atica do sistema (subse¸c˜ao 4.3.1) e em seguida um controlador foi projetado para este modelo (subse¸c˜ao 4.3.2) utilizando o software MATLAB.

A partir do controlador projetado, foi poss´ıvel implementar o controlador no sistema real e realizar o ajuste fino e a valida¸c˜ao do mesmo (subse¸c˜ao 4.3.3).

O ajuste fino do controlador foi realizado atrav´es de diversos testes onde as caracter´ısticas da resposta do controlador eram analisadas e os ganhos do controlador eram ajustados buscando a melhoria da resposta. A valida¸c˜ao foi realizada ap´os uma sintonia considerada satisfat´oria. Ela foi feita em nove testes, estes foram divididos em 3 grupos: em cada grupo, 3 testes foram realizados para um determinado setpoint. O tempo de acomoda¸c˜ao e o m´aximo sobre-sinal foram medidos em cada teste. Foi calculada uma m´edia aritm´etica entre os parˆametros medidos e julgado se o controlador estava validado ou se seria necess´ario voltar para a etapa de sintonia.

3 FUNDAMENTAC ¸ ˜ AO TE ´ ORICA

Para facilitar a compreens˜ao do desenvolvimento do trabalho, alguns conceitos ser˜ao explicados neste cap´ıtulo.

3.1 Sistema Ball and Beam

O sistema ball and beam ´e um dos mais famosos experimentos para o ensino de sistemas de controle. Consite em uma bola que gira livremente no topo de uma barra, onde esta barra ´e suspensa em um suporte em que um dos lados ´e fixo e o outro ´e acoplado a um servo motor. A for¸ca rotacional exercida pelo servo altera a inclina¸c˜ao da barra e, assim, faz com que a bola role sobre a mesma.

De acordo com Virseda (2004), apesar de conceitualmente simples, esse sistema ´e naturalmente inst´avel, visto que a bola sofre uma acelera¸c˜ao devido a inclina¸c˜ao da barra.

Para que se alcance o objetivo de estabiliza¸c˜ao da bola, e sendo um sistema inst´avel, ´e necess´ario a implementa¸c˜ao de um sistema de controle. A fun¸c˜ao do controle ´e de estabilizar a posi¸c˜ao da bola em um local pr´e-determinado (setpoint) e, para isso, o controlador atuar´a diretamente no servo motor, de modo com que altere o ˆangulo de inclina¸c˜ao da barra, ajustando a posi¸c˜ao da bola.

A representa¸c˜ao do sistema ´e mostrada na Figura 1, e os parˆametros do mesmo s˜ao descritos na Tabela 1.

Figura 1 – Representa¸c˜ao esquem´atica do sistema ball and beam.

Fonte: Autores (2022).

Tabela 1 – Parˆametros do Sistema.

Parˆametro Significado mb massa da bola

M massa da barra

L comprimento da barra J1 momento de in´ercia da bola J2 momento de in´ercia da barra

α ˆangulo da barra com a horizontal

θ ˆangulo do bra¸co do motor com a horizontal x distˆancia da bola ao ponto eixo da barra d bra¸co de alavanca do motor

ω velocidade angular de rolamento da bola R raio da bola

h distˆancia entre o eixo da barra e o eixo do motor

Fonte: Autores (2022).

3.2 HyperText Markup Language - HTML

HTML ´e um acrˆonimo para HyperText Markup Language (inglˆes para: Linguagem de Marca¸c˜ao de Hiper Texto). Como indicado no nome, marcadores s˜ao utilizados no HTML para a insers˜ao de texto, imagens e diversos outros conte´udos e elementos.

Um elemento HTML ´e separado de outro texto em um documento por “tags”, que consistem no nome do elemento entre “<” e “>” (MOZILLA, 2021c). Ou seja, digitar livremente em um c´odigo HTML resulta na inser¸c˜ao do texto digitado na sa´ıda da execu¸c˜ao desse c´odigo, para utilizar um marcador do HTML ´e necess´ario coloc´a-lo entre “<>”. Por exemplo, um marcador muito utilizado ´e o ‘div’, para utiliz´a-lo ´e necess´ario digitar <div>. Outro ponto importante ´e a necessidade de se abrir e fechar um elemento no HTML. No exemplo acima, a ‘div’ ´e aberta digitando <div>, e fechada digitando</div>. Ou seja, para fechar um elemento, basta digit´a-lo novamente com uma “/” antes do elemento.

A marca¸c˜ao HTML inclui “elementos” especiais, como<head>,<title>,

<body>, <header>, <footer>, <article>, <section>, <p>, <div>,

<span>,<img>,<aside>,<audio>,<canvas>,<datalist>,<details>,

<embed>,<nav>,<output>,<progress>,<video>,<ul>,<ol>,<li>

e muitos outros. (MOZILLA, 2021c)

Um ponto importante para os elementos HTML s˜ao os atributos. Estes atributos s˜ao capazes de caracterizar elementos de formas particulares. Por exemplo, um atributo do marcador DIV ´e o ID, que representa uma identifica¸c˜ao para o elemento. Atr´aves dessa identifica¸c˜ao, ´e poss´ıvel realizar intera¸c˜oes com este elemento atrav´es de um script, ou alterar o estilo do elemento utilizando a linguagem CSS (Cascading Style Sheets), que ser´a abordado na se¸c˜ao 3.3.

A seguir ser˜ao explicados alguns elementos utilizados no desenvolvimento da interface WEB do sistema ball and beam.

3.2.1 HEAD

O elemento HEAD (cabe¸calho) ´e utilizado para definir informa¸c˜oes sobre o do- cumento, por´em, essas informa¸c˜oes s˜ao direcionadas para a aplica¸c˜ao que faz a leitura do documento (um navegador WEB, por exemplo) e n˜ao para o usu´ario final. Dentro de HEAD podem ser encontrados elementos como: meta, title, style, entre outros.

3.2.2 META

Esse elemento ´e utilizado para indicar metadados sobre o documento HTML.

Comumente, alguns editores de textos j´a inserem automaticamente algumas configura¸c˜oes comuns de documentos HTML. Por exemplo, ele pode ser utilizado para indicar o tipo de codifica¸c˜ao que deve ser utilizada para abrir o documento, o idioma utilizado no documento, entre outras configura¸c˜oes.

3.2.3 STYLE

O elemento style ´e utilizado para alterar e configurar o estilo do documento e dos elementos HTML. Dentro desse elemento s˜ao definidas as informa¸c˜oes de estilo, tamb´em conhecidas como CSS (W3SCHOOLS, s.d.).

3.2.4 BODY

Fora do cabe¸calho (head), ´e necess´aria a cria¸c˜ao do espa¸co do documento que cont´em toda informa¸c˜ao voltada para o usu´ario. Esse espa¸co ´e definido pelo elemento body.

3.2.5 P

O elemento P ´e utilizado para a inser¸c˜ao de um par´agrafo.

3.2.6 FORM E INPUT

A tag form, permite que o usu´ario insira valores em determinado campo e que esses valores sejam enviados a um servidor. “O elemento HTML <form> representa uma se¸c˜ao de um documento que cont´em controles interativos que permitem ao usu´ario submeter informa¸c˜ao a um determinado servidor WEB” (MOZILLA, 2021a).

Dois atributos importantes para um formul´ario s˜ao o ‘method’ e ‘action’. O ‘method’

indica qual m´etodo HTTP (ver se¸c˜ao 3.5) ser´a utilizado para a comunica¸c˜ao. O ‘action’

indica para qual caminho do servidor o dado ser´a enviado.

Normalmente junto com o FORM ´e visto o elemento INPUT. Este elemento gera um campo na p´agina WEB que permite que o usu´ario insira informa¸c˜oes de texto ou

n´umeros. Tamb´em pode ser utilizado para que o usu´ario submeta uma informa¸c˜ao inserida dentro de um INPUT utilizado em um FORM. Um exemplo comum de FORM em conjunto com o INPUT s˜ao campos de login e senha utilizados em diversas plataformas.

3.2.7 H1

Os elementos h1, h2, at´e o h6, s˜ao elementos que definem n´ıveis de t´ıtulos de se¸c˜oes, sendo h1 o n´ıvel mais alto e h6 o mais baixo (MOZILLA, 2021b). Na Figura 2 pode ser visto um exemplo de utiliza¸c˜ao dos marcadores h1 ao h4. Na esquerda, o c´odigo HTML, e na direita, o resultado desse c´odigo no navegador.

Figura 2 – Exemplo de utiliza¸c˜ao dos elementos H1 ao H4 no HTML.

Fonte: MOZILLA (2021b).

3.2.8 DIV

Segundo Marques (2019b), o elemento DIV pode ser considerado um bloco, e atrav´es dele ´e definida uma divis˜ao no documento HTML. Uma das principais fun¸c˜oes deste marcador ´e facilitar o agrupamento de elementos, sendo muito ´util para a organiza¸c˜ao de uma p´agina WEB, assim como facilita a edi¸c˜ao de estilos e a intera¸c˜ao com Scripts (JavaScript).

Assim como outros elementos no HTML, ´e muito importante que a DIV possua o atributo ID (identifica¸c˜ao), pois somente assim ser´a poss´ıvel a edi¸c˜ao de estilos e a intera¸c˜ao com um Script. Para adicionar um atributo, basta utilizar o elemento, como explicado no in´ıcio desta se¸c˜ao, por´em adicionando o atributo desejado, na abertura do elemento. Por exemplo, para se adicionar um ID chamado “identifica¸c˜ao” `a uma DIV deve se escrever da seguinte forma: <div id=identifica¸c˜ao></div>.

No Algoritmo 1 pode ser visto a utiliza¸c˜ao de uma DIV com o atributo ID. No mesmo algoritmo (abaixo da linha verde) tamb´em pode ser visto a edi¸c˜ao do estilo desta DIV atrav´es do CSS, o que refor¸ca a importancia do atributo ID, pois sem ele n˜ao seria poss´ıvel realizar esta edi¸c˜ao.

Algoritmo 1 – Exemplo de DIV no HTML e edi¸c˜ao no CSS.

1 <div id=g r a f i c o>

2 <canvas id=” canvasGrafico ”></ canvas>

3 <canvas id=” canvasSp ”></ canvas>

4 </div>

5 )(*

6

7 #g r a f i c o{

8 background−c o l o r : #e b f f f f ;

9 height : 510px ; /∗ a j u s t a a

a l t u r a da div ∗/

10 width : 840px ; /∗ a j u s t a o

comprimento da div ∗/

11 margin−l e f t : auto ;

12 margin−r i g h t : auto ;

13 border : 4px s o l i d #b e f 1 f f ; /∗ ad iciona uma borda s o l i d a de um p i x e l ∗/

14 }

Fonte: Autores (2022).

3.2.9 CANVAS

O CANVAS ´e comumente relacionado a um quadro em branco, pois quando um elemento canvas ´e inserido, ele cria um espa¸co, com altura e largura previamente definidas, que permite a inser¸c˜ao de formas, linhas, gr´aficos, entre outros elementos, da mesma forma que se pode desenhar elementos em um quadro em branco.

De acordo com Arrigoni (s.d.) “o elemento<canvas>´e apenas um elemento para gr´aficos, devemos usar um script para realmente extrair os gr´aficos.” ´E interessante ressaltar o ponto levantado pelo Arrigoni, onde, para que um CANVAS cumpra com a sua fun¸c˜ao,

´e necess´aria a utiliza¸c˜ao de um Script. Nesse trabalho, o CANVAS foi utilizado para elaborar um gr´afico dinˆamico com valores de posi¸c˜ao e setpoint. Para mais detalhes ver o Cap´ıtulo 4.

3.2.10 SCRIPT

O SCRIPT ´e um elemento que abre espa¸co dentro do arquivo HTML para a inser¸c˜ao de um script. Um script pode ser considerado uma lista de instru¸c˜oes para que a m´aquina execute determinadas tarefas. Dentro deste elemento, encontra-se um espa¸co onde deve ser utilizada uma linguagem de programa¸c˜ao, portanto, ali n˜ao ser˜ao encontrados elementos do HTML, como dentro do elemento BODY. A linguagem padr˜ao e mais comum dentro de um SCRIPT no HTML ´e o JavaScript. Na se¸c˜ao 3.4 haver´a uma explica¸c˜ao com mais detalhes sobre a linguagem.

3.3 Cascading Style Sheets - CSS

Folhas de Estilo em Cascata ou Cascading Style Sheets (CSS) em inglˆes, “´e usado para estilizar elementos escritos em uma linguagem de marca¸c˜ao como HTML” (RUCKERT, 2018). Ou seja, o HTML gera sa´ıdas para uma p´agina WEB, mas n˜ao se preocupa se essas sa´ıdas ir˜ao estar bem distribu´ıdas e organizadas, ou, com estilo voltado para a inteface humana. Estes fatores s˜ao determinados atrav´es da linguagem CSS.

Existem 3 formas de se utilizar o CSS: inline, externa e interna (MARQUES, 2019a).

Na forma inline, o elemento STYLE (ver se¸c˜ao 3.2) ´e passado como um atributo dentro do elemento que se deseja editar. Na forma externa, um arquivo separado do documento HTML ´e criado com o elemento STYLE e, dentro desse arquivo, ´e realizada toda a edi¸c˜ao do estilo do documento HTML e seus elementos. Na forma interna, um elemento STYLE

´e inserido no cabe¸calho do documento (HEAD, ver se¸c˜ao 3.2), e dentro desse elemento ´e realizada toda a edi¸c˜ao de estilo do documento HTML e seus elementos.

No desenvolvimento da interface WEB deste trabalho, foi utilizada a forma interna, pois essa forma, assim como a externa, separa a edi¸c˜ao do estilo e a programa¸c˜ao da p´agina. Mas, diferente da forma externa, permite que o desenvolvimento do website seja feito em um s´o arquivo. Isso facilita o processo de inser¸c˜ao do c´odigo da interface WEB no controlador utilizado no trabalho.

No CSS existem dois componentes essenciais para que seja poss´ıvel realizar a edi¸c˜ao de estilos: os seletores e os blocos de declara¸c˜ao. Os seletores apontam para qual elemento HTML se deseja estilizar, e os blocos de declara¸c˜ao realizam essa estiliza¸c˜ao (RUCKERT, 2018). No Algoritmo 2, ´e poss´ıvel visualizar a edi¸c˜ao de todos os elementos<p>do arquivo HTML com a cor azul e o texto em negrito.

Algoritmo 2 – Exemplo de seletor no CSS que edita o elemento <p>no HTML.

1 <s t y l e>

2

3 p {

4 c o l o r : blue ;

5 text−weight : bold ;

6 }

7

8 <s t y l e>

Fonte: (RUCKERT, 2018).

Neste exemplo, o seletor ´e ‘p’, e o bloco de declara¸c˜ao ´e o conjunto das declara¸c˜oes entre as chaves, no caso as linhas 4 e 5.

Os elementos HTML podem ser alterados inserindo o seletor, como feito no Algo- ritmo 2 com o elemento <p>. Para editar o estilo de elementos espec´ıficos, sem alterar todos os outros elementos do mesmo tipo no HTML, ´e necess´ario inserir o caractere ‘#’

antes da identifica¸c˜ao do elemento. Ou seja, no HTML ser´a necess´ario utilizar um atributo ID para identificar o elemento espec´ıfico, e no CSS inserir ‘#’ seguido do ID desejado.

No Algoritmo 3, pode ser visto um exemplo de seletor que aponta para o elemento no HTML, cujo ID ´e igual a “centro”.

Algoritmo 3 – Edi¸c˜ao no CSS de um elemento com id=centro no HTML.

1 #centro {

2 f l o a t : l e f t ;

3 background−c o l o r : #e b f f f f ;

4 height : 565px ;

5 width : 860px ;

6 margin−l e f t : 16px ;

7 p o s i t i o n : r e l a t i v e ;

8 }

Fonte: Autores (2022).

Conhecendo a utiliza¸c˜ao de seletores e blocos de declara¸c˜ao, existem diversos parˆametros que podem ser estilizados pelo CSS, alguns exemplos s˜ao: cor de texto, cor de fundo da p´agina ou de DIVs, altura e largura de DIVs ou outros elementos que aceitem esses atributos, posi¸c˜ao na p´agina, margens, bordas de DIVs ou outros elementos que aceite esse atributo, dentre outros. N˜ao haver´a, no presente trabalho, uma explica¸c˜ao a respeito desses parˆametros, basta entender como o CSS influencia no resultado final de um documento HTML. No Apˆendice B pode ser visto o c´odigo HTML completo e nele todas as edi¸c˜oes de estilos realizadas no desenvolvimento da interface WEB.

3.4 JavaScript

JavaScript ´e uma linguagem de programa¸c˜ao utilizada dentro do elemento SCRIPT do HTML.

A linguagem de programa¸c˜ao Javascript permite ao desenvolvedor imple- mentar diversos itens de alto n´ıvel de complexidade em p´aginas WEB, como anima¸c˜oes, mapas, gr´aficos ou informa¸c˜oes que se atualizam em intervalos de tempo padr˜ao, por exemplo. (ESTRELLA, 2018)

Com essa defini¸c˜ao, ´e poss´ıvel entender que o JavaScript ´e fundamental para a intera¸c˜ao do homem com uma interface WEB. No caso deste trabalho, esta linguagem possibilitou a comunica¸c˜ao com o servidor, a troca de dados cont´ınua com o mesmo, e a elabora¸c˜ao de um gr´afico dinˆamico com valores periodicamente atualizados. No Cap´ıtulo 4 ser´a explicado com mais detalhes como foi poss´ıvel realizar essas tarefas atrav´es do JavaScript.

3.5 HyperText Transfer Protocol - HTTP

O objetivo desta subse¸c˜ao ´e explicar de forma simples alguns m´etodos do HTTP que fizeram parte do desenvolvimento do trabalho. N˜ao ser˜ao explicados todos os m´etodos e os que forem explicados ser˜ao de forma a garantir o entendimento sobre como a comunica¸c˜ao entre o sistema ball and beam e o supervis´orio WEB acontece.

HTTP ´e um protocolo que permite a obten¸c˜ao de recursos, como do- cumentos HTML. ´E a base de qualquer troca de dados na WEB e um protocolo cliente-servidor, o que significa que as requisi¸c˜oes s˜ao inicia- das pelo destinat´ario, geralmente um navegador da WEB. (MOZILLA, 2021d)

Esta defini¸c˜ao do MOZILLA (2021d) permite que se compreenda com mais facilidade o Protocolo de Transferˆencia de Hiper-Texto, em inglˆes HyperText Transfer Protocol (HTTP). Ele ´e essencial para troca de dados na WEB e foi utilizado neste trabalho para

realizar a comunica¸c˜ao entre o website desenvolvido e o controlador.

O primeiro conceito que se deve saber ´e que o HTTP ´e um protocolo cliente-servidor.

Portanto, sempre que for necess´ario obter ou enviar um dado para o servidor, ´e necess´ario que o cliente seja o gatilho para essa troca. Esse gatilho disparado pelo cliente ´e chamado de requisi¸c˜ao. Existem oito m´etodos de requisi¸c˜oes definidos no HTTP: GET, POST, PUT, DELETE, HEAD, TRACE, OPTIONS e CONNECT (MELO, 2021).

O m´etodo GET permite que o cliente solicite ao servidor algum dado e o servidor responde com o dado solicitado. Ou seja, a comunica¸c˜ao ´e iniciada quando o cliente envia a requisi¸c˜ao indicando o recurso desejado, e ´e finalizada quando o servidor responde entregando esse recurso.

Por mais eficiente que seja este m´etodo, uma limita¸c˜ao para o presente trabalho ´e a necessidade de se enviar uma solicita¸c˜ao sempre que se quiser receber um dado novo.

No caso de um sistema supervis´orio, ´e necess´ario que as vari´aveis possam ser vistas em tempo real, ent˜ao seriam necess´arias diversas requisi¸c˜oes do tipo GET para manter as

vari´aveis no supervis´orio atualizadas. Por´em, realizar essas requisi¸c˜oes ciclicamente n˜ao seria poss´ıvel para a interface a ser desenvolvida.

Com isso, foi necess´ario utilizar uma solu¸c˜ao j´a existente, o Server-Sent Event (SSE). O SSE permite que o cliente crie uma conex˜ao HTTP com um servidor e envie uma solicita¸c˜ao inicial para o mesmo (IBM, 2021). Por´em, ao contr´ario do m´etodo GET, essa conex˜ao entre o cliente e o servidor permanece aberta e o servidor envia dados para o cliente sempre que necess´ario, de acordo com as defini¸c˜oes programadas.

O primeiro passo para a utiliza¸c˜ao do SSE ´e a cria¸c˜ao de um EventSource. O EventSource ´e uma API (acrˆonimo em inglˆes para: interface de programa¸c˜ao de aplica¸c˜oes) que permite que a conex˜ao entre o cliente e o servidor fique aberta. Ap´os esta cria¸c˜ao, ´e necess´ario configurar tanto do lado do cliente quanto do lado do servidor o recebimento e envio de dados. De modo geral, basta configurar o servidor para enviar dados e o cliente para recebˆe-los. No Cap´ıtulo 4 ´e demonstrada a utiliza¸c˜ao do SSE no cliente e no servidor.

4 DESENVOLVIMENTO

O desenvolvimento do trabalho ser´a apresentado seguindo a proposta da metodologia (Cap´ıtulo 2), por´em, algumas etapas que foram desenvolvida de forma simultanea ser˜ao

apresentadas em se¸c˜oes e subse¸c˜oes distintas, para melhor entendimento.

4.1 Interface WEB

Um sistema que fa¸ca a interface entre o operador e o processo ´e fundamental para permitir que o ser humano interaja com as m´aquinas e equipamentos. Neste trabalho foi desenvolvida uma interface WEB para garantir essa intera¸c˜ao e assim ser poss´ıvel que o usu´ario do m´odulo did´atico ball and beam possa visualizar as vari´aveis do sistema e alterar parˆametros do controlador.

4.1.1 TROCA DE DADOS

As duas vari´aveis que podem ser consideradas as mais importantes neste processo s˜ao: a vari´avel controlada e o setpoint. No sistema ball and beam, a vari´avel controlada ´e a posi¸c˜ao da bola sobre a haste; da mesma forma o setpoint, que define a posi¸c˜ao de onde a bola deve estabilizar, de acordo com a entrada do usu´ario. Portanto, inicialmente, foi necess´ario estabelecer uma forma de comunica¸c˜ao entre o controlador (ESP32) e o sistema supervis´orio que foi desenvolvido como um website.

Para facilitar a comunica¸c˜ao entre o controlador e o supervis´orio, um quadro de vari´aveis foi criado. Nele podem ser vistas as rela¸c˜oes entre as vari´aveis do lado do controlador e do lado da interface com o usu´ario. Este quadro pode ser visto no Quadro 1.

Quadro 1 – Lista de vari´aveis - Controlador/Supervis´orio.

Vari´avel Tag no Site Tag no Contro-

lador Vis˜ao do Usu´ario Vis˜ao do Contro- lador

Posi¸c˜ao distance distance Leitura Escrita

SetPoint sp sp Leitura/Escrita Leitura/Escrita

Erro erro erro Leitura Escrita

Ganho Proporcional kp kp Leitura/Escrita Leitura/Escrita

Ganho Integral ti ti Leitura/Escrita Leitura/Escrita

Ganho Derivativo td td Leitura/Escrita Leitura/Escrita

Fonte: Autores (2022).

Antes de adentrar no desenvolvimento da comunica¸c˜ao da interface, foi necess´aria a configura¸c˜ao de conex˜ao sem fio do EPS32. Esta configura¸c˜ao foi feita permitindo dois tipos de conex˜ao com a placa de desenvolvimento. No primeiro tipo, chamado de station mode (STA ou modo esta¸c˜ao), o ESP se conecta a uma rede Wi-Fi, para que o us´uario acesse a interface, ´e necess´ario que ele se contecte a mesma rede e, atrav´es de um navegador,

entre no caminho em que o servidor executar´a o website. O segundo tipo de conex˜ao ´e chamado de access point (AP), ou ponto de acesso, em portuguˆes. Neste modo a placa de desenvolvimento faz o papel de um roteador e o usu´ario precisa se conectar na rede gerada pela mesma. Ap´os estar conectado nesta rede, o usu´ario deve acessar o caminho em que o servidor executar´a o website.

Dessa forma, os usu´arios podem configurar (via c´odigo) a conex˜ao do ESP32 em uma rede Wi-Fi e utilizar o modo esta¸c˜ao. Ou, podem se conectar diretamente no modo ponto de acesso, sem depender de outra rede Wi-Fi. Com a configura¸c˜ao feita neste trabalho (vide Apˆendice A) o ESP tentar´a se conectar a uma rede Wi-Fi chamada

“nome da rede WIFI” com senha: “senha da rede WIFI” e ap´os dez tentativas ir´a habilitar o modo AP mostrando o caminho da interface WEB (para visualizar esse caminho ´e necess´aria a utiliza¸c˜ao de uma IDE).

Tendo definidas as rela¸c˜oes entre as vari´aves, o controlador e o usu´ario, a fase de desenvolvimento do website foi iniciada buscando tornar reais essas rela¸c˜oes. Para isso, foi necess´ario utilizar um m´etodo de comunica¸c˜ao entre a interface WEB e o sistema.

Um dos primeiros passos para entender a comunica¸c˜ao ´e compreender a rela¸c˜ao entre o controlador e o website. Por tr´as dessa rela¸c˜ao de comunica¸c˜ao existe um protocolo, o HTTP, explicado na se¸c˜ao 3.5. Neste trabalho o servidor ´e o controlador e o cliente ´e a interface WEB.

Para que fosse poss´ıvel enxergar as vari´aveis que s˜ao lidas pelo usu´ario (vari´aveis do tipo Leitura e/ou Leitura/Escrita na vis˜ao do usu´ario, de acordo com o Quadro 1) foi utilizado o m´etodo server-sent events (SSE), pois diferente do m´etodo GET, explicado na se¸c˜ao 3.5, o SSE permite que a comunica¸c˜ao ocorra de forma cicl´ıca, atualizando essas vari´aveis em tempo real. O per´ıodo do ciclo de envio de dados do servidor para o cliente ´e determinado pelo controlador, sempre que um novo dado est´a dispon´ıvel ele ´e enviado.

Dessa forma, o dado lido pelo usu´ario ´e atualizado em tempo real.

Como explicado na se¸c˜ao 3.5, ´e necess´ario a cria¸c˜ao de um EventSource para utilizar o SSE. Este EventSource ´e criado no controlador (onde se tem o servidor) no caminho

‘events’. E na interface WEB, dentro do script do HTML foi criada uma vari´avel ‘source’, e essa vari´avel recebe um EventSource no mesmo caminho ‘events’. Depois desta cria¸c˜ao, basta realizar o tratamento das requisi¸c˜oes.

No Algoritmo 4 pode ser visto um exemplo de envio de valores do servidor para o EventSource criado, o que permite que o cliente realize a leitura. E, no Algoritmo 5, pode ser visto o tratamento das requisi¸c˜oes do cliente para o servidor.

Algoritmo 4 – Exemplo da utiliza¸c˜ao do SSE - Servidor.

1 void loop ( ) {// envio de v a l o r e s para o s i t e atrav ´e s do SSE

2 events . send ( S t r i n g ( sp ) . c s t r ( ) ,” s e t p o i n t ”, m i l l i s ( ) ) ;

Fonte: Autores (2022).

Algoritmo 5 – Exemplo da utiliza¸c˜ao do SSE - Cliente.

1 source . addEventListener (’ d i s t a n c e ’ , f u n c t i o n ( e ) {

2 document . getElementById (” d i s t a n c i a ”) . innerHTML = e . data ;

3 /∗na l i n h a acima o v a l o r l i d o ( e . data ) ´e e s c r i t o no s i t e , no elemento que p o s s u i r o id = d i s t a n c i a ∗/

4 d i s t = parseFloat ( e . data ) ;

5 // a t r i b u i p a r a a v a r i ´a v e l dist , o v a l o r l i d o

6 }, f a l s e ) ;

7 /∗ para l e r as v a r i ´a v e i s desejadas basta que sejam

c r i a d o s os ” EventListener ” para cada v a r i ´a vel , acima pode s e r v i s t o o EventListener para a Posi ¸c˜ao (

d i s t a n c e ) ∗/

Fonte: Autores (2022).

Para a escrita das vari´aveis pelo usu´ario no controlador, ´e necess´ario um m´etodo que permita que o cliente envie dados para o servidor. Para isso, foi utilizado o elemento FORM do HTML, este elemento ´e melhor explicado na se¸c˜ao 3.2. No Algoritmo 6, pode ser visto um exemplo da utiliza¸c˜ao do elemento FORM em conjunto com o INPUT no lado do cliente e na Figura 3 o resultado visual do mesmo. E no Algoritmo 7 ´e mostrado uma parte do c´odigo que lida com a requisi¸c˜ao do FORM no lado do servidor.

Algoritmo 6 – Exemplo da utiliza¸c˜ao do Form - Cliente.

1 <form method=” get ” a c t i o n=”/ si te bal la nd beam s pre a d ”>

2 <input type=” text ” name=” sp ” p l a c e h o l d e r=” SetPoint ” onchange=” t h i s . value = t h i s . value . r e p l a c e (/ ,/ g ,

’ . ’ ) ”>

3 <input type=” submit ” value=” Enviar Valor ”>

4 </form>

Fonte: Autores (2022).

Figura 3 – Resultado visual da utiliza¸c˜ao do Form - Cliente.

Fonte: Autores (2022).

Algoritmo 7 – Exemplo da utiliza¸c˜ao do Form - Servidor.

1 // l i d a com o re quest do FORM para o parametro ” sp ”

2 //o caminho / si te b al landbe am spre a d deve s e r o mesmo no HTML

3 s e r v e r . on (”/ sit e b al l andbe am spre ad ”, HTTP GET, [ ] ( AsyncWebServerRequest ∗ request ) {

4 S t r i n g inputMessage1 ; // v a r i ´a v e l l o c a l a u x i l i a r

5 // se houver um request para o par ˆametro ” sp ” e o v a l o r n

˜ao f o r vazio . . .

6 i f ( request −>getParam (” sp ”)−>value ( ) != ””) {

7 inputMessage1 = request −>getParam (” sp ”)−>value ( ) ;//

a t r i b u i o v a l o r l i d o a inputmessage1

8 sp = a t o f ( inputMessage1 . c s t r ( ) ) ; //

converte e s s e v a l o r para f l o a t e o a t r i b u i a sp

9 // depois de r e c e b e r o valor , r e d i r e c i o n a para a p´a gina p r i n c i p a l

10 request −>r e d i r e c t (” http : / / 1 9 2 . 1 6 3 . 3 . 1 1 3 / site ballandbeam

”) ;

11 } e l s e {

12 inputMessage1 = ”none ”;

13 sp = 22;

14 request −>r e d i r e c t (” http : / / 1 9 2 . 1 6 3 . 3 . 1 1 3 / site ballandbeam

”) ;

15 }

16 // S e r i a l . p r i n t l n ( sp ) ;

17 }) ;

Fonte: Autores (2022).

Como visto no Algoritmo 6, o m´etodo HTTP utilizado no FORM foi o GET, explicado na se¸c˜ao 3.5. Tamb´em foram utilizados dois INPUTs dentro desse Form, um para que o usu´ario possa digitar o valor e outro para que o usu´ario submeta esse valor para o servidor. O atributo ‘type’ ´e definido como ‘text’ (texto) e ‘submit’ (submeter) respectivamente para estes dois INPUTS. Quando o usu´ario submete um valor, este ´e enviado para um determinado caminho, no exemplo acima: “/siteballandbeam spread”.

Tanto no lado do cliente quanto do servidor ´e preciso indicar este caminho para que o envio e recebimento do dado ocorra corretamente.

4.1.1.1 Utiliza¸c˜ao e apresenta¸c˜ao dos dados

Tendo adquirido os dados do sistema, ´e necess´ario apresentar esses dados na interface WEB. Para isso, no script do c´odigo ´e indicado um elemento do HTML que ir´a receber o dado desejado. Para realizar esta indica¸c˜ao ´e necess´aria a utiliza¸c˜ao de um

comando chamado de ‘innerHTML’. Ele ´e utilizado para definir ou obter um elemento HTML.

Para que, atrav´es do ‘innerHTML’, o valor obtido do servidor seja mostrado em um elemento, ´e necess´ario indicar qual elemento receber´a esse valor. Isso ´e feito utilizando a fun¸c˜ao ‘getElementById(“identifica¸c˜ao do elemento”)’. Esta fun¸c˜ao aponta para o elemento que possuir o atributo ID igual a “identifica¸c˜ao do elemento”. Outro detalhe ´e a necessidade de se colocar o objeto “document” junto com esses dois comando, pois esse objeto representa o documento HTML.

Um exemplo de um c´odigo que atribua o valor “x” a um elemento identificado como valor: “document.getElementById(“valor”).innerHTML = x;”. No sistema supervis´orio desenvolvido foram usados comandos similares a este exemplo, por´em, substituindo “valor”

pelo elemento desejado e “x” pelo valor lido atrav´es do SSE. Para ver com mais detalhes o c´odigo completo basta consultar o Apˆendice B.

4.1.2 DESIGN E ELEMENTOS UTILIZADOS

A troca de dados (subse¸c˜ao 4.1.1) ´e essencial para o funcionamento da interface.

Por outro lado, o visual da interface tamb´em ´e fundamental, visto que um bom design permite que os dados sejam vistos de forma clara e objetiva. Nesta subse¸c˜ao haver´a um maior foco no CSS e no HTML (ver se¸c˜ao 3.3 e se¸c˜ao 3.2).

Sem o CSS n˜ao seria poss´ıvel organizar e estilizar a interface para uma boa visualiza¸c˜ao. Um dos primeiros passos para essa organiza¸c˜ao foi desenvolver um rascunho visual de como seria o modelo final da p´agina WEB. Na Figura 4 pode ser visto esse rascunho com a identifica¸c˜ao de alguns elementos que foram criados no HTML da p´agina.

Figura 4 – Esquema visual dos elementos HTML da p´agina WEB desenvolvida.

Fonte: Autores (2022).

Come¸cando pela p´agina de um modo geral, ´e necess´ario alterar o estilo do ‘body’, isto ´e, o corpo da p´agina como um todo. Dentro do ‘body’ foi alterado o estilo do texto, de acordo com os parˆametros atribu´ıdos a ‘font-family’,‘font-size’ e ‘text-aling’ e a cor do fundo da p´agina, de acordo com o parˆametro atribu´ıdo a ‘background-color’. No Algoritmo 8 pode ser visto a configura¸c˜ao do estilo de ‘body’.

Algoritmo 8 – Exemplo de utiliza¸c˜ao do elemento body no CSS.

1 body{ /∗ e d i t a todo o documento∗/

2 font−family : ’ Segoe UI ’ , Tahoma , Geneva , Verdana , sans−s e r i f

; /∗ a l t e r a a f o n t e ∗/

3 font−s i z e : 20px ; /∗ a l t e r a o tamanho da f o n t e ∗/

4 text−a l i g n : c e nt e r ; /∗ alinhamento do texto ∗/

5 background−c o l o r : #b e f 1 f f ; /∗ cor do fundo da p´a gina ∗/

6 }

Fonte: Autores (2022).

Para facilitar a organiza¸c˜ao e distribui¸c˜ao dos elementos na p´agina, foram criadas cinco DIVs de acordo com as indica¸c˜oes da Figura 4. No Quadro 2, pode ser visto a rela¸c˜ao das 5 DIVs criadas, com seus objetivos e o atributo ID.

Quadro 2 – Rela¸c˜ao de DIVs.

DIV Objetivo ID

1 Comportar o gr´afico da distˆancia e setpoint centro 2 DIV para facilitar a estiliza¸c˜ao do gr´afico grafico 3 Comportar as vari´aveis de leitura sistema paramSistema 4 DIV para facilitar a distribui¸c˜ao dos elementos leituras 5 Comportar as vari´aveis a serem enviadas ao controlador paramControlador

Fonte: Autores (2022).

Dentro das 5 DIVs foram utilizados elementos P do HTML, para inser¸c˜ao de par´agrafos e textos para t´ıtulos e indica¸c˜oes das vari´aveis. Outro elemento utilizado, por´em somente na DIV 2, foi o CANVAS (ver se¸c˜ao 3.2). A partir deste elemento foi poss´ıvel desenhar o gr´afico com as vari´aveis de Distˆancia e SetPoint em tempo real. Al´em destes, os elementos FORM e INPUT foram utilizados na DIV 5 para realizar a escrita de dados no servidor, como visto na subse¸c˜ao 4.1.1.

Para a vizualiza¸c˜ao do c´odigo HTML completo basta consultar o Apˆendice B.

4.2 Prot´ otipo Ball and Beam

O prot´otipo do sistema ball and beam utilizado neste trabalho, foi desenvolvido por uma equipe multidisciplinar de estudantes do Instituto Federal Fluminense Campos

Centro. Ao final do trabalho o sistema ser´a devolvido para o instituto com a implementa¸c˜ao da interface WEB e controle PID. Para mais detalhes sobre o conceito e funcionamento do sistema ver a se¸c˜ao 3.1. O prot´otipo utilizado neste trabalho ´e mostrado na Figura 5.

Os componentes utilizados no trabalho est˜ao destacados na Figura 6, e a descri¸c˜ao dos mesmos ´e apresentada adiante.

Figura 5 – Prot´otipo do sistema ball and beam.

Fonte: Autores (2022).

Figura 6 – Sistema com indica¸c˜ao dos componentes utilizados.

Fonte: Autores (2022).

Sendo:

a) bola (ball);

b) barra (beam);

c) sensor de distˆancia Sharp infravermelho modelo Gp2y0a21 e cabos de ali- menta¸c˜ao e sinal;

d) estruturas de suporte e fixa¸c˜ao;

e) atuador (servo motor Tower Pro modelo MG995) e elo de liga¸c˜ao com o sistema;

f) fonte e cabo de alimenta¸c˜ao para o atuador;

g) placa de desenvolvimento/controlador ESP32;

h) conversor anal´ogico/digital modelo ADS1256 i) cabo de alimenta¸c˜ao e comunica¸c˜ao para o ESP32;

j) circuito com as conex˜oes el´etricas do sistema.

4.3 Controle

Para estabelecer o controlador para o sistema ball and beam, primeiro ´e necess´ario projetar um controlador a partir de um modelo matem´atico que descreve o comportamento da planta.

O controlador escolhido foi o do tipo PID (proporcional, integral e derivativo), devido a sua versatilidade e ampla aplica¸c˜ao (PIRES, 2014). Os ganhos do controlador s˜ao obtidos a partir do projeto e adequados ao sistema real. Posteriormente o controlador ser´a validado a partir de testes, para mais detalhes ver subse¸c˜ao 4.3.1 e Cap´ıtulo 5.

4.3.1 MODELAGEM MATEM´ATICA DO SISTEMA

A modelagem matem´atica de um sistema permite estabelecer equa¸c˜oes matem´aticas que regem a dinˆamica de um sistema, que ser´a fundamental para a elabora¸c˜ao do controlador e simula¸c˜oes de seu comportamento. Para obter o modelo da planta, foram utilizadas aproxima¸c˜oes da mecˆanica Newtoniana. Considerando a segunda lei de Newton, tem-se que as for¸cas resultantes sobre a bola ´e representada pela equa¸c˜ao 4.1.

XF~ =mx¨ (4.1)

Na figura 7, ´e representado o sistema com as for¸cas atuantes na bola.

Para a simplifica¸c˜ao na constru¸c˜ao do modelo, ser˜ao desconsideradas as for¸cas de fric¸c˜ao. Duas for¸cas atuam na bola, a translacional e rotacional. Colocando estas for¸cas na equa¸c˜ao 4.1, tem-se que:

m_bx¨=F x_t−F x_r (4.2)

Figura 7 – Representa¸c˜ao do sistema com as for¸cas atuantes na bola.

Fonte: Autores (2022).

onde m_b representa a massa da bola, F x_t a for¸ca translacional e F x_r a for¸ca rotacional.

Sendo a for¸ca translacional devido `a gravidade (g), tem-se a sua componente vertical:

F x_t=m_bgsinα(t) (4.3)

A for¸ca rotacional, devido `a in´ercia, pode ser calculada pela divis˜ao do torque (Tr) pelo raio da bola (rb). Sendo o torque:

T_r = Jx¨

r_b (4.4)

Tem-se:

F x_r= Jx¨

r²_b (4.5)

Portanto, substituindo as equa¸c˜oes 4.3 e 4.5 na equa¸c˜ao 4.2 e isolando a acelera¸c˜ao:

¨

x= m_bgsinα(t)r_b²

mbr²_b +J (4.6)

Na Figura 8, ´e poss´ıvel perceber que existem rela¸c˜oes trigonom´etricas entre α,θ, h, L e d. As equa¸c˜oes 4.7 e 4.8 mostram essas rela¸c˜oes. Combinando essas duas equa¸c˜oes, chega-se `a equa¸c˜ao 4.9.

sinα(t) = h

L (4.7)

sinθ(t) = h

d (4.8)

Figura 8 – Visualiza¸c˜ao das rela¸c˜oes entre α, θ, h, L e d.

Fonte: Autores (2022).

sinα(t) = dsinθ(t)

L (4.9)

A partir desta rela¸c˜ao, a equa¸c˜ao 4.6 pode ser reescrita como mostra a equa¸c˜ao 4.10.

¨

x= m_bgdsinθ(t)r_b²

L(m_br²_b +J) (4.10)

Aplicando uma lineariza¸c˜ao para ˆangulos pequenos, tem-se que sinθ = θ. Al´em disso, o momento de in´ercia de uma bola maci¸ca ´e: J = ²₅m_br²_b. Com essas considera¸c˜oes, a equa¸c˜ao 4.10 ´e reescrita como mostra a equa¸c˜ao 4.11.

¨

x= 5gθ(t)d

7L (4.11)

4.3.1.1 Fun¸c˜ao de Transferˆencia

Realizando a transformada de Laplace da equa¸c˜ao 4.11, chega-se `a fun¸c˜ao de transferˆencia do sistema. Na equa¸c˜ao 4.12 esta fun¸c˜ao de transferˆencia pode ser visualizada, substituindo os valores: d= 0,0235m,L= 0,382m e g = 9,81m/s².

X(s)

θ(s) = 0,43107

s² (4.12)

Como o controlador a ser implementado ser´a embarcado em um micro-controlador, o projeto do controlador ser´a feito no dom´ınio discreto. Portanto, h´a a necessidade de se discretizar a fun¸c˜ao de transferˆencia do sistema. O m´etodo de discretiza¸c˜ao utilizado foi o Zero-Order Holder (ZOH) ou, segurador de ordem zero, em portuguˆes. O tempo de

amostragem foi de 0,04 segundos. Este valor foi escolhido com base no teorema de Nyquist, que diz que o per´ıodo de amostragem (T) deve ser, no m´ınimo, duas vezes menor que o per´ıodo de amortecimento. Utilizando os parˆametros estabelecidos na subse¸c˜ao 4.3.2, o per´ıodo de amortecimento do sistema desejado ´e igual a 3744ms, logo, T deve ser menor ou igual a 1872ms. Portanto, T = 40ms, atende ao crit´erio de Nyquist e tamb´em est´a dentro da capacidade do conversor A/D utilizado, que permite um per´ıodo de amostragem de at´e aproximadamente 0,0333ms, al´em disso respeita o tempo de processamento de um ciclo de instru¸c˜oes do ESP32 (medido experimentalmente), para este trabalho, de 7ms. Na equa¸c˜ao 4.13 pode ser vista a fun¸c˜ao de transferˆencia discreta.

G(z) = 0,00034485(z+ 1)

(z−1)² (4.13)

Ap´os a discretiza¸c˜ao da fun¸c˜ao de transferˆencia, o lugar das ra´ızes da mesma foi analisado em um gr´afico, o que pode ser visto na Figura 9.

Figura 9 – Lugar das ra´ızes do sistema sem controlador.

Fonte: Autores (2022).

Pelo gr´afico ´e poss´ıvel perceber a presen¸ca de um polo no limite do c´ırculo unit´ario, o que mostra que o sistema ´e marginalmente est´avel.

4.3.2 PROJETO DO CONTROLADOR

Com o sistema modelado e sua fun¸c˜ao de transferˆencia, torna-se poss´ıvel a cria¸c˜ao do controlador com base em resquisitos comumente utilizados em sistemas de controle.

Esses requisitos s˜ao o m´aximo sobre-sinal (Mp) e o tempo de acomoda¸c˜ao (Ts).

Para auxiliar o desenvolvimento do controlador discreto e simular a sua atua¸c˜ao no modelo calculado, foi utilizada a software MATLAB.

Foi estabelecido um Mp de 5% (0,05) e um Ts de 2,5 segundos. Estes valores diferem dos estabelecidos no objetivo deste trabalho. Isto foi feito propositalmente, almejando se ter um projeto de controlador com um desempenho al´em do desejado, visto que o sistema real cont´em incertezas e ao implementar o controlador, espera-se uma perda de desempenho.

Atrav´es do requisistos de Mp e Ts utilizando o m´etodo do lugar das ra´ızes ´e poss´ıvel a obten¸c˜ao do polo desejado (z) em malha fechada atrav´es da rela¸c˜ao mostrada na equa¸c˜ao 4.14.

z =e^−ζωnTe^ωdi (4.14)

Com isso ´e necess´aria a obten¸c˜ao dos valores do coeficiente de amortecimento (ζ), da frequˆencia natural (ω_n) e da frequˆencia natural amortecida (ω_d). Al´em disso o tempo de amostragem ´e T = 0,04s.

Os valores de ζ,ω_n eω_d s˜ao descritos pelas equa¸c˜oes 4.15, 4.16 e 4.17 respectiva- mente.

ζ =

v u u t

log(M p)²

log(M p)²+π² (4.15)

ω_n= 4/T s

ζ (4.16)

ω_d=ω_n^q1−ζ² (4.17)

Substituindo os valores de Mp e Ts nas equa¸coes acima, realizando os devidos c´alculos e substituindo os valores necess´arios na equa¸c˜ao 4.14 os polos obtidos neste trabalho foram: z = 0,9359±0,0629i

Com os polos, o segundo passo ´e a obten¸c˜ao do valor de deficiˆencia angular e a partir deste, a obten¸c˜ao da posi¸c˜ao do polo no eixo real (c) e o m´odulo do polo (k). As equa¸c˜oes 4.18, 4.19 e 4.20 apresentam respectivamente, os c´alculos necess´arios para a obten¸c˜ao destes valores.

φ= 0,5(−π+⁶ (z) +⁶ (z−1) +⁶ (z−1) +⁶ (z−1) +⁶ (z+ 1)) (4.18)

c=Im(z) tan(φ−(π/2)) +Re(z) (4.19)

k = |z|.|z−1|.|z−1|.|z−1|

|z−c|.|z−c|.|z+ 1|.|0,00034485| (4.20)

Esses valores permitem a obten¸c˜ao da fun¸c˜ao do controlador a partir da rela¸c˜ao mostrada na equa¸c˜ao 4.21. A deficiˆencia angular calculada convertida de radiano para grau foi de φ= 114,3033, o valor da posi¸c˜ao no eixo real:c= 0,9643 e o ganho com base na condi¸c˜ao de m´odulo: k = 213,5639. Contudo, esse valor de ‘k’ aplicado ao sistema real causaria uma satura¸c˜ao no sinal de controle, portando, para adequar esse ganho a um valor que condiga com as limita¸c˜oes do sistema f´ısico, foi aplicado um fator de adequa¸c˜ao ao ganho resultando no valor de k = 38,136. Este fator de adequa¸c˜ao divide o valor inicial de ‘k’ por 5,6. Para obter esse fator, o controlador foi aplicado ao sistema real e o ganho foi reduzido at´e que o sinal de controle n˜ao ultrapassasse determinada satura¸c˜ao.

G_c(z) = k(z+c)²

z(z−1) (4.21)

Substituindo os valores conforme a equa¸c˜ao 4.21 chega-se na seguinte equa¸c˜ao do controlador:

G_c(z) = 38,136(z−0,9643)²

z(z−1) (4.22)

Com isso, ´e poss´ıvel analisar o lugar das ra´ızes do conjunto controlador e planta, isto pode ser visto na na Figura 10. Percebe-se que em compara¸c˜ao `a Figura 9, h´a a presen¸ca de um novo polo, no interior do c´ırculo unit´ario, o que demonstra que o sistema com o controlador pode ser est´avel. Na Figura 11 ´e poss´ıvel visualizar a resposta do

Figura 10 – Lugar das ra´ızes do sistema com controlador.

Fonte: Autores (2022).

sistema controlado a uma entrada em degrau unit´ario. Nela ´e poss´ıvel ver que o Mp foi maior do que o espec´ıficado (76,8%), da mesma forma o Ts (65,8 segundos). Contudo, foi decidido dar continuidade no desenvolvimento do controlador, pois os ganhos a serem extra´ıdos deste projeto de controlador s˜ao apenas um ponto de partida para o ajuste fino do controle aplicado ao sistema real.

Figura 11 – Resposta ao step do sistema com controlador.

Fonte: Autores (2022).

A partir do controlador projetado, ´e poss´ıvel se fazer uma correla¸c˜ao entre a equa¸c˜ao 4.22 e a equa¸c˜ao de um controlador PID misto discreto, que pode ser escrita como a equa¸c˜ao 4.23.

Gc(z) = z²(kp+ki+kd)−z(kp+ 2kd) +kd

z(z−1) (4.23)

Igualando as duas equa¸c˜oes e sabendo queti= ^kp.T_ki e td= ^kd.T_kp , sendo T o per´ıodo de amostragem igual a 0,04 segundos, chega-se aos seguintes valores aproximados: kp = 2,62; ti = 2,16 e td = 0,54.

4.3.3 SINTONIA DO CONTROLADOR

A partir dos valores de kp, ti e td obtidos, foi poss´ıvel realizar a configura¸c˜ao do controlador PID embarcado no ESP32 aplicado ao sistema ball and beam.

Os valores iniciais, obtidos ao final da subse¸c˜ao 4.3.2, n˜ao foram capazes de estabilizar o sistema, o que era esperado, visto as diferen¸cas entre o sistema modelado e o sistema real. Ele apresenta incertezas e n˜ao linearidades e est´a sujeito a diversos ru´ıdos, esses fatores podem ser resumidos em um ganho da planta (que n˜ao foi calculado neste trabalho) que aumentou as caracter´ısticas oscilat´orias da resposta vista na Figura 11. A Figura 12 mostra um gr´afico da resposta do sistema real com os ganhos antes do trabalho de ajuste fino.

Figura 12 – Resposta ao step do sistema real sem ajuste fino dos ganhos.

Fonte: Autores (2022).

Sendo assim, foi iniciado um trabalho de ajuste dos ganhos do controlador com base nas repostas que o sistema apresentava. Ap´os um ajuste considerado satisfat´orio, o

controlador aplicado a planta foi validado com os seguintes valores: kp= 1,18; ti= 1,51 e td = 4,32 ou, em fun¸c˜ao dos valores do controlador projetado: kp = 2,62 ∗0,45;

ti = 2,16∗0,7 e td = 0,54∗8. A valida¸c˜ao do controlador e as caracter´ısticas de resposta do sistema ser˜ao apresentados no Cap´ıtulo 5. Vale destacar que, com os testes e com as respostas obtidas, percebeu-se a necessidade da implementa¸c˜ao de um filtro que pudesse atenuar varia¸c˜oes abruptas no sinal de controle causadas por ru´ıdos, visto que, mediante a essas situa¸c˜oes, o servomotor n˜ao acompanhava o sinal de controle e atuava de forma inadequada, causando instabilidade. O c´odigo implementado ´e apresentado no Apˆendice A.

5 RESULTADOS E DISCUSS ˜ AO

Ap´os os trabalhos executados de acordo com a etapa do desenvolvimento, foi poss´ıvel integrar o kit did´atico ball and beam com uma interface WEB e entregar um sistema de controle PID capaz de estabilizar a planta. Na Figura 13 pode ser vista a interface final aberta no navegador de um computador e, na Figura 14, a mesma interface com destaques no gr´afico de resposta do controlador para um setpoint de 22cm com a bola partindo de 6,5cm (in´ıcio da barra).

Figura 13 – Print da Interface WEB final com gr´afico de resposta.

Fonte: Autores (2022).

Figura 14 – Print da Interface WEB final com destaques no gr´afico de resposta.

Fonte: Autores (2022).