I am using wavesurfer.js 4.6.0 and can create regions. I am able to change the background color of the region and dynamically set whether a region loops or not but I would also like to change the color of the left and right handles for the region.
The documentation does not show a way to set this when creating a region but if I look at the code in gitHub it has:
this.loop = Boolean(params.loop);
this.color = params.color || 'rgba(0, 0, 0, 0.1)';
// The left and right handleStyle properties can be set to 'none' for
// no styling or can be assigned an object containing CSS properties.
this.handleStyle = params.handleStyle || {
left: {},
right: {}
};
which shows how the looping and color are set. It also shows that it would take a handleStyle so that you can style the left and right handle but I cannot seem to get it to work.
Is this possible to do this? If so does someone have an example of how to set it.
I am on Angular 11.2.6 and Node 10.15.3
I found the problem. If the line:
this.handleStyle = params.handleStyle || {
to
this.handleStyle = params.params.handleStyle || {
It will work. We decided we needed some other modifications to the regions so I have just copied the regions plug-in to our code tree to make the changes.
Related
I've got a Xamarin Forms cross-platform application (iOS and Android), and on one of the screens I want a list with details:
Heading 1
Detail 1
Detail 2
Detail 3
Heading 2
Detail 1
Heading 3
Detail 1
Detail 2
As you can see, the amount of detail under each heading is variable.
I want the page to display at first with just the headings:
Heading 1
Heading 2
Heading 3
And then when the user presses on a heading, the details for that particular heading appear. Pretty standard stuff.
I've tried several different ways to get this to work, the only path that seems open to me is to have a StackLayout where I define a bunch of labels:
new StackLayout
{
Orientation = StackOrientation.Vertical,
Children =
{
new Label { Text = "Heading 1" },
new Label { Text = " Detail 1\n Detail 2\n Detail 3", IsVisible = false },
new Label { Text = "Heading 2" },
new Label { Text = " Detail 1", IsVisible = false },
new Label { Text = "Heading 3" },
new Label { Text = " Detail 1\n Detail 2", IsVisible = false }
}
}
I then add a TapGestureRecognizer to the heading labels, and when tapped I toggle the value of IsVisible for the detail labels. It works!
The only thing I don't like, is that there is no transition. I click on the heading label and BAM the detail label appears (correctly pushing down all the following labels to make space for itself). I would like an animation so that when I click on the header, the space beneath the header "slowly" opens up to reveal the detail.
As I read about animations online, one possibility is to set the HeightRequest of the detail labels to zero (instead of hiding them with IsVisible=false) and then creating an animation that "slowly" changes the HeightRequest from zero to the actual height of the label. And that's where I run into a problem.
I can't figure out how to get Xamarin to tell me the height of my "details" label.
If I inspect the Height and HeightRequest properties of my details label right after creating it, they are both -1 (no big surprise there). If I inspect those same two properties when I click on the heading, they are still -1. The only way I've found to get the height of my detail label, is to set the detail label visible, call ForceLayout() on my stack layout, store the detail label height, and then set the detail label invisible again. The problem with that is that I sometimes see the detail label flash visible for an instant while I do this.
What's the best/recommended way to accomplish my desired UI?
You can use the Animation API.
Read the blog about it - Creating Animations with Xamarin.Forms.
In particular for your scenario you can use the FadeTo method to animate the Opacity property of a Visual Element.
Eg :
await image.FadeTo (1, 4000);
For more information, see Animation.
In your case my suggested approach would be for showing a label, to set opacity of label to 0, then make it visible, and then use FadeTo to make the opacity to 1.
Use the opposite to hide the label, set opacity 0 via FadeTo, then set IsVisible to false.
If I understand right your problem the only thing you need is to avoid the flash on the label, if this is the case then you can set the Opacity to 0, in this way the label will not be visible until you set again the opacity to 1.
I can suggest you to make a custom XF control (to use as item DataTemplate) as follow:
2 vertical parts:
The header part (A) (when you click on it it will show the second part)
The second part is a 'Listview' control (B) that is empty at the beginning
When you click on (A):
it will show (B)
It will start to populate (B) with your details elements
The trick in my mind is to implement a method that populate the listview (B) item by item (getting them from your viewmodel) with some delay (a few milliseconds) between each insertion and maybe a 'fadeTo' effect too in the same time.
You can see here what I mean (see the "Fade" section):
Insert / fade list item effect sample in HTML
You can improve your template as you want, by embedding the two parts into a 'border' for instance, to make a graphical separation...
Tell me if it's unclear, all you need is time :)
And maybe if you are ready, you can try to make native controls / animations...
How to set the alignment and width of all cells the easy way?
Thanks.
Michael
Edit: Here my modified question - How to set the alignment and width of all cells of a large Handsontable? Is it possible to access all cells at once or to iterate over the cells?
For the alignment, just add the the className parameter to the json instance
var hot = new Handsontable(container, {
className: "htCenter", //htCenter or htRight
});
If you want to set the same width and same alignment for every cell in your table, then you simply want to add the following to your options object:
{
"colWidths": 200, // where 200 is an example width in pixels
"className": "htRight" // this is an example; you can choose from
"htRight", "htLeft", "htMiddle", "htBottom", and "htTop"
}
If using a type other than text, the text-align property is given high priority. Therefore, to override this using CSS, you could add the following rule; this is an example on whatever className you used and assuming you want to stick it to the right.
.htCenter {
text-align:right!important;
}
And at any point in your code, you can update these settings using updateSettings().
Is it possible to set a max-width and max-height for cells in Handsontable?
I've tried to set this via CSS on the <th> and <td> elements but this doesn't work.
I saw in the docs that you can set the columns to particular widths, but not maximums.
So, the solution is to use your HOT instance's manualColumnWidths array. This array will set the widths for all columns automatically. It's nested somewhere in the code so that anytime there's a change to the DOM it updates which is why using CSS or jQuery on the widths of the elements themselves wasn't working. It's a good structure, we just need this to be more explicitly written somewhere.
Note that you can repeat this for rows by just using manualRowHeights instead, as well as the rest of the row methods.
Now, here is how you would set maximums and minimums for column resizing events. Set the afterColumnResize option to this following function:
function setAfterColumnResize() {
return function(col, size) {
var headers = $(".colHeader"); // first is empty if there are rowHeaders
var maxW = [10, 200, 400]; // note that the first is the row header
var minW = [1, 100, 100]; // note that the first is the row header
var actualCol = col + 1; // this is to account for the row header
var maxColW = maxW[actualCol];
var minColW = minW[actualCol];
var actualW = $(headers[actualCol]).parent().parent().width();
if (hot && maxColW && actualW > maxColW) {
hot.manualColumnWidths[col] = maxColW;
hot.render()
}
if (hot && minColW && actualW < minColW) {
hot.manualColumnWidths[col] = minColW;
hot.render()
}
}
}
Now let me explain it. When this event gets triggered, you first find the header using the col index it gives you. Correct it if you have row headers set to true (which is what I do here and in the fiddle). Then you set the arrays of max/min widths (of course you can do this more elegantly in your code).
Then grab the actual current width of the column in question by looking at the parent's parent of the span (this is a little messy but it's the simplest way I found of doing). The conditional after should be self explanatory.
And lastly, the important bits. You can see that by accessing hot.manualColumnWidths you can set the width that you want. I set it to the max if my current width exceeds it. Then just re-render and you're done!
There are a few issues like the fact that these events get called only after resizing so if you originally set the table to render with a width larger than your max, it won't do anything. If that's the case, just call this function after rendering the table the first time (call it once per column).
This would also be the case if you didn't want to use the column resizing event; in this case, it would just be a normal function that you call after rendering.
Hope this helps! Here is a demo fiddle showing it in action :D
So far I've not been able to find any way to make the background of a GtkProgressBar transparent. I've tried setting a transparent image as the background, but the alpha channel is ignored. Can this be done?
Gtk doesn't have mechanisms to handle transparency.
It would create significant performance penalty. Even changes in covered parts of the widgets would have to generate expose events.
I guess there should be a method to composite widgets in your own way. But I think it'd be a lot of work to implement in C/Gtk. In C++/gtkmm it wouldn't be that hard to implement custom widget which does all the rendering itself.
You can try it using gtkrc file.
Try to do something like this.
`style "tc-theme-ProgressBar"
{
xthickness = 1
ythickness = 1
engine "pixmap"
{
image
{
function = BOX
orientation = HORIZONTAL
file = "./buttons/TransparentImage.png"
border = { 0, 0, 0, 0} # = {Left, Right, Top, Bottom}
stretch = TRUE #This stretches the image
}
}
}
class "GtkProgressBar" style "tc-theme-ProgressBar"
'
So, tired of always seeing the bright orange default regular polygons, I'm trying to learn to style OpenLayers.
I've had some success with:
var layer_style = OpenLayers.Util.extend({},OpenLayers.Feature.Vector.style['default']);
layer_style.fillColor = "#000000";
layer_style.strokeColor = "#000000";
polygonLayer = new OpenLayers.Layer.Vector("PolygonLayer");
polygonLayer.style = layer_style;
But sine I am drawing my polygons with DrawFeature, my style only takes effect once I've finished drawing, and seeing it snap from bright orange to grey is sort of disconcerting. So, I learned about temporary styles, and tried:
var layer_style = new OpenLayers.Style({"default": {fillColor: "#000000"}, "temporary": {fillColor: "#000000"}})
polygonLayer = new OpenLayers.Layer.Vector("PolygonLayer");
polygonLayer.style = layer_style;
This got me a still orange square--until I stopped drawing, when it snapped into completely opaque black. I figured maybe I had to explicitly set the fillOpacity...no dice. Even when I changed both fill colors to be pink and blue, respectively, I still saw only orange and opaque black.
I've tried messing with StyleMaps, since I read that if you only add one style to a style map, it uses the default one for everything, including the temporary style.
var layer_style = OpenLayers.Util.extend({}, OpenLayers.Feature.Vector.style['default']);
var style_map = new OpenLayers.StyleMap(layer_style);
polygonLayer = new OpenLayers.Layer.Vector("PolygonLayer");
polygonLayer.style = style_map;
That got me the black opaque square, too. (Even though that layer style works when not given to a map). Passing the map to the layer itself like so:
polygonLayer = new OpenLayers.Layer.Vector("PolygonLayer", style_map);
Didn't get me anything at all. Orange all the way, even after drawn.
polygonLayer = new OpenLayers.Layer.Vector("PolygonLayer", {styleMap: style_map});
Is a lot more succesful: Orange while drawing, translucent black with black outline when drawn. Just like when I didn't use a map. Problem is, still no temporary...
So, I tried initializing my map this way:
var style_map = new OpenLayers.StyleMap({"default": layer_style, "temporary": layer_style});
No opaque square, but no dice for the temporary, either... Still orange snapping to black transparent. Even if I make a new Style (layer_style2), and set temporary to that, still no luck. And no luck with setting "select" style, either.
What am I doing wrong? Temporary IS for styling things that are currently being sketched, correct? Is there some other way specific to the drawFeature Controller?
Edit: setting extendDefault to be true doesn't seem to help, either...
var style_map = new OpenLayers.StyleMap({"default": layer_style, "temporary": layer_style}, {"extendDefault": "true"});
I've found two solutions for this problem. In both solution, you have to change some parameters of DrawFeature to get the functionality you wish.
1.Change handler style of the DrawFeature. Function drawFeature in OpenLayers.Handler.Polygon uses parameter style of the handler for the feature. So you have to change this style.
When creating Feature use:
var drawPolygon = new OpenLayers.Control.DrawFeature(polygonLayer, OpenLayers.Handler.Polygon, {handlerOptions:{style:myStyle}});
Later, you can change it by:
drawPolygon.handler.style = myStyle;
2.Change create callback of the DrawFeature. Change style of the newly created temporary feature in create callback.
var drawPolygon = new OpenLayers.Control.DrawFeature(polygonLayer, OpenLayers.Handler.Polygon, {
callbacks:{create: function(vertex, feature) {
feature.style = myStyle;
this.layer.events.triggerEvent("sketchstarted", {vertex:vertex,feature:feature})
}}});
Similarly, you can change the callback later.
If you want all vectors to be of a constant style, but not the boring orange then try this:
vecLayer = new OpenLayers.Layer.Vector(
"Route Layer", //layer name
{styleMap: new OpenLayers.StyleMap({
pointRadius: "6",
fillColor: "#666666"
}),
renderers:renderer}
);
You have loads of properties you can mess about with, have a look at these pages:
dev.openlayers (check the Constants section)
docs.openlayers (more useful info)