I am trying to use dbc spinner, and I notice spinner_style is used to add Inline CSS styles to apply to the spinner. Is there an example of how to use this config?
I am currently using spinner_class_name=“position-absolute top-0 start-50” to position the spinner loading element in the top middle. However, I want to move this a bit to the left corresponding to start-20, which is not available in Bootstrap 5.0 by default. I think this can be achieved by specifying position value in spinner style, but I do not know how.
You can use any CSS format with that. I use left and top attributes together to position the spinner, and you can tune these two values, see the example below:
import dash
import dash_bootstrap_components as dbc
app = dash.Dash(external_stylesheets=[dbc.themes.BOOTSTRAP])
app.layout = html.Div(
[
dbc.Spinner(spinner_style={"position":"absolute", "left":"300px", "top":"20px"}),
]
)
if __name__ == '__main__':
app.run_server(debug=True)
Output:
Related
We're trying to visualize an IFC model with forge that contains a lot of invisible elements.
One problem we're facing is that the elements that is invisible does not fall under the normal category of hidden elements. E.g. model.setAllVisibility(true) does not make them appear. Also, model.visibilityManager.hiddenNodes is empty and model.visibilityManager.setVisibilityOnNode(dbId, true) does nothing to make them appear.
What seems to be the case with these elements is that their material.opacity is 0.
We tried setting the opacity to 1, and also tried using a different material, with no luck.
The only thing we have managed to do so far is to highlight the element's corresponding fragment:
model.setHighlighted(fragId, true)
however, this does not really cut it (unless it's possible to highlight many elements, and make them transparent?).
It's also worth mentioning that:
The elements comes from a IfcBuildingElementProxy IFC type
Calling viewer.setDisplayEdges(true) makes it possible to see the wireframe of the invisible elements
It's possible to click on the elements even though they are invisible.
So, my questions:
Is there any good way to find all the invisible elements in a model?
Is it possible to change them to be visible without highlighting them?
The viewer doesn't provide any solution for this out-of-the-box but it should be quite straightforward by putting together some of the viewer's features:
To check the opacity of all objects, you can just get the list of all fragments, and check the opacity of each material:
const frags = viewer.model.getFragmentList();
for (let i = 0; i < frags.getCount(); i++) {
const mat = frags.getMaterial(i);
console.log(mat.opacity);
}
And then, when you find materials you would like to change, you can do that, too. Here's some resources that might help:
how to add custom material to a fragment in forge viewer
https://forge.autodesk.com/blog/material-swatches-forge-viewer
https://forge.autodesk.com/blog/custom-shader-materials-forge-viewer
I am making a web app with plotly dash. Ofcourse there is a callback, and then def, and finally result output to a children.
The callback is as follow,
#app.callback(
Output('prediction-content', 'children'),
[Input('input', 'value')]
The output from the def is a long message, with the model forecast, which is like below:
def predict(input):
function(input)
results = f'xxxxxx ${pred:,.0f} xxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxx'
return results
The children is in this Div
html.Div([
html.Button(id='prediction-content'),
]),
Now my problem is, when i shrink the browser, the button is responsive (as the CSS of it is width: 100%), but the text on the button isn’t.
So How to wrap the text to fit the button? like the rest of the sentence goes to the next line, rather than being cut sharp?
Thank you!
By the way, i googled a lot, and can't find a solution for it. Found a similar post,
Make button width fit to the text, but it seems doesn't work.
I have it fixed finally, in my custom CSS, i added:
Height: 100%;
white-space: normal
Now, the overflown text is shown.
This is really a trivial problem, but it is still annoying. I'm writing a tool to allow a user to set a bunch of numerical parameters for an analysis in the IPython notebook. I've set it up as a bunch of FloatTextWidgets in a ContainerWidget. They have rather long labels like "Number of Posture Points" or "Background Disk Radius". They don't line up nicely. This is because of the length: as explained on this page, "The label of the widget has a fixed minimum width. The text of the label is always right aligned and the widget is left aligned... If a label is longer than the minimum width, the widget is shifted to the right."
My labels exceed the "fixed minimum width". What I want to know is how to change it. I have poked around in the Widget source code, and I can't find this anywhere.
EDIT: In response to #Jakob, here is some code, and here is a screenshot
In this example, "Threshold:" is small enough to fit within the label width, but all the others are too long.
To change the style from within the notebook:
from IPython.display import HTML, display
display(HTML('''<style>
.widget-label { min-width: 20ex !important; }
</style>'''))
use the layout argument for each widget. Here's the link to the documentation: https://ipywidgets.readthedocs.io/en/latest/examples/Widget%20Styling.html
In particular it says, you an define description and widget separately in an HBox like this:
from ipywidgets import HBox, Label, Layout
label_layout = Layout(width='100px',height='30px')
HBox([Label('A description',layout=label_layout), IntSlider()])
Well, I found the narrow answer to my question: the minimum field width is defined in site-packages/IPython/html/static/style/ipython.min.css (located wherever your python libraries live -- on my Max that is /Library/Python/2.7/), where widget-hlabel is defined by
.widget-hlabel{min-width:10ex;padding-right:8px;padding-top:3px;text-align:right;vertical-align:text-top}
min-width:10ex is the relevant part.
Although one can override this for an entire document, I don't see an easy way to change it one widget at a time. It would have to be done on the JavaScript side, since the FloatTextWidget class doesn't give separate access to the label component of the Widget from the python side. That would require developing a custom widget subclassed from FloatTextWidget, which seems like way too much effort for such a simple problem, and fragile to boot. At least, that's the only way I see to do it -- corrections welcome.
Instead, I have decided to eschew altogether the automatic labeling of widgets with their descriptions, and instead construct each label as an HTMLWidget, which gives me complete control over its appearance. Here's what that looks like:
I am using a ColorPicker control in Flex 3.6 project, and I want to customize it like this:
Basically removing the border from the ColorPicker selector button and reducing the gap size between the selector and swatch pallete to zero.
Is that possible at all?
I've searched all the attributes and styles of the ColorPicker w/o success...
Many thanks!
Ofer
You can customize components like this one by using the mx_internal namespace. Add the below to your imports:
import mx.core.mx_internal;
use namespace mx_internal;
Now you can access parts of the component you couldn't before. For instance, I needed to add a "Preferences" button to the ColorPicker's SwatchPanel in the empty space to the right.
I created a custom component that extended ColorPicker and added an EventListener for DropdownEvent.OPEN. In the event handler method, I got the SwatchPanel like this:
var swatchPanel:SwatchPanel = this.mx_internal::dropdown;
I then used swatchPanel.addChildAt(...) to add my preferences button. Easy!
You should be able to do something similar by overriding the createChildren method and messing with either its children or mx_internal properties.
Is there an easy way to get all (or most) of the components in a GroupLayout application NOT stretch vertically? I know I can do it by forcing each component to it's preferred size when I add it, but that makes the code so much more verbose:
.addGroup(layout.createSequentialGroup()
.addComponent(oDevRadio)
.addComponent(oInstRadio)
)
Becomes
.addGroup(layout.createSequentialGroup()
.addComponent(oDevRadio,
GroupLayout.PREFERRED_SIZE,
GroupLayout.PREFERRED_SIZE,
GroupLayout.PREFERRED_SIZE)
.addComponent(oInstRadio,
GroupLayout.PREFERRED_SIZE,
GroupLayout.PREFERRED_SIZE,
GroupLayout.PREFERRED_SIZE)
)
Is there a way to set it as a default, and just specify the elements I want to be stretchable?
References
- addComponent's spec
As far as I know, the only method of telling GroupLayout components not to stretch or otherwise be misaligned requires that the relevant components be inside a ParallelGroup. It is then a simple matter to set the resizeable flag of the ParallelGroup to false.
Javadoc of ParallelGroup creator with relevant flag
For example, in the following code jspCasts is a very tall component. Without a new ParallelGroup with the flag being set to false, components next to it would either stretch or not align neatly as they should.
vGroup.addGroup(gl.createParallelGroup(Alignment.LEADING).
addComponent(jspCasts).
addGroup(gl.createParallelGroup(Alignment.CENTER, false).
// without worrying about vertical stretching or misalignment,
// add your components here
Not as far as I know. I've handled it with a utility class:
package alpha;
import java.awt.Component;
import javax.swing.GroupLayout;
import javax.swing.GroupLayout.Group;
public class GroupLayoutUtil
{
public static GroupLayout.Group addPreferred(Group g, Component c)
{
return g.addComponent(c, GroupLayout.PREFERRED_SIZE,
GroupLayout.PREFERRED_SIZE, GroupLayout.PREFERRED_SIZE);
}
}