Same here, are there any thoughts on this or potential fixes / workarounds? The experience feels terrible.
Posts by Alexander360
-
-
Hi All,
I appreciate Klaus is currently working on a iOS 15 fix to the wakelock bugs reported in this thread. However, I thought I would create a test and example to help make the bugs clear - and also show the fixes I have tried - to try and help others.
Apologies for the long post, I figured explaining the issue in detail might help others. And apologies if I am repeating the issue I mentioned in my previous post, again I thought extra details and examples might help.
The main bug which I cannot solve is the Wakelock fix for iOS (15) devices which works (using the below fix) until a user plays a video - then the wakelock is stopped and I cannot see anyway of either restarting it or having it run in the background alongside other videos?
Here’s what I am trying to achieve:
User loads the tour, presses the ‘VR' icon with their finger to launch VR. The user then navigates the tour and the screen does not timeout / fade or go to black, from the very first time they load of the tour (currently this only works after a refresh on iOS devices). When the users gets to a pano with a video hotspot (i.e. pano 2 or 3 in the below examples), they can use gaze / onclick to play the video / or it automatically starts without the need to physically touch the screen. This should work with more than 1 video hotspot in the tour. The videos will have audio so muting is not an option. The key feature / bug here is: when the user plays a video, the wakelock hack stops. Is there a way of making the wakelock hack remain active and is not stopped either during the video hotspot plays, or after the video hotspot ends?
Here’s a demo I have created with the above features using version 1.20.10 (2021-10-01) Accessing this tour on an iPhone 6S running iOS 15 in either Chrome (version 86.0.4240.93) or Safari (15.0) has the following bugs:
Demo Link: https://northeast360.co.uk/video-wakelock-issue/
- Bug 1 (fixable) - iOS wakelock fix does not work on the first load of the tour. It only works after the tour has been loaded once, webvr activated and then refreshed in the browser.
- Bug 2 (fixable) - Video autoplay. There are 2 video hotspots. Despite having userinteractionworkarounds=“true” on both, neither video plays until the user touches the screen.
- Bug 3 (not fixable yet?) - Playing a video stops the iOS wakelock hack from working, even if the user has already refreshed before playing the video (see bug 1). This means a user watching a video for longer than their screen timeout settings will get a dark and then black screen. And after the video ends, the wakelock hack does not restart - so again the screen will timeout and fade to black.
Here’s a list of fixes I have tried with corresponding code / demos, hopefully these might help others:
Bug 1 & 2 fix
Klaus mentioned there being an issue with the order of the permissions earlier in this thread, so this may well be fixed in the next release. Until then, I found the following workaround.
Using javascript, you can force the DeviceMotionEvent.requestPermission before the user taps the VR icon. To do this, add the following code to the tour.html file:
In the <head> the below code includes the CSS to style the pop up permission box.
Code
Display More<style> .DeviceMotionRequestBanner { position: absolute; left: 0; right: 0; margin-left: auto; margin-right: auto; width:300px; height:120px; top:40%; background-color: #ef2d5e; padding: 20px; color: #fff; font-family: Open Sans, Helvetica, Arial, sans-serif; box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23); z-index:99; display:none; } .DeviceMotionRequestBanner > h3 { font-size: 28px; margin: 0; font-size: 28px; font-weight: 300; line-height: 1.2; letter-spacing: -.05rem; } .DeviceMotionRequestBanner > p { font-size: 1.1rem; } .DeviceMotionRequestBanner > button { background-color: #fff; color: #000; padding: 8px 30px; text-transform: uppercase; border: none; position: absolute; left: 0; right: 0; margin-left: auto; margin-right: auto; width: 100px; } .DeviceMotionRequestBanner > button:hover { color: #ef2d5e; } .DeviceMotionRequestBanner > a { color: #fff; margin-left: 25px; } </style> <script> //script for ios wakelock issue window.onload = function () { // Check if is IOS when page loads. if ( window.DeviceMotionEvent && typeof window.DeviceMotionEvent.requestPermission === 'function' ){ // Everything here is just a lazy banner. You can do the banner your way. const banner = document.createElement('div') banner.innerHTML = `<div id="DeviceMotionRequestBannerID" class="DeviceMotionRequestBanner" style="display:block;"><p>This app requires you to enable the DeviceMotion event on your device.</p><button>Enable</button></div>` banner.onclick = ClickRequestDeviceMotionEvent // You NEED to bind the function into a onClick event. An artificial 'onClick' will NOT work. document.querySelector('body').appendChild(banner) } } function ClickRequestDeviceMotionEvent () { document.getElementById('DeviceMotionRequestBannerID').style.display='none'; window.DeviceMotionEvent.requestPermission() .then(response => { if (response === 'granted') { window.addEventListener('devicemotion', () => { console.log('DeviceMotion permissions granted.') }, (e) => { throw e } )} else { console.log('DeviceMotion permissions not granted.') } }) .catch(e => { console.error(e) }) } </script>
Demo Link: https://northeast360.co.uk/video-wakelock-issue-fix/
Now, when the user loads the tour on iOS devices, a pop up will show asking them to enable devicemotion permissions. This will allow wakelock to work from the first load, not requiring a refresh as described above in bug 1. If you gaze (onclick) to move to the next pano and then gaze (onclick) on the youtube icon. Then wait around 20 seconds or so (I presume for the video to preload or something?) you can get the video to play without the user needing to touch the screen. It might take a few gaze (onclicks) to get it to work, but it does eventually play (each onclick pauses / unpauses the video). So in theory, whilst it's very glitchy and for some reason the preload is taking a long time? The video will auto play without needing the user to touch the screen.
However, when the video hotspot plays, the wakelock fix is stopped. I cannot see anyway of restarting the wakelock fix or making sure it remains playing whilst another video is also playing?
Klaus can you help?!
-
Hi,
This makes sense - the user permission-asking dialog probably conflicts with the touch user-interaction that is required to start playing the internal wake-lock video. I will change that order - first start the wakelock, then request the gyro permission. Then this case should also work. Will report when there is a new version with that.Best regards,
KlausHi Klaus, thank you for your response. But what is the code to start / restart the wakelock? (Sorry if I am repeatnig myself...) I have video distorted hotspots in my project so when the user taps to play the video on iOS device then the video starts to play but it knocks out the iOS wakelock fix (which I presume is a video file being played in the background)?
Is there a way to call or restart the wakelock fix once my other video hotspot is either closed, paused or stopped?
Thanks in advance.
-
Thanks for fixing this one Klaus, The 1.20.10 wakelock fix is working ok for me on new tours using panotour, on an iPhone 6s Alexander, but the example on the krpano site did still timeout/dim, I did clear the cache. Some of the tours I've updated the viewer files of on my own site take a few days to show the update versions, could that be the same for the krpano ones maybe? Works perfectly on new built tours for sure.
Best regards,
RobHi Rob, thanks for replying! I can confirm that it is fixed using the latest build, however, it seems to only work when starting VR through the skin toolbar button, not any custom hotspot using onclick="webvr.enterVR();" I can't figure out why that would be but I'll keep testing and post an update if I manage to resolve it.
Thanks!
Update: I was wrong, using a custom hotspot with onclick="webvr.enterVR();" works fine. It seems you still need to add in a window.DeviceMotionEvent.requestPermission() for this to work on the first load of a tour as reported here: https://krpano.com/forum/wbb/inde…otify#post84314
New Problem: Videohotspots in webvr... I know these are plagued with issues. But my project includes a video hotspot in VR. When the user taps to play the video on iOS device (iPhone 6S in this case) then the video starts to play but it knocks out the iOS wakelock fix (which I presume is a video file being played in the background)?
Klaus - Is there a way to call or restart the wakelock fix once my other video hotspot is either closed, paused or stopped?
Thanks in advance.
-
Hi,
There is new build (2021-10-01) of version 1.20.10 available:
- It uses now a different NWJS version for the Windows version, that one should run on more systems.
- The WebGL depthbuffer accuracy for Mac Safari / iOS 15 was even more improved.
- Additionally there is also new display.depthrange setting for optionally customizing the 3D rendering range (that should fit into the depthbuffer and be visible).
- The embedding setting passQueryParameters=false caused a JS error in the previous release.
- The webvr plugin has now a new wakelock workaround that works also on iOS 15.
- And for the config files there is now a new setting 'outputpath' that allows quickly changing the output folder.
Best regards,
KlausHi Klaus,
Many thanks for addressing this issue so quickly, however testing on my iphone 6s using iOS 15.0 with both safari version 15.0 - WebGL and chrome version 86.0.4240.93 both screens still timeout / fade to black.
Tested using the WebVR demo on the krpano.com website.
Can anyone else confirm this is still not working?
Thanks in advance!
-
In iOS 15 it seems the mobilevr_wakelock is no longer working. In WebVR the screen goes dimmed and then black again unless there is a physical touch / tap on the screen.
Tested on the KRPano WebVR Demo using an iphone 6S iOS 15.0 tested in Chrome and Safari - same issues.
Any workarounds Klaus?
Thanks in advance!
-
I have just tested with the latest 1.20.9 release and the problem is still the same with mac book track pad not working correctly (or at all) to pinch zoom or 2 finger scroll on an image layer.
Any ideas? Klaus, is this something that could be fixed?
Thanks as always!
I think I've found a workaround for anyone with this problem. By adding an if statement to check it the device is a mac, this seems to do the trick:
Code<!-- the action for zooming either via the mouse wheel for via touch gestures --> <action name="image_onmousewheel"> if(iszoom, <!-- THE WORKAROUND --> if(!device.mac, if(wheeldelta_touchscale GT 0, <!-- touch zoom --> if(startzoom, set(startzoom,false); copy(start_wheeldelta_touchscale, wheeldelta_touchscale); copy(start_imagescale, layer[image].scale); ); div(tmp, wheeldelta_touchscale, start_wheeldelta_touchscale); mul(layer[image].scale, start_imagescale, tmp); ); , <!-- mouse wheel zoom --> mul(sit,get(wheeldelta),0.05); mul(sit,layer[image].scale); add(layer[image].scale,sit); ); ); </action>
-
Quoted from "Alexander360"
Finding the same problem here too with v1.19 working fine, v1.20 pinch zoom on macbook trackpad not working as per zakato360's code.Hopefully Klaus will know what's causing this?
Thanks in advance!
I am having the same issue, has anyone been able to find a solution?I have just tested with the latest 1.20.9 release and the problem is still the same with mac book track pad not working correctly (or at all) to pinch zoom or 2 finger scroll on an image layer.
Any ideas? Klaus, is this something that could be fixed?
Thanks as always!
-
Finding the same problem here too with v1.19 working fine, v1.20 pinch zoom on macbook trackpad not working as per zakato360's code.
Hopefully Klaus will know what's causing this?
Thanks in advance!
-
Definitely interested. I presume this plugin will require some kind of php / sql database being setup to store the commands which the receiving krpano can retrieve? Happy to be a beta tester if you need one
-
Also interested. Someone said they were developing a plug in... https://krpano.com/forum/wbb/inde…82560#post82560
-
Hi,hmm... what's wrong the current 'mobilevr' device detection?
https://krpano.com/docu/xml/#available-devicesThat device setting will be true when the user-agent contains 'mobile vr' and that's the case for the Oculus Browser, Firefox Reality and probably also for Samsung VR (not sure about that one yet, would need to recheck).
Best regards,
Klaus
I'm not sure if this is relevant but as I posted in the version 1.20 large post - automatic detection doesn't seem to be working in the current 1.20.5 version on the Oculus browser. The larger 'Enter VR' button no longer displays - tried with my own projects and also directly on the krpano.com demo's. -
With this latest version, the 'Enter VR' layer button doesn't appear when tours are accessed in an Oculus GO headset? Is anyone else experiencing this problem?
-
Hi Klaus,
Thanks for the workaround. However, on my project, adding this code seems to make 'device.touchdevice' always true regardless of what device you are using? Is that correct? I have a series of if(device.touchdevice statements which previously would only be true for touch devices, now it's true for everything? How should I handle this?
Thanks in advance.
-
I am sure the closing of PTP has caused (or will cause in the future) quite a few problems for those who relied on their software for client projects. I know I am currently counting my lucky stars that I decided a long time ago to learn and use KRPano for my projects rather than PTP. I don't want to speak out of turn but it would make me feel more comfortable if I understood what the future plans are for KRPano and what assurances there are that the same thing (or similar) won't happen to KRPano in the future as it has with Kolor / PTP (i.e. sold off, shut down or similar).
So my question to Klaus is what does the KRPano roadmap look like, is there a business model to take it to the cloud on a subscription basis or other model to secure future revenues? And what can we do as supporters of KRPano to make sure it has a healthy future?
Thanks in advance! -
Hi All,
My head hurts - I can't figure it out - please help!
I am trying to create an animated line which highlights a specific item within the 360 image when a hotspot image / icon is activated or hovered over.
I want this to also work in WebVR so I am using a hotspot image .png which is just 1 colour solid pixels and therefore can be any width or height and can show as a line or block by using the rotate variable.
I have it working, but due to the 360 distortion, when it is around the edges of the screen the width (or height as I have rotated it) of the line becomes large - I want to try and keep the width constant, regardless of where it is in the current view i.e. keep the width the same regardless of its position on the screen.
The line hotspot needs to be distorted="true" so that when used with zoom="true" it will accurately point to the object or item in the 360 scene, regardless of its location in the current view.
I have it working but because it is a distorted hotspot (for accurate positioning when zooming in etc) when it is positioned to the left or right of the screen i.e. at the edges, the width / height becomes very distorted - see attached images.
Here is the current project: http://wearereality.com/dev/clients/ma…0.46,132.11,0,0);
Apologies if my code is a bit messy, the bits in question are as follows:
Code
Display More<style name="hotspot-style-line" type="image" renderer="webgl" visible="true" enabled="true" handcursor="false" zorder="4" zorder2="0.0" capture="false" edge="left" ox="0" oy="0" zoom="true" distorted="true" rx="0.0" ry="0.0" rz="0.0" depth="1000" tx="0.0" ty="0.0" tz="0.0" flying="0.0" scaleflying="true" alpha="1.0" novrspot="yes" /> <hotspot name="linespot1" url="images/line.png" onloaded="if(device.touch,set(width,100));" height="3" width="0" rotate="270" ath="-70" atv="15" onclick="" style="hotspot-style-line"/> <action name="linetween"> set(hotspot[%1].alpha,1); set(hotspot[%1].width,1); tween(hotspot[%1].width,%2,0.5); </action>
I want to control that distortion by dynamically changing the width of the line hotspot image to counter the 360 distortion. Is there a way to do this or a calculation which will counter the 360 distortion of the image? Similarly, is there a way to create distortion based on the zoom level / current FOV? Because as the user zooms in, the width of this line should also increase to make it appear the same width regardless of FOV.
I have tried a few hacks, calculating the difference between the current ath and the hotspot ath and then adding / subtracting from the width - but I can't figure out how to do this accurately / dynamically? The solution needs to take into account the velocity / acceleration of the distortion as the image gets closer to the edges of the current view.
Here are my unsuccessful hacks (unsuccessful because they aren't dynamic):
Code
Display More<!-- this is a way of hacking the width <action name="linetween"> set(hotspot[%1].alpha,1); set(hotspot[%1].width,1); set(currentFOV,get(view.fov)); set(currentATH,get(view.ath)); set(hsATH,get(hotspot[%1].ath)); dist(d,currentATH,hsATH); sub(newheight1,3,get(d)); set(hotspot[%1].height,get(newheight1)); tween(hotspot[%1].width,%2,0.5); </action> <action name="abs"> if (%1 LT 0, sub(%1,0,get(%1)); ); </action> <action name="dist"> sub(xdiff,%3,%2); abs(xdiff); div(totaldiff,xdiff,100); sub(%1,1,totaldiff); </action> -->
I hope this makes sense? Thanks in advance for any help.
-
Great job! Have you thought about this working in WebVR? What would it take to make something like this work in the vr environment?
-
Hi All,
I have searched the forum but not found any real user reviews / experiences of the differences in quality when viewing a KRPano tour in VR with an Oculus Rift or HTC Vive vs cheaper VR headsets available such as Samsung Gear VR or Google Cardboard. Apologies if it is somewhere. I think this would be a handy resource for people considering buying VR headsets and deciding which ones to use.
By 'quality of experience' I am referring to motion sickness really and any other benefits that an Oculus Rift or HTC Vive might have over other cheaper options.
I have been creating some tours and using Google Cardboard headsets (such as the DSCVR which is a plastic headset) with Nexus 6 phone. The quality is OK but it definitely gives you a headache after a minute or so. I have started to read up and understand the reasons why (latency etc) and I want to improve the quality of the experience so that people can view my tours for longer on these devices. Therefore I'm considering buying either a Samsung Gear VR and S7 phone, or whether I should be investing in an Oculus Rift or HTC Vive. Could people who have experienced these devices comment on the differences in quality etc and benefits for 1 headset over another?
Am I correct in thinking the quality of experiencing VR on a KRPano Virtual Tour will be much better with an Oculus Rift or HTC Vice? I intend on having hotspots in my tours which I read limits the low latency aspect of Oculus Rift? Does that mean the quality is likely to be similar to someone using a Cardboard headset and mobile if a tour has hotspots etc?
Thanks so much in advance!
-
Hi There,
I have created a tour which I would like to be used offline via the Testing Server. However, I want to create a more user friendly way to launch the tour from a DVD or USB stick ideally using a .exe or .app which users can just click which will then automatically open the Testing Server and load the correct html file and launch the server, all without the user needing to use the Testing Server UI.
The reason for this is because the tour will be used in front of my customers so it doesn't look very professional me opening the Testing Server and loading in the html file manually.
Has this been done before or is there anyone who would be prepared to help me to develop it?
Thanks in advance.
Alexander