Draw on Stream

Streaming telestrator

a marqué ce sujet comme résolu.
Auteur du sujet

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 :D .

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é :D

Et voilà !

ZdS, le best du Zeste ! | Tuto Arduino, blog, etc

+5 -0
Auteur du sujet

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.

image.png
image.png

Édité par Eskimon

ZdS, le best du Zeste ! | Tuto Arduino, blog, etc

+0 -0
Auteur du sujet

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 :D

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

ZdS, le best du Zeste ! | Tuto Arduino, blog, etc

+0 -0

Conseils d’amélioration :

Un tout petit truc qu’on utilise souvent en graphisme c’est la commande suivante : Maj+mouse_Left \to x=yx = 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.

BONUS

Le même chose existe avec Alt+mouse_Left, ce qui permet de centrer l’ellipse ou le rectangle sur le curseur de ta souris, par exemple sur un circuit electronique tu positionne ton curseur sur la ligne de ton fil, tu fais Alt+mouse_Left et tu adapte la taille de ton cercle, qui sera centré sur ta ligne du circuit (pratique pour un generateur de tension). Idem 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 ^^

Édité par Blackline

Нова Проспект (/,>\text{(}/ , \text{>}

+4 -0

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

Нова Проспект (/,>\text{(}/ , \text{>}

+0 -0

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 ^^

Нова Проспект (/,>\text{(}/ , \text{>}

+0 -0
Vous devez être connecté pour pouvoir poster un message.
Connexion

Pas encore inscrit ?

Créez un compte en une minute pour profiter pleinement de toutes les fonctionnalités de Zeste de Savoir. Ici, tout est gratuit et sans publicité.
Créer un compte