Draw on Stream

Salut tout le monde !

Me voici de retour pour vous présenter ma dernière création : Draw On Stream (DOS )

Sans plus attendre et avant que j’oublie, voici le lien du projet sur Github : https://github.com/Eskimon/draw-on-stream-telestrator/

Alors, qu’est ce donc que c’est Draw On Stream ?

Vous le savez peut-être, j’ai commencé récemment des lives Twitch pour présenter le tuto Arduino sous une autre forme.

Un de mes besoins lorsque je présente en live est de pouvoir faire des dessins, comme si j’avais un tableau blanc pour expliquer graphiquement mes propos. Il existe déjà des solutions comme Epic Pen ou autre, mais aucune solution ne met à disposition une fenêtre semi-opaque à disposition pour dessiner et toutes obligent à capturer l’intégralité de l’écran sans distinction de fenêtre. Hors moi, quand je stream, je veux montrer certains contenus mais pas mon bureau mal rangé.

Du coup j’ai fait ce que toute personne sensé aurait fait à ma place : J’ai codé mon propre outil .

Ce dernier devait proposer au minimum les fonctions suivantes :

• Fournir une fenêtre semi-opaque qui peut-être capturée par le logiciel de streaming (OBS Studio en l’occurrence) ;
• Ne doit pas peser des centaines de Méga pour 3 fonctions de dessins ;
• Doit avoir des raccourcis pour ne pas avoir à promener sa souris dans tout les sens pendant le dessin ;
• Doit-être gratuit ou pas cher (facile si c’est moi qui le code !).

S’en est suivi quelques jours de développement qui ont accouché de "Draw On Stream" !

Un logiciel "standalone", codé en Python vanilla avec tkinter pour interface graphique.

L’outil propose les fonctions suivantes :

• Dessin à main levé ;
• Dessin de ligne droite ;
• Des colors-pickers avec des presets de couleurs ;
• De la saisie de texte ;
• Un changement de taille "d’outil" ;
• Des formes de bases (ovale et rectangles) avec remplissage ou non ;
• Et un fond de fenêtre à transparence réglable pour pouvoir voir ce sur quoi on dessine !

Il y a aussi quelques raccourcis clavier pour changer d’outils ou régler la taille/transparence simplement.

Tout est redis dans le README du dépôt : https://github.com/Eskimon/draw-on-stream-telestrator/

Bref, c’est un projet tout con, mais qui m’aura appris plusieurs choses :

• Le mot "Telestrator" ;
• Faire des UI avec tkinter (inclus de base dans python 3) ;
• Générer des .exe pour Windows, notamment via un système de Continuous Integration.

Idéalement j’aurais voulu faire un système de plugins pour ajouter des features (j’aimerais par exemple facilement pouvoir ajouter des symboles électroniques etc) mais pour le moment c’est un peu overkill par rapport à mes besoins alors je laisse de côté

Et voilà !

J’ai pas bien compris : en gros tu superpose la fonction dessin à ton écran, c’est ça ?

Exactement. Illustration ci-dessous, on voit ma zone de dessin translucide par dessus la fenetre du navigateur. Avec ces deux sources fusionnées dans OBS et en virant le fond blanc de la zone de dessin, le spectateur aura l’impression que je dessine directement sur la fenetre firefox.

Sympa d’utiliser l’opacité de la fenêtre, je n’y avais pas pensé! OBS ne prend pas en compte l’opacité ?

Non OBS l’ignore, ce qui m’arrange bien

Compatible avec une tablette graphique ?

C’est à dire ?

Sur certain logiciel les tablettes graphiques ne sont pas bien supporté, même en mode stylo. Je viens de tester ça marche. Je me demande si ça serait possible d’utiliser en mode PEN.

Bah là je me contente de lire la souris/clavier, après le reste dépend pas de moi

Joli projet ! Pour avoir vu les streams avant/après cet outil (A moins que tu faisais tout à main levé avec cet outil avant ? :O) , c’est vraiment une bonne amélioration visuelle.

La première semaine j’utilisais effectivement un autre truc trouvé sur le net. Et comme il me satisfaisait pas du tout c’est ce qui a mené au dev de celui-ci

Rien que les raccourcis de couleurs + pouvoir faire des traits droits et du texte ça a clairement sauvé la qualité des dessins Je manque encore d’entrainement pour m’en servir de manière bien fluide, mais ca commence à ressembler à quelque chose

Conseils d’amélioration :

Un tout petit truc qu’on utilise souvent en graphisme c’est la commande suivante : Maj+mouse_Left $\to$ $x = y$ pour les ellipse et rectangle. Ce qui permet en deux secondes de faire un truc "propre". Très ergonomique, une bonne feature de beaucoup de logiciel (même si tout le monde ne sait pas que ça existe). En tout cas c’est pas compliqué à ajouter, c’est user_friendly et c’est generique à tout les logiciels.

PS : Ctrl++ et Ctrl+- ne marchent pas chez moi

Tiens oui pas con pour ces raccourcis j’y avais pas pensé, je vais regarder pour les ajouter.

Pour le Ctrl +/- je vérifie pourquoi, il me semble que je l’ai vu buggué aussi chez moi

Je viens de vérifier pour "Maj+mouse_left" même Paint XP avait cette feature ! J’suis sur que presque personne ne le savait et qu’on a tous galéré un moment ou un autre à faire un cercle presque parfait

Hop, merci Blackline je viens d’intégrer tes suggestions. J’ai vérifié pour le Ctrl + + ca doit être un souci Windows car sous windows ca fonctionne…

Ton github est actualisé ? Car la mention de ces nouveaux raccourcis ni est pas et je n’ai pas réussi (en re-telechargeant simplement les documents) à utiliser les nouvelles commandes. Mais peut-être que c’est moi qui ne sait pas mettre à jour le l’outil aussi

Hum.

Tu as bien téléchargé l’exécutable de cette release : https://github.com/Eskimon/draw-on-stream-telestrator/releases/tag/v1.1 ?

Pas du tout ça doit venir de là en effet. J’sais pas bien utiliser GitHub