My requirement is to simply play a video (url in json file) on a plane in aframe. I have created video entity in my html as follows
<a-video id="video_1" position="0 0 2" geometry="width:2.4;height:1.4"></a-video>
Inside my register component i have added the src file to video as below
AFRAME.registerComponent('myComp', {
schema: {
file: {type: 'asset', default: 'assets/data/file1.json'},
var: {type: 'number', default: 0}
},
init: function () {
},
update: function () {
var data = this.data;
var scene = this.el.sceneEl;
var screen = scene.querySelector('#video_' + data.var);
load(data.file, function (response) {
var products = response.mydata;
screen.setAttribute('src',products[data.var].videoUrl);
});
this.el.addEventListener('mouseenter', function () {
console.log("mouseenter",screen.getAttribute('src'));
});
}
});
My console log is displayed with path mentioned in the json file
"mouseenter assets/img/movies/videos/video1.mp4"
In network tab, i could see my file got fetched with type media and status 200. But still i am getting error
components:texture:warn `$s` is not a valid video +41ms assets/img/movies/videos/video1.mp4
index.html:1 [.Offscreen-For-WebGL-000000BA313F15D0]RENDER WARNING: texture bound to texture unit 0 is not renderable. It maybe non-power-of-2 and have incompatible texture filtering.
What is the correct way to add the video. Where am i going wrong. Please help
I was having the same problem and just managed to get it work in Chrome with something like this:
// Create a new asset
var new_asset = document.createElement('video');
new_asset.setAttribute('id', 'dynVid'); // Create a unique id for asset
new_asset.setAttribute('src', videoUrl);
// Append the new video to the a-assets, where a-assets id="assets-id"
document.getElementById('assets-id').appendChild(new_asset);
// Add the asset to the a-video
screen.setAttribute('src', '#dynVid');
// Start playback
new_asset.play();
This has the added benefit that you can control playback if necessary (new_asset.pause(), new_asset.currentTime = X, muted = true, etc).
For larger videos, you may need to add some callbacks, like oncanplaythrough, to wait until the video has loaded enough.
https://aframe.io/docs/0.5.0/guides/using-javascript-and-dom-apis.html#creating-an-entity-with-createelement
var videoEl = document.createElement('a-video');
videoEl.setAttribute('src', videoUrl);
this.el.appendChild(videoEl);
Related
I am working on WordPress plugin, which basically converts text files/MS Word Documents into WordPress Posts.
Flow is really simple, you just open dialog box and select files from PC and import.
Now I am trying to integrate Google Drive Picker so users can also create posts from there documents stored in their G-Drive.
I have done some pretty work by reading and understanding google drive picker documentation,
I found a really good working example of it too.
so I customized by callback function for picker which is:
function pickerCallback(data) {
if (data.action === google.picker.Action.PICKED) {
// document.getElementById('content').innerText = JSON.stringify(data, null, 2);
var docs = data[google.picker.Response.DOCUMENTS];
// var googleSelectedFiles = [];
var allFiles = [];
var singleFile = {};
docs.forEach(function (file) {
gapi.load('client', function () {
gapi.client.load('drive', 'v2', function () {
gapi.client.request({
'path': '/drive/v3/files/' + file.id + '/export?mimeType=text%2Fhtml&key=' + myAjax.google.apikey,
'method': 'GET',
callback: function (responsejs, responsetxt) {
singleFile.id = file.id;
singleFile.name = file.name + ".html";
singleFile.content = JSON.parse(responsetxt).gapiRequest.data.body;
allFiles.push(singleFile);
singleFile = {};
}
});
});
});
});
setTimeout(function () {
gDriveHandleFileProcess(allFiles);
}, 4000);
}
}
Now the problem is, I am getting all the document converted as HTML, from <html> to end </html> which includes head tag and style tags and of course there are images too.
I can set all the content into post_content of post while saving it into db, but it's really bad way, I know that.. so looked out for this problem, but nothing found helpful.
If it is possible in a good manners or there might be other solutions I can go through like exporting in other format then save it.. but I also tried simple text format which is not required as the formatting is must.
If anyone can guide me through or share any idea I can go through, that'll be really great.
Thanks in advance.
I have to show ads on my page and a defaultImage when there is no ads.
googletag.defineSlot('/6355419/Travel', [250, 200], 'ad-slot-2')
.addService(googletag.pubads());
In there a way to record no ads in code in order to show the defaultImage ?
You could use an event listener such as slotRenderEnded (documentation here)
// This listener is called when a slot has finished rendering.
googletag.pubads().addEventListener('slotRenderEnded',
function(event) {
var slot = event.slot;
var isEmpty = event.isEmpty;
if (isEmpty) {
//add your default image
}
}
);
Alternatively, you might be interested in using googletag.content() as detailled here.
I was trying Azure maps Symbol feature. I wanted to add a custom image as symbol.
When i used path of local image, it was not working.
"All resources, such as icon images, must be loaded into the WebGL context."
Please help me how to make local image to be loaded as webGL context.
You must add your image to the maps image sprite before you the symbol layer can use it. You would pass the URL and a unique name for the image into the map.imageSprite.add function. This is a Promise that you have to wait for as the image is loaded asynchronously. Once loaded, you can then set the image option of the symbol layers iconOptions to the unique name of the image.
Some additional code samples can be found here: https://samples.azuremaps.com/?sample=custom-symbol-image-icon
Update:
Here is a code block show how to add an image to the maps image sprite (WebGL context).
//Wait until the map resources are ready.
map.events.add('ready', function () {
//Create a data source and add it to the map.
datasource = new atlas.source.DataSource();
map.sources.add(datasource);
//Load the custom image icon into the map resources.
map.imageSprite.add('my-custom-icon', '/images/icons/showers.png').then(function () {
//Add a layer for rendering point data as symbols.
map.layers.add(new atlas.layer.SymbolLayer(datasource, null, {
iconOptions: {
//Pass in the id of the custom icon that was loaded into the map resources.
image: 'my-custom-icon'
}
}));
});
});
If you have multiple images you want to use, you can create an array of the imade add promises, then use Promise.all. Here is a good code sample: https://samples.azuremaps.com/?sample=data-driven-symbol-icons And here is a simply code block example:
//Wait until the map resources are ready.
map.events.add('ready', function () {
//Create a data source and add it to the map.
datasource = new atlas.source.DataSource();
map.sources.add(datasource);
//Create an array of custom icon promises to load into the map.
var iconPromises = [
map.imageSprite.add('gas_station_icon', '/images/icons/gas_station_pin.png'),
map.imageSprite.add('grocery_store_icon', '/images/icons/grocery_cart_pin.png'),
map.imageSprite.add('restaurant_icon', '/images/icons/restaurant_pin.png'),
map.imageSprite.add('school_icon', '/images/icons/school_pin.png'),
];
//Load all the custom image icons into the map resources.
Promise.all(iconPromises).then(function () {
//Add a layer for rendering point data as symbols.
map.layers.add(new atlas.layer.SymbolLayer(datasource, null, {
iconOptions: {
//Use a data driven expression based on properties in the features to determine which image to use for each feature.
image: [
'match',
//In this example each feature has a "EntityType" property that we use to select the appropriate icon.
['get', 'EntityType'],
//For each entity type, specify the icon name to use.
'Gas Station', 'gas_station_icon',
'Grocery Store', 'grocery_store_icon',
'Restaurant', 'restaurant_icon',
'School', 'school_icon',
//Default fallback icon.
'marker-blue'
]
}
}));
});
Can you provide us your code?
I've tried to add local file as image to Azure Maps symbol layer. See examples here: click.
Local file file:///D:/showers.png failed with error: URL scheme must be "http" or "https" for CORS request., but same file on localhost server worked well:
P.S. Maybe I do not clearly understand the problem?
I am trying to update my famous.js surfaces' content by using Meteor's Blaze.toHTMLWithData(template, data), like Blaze.toHTMLWithData(Template.roomIlanSpecsTemplate, data), with a custom template in a function creating a famous surface inside a famous view. I want to pass the template in the cursorToArray function depending on the type of document returned to its callbacks. But I cannot have a rendered page on the browser, even there is no error in the console. If I use hardcoded version like having createFn function for each different template and then defininig and cursorToArray fucntion with that function it works.
What can be the thing I miss here?
cursorToArray = function(cursor, renderablesArray, template, createFn){
//each callback should decide which createFn to use based on result document, cos each result has a different template so a createFn.
cursor.observe({
addedAt: function(document, atIndex, before) {
renderablesArray.splice(atIndex, 0, createFn(document, template));//createRoomIlanView, createRoomRenterIlanView, createFriendLookupIlanView
},
changedAt: function(newDocument, oldDocument, atIndex) {
renderablesArray[atIndex] = createFn(newDocument, template);
},
});
}
cursorToArray(Ilans.find(), ilanViews, Template.roomIlanSpecsTemplate, createIlanView);
portion of the createFn definiton:
function createIlanView(data, template){
var ilanSpecsSurface = new Surface({
content: Blaze.toHTMLWithData(template, data),
properties: {
fontSize: "14px"
}
});
return ilanSpecsSurface;
}
If it is all about older Famous what about using Reactive Surface from https://stackoverflow.com/a/30445791/2288496
var ReactiveTemplate = famodev.ReactiveTemplate;
var reactive = new ReactiveTemplate({
template: Template.mytemplate,
data: Collection.find().fetch(),
properties: {}
});
A good example how to implement Routing, Subscriptions etc. https://github.com/sayawan/flowwy
I am using pnotify and loading callback function to show a notification when the fullcalendar plugin has loaded all events.
loading:function(isLoading, view){
if (isLoading === false){
new PNotify({
title:"Finished loading events",
type:'success',
delay: 1000
});
My problems is that when ever I move to different dates it calls loading again so I am left with so many notifications shown on my screen that it becomes very unusable. How can I bypass this? Is there a way to check if a notification is active and just change the text and title of it?
You can add that logic based on the template you're using (check the template docs).
Your code would be something like
loading:function(isLoading, view){
var exists = false;
$(".ui-pnotify-title").each(function() {
if ($(this).html() == 'Finished loading events')
exists = true;
});
if (!exists) {
new PNotify({
title:"Finished loading events",
type:'success',
delay: 1000
});
}
}
It would be better if you could use a specific id or class to detect if the notification is already shown, but this works.
Take a look at the working jsfiddle.
You can just store it in a variable, do your necessary code (like nullable/undefined checks, etc) and call "update()" (here: http://sciactive.com/pnotify/ - for example, find for 'Click Notice' and see the source)
var p = new PNotify({
title: 'Some title',
text: 'Check me out! I\'m a error.',
type: 'error',
icon: 'fa fa-times-circle'
});
// ... code ...
p.update({title: 'My new title'});