Touchpad Pinch to zoom not working in Electron (MacOS) - node.js

I am showing web content in a BrowserView in Electron, and looking to allow pinch to zoom. I've tried the following that didn't work:
view.webContents.setVisualZoomLevelLimits(1, 3)
view.webContents.setLayoutZoomLevelLimits(1, 3)
Manually setting the zoom factor does seem to work:
view.webContents.setZoomFactor(3)
But nothing that I've tried can enable the user to zoom.
One thing confusing me is that in trying to search for the answer, everybody seems to have the opposite problem:
Disable zooming (both pinch zoom and smart zoom [mac]) in electron
https://github.com/electron/electron/issues/8793
So I'm wondering did something change?
I am on electron 4.0.6, Node v11.12.0.

Ok, I've found where they changed it: https://github.com/electron/electron/pull/12679
And others have this problem:
https://github.com/electron/electron/issues/12631#issuecomment-447495983
Still trying to determine the exact fix.

You should call the setVisualZoomLevelLimits method on the webFrame object instead of on the webcontent. As is described here: https://github.com/electron/electron/issues/15417
In your renderer you should add:
webFrame.setVisualZoomLevelLimits(1, 4);

Related

How to add an icon to the right hand side of the MacOS menu bar in Electron?

I am a fan of the bitbar project that enables you on MacOS to add menu bar items to the right side of the menu bar like this:
Those icons persist even when the focus is on another window and can give the user live information about services running in the background.
I am building some apps with the Electron Framework and was thinking of wrapping bitbar into my applications, but that seems a little bit over engineered.
Is there a way to add an icon to this side of the menu bar? If not: Does anybody know a good example of such an implementation that includes an installer?
Electron's documentation of the Menu bar doe not indicate it. But maybe I overlooked something or there are other implementations of this MacOS only feature?
user No Grabbing pointed me precisely in the right direction! Thank you!
I was looking with the wrong search parameters: "Tray" seems to be the term i was missing:
Electron actually does already provide an API for that and after testing it i can say: it works out of the box: https://electronjs.org/docs/api/tray

Green square on game canvas using Phaser

Can someone please tell me why I'm getting a green square on my Phaser game canvas as below?
Without seeing any code I can tell you that you'll see that when an image can't be loaded by the Phaser framework.
Open developer tools in your browser of choice and refresh after opening the Network tab. You should see a 404 for one of your images.
I believe if you look at the standard browser console you may also see messages about the name of the asset that it failed to load.
I had a slightly different case. Images were being loaded in the init function, which apparently doesn't work. I renamed that function to preload and suddenly the green squares are gone and the images show up.
My case was also a little different too; it appeared that all my image resources were loaded, but I think I was trying to create the sprites a little too quickly - in order words, I was trying to create and add sprites to my scene before the scene was properly loaded.
I'm going to try waiting until 'scene.scene.isActive(key);' returns a boolean of true.....maybe that's what will solve my issue. Failing that, I might just put in some sort of sleep/await promise of 1 second or something (not ideal, but might work)
ALSO NOTE: Part of the reason I was able to create my sprites too quickly was because I was doing so in my own custom function, not the typical create() function. Actually, the best solution is probably to create my sprites in the create() function and not a custom function...

Glimpse screen takes up the whole page. How to resize it?

I have an irritating problem with Glimpse.
I wanted to see everything I can on a Glimpse tab so I maximised it's size on the page.
Now I cannot resize it back again. There is no edge I can drag down. I am sure there is a simple way of sorting this. I tried switching off Glimpse, but when I switched it back on again it was taking up the whole screen again. I don't want to install and uninstall, so how do I fix this easily?
I am using ie10
I find a way of fixing this, which is to go into Developer Tools and change the css settings dynamically by using the CSS top class, replacing another class like margin, and putting in 200px and then resizing from that.
Another option is launch the Glimpse as Standalone tool.

How to display a webview in full screen (autofit)

I am developing a webview app.
I need that the webview covers all the content (all the space available!) but I can't get to this...
I've tried several ways but stil don't understand how to tell the webview to autofit depending on the screen.
Here is my situation now:
And this if I rotate the device
I guess this means that I'm not working in the right way, eh ? Can anybody lead me to this right?
thank you
Add this 4 constraint like this for your webView.

Strange behaviour in my android app (Android 2.3.5) - Things get inflated wrong

I've been experiencing some very strange behavours in an app I'm developing. The app is not very advanced, it stores a couple of places in a sqlite database and is displayed in listviews, on a mapview etc. So, when browsing through my app after deploying it to my phone everything works great, but after a while one listview doesn't get inflated. A scrollbar appears as if the items were there but I can't see them. I push the back button to close the app. When revisiting the app my first view, which has two buttons, gets all messed up. The buttons fill the viewport and the background disappears etc. I can't figure out what's wrong.
Anyone else facing these problems? My phone is a HTC Desire HD with Android 2.3.5
The app is pretty "layout heavy", if you know what I mean. The listview items has custom background images, I'm using custom fonts etc. But the app is running smoothly up to the point when it freaks out and displays/don't display everything wrong.
My first thought is there is some kind of memory issue, ideas?
EDIT:
I believe this might have something to do with defining and using #00000000 as transparent color. Use #android:color/transparent instead.
SOLUTION:
So after doing some testing I found that what I previously mentioned in the edit really is the cause of this problem. I had defined the transparent color in my colors.xml as #00000000. This seems to work, sometimes... And other times it grabs a drawable instead, but not a drawable that is named "transparent", it grabs ANY drawable. Weird but true.
After some testing I finally found the cause of this problem. I had defined the transparent color in my colors.xml as #00000000. This seems to work, sometimes... And other times it grabs a drawable instead, but not a drawable that is named "transparent", it grabs ANY drawable. Weird but true.
So to fix this problem you should use #android:color/transparent instead when you want transparency on, for example, a view background.
If there are memory errors you should be able to catch them in logcat. You'll get "VM failed on xxxx byte allocation" messages (or the like).
Silly/stupid answer: often when I run into layout issues within my app, it's because I needed to do a clean build after having changed my layouts. You might want to start there.
Edit: You might also try the emulator, and if you suspect memory issues you could start the emulator with a small heap to force the issue to occur sooner. You can also check your heap usage in DDMS or with the Eclipse MAT to see if it's leaking.
I was experiencing the same problem on Galaxy tab even with #android:color/transparent. Was able to fix it only by replacing android:background="#color/transparent" with android:background="#null".

Resources