I have need for the virtual laser pointer in Google Slides' Presenter View (I require a pointer graphic that originates from within the presentation window so that it will register in an OBS recording).
However, when the pointer moves into the lower 1/3 of the Slides screen, the floating toolbar reappears, which I find distracting (in my application, it appears behind a disembodied torso that's been green-screened into my OBS recording). I have reasons not to use Powerpoint (on a Mac, in PPT present-in-a-window mode, the virtual laser pointer cannot be toggled with a keystroke as it can in Slides).
I have not been able to find a setting that would leave the floating toolbar permanently invisible. Any help would be appreciated. Thanks in advance. If this setting is not available, I will file a feature request
I don't think there's a built-in setting, so I just wrote this JavaScript to do it:
setInterval(() => {
const iframe = document.querySelector('.punch-present-iframe');
if (!iframe) return;
const innerDoc = iframe.contentDocument ? iframe.contentDocument : iframe.contentWindow.document;
const nav = innerDoc.querySelector('.punch-viewer-nav');
if (nav) nav.style.display = 'none';
}, 1000);
Some notes:
Google changes their CSS class names every once in a while. To find the up-to-date classes, right-click the presentation bar and locate both its iframe ancestor and whichever element will hide the whole bar at the time.
This is in a setInterval so that you can exit and re-enter the presentation and still have it remove the bar.
Once the bar is gone, the only way I could find to enable the laser pointer is by pressing "L" on the keyboard (i.e. I couldn't figure out how to automate this).
Related
Question
I'm working with Adobe Scene7 BasicZoomViewer and I'm looking for a way to tell the ZoomViewer to reset the zoom so that the user is no longer zoomed in on an image but instead will show the default "zoom" level.
What I've found
The closest thing I found to what I need is this reset property ZoomView.reset which "Resets the viewport when the frame (image) changes. If set to 0 it preserves the current viewport with the best possible fit while preserving the aspect ratio of the newly set image".
This looks close to something I need but it states that it will reset or preserve the aspect ratio when a new image has been inserted but I am not inserting new images.
Demo from Adobe
There is a button on the image that the API inserts into the page that resets the zoom level. Adobe provides a demo page that shows what I'm working with. If you look at the bottom left, the right-most button is the reset button. When clicked, it has to make some kind of API call and I need to figure out which one it is.
Edit
I've been able to find a minified version of the BasicZoomViewer and I am currently attempting to make sense of the code.
There is an event listener placed on the "Zoom Reset Button" that just simply calls a reset() method on line 274 in the uglified version of the file. Currently, I am trying to make sense of the file and figure out how to access this method.
c.zoomResetButton.addEventListener("click", function () {
c.zoomView.zoomReset()
});
I will be answering my own question. If someone finds a better way please feel free to answer as well.
tldr;
Create a variable to hold the instance of your s7viewers.BasicZoomViewer() and inside of that you can access the event handlers and much more.
Example of calling the reset zoom handler
// instantiate the s7viewers class and save it in a variable
var s7BasicZoomViewer = new s7viewers.BasicZoomViewer({
containerId: 's7viewer',
params: {
asset: assetUrl,
serverurl: serverUrl
})
// example of how to call the "zoomReset()" method
s7BasicZoomViewer.zoomResetButton.component.events.click[0].handler()
Explanation
After digging through the minified code that was uglified I found an event listener on the s7zoomresetbutton DOM class name, or perhaps it's watching for the ID of that DOM element which is the same ID as the container div for your S7 BasicZoom Viewer plus some added text to make this ID unique. For example, if the container div is s7viewer then the reset zoom button will have an ID of s7viewer_zoomresetbutton.
Now, going through the code I found this event listener which let me know there must be some way to call the zoomReset() method.
c.zoomResetButton.addEventListener("click", function () {
c.zoomView.zoomReset()
});
In the code above, the value of c is this or in other words it's the instance of your S7 BasicViewerZoom and in my case I have multiple depending on how many images I need to zoom on.
When instantiating the s7viewers class you can then reference that instance later and access the event handlers on each button and other properties and methods.
From there it was just looking through the object returned from the instance and calling the handler for the reset button.
i have a problem on my map application, i am trying to put a coustom control on a Panorama and when users click to this custom button, panorama informations wll be saved.
For this purpose, i am using a function to check if there is a panaroma data exists
function checkforstreetview(mapid){
service.getPanoramaByLocation(markers[mapid].getPosition(), 50, function(r,status){
if(status==google.maps.StreetViewStatus.OK){
google.maps.event.addListener(markers[mapid], 'click', function (e) {
panorama[mapid].setVisible(true);
return false;
});
panorama[mapid].setPosition(markers[mapid].getPosition()); // custom control is moving to the left occurs here
}
});
}
as first, i am getting marker position on the map and check for panorama within 50m then if there is a panorama data, i am binding an click event to the marker for switching to panorama.
I am placing customdiv control via;
panorama[mapid].controls[google.maps.ControlPosition.TOP_CENTER].push(customdiv[0]);
Html markup of custom control is:
<div id="customdiv" title="Get data" style="height:10%;cursor:pointer;margin:0 auto;"><img src="/customdiv.jpg" style="height:100%;float:right;margin:5px;"/></div>
At the same time, i've assigned a function for drag and drop event for marker (with addlistener method), so if the marker drag'n drop to another position, checkforstreetview function is executed again.
So, what is the main problem?
In first execution there is no problem, when i click to the marker, panorama opens correctly and custom control is correctly placed but after close the panorama, drag'n drop marker to another position and click to marker again to show new panorama for new position, custom control moving to the left of panorama view.
Correct positioning (when system is initially loaded)
And buggy positioning (when i switch to panorama view in second time with marker click)
Extra information :
Because of google maps need to know height and width of container to work properly, i am using visibility: hidden rule for map container, not display:none but i think this cannot be problem bacause, on system load everything works correctly.
I've tested on Windows 7 / Firefox - Chrome - Opera - Safari - IE (lastest versions)
Tried solutions:
Many CSS hacks
Re-positioning custom control via google.maps.ControlPosition.TOP_CENTER
I've tried to put custom control to another positions BOTTOM_CENTER, LEFT_BOTTOM, .. etc but every time, custom control is moving to another position (shifting to the right, top, left )
Finally, i've commented out panorama[mapid].setPosition(markers[mapid].getPosition()); line and i've used standard packman to panorama/map switching then there is no problem on custom control positioning.
EDIT : Another interesting point is, after wrong positioning of custom control (and adress bar) when i click to next/previous arrows for next/previous images of panorama, custom control and adress bar becomes normal (correct position)
What can be the solution to stop shifting/moving costom control?
Thanks right now...
You cannot designate static CSS for the API, you must tell the maps API what you want your CSS to be (assign CSS properties in javascript):
https://developers.google.com/maps/documentation/javascript/examples/control-custom
I've resolved the issue by below function
google.maps.event.addListener(panorama[mapid], 'position_changed', function() {
google.maps.event.trigger(panorama[mapid],'resize');
});
I'm testing a website that opens in-browser pop-ups to display object details. These pop-ups are sometimes modal, by which I mean that they render the rest of the screen inoperative and trigger a gray transparent overlay that covers everything but the pop-up. This overlay is intended behavior, which means that I need a way to detect whether or not it was correctly triggered.
However, I am not familiar enough with the implementation of such overlays to determine where in the DOM I should look to find the properties that govern such behavior. As such, I was hoping someone with more information on how such overlays are usually configured could point me in the right direction.
The obvious solution is to simply try to click a button and see what happens but I was hoping to write a method that I could implement throughout the test suite rather than having to write a different check for each circumstance.
For those interested I'm scripting in Java using Selenium.
I know this is old, but it may still help someone else. I had just recently solved a similar problem for our React site. I believe we were using the react-block-ui module to implement our blocking overlays.
Basically, I was able to detect a certain element was blocked by an overlay because of 2 known facts:
The element was within a containing div ("the overlay") that followed a certain naming convention. In our case, it was section-overlay-X.
This overlay would have a class attribute (named av-block-ui) if it was blocking.
(Hopefully, you have access to this information, too... or something similarly useful.)
With this information, I wrote up a couple utility methods to help me determine whether or not that particular WebElement is blocked by an overlay. If it was blocked, throw a ElementNotInteractableException.
For Java:
...
By SECTION_OVERLAY_ANCESTOR_LOCATOR = By.xpath("./ancestor::div[contains(#id, 'section-overlay-')][1]");
...
private WebElement findUnblockedElement(By by) {
WebElement element = driver.findElement(by);
if (isBlockedByOverlay(element)) {
throw new ElementNotInteractableException(String.format("Element [%s] is blocked by overlay", element.getAttribute("id")));
} else {
return element;
}
}
private boolean isBlockedByOverlay(WebElement element) {
List<WebElement> ancestors = element.findElements(SECTION_OVERLAY_ANCESTOR_LOCATOR);
WebElement overlayAncestor = ancestors.get(0);
String overlayClass = overlayAncestor.getAttribute("class");
return !StringUtils.isBlank(overlayClass);
}
Here's my snippet on it:
https://bitbucket.org/snippets/v_dev/BAd9dq/findunblockedelement
This won't work in all situations, but I solved this problem by checking the overflow value of the body element. The flavor of modal I was trying to get past disabled scrolling of the page while it was active.
I am creating an winAPI application in c++ I have a photo in preview pane and I want to create two buttons NEXT and PREVIOUS on clicking them I will go to the next page .
Could you please give me the idea how to do that in c++ ??
Do I need to use QT libraray or it can be done using the in built function of WinAPI like -
HWND hwndButton1 = CreateWindow(L"BUTTON",L"NEXT",WS_TABSTOP | WS_VISIBLE | WS_CHILD | BS_DEFPUSHBUTTON,550,800,100,30,m_hwndPreview,(HMENU)buttonid1,(HINSTANCE)GetWindowLong(m_hwndPreview, -6),NULL);
HWND hwndButton2 = CreateWindow(L"BUTTON",L"PREVIOUS",WS_TABSTOP | WS_VISIBLE | WS_CHILD | BS_DEFPUSHBUTTON,650,800,100,30,m_hwndPreview,(HMENU)buttonid2,(HINSTANCE)GetWindowLong(m_hwndPreview, -6),NULL);
and then using WM_COMMAND for both the button clicks.
Am I going right?
I just want my API application work like a .pdf extension file...as in PDF files we have up and down arrow and on clicking upon them we can go to the next page..In winAPIc++ I couldn't find any such arrow function.. please tell me if there is any such arrow up/down function present to go to next page (because I am very less interested in creating NEXT and PREVIOUS button using createwindow function.. It looks odd).
You have not mentioned what tools you are using, so we don't know if you have a resouce editor. You should research that in a forum appropriate for the tools. If you think writing one line of code to create a button is "very complicated" then you need a better tool.
If you do not want the buttons to appear on top of the picture then you need another place to put them. One common possibility is a toolbar. It is a strip for buttons along the top or bottom of the main window:
http://msdn.microsoft.com/en-us/library/windows/desktop/bb760435(v=vs.85).aspx
With a resource editor you can draw an arrow on the button. Without a resource editor you can set the button text to a unicode arrow:
SetWindowText(hwndButton1, L"\x25bc"); // down arrow, use 25b2 for up arrow
Most buttons (and other controls) are created using a resource editor, placing the controls on a dialog template or a toolbar resource. If you do that Windows will create the buttons when you create the dialog or toolbar. This method is much preferred because Windows will adjust the size of the buttons as required for the screen settings in use.
If you can't do that you must use CreateWindow as you are doing.
Finally it is done.. I have created the buttons neither using Qt or nor using any createWindowEx..The best and easy approach to follow is resource editor ...just put some button on dialog and use IDD_MAINDIALOG (in my case)
m_hwndPreview = CreateDialogParam( g_hInst,MAKEINTRESOURCE(IDD_MAINDIALOG), m_hwndParent,(DLGPROC)DialogProc, (LPARAM)this);
and then
BOOL CALLBACK AMEPreviewHandler::DialogProc(HWND m_hwndPreview, UINT Umsg, WPARAM wParam, LPARAM lParam)
{
switch(Umsg) // handle these messages
{ .........
}
....
}
and thats done. Very easy task.
The application I'm working on is a HTML AIR application based on the AIR 2.5 SDK.
The application starts two windows: the first is a hidden window that registers it's self on the system tray (it's windows specific); the second is a visible lightweight window displaying showing various bits of information. Since the visible window is lightweight, there is no task bar entry to always the user bring the window to the front if hidden under other application windows.
The requirement is that on clicking the system tray icon the display window will be brought to the front.
My current solution looks something like:
function handleClick(){
var nativeDisplayWindow = findDisplayWindow();
nativeDisplayWindow.alwaysInFront = true;
nativeDisplayWindow.alwaysInFront = false;
}
function findDisplayWindow(){
// looks in air.NativeApplication.nativeApplication.openedWindows for the
// the display window and returns it
}
It works but really doesn't feel right.
I've tried using NativeWindow.orderToFront() & NativeWindow.activate() and various combinations of all the other method.
Is this the correct way to bring a window to the front of all application windows in AIR?
If you try casting your nativeDisplayWindow as a Window you should then be able to do something like:
function handleClick(){
var nativeDisplayWindow:Window = findDisplayWindow() as Window;
nativeDisplayWindow.orderToFront();
}
I don't know if this is what you are looking for or whether I've just repeated what you've explained?