The POC - A Nice View of the New Walls

[HarryFlowers]

50 minutes ago, faeran said:

Hi @HarryFlowers. Glad you have been enjoying the theme.

For the stretching, you'll find a bunch of platform specific game xaml files inside of the following folder: LaunchBox\Themes\The POC\Views\WallGamesView

There should be one for Sony PlayStation. You might have your platform named something different. If so, rename it to whatever your platform is called. For Sega Saturn, make a copy of a platform file that has similar size as your Sega Saturn boxes. Potentially Sony PlayStation might be a good fit, so make a copy of that and give it the same name as your Sega Saturn platform. You can essentially do this for any of your platforms where you need a specific size box. As you can tell, the rectangle portrait boxes are the default.

As far as that black fade behind the boxes go. If I remember correctly, it's there to make sure that it remains clean in-between the boxes. You can remove it, but it might look a bit messy if you do. You can remove it from WallGamesView.xaml by deleting all this code:

				<!-- Rectangle 1 -->
				<Grid x:Name="Rectangle1" HorizontalAlignment="Left" VerticalAlignment="Top" Visibility="Visible" Width="{Binding ElementName=Grid2container, Path=ActualWidth}" Height="{Binding ElementName=Grid2container, Path=ActualHeight}" RenderTransformOrigin="0.5,0.5" Panel.ZIndex="10"  >
						
					<Grid>
						<Rectangle x:Name="Rectangle1rect" HorizontalAlignment="Left" VerticalAlignment="Top" Fill="{StaticResource Gradient1}" Opacity="1.0" Stretch="Fill" RenderTransformOrigin=".5,.5" Width="{Binding ElementName=Rectangle1,Path=ActualWidth}" Height="{Binding ElementName=Rectangle1,Path=ActualHeight}">
							<Rectangle.RenderTransform>
								<TransformGroup>
									<RotateTransform Angle="0" />
									<ScaleTransform ScaleX="1" ScaleY="1" />
									<SkewTransform  AngleX="0" AngleY="0" />
								</TransformGroup>
							</Rectangle.RenderTransform>
								
						</Rectangle>
					</Grid>
					<Grid.RenderTransform>
						<TransformGroup>
							<SkewTransform AngleX="0" AngleY="0"/>
							<RotateTransform Angle="0"/>
							<TranslateTransform X="0" Y=" 0"/>
						</TransformGroup>
					</Grid.RenderTransform>
						
				</Grid>
				<Grid.RenderTransform>
					<TransformGroup>
						<RotateTransform Angle="0" />
						<ScaleTransform ScaleX="1" ScaleY="1" />
						<SkewTransform  AngleX="0" AngleY="0" />
					</TransformGroup>
				</Grid.RenderTransform>
					
				<Grid.Style>
					<Style TargetType="Grid" >
						<Setter Property="Width" Value="{Binding ElementName=Grid2,Path=ActualWidth}" />
						<Setter Property="Height" Value="{Binding ElementName=Grid2,Path=ActualHeight}" />
						<Style.Triggers>
							<DataTrigger Binding="{Binding ElementName=Grid2, Path=Width}" Value="NaN"   >
								<Setter Property="Width" Value="Auto" />
							</DataTrigger>
							<DataTrigger Binding="{Binding ElementName=Grid2, Path=Height}" Value="NaN"   >
								<Setter Property="Height" Value="Auto" />
							</DataTrigger>
						</Style.Triggers>
					</Style>
				</Grid.Style>
			</Grid>
			<Grid.RenderTransform>
				<TransformGroup>
					<SkewTransform AngleX="0" AngleY="0"/>
					<RotateTransform Angle="0"/>
					<TranslateTransform X="{Binding ElementName=Canvas,Path=ActualWidth,Converter={StaticResource ScalePropertyValueD},ConverterParameter=X;-333.3333333333333;2560}" Y="{Binding ElementName=Canvas,Path=ActualHeight,Converter={StaticResource ScalePropertyValueD},ConverterParameter=Y;0;1440}" />
				</TransformGroup>
			</Grid.RenderTransform>
				
		</Grid>

You'll also have to do this for every platform specific game xaml file that's inside of: LaunchBox\Themes\The POC\Views\WallGamesView

I haven't tested this, but I'm pretty sure it should work.

As far as correcting the box art stretching, your instructions worked like a charm... I had separated some of my console platforms to have one for US regions and another for Japan regions and labelled them accordingly. Once I renamed the .xaml files to match my platform names the images were fixed.

 

For the black backdrop, I see what you mean! I didn't realize the grid was separated by transparent border/spaces. I think I'm just going to leave it how it is, I can see how having a colorful background can make it look messy and would prefer otherwise. 

 

One final question (and hope I'm not getting annoying)... For the platform list view, is there a way to show platform videos in place of the platform banner art? Again, not a huge deal, just wondering if there's a quick setting I could toggle which I haven't been able to find. I was hoping I could have platform videos playing (in the same frame size as the banner art is currently displaying). If it isn't currently supported, like I said no biggie.

Thanks again for the help!

Edited April 8, 2022 by HarryFlowers

[faeran]

57 minutes ago, HarryFlowers said:

As far as correcting the box art stretching, your instructions worked like a charm... I had separated some of my console platforms to have one for US regions and another for Japan regions and labelled them accordingly. Once I renamed the .xaml files to match my platform names the images were fixed.

 

For the black backdrop, I see what you mean! I didn't realize the grid was separated by transparent border/spaces. I think I'm just going to leave it how it is, I can see how having a colorful background can make it look messy and would prefer otherwise. 

 

One final question (and hope I'm not getting annoying)... For the platform list view, is there a way to show platform videos in place of the platform banner art? Again, not a huge deal, just wondering if there's a quick setting I could toggle which I haven't been able to find. I was hoping I could have platform videos playing (in the same frame size as the banner art is currently displaying). If it isn't currently supported, like I said no biggie.

Thanks again for the help!

There's not really a quick setting for that. You'd have to add the video code into the correct spot in the TextFiltersView.xaml and remove the (probably hefty) code of the background images. I can probably look into it later if you'd like and provide some steps.

[HarryFlowers]

On 4/8/2022 at 3:17 PM, faeran said:

There's not really a quick setting for that. You'd have to add the video code into the correct spot in the TextFiltersView.xaml and remove the (probably hefty) code of the background images. I can probably look into it later if you'd like and provide some steps.

Thanks for offering some help, I tried to dig into it... but given my limited experience with understanding the language, of course hit the inevitable wall of shame. I attached a short video 'prototype' that shows the end result I'm aiming for (edited video, not a BigBox capture).

After reading your response, I tried to find the portion of code in 'TextFilersView.xaml' that displays the platform banner art which seems to start at line 526 (<!-- Game Box -->). I tried replacing the image paths in that code block with platform video paths, but haven't had any luck.

I'm probably going about this ass-backwards, but if I'm close... maybe you could provide a couple off additional steps to get be on track here? The platforms  videos I'm trying to get to display here are the ones located in my LaunchBox directory:  ...\LaunchBox\Videos\Platforms\<example-platform-video.mp4>.

Again, I'd be totally willing to donate something to any sort of Patreon or LaunchBox funding for your time. Thanks again, and if this is something that might be too cumbersome to look into, just let me know.

Edited April 10, 2022 by HarryFlowers

[HarryFlowers]

On 4/8/2022 at 3:17 PM, faeran said:

There's not really a quick setting for that. You'd have to add the video code into the correct spot in the TextFiltersView.xaml and remove the (probably hefty) code of the background images. I can probably look into it later if you'd like and provide some steps.

Alright @faeran... so I can put this to bed and prevent anyone else spending time on it, I finally got it to work. Figured I'd provide the steps I took in case anyone else wants to achieve the same...

In the 'TextFiltersView.xaml' file, I replaced lines 527 - 560 (code block labelled 'Game Box') with the following:

		<Grid x:Name="SelectedItemVideo1" HorizontalAlignment="Left" VerticalAlignment="Top" Visibility="Visible" Width="{Binding ElementName=Canvas,Path=ActualWidth,Converter={StaticResource ScalePropertyValueD},ConverterParameter=W;486.66666666666663;2560}" Height="{Binding ElementName=Canvas,Path=ActualHeight,Converter={StaticResource ScalePropertyValueD},ConverterParameter=H;846.6666666666666;1440}" RenderTransformOrigin="0.5,0.5" Panel.ZIndex="40"  >

			<TextBlock x:Name="SelectedItemVideo1imgfound" Text="{Binding ElementName=SelectedItemVideo1video, Path=HasVideo}" Visibility="Collapsed"/>
			<transitions:TransitionPresenter x:Name="SelectedItemVideo1video" TransitionSelector="{Binding ImageVideoTransitionSelector}" StretchVideo="False" IsContentVideo="True" Opacity="1.0" RenderTransformOrigin=".5,.5" >
				<transitions:TransitionPresenter.Style>
					<Style TargetType="transitions:TransitionPresenter">
						<Setter Property="Content" Value="{Binding ImageVideoView}"/>
						<Style.Triggers>
							<DataTrigger Binding="{Binding ElementName=SelectedItemVideo1,Path=Visibility}" Value="Collapsed">
								<Setter Property="Content" Value=""/>
							</DataTrigger>
							<DataTrigger Binding="{Binding ElementName=SelectedItemVideo1,Path=Opacity}" Value="0">
								<Setter Property="Content" Value=""/>
							</DataTrigger>
						</Style.Triggers>
					</Style>
				</transitions:TransitionPresenter.Style>
				<transitions:TransitionPresenter.RenderTransform>
					<TransformGroup>
						<RotateTransform Angle="0" />
						<ScaleTransform ScaleX="1.25" ScaleY="1.25" />
						<SkewTransform  AngleX="0" AngleY="0" />
					</TransformGroup>
				</transitions:TransitionPresenter.RenderTransform>
			</transitions:TransitionPresenter >
			<Grid.RenderTransform>
				<TransformGroup>
					<SkewTransform AngleX="0" AngleY="0"/>
					<RotateTransform Angle="0"/>
					<TranslateTransform X="{Binding ElementName=Canvas,Path=ActualWidth,Converter={StaticResource ScalePropertyValueD},ConverterParameter=X;110;2560}" Y="{Binding ElementName=Canvas,Path=ActualHeight,Converter={StaticResource ScalePropertyValueD},ConverterParameter=Y;628;1440}" />
				</TransformGroup>
			</Grid.RenderTransform>

		</Grid>

In the lines above I altered the position of it a bit so that it lived slightly lower in the view than before. I also attached a video of the final result (this time it being an actual live capture of Big Box running).

Thanks again for pointing me in the right direction, it was fun to learn some XML/GUI design and great interacting with someone on the LaunchBox team!

Edited April 10, 2022 by HarryFlowers

[taketoch]

Hello 

I really like your theme and work also on mine ( ace arcade ) .

inwould like to know how did you manage to do the wall .

- without space between box art 

- with an outline selection 

- to stretch box art 

I tried but never manage to make this nice as your theme . 
 

thanks ! 

[faeran]

On 4/3/2023 at 10:08 PM, taketoch said:

Hello 

I really like your theme and work also on mine ( ace arcade ) .

inwould like to know how did you manage to do the wall .

- without space between box art 

- with an outline selection 

- to stretch box art 

I tried but never manage to make this nice as your theme . 
 

thanks ! 

It was all code at the time when I created this theme. You have the ability to create an item template of what you want each item within the wall to look like, and you can add the border in that template, and then use a datatrigger to say something like: "Only make this border appear on the selected item".

If you want, I can try and take you through as much as I can if you send me a PM.

[dasd]

Is it possible to edit this theme in the launchbox community creator?

[faeran]

1 hour ago, dasd said:

Is it possible to edit this theme in the launchbox community creator?

It's not. At the time this theme was created, it wasn't possible to create themes like this inside of the CTC.

You'd have to dive into the code to edit it.

[dasd]

On 5/11/2021 at 5:35 PM, faeran said:

Ok good. So, let's establish that we are talking about the same view here. This one right?

I can tell you how it works so that you can try and deduce what the issue is on your end (Obviously this will only work on Big Box 11.10 and greater).

By default, boxes are hard coded to a portrait rectangle. I've added a bunch of alternative view files for systems that I know have different size boxes. All of these files are located here:

• LAUNCHBOX\Themes\The POC\Views\WallGamesView\

However, in order for these files to be used, the names of the file has to match the name of the platform that you added to your own LaunchBox library. You can simply change the file names to match your systems. You can even copy/paste these files for systems you may have that are not present in this folder.

It sounds like you checked and was able to determine the name of your Nintendo Game Boy platform.

See if you can solve your issue based on the above info. if you can't, come back to this thread with some screenshots and some more info, and we can continue to figure out what the issue may be.

this doesnt work for me.  I am trying to get Sega Game Gear gams to have this view and it just does nothing when i create a 'Sega Game Gear' xaml file.  

This is the exact name of the platform too

EDIT: Even more confusing is that I have a platform named Pinball which has no xaml file but the theme applies perfectly to this platform.

Edited November 8, 2023 by dasd

[dasd]

@faeran any ideas?  my game gear platform page just doesnt take the theme correctly...

[faeran]

12 hours ago, dasd said:

@faeran any ideas?  my game gear platform page just doesnt take the theme correctly...

Do you have a screenshot of what that view looks like to you?

[dasd]

1 hour ago, faeran said:

Do you have a screenshot of what that view looks like to you?

All other screens work just fine.  Its just game gear that doesnt work at all.

[faeran]

3 minutes ago, dasd said:

All other screens work just fine.  Its just game gear that doesnt work at all.

That's the text games view. If you were hoping for a different view for Game Gear it probably means you have turned on in your options the ability to have separate views per-platform. Set a mapping to switch views (if you don't have one already), then when you are on the game gear view, press the switch view mapping and choose the view you are wanting to use for Sega Game Gear.

[dasd]

Hey that worked!  Thanks!

[dasd]

@faeran
I'm trying to use a view for Visual Pinball and I have videos for all of my tables.  I have them showing correctly in a custom WallView but half of them are being rotated.  Any idea what would rotate them? 

If I use a Rotation Transformation to rotate them 90 degrees, it fixes it but all of the others are them messed up.

[faeran]

On 11/30/2023 at 11:14 PM, dasd said:

@faeran
I'm trying to use a view for Visual Pinball and I have videos for all of my tables.  I have them showing correctly in a custom WallView but half of them are being rotated.  Any idea what would rotate them? 

If I use a Rotation Transformation to rotate them 90 degrees, it fixes it but all of the others are them messed up.

There would be nothing in the code that rotates images in this theme, so I could only guess that you may want to look at the images you are using and see if you can fix them up.

[dasd]

  

1 hour ago, faeran said:

There would be nothing in the code that rotates images in this theme, so I could only guess that you may want to look at the images you are using and see if you can fix them up.

Thanks for the reply.  Yeah I've dissected the view and can't find anything that is rotating it.  

Get this, even when I rotate the videos to account for this rotation, it's STILL showing it incorrectly rotated.  

Really unsure on this one.