I work with Openlayers 2.x and I have zoomstart event
map.events.register('zoomstart', map, function(e) {
// 1. OpenLayers.Event.stop(event);
// 2. return ;
// 3. e.preventDefault();
}
});
My way (1,2,3) not working and event does not stop and change zoom level. Can anybody help me?
The zoom event is triggered by the zoomBarUp function in PanZoomBar control, see: http://trac.osgeo.org/openlayers/browser/trunk/openlayers/lib/OpenLayers/Control/PanZoomBar.js and the line
this.map.zoomTo(zoomLevel);
One way to prevent zoom for zoom levels above 13 would be to override this function, which you can do by adding your own version, either in a standalone js file or by using prototype within you OpenLayers init function, ie, after OpenLayers has loaded.
OpenLayers.Control.PanZoomBar.prototype.zoomBarUp = function(evt){
//copy here the code from the actual function
if (!OpenLayers.Event.isLeftClick(evt) && evt.type !== "touchend") {
return;
}
//rest of code .....
//put in your check for zoom level here before calling this.map.zoomTo(zoomLevel);
if(this.map.zoom<13){
this.map.zoomTo(zoomLevel);
this.mouseDragStart = null;
this.zoomStart = null;
this.deltaY = 0;
OpenLayers.Event.stop(evt);
}};
There may be a more elegant way, but this should work.
Related
I'm trying to detect when a marker if found/lost in ar.js, while using a-frame.
From what I see in the source code, when the marker is found, a 'getMarker' event should be fired, moreover artoolkit seems to dispatch a markerFound event.
I tried to listen to those events on the <a-scene>, or on the <a-marker>, but it seems I'm either mistaken, or i need to get deeper to the arController, or arToolkit objects.
When i log the scene, or the marker, i only get references to the attributes, which don't seem to have the above objects attached.(like marker.arController, or marker.getAttribute('artoolkitmarker').arController)
Did anybody tried this and have any tips how to do this ?
PR303 introduces events when a marker is found and lost
markerFound
markerLost
You can use them by simply adding an event listener:
anchorRef.addEventListener("markerFound", (e)=>{ // your code here}
with a simple setup like this:
<a-marker id="anchor">
<a-entity>
</a-marker>
example here.
Please note, that as of sep 18', you need to use the dev branch to use the above.
ORIGINAL ANWSER - in case you want to do it manually
Detecting if the marker is found is possible by checking if the marker is visible when needed (other event, or on tick): if(document.querySelector("a-marker").object3D.visible == true)
For example:
init: function() {
this.marker = document.querySelector("a-marker")
this.markerVisible = false
},
tick: function() {
if (!this.marker) return
if (this.marker.object3D.visible) {
if (!this.markerVisible) {
// marker detected
this.markerVisible = true
}
} else {
if (this.markerVisbile) {
// lost sight of the marker
this.markerVisible = false
}
}
}
As adrian li noted, it doesn't work with a-marker-camera, only with a-markers
I went with a dirty hack diving into the internals, bear in mind that what I've provided might not suffice because the event get's called every time the marker is found, sadly I couldn't find an event to hook into for markers being lost.
const arController = document.querySelector("a-scene").systems.arjs._arSession.arContext.arController;
arController.addEventListener("getMarker", (evt) => {
const markerType = evt.data.type;
const patternType = 0;
//console.log("onMarkerFound!!");
if (markerType == patternType) {
//console.log("onMarkerFound out pattern!!");
//Do stuff...
}
});
I'm facing shieldUI wicket integration and I'm trying to get base 64 image dfom a shieldUi chart using this tutorial: https://www.shieldui.com/documentation/javascript.chart/exporting
I tried to run the code below:
function render_image_box(chart_id) {
var result = false;
var svg_chart = $("#" + chart_id);
if (svg_chart) {
var chart = svg_chart.swidget();
if (chart != null) {
chart.exportToImage();
result = true;
}
}
// setTimeout(find_image_source, 100) // wait before continuing
return chart;
}
in both the $(document).ready(..) and $(window).load(...) functions and the load event raised from the library (https://www.shieldui.com/documentation/javascript.chart/events/load) as well.
In none of these function chart is rendered yet, so the svg_chart.swidget() returns null.
Is there any other event to use to accomplish my goal or any other way to get the image source?
Thanks in advance,
Laura
You can access the chart instance using .swidget() only after you have initialized it with the .shieldChart() constructor.
To make your code work, you should also turn off animation for the chart, because right after you initialize it, the rendering will not be over and there will be no image contents.
Here is a complete JSBin to get you started...
I would like to take the mousewheel event on an element, but have't found anything on the documentation. Do you have an example of the kind?
I'm not sure of any direct Snap methods to use mousewheel, but I guess you can just add a mousewheel listener...this example works in Chrome, you may need to tweak and add test case for different browsers.
var s = Snap(400, 620);
var c = s.circle(30,30,30);
if( (/Firefox/i.test(navigator.userAgent)) ) {
s.node.addEventListener("DOMMouseScroll", mouseWheelHandler, false);
} else {
s.node.addEventListener("mousewheel", mouseWheelHandler, false);
}
function mouseWheelHandler (ev) {
ev.preventDefault();
console.log( ev.target.localName );
}
Edit: Have updated to check for firefox as well.
jsfiddle example
My question is, Why doesn't the click event work when other events do work using the same code? Consider the following code examples from http://www.pricelearman.com/__dev (2 underscores)
For Square 2 using "click" event
function showWorkPane() {
var _workID = document.getElementById("workID");
_workID.addEventListener("click", showWorkPaneHandler, false);
}
function showWorkPaneHandler(e) {
var _workPane = document.getElementById("workPane");
e.preventDefault();
_workPane.style.display = "block";
}
Clicking on the link "Work" does not show the workPane.
For Square 3 using "mouseover" event
function showAboutPane() {
var aboutID = document.getElementById("aboutID");
aboutID.addEventListener("mouseover", showAboutPaneHandler, false);
}
function showAboutPaneHandler(e) {
e.preventDefault();
var v = document.getElementById("aboutPane");
v.style.display = "block";
}
Rolling-Over the link "ABOUT" shows the aboutPane hover effect as expected
For Square 4 using "mousedown" event
function showConnectPane() {
var connectID = document.getElementById("connectID");
connectID.addEventListener("mousedown", showConnectPaneHandler, false);
}
function showConnectPaneHandler(e) {
e.preventDefault();
var v = document.getElementById("connectPane");
v.style.display = "block";
}
Holding mouse down on the link "CONNECT" shows the connectPane as expected
What am I missing about the click event. It's counterintuitive to me that it would not follow the same pattern as the other mouse events.
I'm trying to preclude interference from the link's default action by using e.preventDefault();
I know a click event is a sequence of simple events: mousedown,mouseup,click.
Is there something blocking this sequence?
The full code can be reviewed at http://www.pricelearman.com/__dev (2 underscores). The code may not be optimum, but it is functionally correct – binding is accomplished and functions are called, etc – else the above code would not be working at all.
Thanks for your time and expertise. This is a vexing question to me. It seems so fundamental and simple. I'm new to javascript and I must be missing something.
For Square 2 using "click" event
function showWorkPane() {
var _workID = document.getElementById("workID");
_workID.addEventListener("click", showWorkPaneHandler, false);
}
function showWorkPaneHandler(e) {
var _workPane = document.getElementById("workPane");
e.preventDefault();
_workPane.style.display = "block";
}
Clicking on the link "Work" does not show the workPane.
Well what I currently can find at http://www.pricelearman.com/__dev/_js/main.js is
// Show work navigation
function showWorkPane() {
var workID = document.getElementById("workID");
workID.addEventListener("mouseover", showWorkPaneHandler, false);
// ^^^^^^^^^
}
function showWorkPaneHandler(e) {
e.preventDefault();
var v = document.getElementById("workPane");
v.style.display = "block";
}
Looks quite obvious to me why click events show no effect. There are none bound.
The title explains it all...
I need to perform a custom action when I know a user has finished resizing, but from what I can find in the Kendo UI documentation there is no event for this accessible to me other that 'resize' which I cannot use as is.
Perhaps i just missed the event?
if not:
Is there a way to use the 'resize' event to determine that a user has stopped resizing?
So here's my answer thus far:
Mine differs slightly due to architectural needs, but here's a general solution
var isResizing = false;
var wndw = $(element).kendoWindow({
// .....
resize: OnResize,
// .....
}).data('kendoWindow');
function onResize() {
isResizing = true;
}
$('body').on('mouseup', '.k-window', function() {
if(isResizing){
// **Your 'Stopped' code here**
isResizing = false;
}
});
Have you considered using underscore.js debounce? I have used it successfully to only trigger then change after the resize events have stopped coming for a certain period (in the case below 300ms). This does add a small delay to captureing the end, but if like me you just want to store the final size then that works fine. Here is the version of the code above but using underscore debounce:
var wndw = $(element).kendoWindow({
// .....
resize: _.debounce( this.hasResized, 300)
// .....
}).data('kendoWindow');
//This is called at the end of a resize operation (using _.debounce)
function hasResized (args) {
// ** Your code here **
};
Hope that helps.