Advice on creating a "Draw on Screen" App


#1

Hi Electron community,
I am a front end developer and before to dive into the magic of Electron I would like to ask you if I will be able to create what I have in mind.

If some of you remebers the great app OmniDazzle, unfortunatly retired, I would like to create something similar and I thought that it would be the right occasion to try to create my first desktop app usign Electron.

For those who don’t know OmniDazzle, it was a little application that give the power to write on the desktop above any application present. I’ve searched for some substitute of this app but in the OSX ecosystem I didn’t find any that suits my needs.

Now, before dig any further, I would like to understand if I can create a “full desktop app” that will track mouse movements and left/right click in order to draw over my app.

I know that there are already plenty of good drawing app in Electron and I can suppose that the mouse/drawing part is been already solved, but I would like to know if the applications that we can build with this framework are able to live on top of all the others.

Thank you in advance and sorry if this questions seems too dumb to more experienced developers but even if I want to learn Electron and improve my JavaScript knowledge, since work is eating most of my time I would like to know if is possible to develop what I have in mind before to invest dozen of hours in learning and testing.

Thanks to anyone will reply me,
Andrea


#2

First of all, this sounds like a fantastic project! You might want to try creating a full screen, borderless window (can be done very easily when crate a BrowserWindow object). There is also a “always on top” flag you could look into. I’m going to play around with kiosk mode a little bit to see how it plays with transparency.


#3

Sounds promising. I think it’s time to doop dive into JavaScript and Electron :smiley:


#4

IMHO Electron is the wrong tool for this job, overlays like you’re describing would be better done as native apps where you can have full control over rendering, positioning, input etc. The Chromium framework Electron is built on has its own particular way of rendering windows and handling input, I don’t think your use case was really taken into account when they designed the thing. Furthermore the impression I have of transparent Electron windows is that they are very flaky, they work until they don’t because you’ve installed a new version of graphics drivers, or your dog sneezed.


#5

Eheheheheheh thanks @enlight, but I came to the Electron universe because I am a frontend developer and I do not have time to study C and the other native languages to create a desktop app.

I think that the problems with the transparent window they could be solved creating a snapshot of the desktop and write on it.

At the end of the day all the other applications around do not let literally write on the document. IE if you highlight an image or a paragraph, when you scoll the higlighted areas stay at the same place but all the content behind it moves.

I’ve seen some applications that works in this screenshot way but my problem is that they do not offer keynoard shortcuts and at the same time the area is boxed inside a window.

My need is something that do not distracts my students trying to read the app name on the top bar or noticing it at all.

Thanks for the feedback, I’ll try first the transparent borderless window and if I’ll find problems doing so I’ll try this new idea that has been born talking with you.

Thanks again, I’ll keep in touch.