Pan map with mouse wheel click instead of left click - cesiumjs

The default behavior of panning the map is via left click + drag I would like to change that behavior to be with wheel click + drag.
Is this possible?

That's handled by the ScreenSpaceCameraController, and is configurable. For example:
const viewer = new Cesium.Viewer("cesiumContainer");
// for 3D mode
viewer.scene.screenSpaceCameraController.rotateEventTypes = Cesium.CameraEventType.MIDDLE_DRAG;
// for 2D mode
viewer.scene.screenSpaceCameraController.translateEventTypes = Cesium.CameraEventType.MIDDLE_DRAG;
// remove MIDDLE_DRAG from the top of the tiltEventTypes.
viewer.scene.screenSpaceCameraController.tiltEventTypes.shift();
That last command above uses Array.shift to remove the first element of the tiltEventTypes array. The default value of this array (for many versions of Cesium) is shown here:
this.tiltEventTypes = [
CameraEventType.MIDDLE_DRAG,
CameraEventType.PINCH,
{
eventType: CameraEventType.LEFT_DRAG,
modifier: KeyboardEventModifier.CTRL,
},
{
eventType: CameraEventType.RIGHT_DRAG,
modifier: KeyboardEventModifier.CTRL,
},
];
This is showing us that one can still issue "tilt" events even after shifting away the MIDDLE_DRAG entry. We can CTRL-left-drag, for example, to get the same action.

Related

Prevent zoom in Forge viewer when clicking in Model Browser

There has been a change in the click behavior in the model browser from version 2 to version 3 of the Forge Viewer. In v2, a single click would select the elements and a double click would zoom to the selected elements. In v3, a single click will zoom to the elements. Sometimes this is great, but often it would be nice to disable this behavior. Is there an easy way to do this today? And if not, could it be possible to add a disableZoomOnSelection function to the viewer API?
I know that the eyes in the browser will take care of the show and hide elements, but it’s very easy to klick in the three by accident and suddenly the viewer zoom without the user intention.
Regards
Frode
I dig that code for you looking at the implementation of the ViewerModelStructurePanel that I was exposing in that article: Supporting multiple models in the new ModelStructurePanel
Events that occur in the tree are mapped to predefined actions through the options.docStructureConfig object, so the workaround is to instantiate a new ViewerModelStructurePanel with the desired options:
viewer.addEventListener(Autodesk.Viewing.OBJECT_TREE_CREATED_EVENT, () => {
var options = {
docStructureConfig: {
// go with default, which is viewer.select(node)
// click: {
// onObject: ["toggleOverlayedSelection"]
//},
clickShift: {
onObject: ["toggleMultipleOverlayedSelection"]
},
clickCtrl: {
onObject: ["toggleMultipleOverlayedSelection"]
}
}
}
var customModelStructurePanel =
new Autodesk.Viewing.Extensions.ViewerModelStructurePanel(
viewer, 'Browser', options)
viewer.setModelStructurePanel(customModelStructurePanel)
})
The double-click however is not linked to an event in the current implementation, so for a more powerful customization I would recommend you replace the whole implementation by a custom one as exposed in the article and implement desired action handlers. I implemented it as drop-in replacement, so in that case you just need to include it to your html after the viewer script and don't have to replace the model browser in OBJECT_TREE_CREATED_EVENT
The model browser receives an options object in its constructor. There, you can specify the actions for different events (click, clickCtrl, clickShift, etc).
To set the old behavior you can try the following:
var options = {};
options.docStructureConfig = {
"click": {
"onObject": ["isolate"]
},
"clickCtrl": {
"onObject": ["toggleVisibility"]
}
};
NOP_VIEWER.setModelStructurePanel(new ave.ViewerModelStructurePanel(NOP_VIEWER, "", options));
NOP_VIEWER can be replaced with your own viewer variable.

CesiumJS how to keep the zoom level of a Cesium.Viewer when the viewer.trackedEntity is changed

I have 2 different Cesium.Viewer instances, I want sync the 2 viewers when user zoom either one of them.
How to do that?
update:
In my app, I have 2 different Cesium.Viewer instances. But for this question here, I think it has nothing to do with the number of Cesium.Viewer. So I updated the question as below:
I have 2 planes flying on a Cesium.Viewer as shown in the attached screenshot, one is on the red course (ref as red plane) and the other is on the red course (ref as red plane).
Step-1: I tracked the yellow plane by double click it, then it looks like pic-1;
Step-2: I zoom out it to pic-2;
Step-3: I changed to track the red plane by double click it, and it looks like pic-3;
Step-4: I zoom out it to pic-4;
Whenever I changed the tracked entity (as step-3), I need to zoom out it manually again.
So, my question is how to keep the zoom level when changing the tracked entity?
Save current camera.view.scene
Detect moment when trackedEntity changed
Restore camera.view.scene
To save and restore you can use this code as an example:
var viewer = new Cesium.Viewer('cesiumContainer');
var savedView = {};
Cesium.CzmlDataSource.load('../../SampleData/simple.czml').then(function(dataSource) {
viewer.dataSources.add(dataSource);
Sandcastle.addToolbarButton('Save View', function() {
savedView.offset = viewer.scene.camera.position.clone();
});
Sandcastle.addToolbarButton('Restore View', function() {
viewer.trackedEntity._viewFrom._value = savedView.offset;
});
});
Note: viewFrom param should be in source czml for track. Smth like:
"viewFrom": {
"cartesian": [
-2080,
-1715,
779
]
},

Map json to menu in Openui5

In w2ui I can map a json to a sidebar http://w2ui.com/web/demos/#!sidebar/sidebar-1
Can I do it in openui5?
I want the same result.
Obviously I do not want a tree but a list of items that swipe right if I tap on an item (and visualize a sub-menu list) and slide left if I press back button (and visualize the menu at upper level).
I think it's possible, but as far as I know you have to do some manual labor:
Detect whether your node has one or more child nodes, and based on that set the sap.m.ListType to Navigation or not
If your root node (f.i., "/items") has child nodes (f.i., "childs"), you need to re-bind your list to this child path ("/items/<index_of_parent_node>/childs)
To get the swiping effect, you probably need to encapsulate the list in a sap.m.Page
Depending on the node level you're in, you need to hide/display your back button, and by pressing it bind your list to the parent path
However, if there's a cleaner, simpler approach I would love to hear it too!
I solved my problem:
Every time that i click on a menu item i call this function into view controller:
//when click on item
onPressMenuItem: function(evt) {
var selectedItem=evt.getSource().getBindingContext().getObject();
var objAction=getActionWhenPressMenuItem(selectedItem, this.getView().getModel());
console.log(objAction);
if(objAction.hasNextSidebar==true){ // sub menu
var model = new sap.ui.model.json.JSONModel();
model.setData(objAction.nextSidebar);
var oSplitApp=sap.ui.core.Core().byId("splitApp");
var nextView = sap.ui.xmlview("general.master.menuMaster");
nextView.setModel(model);
nextView.byId("idPageSidebar").setTitle(selectedItem.text);
oSplitApp.addMasterPage(nextView);
oSplitApp.toMaster(nextView);
}else{ // open operation detail
var idDetail =objAction.opDetail;
var targetApp = getAppBySelectionId(idDetail);
if(targetApp.masterView!=null){//if app has own master
sap.ui.getCore().getEventBus().publish("navMaster", "to", {
idView: targetApp.masterView
});
}
if(targetApp.detailView!=null){//if app has own detail
sap.ui.getCore().getEventBus().publish("navDetail", "to", {
//titleOfDetailPage: selectedItem.text,
idView: targetApp.detailView,
//idCall: selectedItem
});
}
}
},
I create every time a new istance of the menu on a new page.

Selectively remove Chrome browsing history

Is it possible to selectively remove items from Google Chrome browsing history? I have a website from my history that wants to be the default everytime I start a search with a specific letter, but I often reference my history to re-find things.
So I would like to remove all history from, say, www.pythonismyfavoritest.com without removing everything; is that possible?
Try searching www.pythonismyfavoritest.com in the search bar in chrome://history/ and then remove each item by clicking the check box in the left and then hitting the "remove selected items" button.
The chrome history api works with url such chrome://history/#q=hello&p=0
Here's something I wrote in JavaScript. It works through the Console Debugger. I tried using it in a bookmark but I get no response from the page.
** // UPDATE (07.28.15)
I added a shorter approach provided by #Denis Gorbachev to the checkbox targeting, which helped shorten some of this code. I also added "auto-stop" functionality, meaning the loop will stop once it has finally cleared the list.
** // UPDATE (08.20.14)I made a few changes to the code, to make it more user friendly. Other users may not be code-savvy, and others may simply prefer convenience. Therefore, I whipped up a couple buttons (start/stop) to control the usage; as well as address some "ASSERTION FAILED" exceptions/errors that were being thrown when attempted to run the script loop.. Enjoy!!
In your address bar, type in the following address to to the meat of the history page.. It's normally loaded in an iframe, with the left-side menu loaded in another frame.. // **
chrome://history-frame/
Next, load your Console Debugger/Viewer by pressing Ctrl+Shift+J(For Mac users, ⌘+⌥+J)
You can also press F12 and select the "Console" tab.
In the Console Debugger/Viewer, copy & paste the following code:
function removeItems() {
removeButton = document.getElementById('remove-selected');
overlayWindow = document.getElementById('overlay');
//revision (07.28.15): Replaced the For Loop targeting the checkboxes, thanks to Denis Gorbachev via comments (02.19.15)
Array.prototype.forEach.call(document.querySelectorAll("input[type=checkbox]"), function(node) {node.checked = "checked"})
setTimeout(function () {
if (removeButton.getAttribute("disabled") !== null) {
removeButton.removeAttribute("disabled")
}
/* revision (08.20.14): no longer binding to that condition, button should no longer be disabled, so click! */
if ((overlayWindow.hasAttribute("hidden")) && (overlayWindow.getAttribute("hidden") !== false)) {
removeButton.click();
}
/* revision (08.20.14): new Interval, to check against the overlay DIV containing the confirmation "Remove" button */
/* Attempting to click the button while the DIV's "hidden" attribute is in effect will cause FAILED ASSERTION */
stopButton = setInterval(function () {
if (overlayWindow.hasAttribute("hidden")) {
if (overlayWindow.getAttribute("hidden") == "false") {
hidden = false
} else {
hidden = true
}
} else {
hidden = false
}
if (!hidden) {
document.getElementById("alertOverlayOk").click();
clearInterval(stopButton)
}
}, 250)
}, 250)
}
//revision (08.20.14): Lets build our buttons to control this so we no longer need the console
//stop button (08.20.14)
var stopButton = document.createElement('button');
stopButton.setAttribute('id', "stopButton");
stopButton.innerHTML = "Stop";
stopButton.style.background = "#800";
stopButton.style.color = "#fff";
stopButton.style.display = "none";
stopButton.onclick = function () {
clearInterval(window.clearAllFiltered);
document.getElementById("stopButton").style.display = "none";
document.getElementById("startButton").style.display = ""
};
//start button (08.20.14)
var startButton = document.createElement('button');
startButton.setAttribute('id', "startButton");
startButton.innerHTML = "Start";
startButton.style.background = "#090";
startButton.style.color = "#fff";
startButton.onclick = function () {
window.clearAllFiltered = setInterval(function () {
/* revision (07.28.15): Stop the Loop automatically if there are no more items to remove */
if(document.getElementById("results-header").innerText=="No search results found."){
document.getElementById("stopButton").click();
}
if (document.getElementById("loading-spinner").getAttribute("hidden") !== null) {
removeItems()
}
}, 250); //adjust Time Here (1500 [millisec] = 1.5sec)
document.getElementById("stopButton").style.display = "";
document.getElementById("startButton").style.display = "none"
};
/* revision (08.20.14): Now we add our buttons, and we're ready to go! */
editingControls = document.getElementById('editing-controls');
editingControls.appendChild(stopButton);
editingControls.appendChild(startButton);
This removeItems function will select loop through all form inputs and check all checkboxes, enable the "Remove Selected Items" button and click it. After a half-second, it'll check if the "Are You Sure" prompt is displayed and, if so, click the "Yes/Remove" button automatically for you so that it will load a new list of items to do this process all over again..
The item is looped using the variable "clearAllFiltered", which is a setInterval loop, which is checking for the status of the "Loading" screen..
To start erasing your filtered history items, you can now click the green Start button.
** // UPDATE (07.28.2015) It will now stop on ITS OWN.
To stop the loop manually, you can now click the red Stop button. Simple as that!
1) Go to your history settings ( chrome://history/ )
2) In the top right hand corner will be a search bar with a 'Search History" button
3) Type in the sitename you want to remove from history, then click the button
4) Click the box on the first one, then scroll to the bottom of the page
5) Press and hold the Shift key, then click the last box (This will check all on that page)
6) Scroll back up and select the 'Remove Selected Items" Button
7) Repeat steps 4-6 until all your Youtube History is gone.
Hopefully Chrome will update this clear history feature, but for now this seems to be the fastest option
Easy way is Shift+Delete.
For example when you type "you", "youtube.com" will be shown as selected in suggestions. Just click Shift+Delete. Then retype "you" and you will see no "youtube.com" in that list anymore.
If you are talking about getting rid of the suggested search/auto-completion... then removing specific items from your chrome://history won't do it (in my experience). I want to fill in more detail to the answer #LacOniC gave.
In the screenshot you can see I typed "ba" and Chrome is suggesting completion based on my browsing history (the items in green).
In my experience, removing specific items from your history will not remove them from showing up in this address bar auto-completion.
To quickly remove these auto complete items:
Start typing a few letters that generate the offending suggestion.
Use your keyboard's arrow keys to select the suggestion you don't like (selected item is highlighted blue in screenshot).
Press shift+delete on windows or shift+fn+delete on mac to remove the selected item.

Disable zooming in for photo swipe

I'm using Photo Swipe to display my images. The default behavior when using it is that once the images are clicked, I'll be able to bring me to a "zoom-in page" where the photos are enlarged and i can view them one by one by swiping.
I'm trying to overwrite this behavior because I want to do something else after the user clicks on the image.
All solutions described here did not work for me. Here is a complete solution that turns off zooming.
Settings:
var options = {
// Gallery options
maxSpreadZoom: 1,
getDoubleTapZoom: function (isMouseClick, item) {
return item.initialZoomLevel;
},
// UI options
zoomEl: false
};
Gallery init:
var gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, items, options);
// ...
And finally add this CSS snippet to disable zoom cursor:
.pswp--zoom-allowed .pswp__img {
cursor: default !important
}
The option allowUserZoom doesn't exist in the documentation
You can disable the double tap zoom by returning item.initialZoomLevel and reduce the spread (zoom) gesture by setting maxSpreadZoom to the same initialZoom :
gallery.init();
gallery.options.maxSpreadZoom = gallery.getZoomLevel();
gallery.options.getDoubleTapZoom = function(isMouseClick, item) {
return item.initialZoomLevel;
}
to disable zooming you must set
allowUserZoom = false