Google Maps V3 Keyboard Accessibility - google-maps-api-3

I'm building a map which i would like to be keyboard accessible. V3 is by default keyboard accessible but it seems you cannot access the keyboard functionality until the map has been clicked on. I added a link to select which brings you to the div tag which contains the map but this has not worked. Is there some way to activate the general map click event without actually using the mouse.
Thank you,
g

The way I usually do this is to start by making the map div focussable by adding tabindex="0" to it. That adds it into the browser's natural tab order. Then I add an event listener for keyup with a switch that calls map.panBy or map.setZoom depending on the key pressed. Here's a jQuery example, but the same can be done with google.maps.event.addListener(map, 'keyup', function() {...etc.});. jQuery makes the event.which cross-browser for you, so the code is simpler.
$('#map').keyup(function(event) {
var o = 128; // half a tile's width
switch(event.which) {
case 37: // leftArrow
map.panBy(-o,0);
break;
case 38: // upArrow
map.panBy(0,-o);
break;
case 39: // rightArrow
map.panBy(o,0);
break;
case 40: // downArrow
map.panBy(0,o);
break;
case 109: // numpad -
case 189: // -
map.setZoom(map.getZoom()-1);
break;
case 107: // numpad +
case 187: // =
map.setZoom(map.getZoom()+1);
break;
}
});

Have you tried using the focus() function?

Related

Reproduce button action on tab page

On LineDetails form we have tab page [Areas]. Under that tab page is button [Read Areas] . That button is redundant and there is no need for it, as that action which is occurred when clicked on it should be done when tab page [Areas] is opened.
[Control("Button")]
class ReadCommonAreas
{
void clicked()
{
ContractArea contractArea;
AmountMST sumContractArea;
super();
ContractLine_ds.readCommonAreas(ContractLine);
h1_h2.realValue(ContractLine_ds.h1_h2(ContractLine));
efa.realValue(ContractLine_ds.efa(ContractLine));
bfa.realValue(ContractLine_ds.bfa(ContractLine));
mfa.realValue(ContractLine_ds.mfa(ContractLine));
sumArea.realValue(h1_h2.realValue() + efa.realValue() + bfa.realValue() + mfa.realValue());
while select AreaSelector, sum(RentalValue)
from contractArea
group by AreaSelector
where contractArea.ContractId == Contract.ContractId
&& contractArea.RentalObjectId == ContractLine.RentalObjectId
{
sumContractArea += contractArea.RentalValue;
switch (contractArea.AreaSelector)
{
case AreaSelector::CommonAreaBuilding :
contractAreaBFA.realValue(contractArea.RentalValue);
break;
case AreaSelector::CommonAreaSection :
contractAreaEFA.realValue(contractArea.RentalValue);
break;
case AreaSelector::PrimaryArea, AreaSelector::SecondaryArea :
contractAreaH1_H2.realValue(contractArea.RentalValue);
break;
case AreaSelector::CommonAreaFixed :
contractAreaMFA.realValue(contractArea.RentalValue);
break;
}
}
contractAreaSum.realValue(sumContractArea);
}
}
How to adapt this, when is clicked on Areas to show info like when it's clicked on Read Areas ?
And after that, I will remove Read Areas button.
Just make the Read Areas button Visible = No to hide it.
Then on the Areas tab page, override the pageActivated() method and do ReadAreas.clicked(). That way the core code stays in tact.
The thing you should consider is if the user tabs off/on the Areas page, every time it will click the Read Areas button...not sure if that's a problem or not.
Use event handlers and the like where appropriate. This is just off the top of my head general approach.

Select a game object and perform actions using GUI.Button (EventTrigger)

I am currently working on a strategy game and I want to preform actions using GUI.Button on game objects. I am using ray cast and mouse click to select the object however when I click on GUI.Button to take out another action the button disappears. I want to use that button to open up another GUI.Box to show some descriptions.
I know why the button is disappearing, it is because I am projecting the ray cast to my button clicks in the update function but how can I avoid this? I also know that I have to use EventTrigger however I am not familiar with javascript event trigger, I searched online but I couldn't find any helpful javascript.
Screenshots:
Here is my script:
#HideInInspector
var isCalled:int = 0;
#HideInInspector
var scWidth:int = 0;
#HideInInspector
var scHeight:int = 0;
function Start () {
scWidth = Screen.width;
scHeight = Screen.height;
}
function Update () {
if (Input.GetMouseButtonDown(0)) {
var ray : Ray = Camera.main.ScreenPointToRay (Input.mousePosition);
var hit : RaycastHit;
if (Physics.Raycast (ray, hit)) {
if (hit.collider.tag == "House") {
isCalled = 1;
} else{
isCalled = 0;
}
}
}
}
function OnGUI(){
if(isCalled==1)
GUI.Button(Rect(scWidth/2,(scHeight/2)+(scHeight/4),120,120), name);
}
}
If I understood you right, the problem is that when you click on button the raycast is fired up before button click and you select different object or no object at all and button disappears or reappears but for another object, what you need to do is check if you clicked on GUI and if yes don't project the raycast that selects the objects. Here is how you are gonna do it.
var selectedUI : GameObject = EventSystem.current.currentSelectedGameObject;
if (Input.GetMouseButtonDown(0) && selectedUI) {
var ray : Ray = Camera.main.ScreenPointToRay (Input.mousePosition);
var hit : RaycastHit;
if (Physics.Raycast (ray, hit)) {
if (hit.collider.tag == "House") {
isCalled = 1;
} else{
isCalled = 0;
}
}
}
I work in C#, so I might have done some syntax errors, but the logic is right.
There is a good trick when using legacy GUI system to avoid raycast when mouse is over GUI elements. Using tooltip to controll if you may cast your ray =)
Something like this (I also don't work with US so may I it needs some work):
var hover : String;
function OnGUI(){
if(GUI.Button (Rect (10,10,100,20), "My Button"));
hover = GUI.tooltip;
function Update () {
if(hover != "") {
// raycast logic
}
}
If you need to avoid raycast when your "popUp" window/panel is shown but you don't want a tooltip on it you may approach using a MouseOverGUI manager too.
It is just a static or singleton holding a boolean that you will set true when your mouse is over some rect that you don't want to cast rays using Rect.Contains(Event.current.mousePosition) and to false whenever it runs out of this rect.
Use this bool with or without tooltip var to allow raycast:
if(!MouseManager.MouseOverGUI) {
// raycast logic
}
Note that creating your rect on each OnGUI cycle will difficult to catch it and control the MouseOveGUI. Also it is a bad practice for performance because OnGUI runs more than once per frame so I'll suggest you to create you rects just once (recalculate it just when needed) and pass it to your GUI elements ;)
I think the easiest way is to create a GameObject(input blocker) which is not visible but have a collider. Place it in between the camera and level objects and deactivate it. When you select a GameObject using Raycast you enable that input blocker GameObject and place it around the area of selected GameObject and GUI. Then you have to ignore the selection if raycast is collided with Input Blocker. When you deselect the Gameobject then you deactivate input blocker
You should also maintain current state of the game for example:
enum State
{
NothingSelected = 0,
GameobjectSelected,
BigMenuOpen
}
State currentState;
So according to state you can define the behavior on mouse click. Like if Full screen menu is Open then raycast does not fire.

Hide Follow button Twitter Card Blockquote

I need to hide the follow button on Twitter card using :
<blockquote width="581" height="250" class="twitter-tweet"><p></p></blockquote></div>
How do you hide the follow button on a card ?
Thanks
The twitter widget expands into an iframe, so you would have to wait until it is fully loaded. Afterwards you could either fully remove the button or hide it. You will need a little JavaScript. The problem is that you would have to wait until it is loaded. I don't know how to catch when the tweet is fully loaded so I will be checking for the button every 100 milliseconds until it appears. You could of course change that to fit your needs.
JS:
window.setTimeout(removeButton, 100);
function removeButton() {
var iframe = document.querySelector('iframe.twitter-tweet');
if(iframe == undefined) {
window.setTimeout(removeButton, 100);
return;
}
var button = iframe.contentDocument.querySelector('.follow-button.profile');
if(button == undefined) {
window.setTimeout(removeButton, 100);
return;
}
//Hide
button.style.display = 'none';
//Or remove
button.parentNode.removeChild(button); //Note: Not using button.remove() because of compatibility
}
This of course right now only works for one single tweet. If you wanted to remove multiple Follow buttons, you would have to modify this script a little bit.

How to detect QTableWidget scroll source (code itself/user (wheel)/user (scrollbar))?

I'm writing a program using Qt 4.8 that displays a table (QTableWidget) filled with filenames and file's params. First an user adds files to the list and then clicks process. The code itself updates the contents of the table with simple progress description. I want the table by default to be scrolled automatically to show the last processed file and that code is ready.
If I want to scroll it by hand the widget is being scrolled automatically as soon as something changes moving the viewport to the last element. I want to be able to override the automated scroll if I detect that it was the user who wanted to change view.
This behavior can be seen in many terminal emulator programs. When there's a new line added the view is scrolled but when user forces the terminal to see some previous lines the terminal does not try to scroll down.
How could I do that?
Solution:
I created an object which filters event processed by my QTableWidget and QScrollBar embedded inside. If I spot the event that should turn off automatic scrolling I just set a flag and stop scrolling view if that flag is set.
Everything is implemented inside tableController class. Here are parts of three crucial methods.
bool tableController::eventFilter(QObject* object, QEvent* event)
{
switch (event->type())
{
case QEvent::KeyPress:
case QEvent::KeyRelease:
case QEvent::Wheel:
case QEvent::MouseButtonDblClick:
case QEvent::MouseButtonPress:
case QEvent::MouseButtonRelease:
_autoScrollEnabled = false;
default:
break;
}
return QObject::eventFilter(object, event);
}
void tableController::changeFile(int idx)
{
[...]
if (_autoScrollEnabled)
{
QTableWidgetItem* s = _table.item(_engine.getLastProcessed(), 1);
_table.scrollToItem(s);
}
[...]
}
void tableController::tableController()
{
[...]
_autoScrollEnabled = true;
_table.installEventFilter(this);
_table.verticalTableScrollbar()->installEventFilter(this);
[...]
}
Thanks for all the help. I hope somebody will find it useful :)
Subclass QTableWidget and overload its wheelEvent. You can use the parameters of the supplied QWheelEvent object in order to determine if the user scrolled up or down.
Then use a simple boolean flag which is set (or reset) in your wheelEvent override. The method which is responsible for calling scrollToBottom() should then consider this boolean flag.
You will have to find a way to figure out when to set or reset that flag, e.g. always set it when the user scrolls up and reset it when the user scrolls down and the currently displayed area is at the bottom.
connect(_table->view()->verticalScrollBar(), &QAbstractSlider::actionTriggered, this, [this](int) {
_autoScrollEnabled = false;
});

Implement right-clicking context menu using PopupControlExtender?

Is it possible to implement a context menu which appears when users perform a right-click on an item of interest using the PopupControlExtender?
From investigations so far, it seems like the PopupControlExtender only works with left-clicks or the other choices are to write your own control or implement the entire solution in jQuery.
If it is possible to do a right-click with the PopupControlExtender, may I get some code examples?
Just have a hidden button on the form for the PopupControlExtender, then capture the right click and call document.getElementById('bla').click();
JS:
$('#element').mousedown(function(event) {
switch (event.which) {
case 1:
//alert('Left mouse button pressed');
break;
case 2:
//alert('Middle mouse button pressed');
break;
case 3:
document.getElementById('bla').click();
break;
default:
//alert('You have a strange mouse');
}
});
Markup:
<asp:button id="bla" runat="sever" style="display:none"/>
.....PopupControlExtender code...etc

Resources