Catching Input Events in WebGL build - unity3d

When running a Unity project as a WebGL app is there way to catch the site's input events (e.g. keypress) once the application is running?
Currently once the Unity app launches it eats keyboard events so that I can't type in to my text boxes on the page. The best workaround I could come up with is to use jQuery to directly read the keypress event:
$('#input_message').keypress(function(evt){
event.preventDefault();
var code = evt.keyCode || evt.which;
var key=String.fromCharCode(code);
$('#input_message').val($('#input_message').val() + key);
});
};
This works for my immediate needs but I'm hoping there is a cleaner way through the Unity API.
Versions
Chrome v43
Unity 5.1.1f1

I would make this a comment if I had enough points but:
You could have your game send the inputs to your site via websockets. I've done similar things with Azure + SignalR

This question has no solution, so if someone comes up here, there is a short path:
By default, Unity WebGL will process all keyboard input send to the page, regardless of whether the WebGL canvas has focus or not. This is done so that a user can start playing a keyboard-based game right away without the need to click on the canvas to focus it first. However, this can cause problems when there are other HTML elements on the page which should receive keyboard input, such as text fields - as Unity will consume the input events before the rest of the page can get them. If you need to have other HTML elements receive keyboard input, you can change this behavior using the WebGLInput.captureAllKeyboardInput property.
This was taken from here.
The property you are looking for is WebGLInput.captureAllKeyboardInput.

Related

WebPageTest :: How can Start Render be after the load event?

What can cause the start render to be delayed even after the load event has fired?
Look at this webpagetest result
This is most probably a bug. For the moment, the iPhone instance on WebPageTest is quite recent and the author is still improving it:
The iOS support is just becoming stable though it's still under VERY active development so don't be surprised if there are a few rough edges (and a lot more limitations than the android testing).
- Patrick Meenan, 09-09-2015
The android tests are much more reliable.
If you check the page you tested without javascript (F1 > Disable Javascript in Chrome DevTools), you can see that most images are lazy-loaded, which mean they are loaded via a JS script checking if the images are in the viewport. As you can see, without JS the load time line is well after all assets loaded.
Also for other assets, like JS, you can add an async or defer attribute to de-synchronize your scripts loads.
Finally, some scripts can be even deliberately loaded after the load event using an attachment on the window load event to write <script> tags in the body when it's triggered as loadJS do for example.
You should read that by the way to better understand how rendering and events timing work.

Is there any way to find out whether we have opened page in Touch UI or classic UI in javascript

Is there any way to find out whether we have opened this page in Touch UI or classic UI in javascript
like we have in classic UI to find out whether page is in edit mode or design mode.
CQ.WCM.editMode
Please suggest.
If you are not restricting to determine ui mode within javascript, here are other ways:
If you have a model class for your component, check for this
condition:
AuthoringUIMode.TOUCH.equals(AuthoringUIMode.fromRequest(getRequest()))
To check from JSP, use this code:
Placeholder.isAuthoringUIModeTouch(slingRequest)
You can simply read the cookie value of cq-authoring-mode. It can either be CLASSIC or TOUCH.
var isTouch = $.cookie('cq-authoring-mode') === 'TOUCH'
The other way would be to look for an outstanding JS objects like Granite.UI. This might be painful in the future when the clientlib that created the object will be attached to the other mode (e.g. via an AEM hotfix or unconsciously during the development).
var isTouch = Granite.UI != null

Stopping Ember.js Controller

My question is very basic on one hand but on the other hand the general situation is more complex, plus I cannot really get any working sample.
I'm developing/maintaing a web-application which is currently in transition from GWT code base into Ember.js.
Most of the newer code already relies on Ember.js and I think it's really awesome.
The problem is we cannot use Ember Router as all the request are being handled by the GWT.
In order to enabled the application run in this unusual configuration we have special JavaScript files that create our Ember main objects (Controllers & Models) for us.
As you can imagine navigation between tabs is cumbersome and is handled by GWT who creates Ember objects when needed. We are in transit toward a brave new world Ember Router and all.
But in the meantime, this is the problem I'm facing right now.
The user clicks a link which opens a page that contains some Ember based table.
The data is retrieved form the server using some Ajax code. Upon success it spawns a forEach loop which tries to pushObject all the received date into our Ember based components.
My problem happens when the user quickly switches between tabs. In this case the first list of object has not finished rendering yet and suddenly there's a new set of objects to handle. This causes Ember to throw errors like:
"Uncaught Error: Cannot perform operations on a Metamorph that is not in the DOM. "
and
"Uncaught NotFoundError: An attempt was made to reference a Node in a context where it does not exist."
Is it possible to prevent the loop from trying to render?
I've tried checking if the controller in question is already inDOM and it is, is there a way to notify Ember this object is no longer valid?
Sorry for a lengthy question and lack of running sample.
I'd probably modify the switch tab code to only execute afterRender has completed, that way you aren't mucking with ember objects while they are being used.
Ember.run.scheduleOnce('afterRender', this, function(){
// call GWT switch tab routine
});
Thank you Daniel and Márcio Rodrigues Correa Júnior. eventually what I did is to add a patch that would check the current context of the application (in my case the currently selected tab). If upon receiving the AJAX response the application is in the correct context (meaning the user haven't change the tab) go on. Otherwise just ignore the response and do not try to render it.
Now it seems to be working

Is there a way to detect if a browser window is closed?

Is there a way to detect if a browser window is closed using GWT. For example a window opened through GWT using this code:
Window.open("some_url", "__blank", null);
I need to detect wether this windows opened through gwt is closed. Is there a way to do that?
I think, it is a real problem making it cross-browser.
GWT has
Window.addCloseHandler(new CloseHandler<Window>() {
public void onClose(CloseEvent<Window> windowCloseEvent) {
}
});
Which handles the onunload event(occurs before the browser closes the document).
However it does not work for handling browser close event with all browsers, because when refreshing the page, this event is fired as well.
Since GWT also generates JavaScript see this article: Window Close Event of Browser
Here is conclusion of that article:
Conclusion
As we have already discussed that there is no 100% fool proof way to
detect the browser close event in a lot of cases, the above technique
can fail. For example if the user kills the browser's process from
task manager, there could be many more cases. Yet in a lot of cases,
this technique can be handy. Best of luck and happy programming.

Flash wmode="direct" issue on FB canvas app

I develop a FB app using Flash using wmode="direct" (for 3D graphics).
In Internet Explorer, every time I popup any FB dialog (e.g Purchase Credits dialog), the flash disappears and when the dialog is closed, the flash does not re-appear...
I tried to set the visibility after dialog is closed:
http://developers.facebook.com/docs/appsonfacebook/tutorial/ (under "Special Considerations for Adobe Flash developers"), but it didn't work.
I've also tried the use FB.Init hideFlashCallback:
http://developers.facebook.com/blog/post/555/ (under "Detecting visibility of Flash objects in Canvas apps"), but it doesn't seem to call the callback function...
Any one had the same issue and manage to make it work?
Any other suggestions?
P.S - I use swfobject to embed the SWF file.
Thank a lot!
Roei
UPDATE: I removed the appId param from the FB JS url:
<script type="text/javascript" src="http://connect.facebook.net/en_US/all.js#appId=XXXX&xfbml=1"></script>
and now the hideFlashCallback is executed, but still - the flash does not re-appear...
I've updated the section Special Considerations for Adobe Flash developers because the code snippet was a bit out-of-date.
The new snippet should give you an idea of how to use the hideFlashCallback, whose semantics have changed since that now out-of-date blog post, in that the function now takes a flash element as an argument. (Unfortunately, we haven't redocumented it yet, but will soon). One thing to note is that the callback does not currently work on IE8, but will after a fix gets pushed next Tuesday.
That said, it should work without that callback. It may be caused by a javascript fatal that stops script execution before the re-showing happens. Look in your javascript console to see if you see any errors.
Otherwise, if you can give me the canvas URL for your application, I can look into it.
Did you try it with other wmodes? what you can try is actually remove the div where you write your flash to, add it with innerHTML and run the swfobject.embed again