Chrome on Android: Gyroscopic data unavailable.

I got the solution by myself. By using the Samsung Internet Browser and debugging tools I got the following warning:

[Deprecation] The deviceorientation event is deprecated on insecure origins, and support will be removed in the future. You should consider switching your application to a secure origin, such as HTTPS.

The issue was, that I was using HTTP instead of HTTPS!

Now I got my final solution…

As I wasn’t happy with the gyrospcopic function anyway I modified the fallback function slightly by following this approach.

I replaced the jquery.paver.min.js file with the original file from here. Then I added the following jQuery to the code on line 216, just after $t.addClass(‘paver–fallback’);

$t.css('overflow-x', 'scroll');
$t.find('img').css('height', '100%');
$t.find('img').css('max-width', 'none');
$t.find('img').attr('srcset', '');

Hi @faeb35, thanks for sharing your solution.

The issue you are experiencing is related to missing gyroscopic feature on some devices.

Anyway, I would not edit jquery.paver.min.js, instead use this css rules in an external CSS/JS file, to avoid deletion in case of file/plugin update.

We can add the rules to the plugin itself…

Hi Leonard

Thank you for your reply!

It’s not that the gyroscopic feature is missing on my android/browser. It’s related to the fact that the gyroscopic event seem to be only accessable by HTTPS according to the notes in the console.

I guess that you’re totaly right, that it’s not the best option to edit the jquery.paver.min.js. So I choosed now the way to add it to jquery.init.js. But I think this would be overwritten when you update the plugin as well, right? What do you think would be the best option to add it to the plugin instead of the paver files?

Here’s my current solution (jquery.init.js file).

(function($){
  $( document ).ready(function() {
    // Shortcode init
    $('.easy-panorama').paver({
      gracefulFailure: easyPanorama_localize_init_var.panorama.gracefulFailure,
      failureMessage: easyPanorama_localize_init_var.panorama.failureMessage,
      failureMessageInsert: easyPanorama_localize_init_var.panorama.failureMessageInsert,
      meta: easyPanorama_localize_init_var.panorama.meta,
      minimumOverflow: easyPanorama_localize_init_var.panorama.minimumOverflow,
      startPosition: easyPanorama_localize_init_var.panorama.startPosition
    });
	
	//by https://stackoverflow.com/questions/19401633/how-to-fire-an-event-on-class-change-using-jquery/19401707
	var $paverBlock = $('.easy-panorama-block');
	if ($paverBlock.length > 0) {
		var observer = new MutationObserver(function(mutations) {
		  mutations.forEach(function(mutation) {
			if (mutation.attributeName === 'class') {
			  var attributeValue = $(mutation.target).prop(mutation.attributeName);
			  if (attributeValue.indexOf('paver--fallback') > -1) {
					console.log('Paver is in fallbackend!');
					
					$paverTarget = $(mutation.target);			  
					$paverTarget.css('overflow-x', 'scroll');
					$paverTarget.find('img').css('height', '100%');
					$paverTarget.find('img').css('max-width', 'none');
					$paverTarget.find('img').attr('srcset', '');
					$paverTarget.parent().find('.paver__fallbackMessage').css('font-size', 'x-small');
					$paverTarget.parent().find('.paver__fallbackMessage').css('font-weight', 'bold');
					$paverTarget.parent().append('<figcaption>' + $paverTarget.find('img').attr('title') + '</figcaption>').css('text-align', 'center');
				  
			  }
			}
		  });
		});

		for (var i=0; i<$paverBlock.length; i++) {
			observer.observe($paverBlock[i], {
			  attributes: true
			});
		}		
	}	
	
	// Block init
    $('.easy-panorama-block').paver();
	
  });
})(jQuery);

Initially I wanted to listen to the fallbackend.paver from paver event. But somehow I was not able to, if someone could help me out here, you’re more then welcome:-) So as workaround I added the mutation listener for mutation of the css attribute (adding of the class ‘paver–fallback’).

All the best,

Fabian