Git Product home page Git Product logo

draw-on-stream-telestrator's Introduction

TL;DR

Download the painter.exe (or painter for Linux user) file from the release page, run it and BOOM! you are done.

If Windows is showing you a warning screen, you can either trust me and go through, or dowload the painter.py file and execute it yourself (but don't forget to install Python then).

Draw on stream

This software is designed to help you to easy draw on your stream with tools like OBS Studio or StreamLabs. It is also known as a telestrator tool.

When I started streaming some pedagogical content, I couldn't find any tool to draw on top of my screen. My requirements were the following:

  • The tool should provide an independant window to capture (I don't want to capture the full screen and show the world my messy desktop)
  • Should be lightweight
  • Should have plenty of shortcut and basic drawing tools
  • Must replace itself to the same position after each usage
  • Should be free or cheap

I couldn't find the perfect tool. So I did what every sane person would do: I wrote my own!

So please welcome: Draw On Stream (or obviously: DOS).

Features

  • Hand writing
  • Straight line drawing
  • Color picker
  • Text writing
  • Basic shapes (rectangles / circles) filled or not
  • Semi-transparent painting scene to see the underlying window

Usage

Draw on Stream

You need to have python installed on your computer (I might generate a classic .exe some days to simplify windows user's life).

Then, simply start the painter.py script. A new window shall appears and you are good to go.

Adding it OBS

To use Draw on Stream in OBS, add a new "Window Capture" in OBS and select the painter app. Then, add a filter "Color key" (simpler than "Chroma Key") and set it to your painter background (white is the default). BOOM, done. You can draw on the painter and it should appear nicely on your stream.

Shortcut

  • +: Increment the tool stroke size
  • -: Decrement the tool stroke size
  • Ctrl +: Increment the painter window opacity
  • Ctrl -: Decrement the painter window opacity
  • Ctrl w: Wipe the current drawing
  • Ctrl z: Cancel shapes
  • Ctrl r: reset transparency
  • p: Switch to "pen" mode
  • r: Switch to "rectangle" mode
  • e: Switch to "ellipse/circle" mode
  • f: Toggle the "fill shape" option
  • a: Draw an arrow
  • right-click to draw straight line

Extra Notes

The "eraser" does only paint with the foreground color but doesn't really erase the underlying shape.

Also, the source code might look convoluted. Obvisously it's because I change my mind on how to do things in the course of the devlopment. So basically:

  • Please note that I wrote this code in a small timespan to solve a problem I had at a particular moment. Sorry for the lack of clean code XD.
  • The painter.py script can be standalone
  • If you want a very transparent painter canvas, it might be difficult to see the buttons. Therefore, you can start the commander.py tool. It will send the commands to the painter through a socket. Altough I don't really maintain that anymore (as no one uses it really) so bug will occures...
  • Any PR is welcomed.

Wanna thank me?

This tool saved your stream? You wanna thank me? Buy me a beer or some coffee! If you can and want to help, you can sponsor me on Tipeeee or on Paypal Donate

Also, you can find me on Twitter, Twitch, or my blog!

draw-on-stream-telestrator's People

Contributors

eskimon avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar

draw-on-stream-telestrator's Issues

Shortcut to recover after sliding opacity to full transparency?

Pretty cool program, but when you accidentally move the transparency slider to minimum (full transparency) the window is invisible, and unless you can blindly find the slider there is no way to make it visible again(?).

Pressing ctrl + or ctrl - doesn't seem to change the opacity, although pressing just + or - does change the line size. I know you can recover by removing the config.json file, or manually editing it to "alpha": 80,, but I mean there's no shortcut or something?

Btw I tried both the painter-32bits.exe and painter-64bits.exe on Windows 10.

EDIT: btw when you undo pen lines, it works per individual line segment. imho it should work on the entire lines, so when you draw a roman XI you should be able to undo it with just 3 undo clicks

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.