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
Related
I am using PhpStorm because I really like the features, but I would like to disable this little popover to make it look cleaner. How would I do this without disabling the inspections themselves?
The popover:
You cannot remove/disable it. You can only make it less visible (smaller). For that you need to configure it to be as in previous versions: hover over and use the menu there, as simple as that (Compact View option on the screenshot below).
Before:
After:
I develop with VIM, and I am trying to find a way to use chrome breakpoints for my frontend Vue.js app. I'm also using nuxt to develop my app with Vue.
Has anyone been able to successfully set a breakpoint in chrome without having to use vscode as their editor? If so what changes did they have to make?
For clarity's sake, I have of course tried entering debugger into my JS code, and I have also clicked on the left side of the source file in the chrome to apply a breakpoint on a particular line. Neither of these ways of applying a breakpoint have worked for me.
As I know There 2 way to use break point in these framework :
First, add debugger; in your code where you want like below:
methods: {
test() {
let x = 15 * 5
debugger
//// other code
}
},
Second, open developer mode in source file found the place you want to have break point and click left side of it :)
Each Time I'm using this console I'm struggeling with my mouse to click on the editable line.
So two question :
Is there a way of enlarging this line so it easier to click on it ?
Is there a command to navigate to it ?
The only way to enlarge it is to create a custom theme for DevTools, enable the experiment for using custom themes, and then installing your extension. That way you can get custom CSS into the top-level DevTools scope to modify things.
You may open a bug report on the chromium issue tracker against the DevTools so the team can assess the UX to see if there is anything they should modify internally.
I want to know if there is the possibility, by browser inspection of write a new class containing new hover/focus. For example
.CanIDo {
/*something css
(ex.)*/
width: 100;
}
/*my question (BY BROWSER ISPECTOR, i don't want to type it directly in my css using a text editor)*/
.CanIdo a:hover{
opacity: 0.7;
}
I think this is impossible because browser ispector don't admit to change a class directly, but only the containing of that class (right?), but maybe there are browser that have impove that, I think it can be helpful developing a web site.
Thanks!
If I understand your question, you are asking if you can write CSS "on the fly" in a browser Dev Tool and see the effects immediately on your page?
The short answer is yes. The Dev Tools in Chrome, FireFox, and even the latest IE/Edge browsers have that ability. You can tweak applied styles one by one using a DOM inspector or even wholesale update a CSS file in a Sources tab (the name varies slightly between browsers).
And yes, you can write pseudo-class rules like hover and they'll take effect. You can develop or tweak your code and see the results immediately.
Most browsers have inspect tools that allow you to add any class on the fly.
For instance on Chrome if you open Developer Tools you can add any class to your css, be that a :hover variant or any other normal class, pseudo-class.
What you have to do is open the inspector Cmd + Shift + I on OSx and you'll see this on the Elements tab:
You can see that on the Filter you have a "+" button, clicking that you'd be able to stuff like this:
Those two classes a:hvoer and other-class are added via the inspector as you can see on the right is written: inspector-stylesheet
On this fiddle http://jsfiddle.net/mjmitche/qVdEy/6/, you can see that the alignment of the text inside the popover is perfect, however, when I put the exact same css/js/html on my site, the text is larger than the container!
I'm trying to figure out what is happening using firebug, but I have to move my cursor off the popover to use firebug, and then the firebug disappears. I can't figure out what settings in my code is changing the presentation. The popovers are created using Twitter Bootstrap.js (you can see the resources in the fiddle)
Nobody really answered the question "How to debug a popover" ::: Simply set the popover to open on load >> $('#element').popover('show')
What I do is kind of weird and only seems to work in Chrome, not Firebug.
The steps are:
Open the Chrome inspector in a new window
Make sure part of the inspector is overtop of the button you're
trying to activate (which is in the background window
Activate the browser window and hover over the button (this activates the popup), now hit
alt+tab (cmd+` on OSX) to switch to the inspector window.
This will not trigger the mouseOut event and leave your popup
attached to the DOM body node! Since you're already in the inspector
you can navigate to it and see the css problem.
Well after looking at the popover CSS, it seems there is no explicitly defined font-size: http://twitter.github.com/bootstrap/1.4.0/bootstrap.min.css (Just do a find on "popover" and look through the CSS)
Perhaps try adding the following CSS and tweaking it from there:
.popover, .popover h3.title, .popover .content { font-size: 14px; }
Hope that helps :)
This is the kind of thing I created my new HTML box visualizer tool for. Check it out!
HTML Box Visualizer - GitHub
open devtools of the browser, then set a breakpoint of Mouse Click. Just Click the target of popover panel and U will see the opening popover. Just debug it like other normal DOM block