• APS
  • APS 2 - Ciclocomputador

Entrega 1: Design

Entrega Data
Classroom 24/11/2023
15 % da nota final

Info

A entrega dessa etapa deve ser realizada no README do repositório criado pelo classroom:

Prototipar no Mural antes:

A equipe de novos produtos disponibilizou alguns requisitos do protótipo e vocês devem propor uma interface que satisfaca as necessidades do projeto.

Requisitos

A seguir a lista de requisitos de usabilidade e de funcionalidades para o projeto do ciclocomputador.

Usabilidade

Requisitos de usabilidade do produto:

req. ux. 0 - Operacão

A interface a ser projetada deve ser tal que o usuário consigo operar com apenas uma mão (lembre que é algo para ser usado na bike) e que as informações devem ser exibidas de forma clara, considerando uma leitura e operação em movimento.

req. ux. 1 - Hardware

O hardware a ser utilizado será o LCD de 240x320px touch colorido.

req. ux. 2 - Branding

A interface deve ser alinhada com o logo e nome da empresa que você escolheu (blanding)

req. ux. 3 - Exibir o logo

O logotipo da empresa deve estar presente na interface.

Funcionalidade

O ciclocomputador irá exibir a velocidade instantânea da bicicleta assim como um relógio.

req. fun. 1 - Relógio

Indicação da hora atual, no formato: HH:MM:SS atualizada a cada segundo.

req. fun. 2 - Velocidade instantânea

Exibir a velocidade em km/h.

req. fun. 3 - Indicação da aceleração

Indicação visual da aceleração da bicicleta (positiva/ negativa ou constante).

O ciclista deve ser capaz de iniciar a contagem de um trajeto, isso irá exibir para o usuário informações referentes a distância, velocidade média e tempo no trajeto. O usuário iniciar um trajeto (informações são atualizadas), parar a contagem do trajeto (não atualiza mais as informações) ou comecar um novo trajeto.

req. fun. 4 - Trajeto: Distância

Indicação em km da distância percorrida no trajeto.

req. fun. 5 - Trajeto: Velocidade média

Indicação em km/h da velocidade média no trajeto.

req. fun. 6 - Trajeto: Cronometro

Indicação em HH:MM do tempo gasto em um trajeto.

req. fun. 7 - Trajeto: Controle

Deve possibilitar o usuário iniciar, parar ou reiniciar a contagem de um trajeto.

Quando o usuário parar um percurso deve exibir apenas a velocidade instantânea e não deve atualizar outras informações referentes ao percurso (velocidade média/ distância no percurso/ tempo no percurso).

req. fun. 8 - Trajeto: Indicador status

A tela deve possuir um indicador se a contagem da parte referente ao percurso está ou não ativada.

O ciclocomputador pode ser usado em diferentes tamanhos de bicicleta e o usuário deve poder configurar o raio de sua bicicleta.

req. fun. 9 - Configuracão

Deve possibilitar o usuário configurar o diâmetro da roda.

Entrega

Nessa etapa de design vocês devem apresentar uma versão inicial da interface que deve satisfazer os requisitos listados anteriormente. Na interface será necessário indicar qual widget do LVGL pretendem utilizar. Lembrem de consultar sempre a página do LVGL para saber o que está disponível:

Além do widget vocês devem informar qual ícones pretendem usar na interface, consultem o site a seguir para ideias:

Exemplo

O exemplo a seguir é de uma interface de uma máquina de lavar roupa, vocês devem entregar algo parecido.

Info

A interface de vocês pode possuir multiplas telas.

Validando no LCD

Antes de sairmos implementando a interface no LVGL iremos validar a proposta que vocês desenvolveram no LCD. Para isso iremos gerar um PNG da interface do mural e exibir no LCD como uma imagem estática. A ideia aqui é apenas validar o conceito antes de gastarmos tempo programando algo que não ficou bom.

Para isso você deve:

  1. Gerar uma imagem da interface fazendo screenshot da imagem do mural nas dimensões: 240x320
  2. Seguir o roteiro em util/LVGL para exibir a imagem no LCD: https://insper.github.io/ComputacaoEmbarcada/navigation/Dicas/Util-lvgl/#exibindo-uma-imagem

Use como demo o código do repositório criado pelo classroom modificando a task_lcd para exibir a imagem.

Info

Importante gerar a imagem nas dimensões 240x320, queremos ocupar o LCD todo com nossa imagem.

Rubrica

Rubrica referente ao design da interface.

As notas são incrementais. Por exemplo, Para atingir o B deve apresentar todos os itens do C, ou seja, os dois vídeos e as duas imagens! No mural vocês também devem manter as diferentes versões.

A

  • Especifica e justifica as cores a serem usadas na interface
  • Pega feedback com mais uma pessoa externa e incorpora na interface
    • Grava em vídeo a entrevista
  • Grava um vídeo atualizado explicando o que foi sugerido e o que fizeram para melhorar a interface
  • Apresentar uma foto da interface sendo executada no LCD (imagem estática)

B

  • Especifica e justifica quais vão ser as fontes (e tamanhos) a serem usadas na interface.
  • Pega feedback com o Luiz do Fablab e incorpora na interface
    • Grava em vídeo a entrevista
  • Grava um vídeo atualizado explicando o que foi sugerido e o que fizeram para melhorar a interface
  • Apresentar uma foto da interface sendo executada no LCD (imagem estática)

C

  • Mockup da interface:
    • Satisfaz todos os requisitos do projeto
    • Indica quais são os widgets do LVGL
    • Apresentar uma foto da interface sendo executada no LCD (imagem estática)
  • Grava um vídeo explicando a interface