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();
}
Related
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 :))
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 writing a mobile app in Adobe AIR that loads a google map using Javascript. It works great on the desktop, but on mobile, everything looks WAY too tiny to be user friendly. The street text is unreadable, the infoWindows are too small and text is too small, the icons are too small, the "Satellite" and "Maps" buttons are very tiny, the zoom in and zoom out buttons on the map are too small to manipulate. Is there a "scale" property for the map that I am unable to find in the documentation that I can adjust to make a map more readable and user friendly? Or is this a CSS issue? Here is the Javascript I use to create the map, which I place in a div called "map":
function loadMap(latitude, longitude, mapWidth, mapHeight) {
var myLatlng = new google.maps.LatLng(latitude, longitude);
var sheet = document.getElementById("map");
sheet.style.width = String(mapWidth)+"px";
sheet.style.height = String(mapHeight)+"px";
var mapOptions = {
zoom: 13,
center: myLatlng
}
map = new google.maps.Map(document.getElementById("map"), mapOptions);
}
It has been so long ago that I cannot remember the solution that I came up with. I took a quick look at the HTML file I created 10 months ago, and it looks like I created a header in my HTML file and it included some meta tags that included
content="initial-scale=1.0". Try that and see if it helps.
<head>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<style>
#map {
height: 100%;
}
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
I figured it out. I needed this at the top:
<meta name="viewport" content="width=device-width">
I am embedding PDF in an IFRAME from a server that is unfortunately serving them as Content-Disposition:attachment;.
Is there any way to force the browser to display the PDF inline? Unfortunately I cannot change the headers for the PDF file linked in the iframe.
You could use pdf.js library for rendering pdf in html page.
Mozilla Pdf.js
HTML CODE
<!DOCTYPE html>
<html>
<head>
<title>PDF.js Learning</title>
</head>
<body>
<script type="text/javascript" src="pdf.js"></script>
<canvas id="the-canvas"></canvas>
</body>
</html>
JAVASCRIPT CODE
var url = "www.pdf995.com/samples/pdf.pdf";
PDFJS.getDocument(url)
.then(function(pdf) {
return pdf.getPage(1);
})
.then(function(page) {
var scale = 1.5;
var viewport = page.getViewport(scale);
// Get canvas#the-canvas
var canvas = document.getElementById('the-canvas');
// Fetch canvas' 2d context
var context = canvas.getContext('2d');
// Set dimensions to Canvas
canvas.height = viewport.height;
canvas.width = viewport.width;
// Prepare object needed by render method
var renderContext = {
canvasContext: context,
viewport: viewport
};
// Render PDF page
page.render(renderContext);
});
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>