Advice on creating a "Draw on Screen" App

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

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.

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

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.

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.

@AndreaBarghigiani how is going with your idea? I came to same one, but Im also thinking that Electron isn’t a best choice. It would be great to have your feedback

Electron is very nice for something like this.
Two evening and I create this things:

Global keys works well, you can hide app in trial etc. On this moment I dont test this app on Linux or Osx, but this is simple app for my purpose and I work on Windows.

2 Likes

@kartofelek007 It looks great. Do you have this code available in Github or somewhere, I would like to play around. I’m very new to Electron development world !

snap.svg … and … d3.js

Here you are: https://gitlab.com/Domanski/electron-draw
But you must know, that this project was experiment only for training. Some ultra features may be hidden for you…
In this repo you can find second wersion of this app. This version is some different that v1.

@kartofelek007 Thank you. I will check it out.

I’m so sorry but I have the same issues, I am new to Electron, too. Could you share with me this code that I just use it for learning? Many thanks.

@kartofelek007, I went to the gitlab link, but it says it does not exist. Do you have an example of this elsewhere? I am looking to add some simple drawing of boxes and adding text to some images for an electron app I am working on. I would love to see the code, or if you could point me in the direction of how to do this in electron, that would be great.

Hello again.
You may look at version 1: https://gitlab.com/Domanski/electron-presentatione
Version 2 is less helpfull for you, because i use fabric.js and you will not see draw logic.

This app is basen on this video: https://www.youtube.com/watch?v=uIMDFjVLCHU
Maybe this tutorial help you: http://www.williammalone.com/articles/create-html5-canvas-javascript-drawing-app/

In electron you can create transparent canvas with transparent page. You need create and with JS pain on it.