Create a layer to visualize mouse clicks possible?

Hello, can you tell me if it is technically possible to create a layer with Quartz Composer that visualizes mouse clicks, similar to Mousepose? This layer should be placed on top of a screen source. If a user clicks within that screen source (on mouse up would be sufficient), a colored circle should appear for a second or so.

I can not use Mousepose for that because I want to use BoinxTV for a UX Testing Lab setup. There will be a web site in a browser in that screen source. The test person should not see the mouse click visualization, but people watching the BoinxTV output in an observation room should see when the test person clicks.

I am not familiar with Quartz Composer, but willing to learn it. I looked at the examples and have seen the “mouse tail” thing, like BoinxTVs mouse drawing layer, but could not find information wether there is a mouse-down event I could use.

Do you think it is possible to create something like that? Do you know any examples that could help me? Or do you maybe have a different idea how to achieve my goal? Thanks a lot for any help.

You have to use the “Mouse” patch in QuartzComposer to receive mouse coordinates and mouse key events. However, BoinxTV will only send those events if the mouse is moved over the views in BoinxTV itself. If you click outside of BoinxTV the events won’t go into the layer. So the most challenging thing seems to be the part, where your test person shouldn’t see the mouse clicks.

Does the test person have their own computer using a web browser and you grab the computer screen to have a video signal for BoinxTV? Then you would have to have a 3rd Party Software to transmit the mouse events from that computer to the BoinxTV computer and feed them into a layer for visualization.

What is your lab setup looking like?

Hi Achim, I use a MBP-R with an external display in the testing room. The browser that shows the prototype to be tested is on that external display. This space that the browser takes on that external display is defined as screen source in BoinxTV. There is also an external USB cam plugged into this MBP that films the test person. BoinxTV is on the internal display, and when the test starts, I switch it to full screen. This full screen view (shown on the internal) should than be broadcasted to another room, where the team can observe the testing. I plan to use Air Squirrel and Reflektor broadcasting to a second Mac or to an AppleTV. This second Mac or the AppleTV will be connected to some big TV or so. I couldn’t test the broadcasting via Air Squirrel yet, hope it will work. My BoinxTV document ist very simple right now: one with the USB cam, one layer with the screen source that shows the browser. On the output, the cam image is placed right to the screen source. I might have to add another layer for a USB microphone.

Now the people in the observer room should see some colored circle when the test person clicks anywhere within the browser, but the test person should not because that would disturb the testing. That’s why I don’t want to use Mousepose. Now my idea was that I could place an extra layer on top of the screen source with browser, and this layer would visualize the mouse clicks, so the people in the observe room can see that, but not the test person.

I attached a file that shows the output.

Great Setup! Unfortunately I think this workflow will not work out with the mouse clicks. The problem is, that BoinxTV don’t get any mouse events if it is in background while Safari is the foreground app.

My suggestion would be to have a separate machine for the test person. grabbing the monitor signal and mouse events and bring them to BoinxTV. With this you can have the secondary monitor of BoinxTV presented to the audience and keep your “BoinxTV screen” as is. However, even this will need some development to transmit the mouse events to BoinxTV so that a layer can visualize them.

(btw: maybe you want to mirror the test persons face, so that if they are looking right on screen, the eyes following them also “right” in the video)

I added another image that shows the whole setup. Thank you for your help.

Hi Achim, thank you! Just seen you have been posting an answer before I uploaded my setup graphic… OK, so I need an alternative setup. How could I bring the monitor signal of the testing computer to the computer running BoinxTV? I could plugin a HDMI cable in the testing computer, set the display preferences to “mirroring”, but how do I get that signal to the BoinxTV computer? Will I need a video grabbing card? How could I make BoinxTV realizing that there is a mouse event happening on that other testing computer?

To grab the video signal we can recommend the “Epiphan DVI2USB Solo” or a “Blackmagic UltraStudio Mini Recorder” ( read more about them here: http://boinx.com/boinxtv/equipment/ ). I also tried to contact the developer of a 3rd party app to get a solution for transmitting the mouse events from one computer to another but without any luck: they say their application can’t do it. So I guess this problem remains unsolved yet.