TV ergonomics in Flex - apache-flex

Im having fun toying with AIR and want to use it to create an application for my TV, but Im coping with a serious & dumb problem : TV ergonomics. Indeed, without a mouse, it is all about focus on elements and moving this focus in a natural fashion.
In HTML this is handled by the browsers perfectly, but in ActionScript Im having a real hard time ! For instance, I don't even know how to have an element on autofocus, so that when I load the app there is already something to click on (without it I just can't interact with my app at all!).
Do you have any idea on the best ways to create a listener for the remote controller arrows and OK button (should be enough) so that I never get stuck in the app ?
So whether you have already struggled with that or if you simply happen to know how to play with the focus and setFocus() parts of Flex, your help is very welcome !

I recommend you look at the Google TV Flash template. It's all about controls and navigation. I'm not sure if this works for Flex as I have not done any gtv development yet.

Related

Audio unable to play in Aframe unless the inspector is opened

I have been working on adding background music to a Glitch project. I followed the Aframe.io documents to create a sound component and set it to automatically play upon running, however, when I try to run the project, the sound does not play automatically on my laptop. I have to open the Aframe inspector and un-pause my project for the music to begin. For some reason, I have not encountered this issue when I tried the same project on my phone. The sound played as expected once the program is up and running. I am not sure what is causing the sound to malfunction but any help is greatly appreciated. Here is the project I am working on: https://glitch.com/edit/#!/animation-animate?path=index.html%3A15%3A23
when working with sounds natively with Aframe, I had the same problem and one of the recommendations that I can give you is to play sounds with the HowlerJS sound library, which is compatible with most frameworks and also compatible with A-Frame
I share their page and the documentation, this library is very easy to use and implement to the project
https://howlerjs.com/
https://github.com/goldfire/howler.js#documentation
Autoplay audio on most modern browsers requires user interaction before enabling audio. You can put a div in front of your scene that upon click starts playing your background audio.
Check out a related SO question / answer for video autoplay that should help:
Autoplaying videosphere from A-frame is not working on any browser(Safari/Chrome)
Another user on A-Frame discord provided this example demo:
https://aframe-autoplay-background-music.glitch.me/

A-Frame - VR Mode mouse control / move in browser

I'm really new with A-Frame / Web VR. I'd like to ask you when I am on my mobile in VR mode how can I prevent the controll / camera move? For example when I switch to VR mode I want to use my usb mouse for moving just like in "normal mode" and not the device's sensor. Is it possible?
Thanks.
I don't think this is currently possible. Another potential issue with this approach is that it will likely cause simulator sickness:
The most important guideline in designing for virtual reality is to always maintain head tracking. Never stop tracking the user’s head position inside of the application. Even a short pause in head tracking will cause some users to feel ill.
https://designguidelines.withgoogle.com/cardboard/designing-for-google-cardboard/physiological-considerations.html
That said, if you're purpose for this functionality is for spectating on a 2d screen, A-Frame 0.8.0 allows you to add a spectator camera:
https://aframe.io/docs/0.8.0/components/camera.html#properties
There are no tutorials for this yet, but you could try adding asking another question here or on a-frame slack on how to get it up and running.

How do I make a mobile-friendly popup on my website?

Is there a simple way to trigger a mobile OS's native pop-up/alert/etc. from some form of web code? I'm writing an ASP.NET mobile web page and I'd like to, for example, have the iPhone's UIAlertView appear.
EDIT: What I'm looking for is not the method with which to detect which mobile browser is accessing the site (I already know how to do that). If the code to trigger a pop-up that will look nice in an Android browser is different than the code to trigger a pop-up that will look nice in an iPhone browser, I can simply throw in a switch statement that redirects the user to the pop-up that corresponds with their browser. I'm trying to find the html/javascript/asp.net code which will create a mobile-friendly pop-up, either in general or for the various popular mobile web browsers specifically.
Don't know whether there is any pre-built functionality in .NET that can achieve this, but you can surely write one yourself.
You can write a method, that returns the code for your popup, based on the user OS (simple switch statement should do).
EDIT after taking a short nap:
I believe you should reconsider using popups. They are quite annoying even on desktop browsers and many people block them automatically. Probably every blog about accessibility will tell you, that you should keep mobile version of your website as simple as possible because of various compatibility issues that you can run into.
Instead, try to think about some interesting way to incorporate messages for users in a different and appealing way, that won't disturb anybody.
What I do is use a div popup (that floats ontop of the page) and eighter make a big close button or set at timeout to remove it.
jquery mobile is a good place to start.

How accessible is Fullcalendar?

I'm having problems making FullCalendar fully accessible. I'm using the default month view and can't access the next, previous, and today buttons on the top right without using a mouse. If I run a screen reader, I can access those buttons but not without running the screen reader.
And on another note, I currently am using tool tips that pop up when you mouse over an event title to display more information. If anyone has any tips on how to make those accessible to a screen reader or accessible without a mouse, I'd greatly appreciate it!
Regarding the buttons, I would advice that you write new buttons if accessibility is important. These buttons you could then hook up to your own javascript functions that moves to previous and next.
Check out this documentation example
Regarding the second problem, I think that's the same problem not just for physically impaired but also for things like mobile browsers. My tip would be to avoid onmouseover if the information that appears is really important.

Disable Focus to Browser

Can any one tell how to disable focus to a browser.
Hi i am currently working in .net application and i need to disable the tab focus to browser objects such as toolbars,address bar, since the user will not be using these components often
Thank you
Please don't do this, it breaks what the user expects a webpage to do. Messing with the fundamental behavior breaks several things:
My tab button and where I expect it to go
Screen readers for the disabled
Trust in your application
In some cases, you need to ask why? before asking how?, this is one of those. Anything that behaves differently from the other 99.9999% of the web is broken in the eyes of your user.
Well, I agree with Nick Craver. If you have to disable due to some crap requirements, then try opening a new window without toolbar, editable address bar etc and load the page inside the newly opened window.

Resources