Hello, I am creating a custom dashboard node (custom chart based on d3 library) by using addWidget API. To get my chart displayed correctly inside the group (meaning to avoid my chart being too big and displayed the scroll bars), I need to take into account the 1x1 Widget sizes (sx, sy), the Widget Spacing (cx, cy), and the group Padding (px, py) from the dashboard/Site panel. Today my chart is working fine only for default values, as I use hard coded default values(48x48, 6x6, 0x0) inside my custom chart code. Is there a way to retrieve these sizes to avoid using hard coded values ?
Hi Thierry,
I'm not a layout expert, but I got some good feedback from the community some time ago. Perhaps you get a better understanding of your issue by reading that post …
Bart
Hi Bart,
Thanks for the pointer, but it doesn't help me so much as I really need to retrieve the exact sizes in pixel to perform a svg drawing.
Thierry
Hi,
as long as you have the ui object you should be able to both
var sizes = ui.getSizes();
var theme = ui.getTheme();Not really. For custom ui widgets what is exposed is only from node-red-dashboard/index.js
module.exports = function (RED) {
return {
addWidget: function (options) {
return addWidget(RED, options);
}
};
};
Or I cant really understand anything 
Ah right (paging memory back in)...
Yes maybe change that to
module.exports = function (RED) {
return {
addWidget: function (options) {
return addWidget(RED, options);
},
getSizes: function() { return require("./ui")(RED).getSizes(); },
getTheme: function() { return require("./ui")(RED).getTheme(); }
};
};
If that is workable / makes sense, can make it permanent in next release 
Tried it and it's working very well
if (ui === undefined) {
ui = RED.require("node-red-dashboard")(RED);
}
console.log("sizes -> ",ui.getSizes());
console.log("theme -> ",ui.getTheme());
And we get nice output :
sizes -> { sx: 48, sy: 48, gx: 4, gy: 4, cx: 4, cy: 4, px: 4, py: 4 }
theme -> { 'base-color': { default: '#097479', value: '#0b772e', edited: true },
'page-titlebar-backgroundColor': { value: '#0b772e', edited: false },
'page-backgroundColor': { value: '#111111', edited: false },
'page-sidebar-backgroundColor': { value: '#000000', edited: false },
'group-textColor': { value: '#11bd49', edited: false },
'group-borderColor': { value: '#555555', edited: false },
'group-backgroundColor': { value: '#333333', edited: false },
'widget-textColor': { value: '#eeeeee', edited: false },
'widget-backgroundColor': { value: '#0b772e', edited: false },
'widget-borderColor': { value: '#333333', edited: false },
'base-font':
{ value:
'-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif' } }
Absolutely. 
Yes it works also for me. Thanks
Great, will make it part of master today, but you will need to code defensively around it for a while until released and people have had time to upgrade..
Of course, thanks again.
The last remaining issue I was still facing to correctly layout my custom node (and avoid scroll bar to be displayed) was due to the padding applied to the parent md-card coming from .nr-dashboard-template css rules from app.min.less file:
@nrUnitHeight: 24px;
.nr-dashboard-template {
padding: (@nrUnitHeight / 8) 6px;
}
@nrUnitHeight might also be computed from app.min.js to sizes.sy/2
Taking these paddings into account, my custom node layout is now correct.
1 Like
@dceejay, is this going to work inside a function node? It could answer the question I raised in Custom icon color in dashboard switch widget.
No. This is about creating custom ui_nodes for node-red-dashboard.
Github page with deep explanation here
Correct. General function nodes no nothing about ui.
Category of this topic should be "Creating nodes"
Got it, thanks. So I can imagine a custom ui node that gets theme information from the ui and sends it back to the runtime? Is that too weird?
Lets pretend custom ui_widget, that shows nice sun image on daytime and moon image at night time and may be time in text form. That text must have some color. Dashboard has theme where is defined default text color (smart way as for dark theme the light text color is chosen). User can change theme. Custom node knows nothing about and can't predict this kind of changes. Also the node can not know what color other nodes use but for nice look they all usually use same color. So such kind of properties needs to be available to ask at the time the node initializes.
Hey Dave (@dceejay),
Have you any idea in which dashboard version this feature has been released? We need it also, and then we can put on our readme page that it only works starting from version xxx...
Thanks!
[EDIT]
I see in the output from @hotNipi that there are no colors related to a disabled widget. Isn't that kind of information available in a Theme, or does this output contain only a subset of the available information??
