Add progress badges manually to CTC created themes

[skizzosjt]

Short write up on how to add the recent "PROGRESS" badge to a theme created/published with CTC

CTC currently does not have this feature natively (as of v3.3.2) but it is quite easy to add manually after publishing with some basic understanding of Big Box theme code

• Add a new badge to your theme in CTC. It can be ANY badge since we need to edit this code after publishing it. Give the element an appropriate name that will be easy to find, for ex "Badge - Progress"
• Open the particular view XAML file in some text editor and then search for the element's name. Sticking with my example, I would search for "Badge - Progress"
• Find this line within the element's code and change the badge name (BadgeName) from whatever you selected in CTC to instead be "Progress"
• My ex here I started by using the "Completed" badge name within CTC and selected the corresponding image file to be used within CTC.
• Since I declared an image file within CTC it will look like this and I will need to remove the ImagePath. So the line would look like this once published

<coverFlow:FlowBadge x:Name="Badge6img" DataContext="{Binding ActiveGame}" BadgeName="Completed" ImagePath="LAUNCHBOX_THEME_FOLDER/Media/Badges/Badge_Completed.png"

• And I am changing it to this

<coverFlow:FlowBadge x:Name="Badge6img" DataContext="{Binding ActiveGame}" BadgeName="Progress"

Finished edit will look something like this

 

Now the caveat here is this will only use the default badge icons which are included with the frontend. What it does is based off the selected game's progress value, it will automatically use the the appropriate image file. If you want to use custom images, there is some additional steps to take

 

One method would involve simply replacing the default images with your custom ones. This is by far the easiest way to use custom images. But note this means the custom ones will also be used in LaunchBox rather than just the Big Box theme

 

If you wanted LaunchBox to maintain default images, and only the Big Box theme to use custom images there are ways to do that too.

One method involves using scripts to copy image files around. First make a direct copy of the default progress badges directory since this will be used to be copied into the appropriate default directory only when LaunchBox boots. So one script can be setup in LaunchBox Startup Applications to run only when LaunchBox boots, this one copies the default images from the duplicate directory into the default directory. A second script would be used only when Big Box boots, this time copying your custom images into the default directory. This method is only used by me due to I didn't feel like editing more XAML code manually.....

AHK syntax for this is very simple. Only one line of code required. Providing link to docs here and example below. The 1 parameter at end is to overwrite which is required since the files already exist.

FileCopyDir, C:\My Folder, C:\Copy of My Folder, 1

https://www.autohotkey.com/docs/v1/lib/FileCopyDir.htm

 

 

However, it is also possible within the XAML code to declare a specific image. This would require you adding a new badge element for each and every progress badge you want to use in CTC though. So, this is what I meant by more manual editing is required. You would still do the exact same edits I mentioned above, but now we must declare the image location and use a different visibility condition. 

• So just like above select the specific badge image file within CTC and it will be properly declared in the published code.
• Without using proper visibility condition the badge image is going to show on every game. We must use the ActiveGame's Progress value to determine this as shown below.
• Note that the value you want to use will correspond with values listed in LaunchBox's Progress drop down field. Hence why here for a specific Done/Mastered badge, we must use "Done / Mastered" for the value as that is how it is exactly listed in LaunchBox

 

We changed this line....

<DataTrigger Binding="{Binding ElementName=Badge6img, Path=HasBadge}" Value="True">

to instead read like this....

<DataTrigger Binding="{Binding ActiveGame.Progress}" Value="Done / Mastered">

 

Final edits would look something like this

 

 

You would now need to make the same type of edits to any additional badge elements you added that are meant to display a specific progress badge.

Edited Monday at 07:13 PM by skizzosjt