Backdrops

Harmony Harmony Feature Requests
1

The colors offered for node backdrops are these bright saturated basic colors that are overpowering. Apart from being garish they compete with their content. An outlined box or a band across the top of each box using these same colors would be an improvement, especially considering the trend towards dark interfaces.

Please consider changing the design to look more like the blueprint in Unreal Engine. The grid is a bonus.

UnRealBlueprint.jpg
UnRealBlueprint.jpg800×337 28.3 KB

2

I came here to suggest something similar, so am bumping this existing topic rather than starting a new one. Though I’m kind of flabbergasted that this post got zero traction in 6 years.

The selection of backdrop colours is just awful. Many of them are retina-searingly out of gamut and dominate the actual nodes. Yet it’s hard to avoid using some of them because the variety is otherwise very limited. For example, there are two barely distinguishable dark blues and two similar hot pinks, yet no light grey, mid grey, or low-saturation colours of any kind.

Please give us the ability to customise them - even if it’s just through editing #hex values in an xml file somewhere.

On a related topic, please also give us the ability to change the color of deactivated nodes. Most other node types can already be changed, but deactivated nodes are hard-coded to be displayed in the most ferocious shade of red available. Which, as with the backdrops, means that your eye is inappropriately drawn away from the actual content, to an element that shouldn’t be stealing the limelight.

3

Since posting above, I’ve discovered that you can control backdrop colours with scripting. I’m terrible at scripting, but I suffered through it and managed to cobble together something that works, which I’ll share in case it helps out any future googlers. The following script will create a new backdrop like the one pictured below. (Create copies of the script with different RGB values for differently coloured backdrops)

This script has the following limitations:

  • It will create the backdrop on one particular spot, even if your node view is miles away from that spot.
  • It will always create the backdrop in the root view, even if you are inside a group when triggering the script
  • It will deselect the backdrop on creation, so it’ll ‘lock down’ and take ownership of any nodes that find themselves inside it. Alt-click the backdrop to move it away on its own.

I tried to figure out the above issues, but failed. If someone who knows more about scripting can chime in with some improvements to the code, that would be warmly appreciated!

 function Biege_Backdrop(){
 // Use RED, GRN, BLU values to set backdrop color
 var RED = 179
 var GRN = 167
 var BLU = 129
 
var newBackdrop = {  
"position"    : {"x": -100, "y" :-100, "w":350, "h":250},    
"color"       : ((255 & 0xff) << 24) | ((RED & 0xff) << 16) | ((GRN & 0xff) << 8) | (BLU & 0xff) };
Backdrop.addBackdrop("Top", newBackdrop);
	}
1 Like
4

I can’t seem to edit my post, so am making a new post, with an updated version of the script. The new script has the following improvements:

  • It now works in groups, and not just in the root view
  • It moves most of the code into a helper function, leaving the main function with just a single line. This makes it simpler to copy and paste multiple versions of the function for different color backdrops.
  • Before creating the backdrop, it will check whether an existing backdrop is already in that exact spot, and will bump the new backdrop location accordingly. This makes life easier when creating a bunch of backdrops in one go, as it will stagger them out so you can immediately see and/or grab any of them.

// You can create copies of these next two functions, with different RGB values, to be able to create differently colored backdrops. 
// Then add the scripts as buttons to your toolbar. Each function must have a unique name.

 function Biege_Backdrop(){
 // The first three parameters are the Backdrop's RGB. The final parameter (optional) is the backdrop's title
 private_createBackdrop(179, 167, 129,"")
}	
	
 function Teal_Backdrop(){
 // The first three parameters are the Backdrop's RGB. The final parameter (optional) is the backdrop's title
 private_createBackdrop(61, 135, 131,"FX")
}	


//// Helper Function.   You can leave this at the bottom of your .js file then ignore it  ////

function private_createBackdrop(RED, GRN, BLU, bName){

// ensure backdrop will create in current group
var parentGroup = view.group(view.currentView())  

var backdropsArray = Backdrop.backdrops(parentGroup);

//set DEFAULT position
var defaultX = 0
var defaultY = 0
var desiredX = defaultX
var desiredY = defaultY
		
	
// check for 10 possible conflicting positions
	for( var checkMultiple=0; checkMultiple<10; checkMultiple++ ){
	
	
// look through existing backdrops one by one
for (var i = 0; i < backdropsArray.length; i++) {

// record details of currently parsed backdrop
  var backdrop = backdropsArray[i];
  var xPosition = backdrop.position.x;
  var yPosition = backdrop.position.y;
  // iterate positions to check
  var checkXpos = defaultX+checkMultiple*35
  var checkYpos = defaultY-checkMultiple*35

// if conflicting position found, shift desired XY
  if (xPosition == checkXpos&& yPosition == checkYpos) {
			desiredX += 35;  desiredY -= 35;   
}
  }
	}		

// Create the backdrop now. 
var newBackdrop = {  
// You can change the "w" and "h" values for a different width and height. 
"position"    : {"x": desiredX, "y" :desiredY, "w":190, "h":140},    
"title"       : {"text": bName, "color":4278190080,"size":12, "font":"Arial"},
// The first number is Alpha. Lower it from 255 for a more translucent backdrop
"color"       : ((255 & 0xff) << 24) | ((RED & 0xff) << 16) | ((GRN & 0xff) << 8) | (BLU & 0xff) };
Backdrop.addBackdrop(parentGroup, newBackdrop);

}
1 Like
5

Thanks for posting. :slight_smile:
Indeed, backdrop colours are quite limited.