I am having an app, which uses the Forge API. The UI displayed when pushing the Forge button "Settings" in "settingsTools group", overlaps one of my buttons.
However since my app zIndex is set (I am in react code) the click upon close of the setting UI, triggers my buttons instead of the close button.
Hence, I am intrested in setting the "Settings UI" to front so the click upon the close button triggers close. My front end code is in the react framework hence a simple zIndex parameter to set could do the trick.
How can I do so?
Instead of playing with hacky ways, consider using the docking panels provided by Forge Viewer. From my understanding, it can also work with React.
To elaborate the usefulness of panels, consider the following example:
Here I have a floating div, showing me some information related to the model. Obviously I've set a high z-index, to bring it upfront and here I have the same problem as you have - when opening things like settings, properties, model tree, etc, they all appear behind my div. Moreover, when changing the size of the window, I have to deal with my div position.
On the other hand, Forge Viewer uses everywhere panels, like this very Settings dialog.
Thus, if you would place your button into this kind of panel, this would save you from headache with z-index, docking, rescaling etc, as all the panels are working nice one with each other, as the below Robot Control Panel:
For more information on how to create a panel, I suggest checking http://learnforge.autodesk.io/#/viewer/extensions/panel
Related
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'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 am porting a Desktop WPF application to WinRT and I'm facing a little issue.
I had a ItemsControl and I had a context menu on every item to delete / edit the item.
I have been told that PopupMenu are not good in WinRT and I should use a AppBar.
I think I'm doing something wrong or I misunderstood that.
I thought that I could put that options on a AppBar and when I select an element, popup the bar and click where I need.
The problem is that the AppBar will show up when I right click on any part of my app, so that buttons will show up with an item selected.
So can I change the layout of the AppBar on different contexts (because it seems that Microsoft wants us to use AppBar as context menu without context capabilities) or only show it when I want via code?
Would be good to have a TopAppBar with some App-wide options and a BottomAppBar just for ListView's item context menu.
Or maybe I'm doing all this stuff wrong and I have to use another approach to put extra options on the Listview's items.
You are thinking about this correctly. AppBar is the place where you should put all your non-essential and selection based commands.
The guidelines here and here suggest that they should be arranged as follows:
Navigation commands should be in TopAppBar
Commands related to selection should on the left side of BottomAppBar
The rest of page specific commands should be on the right side of BottomAppBar
Contextual commands should only be shown when a relevant item to that command is selected. For that purpose you should set Visibility of these commands accordingly. Also AppBar should open automatically when an item with contextual commands in it is selected. You can do that programmatically by setting its IsOpen property. You should also set it to sticky mode by via IsSticky property.
If you're using MVVM you can bind your viewmodel properties to all Button and AppBar properties mentioned above.
There's a CustomAppBar control available in WinRT XAML Toolkit. I haven't used it myself yet but it has a couple of extra features that might prove useful in your case.
I am trying to use monodevelop. Just at the beginning I came across an issue:
I was following a tutorial on building a Gtk application (http://monodevelop.com/Stetic_GUI_Designer). I was trying to drag a button from the Widgets Palette. Nothing happened. I'd been trying quite a few times without any luck.
After a break I launched monodevelop again and I simply placed a button on the window of the application. After that I removed it, dragged VBox container, and placed menu bar on the window, according to the tutorial instructions. I was pleasantly surprised.
By the second try the same problem occurred - I was not able to drag any widgets. Dragging was beginning, there was a “+” sign at the cursor and then - nothing was happening. I cannot figure out what happened by the first time, what the difference was. Have anyone had a similar problem? Monodevelop looks promising, but I can't go on with it. (I tried placing 'Fixed' container on the window, with no result - I could not drag it.)
(monodevelop v. 2.4, ubuntu 11.04, Polish language.
I did look for an answer to my problem, without much luck, that is why I post this question. The problem is described quite precisely. There is a probability that others encountered the same issue.)
You need to drag a container on the form first before you can add widgets to it. The VBox container is an example of a place where you can put your widgets.
If you want to place widgets where ever you want you can use the Fixed container. If you want things to align you can use the VBox, HBox or Table containers. Placing in a widget in one of the fields will automatically adjust the size of this field to fit the widget you have dragged into it.
So basically,
Create a form
Drag a container on the form
Drag a widget inside the container.
These widgets are not to be confused with the custom made widgets (in your Solution browser, right click the folder User Interfaces and click Add Widget...). These are like forms. I use these to create GUI's in advance so I can call these while the program is running.
FYI: if you want to create code for a widget (like a button) you can't just double click it like in Visual Studio. You need to select it, the go to the properties pane, and change the tab from Properties to Signals. You can then double click the "signal" to create the event for which you want to create code. For a button this is usually the Clicked event (somewhere at the bottom of the list, you'll need to open the Button Signals)
You can always visit the IRC channel of Monodevelop on irc://irc.gimp.org/monodevelop (IRC.Gimp.org #monodevelop)
I also sit in this channel and can help with smaller problems and I also still use Monodevelop 2.4.
I am trying to accomplish an "imagemap" in flash where you click on different areas in the image and when you click on it, a popup (within flash) comes up showing more information about the object that was clicked on. The popup has a close button that can will then close the popup.
My biggest trouble is the way I have my code right now is when you click on a region of the map, it creates a popup on the fly, and then I use addChild(_myPopup) to add it to the display list. The problem with this approach for me, is that the Popup is now a Child of the button I just pressed, but this object organization doesn't really make sense to me. I'd like to have the popup not be a child of the button and it be on it's own layer or a child of the stage directly.
What is a good approach and code architecture for building such an organization of objects? I'm fairly new to AS3 and I've built some small applications but my knowledge is limited.
Thanks
UPDATE
ok looks like calling stage.addChild(myPopup) from inside the button works pretty well. Is this good practice?
Assuming you have a hierarchy that looks something like this:
stage
Main class
Image class
Button
It's good practice to never call upwards in the displaylist, every object only deals with it's children. Events however, are a nice way of communicating upwards. Have the Button dispatch an event, preferrably a custom one, then handle that using a listener in the main class that then deals with creating a popup on top of everything.
An often encountered practise to organize the layers of the visible application is:
stage
main class with all children
popup container
tooltip container
mouse cursor container (apparently not longer necessary since player 10 supports custom cursors)
So you create your popups always in the popup container above the main class. If you would have tooltips, they should go into the tooltip container. This approach guarantees that popups are always visible above the main app and tooltips are always visible on top of everything.