Jump to content

Changing font color based on background


Jenn Koder

Recommended Posts

Hi, I’m hoping someone can help me and that this is possible to do… I would like my font color to change based on the different backgrounds that can be chosen within my template. For instance, if the customer selects the blue background, the text should be white but if they pick the gold background, the text should be black and so on. I’ve tried this as a rule:

 

var color = '';

switch (Field("Background")){

case "2 x 12 Slideout_Blue":

fontColor = "White";

break;

case "2 x 12 Slideout_Gold":

fontColor = "Black";

break;

case "2 x 12 Slideout_Silver":

fontColor = "Black";

break;

case "2 x 12 Slideout_Walnut":

fontColor = "White";

break;

case "2 x 12 Slideout_White":

fontColor = "PANTONE 281 C";

break;

default:

color = "White";

}

return '<color name="' + color + '">' + ToUpper(Field("Name")) + '</color>';

 

But it doesn’t quite work, I’m hoping I’m on the right track though.

 

Thank you in advance.

FusionPro 10.0.26 | Adobe Acrobat Pro 2017 | OS: Windows 10

Link to comment
Share on other sites

I think you're close, but you have a couple of different variable names. Most of those cases are setting a variable named "fontColor", but then you use the variable "color" on the last line. If you change all the "fontColor" to "color", or vice-versa, then I think it will work:

var color = '';
switch (Field("Background"))
{
   case "2 x 12 Slideout_Blue":
       color = "White";
       break;
   case "2 x 12 Slideout_Gold":
       color = "Black";
       break;
   case "2 x 12 Slideout_Silver":
       color = "Black";
       break;
   case "2 x 12 Slideout_Walnut":
       color = "White";
       break;
   case "2 x 12 Slideout_White":
       color = "PANTONE 281 C";
       break;
   default:
       color = "White";
}
return '<color name="' + color + '">' + ToUpper(TaggedDataField("Name")) + '</color>';

 

That said, since I'm here, there are some ways to reduce the code a bit. First of all, following the DRY Principle, you can combine some of those cases:

var color = '';
switch (Field("Background"))
{
   case "2 x 12 Slideout_White":
       color = "PANTONE 281 C";
       break;
   case "2 x 12 Slideout_Gold":
   case "2 x 12 Slideout_Silver":
       color = "Black";
       break;
   case "2 x 12 Slideout_Walnut":
   case "2 x 12 Slideout_Blue":
   default:
       color = "White";
}
return '<color name="' + color + '">' + ToUpper(TaggedDataField("Name")) + '</color>';

You also don't need to specify cases that match the default case:

var color = '';
switch (Field("Background"))
{
   case "2 x 12 Slideout_White":
       color = "PANTONE 281 C";
       break;
   case "2 x 12 Slideout_Gold":
   case "2 x 12 Slideout_Silver":
       color = "Black";
       break;
   default:
       color = "White";
}
return '<color name="' + color + '">' + ToUpper(TaggedDataField("Name")) + '</color>';

And you don't even need the default at all if you set that as the initial condition:

var color = 'White';
switch (Field("Background"))
{
   case "2 x 12 Slideout_White":
       color = "PANTONE 281 C";
       break;
   case "2 x 12 Slideout_Gold":
   case "2 x 12 Slideout_Silver":
       color = "Black";
       break;
}
return '<color name="' + color + '">' + ToUpper(TaggedDataField("Name")) + '</color>';

You could also get rid of the break statements by putting that switch statement into a function, like so:

function GetColorForBackground()
{
   switch (Field("Background"))
   {
       case "2 x 12 Slideout_White":
           return "PANTONE 281 C";
       case "2 x 12 Slideout_Gold":
       case "2 x 12 Slideout_Silver":
           return "Black";
       default:
           return 'White';
   }
}
return '<color name="' + GetColorForBackground()+ '">' + ToUpper(TaggedDataField("Name")) + '</color>';

And if you want to get really JavaScript'y with this, you could replace the switch statement completely with a mapping, like so:

var ColorForBackground = 
{
   "2 x 12 Slideout_White": "PANTONE 281 C",
   "2 x 12 Slideout_Gold": "Black",
   "2 x 12 Slideout_Silver": "Black",
}
var color = ColorForBackground[Field("Background")] || "White";
return '<color name="' + color + '">' + ToUpper(TaggedDataField("Name")) + '</color>';

Though, if you really have a lot of things to map like this, you could even do most of that mapping without writing any code at all, by using a Switch Wizard rule to assign background names to color names, like so:

http://forums.pti.com/attachment.php?attachmentid=2051&stc=1&d=1581463383

 

Then your JavaScript rule could just call that Switch rule:

return '<color name="' + Rule("ColorForBackground") + '">' + ToUpper(TaggedDataField("Name")) + '</color>';

 

Yet another option would be to add colors to your Colors list, with color names the same as, or corresponding to, the background names. In other words, have colors with names something like "BKG: 2 x 12 Slideout_White", "BKG: 2 x 12 Slideout_Gold", "BKG: 2 x 12 Slideout_Silver", etc. Then all the rule needs to do is call out that color:

return '<color name="BKG: ' + Field("Background") + '">' + ToUpper(TaggedDataField("Name")) + '</color>';

If you set the variable for this rule itself in White in the text frame, it will always default to White, even if you get warnings about missing colors for ones that you don't have explicitly mapped.

ColorFromBackgroundSwitchRule.jpg.c0f1793a05c9ee0944f4a35d9b834714.jpg

Edited by Dan Korn
Link to comment
Share on other sites

Thanks Dan, This worked perfectly! Some of this is over my head so I went with the option where you suggested setting 'White' as the initial condition as the default. There is one more rule in my template that works but doesn't seem to work well. I'm wondering if it's because I don't know the right way to simplify it like you do. My template calls for two different sizes (10x2 & 12x2) and two different fonts (Gotham and Goudy). I have 4 Pages and I have named them accordingly in the "Manage Pages/Page usage" section. Here is what I have in my "OnRecordStart" Callback Rule:

 

// Turn on pages as per size selected

ImageLocation=Field("Size");

switch(ImageLocation){

case "10 x 2":

FusionPro.Composition.SetBodyPageUsage("Gotham",true)+("10 x 2",true);

FusionPro.Composition.SetBodyPageUsage("Goudy",true)+("10 x 2",false);

break;

case "12 x 2":

FusionPro.Composition.SetBodyPageUsage("Goudy",true)+("12 x 2",true);

FusionPro.Composition.SetBodyPageUsage("Gotham",true)+("12 x 2",false);

break;

}

 

// ==========================

 

if(Field("Font")=="Goudy"){

FusionPro.Composition.SetBodyPageUsage("Goudy",true);

FusionPro.Composition.SetBodyPageUsage("Gotham",false);

} else {

FusionPro.Composition.SetBodyPageUsage("Gotham",true);

FusionPro.Composition.SetBodyPageUsage("Goudy",false);

}

 

Can you help me or would you like me to post this to the forum?

 

Thanks again for all your help!

Link to comment
Share on other sites

Thanks Dan, This worked perfectly! Some of this is over my head so I went with the option where you suggested setting 'White' as the initial condition as the default.

Great!

Can you help me or would you like me to post this to the forum?

Usually a new question should go into a separate thread. But, we're here, so I'll answer here.

There is one more rule in my template that works but doesn't seem to work well.

Can you be more specific about exactly what is not working, and how the actual results are different than the expected results?

 

My template calls for two different sizes (10x2 & 12x2) and two different fonts (Gotham and Goudy). I have 4 Pages and I have named them accordingly in the "Manage Pages/Page usage" section.

Named them accordingly... how? What exactly are the page names?

 

Posting the collected template might be the best way to get us both on the same page (pun slightly intended).

 

I do see a few issues with the code, though:

FusionPro.Composition.SetBodyPageUsage("Gotham",true)+("10 x 2",true);

That's not a valid way to call that function. If you want to set two different pages, you have to make two different calls to the function, like so:

FusionPro.Composition.SetBodyPageUsage("Gotham",true);
FusionPro.Composition.SetBodyPageUsage("10 x 2",true);

Again, I don't know for sure what the full correct answer is without knowing more about the job, but the usual way to reduce these kinds of page usage rules is to first set all of the relevant pages to be initially Unused in the Page Usage dialog (where you set their names). Then the rule only needs to activate the ones that it needs, like so:

FusionPro.Composition.SetBodyPageUsage(Field("Size"), true);

Now, if I assume that your pages are named something like this:

  • 10 x 2 Gotham
  • 10 x 2 Goudy
  • 12 x 2 Gotham
  • 12 x 2 Goudy

And if you set them all to be Unused initially in the Page Usage dialog, then I think the rule only needs to be one line, like so:

FusionPro.Composition.SetBodyPageUsage(Field("Size") + " " + Field("Font"), true);

You could also probably set the job up to use other rules to change the font, without having to have an entirely different set of pages for each font. But I'd have to see the job to make a more specific suggestion in that regard.

Link to comment
Share on other sites

Can you be more specific about exactly what is not working, and how the actual results are different than the expected results?

When I'm testing the template, I can chose the size and the font I want but, if I change either of those options, I have to choose the other again as well in order for it to change.

Named them accordingly... how? What exactly are the page names?
I have my pages all set for "unused" and named as followed: Page1 is 10 x2, Page 2 is Goudy, Page 3 is 12 x 2, and Page 4 is Gotham

I do see a few issues with the code, though:

FusionPro.Composition.SetBodyPageUsage("Gotham",tr ue)+("10 x 2",true);

I don't know why The "true" came through like that. I'm going to attempt to attach my template.

 

Hopefully I do this right!

Slideout Desktop.zip

Link to comment
Share on other sites

I have my pages all set for "unused" and named as followed: Page1 is 10 x2, Page 2 is Goudy, Page 3 is 12 x 2, and Page 4 is Gotham

Okay, thanks. What I still don't know is what you're trying to accomplish, i.e. the requirements. Can you explain what pages should be activated under what circumstances?

I don't know why The "true" came through like that.

If you're posting code, you should click the "Go Advanced" button, then select the code and click the # button to put it into a code block, like in my posts. That will preserve the spacing and everything else properly.

 

But, that extra space isn't really what's wrong with your function call. As I said, the problem is that you seem to be trying to trigger more than one page in a single call to FusionPro.Composition.SetBodyPageUsage, which doesn't work.

I'm going to attempt to attach my template.

Hopefully I do this right!

Yes, I got it. Thanks. But I still need to know exactly what the requirements are in terms of when each page is supposed to be activated.

 

Let's start with this: How many total pages are you trying to output in total for each record? Do you want to output just one page, which has a specific size and font? Or do you want to output two (facing) pages of the same size?

Link to comment
Share on other sites

But, that extra space isn't really what's wrong with your function call. As I said, the problem is that you seem to be trying to trigger more than one page in a single call to FusionPro.Composition.SetBodyPageUsage, which doesn't work.

Let's start with this: How many total pages are you trying to output in total for each record? Do you want to output just one page, which has a specific size and font? Or do you want to output two (facing) pages of the same size?

You are a Genius!! My apologies for not realizing that you solved my size/font switching issue already. The output should only be one page (which it is), I renamed my pages according to your previous stated assumption

 


  • 10 x 2 Gotham
  • 10 x 2 Goudy
  • 12 x 2 Gotham
  • 12 x 2 Goudy

and changed my OnRecordStart rule to the rule you wrote.

[size=2][color=#666666]FusionPro.Composition.SetBodyPageUsage(Field("Size") + " " + Field("Font"), true);[/color][/size]

That did it! I apologize for not seeing that sooner, I have no official training in JavaScript, building templates and writing code was a task given to me to figure out on my own. This is the most complex template I’ve built so far and I am very grateful for all your help!

Link to comment
Share on other sites

You are a Genius!! My apologies for not realizing that you solved my size/font switching issue already. The output should only be one page (which it is), I renamed my pages according to your previous stated assumption

 


  • 10 x 2 Gotham
  • 10 x 2 Goudy
  • 12 x 2 Gotham
  • 12 x 2 Goudy

and changed my OnRecordStart rule to the rule you wrote.

[size=2][color=#666666]FusionPro.Composition.SetBodyPageUsage(Field("Size") + " " + Field("Font"), true);[/color][/size]

That did it! I apologize for not seeing that sooner, I have no official training in JavaScript, building templates and writing code was a task given to me to figure out on my own. This is the most complex template I’ve built so far and I am very grateful for all your help!

Great! Glad it's working now.

 

Though I feel compelled to point out that this job can be accomplished in a much simpler way. If all you're doing is changing the font for some text, then you don't really need a whole new page for each font; you can just apply the font to the text with tags, like you do with the color:

var color = 'White';
switch (Field("Background"))
{
   case "White":
       color = "PANTONE 281 C";
       break;
   case "Gold":
   case "Silver":
       color = "Black";
       break;
}

var font = Field("Font");
switch (font)
{
   case "Goudy":
       font = "Goudy Old Style";
       break;
}

return '<color name="' + color + '">' + '<f name="' + font + '">' + (TaggedDataField("Name")) + '</color>';

 

I've attached a version of the template that has the above rule, with just two pages, and one line in OnRecordStart to call out the page by size:

FusionPro.Composition.SetBodyPageUsage(Field("Size"), true);

 

You do still need different pages for the different output page sizes, at least in a pure Creator workflow where you're composing locally in Acrobat. If you compose via FusionPro VDP Producer or Server, or via another application that utilizes FP Server, such as MarcomCentral or EFI Digital StoreFront, then you can have just a single page and resize it programmatically. We call this an Ad Resizing job. I can post an example of this too if you want.

Walnut_2x10 - Dan-Creator.pdf

Link to comment
Share on other sites

Great! Glad it's working now.

 

Though I feel compelled to point out that this job can be accomplished in a much simpler way. If all you're doing is changing the font for some text, then you don't really need a whole new page for each font; you can just apply the font to the text with tags, like you do with the color:

I had a feeling I was doing it "the long way". Thank you so much! I will be sure to use the rules you gave me and as few pages as possible from here on out. Once my customer sees this doesn't have to be separate templates, I'm sure it will open the door for more options :)
You do still need different pages for the different output page sizes, at least in a pure Creator workflow where you're composing locally in Acrobat. If you compose via FusionPro VDP Producer or Server, or via another application that utilizes FP Server, such as MarcomCentral or EFI Digital StoreFront, then you can have just a single page and resize it programmatically. We call this an Ad Resizing job. I can post an example of this too if you want.
This template is great! I do not use MarcomCentral or EFI Digital StoreFront. I have to upload my template to a website (WebCRD), run by Rochester Software Associates, I know I can either use Adobe Acrobat or InDesign, but I believe this is how I have to create it. As far as I'm concerned, you've already gone above and beyond and for that, I am extremely grateful.
Link to comment
Share on other sites

This template is great! I do not use MarcomCentral or EFI Digital StoreFront. I have to upload my template to a website (WebCRD), run by Rochester Software Associates, I know I can either use Adobe Acrobat or InDesign, but I believe this is how I have to create it. As far as I'm concerned, you've already gone above and beyond and for that, I am extremely grateful.

No problem. Though, our good friends at RSA definitely use FusionPro Server in their WebCRD application, so you actually can take advantage of page/ad resizing when composing via that app. I'll see if I have time this week to make the changes so that you can have just a single resizable page in the template.

Link to comment
Share on other sites

I have made, and attached, a version of the template that has only one page, where the page and its frames get resized based on the data. The OnRecordStart rule is now this:

var sizes = Field("Size").split('x').map(StringToNumber);
ResizePage(sizes[0], sizes[1]);
ResizeFrame("Background");
ResizeFrame("Name");

Note that this will not work when composing on your machine in Acrobat, but it will work when composing online in WebCRD, as that utilizes FusionPro Server.

Walnut_2x10 - Dan-2.pdf

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...