I just started trying webgl with tQuery and well..
the simpliest code is:
var world = tQuery.createWorld().boilerplate().start();
var object = tQuery.createCube().addTo(world);
now I want to emit some data to node if there's been clicked on that cube,
but it doesnt really work, I tried different versions like:
$('canvas').click(function(e){
socket.emit('foo', { msg: 'cube clicked'});
});
up to
$(tQuery('cube')).on('click', function(e){
socket.emit('foo', { msg: 'cube hovered'});
});
but it's not only triggered if I click on the cube, it's also triggered if I click beside the cube -> it's triggered if I click anywhere on the tQuery surface
how to solve that?
greets
tQuery('cube').on('click', function(e){});
this should do it
Related
I am trying to display a popup onclick in Mapbox GL JS when the user clicks a polygon (It's a weather warning box during a Flash Flood Warning).
I have been using this example from Mapbox as a base, and -
This is my JSON file that I am trying to pull data from.
When I click the polygon, there is no popup. When I mouseover it, the cursor changes - so I know the basic possible issues like filename and directory structure are right.
My code below was modified from the example. I am trying to load the "description" of each polygon : (My map is called "topleftmapbox" and the JSON id is "FFWWarning")
// When a click event occurs on a feature in the places layer, open a popup at the
// location of the feature, with description HTML from its properties.
topleftmapbox.on('click', 'FFWWarning', function (e) {
var coordinates = e.features[0].geometry.coordinates.slice();
var description = e.features[0].description;
// Ensure that if the map is zoomed out such that multiple
// copies of the feature are visible, the popup appears
// over the copy being pointed to.
while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) {
coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360;
}
new mapboxgl.Popup()
.setLngLat(coordinates)
.setHTML(description)
.addTo(topleftmapbox);
});
// The following code below runs correctly and changes the cursor on mouseover.
topleftmapbox.on('mouseenter', 'FFWWarning', function () {
topleftmapbox.getCanvas().style.cursor = 'pointer';
});
// Change it back to a pointer when it leaves.
topleftmapbox.on('mouseleave', 'FFWWarning', function () {
topleftmapbox.getCanvas().style.cursor = '';
});
I have a feeling that my issue is somewhere in this part of the code :
var coordinates = e.features[0].geometry.coordinates.slice();
var description = e.features[0].description;
I am still new with Mapbox and I have tried looking through here and various sources online to fix this. I am hoping the issue is just that I have the description variable set wrong and that I am missing something simple.
I debugged the code that you provided and found that variable coordinates was containing an object having array of lat-lng.
Modifying that part should fix the issue.
var coordinates = e.features[0].geometry.coordinates[0][0].slice();
In coordinates[0][0], second index determines the position of popup.
Here is the working code. https://jsbin.com/suzapug/1/edit?html,output
I'm trying to get the selected item with a specific id from outside of the kendo treeview. Basically, I'm writing a js function to try to find out which node is selected. Is there a way to find out which node (and it's datasource properties) can be extracted?
I can get the node data if the an event listener passes the event but can't figure out a way to get to that node without the event listener.
Once I get that data, I would like to update some button links to go to the next item in the node.
//get node WITH listener:
function getNode(e){
var nodedata = $('#treeName').getKendoTreeView().dataItem(e.node).id;
console.log(nodedata);
}
//BUT I want to find out from outside of Kendo treeview with something like this:
function getNode() {
var getSelectedId = $('#treeName').getKendoTreeView().getCurrentSelectedItem().id
console.log(getSelectedId);
}
It's pretty straightforward. Just use
$('#treeName').data("kendoTreeView").select().data().id
I'm writing my own ESC handler because I need to do other actions when ESC is pressed, specifically I need to manage where focus goes for keyboard-only users. I have it working for all menus and some dialogs (both of which are using jQueryUI) but I'm having problems with dialogs that open on top of other dialogs (confirmation dialogs).
I'm using a Backbone View and adding my keydown handler on dialogcreate. this.$el.on('dialogcreate', this.bindKeydownEvent);
My handler:
bindKeydownEvent: function(ev, ui) {
var self = this;
this.$el.dialog().on('keydown', function(evt) {
if(evt.keyCode === $.ui.keyCode.ESCAPE) {
self.$el.dialog("close");
if(self.options.closeFocusEl) {
$(self.options.closeFocusEl).focus();
}
evt.stopPropagation();
}
});
}
I've checked and this.$el.dialog() is the correct dialog when the second dialog calls this.bindKeydownEvent but for some reason the keydown handler is not being triggered no matter what I press in the dialog (Tab, Space, Enter, random letters, etc).
Any idea what I'm doing wrong or have a better way I could bind the keydown event?
EDIT:
I just noticed that this is also happening in some first-level dialogs. It looks like the only difference is the way we get the template and therefore create the interior of the dialog. In our Alert and Confirmation dialog classes, we define the template as an attribute on the object like this: template: _.template("<div><%= o.content %></div>"). In other views (in which the keydown binding works) we build the child elements and add them to the DOM of the dialog, set the template in the initialize function
this.options.template = 'navigation/CreateNewDialog.template';
or set it when we call the dialog
var closeConv = new views.CloseConversationDialogView({
confirm: this.closeConversationConfirmed,
content: i18n.t("closeConversationInput"),
template: "conversation/CloseConversationDialog.template"
});
closeConv.render();
Is there a reason that creating the template inline as an attribute on the view would not bind keydown correctly?
To understand why your event handler isn't being triggered you need first understand how event delegation works.
The key to event delegation in that events bubble up the DOM. So when you bind your event using this.$el.dialog().on('keydown',..., what you basically doing is listening to any keydown event that is triggered on your $el or it's descendants. In this case being that your second dialog isn't a descendant of your $el it's events won't bubble up to it and therefore don't trigger your handler.
To work around this you can either bind directly to your second dialog, or instead bind to a exisitng higher level element like the document. For example
$(document).on('keydown', '.myDialog', function() {...
The only thing my original attempt was missing was "widget". The widget method, according to api.jqueryui.com,
Returns a jQuery object containing the generated wrapper.
I don't see any documentation on what exactly $('.selector').dialog() returns but apparently it is not the same as $('.selector').dialog("widget"). I also changed on('keydown'... to just use the jQuery keydown instead.
bindKeydownEvent: function(ev, ui) {
var self = this;
this.$el.dialog("widget").keydown(function(evt) {
if(evt.keyCode === $.ui.keyCode.ESCAPE) {
self.$el.dialog("close");
if(self.options.closeFocusEl) {
$(self.options.closeFocusEl).focus();
}
evt.stopPropagation();
}
});
}
I'm trying to attach an event handler to the keyDown event in a canvas element. Here is a simplified version of my code.
class CanvasFun{
CanvasElement canvas;
CanvasFun(this.canvas){
print("Game is loading!");
this.canvas.onKeyDown.listen(handleInput);
}
void handleInput(e)
{
//breakpoint is never hit
print(e.keyCode);
}
}
I've removed some of the drawing code. In my main function I simply query the canvas element and pass it to my CanvasFun constructor.
I've also tried doing it this way:
void main() {
var canvas = query("#Game");
canvas.onKeyDown.listen(handleInput);
var canvasFun = new CanvasFun(canvas);
}
void handleInput(e)
{
print(e.keyCode);
}
The reason why the event is not firing is because the focus is on the document (or some other element like an input, for example). And in fact, canvas element even when focused does not fire an event. Some elements do, like input elements.
The solution is to listen to key down events from the document or window:
window.onKeyDown.listen(handleInput);
document.onKeyDown.listen(handleInput); // You already noticed this worked.
John McCutchan has written a nice Dart package to help handle keyboard input. You can read more about it here: http://dartgamedevs.org/blog/2012/12/11/keyboard-input/
Note that this library helps you handle input "correctly". You do not want to do any "work" in the input handling, instead you simply want to register that a key was pressed. You can check the state of any key presses inside of your requestAnimationFrame callback.
Hope that helps!
There exists a workaround to get the canvas-element accept KeyboardEvents:
Problems handling KeyboardEvents on DartFlash
Once you add the tabindex-attribute to your canvas-element, it can get the focus and then it will receive KeyboardEvents.
It looks like I can get it to work if I register the event on the document rather than the canvas element.
document.onKeyDown.listen(handleInput);
I am developing an application using Backbone.js and have run into an issue where any instance of a view, excluding the first, fails to bind a click event to the ".playVideo" when accessed from an iPad. The same code executes as I would expect on desktop browsers.
I am creating a simple carousel that can scroll left/right and when a button is clicked I trigger another event to create a video player on the page. The first two events which bind to the .leftArrow / .rightArrow class do work on the second instance of the view; however, the click .playView binding will only work on the first instance.
While debugging, I also added a new binding 'click a' and observed that the additional instances don't execute an event for that item as well.
Simplified Code
Pod = Backbone.View.extend({
events: {
'click .leftArrow' : 'previous'
,'click .rightArrow' : 'next'
,'click .playVideo' : 'loadPlayerUI'
}
,initialize:function()
{
// Do stuff
return this;
}
,render:function()
{
// Draw stuff
return this;
}
,loadPlayerUI : function(event) {
event.originalEvent.preventDefault();
console.log("Hit");
return this;
}
});
In the above example the console message will not appear for any instance of this view except the first one created.
Question
What may I be doing incorrectly?
I appreciate your help.
Thank you.