PixelWall: 7 etapas (com imagens)

2024 Autor: John Day | [email protected]. Última modificação: 2024-01-30 11:37

Você conhece o projeto Pixel-Table? Tive a ideia de realizar tal coisa de pixel, mas não como uma mesa, ao invés de colocá-la na parede.

Para que eu possa deitar no sofá e jogar alguns jogos enquanto relaxo.:)

Os jogos implementados são:

• Tetris
• Invasores do espaço
• Cobra
• Pixel Draw

funções adicionais são:

• Mostrar hora atual
• Mostrar animações coloridas

O PixelWall tem um ESP8266 para que ele possa se conectar à minha WLAN doméstica. Mas também é possível usar o PixelWall como um ponto de acesso e conectar-se diretamente a ele.

Para facilitar o uso do meu PixelWall, o mural oferece um site para controle após a conexão. Todos os aplicativos podem ser controlados / reproduzidos por meio da página da web. Portanto, não é necessário instalar nenhum software para uso.

Além disso, há um controlador NES que torna mais fácil jogar.

Código aberto

Todos os softwares e desenhos mecânicos que coloquei no github: https://github.com/C3MA/PixelWallFeel são gratuitos para usar em seu próprio projeto.

Etapa 1: começando com o eletrônico

De outro projeto, existe uma placa de circuito impresso com LEDs WS2812. O PCB tem 3 linhas com 12 LEDs em cada linha.

Decidi usar este PCB 6 vezes. Portanto, obtenho uma matriz 12x18 LED.

O primeiro passo foi soldar todos os 216 LEDs, cerca de 100 capacitores e um ESP8266.

A soldagem manual demorou cerca de 10 horas.

Depois de um primeiro teste rápido, ele descobriu: tudo está funcionando.

Então podemos ir para a parte mecânica.

Etapa 2: Criando o Mecânico

Em primeiro lugar, precisamos de um separador para cada pixel. A ideia é juntar a banda horizontal e vertical por meio de um corte em V.

Cada faixa tem uma espessura de 3 mm e uma altura de 17 mm. Eles são cortados de uma placa HDF por um cortador a laser.

Todos os scetches para o lasercutter são desenhados em FreeCad (denominado "Leiste" na pasta mecânica do projeto github)

A grade é fornecida pelo Layout do PCB. Tem uma largura de coluna de 28 mm e uma altura de linha de 31 mm.

A próxima pergunta é: Como consertar as bandas no PCB? A colagem não é uma boa ideia, porque deve ser possível desmontar se algo estiver com defeito. Então eu decidi estragar tudo. Mas um parafuso irá dividir a faixa fina de 3 mm. Então imprimi com impressora 3D um bolso para a banda (essa é a parte chamada "Halter" no projeto do github). Isso funcionou muito bem para corrigi-los no PCB.

O próximo passo é obter um quadro para isso. Existem algumas lojas online que oferecem o corte de molduras individuais. Então, encomendei uma moldura com o tamanho 343 mm x 565 mm.

A moldura recebe um orifício adicional na parte inferior para a fonte de alimentação.

A placa frontal de plexiglas também encomendei online. É uma opala WN770 Milchglasoptik LD45%, tamanho: 567x344x2mm

Possui uma translucidez de 45%.

Juntando todas as peças na estrutura.

No final serão aparafusadas algumas tiras nas costas, para que tudo fique fixo e não possa cair.

Para ter uma opção de operabilidade do pixelWall sem qualquer comunicação WLAN, criei um painel de controle plugável que pode ser inserido opcionalmente no lado direito da moldura (chamado "Bedieneinheit" no projeto github).

Etapa 3: Software - Noções básicas

Um dos casos de uso é jogar no PixelWall.

Mas escrever um jogo de pixel sempre precisará de um ambiente de depuração útil. Não conheço nenhuma maneira de depurar o controlador ESP8266 de forma adequada. Então decidi simular todo o código no meu PC. O código ESP é escrito em Arduino C ++, então usei a linguagem Visual Studio C ++ / CLI para a simulação no PC. Existem algumas diferenças entre o C ++ padrão e a linguagem C ++ / CLI. Por exemplo, em C ++ / CLI você não pode criar um objeto do tipo String, devido à coleta de lixo não é permitido criar um objeto ou referência / ponteiro para tal objeto. Em C ++ / CLI você deve usar as alças: String ^. Mas tais identificadores não existiam no padrão C ++. Então eu tive que ser criativo para juntar os dois mundos. Resolvi isso criando um arquivo Arduino.h próprio para a simulação. Este arquivo apenas sobrescreve na simulação todas as strings através de um definir "#define String String ^". Esta não é uma maneira comum, mas funciona:) Exceto para algumas pequenas chaves do compilador, todo o código ESP é compilável no Visual Studio C ++ / CLI.

Matriz de LED

A primeira classe que escrevi é a classe LED-Matrix. Esta classe lida com o controle e mapeamento dos LEDs WS2812.

Esta classe foi escrita duas vezes: uma para o controlador ESP8266 (LEDMatrixArduino.cpp) e outra que controlará as formas no Form GUI da simulação (LEDMatrixGUI.cpp).

Esta classe fornece alguns métodos básicos para definir e limpar um LED individual por sua coluna e linha.

Além disso, ele fornece uma função setBrightness. Este valor será considerado se um LED for definido. Portanto, todos os comandos definidos por LEDs podem ser executados com brilho total. Por exemplo: Se o brilho estiver definido para 50% e a função setLed () for chamada com RGBColor (255, 255, 255), ela definirá o LED para 127, 127, 127.

Painel de LED

No topo da classe de matriz de LED, coloquei uma classe de painel de LED. Esta classe fornece algumas funcionalidades úteis para qualquer aplicativo. Ele fornece duas camadas independentes. Isso pode ser útil para o aplicativo. Por exemplo, no jogo de tetris: a camada 0 é para as pedras fixas na parte inferior e a camada 1 é para exibir a pedra que cai. Assim, a cada ciclo, a pedra cai um pixel para o fundo, o aplicativo pode limpar a camada 1 e desenhar a pedra em sua nova posição. Não é necessário redesenhar todas as pedras fixas no fundo.

Além disso, o painel fornece

printImage - para imprimir alguns ícones como smileys ou WLAN symbolprintDigit - para imprimir um dígito em uma posição específicaprintFormatedNumber - para imprimir um número com prefixos zerosprintNumber - para imprimir um número inteiroprintLineH - linha horizontal com lengthprintLineV específico - linha horizontal com comprimento específico

Etapa 4: Software - Conceito de aplicativo

O conceito geral para a parede do pixel é:

• Cada aplicativo tem seu próprio nome
• Um aplicativo é iniciado chamando o URL pixelWall incluindo o nome do aplicativo (por exemplo: 192.168.4.1/tetris)
• A URL também pode ter parâmetros GET que serão encaminhados para o aplicativo
• Cada aplicativo deve fornecer um site que é exibido no navegador.
• Este site pode, opcionalmente, abrir uma conexão de websocket para o aplicativo para interações rápidas
• O aplicativo pode usar essa conexão de websocket para se comunicar com o front-end da web.
• Além da interface da web, o aplicativo obtém eventos de botão de ação adicionais do painel de controle e do controlador NES.

Interface do aplicativo

Para facilitar o desenvolvimento de novos aplicativos para o PixelWall, criei uma interface para aplicativos chamada "IPixelApp.h". Esta interface contém 8 definições:

• início do vazio virtual () = 0;
• extremidade vazia virtual () = 0;
• loop vazio virtual () = 0;
• void virtual newWebsocketData (uint8_t * payload, size_t lenght) = 0;
• WebsiteResponse_t getWebsiteResponse virtual (parâmetro String) = 0;
• vazio virtual buttonEvent () = 0;
• virtual void timerTick () = 0;
• virtual String getName () = 0;

start / end - esta função é chamada se o aplicativo for iniciado / encerrado porque outro aplicativo foi iniciado

loop - esta função é chamada a partir do loop principal do programa principal. Esta chamada é irregular e fora de uma interrupção.

newWebsocketData - esta função é chamada se o front-end da web enviar dados.

getWebsiteResponse - usado pelo programa principal para obter a página da Web que deve responder à solicitação.

buttonEvent - é chamado se algum botão no painel de controle foi pressionado ou liberado.

timerTick - esta função é chamada a cada 10ms, disparada por uma interrupção do temporizador. Pode ser usado como base de tempo, mas não deve conter coisas que demandem muito tempo, porque é um contexto de interrupção.

getName - deve retornar o nome do aplicativo para o URL

Etapa 5: Software - Aplicativos

Os 7 aplicativos a seguir são implementados na versão atual:

App padrão

Este é um aplicativo especial que exibe o estado WLAN atual do PixelWall. Se a parede puder se conectar a uma WLAN atual, ela exibirá o endereço IP que obteve da rede.

Se não foi possível (sem SSID configurado ou WLAN não está presente ou a senha está errada), será aberto um ponto de acesso. Neste caso, você pode se conectar ao PixelWall por meio do IP do ponto de acesso padrão de ESP8266: 192.168.4.1

Na interface da Web, este aplicativo apresenta 6 botões. Ao pressionar o botão, você pode iniciar o aplicativo apropriado.

App de configurações

Este aplicativo para configurar o SSID e senha WLAN. Basta inserir as credenciais de sua WLAN e na próxima inicialização do PixelWill ele tentará se conectar a esta WLAN.

Jogos

Existem três jogos clássicos programados no PixelWall:

• Tetris
• Cobra
• Invasores do espaço

Todos os jogos podem ser jogados por meio da interface da web ou com o controlador NES.

App de imagem

Este é um aplicativo que exibe cores no PixelWall. Você pode escolher se deve ser um arco-íris em movimento, esmaecendo cores diferentes, mostrando cores estáticas ou apenas exibindo pixels coloridos aleatórios.

Pixel It

Com este aplicativo, você pode definir cada pixel separadamente, tocando com o dedo na interface da web. Então você pode desenhar algumas imagens craciais:)

Etapa 6: controle via extensão Twitch

Existe uma extensão no Twitch chamada GetInTouch. Esta extensão permite integrar projetos Arduino em sua transmissão ao vivo, para que os visualizadores possam controlar seu arduino durante a transmissão.

A biblioteca Arduino para isso foi escrita para Arduinos. Mas descobriu-se que também funciona no ESP8266, provavelmente.

Para usá-lo no Stream, as seguintes etapas são necessárias:

• Integre a biblioteca GetInTouch ao código (consulte o tutorial)
• Conecte o pixelWall com o seu PC através do conversor USB / RS232 (que também é usado para fazer o flash do ESP)
• Instale o aplicativo GetInTouch do site
• Instale a extensão GetInTouch em seu canal Twitch (consulte o tutorial)

Etapa 7: Controle pelo Controlador Nintendo NES

Depois de usá-lo por um tempo, descobriu-se que jogar em um celular touch não é tão fácil. De vez em quando, você perde os botões porque não tem feedback sobre o dedo, independentemente de estar sobre o botão ou não. Além disso, às vezes a comunicação do Websocket pode vazar por um curto período de tempo.

Por isso decidi comprar um antigo controlador Nintendo NES. Este controlador possui uma interface muito simples. É apenas um registrador de deslocamento 4021 que funciona com 3, 3V. Portanto, ele pode ser conectado diretamente ao ESP8266.

Todos os eventos de botão no controlador foram encaminhados para o aplicativo em execução por meio da função buttonEvent ().