Resumen inicial

La idea inicial era hacer un velocímetro para una empresa de coches personalizados que estaba interesada en hacer una mejora en su cuadro de mandos. Se desarrolló la idea utilizando dos ESP8266 con potenciómetros de rueda, simulando los datos del bus CAN del coche. Al no tener acceso inmediato al hardware de simulación del bus CAN, redirigí mi proyecto a desarrollar una prueba de concepto de un IDE para diseñar widgets en QML para poder diseñar otros nuevos en un plazo más breve.

Resumen inicial

La idea inicial era hacer un velocímetro para una empresa de coches personalizados que se encontraba interesada en hacer una mejora en su salpicadero. Se desarrolló la idea utilizando dos ESP8266 con potenciómetros de rueda, simulando los datos del bus CAN del coche. Al no tener acceso inmediato al hardware de simulación del bus CAN, redirigí mi proyecto para desarrollar una prueba de concepto de un IDE para diseñar widgets en QML y poder diseñar otros nuevos en un plazo más breve.

Abstract

The initial idea was to make a speedometer to a car company that was interested in custom make an improvement to your dashboard. I developed the idea using two potentiometers connected to two ESP8266 for simulating data from the CAN bus of the car. Not having immediate access to hardware simulation of CAN bus, I redirect my project to develop a proof of concept of an IDE for designing widgets in QML to design new ones in a brief term.

Podéis consultar todo el proyecto:

Ejecutable

Memoria

<figure class="gdoc-embed"> <iframe src="https://docs.google.com/presentation/d/1SZ9zNzEHZEvYmJciD1xcKc78t05h_-aXFZLDhRFCNkE/embed?start=false&loop=false" title="Presentació" loading="lazy" allowfullscreen></iframe> <figcaption><a href="https://docs.google.com/presentation/d/1SZ9zNzEHZEvYmJciD1xcKc78t05h_-aXFZLDhRFCNkE/edit?usp=sharing" target="_blank" rel="noopener noreferrer">Presentación — abrir en Google</a></figcaption> </figure>

<figure class="gdoc-embed"> <iframe src="https://docs.google.com/document/d/1Mo8lbrrXNGGUxM1vX9Jf4pxcPqneUuHzw8YmhHVb0pM/preview" title="2015PROJECTEFINALDAMMesasCervillaFrancisco" loading="lazy" allowfullscreen></iframe> <figcaption><a href="https://docs.google.com/document/d/1Mo8lbrrXNGGUxM1vX9Jf4pxcPqneUuHzw8YmhHVb0pM/edit?usp=sharing" target="_blank" rel="noopener noreferrer">2015PROJECTEFINALDAMMesasCervillaFrancisco — abrir en Google</a></figcaption> </figure>

<figure class="gdoc-embed"> <iframe src="https://docs.google.com/document/d/1G1Lo1tNInwLdM7d4haTAIGp6BaeeVCxN5SB1Yi0R7KA/preview" title="Manual usuari - ginys" loading="lazy" allowfullscreen></iframe> <figcaption><a href="https://docs.google.com/document/d/1G1Lo1tNInwLdM7d4haTAIGp6BaeeVCxN5SB1Yi0R7KA/edit?usp=sharing" target="_blank" rel="noopener noreferrer">Manual usuario - widgets — abrir en Google</a></figcaption> </figure>

<figure class="gdoc-embed"> <iframe src="https://docs.google.com/document/d/1AiqNJJR4604VRdAKsuvharkoCienYOn9OOO7It0Hugw/preview" title="Manual usuari - velocímetre" loading="lazy" allowfullscreen></iframe> <figcaption><a href="https://docs.google.com/document/d/1AiqNJJR4604VRdAKsuvharkoCienYOn9OOO7It0Hugw/edit?usp=sharing" target="_blank" rel="noopener noreferrer">Manual usuario - velocímetro — abrir en Google</a></figcaption> </figure>

Programas

Definición del sistema

Utilizando dos ESP8266, cada uno con un potenciómetro en la entrada analógica, envían tramas UDP al programa en Qt (back-end), este lo interpretará y se comunicará con el front-end (QML) para mostrar la información con la aguja, como podemos ver en la siguiente imagen:

Haciendo uso del IDE podemos ver cómo interactúa el código de Qt con QML

Definición de interfaces de usuario

Desarrollo

Primero se definieron los prototipos de los diseños para la parte gráfica que se pueden visualizar anteriormente.

Esta era la idea inicial sobre el diseño; una vez completado, se estudiaron las posibilidades de QML para hacerlo directamente con este, pero el aspecto era bastante mejorable, por lo que se realizó un diseño de las partes con Inkscape, las cuales podéis consultar en este enlace.

Estas se integraron en el código de QML y Qt, que se encargaban de recibir la información del ESP8266, como se explica en la definición del sistema.

Aquí podemos ver una imagen del montaje real:

<iframe width="320" height="266" data-thumbnail-src="https://i.ytimg.com/vi/dUTnNmLkELs/0.jpg" src="https://www.youtube.com/embed/dUTnNmLkELs?feature=player_embedded" frameborder="0" allowfullscreen></iframe>

Después se desarrollaron las diferentes vistas que puede tener el usuario, para poder consultar la información relevante, para la creación de figuras, la creación de texto… como podemos ver en la interfaz de usuario.

<iframe width="320" height="266" data-thumbnail-src="https://i.ytimg.com/vi/YRJnz7uyTLw/0.jpg" src="https://www.youtube.com/embed/YRJnz7uyTLw?feature=player_embedded" frameborder="0" allowfullscreen></iframe>

Manuales

Los manuales se pueden descargar en los siguientes enlaces:

<figure class="gdoc-embed"> <iframe src="https://docs.google.com/document/d/1AiqNJJR4604VRdAKsuvharkoCienYOn9OOO7It0Hugw/preview" title="Velocímetre" loading="lazy" allowfullscreen></iframe> <figcaption><a href="https://docs.google.com/document/d/1AiqNJJR4604VRdAKsuvharkoCienYOn9OOO7It0Hugw/edit?usp=sharing" target="_blank" rel="noopener noreferrer">Velocímetro — abrir en Google</a></figcaption> </figure>

.

Diseño dinámico de widgets QML — abrir en Google

.