In I'd like to get user webcam as a simple background (== no tracking, markers...)
With the following code I got it, but there's no shadow on the webcam background.
I guess I should not use the aframe-ar.js, and I can see this example showing webcam mapped on a cube :
webcam as aframe texture
But how to get the webcam as a simple background? And then how to get shadows visible on this background?
<html>
<head>
<script src="https://aframe.io/releases/0.8.2/aframe.min.js"></script><!-- Master file for aframe (== a-scene) -->
<script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar.js"></script><!-- display webcam -->
<script src="../js/play-all-model-animations.js"></script><!-- play animation -->
<script src="../js/aframe-orbit-controls.min.js"></script><!-- orbit cam target -->
<script src="../js/aframe-extras.js"></script><!-- pour cub-env-map -->
</head>
<body>
<a-scene vr-mode-ui="enabled: false" embedded>
<a-assets>
<a-asset-item id="toy" src="../assets/toyDrummerSolo-03.glb"></a-asset-item>
</a-assets>
<a-entity gltf-model="../assets/toyDrummerSolo-03.glb" play-all-model-animations="" shadow="" id="gltf">
</a-entity>
<a-entity camera look-controls orbit-controls="target: 0 1 0; minDistance: 0.5; maxDistance: 60; initialPosition: 0 5 5"></a-entity>
<a-entity id="keylight" light="type:point;intensity:2;castShadow:true;shadowCameraFar:100;shadowBias:-0.001;shadowMapHeight:2048;shadowMapWidth:2048;" position="2.40512 2.77634 2.73113"></a-entity>
<a-entity id="ambient" light="type:hemisphere;color:#e5fdff;groundColor:#ffffff;intensity:0.5" visible=""></a-entity>
</a-scene>
<!-- no shadow on the webcam background -->
</body>
</html>
There a couple of questions here, not sure which ones are resolved, so let me address the title:
1. non a-frame background
Without a <a-sky>, or background <a-scene background=""> defined - any elements below the scene will be visible. Like here:
<img src="background-image">
<a-scene>
<a-box></a-box>
</a-scene>
1a. webcam background
Almost the same as above, but instead as an img you need a video element:
<video></video>
// after the page is loaded:
// navigator.mediaDevices.getUserMedia({video: true})
// .then(stream => {
// video.srcObject = stream;
// video.play();
// })
Adjusting the sizes, for the scene to match the video can be tricky, but it's not the issue here.
2. background shadows
As the camera background has no physical surfaces to receive shadows - we'll have to imitate them. For example the shadows can be cast on an invisible <a-plane> element. Three.js has a special material for this: ShadowMaterial. A simplified example could look like this:
<video>
<a-scene>
<a-box shadow>
<a-plane rotation="-90 0 0" apply-shadowmaterial></a-plane>
</a-scene>
with a simple custom component:
AFRAME.registerComponent("apply-shadowmaterial", {
init: function() {
// grab the mesh
let mesh = this.el.getObject3D("mesh");
// keep the reference to the old material
let tmp = mesh.material;
// assign the new material
mesh.material = new THREE.ShadowMaterial({ opacity: 0.6 });
mesh.receiveShadow = true;
// free memory
tmp.dispose();
}
});
Check it out here(sloppy resizing, but i think this is not what matters here :))
Related
I have a PDF opening in an iFrame using Fancybox. Is it possible to width to screen so in a mobile portrait view, it shows the whole thing, albeit tiny?
I think you can be interested with this example which I Posted September 17, 2015
https://www.autoitscript.com/forum/topic/177368-how-to-get-reference-to-pdf-object-embeded-in-ie/
Firstly you should change size of iFrame Element.
In a second step you should inspect iFrame nad check how PDF object is embeded
For example this could look like this:
<script language="JavaScript">
function rsChange ()
{
var ax = document.all.TestObj;
if ( ax.readyState == 4 )
{
if ( ax.IsInitialized == false )
{
window.setTimeout( "rsChange();", 100 );
}
else
{
ax.Server = "192.168.1.3";
ax.Connect ();
}
}
}
</script>
<OBJECT language='javascript' ID='TestObj' CLASSID='CLSID:36D64AE5-6626-4DDE-A958-2FF1D46D4424' WIDTH='640px' HEIGHT='480px' onreadystatechange='rsChange();'></OBJECT>
<br><br><br>
Don't forget to do a "REGSVR32 UltraVncAx.dll", before viewing this page.<br>
The timer trick in the rsChange() function is required to get the windowful ActiveX initialized properly, before letting the ActiveX create the VNC client child window.
</body>
</html>
In such case you should change parameters in this following object:
<OBJECT language='javascript' ID='TestObj' CLASSID='CLSID:36D64AE5-6626-4DDE-A958-2FF1D46D4424' WIDTH='640px' HEIGHT='480px' onreadystatechange='rsChange();'></OBJECT>
I am having an issue with creating buttons in an Animate CC HTML 5 canvas project. I've tried creating a MovieClip instance in my library, setting a linkage name and creating a frame in the MovieClip for each state, labelled as "out", "over", "down" and "hit".
Using the ButtonHelper class in CreateJS has "worked", to a degree, producing a functioning button with rollover state, until I try to reposition the button else where on the stage using the .x and .y properties. When I do this, the hit state seems to "separate" from the rest of the MovieClip - i.e. to trigger the "rollover" frame, I would have to mouse over the hit state much further down and to the right of the stage.
My Animate CC trial has now expired, so I am trying to solve my issues with using the CreateJS libraries with plain old fashioned HTML. I have created a spritesheet PNG file with three 50px x 50px images in it, which equals 150px X 50px. I have created an HTML doc and Javascript code, which follow below, but when the states of the Sprite button do not change when I click "down" on it or mouse "over" it.
I wonder if anything could pass some ideas my way? There might well be a simple error in what I've written, I'm working by myself and slowing going "code-blind" to it.
Thanks very much,
Dave
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Sprite and Spritesheet Testing</title>
<script type="text/javascript" src="js/easeljs-0.8.2.min.js"></script>
<script type="text/javascript" src="js/preloadjs-0.6.2.min.js"></script>
<script type="text/javascript" src="js/soundjs-0.6.2.min.js"></script>
<script type="text/javascript" src="js/tweenjs-0.6.2.min.js"></script>
<script type="text/javascript" src="js/custom.js"></script>
<link type="text/css" rel="stylesheet" href="css/defaults.css" />
</head>
<body onload="init();">
<h1>Using Sprites, SpriteSheets and ButtonHelper</h1>
<p>Below should be some example buttons. Hopefully this functionality can be recreated within Animate CC using the CreateJS libraries.</p>
<!-- CreateJS content will be displayed here -->
<canvas id="t26Canvas" width="749" height="737" class="setupCanvas">
<h1>The internet browser you are currently using does not support the <canvas/> HTML 5 element.</h1>
</canvas>
</body>
</html>
Javascript:
/* Javascript required by the example page */
var HTML5Stage;
var spritesheet;
var data;
var myButton;
var myButtonHelper;
function init() {
// Get the HTML5 <canvas/> element we are going to be using for the CreateJS content.
HTML5Stage = new createjs.Stage("t26Canvas");
// Set usable on touch devices
createjs.Touch.enable(HTML5Stage);
// Enable capturing of mouse rollover events
HTML5Stage.enableMouseOver(30);
setupSpriteSheet();
addTestButton();
}
function setupSpriteSheet() {
data = {
images: ["images/ui/buttonsprites.png"],
frames: {width: 50, height: 50},
animations: {
out: 0,
over: 1,
down: 2
}
};
spritesheet = new createjs.SpriteSheet(data);
}
function addTestButton() {
myButton = new createjs.Sprite(spritesheet);
myButtonHelper = new createjs.ButtonHelper(myButton);
HTML5Stage.addChild(myButton).set({x: 300, y: 100})
HTML5Stage.update();
}
I have 2 contentPanes inside a BorderContainer using the Dojo Toolkit. Much like the following:
<div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'sidebar', gutters:true, liveSplitters:true" id="borderContainerB" style="height: 200px">
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="splitter:true, region:'top'" style="width: 100px;">Hi, I'm leading pane<br><br>Lots of stuff goes here.</div>
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="splitter:true, region:'center'">Hi, I'm center pane</div>
</div>
I'd like to use JavaScript to programmatically change the position of the splitter. In one case, I'd like to move it all the way to the side so only one contentPane is visible. What do I do to change the splitter position?
Already tried:
var datasetArea = document.getElementById("studiesDatasetArea");
datasetArea.style.height = newHeight + "px";
which didn't work, as well as:
dojo.widget.byId('studiesDatasetArea').resizeTo(400, newHeight);
which changes the borderContainer's size, rather than just moving the location of the splitter. I don't want to change the outer borderContainer's size.
I found some useful code here that answers my question:
http://telliott.net/dojoExamples/dojo-bcExample.html
A snippet:
require(["dijit/registry"],
function(registry)
{
var myBC = registry.byId("studiesBorderContainer"); // actual JS object
var topPane = registry.byId("studiesTableArea");
dojo.style(topPane.domNode, "height", (800-newHeight)+"px");
myBC.resize();
});
_layoutChildren: function(/*String?*/ changedChildId, /*Number?*/ changedChildSize){
// summary:
// This is the main routine for setting size/position of each child.
// description:
// With no arguments, measures the height of top/bottom panes, the width
// of left/right panes, and then sizes all panes accordingly.
//
// With changedRegion specified (as "left", "top", "bottom", or "right"),
// it changes that region's width/height to changedRegionSize and
// then resizes other regions that were affected.
// changedChildId:
// Id of the child which should be resized because splitter was dragged.
// changedChildSize:
// The new width/height (in pixels) to make specified child
//example:
var bc = digit.byId(‘borderContainerId’);
var newSize = 150;
var childContentPaneId = ‘myPaneId’;
dojo.hitch(bc, bc._layoutChildren(‘childContentPaneId’,newSize));
please i need your help folks!
I'm using Anythingslider to slide between HTML5 video and other content, but when I add autoplay attribute in video tag, Anythingslider plays just audio.
Are you sure the video is not hidden behind another element? Play with the z-index as the video should be visible. I've had a few issues with this in the past, such as the video flickering in and out of visibility on scroll.
I ended up playing the videos in a light box since anything slider would leave the video playing as the carousel continued to scroll. Also, if you use an infinite scroller there were also issues with it playing the video in two places.
Providing you are using something like JW Player you will be able to set up some actions to pause the video on slide or similar but basic youtube embeds will be an issue.
Don't add the autoplay attribute to HTML5 video. What is probably happening is that the cloned copy of the video (first and last slides only) is playing the video, but all you hear is the audio since the panel is not in view. The reason you don't want to autoplay is because it will still autoplay even if AnythingSlider starts with another slide visible, and it won't stop until you cycle through the panels.
If you want the video to autoplay when the panel is visible, you'll have to add some script into the completed callback (video extension is not required with the code below; demo):
var playvid = function(slider) {
var vid = slider.$currentPage.find('video');
if (vid.length) {
// autoplay
vid[0].play();
}
};
$('#slider').anythingSlider({
// Autoplay video in initial panel, if one exists
onInitialized: function(e, slider) {
playvid(slider);
},
// pause video when out of view
onSlideInit: function(e, slider) {
var vid = slider.$lastPage.find('video');
if (vid.length && typeof(vid[0].pause) !== 'undefined') {
vid[0].pause();
}
},
// play video
onSlideComplete: function(slider) {
playvid(slider);
},
// pause slideshow if video is playing
isVideoPlaying: function(slider) {
var vid = slider.$currentPage.find('video');
return (vid.length && typeof(vid[0].pause) !== 'undefined' && !vid[0].paused && !vid[0].ended);
}
});
I would like to handle the mouseDown events in the WebView. I subclassed the WebView,implemented the mouseDown and I came to know the mouseDown was redirected to WebHTMLView.
I have gone through the following link.
mouseDown: not firing in WebView subclass
From the above link I got to know, We can redirect the mouseDownEvent to Objective-C,but I did not find any solution for this. Can I have any Pointers or sample javascript to implement the same.
I tried the hitTest method in webview subclass.
- (NSView*)hitTest:(NSPoint)aPoint
Is it possible to recognize the mouseDown in the above method?
You can use onTouchStart Event for the same .Refer this link to bind events on iphone
or use this :-
$('button').bind( "touchstart", function(){alert('hey'} );
touchstart is equivalent to mouseDown
Another Solution is to set the element's cursor to pointer and it work with jQuery live and click event .Set it in CSS.(cursor:pointer)
IN javaScript you can use :-
node.ontouchmove = function(e){
if(e.touches.length == 1){ // Only deal with one finger
var touch = e.touches[0]; // Get the information for finger #1
var node = touch.target; // Find the node the drag started from
node.style.position = "absolute";
node.style.left = touch.pageX + "px";
node.style.top = touch.pageY + "px";
}
}
or
document.addEventListener('touchstart', function(event) {
alert(event.touches.length);
}, false);
for more details refer javascript iPhone Events
For Mac OSx See The Link
I used the following HTML and JavaScript to capture the mouseEvents and to display the position of the mouse click in the WebView.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<script type="text/javascript">
function SetValues()
{
var s = 'X=' + window.event.clientX + ' Y=' + window.event.clientY ;
document.getElementById('divCoord').innerText = s;
}
</script>
</head>
<body id="bodyTag" onclick=SetValues()>
<div id="divCoord"></div>
</body>
</html>