What is the correct syntax?
popscreen.setAttribute('geometry','primitive','plane');
popscreen.setAttribute('geometry','primitive:plane');
I can't seem to get either to work, so maybe it's something else? No primitive is applied.
Also, when I've tried this:
popscreen.setAttribute('geometry', { 'primitive': 'plane', width: '5', height: '5'});
... the height and width are set, but the primitive is not.
I'm having similar problems with text, but instead I get this error:
components:text:error TypeError: Cannot read property 'layout' of null
For this code:
popscreen.setAttribute('text', 'color', 'white');
Thank you!
Make sure those methods are called, because those methods are working fine (live fiddle here)
Either
setAttribute('geometry','primitive','plane');
for a single attribute change, or
setAttribute('geometry', { 'primitive': 'plane', 'width': '5', 'height': '5'});
for changing multiple attributes
Related
I'm trying to provide dynamic styling to a MatHeaderCell instance like this:
[ngStyle]="styleHeaderCell(c)"
I've created a demo here.
I can see that:
styleHeaderCell(c)
Receives the column and returns and object however the style is not applied, and so the column still has a min width of 12rem and I want it to be 4rem. Thoughts?
It appears to be a syntax issue in your styles helper function.
Give this a try.
public styles: any = {
ID: {
'min-width': '4rem',
'background-color': 'red'
}
};
STACKBLITZ
https://stackblitz.com/edit/angular-material-data-table-module-styling-7vhrth?file=src/app/app.component.ts
It seems that evaluated color strings are not working with some built-in LESS functions.
I have tried using e() and ~"" and any combination of both.
I might find a workaround for my particular case, I’m just asking if this is this expected behaviour, or if there is a fault in my reasoning? Any insight appreciated.
For example here, the color is created from an evaluated string; note the 'missing' # in the hex value that gets added later :
.broken-mixin(#hexcode: '9719e1') {
#color: e("##{hexcode}");
// this works as expected
background-color: #color;
// this does work too
.very-simple-mixin(#color);
// Undefined_methodError: error evaluating function `fade`:
// Object #<Object> has no method 'toHSL'
background-color: fade(#color,30%);
// SyntaxError: error evaluating function `red`:
// Cannot read property '0' of undefined
background-color: rgba(red(#color), green(#color), blue(#color), 0.5);
}
Otherwise built-in functions work normally work with variables in mixins, for example :
.mixin-works(#myColor: #00ff00) {
// works just fine
background-color: fade(#myColor,30%);
// or this, works too
background-color: rgba(red(#myColor), green(#myColor), blue(#myColor), 0.5);
}
What am I missing ?
Quoting the LESS website's Function Reference:
fade
Set the absolute transparency of a color. Can be applied to colors whether they already have an opacity value or not.
Parameters:
color: A color object.
amount: A percentage 0-100%.
The fade function requires a color object as input to it and hence passing an evaluated string as a parameter to the function doesn't work.
It can be solved by using the built-in color function which converts a string into an equivalent color object like below:
background-color: fade(color("#{color}"),30%);
The other built-in functions also are not working for the same reason (that is, they expect a color object as an input).
red:
Extracts the red channel of a color object.
Parameters: color - a color object.
It seems that evaluated color strings are not working with some built-in LESS functions.
I have tried using e() and ~"" and any combination of both.
I might find a workaround for my particular case, I’m just asking if this is this expected behaviour, or if there is a fault in my reasoning? Any insight appreciated.
For example here, the color is created from an evaluated string; note the 'missing' # in the hex value that gets added later :
.broken-mixin(#hexcode: '9719e1') {
#color: e("##{hexcode}");
// this works as expected
background-color: #color;
// this does work too
.very-simple-mixin(#color);
// Undefined_methodError: error evaluating function `fade`:
// Object #<Object> has no method 'toHSL'
background-color: fade(#color,30%);
// SyntaxError: error evaluating function `red`:
// Cannot read property '0' of undefined
background-color: rgba(red(#color), green(#color), blue(#color), 0.5);
}
Otherwise built-in functions work normally work with variables in mixins, for example :
.mixin-works(#myColor: #00ff00) {
// works just fine
background-color: fade(#myColor,30%);
// or this, works too
background-color: rgba(red(#myColor), green(#myColor), blue(#myColor), 0.5);
}
What am I missing ?
Quoting the LESS website's Function Reference:
fade
Set the absolute transparency of a color. Can be applied to colors whether they already have an opacity value or not.
Parameters:
color: A color object.
amount: A percentage 0-100%.
The fade function requires a color object as input to it and hence passing an evaluated string as a parameter to the function doesn't work.
It can be solved by using the built-in color function which converts a string into an equivalent color object like below:
background-color: fade(color("#{color}"),30%);
The other built-in functions also are not working for the same reason (that is, they expect a color object as an input).
red:
Extracts the red channel of a color object.
Parameters: color - a color object.
I am specifying the cytoscape.js style via css (and converting to the JSON format using this). I am trying to use a discrete mapper for the style. Similar to How to use a descreteMapper like on cytoscapeweb? but I don't want to just pass through the data(blah) value, I want to set different values based on different data(blah) values. Like this (which I based off what I found here)
node {
color : {
defaultValue: red,
discreteMapper: {
attr: n_phosphorylated,
mapped: {
true: blue
}
}};
}
I am getting TypeError: element._private.style.color.value is undefined. Do I have the syntax wrong or is this not supported?
Found the answer from this comment:
How to create custom style mapping in cytoscape.js?
The correct way is to use selectors based on the data:
node[?n_phosphorylated] {
color: blue;
}
Here the ? operator means (roughly) n_phosphorylated=true.
Thanks Max
It seems like it should be so simple, but I simply cannot get this done (I don't even need it done dynamically). For example, suppose I have a simple 2 column grid setup like so:
columns : [
{header: 'USER', dataIndex: 'firstName', width:70, cls: 'red'},
{header: 'CATEGORY', dataIndex: 'category', width:100}
]
The cls: 'red' attribute only effects the header and not the actual column. I have seen elsewhere that I should be using a custom renderer (maybe), but if I try something like:
{header: 'USER', dataIndex: 'firstName', width:70,
renderer: function(value) {
this.addCls('red');
return value;
}
}
I still get the boring white background. I have also seen people using a renderer function definition like so : function(value, metadata, record, rowIndex, colIndex, store), but when I used an alert() to test the input parameters I get undefined for everything except value, which makes me believe that maybe this was only valid for versions before ExtJs 4.
I also tried returning something like '<span class="red">' + value + '</span>' in my renderer function, but this only highlighted the text, rather than change the entire background of the column.
I do not want to override the default Ext css classes because I want to apply the background colors to a specific grid in the app, and not all of them.
Furthermore, all the columns of the grid in question may have different colors (note that in the example I only added the class to the first column).
Assume that red is defined as .red {background:#FF0000;} in my css file.
While the grid-faq suggested by atian25 does not apply to ExtJs 4, I was able to use it to guide me towards the correct answer to my question.
In the javascript, add an ID attribute to your column definition:
{header: 'SomeHeader', id: 'myColumn' dataIndex: 'theData'}
This will generate the following css class for all the td elements in that column:
.x-grid-cell-myColumn
In your css file (which must be loaded after the Ext css file) add the following definition:
.x-grid-table .x-grid-cell-myColumn {background:#FF0000;}
And bingo, you have a bright red background for said column. Using this same technique you can customize individual columns any way you want.
NOTE: without using the .x-grid-table selector the "row" classes specificity will win. You will also need to redefine .x-grid-row-over if you want to maintain a hover effect over your custom column.
Add a tdCls attribute to your column header definition, with a value of the CSS class you want to use.
columns : [
{header: 'USER', dataIndex: 'firstName', width:70, tdCls: 'red'},
{header: 'CATEGORY', dataIndex: 'category', width:100}
]
you'd better read this: http://www.sencha.com/learn/grid-faq/
the section 'To modify a cell/row/column'
The goal is to apply one cls to column, which I did with getRowClass and then remove it after 1-2 sec. The websync is pushing new data every 5 seconds, so when this changes to cell appear, it should be like a blink of a changed column(cell), that goes back to "white"(default) before new data refresh? The value assigned to compare new records with is 0, but in a real case is last value that is being compared!