GUI-O : interfaces graphiques faciles sur smartphones Android

International Français
1

Jusqu'à présent MIT App Inventor était en général incontournable pour construire une petite application d'interface graphique sur smartphone pour nos montages 'Arduino'

Les choses pourraient changer avec GUI-0 qui facilite grandement la conception et l'utilisation d'une interface graphique pour une carte 'Arduino' reiée au smartphone par USB, par Bluetooth, par BLE, par MQTT.....

Fonctionnement simple et efficace : c'est le montage 'Arduino' (ou autre) qui, par l'envoi/récepton de chaines de caratères installe et configure les éléments graphiques de l'interface puis interagit avec eux.

L'application GUI-0 , exclusivement pour Android à ce jour :slightly_frowning_face: est disponible sur GooglePlay ou par téléchargement de l'apk

Application bien documentée : des exemples (pas bâclés !) d'utilisation sont fournis, ainsi qu'un manuel en pdf. Un forum est en place.

Le développement est actif (plusieurs mises à jour) en ce mois de décembre 2022

Expérience perso : Avec MIT App Inventor et le BLE la multitude de blocs nécessaires m'embrouille, l'étalage de blocs me fait perdre de vue le fil conducteur....

Avec GUI-O tout devient, pour moi, simple et clair , tout le développement est fait côté Arduino

Le résultat visuel est intéressant ,
Les widgets disponibles, tous configurables, me paraissent bien fichus

Bonus :

-GUI-O donne facilement accès aux divers capteurs du smartphone (2 seulement à ce jour dans la version 'de démo' : GPS et RTC)

-Un Logiciel disponible pour Windows et Linux permet de tester ses interfaces

Ayant découvet GUI-O récemment dans plusieurs sous-forums Arduino j'ai essayé... et adopté :+1:
je prend ça comme mon cadeau de Noêl reçu de la part du forum :gift:

3 Likes
2

ça parait cool mais...

c'est rédhibitoire pour moi :slight_smile:

3

espérons qu'IOS figure , en bonne place , dans la Road Map du concepteur !

Ici des exemples d'interface mettant à profit l'inclusion d'images hébergées en local ou à distance :
https://forum.gui-o.com/category/6/examples

https://forum.gui-o.com/category/7/share-your-projects

4

Bonjour

Questionné sur l'avenir d'une version iOS de l'application GUI-O , son développeur vient de répondre en détaillant sa problématique :

5

bon en gros il faut lui offrir un Mac et un cours de Swift alors (objective C, ça date un peu maintenant)

cela dit avec un Mac Intel il pourrait sur une seule machine avoir Windows, Linux et Mac et faire tout ses développements :slight_smile:

6

Ça a l'air vraiment super. Est-ce que c'est utilisable depuis un RPi ou un STM32 ?

7

Bonsoir Fabrice

Pas encore testé avec RPI, uniquement ESP32 pour l'instant

ça fonctionne dès qu'on établit une chemin , quelqu'il soit, pour un échange de chaines de caratères

STM32 , oui à priori
-par USB (USB OTG côté smartphone, adaptateur UART/USB côté STM32)
-par Bluetoth ou BLE avec un module HC-06 ou HM-10

RPI , oui a priori de diveses manières

Par Internet , MQTT soit via un broker distant, soit avec Mosquitto lancé sur le RPI + un programme ad hoc pour faire du pub/sub

Par série Bluetooth (profil SPP active sur RPI)

Par série BLE,... en faisant tourner un 'device' BLE avec un des 2 profils série BLE reconnus par GUI-O (NUS ou HM10)

Liaison par USB : une carte ESP32 avec son CH340, reliée au connecteur USB (OTG) de mon smartphone dialogue avec GUI-O ..et est alimentée par lui si sa consommation est modérée

Je n'ai pas essayé avec d'autres circuits UART/USB reliés au smatphone + GUI-O : FTDI232, CP2102, 16u2.... pour recenser les adaptions UART/USB reconnues

8

Merci. Et sais-tu s'il y a une API Python ou bien si c'est seulement en C ?

9

C, Python.......peu importe il sagit juste de parser quelques chaines caractères reçues du smartphone et d'en envoyer qui seront parsées par l'application GUI-O, l'API se résume à cela.

-Si un chemin quelconque existe pour l'échange de chaînes, le microcontrolleur attend la chaine @init, puis envoie des chaînes commençant par | pour positionner les widgets et les paramétrer (emplacement , taille, couleurs, valeurs....)

-les actions de l'utilisateur sur les widgets de l'interface émettent des chaînes començant par @

-à tout moment le microcontrôleur peut agir sur les widgets en envoyant des chaînes commençant par @

API en PDF ici https://drive.google.com/uc?export=download&id=1vHME6ipUyjRrLCVuZMmf95xsby_sRhTt

Ici un exemple avec une carte UNO programmée ..... en Basic :star_struck: (BASCOM pour AVR)
https://forum.gui-o.com/topic/32/ecg-electro-cardio-gram

le logiciel GUIO DESIGNER (Windows ou LInux) est très utile pour se faire la main , comprendre le contenu des échanges avec le smartphone. Il fonctionne avec une liaison WiFI ou BLuetooth (Classique ou BE) entre smartphone et ordinateur

10

Si ça intéresse quelqu'un, j'ai testé Gui-O depuis un ESP32 en Micropython et liaison BLE.
Il faut bien sûr installer l'appli Gui-O sur le téléphone Android. L'appairage se fait sans problème. J'ai fait un IHM qui permet de choisir une couleur par ses composantes RGB et de l'afficher sur l'écran du smartphone. J'ai vu ensuite qu'un des exemples était très similaire.

Voici le code :

from BLEuart import *
import time

def on_rx():
    global incoming
    incoming = bleu.read().decode().strip()

def init (bleu):
    bleu.write("@cls\r\n")
    bleu.write("@guis BGC:#FFFFFF\r\n")
    time.sleep_ms(100)
    bleu.write("|LB UID:title X:50 Y:15 TXT:\"RGB selector\" FFA:\"font7\" FSZ:6:\r\n")
#     bleu.write("|CB UID:red   X:50 Y:50 W:60 BTH:5 STA:240 ENA:-60 BGC:#C6C6C6 FGC:#FF0000 SFGC:#FF0000 HVAL:255\r\n")
#     bleu.write("|CB UID:green X:50 Y:50 W:40 BTH:5 STA:240 ENA:-60 BGC:#C6C6C6 FGC:#00FF00 SFGC:#00FF00 HVAL:255\r\n")
#     bleu.write("|CB UID:blue  X:50 Y:50 W:20 BTH:5 STA:240 ENA:-60 BGC:#C6C6C6 FGC:#0000FF SFGC:#0000FF HVAL:255\r\n")
    bleu.write("|SL UID:red   X:50 Y:30 W:60 BGC:#C6C6C6 FGC:#FF0000 SFGC:#FF0000 HVAL:255\r\n")
    bleu.write("|SL UID:green X:50 Y:40 W:60 BGC:#C6C6C6 FGC:#00FF00 SFGC:#00FF00 HVAL:255\r\n")
    bleu.write("|SL UID:blue  X:50 Y:50 W:60 BGC:#C6C6C6 FGC:#0000FF SFGC:#0000FF HVAL:255\r\n")
    bleu.write("|LB UID:text  TXT:\"0 - 0 - 0\" X:50 Y:65 FSZ:5\r\n")
    bleu.write("|BT UID:bt1   X:50 Y:80 BGC:#FFFFFF SBGC:#FFFFFF TXT:\"Exit\" SVAL:\"Exit\"\r\n")

def process(end, red, green, blue):
    if incoming.startswith("@red"):
        red = int(incoming[5:])
    elif incoming.startswith("@green"):
        green = int(incoming[7:])
    elif incoming.startswith("@blue"):
        blue = int(incoming[6:])
    elif 'Exit' in incoming:
        end = True
        return end, red, green, blue
    label = f'@text TXT:"{red} - {green} - {blue}"\r\n'
    bleu.write(label)
    color = f'{red:02X}{green:02X}{blue:02X}'
    background = f'@guis BGC:#{color}\r\n'
    bleu.write(background)
    return end, red, green, blue

# define BLE
ble = bluetooth.BLE()
bleu = BLEUART(ble, "T-Pico C3 Gui-O")
bleu.irq(handler=on_rx)

#
end = False
red = green = blue = 0
incoming = ""

try:
    while not end:
        if incoming:
#             print(incoming)
            if incoming.startswith("@init"):
                init (bleu)
            else:
                end, red, green, blue = process (end, red, green, blue)
            incoming = ""
except KeyboardInterrupt:
    pass

bleu.close()

Il est assez court et doit encore pouvoir être simplifié. Les lignes commentées permettent de choisir les couleurs avec des sliders circulaires, mais c'est moins pratique.

Il faut ajouter les fichiers attachés (pour la com BLE).
BLE.zip (2.2 KB)

J'ajouterai une copie d'écran bientôt.

La programmation est assez simple, il suffit d'envoyer des ordres / recevoir des données sous forme de texte commençant par "|" pour déclarer un widget ou par "@" pour le modifier ou lire une valeur.
Le reste, c'est juste du traitement de strings.

11

Bonjour,

J'ai découvert cet outil récemment donc je me permets de poser une question relative à mon utilisation. Si cela dérange je ferai un topic a part.

J'aimerais utiliser un stm32 ou esp (idéalement ESP32 car j'en ai sous la main).

Le but: afficher une vitesse en rotations par minute
Les contraintes : utilisation d'un codeur en quadrature 2000 ppr avec une vitesse max de 3000 rpm.

On arrive donc à 2000*3000 = 6 000 000 pulses par minute.
Je n'ai pas besoin d'un envoi de l'information à chaque pulse. Un envoi toutes les secondes ou 2 secondes est suffisant.

Idéalement j'utilise la liaison USB car c'est le téléphone qui va servir d alimentation.

Cela vous semble t il envisageable avec l'application ?
Jai un doute sur la liaison USB avec le Nombre de pulses et le taux de rafraîchissement

Merci pour vos lumières

12

Bonjour @vibram

une mise à jour par seconde de GUI-O via USB est à sa portée

PS : la liste des tutoriels s'agrandit , certains en réponse à des demandes d'ajout de fonctionnalités par des utilisateurs, le développeur est réctif. ne pas hésiter à le questionner sur son forum

USB : un cable OTG permet au smartphone= GUI-O d'alimenter et dialoguer avec un ESP32 (par USB natif ou USB par CH340 ou équivalent)..... stm32 peut être aussi , faut voir comment....

... dommage que GUI-0 n'existe pas pour IOS

13

Merci beaucoup pour ta réponse rapide
Si je comprends bien ça reste un sketch normal niveau arduino /mcu qui va envoyer une info via serial ou autre. C'est côté gui-ô qu'on va traiter la donnée reçue c'est juste ?

Car la partie codeur rotatif je gère (même si la partie vitesse je je gère pas pour le moment) , si ça peut m'éviter d'avoir à attendre qu'il fasse un tuto sur les codeurs rotatifs.

A réfléchir, j'ai aussi l option mit app bien sur

14

oui , ce traitement étant limité à la présentation des données, leur afficchage dans une interace graphique qui peut
-soit être défibie dans le code Arduino et trarnslise en série lors du setup()
-soit maintenant être construite sur ordi puis transférée et mémorisée côté Android, le code Arduino se contentant de la mise à jour des 'widgets'

1 Like
15

Il existe des widgets assez adaptés à l'affichage d'une vitesse :
image
Là, il les montre avec une température et un taux d'humidité.

1 Like
16

Effectivement ça semble bien. Je vais chercher un câble otg USB c micro USB