I am trying to create a 360' VR Image Gallery with A-Frame. I initially followed the guide on the main A-Frame website (https://aframe.io/docs/0.9.0/guides/building-a-360-image-gallery.html). The feature works in desktop view, meaning I can nudge the cursor over the two image portals and then get transported by hovering there momentarily. Unfortunately, when I view this in VR mode on my iPhone and then view in the Google cardboard device, the cursor will not move - it is stuck in place.
I've tried changing to the latest 0.9.1 release but that appears to have a bug with VR mode so I have reverted to 0.9.0
I've also experimented with using <a-entity cursor="fuse: true; fuseTimeout: 500" rather than the <a-cursor> primitive.
I have hosted a demo here https://whatapalaver.github.io/javascriptings/image_play/360/gallery.html
I've tested it on ios using firefox, chrome and safari.
<html>
<head>
<meta charset="utf-8">
<title>360° Image Gallery</title>
<meta name="description" content="360° Image Gallery - A-Frame">
<script src="https://aframe.io/releases/0.9.0/aframe.min.js"></script>
<script src="https://unpkg.com/aframe-event-set-component#5/dist/aframe-event-set-component.min.js"></script>
<script src="https://unpkg.com/aframe-layout-component#5.3.0/dist/aframe-layout-component.min.js"></script>
<script src="https://unpkg.com/aframe-template-component#3.2.1/dist/aframe-template-component.min.js"></script>
<script src="https://unpkg.com/aframe-proxy-event-component#2.1.0/dist/aframe-proxy-event-component.min.js"></script>
</head>
<body>
<a-scene>
<a-assets>
<!-- Images. -->
<img id="photo" src="./images/test5.jpg">
<img id="photo-thumb" src="./images/test5-thumb.png">
<img id="cast-courts" src="./images/test6.jpg">
<img id="cast-courts-thumb" src="./images/test6-thumb.png">
<!-- Image link template to be reused. -->
<script id="link" type="text/html">
<a-entity class="link"
geometry="primitive: plane; height: 1; width: 1"
material="shader: flat; src: ${thumb}"
event-set__mouseenter="scale: 1.2 1.2 1"
event-set__mouseleave="scale: 1 1 1"
event-set__click="_target: #image-360; _delay: 300; material.src: ${src}"
proxy-event="event: click; to: #image-360; as: fade">
</a-entity>
</script>
</a-assets>
<!-- 360-degree image. -->
<a-sky id="image-360" radius="10" src="#cast-courts"
animation__fade="property: components.material.material.color; type: color; from: #FFF; to: #000; dur: 300; startEvents: fade"
animation__fadeback="property: components.material.material.color; type: color; from: #000; to: #FFF; dur: 300; startEvents: animationcomplete__fade"></a-sky>
<!-- Image links. -->
<a-entity id="links" layout="type: line; margin: 1.5" position="0 -1 -4">
<a-entity template="src: #link" data-src="#photo" data-thumb="#photo-thumb"></a-entity>
<a-entity template="src: #link" data-src="#cast-courts" data-thumb="#cast-courts-thumb"></a-entity>
</a-entity>
<!-- Camera + cursor. -->
<a-entity id="camera" camera look-controls>
<a-cursor
id="cursor"
fuse=true
animation__click="property: scale; startEvents: click; from: 0.1 0.1 0.1; to: 1 1 1; dur: 150"
animation__fusing="property: fusing; startEvents: fusing; from: 1 1 1; to: 0.1 0.1 0.1; dur: 1500"
event-set__mouseenter="_event: mouseenter; color: springgreen"
event-set__mouseleave="_event: mouseleave; color: black"
material="color: blue; shader: flat"
position="0 0 -3"
raycaster="objects: .link">
</a-cursor>
</a-entity>
</a-scene>
</body>
</html>
I realise the cursor is very small, even in desktop version but I would expect to be able to see it when using the VR mode and the google cardboard. We ought to be able to move the cursor over the inset images and hover to switch the background image.
Related
How do I upgrade to Font Awesome 5 for the leaflet plugin Leaflet.awesome-markers? This plugin has not been updated on github for some time and uses font awesome v4.
This is for an app that uses mapbox, leaflet and leaflet awesome markers with font awesome v4 and works correctly.
I've tried to upgrade to Font Awesome 5 like so:
app.scss
#import url('webfonts/font-awesome-pro-5.0.1.css');
#import url('webfonts/fa-solid-900.ttf');
#import url('webfonts/fa-solid-900.woff');
#import url('webfonts/fa-solid-900.woff2');
#import url('webfonts/fa-regular-400.ttf');
#import url('webfonts/fa-regular-400.woff');
#import url('webfonts/fa-regular-400.woff2');
And index.html:
<script src="scripts/fontawesome-all-5.0.1.min.js"></script>
After upgrading to Font Awesome 5, the leaflet markers are displaying with the icons too small, and not in the center of the marker. They were correct with v4.
I found this possible fix, but it made no difference, the icons are still too small and not centered: https://gist.github.com/pikesley/0197f9ea8aff737e6b80c945f741d584
var marker = L.AwesomeMarkers.icon({
markerColor: 'blue',
prefix: 'fa',
extraClasses: 'fas',
icon: 'music'
});
How can I fix this for Font Awesome 5?
As suggested by #mwilkerson's answer, your current code mixes the JS and Webfonts CSS approaches of Font Awesome 5. Only one approach is necessary.
Webfonts CSS:
The Webfonts Font Awesome 5 approach seems to work fine with the (no longer maintained) plugin
lvoogdt/Leaflet.awesome-markers version 2.0.2:
(here using the 'arrow-alt-circle-down' icon to show that it is correctly centered, because the 'music' one is very asymmetric)
var paris = [48.86, 2.35];
var map = L.map('map').setView(paris, 11);
var marker = L.AwesomeMarkers.icon({
markerColor: 'blue',
prefix: 'fa',
extraClasses: 'fas',
icon: 'arrow-alt-circle-down' //'music'
});
L.marker(paris, {
icon: marker,
}).addTo(map);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(map);
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.3.1/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin="" />
<script src="https://unpkg.com/leaflet#1.3.1/dist/leaflet-src.js" integrity="sha512-IkGU/uDhB9u9F8k+2OsA6XXoowIhOuQL1NTgNZHY1nkURnqEGlDZq3GsfmdJdKFe1k1zOc6YU2K7qY+hF9AodA==" crossorigin=""></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/lvoogdt/Leaflet.awesome-markers#2.0.2/dist/leaflet.awesome-markers.css" />
<script src="https://cdn.jsdelivr.net/gh/lvoogdt/Leaflet.awesome-markers#2.0.2/dist/leaflet.awesome-markers.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
<div id="map" style="height: 180px"></div>
JS approach:
The JS Font Awesome 5 approach dynamically replaces the <i> element by an <svg>, therefore it is no longer styled by the plugin CSS.
You can easily restore this styling by duplicating the CSS rule:
.awesome-marker svg {
color: #333;
margin-top: 10px;
display: inline-block;
font-size: 14px;
}
var paris = [48.86, 2.35];
var map = L.map('map').setView(paris, 11);
var marker = L.AwesomeMarkers.icon({
markerColor: 'blue',
prefix: 'fa',
extraClasses: 'fas',
icon: 'arrow-alt-circle-down' //'music'
});
L.marker(paris, {
icon: marker,
}).addTo(map);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(map);
.awesome-marker svg {
color: #333;
margin-top: 10px;
display: inline-block;
font-size: 14px;
}
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.3.1/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin="" />
<script src="https://unpkg.com/leaflet#1.3.1/dist/leaflet-src.js" integrity="sha512-IkGU/uDhB9u9F8k+2OsA6XXoowIhOuQL1NTgNZHY1nkURnqEGlDZq3GsfmdJdKFe1k1zOc6YU2K7qY+hF9AodA==" crossorigin=""></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/lvoogdt/Leaflet.awesome-markers#2.0.2/dist/leaflet.awesome-markers.css" />
<script src="https://cdn.jsdelivr.net/gh/lvoogdt/Leaflet.awesome-markers#2.0.2/dist/leaflet.awesome-markers.js"></script>
<script defer src="https://use.fontawesome.com/releases/v5.0.13/js/all.js" integrity="sha384-xymdQtn1n3lH2wcu0qhcdaOpQwyoarkgLVxC/wZ5q7h9gHtxICrpcaSUfygqZGOe" crossorigin="anonymous"></script>
<div id="map" style="height: 180px"></div>
The first step I'd take in resolving this is to determine whether you need to be using the Webfonts with CSS method for Font Awesome 5, or the SVG with JavaScript method, and then focus on that one, removing the other.
In your example code, you are loading both: Webfonts in your app.scss and SVG/JS in your index.html with the <script> block.
Perhaps resolving that set up issue will solve the whole problem. Or at least, it will help clear things up to identify and troubleshoot any remaining issue.
I would recommend starting with the Webfonts approach, to see if you can get that working. If so, then just remove that <script> block from index.html.
However, there are several common issues around upgrading from v4 to v5 (see notes on upgrading here). One of those issues has to do with the names of some icons changing between these major versions (the linked upgrade doc lists the specific icon names that have changed). There is a v4 shim that can ease the upgrade process by automatically translating any v4-only icon names to their v5 counterparts. But this v4 shim only works with the SVG with JavaScript method (details on that same linked upgrade doc). So if you need to use that v4 shim, then you'll need focus on the SVG with JavaScript method and drop the webfont loading in your app.scss.
steps to implement awesome icons into the map:
add this link to the index.html file(root file) if the app
<script src="https://cdn.jsdelivr.net/gh/lvoogdt/Leaflet.awesome-markers#2.0.2/dist/leaflet.awesome-markers.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/lvoogdt/Leaflet.awesome-markers#2.0.2/dist/leaflet.awesome-markers.css"/>
add this variable
var marker = leaflet.AwesomeMarkers.icon({
icon: 'arrow-alt-circle-down', //'music'
markerColor: 'blue',
prefix: ' fa fa-fa fa-paint-brush',
});
List item
attach the icon to the marker
leaflet.marker([property.lat, property.long], {
icon: marker
})
I try to display a 360-video in a a-sphere using the a-frame framework.
My code is as follows:
<html>
<head>
<script src="https://aframe.io/releases/0.3.0/aframe.min.js"></script>
<script src="https://rawgit.com/donmccurdy/aframe-extras/v2.1.1/dist/aframe-extras.loaders.min.js"></script>
<title></title>
</head>
<body>
<a-scene>
<a-assets
<video id="antarctica" playsinline autoplay loop="true" src="130.mp4">
</a-assets>
<a-videosphere src="#antarctica"></a-videosphere>
<!-- Using the asset management system. -->
<a-camera position = "0 0 0">
<a-cursor color=#FFFFFF></a-cursor>
</a-camera>
</a-scene>
<script>
</script>
</body>
</html>
The video is not displaying in the iphone browser, and as you can see i tried using the playsinline attribute. Can someone point me to the right direction?(It is working on desktop on android)
EDIT: I bookmarked the page to my home screen
Unfortunately, video does not autoplay on mobile browsers yet.
For some projects, I've solved this by hiding the a-scene and displaying a video element on the page that the user has to press to start the scene. After the user has pressed the play button, the video element is moved into a-assets element, the a-scene is made visible, and start the video with javascript. At this point, the video will be displayed on the videosphere.
Here's an example...
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Video example</title>
<meta name="apple-mobile-web-app-capable" content="yes">
<script src="./bower_components/aframe/dist/aframe.js"></script>
<script>
window.addEventListener("load", function() {
document.querySelector("#video").addEventListener("play", function() {
var video = document.querySelector("video");
var assets = document.querySelector("a-assets");
var videosphere = document.querySelector("a-videosphere");
var scene = document.querySelector("a-scene");
assets.appendChild(video);
videosphere.setAttribute("src", "#video");
scene.removeAttribute("style");
video.play();
})
});
</script>
</head>
<body>
<video id="video" controls="true" autobuffer height="100%" width="100%" webkit-playsinline src="./media/video.mp4" type="video/mp4"></video>
<a-scene>
<a-assets></a-assets>
<a-videosphere></a-videosphere>
</a-scene>
</body>
</html>
Edit: Just noticed your comment about iPhone. Have you also added a bookmark to your home screen?
I have a little trouble regarding the positioning of a flash movie in the facebook canvas.
The flash movie has a size of 760x600 px. So i have set the facebook app advanced setting of the canvas width to fixed(760 px) and height to fixed (800 px).
The problem is, that i get a horizontal scroll bar and only 750 px of the flash movie are shown, because the flash movie seems to be aligned at canvas.x = 10 px and not at x = 0 px.
Is there a way to set the position of the flash movie? Preferably in Flash-As3?
Thanks in advance!
Update
Thanks for the input Niraj! Unfortunately i have never done anything with CSS. Here is my "index.html", would you tell me how to integrate your example into the html code?
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
<!-- Include support librarys first -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
<script type="text/javascript" src="http://connect.facebook.net/en_US/all.js"></script>
</head>
<body>
<div id="fb-root"></div><!-- required div -->
<div id="flashContent">
<h1>You need at least Flash Player 10.2 to view this page.</h1>
<p><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /></p>
</div>
<script type="text/javascript">
//This example uses dynamic publishing with swfObject. Login is handled in the swf
//Note we are passing in attribute object with a 'name' property that is same value as the 'id'. This is REQUIRED for Chrome/Mozilla browsers
swfobject.embedSWF("example.swf", "flashContent", "760", "600", "10.1", null, null, null, {name:"flashContent"});
// redirect
function redirect(id,perms,uri)
{
var params =
window.location.toString().slice(window.location.toString().indexOf('?'));
top.location = 'https://graph.facebook.com/oauth/authorize?client_id='+id+'&scope='+perms+'&redirect_uri='+uri+params;
}
</script>
</body>
</html>
Thanks alot!
You problem lies in your Flash Page. You should remove margins from the HTML page that embeds the flash and use the Javacript SDK to resize the page using setAutoGrow() function. The overflow: hidden will remove the scrollbars too.
Example CSS:
body {
margin: 0;
overflow: hidden;
}
Edit:
In the <head> tag of your page, add in:
<style type="text/css">
html, body {
margin: 0;
overflow: hidden;
}
</style>
I need to stretch width of the used space of my app. The following image shows that there is space to be used.
Image: http://imageshack.us/photo/my-images/834/imgbe.png/
An example of this action would be:
http://apps.facebook.com/meucalendario/
Ps: I tried using: FB.Canvas.setAutoGrow, FB.Canvas.setSize () but no success.
Thanks.
The Default Canvas Width is 760px, but Facebook has recently added the option for developers to use fluid widths. Which means your iframe will have a 100% width and will expand depending on the user's screen resolution/browser.
You can read the official blog post here, and an example (assuming you already set the option in your app settings):
<html>
<head>
<title>Fluid Width HTML Example </title>
</head>
<body style="margin:0; padding:0; border:0; background-color:#000000">
<div id="allContent" style="background-color: #0000FF; height:100%">
<div id="output" style="color: #FFFFFF;" />
</div>
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script type="text/javascript">
FB.init({
appId : 'APP ID',
});
function echoSize() {
document.getElementById('output').innerHTML =
"HTML Content Width: " + window.innerWidth +
" Height: " + window.innerHeight;
console.log(window.innerWidth + ' x ' + window.innerHeight);
}
echoSize();
window.onresize = echoSize;
</script>
</body>
</html>
P.S.: You can't override the live ticker on the right!
You cannot do it. It's max value is 760px, that is up-to how far you can stretch your application's view port.
I'm embedding youtube videos within my iPhone phonegap app
e.g
<embed id="yt" src="http://www.youtube.com/v/myvidid" width="300" height="199"></embed>
This all works fine as the iPhone recognises these as a youtube videos and will insert the poster image and also invoke the youtube app upon click. However the problem is these youtube embeds are within a scrollable content area, for which I use CSS transformations to move up and down via touch scroll. When the user scrolls the area the video stays static in a fixed position on top of my content. No matter what CSS I add to the embeds, nothing seems to change this behavior.
Has anyone come across this behavior before or found a fix.
Many thanks.
Andrew
I have the same issue and had to use following workaround:
draw images with video thumbnails inside scroller
put play button over thumbnail
handle click event to show video outside of scroller
With code like this:
var videos = [];
$('#scroller object').each(function(i,el){
var movie = $(el).attr("data").replace(/^.*youtube\.com\/v\//,"");
var width = $(el).attr("width");
var height = $(el).attr("height");
var html = '<object style="margin-left:12px;margin-top:10px;" id="video" width="296" height="222" data="http://www.youtube.com/v/'+movie+'" type="application/x-shockwave-flash">' +
'<param name="allowfullscreen" value="true" />'+
'<param name="wmode" value="transparent" />'+
'<param name="src" value="http://www.youtube.com/v/'+movie+'" />'+
'</object>';
videos.push(html);
var thumb = "http://img.youtube.com/vi/"+movie+"/0.jpg";
$(el).replaceWith('<div id="video-'+i+'" style="width:240px;height:184px;background:url('+thumb+') no-repeat;background-size: 100%;"><div class="play-button"></div></div>');
$("#video-"+i).click(function(e,el){loadVideo(this)});
});
CSS code for pay button
.play-button {
position: absolute;
width: 240px;
height: 184px;
background: url(images/youtube_play.png) no-repeat;
background-size: 100%;
background-position: center center;
}
loadVideo function mockup:
function loadVideo(el){
var id = el.id;
if (!id) {
//play button clicked
id = $(el).parent()[0].id;
}
id = id.replace("video-","");
var html = videos[id];
//html contains <object> tag
$('#video-overlay').html(html).show();
}
Here is a nice tutorial Which Saved my Day
http://eisabainyo.net/weblog/2012/01/24/embed-a-youtube-video-iframe-in-phonegap-app/
Also i m posting some codes For a quick Access.
<html>
<head>
<title>YouTube video</title>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<script src="phonegap-1.2.0.js"></script>
</head>
<body>
<iframe width="560" height="315" src="http://www.youtube.com/embed/9HDeEbJyNK8" frameborder="0" allowfullscreen></iframe>
</body>
</html>
Then make the following changes in Phonegap.plist
![MediaPlaybackRequiresUserAction: NO
AllowInlineMediaPlayback: YES
OpenAllWhitelistURLsInWebView: YES
ExternalHosts
*.youtube.com
*.ytimg.com][2]
Video will play on your Simulator Also.