Other than to add a css rule for the toolbar to be: visibility: hidden;, how can I hide the default viewer UI?
I saw this but I couldn't find what makes the bottom UI hidden.
You can use the "headless" viewer if you don't want any UI at all:
var viewer = new Viewer3D(domContainer)
But I don't see what's wrong with setting the css, it's a dom element, so any API you use would ultimately impact the css ...
Related
I want to be able to target the highcharts tooltip using Protractor in the Chrome DOM inspector, but I need to be able to capture the class name of the tolltip to be able to do so.
When a point in a data series is hovered over in a Highcharts chart, a tooltip is displayed as you can see here:
https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/line-basic/
I am using a shared tooltip:
tooltip: {
shared: true,
},
However, using the inspectors 'Force element state :hover' does not work. I can't even see the tooltip appear as DOM element in the inspector at all?
How is it possible to inspect the Highcharts tooltip in the Chrome DOM inspector?
To inspect the Highcharts tooltip in the Chrome DOM inspector you need to keep the tooltip visible. You can achieve it by wrapping the hide method:
Highcharts.wrap(Highcharts.Tooltip.prototype, 'hide', function(proceed) {});
Demo: https://jsfiddle.net/BlackLabel/mke7Lh3b/
Now you can easily find the tooltip class which is (for the point in the first series):
highcharts-label highcharts-tooltip highcharts-color-0
highcharts-color-0 this part is added dynamically. The number depends on which color from default Highcharts color array series have assigned.
API: https://api.highcharts.com/highcharts/colors
An alternative is to use ctrl + F in the developper inspecteur. After you use a specific term in your tooltil press enter and you will find it easily
I need some help tweaking the Autodesk Viewer UI. I am working on the files as provided by a localised version output from http://extract.autodesk.io/.
I have not done any custom editing. I need help locating the relevant code and suggestions for the changes in the following areas:
The Model Browser docking panel. This opens by default with the first group in the tree Expanded (see picture). I want this first element and all other elements to open by default as Collapsed, so just the parent names are shown.
Staying in Model Browser. The Scroll Bars, (seen when model elements names are listed beyond the Model Browser window size) display correctly in the Opera and Chrome browsers,
however, they display unstyled as wide windows style scroll bars in the Firefox browser. What is needed for Firefox to display scrollbars as intended?
What code might override camera zoom property AFTER correctly loading default zoom value ?
The viewer version from http://extract.autodesk.io/ imports the scene camera properties for the start view ok, but overrides the Zoom property with another value shortly after intial page load.
1.I want this first element and all other elements to open by default as Collapsed, so just the parent names are shown.
Unfortunately far as I know there's no straightforward, native config option in Viewer to achieve this. However you can:
Hook an one-off click listener onto Model Browser button to programmatically fire a click on the corresponding notes you'd like to collapse, or directly add ‘.collapsed’ class to them. You can get a hold of the nodes either by their lmv-nodeid or their label text:
<div lmv-nodeid="9" class="collapsed group visible">
<lmvheader style="padding-left: 13px;">
<div class="visibility"></div>
<label>Switch:1</label>
</lmvheader>
</div>
Extend and build your own browser using the instanceTree and Autodesk.Viewing.UI.DockingPanel, see an example here
2.What is needed for Firefox to display scrollbars as intended?
Here is a great answer to your question. But looks like the status quo is still far from perfect, with no definite hack discovered so far. So again for a thorough solution you'd need to create your own styling (can do so with the help of something like) and apply them to .docking-panel and append .model-structure-panel or any other panels you'd like to narrow the scope to.
3.What code might override camera zoom property AFTER correctly loading default zoom value ?
This should be the code you are after.
You can manipulate camera with viewer.autocam.goToView( newView ), and see below for a sample view config:
const newView = {
position: newPosition,
up: currentView.up,
center: newCenter,
pivot: newPivotPoint,
fov: currentView.fov,
worldUp: currentView.worldUp,
isOrtho: (currentView.isOrtho === false)
}
I would like hide everything in the toolbar except the measureTools, which I managed to do using visibility: hidden for all of the other tools.
However, the dark background theme is still visible for all three tool-groups (navTools, modelTools, settingsTools).
Everything disappears if I set
.dark-theme{
visibility: hidden;
{
And if I modify the .dark theme{ background-color: rgba(34,34,34,.0);} it effects the expanded options that shows when the measure tool is clicked.
Any suggestion? Thanks a bunch.
Why not, better use the Headless viewer and add a Custom button that access the Autodesk.Measure Extension? By a headless viewer you can refer to this sample
https://viewer-rocks.autodesk.io/
That one is using custom made extensions that become available when you make the viewer go on full screen mode.
---- EDIT
Is this what you are trying to achieve? Only Measure Tool showing
Here also is how it looks when you try to use it.
If this is what you want, you can try using an extension we have called Control Selector, play with the extension and see how it works.
A live link that uses the extension can be found here.
https://viewer-nodejs-tutorial.herokuapp.com/
And here you can find the Code for the extension, just bare in mind that the extensions were written with ES6 sytanx, so it needs transpiling before it can be used.
https://github.com/Autodesk-Forge/library-javascript-viewer-extensions/blob/master/src/Autodesk.ADN.Viewing.Extension.ControlSelector/Autodesk.ADN.Viewing.Extension.ControlSelector.js
I'm working with the MarkupsCore extension and want to keep my added UI open inside the viewer while adding or working with Markups.
From what I can tell once I call enterEditMode the UI won't return until I hide all of my Markups. The buttons I have added don't seem to change state and their still marked as visible when I'm debugging, yet they don't show.
I tried setVisibility on the objects but the method returns false because it evaluates the buttons as not hidden.
Is there something I'm missing?
If I'm understanding your question right, that's expected as you cannot move/rotate/zoom the model when editing the Markups, mainly because these are SVG shapes on top of the view. Ideally you should also keep the Viewer state to restore when viewing the markups later.
I'm trying to inspect the shadow DOM for certain HTML5 controls, like the date picker for the input type="date" and the actual suggestion dropdown list for inputs bound to a datalist. Preferably in Chrome, but other browsers will do too.
I've found that by enabling the Shadow DOM setting in Chrome's inspector options allows me to inspect the shadow DOM for the actual input (which includes the ::-webkit-calendar-picker-indicator arrow to show the datepicker) but not the datepicker itself:
The same goes for the datalist. It appears as these controls are not part of the input, but I also can't find them anywhere else in the elements panel.
Is it possible to inspect such elements?
Small edit for clarification: I'm actually looking for which pseudo-classes apply to which controls. There's plenty of sites that list some of them, but I have yet to find a source that manages to list ::-webkit-calendar-picker-indicator for the datalist element, which does get applied. I'm looking for more of those sneaky bastards, and the best source for that of course is the horse's mouth.
Looks like the actual picker is loaded in an entirely different layer (basically a different window without the titlebar). So I guess the answer is: no, you can't.
I agree it would be great to be able to customize it. And similar popups too. Mozilla in XUL has display:popup which is used by context menus, flyout and similar things. Would be definitely great being able to use that in userland content too.
The calendar popup of Google Chrome is not in Shadow DOM.
It's in a separated page mapped to a popup window. See WebPagePopupImpl.cpp
And the popup content is written by HTML/JavaScript.