Related
i have about 10 objects that filters can be applied to, and a filter engine that goes through them one by one and applies filters to each.
import { fabric } from 'fabric'
const filters = {
brightness: new fabric.Image.filters.Brightness(),
premade: new fabric.Image.filters.ColorMatrix(),
}
const addFilter = (canvas, index, value = null) => {
let pickedFilter
let objects = canvas.getObjects()
switch (index) {
case 1:
pickedFilter = sepia
break;
case 8:
pickedFilter = brightness
break;
default:
break;
}
objects.forEach((o) => {
if (o.filters) {
if (!o.filters[0]) {
o.filters.push(filters.brightness)
o.filters.push(filters.premade)
}
pickedFilter(o, value)
}
});
canvas.renderAll();
}
export default addFilter
function sepia(o){
let value = [
0.67, 0, 0, 0, 0,
0, 0.54, 0, 0, 0,
0, 0, 0.4, 0, 0,
0, 0, 0, 1, 0
]
delete filters.contrast.contrast
delete filters.premade.matrix
filters.premade.matrix = value
o.applyFilters()
}
function brightness(o, value) {
value = (value / 100) / 2
filters.brightness.brightness = value
o.applyFilters()
}
initally when objects don't have filter at filters[0], i go ahead and push the filters.
later on when the user moves the slider like in this gif, i go through each object and if it can have filters i go ahead and change the value of filter and then apply the filters. as you can see it's a bit laggy and i think the biggest problem is that there are multiple objects that filters are applied to.
in this gif, i get rid of all objects but one and i can feel that the performance is better, but the problem is that i need to apply the filters to all of the objects.
i tried running the code inside filter functions only once (for example i put the value asignment, deletion of previous value and value asignment inside sepia funtion, outside the loop), but it didn't change anything.
how can i improve the performance and make it less laggy?
In Chart.js I am unable to set a color for the tooltip.I want to color the label "December 2016" as same as the color of the legend (Blue).
Please see below;
graphOptions.tooltips = {
enabled: true,
mode: 'single',
displayColors: false,
callbacks: {
title: function (tooltipItem, data) {
if (tooltipItem.length > 0) {
return tooltipItem[0].xLabel + ': ' + tooltipItem[0].yLabel +" Scans";
}
return "";
},
label: function (tooltipItem, data) {
if (data.datasets.length > 0) {
return data.datasets[tooltipItem.datasetIndex].label;
}
return '';
},
labelColor: function (tooltipItem, chartInstace) {
if (data.length > 0) {
return data[tooltipItem.datasetIndex].backgroundColor;
}
}
}
};
You haven't defined anything called data in the labelColor callback function. Another confusion with this callback in charts.js, is the second parameter passed to the labelColor callback function is the chart instance, and not the datasets like some of the other chartjs callbacks.
Anyway, this should work.
labelColor: function(tooltipItem, chart) {
var dataset = chart.config.data.datasets[tooltipItem.datasetIndex];
return {
backgroundColor : dataset.backgroundColor
}
}
You might want to try with labelTextColor instead of labelColor
This is a feature available since Chartjs 2.7
https://github.com/chartjs/Chart.js/releases/tag/v2.7.0
(Feature #4199)
labelTextColor: function(tooltipItem, chart) {
if (chart.tooltip._data.datasets[tooltipItem.datasetIndex].label === "amount")
{
return "#1ff368";
}
if (chart.tooltip._data.datasets[tooltipItem.datasetIndex].label ==="transactions") {
return "#8577ec";
}
}
just type your chart label like "amount" and then modify your colors in hand
Actually, the problem is that in labelColor callback you returning the backgroundColor. Below is the right return type of above callback method.
function (tooltipItem, chartInstance) {
return {
borderColor: borderColor,
backgroundColor: backgroundColor
};
}
In backgroungColor assign the color for the label. and you can leave the borderColor.
[Sample-Code]
labelColor : function(tooltipItem, chartInstance){
return {
backgroundColor : data.datasets[tooltipItem.datasetIndex].backgroundColor[0]
};
}
Actually, if your dataset color is just an item and not an array this you shall not need an extra tooltip callback eg.
Single color intepreted as the one shown in the tooltip automatically
const myDataset = {
label: 'My dataset',
data: [1,2.3,4,-5],
fill: true,
// this will show the tooltip with red color
backgroundColor: '#e23944',
borderColor: 'blue'
}
instead of
Array of colors not intepreted as the one shown in the tooltip
const myDataset = {
label: 'My dataset',
data: [1,2.3,4,-5],
fill: true,
// need to remove the array of color here
backgroundColor: ['#e23944'],
borderColor: ['blue']
}
According to the screenshot, you have only one dataset matching one color, so you don't need to put the colors as an array. If you need to set multiples points within the same dataset using different colors, then you shall use
Array of colors distributed to each data points
const myDataset = {
label: 'My dataset',
data: [1,2.3,4,-5],
fill: true,
// need to remove the array of color here
backgroundColor: ['#e23944', '#D4E157', '#26A69A', '#758BE2'],
borderColor: ['blue', 'green', 'white', 'dark']
}
But then you shall forgot this solution ^^ and adopt the one given above ;)
PS :For border and background colors you can use hexa, rbg or string notations.
Hope it helps :)
'tooltipItem' doesn't exists, misspelling the final 's'. So, your code should be
labelColor : function(tooltipItem, chartInstance){
return {
backgroundColor : data.datasets[tooltipItems.datasetIndex].backgroundColor[0]
};
}
I'm relatively new to js and now have to implement a handsontable into our project.
This worked well so far, but I am hitting a roadblock with globalization.
Basically, we use comma as a decimal seperator, but when I try and copy something like "100,2" into a cell designated as 'numeric,' it will show as 1002.
If the same value is entered in a cell designated as 'text' and the type is changed to numeric afterwards, the value will be shown correctly.
For this I already had to add 'de' culture to the table sourcecode.(basically copying 'en' and changing the values currently relevant to me.)
numeral.language('de', {
delimiters: {
thousands: '.',
decimal: ','
},//other non-relevant stuff here
When I copy the values directly from the table and insert them to np++ they show as 100.2 etc. However, when inserting them into handsontable the arguments-array looks as follows:
[Array[1], "paste", undefined, undefined, undefined, undefined]
0: Array[4]
0: 1 //row
1: 1 //column
2: "100.2" //previous value
3: 1002 //new value
Here's what I have tried currently:
hot.addHook("beforeChange", function () {
if (arguments[1] === "paste") {
hot.updateSettings({
cells: function (row, col, prop) {
var cellProperties = {
type: 'numeric',
language: 'en'
};
return cellProperties;
}
});
//hot.updateSettings({
// cells: function (row, col, prop) {
// var cellProperties = {
// type: 'text',
// };
// return cellProperties;
// }
//});
}
}, hot);
hot.addHook("afterChange", function () {
if (arguments[1] === "paste") {
ChangeMatrixSettings(); //reset cell properties of whole table
}
}, hot);
I hope I've made my problem clear enough, not sure if I missed something.
Are there any other ways to get the correct values back into the table? Is this currently not possible?
Thanks in advance.
You asked more than one thing, but let me see if I can help you.
As explained in handsontable numeric documentation, you can define a format of the cell. If you want '100,2' to be shown you would format as follows
format: '0.,'
You can change that to what you really need, like if you are looking for money value you could do something like
format: '0,0.00 $'
The other thing you asked about is not on the latest release, but you can check it out how it would work here
I have since implemented my own validation of input, due to other requirements we have for the table mainly in regards to showing invalid input to user.
function validateInputForNumeric(parameter) {
var value = parameter[3];
var row = parameter[0];
var col = parameter[1];
if (decimalSeperator === '') {
var tmpculture = getCurrCulture();
}
if (value !== null && value !== "") {
if (!value.match('([a-zA-Z])')) {
if (value.indexOf(thousandSeperator) !== -1) {
value = removeAndReplaceLast(value, thousandSeperator, ''); //Thousandseperators will be ignored
}
if (value.indexOf('.') !== -1 && decimalSeperator !== '.') {
//Since numeric variables are handled as '12.3' this will customize the variables to fit with the current culture
value = removeAndReplaceLast(value, '.', decimalSeperator);
}
//Add decimalseperator if string does not contain one
if (numDecimalPlaces > 0 && value.indexOf(decimalSeperator) === -1) {
value += decimalSeperator;
}
var index = value.indexOf(decimalSeperator)
var zerosToAdd = numDecimalPlaces - (value.length - index - 1);
for (var j = 0; j < zerosToAdd; j++) {
//Add zeros until numberOfDecimalPlaces is matched for uniformity in display values
value += '0';
}
if (index !== -1) {
if (numDecimalPlaces === 0) {
//Remove decimalseperator when there are no decimal places
value = value.substring(0, index)
} else {
//Cut values that have to many decimalplaces
value = value.substring(0, index + 1 + numDecimalPlaces);
}
}
if (ErrorsInTable.indexOf([row, col]) !== -1) {
RemoveCellFromErrorList(row, col);
}
} else {
AddCellToErrorList(row, col);
}
}
//console.log("r:" + row + " c:" + col + " v:" + value);
return value;
}
The inputParameter is an array, due to handsontable hooks using arrays for edit-events. parameter[2] is the old value, should this be needed at any point.
This code works reasonably fast even when copying 2k records from Excel (2s-4s).
One of my main hindrances regarding execution speed was me using the handsontable .getDataAtCell and .setDataAtCell methods to check. These don't seem to handle large tables very well ( not a critique, just an observation ). This was fixed by iterating through the data via .getData method.
I have a table pre-populated with the company LAN IP addresses with fields for associated data, status, etc. The (jquery-)jtable fields collection is configured like this.
fields: {
id: { title: 'ID'},
ip: { title: 'IP address, edit: false }
more: { ... }
}
This works but the problem is that when the edit dialog pops up the user can't see the ip address of the record being edited as jtable's edit form doesn't show the field.
I've read through the documentation but can't see any way to display a field as read-only in the edit form. Any ideas?
You don't need to hack the jTable library asset, this just leads to pains when you want to update to a later version. All you need to do is create a custom input via the jTable field option "input", see an example field setup to accomplish what you need here:
JobId: {
title: 'JobId',
create: true,
edit: true,
list: true,
input: function (data) {
if (data.value) {
return '<input type="text" readonly class="jtable-input-readonly" name="JobId" value="' + data.value + '"/>';
} else {
//nothing to worry about here for your situation, data.value is undefined so the else is for the create/add new record user interaction, create is false for your usage so this else is not needed but shown just so you know when it would be entered
}
},
width: '5%',
visibility: 'hidden'
},
And simple style class:
.jtable-input-readonly{
background-color:lightgray;
}
I have simple solution:
formCreated: function (event, data)
{
if(data.formType=='edit') {
$('#Edit-ip').prop('readonly', true);
$('#Edit-ip').addClass('jtable-input-readonly');
}
},
For dropdown make other options disabled except the current one:
$('#Edit-country option:not(:selected)').attr('disabled', true);
And simple style class:
.jtable-input-readonly{
background-color:lightgray;
}
I had to hack jtable.js. Start around line 2427. Changed lines are marked with '*'.
//Do not create element for non-editable fields
if (field.edit == false) {
//Label hack part 1: Unless 'hidden' we want to show fields even though they can't be edited. Disable the 'continue'.
* //continue;
}
//Hidden field
if (field.type == 'hidden') {
$editForm.append(self._createInputForHidden(fieldName, fieldValue));
continue;
}
//Create a container div for this input field and add to form
var $fieldContainer = $('<div class="jtable-input-field-container"></div>').appendTo($editForm);
//Create a label for input
$fieldContainer.append(self._createInputLabelForRecordField(fieldName));
//Label hack part 2: Create a label containing the field value.
* if (field.edit == false) {
* $fieldContainer.append(self._myCreateLabelWithText(fieldValue));
* continue; //Label hack: Unless 'hidden' we want to show fields even though they can't be edited.
* }
//Create input element with it's current value
After _createInputLabelForRecordField add in this function (around line 1430):
/* Hack part 3: Creates label containing non-editable field value.
*************************************************************************/
_myCreateLabelWithText: function (txt) {
return $('<div />')
.addClass('jtable-input-label')
.html(txt);
},
With the Metro theme both the field name and value will be grey colour.
Be careful with your update script that you're passing back to. No value will be passed back for the //edit: false// fields so don't include them in your update query.
A more simple version for dropdowns
$('#Edit-country').prop('disabled',true);
No need to disable all the options :)
In trying to implement a filterToolbar search in jquery, but when I write in the textbox it doesnt send the value, the search field nor the operator: I used an example, here is the code in html file
jQuery(document).ready(function () {
var grid = $("#list");
$("#list").jqGrid({
url:'grid.php',
datatype: 'xml',
mtype: 'GET',
deepempty:true ,
colNames:['Id','Buscar','Desccripcion'],
colModel:[
{name:'id',index:'id', width:65, sorttype: 'int', hidden:true, search:false},
{name:'examen',index:'nombre', width:500, align:'left', search:true},
{name:'descripcion',index:'descripcion', width:100, sortable:false, hidden:true, search:false}
],
pager: jQuery('#pager'),
rowNum:25,
sortname: 'nombre',
sortorder: 'asc',
viewrecords: true,
gridview: true,
height: 'auto',
caption: 'Examenes',
height: "100%",
loadComplete: function() {
var ids = grid.jqGrid('getDataIDs');
for (var i=0;i<ids.length;i++) {
var id=ids[i];
$("#"+id+ " td:eq(1)", grid[0]).tooltip({
content: function(response) {
var rowData = grid.jqGrid('getRowData',this.parentNode.id);
return rowData.descripcion;
},
open: function() {
$(this).tooltip("widget").stop(false, true).hide().slideDown("fast");
},
close: function() {
$(this).tooltip("widget").stop(false, true).show().slideUp("fast");
}
}).tooltip("widget").addClass("ui-state-highlight");
}
}
});
$("#list").jqGrid('navGrid','#pager',{edit:false,add:false,del:false});
$("#list").jqGrid('filterToolbar', {stringResult: true, searchOnEnter: false,
defaultSearch: 'cn', ignoreCase: true});
});
and in the php file
$ops = array(
'eq'=>'=', //equal
'ne'=>'<>',//not equal
'lt'=>'<', //less than
'le'=>'<=',//less than or equal
'gt'=>'>', //greater than
'ge'=>'>=',//greater than or equal
'bw'=>'LIKE', //begins with
'bn'=>'NOT LIKE', //doesn't begin with
'in'=>'LIKE', //is in
'ni'=>'NOT LIKE', //is not in
'ew'=>'LIKE', //ends with
'en'=>'NOT LIKE', //doesn't end with
'cn'=>'LIKE', // contains
'nc'=>'NOT LIKE' //doesn't contain
);
function getWhereClause($col, $oper, $val){
global $ops;
if($oper == 'bw' || $oper == 'bn') $val .= '%';
if($oper == 'ew' || $oper == 'en' ) $val = '%'.$val;
if($oper == 'cn' || $oper == 'nc' || $oper == 'in' || $oper == 'ni') $val = '%'.$val.'%';
return " WHERE $col {$ops[$oper]} '$val' ";
}
$where = ""; //if there is no search request sent by jqgrid, $where should be empty
$searchField = isset($_GET['searchField']) ? $_GET['searchField'] : false;
$searchOper = isset($_GET['searchOper']) ? $_GET['searchOper']: false;
$searchString = isset($_GET['searchString']) ? $_GET['searchString'] : false;
if ($_GET['_search'] == 'true') {
$where = getWhereClause($searchField,$searchOper,$searchString);
}
I saw the query, and $searchField,$searchOper,$searchString have no value
But when I use the button search on the navigation bar it works! I dont konw what is happening with the toolbarfilter
Thank You
You use the option stringResult: true of the toolbarfilter. In the case the full filter will be encoded in filters option (see here). Additionally there are no ignoreCase option of toolbarfilter method. There are ignoreCase option of jqGrid, but it works only in case of local searching.
So you have to change the server code to use filters parameter or to remove stringResult: true option. The removing of stringResult: true could be probably the best way in your case because you have only one searchable column. In the case you will get one additional parameter on the server side: examen. For example if the user would type physic in the only searching field the parameter examen=physic will be send without of any information about the searching operation. If you would need to implement filter searching in more as one column and if you would use different searching operation in different columns you will have to implement searching by filters parameter.
UPDATED: I wanted to include some general remarks to the code which you posted. You will have bad performance because of the usage
$("#"+id+ " td:eq(1)", grid[0])
The problem is that the web browser create internally index of elements by id. So the code $("#"+id+ " td:eq(1)") can use the id index and will work quickly. On the other side if you use grid[0] as the context of jQuery operation the web browser will be unable to use the index in the case and the finding of the corresponding <td> element will be much more slowly in case of large number rows.
To write the most effective code you should remind, that jQuery is the wrapper of the DOM which represent the page elements. jQuery is designed to support common DOM interface. On the other side there are many helpful specific DOM method for different HTML elements. For example DOM of the <table> element contain very helpful rows property which is supported by all (even very old) web browsers. In the same way DOM of <tr> contains property cells which you can use directly. You can find more information about the subject here. In your case the only thing which you need to know is that jqGrid create additional hidden row as the first row only to have fixed width of the grid columns. So you can either just start the enumeration of the rows from the index 1 (skipping the index 0) or verify whether the class of every row is jqgrow. If you don't use subgrids or grouping you can use the following simple code which is equivalent your original code
loadComplete: function() {
var i, rows = this.rows, l = rows.length;
for (i = 1; i < l; i++) { // we skip the first dummy hidden row
$(rows[i].cells(1)).tooltip({
content: function(response) {
var rowData = grid.jqGrid('getRowData',this.parentNode.id);
return rowData.descripcion;
},
open: function() {
$(this).tooltip("widget").stop(false, true).hide().slideDown("fast");
},
close: function() {
$(this).tooltip("widget").stop(false, true).show().slideUp("fast");
}
}).tooltip("widget").addClass("ui-state-highlight");
}
}