Multitouch Issue with Google Map in JS - google-maps-api-3

In the multitouch browser (tried IE10, IE11 on touch machine and using Visual Studio simulator in touch pinch mode) map object fires click event for pinch zoom gesture (it is not fired for swipe however ):
google.maps.event.addListener(map, "click", function (arg) {
console && console.log ("click");
});
Question:
is there a way to have Google map not to fire click on pinch gesture?
Thanks

Related

Onscreen Keyboard Touch Screen popup up with or without focus in Qt WASM

I am working on an application to be deployed as a wasm app and a windows application.
we are using a windows 10 OS touch screen tablet and google chrome to access the web app. am using an empty new qt project to demonstrate the problem :
The onscreen Keyboard popups up regardless of focus meaning it will pop up wherever i touch the screen:
if btn is pressed
if lineedit is selected
if empty widget space is touched even though there is no focus object behind it.
i include a link to this Behaviour Video so you can see the problem.
the onscreen Keyboard popup without focus problem occurs only if i compile for webassembly, works fine on the same tablet for MSVC.
what i tried :
catch the events then ignore them using :
ui->centralwidget->installEventFilter(this);
bool MainWindow::eventFilter(QObject *obj, QEvent *event)
{
//print event to qdebug
static int eventEnumIndex = QEvent::staticMetaObject.indexOfEnumerator("Type");
QString TEXT_Event = QEvent::staticMetaObject.enumerator(eventEnumIndex).valueToKey(event->type());;
qDebug()<<"TEXT EVENT="<<TEXT_Event;
if(TEXT_Event.contains("Paint")){
//dont show print event
}else{
ui->Main_PlainTextEdit->appendPlainText(obj->objectName()+"=>"+TEXT_Event);
}
if( event->type()==QEvent::MouseButtonPress|| event->type()==QEvent::MouseButtonRelease)
{
// handle on-screen keyboard
event->ignore();
event->accept();
}
return true;
}
setAttribute(Qt::WA_TransparentForMouseEvents);
not OK as it deactivates all mouse input => no interaction possible,
setAttribute(Qt::WA_AcceptTouchEvents);
This only changes the event from Mouse event to touch event.
Maybe there is an option that i need to tick in the form editor or touchscreen option that needs to be activated, maybe the way to catch and ignore event i implemented is wrong.
I don't know what i am doing wrong but all my attempts to fix this didn't work, please help guide me ?
Thank you in advance.
Here is how I solved it in Qt 5.15. To prevent the keyboard from popping up, I edited the default index.html. Bu default, there is a line:
<canvas id="qtcanvas" oncontextmenu="event.preventDefault()" contenteditable="true"></canvas>
I added inputmode="none", meaning I changed it to:
<canvas id="qtcanvas" oncontextmenu="event.preventDefault()" contenteditable="true" inputmode="none"></canvas>
What this does, is it prevent the onscreen keyboard from popping up. But note that it will not popup even when a line edit is in focus, so one must use either a physical keyboard or a custom virtual keyboard widget if typing text is required in the UI.
Hopefully it will get better in future Qt versions, I see there is currently some fixes scheduled for Qt 6.4 https://bugreports.qt.io/browse/QTBUG-83064

How to handle back button android to both exit app and close react native navigation side menu when it is open in home page

I am using react native navigation Wix side menu in my project. I want to close it when It is open and user clicks on mobile physical back icon. But I have defined for the back button to close my app when user clicks on it. So my back icon should do two following works:
1- it should close the menu when it is open.
2- it should exit from app when the menu is close.
I have saved the status of the side menu (open: true , close:false) in redux store to handle it. But the problem is when user open or close the menu with swiping on mobile screen. In this case I cannot update my state in redux store. I cannot disable this option (Swiping) of side menu in react native navigation to get ride of the problem. So I do not know how to fix it!
You could listen to the componentDidAppear event in your Side menu screen to set your redux store state for its visibility.
Also you could add Backhandler event handler in your screen to either close the side menu or exit the app.
For example:
useEffect(() => {
BackHandler.addEventListener('hardwareBackPress', () => {
if (reduxStore.sideMenuOpened) {
// Close the side menu.
closeSideMenu()
// Prevent the Backhandler's event bubbling up.
return true
}
// Let the backhandler's event bubble up to close the app if you are in root screen.
return false
})
}, [])

Xamarin Forms - Prevent webview from loosing focus on iOS

I'm trying to create an editor using Xamarin Forms.
The editor is a webview with content editable and a toolbar below.
You can check my current implementation here.
It works well on Android, when i tap on the button, it executes the javascript on the webview,the keyboard remains open and the webview doesn't loose focus.
On iOS the webview looses focus and the keyboard closes.
Like this:
Any idea on how can i solve this ?
What i tried so far:
Attach to the buttons an effect that calls ResignFirstResponder.
On the content editable, call focus when bluring.

Why can't I hook on html5 video play event?

I am using an HTML5 video tag with videoJS (last stable release, 4.12). I have no trouble to get the loadedmetadata event but for some reason I probably missed, I can't hook using the "meteor way" on the video object play event.
My template events code:
Template.Player.events({
'loadedmetadata #video_player':function (e,t) {
console.log(e.target); //working fine
},
'play #video_player':function(e,t){
console.log("play!");//now it works
}
});
I am debugging on Chrome but i guess it is not browser related.
edit:
It appears that it works when I don't use id or class selectors. Since I have only one video tag on my template, I can catch the play event by doing this:
Template.Player.events({
'play video':function(e,t){
console.log("play!");//not working
}
});
I still don't buy the fact that meteor can't handle that. If so, why? What is the difference between loadedmetadata and play events that allows the first to use an id selector when the latter can't?
play triggers only when playback is resumed, playing triggers every
time playback starts.
#Oskar, you are right when I look at the documentation. However, in my case, play triggers both when starting a video and when resuming it after a pause.
First off, make sure you're using the correct event - play triggers only when playback is resumed, playing triggers every time playback starts.
Looking at the Meteor docs, these are the events that are "officially" supported:
Event types and their uses include:
click
Mouse click on any element, including a link, button, form control, or div. Use preventDefault() to prevent a clicked link from being followed. Some ways of activating an element from the keyboard also fire click.
dblclick
Double-click.
focus, blur
A text input field or other form control gains or loses focus. You can make any element focusable by giving it a tabindex property. Browsers differ on whether links, checkboxes, and radio buttons are natively focusable. These events do not bubble.
change
A checkbox or radio button changes state. For text fields, use blur or key events to respond to changes.
mouseenter, mouseleave
The pointer enters or leaves the bounds of an element. These events do not bubble.
mousedown, mouseup
The mouse button is newly down or up.
keydown, keypress, keyup
The user presses a keyboard key. keypress is most useful for catching typing in text fields, while keydown and keyup can be used for arrow keys or modifier keys.
Other DOM events are available as well, but for the events above, Meteor has taken some care to ensure that they work uniformly in all browsers.

Not firing dragend or mouseup when drag event is fired

Getting stucked on dragging marker when releasing mouse button (to end the dragging) if only use
google.maps.event.addListener(Marker1,'drag',function() {Marker1.getPosition()})
but if I use
google.maps.event.addListener(Marker1,'dragend',function() {Marker1.getPosition()})
- all works fine and marker drops when I release the mouse button.
Want to use 'drag' for get dynamic position of marker while it beign dragged - not the result on dragend.
Where am I wrong?
Marker1.getPosition() will give you the final position of your marker. During a drag, you want to use the event's latLng property instead:
google.maps.event.addListener(Marker1,'drag',function(e) {
console.log(e.latLng);
});

Resources