I have a youtube video that I am loading in createScene(). The video loads and plays, but it disables my FirstPersonControls. I tried to attach click events to both the element and the iframe, but I'm not having any luck in catching the event. My theory is that I could use e.preventDefault(), but I'm not sure if that would even work. I am using CSS3DRenderer to render the CSS3D object.
In this example you are able to start the youtube vid and still use the threejs controls. For me, after I click on the youtube widget, none of my keyboard keys work anymore, and the only thing I can interact with is the youtube widget, no other objects in my scene.
Not really sure what to show in my code that could be causing the issue...
var YoutubePlane = function (id, x, y, z, ry) {
let element = document.createElement('div')
let width = '500px'
let height = '400px'
element.style.width = width;
element.style.height = height;
element.style.backgroundColor = '#ffffff'
element.className = 'three-div'
let iframe = document.createElement('iframe')
// iframe.style.pointerEvents = "none";
iframe.style.width = width
iframe.style.height = height
iframe.style.border = '0px'
iframe.src = ['https://www.youtube.com/embed/', id, '?rel=0&controls=0'].join('')
element.appendChild(iframe)
let div = new THREE.CSS3DObject(element)
div.position.set(x, y, z)
div.rotation.y = ry
div.name = "youtube"
return div;
}
One thing to note: While the keyboard controls are disabled, the click control still works (moves camera forward).
Related
I am new with the ElectronJS and sorry for being not be smart with these staffs yet.
I am trying to make a login page for my future company but first I need to prepare everything to able to start something.
So if someone is turn on the computer then they need to use the windows login and when logged in then my application will appear and asking for the specific pin code.
Big story, in short I need to make the application to hide the desktop on all of the screens.
I did this way in C# (because I started to do in C# the project and then I found this ElectronJS and changed my mind to use this instead):
private static Rectangle GetDesktopBounds(Form main)
{
Rectangle result = new Rectangle();
for (int i = 0; i < Screen.AllScreens.Length; i++)
{
Screen screen = Screen.AllScreens[i];
result = Rectangle.Union(result, screen.Bounds);
}
main.Top = result.Top;
main.Left = result.Left;
main.Width = result.Width;
main.Height = result.Height;
return result;
}
It works fine in C# but I need in ElectronJS and I did try to make something like this:
let x;
let y;
for (let i = 0; i < screen.getAllDisplays().length; i++) {
x += screen.getAllDisplays()[i].bounds.width;
console.log(screen.getAllDisplays()[i].bounds.width);
y += screen.getAllDisplays()[i].bounds.height;
console.log(screen.getAllDisplays()[i].bounds.height);
}
And then:
win.setSize(x, y, false);
But it doesn't put the window to all of the screens to fullscreen. It does only in the primary screen. If I console log the x and y then I get the NaN message.
So the question is: How I can make the window in fullscreen and put on all of the screens same time?
Thank you for the answers in advance.
Alright.
I found a solution. maybe not the perfect but works fine for me:
let displays = screen.getAllDisplays()
let externalDisplay = displays.map(function (display, index, displays) {
win = new BrowserWindow(
{
x: display.bounds.x,
y: display.bounds.y,
width: 1280,
height: 720,
fullscreen: true,
backgroundColor: "#363636",
frame: false,
enableLargerThanScreen: true,
skipTaskbar: true,
disableAutoHideCursor: false
}
);
})
Hey guys so I have this konva js app that has your typical background video just like the demo or close to it. I am able to play the video background and add image objects on top of it etc. Now I want a way to save the stage in its current state. So I do state.stage.toJSON() and as expected it creates a serialized JSON object. Now here's where I am hung up. when I load the stage like so state.stage = Konva.Node.create(data.stage, "container"); the stage data gets loaded (it is the correct size and so forth) yet there is no background video, no images or anything how do I fix this? I don't even know if stage.toJSON is correct but the point is I need to save it, leave the page and load it back up at a future date.
state.backgroundVideo = new Konva.Image({
image: state.video,
draggable: false
});
state.video.addEventListener("loadedmetadata", function(e) {
state.backgroundVideo.width(state.width);
state.backgroundVideo.height(state.height);
});
state.anim = new Konva.Animation(function() {
// do nothing, animation just need to update the layer
}, state.layer);
state.layer.add(state.backgroundVideo);
state.layer.batchDraw();
const canvas = document.getElementsByTagName("canvas")[0];
state.canvas = canvas;
node.toJSON() doesnt serialize image or video objects from Konva.Image attributes.
To solve the issue you can save video or image src into custom attribute:
image.setAttr('source', imageURL);
A simple string will be serialized into JSON. Then after you created a node from the JSON Konva.Node.create(data.stage, "container");
You need to find such nodes and restore image or video manually
// "video-background" is a sample here
// you can define your own selector
const videoNode = stage.findOne('.video-background');
const source = videoNode.getAttr('source');
const video = document.createElement('video');
video.src = source;
videoNode.image(video);
For more information take a look here:
https://konvajs.org/docs/data_and_serialization/Complex_Load.html
https://konvajs.org/docs/data_and_serialization/Best_Practices.html
thanks #lavrton your comments really helped me figure it out. Rather than loading the stage directly however I just saved the data from the stage used the data to rebuild the stage in the exact same way. Heres the code I used to get the data to save.
Heres my code:
const groups = state.stage.find("Group");
const stageData = [];
for (let x = 0; x < groups.length; x++) {
let g = groups[x];
let i = g.findOne("Image").getAttrs();
let group = { x: g.getX(), y: g.getY() };
let image = { x: i.width, y: i.height };
let obj = { image, group, jsonId: g.getAttr("jsonId") };
stageData.push(obj);
}
console.log("stageData", stageData);
I'm displaying a pdf stored in a Document directory in a WebView, i want to detect the changes of the pages within the pdf. I searched about it and got to know about the methods goBack() and goForward() but it didn't work for me, i think they are for switching between the files in webView but i want to detect the page switching within a current loaded pdf file. i didn't have a code for this to show as i'm still trying to figure it out. any sample code with an explanation will be really helpful. Thanks.
For this you have to scrollView to navigate particular position of page, like below.
let selectedPage: CGFloat = 2; // i.e. Go to page 5
let pageHeight: CGFloat = 1000.0; // i.e. Height of PDF page = 1000 px;
let y: CGFloat = pageHeight * selectedPage;
let pageOffset = CGPoint(x: 0, y: y)
self.webView.scrollView.setContentOffset(pageOffset, animated: true)
I've tried various web searches, but I can't seem to find anything that relates to my problem.
To quickly delineate the problem:
HTML5 Cordova iOS app (7.1 -> 8.1)
uses draggable elements
I only have issues on the iPad, not on the iPhone
The HTML5 app itself works flawlessly in a web-browser
The app itself is a biology app that teaches translation - decoding RNA into a amino acid sequence, i.e. a protein.
For this, the user sees the sequence and drags the correct amino acid onto it. The amino acid is a draggable element and the target div is a droppable. One amino acid at a time a chain is built. Please refer to the screenshot to get an idea (can't embed yet).
http://i.stack.imgur.com/S4UpF.png
In order to fit all screens, I "transform: scale" the app accordingly (fixed size is ~850x550). And to get rid of the associated jQuery bug with draggable (object movement would also change with the scaling factor), I've followed the instructions at http://gungfoo.wordpress.com/2013/02/15/jquery-ui-resizabledraggable-with-transform-scale-set/
// scaling to fit viewport
// sizing the page
var myPage = $('.page');
var pageWidth=myPage.width();
var pageHeight=myPage.height();
// sizing the iFrame
var myFrame = $('.container');
var frameWidth=myFrame.width();
var frameHeight=myFrame.height();
// scaleFactor horizontal
var horizontalScale=pageWidth/frameWidth;
// scaleFactor vertiacal
var verticalScale=pageHeight/frameHeight;
// global zoomScale variable
var zoomScale = 1; // default, required for draggable debug
// if page fits vertically - scale horizontally
if ((frameHeight * horizontalScale) <= pageHeight) {
myFrame.css({
'transform': 'scale('+horizontalScale+')',
'transform-origin': 'top',
});
// adding vertical margin, if possible
if (pageHeight > frameHeight*horizontalScale) {
var heightDifference = pageHeight - frameHeight*horizontalScale;
myPage.css({
'margin-top': heightDifference/2,
'height': pageHeight - heightDifference/2,
});
}
zoomScale = horizontalScale;
// else scale vertically
} else {
myFrame.css({
'transform': 'scale('+verticalScale+')',
'transform-origin': 'top',
});
zoomScale = verticalScale;
}
// draggable + scale transform fixes (http://gungfoo.wordpress.com/2013/02/15/jquery-ui-resizabledraggable-with-transform-scale-set/)
function startFix(event, ui) {
ui.position.left = 0;
ui.position.top = 0;
}
function dragFix(event, ui) {
var changeLeft = ui.position.left - ui.originalPosition.left; // find change in left
var newLeft = ui.originalPosition.left + changeLeft / zoomScale; // adjust new left by our zoomScale
var changeTop = ui.position.top - ui.originalPosition.top; // find change in top
var newTop = ui.originalPosition.top + changeTop / zoomScale; // adjust new top by our zoomScale
ui.position.left = newLeft;
ui.position.top = newTop;
}
I've already got a beta version on iTunes connect and it works great on an iPhone. On iPads, however, the droppable area is oddly small and shifted. That is, the div seems to be properly rendered - it is the box with the dashed border.
Has anyone else encountered a similar bug? I really have no idea how to fix it.
I have managed to solve the problem.
The issue was probably based on the viewport meta tag (0.5 scaling) interacting badly with the transform:scale resizing.
Simply removing all viewport meta arguments have solved the problem.
I use AS3 in Flex 3 to create new image and seem unable to get the exact size of the original image. percentHeight & percentWidth to 100 can do the job, but limitation in ObjectHandlers require me to set the image scale in pixel.
Any solution?
Note: this is also applicable for displaying Image original dimension without ObjectHandler control, just remove those lines that are not applicable.
After struggle hours for solution, I found my own answer thru in actionscript forum, in fact, only one solution, I surprise there was no such topic elsewhere.
private function init():void {
var image:Image = new Image();
image.source = "http://www.colorjack.com/software/media/circle.png";
image.addEventListener(Event.COMPLETE, imageLoaded);
/* wait for completion as Image control is asynchronous,
* which mean ObjectHandler will attempt to load asap
* and you are not able to get the correct dimension for scaling.
* EventListener fixed that.
*/
this.addChild(image);
//whenever you scale ObjectHandler control, the image is always fit by 100%
image.percentHeight = 100;
image.percentWidth = 100;
}
private function imageLoaded(e:Event):void{
var img:Image = e.target as Image;
trace("Height ", img.contentHeight);
trace("Width ", img.contentWidth);
var oh:ObjectHandles = new ObjectHandles();
oh.x = 200;
oh.y = 200;
oh.height = img.contentHeight;
oh.width = img.contentWidth;
oh.allowRotate = true;
oh.autoBringForward = true;
oh.addChild(img);
genericExamples.addChild(oh);
}