Pink Image Tool

Useful Tools and Components
1

Just sharing this again, but now it works with the latest Juce files. It is a nice tool for using PNG images that has pink lines to determinate where it is fixed and the rest gets tiled/stretched.

[code]/*
Wusik.com © 2013 - William Kalfelz
*/

// -------------------------------------------------------------------------------------------------------------------------------
void stripPinkImage9(Image original, Image destination[9], int height, int offsetY)
{
if (height == 0) height = original.getHeight();
int x = 0;
int Corners[4] = {0,0,0,0}; // Top-Left X and Y, Bottom-Right X and Y //
Colour cPink = Colour::fromString(“ffff00ff”);

for (x=0; x<original.getWidth(); x++) { if (original.getPixelAt(x,offsetY) != cPink) break; Corners[0] = x-1; }
for (x=0; x<height; x++) { if (original.getPixelAt(0,x+offsetY) != cPink) break; Corners[1] = x-1; }
		
for (x=original.getWidth()-1; x>=0; x--) { if (original.getPixelAt(x,height-1+offsetY) != cPink) break; Corners[2] = x-2; }
for (x=(height-1); x>=0; x--) { if (original.getPixelAt(original.getWidth()-1,x+offsetY) != cPink) break; Corners[3] = x-2; }
					
/*	0 1 2
    3 4 5
    6 7 8
*/

// Create Buttons //
int bW = original.getWidth()-2;
int bH = height-2;
#define CreateBT(BT,W,H) destination[BT] = Image(Image::ARGB,W,H,true);

CreateBT(0, Corners[0], Corners[1]);
CreateBT(1, Corners[2]-Corners[0], Corners[1]);
CreateBT(2, bW-Corners[2], Corners[1]);
//
CreateBT(3, Corners[0], Corners[3]-Corners[1]);
CreateBT(4, Corners[2]-Corners[0], Corners[3]-Corners[1]);
CreateBT(5, bW-Corners[2], Corners[3]-Corners[1]);
//
CreateBT(6, Corners[0], bH-Corners[3]);
CreateBT(7, Corners[2]-Corners[0], bH-Corners[3]);
CreateBT(8, bW-Corners[2], bH-Corners[3]);

// Perform Copies //
int y  = 0;
int pX = 0;
int pY = 0;

for (int bt=0; bt<9; bt++)
{
	switch(bt)
	{
		case 1:	pX = Corners[0];	pY = 0;				break;
		case 2:	pX = Corners[2];	pY = 0;				break;
		case 3:	pX = 0;           pY = Corners[1];	break;
		case 4:	pX = Corners[0];	pY = Corners[1];	break;
		case 5:	pX = Corners[2];	pY = Corners[1];	break;
		case 6:	pX = 0;           pY = Corners[3];	break;
		case 7:	pX = Corners[0];	pY = Corners[3];	break;
		case 8:	pX = Corners[2];	pY = Corners[3];	break;
	}

	for (y=0; y<destination[bt].getHeight(); y++)
	{
		for (x=0; x<destination[bt].getWidth(); x++)
		{
			destination[bt].setPixelAt(x,y,original.getPixelAt(x+1+pX,y+1+pY+offsetY));
		}
	}
}

}

// -------------------------------------------------------------------------------------------------------------------------------
void stripPinkImage3H(Image original, Image destination[3], int height, int offsetY)
{
if (height == 0) height = original.getHeight();
int x = 0;
int Corners[2] = {0,0}; // Left X Right X //
Colour cPink = Colour::fromString(“ffff00ff”);

for (x=0; x<original.getWidth(); x++) { if (original.getPixelAt(x,offsetY) != cPink) break; Corners[0] = x-1; }		
for (x=original.getWidth()-1; x>=0; x--) { if (original.getPixelAt(x,offsetY) != cPink) break; Corners[1] = x-2; }
					
//	0	1	2 //

// Create Buttons //
int bW = original.getWidth()-2;
#define CreateBT2(BT,W,H) destination[BT] = Image(Image::ARGB,W,H,true);

CreateBT2(0, Corners[0], height-2);
CreateBT2(1, Corners[1]-Corners[0], height-2);
CreateBT2(2, bW-Corners[1], height-2);

// Perform Copies //
int y  = 0;
int pX = 0;

for (int bt=0; bt<3; bt++)
{
	switch(bt)
	{
		case 1:	pX = Corners[0]; break;
		case 2:	pX = Corners[1]; break;
	}

	for (y=0; y<destination[bt].getHeight(); y++)
	{
		for (x=0; x<destination[bt].getWidth(); x++)
		{
			destination[bt].setPixelAt(x,y,original.getPixelAt(x+1+pX,y+1+offsetY));
		}
	}
}

}

// -------------------------------------------------------------------------------------------------------------------------------
void stripPinkImage3V(Image original, Image destination[3], int width, int offsetX)
{
if (width == 0) width = original.getWidth();
int x = 0;
int Corners[2] = {0,0}; // Top Y Bottom Y //
Colour cPink = Colour::fromString(“ffff00ff”);

for (x=0; x<original.getHeight(); x++) { if (original.getPixelAt(offsetX,x) != cPink) break; Corners[0] = x-1; }		
for (x=original.getHeight()-1; x>=0; x--) { if (original.getPixelAt(offsetX,x) != cPink) break; Corners[1] = x-2; }
					
/* 
	0
	
	1
	
	2
*/

// Create Buttons //
int bH = original.getHeight()-2;
#define CreateBT3(BT,W,H) destination[BT] = Image(Image::ARGB,W,H,true);

CreateBT3(0, width-2, Corners[0]);
CreateBT3(1, width-2, Corners[1]-Corners[0]);
CreateBT3(2, width-2, bH-Corners[1]);

// Perform Copies //
int y=0;
int pX = 0;

for (int bt=0; bt<3; bt++)
{
	switch(bt)
	{
		case 1:	pX = Corners[0]; break;
		case 2:	pX = Corners[1]; break;
	}

	for (y=0; y<destination[bt].getHeight(); y++)
	{
		for (x=0; x<destination[bt].getWidth(); x++)
		{
			destination[bt].setPixelAt(x,y,original.getPixelAt(x+1+offsetX,y+1+pX));
		}
	}
}

}

//-----------------------------------------------------------------------------------------------------------
void drawImageSquare(Graphics& g, Image images[9], int x, int y, int width, int height, float opacity)
{
g.setTiledImageFill(images[4], x + images[3].getWidth(), y + images[1].getHeight(), opacity);
g.fillRect(x + images[3].getWidth(), y + images[1].getHeight(), width - images[3].getWidth() - images[5].getWidth(), height - images[1].getHeight() - images[7].getHeight());

g.setTiledImageFill(images[1], x + images[0].getWidth(), y, opacity);
g.fillRect(x + images[0].getWidth(), y, width - images[0].getWidth() - images[2].getWidth(), images[1].getHeight());

g.setTiledImageFill(images[7], x + images[6].getWidth(), y + height - images[7].getHeight(), opacity);
g.fillRect(x + images[6].getWidth(), y + height - images[7].getHeight(), width - images[6].getWidth() - images[8].getWidth(), images[7].getHeight());

g.setTiledImageFill(images[3], x, y + images[0].getHeight(), opacity);
g.fillRect(x, y + images[0].getHeight(), images[3].getWidth(), height - images[0].getHeight() - images[6].getHeight());

g.setTiledImageFill(images[5], x + width - images[5].getWidth(), y, opacity);
g.fillRect(x + width - images[5].getWidth(), y + images[2].getHeight(), images[5].getWidth(), height - images[2].getHeight() - images[8].getHeight());

g.setTiledImageFill(images[0], x, y, opacity);
g.fillRect(x, y, images[0].getWidth(), images[0].getHeight());

g.setTiledImageFill(images[2], x + width - images[2].getWidth(), y, opacity);
g.fillRect(x + width - images[2].getWidth(), y, images[2].getWidth(), images[2].getHeight());

g.setTiledImageFill(images[6], x, y + height - images[6].getHeight(), opacity);
g.fillRect(x, y + height - images[6].getHeight(), images[6].getWidth(), images[6].getHeight());

g.setTiledImageFill(images[8], x + width - images[8].getWidth(), y + height - images[8].getHeight(), opacity);
g.fillRect(x + width - images[8].getWidth(), y + height - images[8].getHeight(), images[8].getWidth(), images[8].getHeight());

}
[/code]

I will post some image examples soon.

2

Jules, why not include something like this on JUCE? :wink:

3

http://wusik.com/images/AlertBackground.png

The above is a 9 images in a single one.

The below is a scroll bar, but it has two images stacked.

4

Sorry, I don’t want to encourage bitmap-based graphics like that - it’s much better to use vector-based techniques for resizable graphics. I’ve been saying this for years, but now that high-res displays are finally becoming common, it’s really important to find resolution-independent ways to build your GUIs.