Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Electron screenshot tool that can post to Budoco, like the old BugTracker.NET tool #36

Closed
ctrager opened this issue Dec 11, 2020 · 31 comments
Closed

Electron screenshot tool that can post to Budoco, like the old BugTracker.NET tool #36

ctrager opened this issue Dec 11, 2020 · 31 comments

Comments

@ctrager
Copy link
Owner

ctrager commented Dec 11, 2020

@ivangrek - Does this interest you?

So far I can see that electron can take a screenshot of the entire desktop, but not off a selection. So, I'm thinking a way to do it would be to create like a transparent window for doing the selection, then take the screenshot of the whole desktop, then apply the selection rectangle to whole desktop image.

So, step number one, can I produce an electron window that simulates rubber band selection?
@ghost
Copy link

ghost commented Dec 11, 2020

Needs research.

@ctrager
Copy link
Owner Author

ctrager commented Dec 11, 2020

Have you worked with electron before? I just started this week.

@ghost
Copy link

ghost commented Dec 11, 2020

I'll start in a few minutes... 😄

@ctrager
Copy link
Owner Author

ctrager commented Dec 12, 2020

@ivangrek - I have one more issue that I want to do , autoreplies to emails, and then I'm going to stop working on Budoco unless there are some actual people who are using it. If you want to keep working on it, then you should fork it, and then enjoy doing things YOUR way, with EF, etc.

The other open issues, they can all wait, or maybe I'll do them when I have trouble sleeping, but if somebody wants to use Budoco, those open issues aren't going to stop them. I wonder if anybody ever will use Budoco???

I'm going to focus on the screenshot tool also because I want to learn electron, and also because my son is starting a business that might involve electron.

If you want to keep in touch, I'm at ctrager@yahoo.com.

@ghost
Copy link

ghost commented Dec 12, 2020

Ok. Will help.

main.js

const { app, BrowserWindow } = require('electron')

function createWindow () {
  const win = new BrowserWindow({
    frame: false,
    fullScreen: true,
    transparent: true,
    webPreferences: {
      nodeIntegration: true
    }
  })

  win.loadFile('index.html')
  win.setFullScreen(true);
}

app.whenReady().then(createWindow)

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', () => {
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow()
  }
})

index.html

<!DOCTYPE html>
<html>
    <head style="min-width: 100vw; min-height: vh;">
        <meta charset="utf-8">
        <title>Electron App</title>
    </head>
    <body style="min-width: 100vw; min-height: vh;">
        <div id="h-rule" style="height: 0; border-top: 1px dashed red; position: fixed; top: 0; left: 0; right: 0;"></div>
        <div id="v-rule" style="width: 0; border-left: 1px dashed red; position: fixed; top: 0; bottom: 0; left: 0;"></div>
        <div id="region" style="display: none; width: 0; border: 1px dashed red; position: fixed; top: 0; bottom: 0; left: 0; right: 0;"></div>

        <script>
            const hRule = document.getElementById("h-rule");
            const vRule = document.getElementById("v-rule");
            const region = document.getElementById("region");
            var selection = false;
            var startPoint;
            var endPoint;

            document.addEventListener("mousemove", (e) => {
                hRule.style.top = `${e.pageY}px`;
                vRule.style.left = `${e.pageX}px`;

                if(selection) {
                    endPoint = {
                        pageX: e.pageX,
                        pageY: e.pageY
                    };

                    if(endPoint.pageX - startPoint.pageX < 0) {
                        [startPoint.pageX, endPoint.pageX] = [endPoint.pageX, startPoint.pageX];
                    }

                    if(endPoint.pageY - startPoint.pageY < 0) {
                        [startPoint.pageY, endPoint.pageY] = [endPoint.pageY, startPoint.pageY];
                    }

                    region.style.top = `${startPoint.pageY}px`;
                    region.style.left = `${startPoint.pageX}px`;

                    region.style.width = `${endPoint.pageX - startPoint.pageX}px`;
                    region.style.height = `${endPoint.pageY - startPoint.pageY}px`;
                }
            });

            document.addEventListener("mousedown", (e) => {
                e.preventDefault();

                selection = true;

                startPoint = {
                    pageX: e.pageX,
                    pageY: e.pageY
                };

                region.style.display = "block";
            });

            document.addEventListener("mouseup", (e) => {
                e.preventDefault();

                selection = false;

                region.style.display = "none";
            });
        </script>
    </body>
</html>

image

Good luck!

@ctrager
Copy link
Owner Author

ctrager commented Dec 12, 2020

Your such a fast learner!!

@ctrager
Copy link
Owner Author

ctrager commented Dec 12, 2020

IMG_20201211_210124

Isn't transparent on my machine Mint 20, based on Ubuntu 20. The behavior of Electron windows is definitely different on different platforms.

@ctrager
Copy link
Owner Author

ctrager commented Dec 12, 2020

https://stackoverflow.com/questions/54763647/transparent-windows-on-linux-electron

@ctrager
Copy link
Owner Author

ctrager commented Dec 12, 2020

Add this worked:
app.commandLine.appendSwitch('enable-transparent-visuals');
app.commandLine.appendSwitch('disable-gpu');

@ghost
Copy link

ghost commented Dec 12, 2020

You can also run the index.html file in browser.

@ctrager
Copy link
Owner Author

ctrager commented Dec 13, 2020

@ivangrek
It's ugly, but the technology works end to end:
https://github.com/ctrager/budoco_screenshot
Thanks for your help with the transparent window. I still have a lot of work to do, but I don't have any research to do.

@ghost
Copy link

ghost commented Dec 13, 2020

I can't select a region on the Windows now.

@ctrager
Copy link
Owner Author

ctrager commented Dec 13, 2020

Works for me, but I see discussions about different behavior on different OSs.
https://drive.google.com/file/d/1OI8GXfTyTgrzwz2U4rNuKHH04UZSsn3G/view?usp=sharing

@ghost
Copy link

ghost commented Dec 13, 2020

Works super!

@ctrager
Copy link
Owner Author

ctrager commented Dec 13, 2020

@ivangrek - I'm confused. Did you have to make code changes to make it work for you?

@ctrager
Copy link
Owner Author

ctrager commented Dec 13, 2020

and, just curious, where do you live?

@ghost
Copy link

ghost commented Dec 13, 2020

@ivangrek - I'm confused. Did you have to make code changes to make it work for you?

I am doing some changes and testing how it works.

@ctrager
Copy link
Owner Author

ctrager commented Dec 13, 2020

You didn't anwer my question - Did you have ot make code changes to make it work for you?

@ghost
Copy link

ghost commented Dec 13, 2020

Did you have ot make code changes to make it work for you?

I don't think I understand the question. I made such changes and it worked for me.

transparent.html

<head style="min-width: 100vw; min-height: vh;"> to <html>
<body style="min-width: 100vw; min-height: vh;"> to <body style="background-color: rgba(0, 0, 0, 0.01);">

background-color: rgba(0, 0, 0, 0.01);

Displays the transparent layer. Without this, the layer does not appear at all.

@ctrager
Copy link
Owner Author

ctrager commented Dec 13, 2020

What's your OS?

@ghost
Copy link

ghost commented Dec 13, 2020

What's your OS?

Windows 10.

@ghost
Copy link

ghost commented Dec 13, 2020

If you close the transparent window, then the main thing will not appear, and the process will not end.

@ghost
Copy link

ghost commented Dec 13, 2020

1

@ctrager
Copy link
Owner Author

ctrager commented Dec 15, 2020

@ivangrek - Can you get the latest and tell me if it works okay on your Windows 10?

@ghost
Copy link

ghost commented Dec 15, 2020

Works!

Except electron/electron#21538.
I think can turn off window resizing to prevent this case.

transparent_win.loadFile('transparent.html')
transparent_win.setFullScreen(true);
transparent_win.setResizable(false);

image

@ctrager
Copy link
Owner Author

ctrager commented Dec 15, 2020

I put in your change. I couldn't reproduce your bug, but still I put in your change. Also, now you can draw on the screenshot, for example to circle things, before you send it. I think it's done.

@ghost
Copy link

ghost commented Dec 15, 2020

The brush sometimes does not reset and starts drawing immediately without pressing, if you make several pictures in a row.

image

@ctrager
Copy link
Owner Author

ctrager commented Dec 15, 2020

I created an issue for this in the budoco_screenshot repo. Do you want to work on it?

ctrager/budoco_screenshot#1

@ghost
Copy link

ghost commented Dec 15, 2020

Try select "Capture" and close transparent window. I do it with Alt + F4.
Main window not showing and process still running.

@ghost
Copy link

ghost commented Dec 15, 2020

I created an issue for this in the budoco_screenshot repo. Do you want to work on it?

Ok. I will fix it.

@ctrager
Copy link
Owner Author

ctrager commented Dec 15, 2020

If the user has to hit Alt + F4 to CAUSE this bug, I don't want to fix it.

@ctrager ctrager closed this as completed Dec 15, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@ctrager