How can I manually set a custom cropping area using ngCropper ?
The area is sent through the option.data property, you bind them to the modal using ng-options
<img ng-cropper ng-options="options">
Then the controller must define the option the following way:
$scope.options = {
maximize: false, // very important otherwise it will overload the custom data
data:{x: 261, y: 7, width: 56, height: 56} // those are arbitrary values
};
The data properties corresponds to the following:
Related
Just started using progressbarwidget, I want the text from my textTpl to be center aligned within the progress bar at all times regardless of what percentage the bar is at, when I mean centered I mean the center of the progress bar and not center of the progress value. See fiddle below and attached image
https://fiddle.sencha.com/#fiddle/1dm7
I seen a reference on another thread to set position : relative, this does set the text to the center of the bar but doing so means the bar does not show the progress anymore. I see when the progress bar is created it has 2 divs, containing the following classes, x-progress-text and x-progress-bar, both contain the text value.
Thanks in advance
You can extend ProgressBarWidget, and override the template, like:
Ext.define('Fiddle.view.ProgressBarWidget', {
extend: 'Ext.ProgressBarWidget',
xtype: 'fiddle-progressbarwidget',
template: [{
reference: 'backgroundEl'
}, {
reference: 'barEl'
}, {
reference: 'textEl',
style: {
left: 0,
right: 0
}
}],
});
Working example: https://fiddle.sencha.com/#fiddle/1dn4
The definitive solution is to add an onResize handler on the progress bar container:
onResize: function () {
var me = this,
progressBar = me.down('progressbarwidget');
// Set text width to element width so that it can be centered
progressBar.setWidth(progressBar.el.getWidth());
}
This idea is copied from what happens in Ext.grid.column.Widget.onResize().
The solution from user CD.. doesn't work (nor does the one in user2751034 comment)
in the case you have two-color-text, like in Classic theme:
even if you reproduce the template in Sencha sources (with textEl children of barEl):
I want to set a three color gradient in a qooxdoo widgets decorator. The relevant CSS is
linear-gradient(rgba(255,255,255,0.2) 0,
rgba(255,255,255,0.8) 30px,
rgba(255,255,255,0.6) 100%);
I wan't to achieve the hover effect in the icons in this page http://njdesktop.nagyervin.eu/
What I tried so far:
in my theme.Color file I defined three colors
"desktop-icon-top": qx.core.Environment.get("css.rgba") ? "rgba(255, 255, 255, 0.2)" : "white",
"desktop-icon-middle": qx.core.Environment.get("css.rgba") ? "rgba(255, 255, 255, 0.8)" : "white",
"desktop-icon-end": qx.core.Environment.get("css.rgba") ? "rgba(255, 255, 255, 0.6)" : "white"
but qx.ui.decoration.MLinearBackgroundGradient has properties only for gradient start and gradient end. Not for the middle.
I also tried to set it directly in the styles of theme.Decoration
"desktop-icon-hovered": {
style: {
radius: 5,
width: 2,
backgroundColor: "transparent",
color: "white",
// gradientStart: ["desktop-icon-middle", 30],
// gradientEnd: ["desktop-icon-end", 70]
backgroundImage: "linear-gradient(rgba(255,255,255,0.2) 0,rgba(255,255,255,0.8) 30px,rgba(255,255,255,0.6) 100%)"
}
but this doesn't render a gradient at all.
The only way I can do this is by using setStyle() in code but this means I will have to mess with event listeners and I won't be taking advantage of the decorator mechanism. Plus it feels ugly.
So how can I use three colors decorator in the Decoration.js?
If you are not worried about backward compatibility with older browsers then this should work:
Qooxdoo Playground Example
Put simply, you first create a Decorator Mixin that creates a property for your app code to access using the decorator mechanism.
Within your Application code you then include the new Mixin into your app's decorator class.
Run the generate.py source on your app. Then set your controls decorator property either directly or via the Decoration class and your set.
I'm trying to use the numeric textbox from kendo, in Angular, inside a kendo grid. Binding the data with my angular object doesn't work. I tried to put an "editor" field in the columns object, or even to do it with a jQuery command (which I know is bad)like this:
$('.editable').kendoNumericTextBox()
but it never works..
Instead of using the template in the columns object, use the editor attribute:
{
field: "fieldName",
title: "Field Title",
width: "90px",
editor: numberEditor
}
The numberEditor is a function which you can implement as following:
function numberEditor(container, options) {
$('<input name="' + options.field + '"/>')
.appendTo(container)
.kendoNumericTextBox({
decimals: 0, // Settings for the editor, e.g. no decimals
step : 1, // Defines how the up/down arrows change the value
min : 0 // You can also define min/max values
});
}
first paremeter is the filename and second is docDefinition(which value i will pass in second parameter) still confuse?
please help me out
The second parameter is an object that have all the options of "pdfmake".
The most fundamental concept to be mastered is the
document-definition-object which can be as simple as:
var docDefinition = { content: 'This is an sample PDF printed withpdfMake' };
or become pretty complex (having multi-level tables,
images, lists, paragraphs, margins, styles etc...).
You can check the documentation on Github https://github.com/bpampuch/pdfmake and do it more complex.
But if you use the function pdfExport, this one create the object with the data grid and it is more easy, Try this:
$scope.gridApi.exporter.pdfExport( uiGridExporterConstants.ALL, uiGridExporterConstants.ALL );
And they have more options that you can change in gridOptions:
exporterPdfDefaultStyle:{ fontSize: 11 },
exporterPdfFilename: 'filename.pdf',
exporterPdfTableHeaderStyle: { bold: true, fontSize: 12, color: 'black' },
exporterPdfTableStyle : { margin: [0, 5, 0, 15] },
exporterPdfHeader : null,
exporterPdfFooter : null,
gridOptions.exporterPdfOrientation : 'landscape',
etc...
There is a working example in leaflet site for adding WMS Layer in leaflet map at :
http://leafletjs.com/reference.html#tilelayer-wms. But I don't see methods to provide the filter for bounding box.
Is there a way to provide bounding box filters for Leaflet WMS ?
Just add bbox: [-180,-90,180,90] to the L.tileLayer.wms options.
Example:
var layer_SOEST_SurfaceTemp = L.tileLayer.wms("http://...............", {
layers: 'tmpsfc',
format: 'image/png',
transparent: true,
opacity: 0.5,
crs: L.CRS.EPSG4326,
bbox: [-180,-90,180,90],
styles: 'boxfill/alg',
attribution: "SOEST Hawaii",
time : forecast_datetime,
version : '1.3.0'
});
Just add the desired parameters to your L.tileLayer.wms options even if not shown in the API... Thoses parameters will be passed anyway to your map server and if this server support bbox or any others parameters provided it will return you the correct tiles...
You can use the option bounds to filter.
If set, tiles will only be loaded inside the set LatLngBounds.
L.TileLayer and L.TileLayer.WMS are both extending L.GridLayer, so the same options can used: https://leafletjs.com/reference-1.7.1.html#gridlayer-bounds
var nexrad = L.tileLayer.wms("URL.COM", {
layers: 'LAYER_NAME',
format: 'image/png',
transparent: true,
attribution: "Weather data © 2012 IEM Nexrad",
bounds: L.latLngBounds([[1,0],[0,1]])
});