How can I properly display Marquee images on custom cut LCD screen?

CitznFish · August 29, 2020

On 5/14/2020 at 6:04 AM, NightShadowPT said:

Alright! The Marquee is fixed.

I just had to ignore the resolution, and brute force all Marquees to Stretch on the "GameMarqueeView.xaml" config file.

It's slightly less flexible because if the Marquee being shown is not close to the correct Ratio it will distort the image, but it will do for most of the files. For the other ones, I'll have to find another Marquee file.

Thank you all for your support. I'll leave you with a photo of the Marquee displaying properly.

UPDATE: I got it working. My main monitor was set to 150% and my marquee was set to 100%. For whatever reason this caused issues with BB in displaying the marquee. So it's working, but I have the smallest font on my 32" monitor now, lol!

I am having the same exact issue as you. What do you men by "ignore the resolution" and "brute force the the marquee to stretch? I am going nuts here trying to figure this out.

Can you please share EXACTLY what you did and your xmal files?

my marquee monitor is detected at 1680x342 in windows. it also refuses to display any marquee from Bigbox. I have tried ALL of the examples in this thread to no avail. I cannot figure out how you got yours to work!

Edited August 29, 2020 by CitznFish

NightShadowPT · August 29, 2020

2 hours ago, CitznFish said:

I am having the same exact issue as you. What do you men by "ignore the resolution" and "brute force the the marquee to stretch? I am going nuts here trying to figure this out.

Can you please share EXACTLY what you did and your xmal files?

my marquee monitor is detected at 1680x342 in windows. it also refuses to display any marquee from Bigbox. I have tried ALL of the examples in this thread to no avail. I cannot figure out how you got yours to work!

Ok, on every Theme folder, you have a file called GameMarqueeView.xaml

You need to edit that file for the Theme you're using (e.g.: C:\Launchbox\Themes\Default\GameMarqueeView.xaml) and force the Height and Width, alongside using "Stretch" on both the Vertical and Horizontal Alignment.

Here is the content of my file, for the theme "City Hunter 2":

<UserControl xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:transitions="clr-namespace:Unbroken.LaunchBox.Wpf.Transitions;assembly=Unbroken.LaunchBox.Wpf"
xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
xmlns:cal="http://www.caliburnproject.org"
mc:Ignorable="d"
d:DesignHeight="900" d:DesignWidth="1600" HorizontalAlignment="Stretch" VerticalAlignment="Center" Style="{DynamicResource UserControlStyle}">
<UserControl.Resources>
<Style x:Key="UserControlStyle" TargetType="UserControl">
		<Setter Property="FocusVisualStyle" Value="{x:Null}" />
		<Setter Property="BorderThickness" Value="0" />
		<Setter Property="Margin" Value="0" />
		<Setter Property="Padding" Value="0" />
		<Setter Property="Background" Value="Black" />
	</Style>
</UserControl.Resources>

<Grid VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
<Image Source="pack://siteoforigin:,,,/Themes/_Realistic Marquee FX/Realistic Marquee FX Subtle Only Plexi.png" RenderOptions.BitmapScalingMode="HighQuality" Stretch="Fill" Panel.ZIndex="99" HorizontalAlignment="Center" VerticalAlignment="Center"/>
<Image Source="{Binding Path=SelectedGame.MarqueeImagePath}" Panel.ZIndex="1" Stretch="Fill" HorizontalAlignment="Center" VerticalAlignment="Center" RenderOptions.BitmapScalingMode="HighQuality"><Image.Effect><DropShadowEffect BlurRadius="99" /></Image.Effect></Image>
<Image Source="{Binding Path=SelectedGame.MarqueeImagePath}" Panel.ZIndex="0" Stretch="Fill" Opacity="0.5" RenderOptions.BitmapScalingMode="LowQuality"><Image.Effect><BlurEffect Radius="99"/></Image.Effect></Image>
</Grid>
</UserControl>

Hope it helps

SMN · November 1, 2020

Hi

After editing the axml file, the marquee appers at the top of the montor

Any advice how to move the marquee image to the bottom of the screen?

Thanks

Retro808 · November 2, 2020

9 minutes ago, SMN said:

Hi

After editing the axml file, the marquee appers at the top of the montor

Any advice how to move the marquee image to the bottom of the screen?

Thanks

Without seeing your actual xaml code it would be hard to say. Not sure what you actually edited or which maquee xaml you used to edit. Typically you would change the row the the images are shown in, but again, it all depends on what the full coded view looks like.

SMN · November 2, 2020

18 minutes ago, Retro808 said:

Without seeing your actual xaml code it would be hard to say. Not sure what you actually edited or which maquee xaml you used to edit. Typically you would change the row the the images are shown in, but again, it all depends on what the full coded view looks like.

I'm sorry.

Retro808 · November 2, 2020

OK. Not sure what edit you did as I do not know what the original looks like. But the issue is the first image source is set to only show in the top of the canvas (the screen).

This line below is why the image is showing in the top. The VerticalAlignment is set to "Top"

        <Image Source="{Binding Path=SelectedGame.MarqueeImagePath}" Stretch="fill" HorizontalAlignment="Center" VerticalAlignment="Top" RenderOptions.BitmapScalingMode="HighQuality" />

What exactly are you trying to have the marquee do? Is the marquee a cut lcd type screen or just a regular monitor?

SMN · November 2, 2020

I just want the marquee image appear at the bottom of the screen.

I tried edit VerticalAlignment="Top to

VerticalAlignment"down

But that didn't work.

Retro808 · November 2, 2020

Not "Down" the correct reference is "Bottom"

VerticalAlignment="Bottom"

SMN · November 2, 2020

Aha..

I'll test tomorrow.

Thanks

SMN · November 2, 2020

14 hours ago, Retro808 said:

Not "Down" the correct reference is "Bottom"

VerticalAlignment="Bottom"

Hi

I tried VerticalAlignment="Bottom

Unfortunately It didn't change anything.

Retro808 · November 2, 2020

4 minutes ago, SMN said:

Hi

I tried VerticalAlignment="Bottom

Unfortunately It didn't change anything.

Try this. The other code had some other issue as well. So this will at least get the marquee in the right spot. Well somewhat, may need to tweak the grid.

<UserControl xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             mc:Ignorable="d"
             d:DesignHeight="1080"
             d:DesignWidth="1920"
             HorizontalAlignment="Stretch"
             VerticalAlignment="Stretch"
             FocusVisualStyle="{x:Null}"
             BorderThickness="0"
             Margin="0"
             Padding="0"
             Background="#000">
	<!-- GRID DEFINITIONS -->						   
	<Grid >
			<Grid.ColumnDefinitions>                       
				<ColumnDefinition Width="1*" />
			</Grid.ColumnDefinitions>
			<Grid.RowDefinitions>
				<RowDefinition Height="*" />
				<RowDefinition Height="*" />
				<RowDefinition Height="*" />
			</Grid.RowDefinitions>
				   				   
			<!-- GAME MARQUEE -->   
		<Image Source="{Binding Path=SelectedGame.MarqueeImagePath}" Grid.Row="3" Grid.Column="0" Stretch="Fill" HorizontalAlignment="Center" VerticalAlignment="Center" RenderOptions.BitmapScalingMode="HighQuality" />
	</Grid>
	
</UserControl>

SMN · November 2, 2020

That worked!

Thanks for helping.

Any advice on how I Adjust the marquee size?

Retro808 · November 2, 2020

5 hours ago, SMN said:

That worked!

Thanks for helping.

Any advice on how I Adjust the marquee size?

Is the image too small or too big for the area you want it to show? If you look at the code you will see the canvas (screen area) is split into 3 even rows. Looking at your image it does not look like your viewing area is exactly 1/3 of the screen. So you can adjust the 3 rows to get the right height. Can you post a pic of what it looks like. It would make it easier to tell you where to adjust.

If you need to make the area bigger try changing the 3rd line of the RowDefinition Height="*" to RowDefinition Height="1.25*" or maybe 1.5* just adjust up or down until you find the sweet spot.

SMN · November 2, 2020

Here you go.

Thanks

SMN · November 2, 2020

Looks like we solved it

RowDefinition Height="0.3*"

Thank you very much for helping

Sascha-FFM · May 18, 2021

@Retro808 gave me the hint to post in here. I just received a LCD screen that I want to use as a my digital marquee with Big Box. It is technically a 1920x360 display which is presenting itself as 1920x1080 in Windows, but only displays the upper third.

I already got it working with an XML that I found somewhere in the forums. Marquees are aligned nicely, but due to the very wide aspect of the screen I get a lot of black to the right and left. Therefore I wanted to use "Mr. RetroLust's Marquee Screen Filler Magic" to introduce those great blur-effects. Unfortunately I do not get the marquees aligned on my 1920x360 display with the blur-effect XML. So ideally I would want to combine the perfect alignment of the XML I found in the forum for my display and the blur-effect, but I am afraid I am lost on how to achive this.

Here is the XML that I found which gives me perfect alignment:

<UserControl xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:transitions="clr-namespace:Unbroken.LaunchBox.Wpf.Transitions;assembly=Unbroken.LaunchBox.Wpf"
             xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
             xmlns:cal="http://www.caliburnproject.org"
             mc:Ignorable="d"
             d:DesignHeight="562" d:DesignWidth="1000" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Style="{DynamicResource UserControlStyle}">

<!-- GRID DEFINITIONS -->
            
            
    <Grid Height="1080" Width="1920">
        <Grid.ColumnDefinitions>                       
            <ColumnDefinition Width="1*" />
    </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="*" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
               
               
        <!-- GAME MARQUEE -->
               
               
        <Image Source="{Binding Path=SelectedGame.MarqueeImagePath}" Stretch="Uniform" HorizontalAlignment="Center" VerticalAlignment="Top" RenderOptions.BitmapScalingMode="HighQuality" />
            <TextBlock x:Name="GameMarquee" Visibility="Visible">
                <TextBlock.Text>
                    <MultiBinding StringFormat="{}pack://siteoforigin:,,,/Arcade - Marquee/_Default.png">
                    <Binding Path="SelectedGame.Platform"/>
                    </MultiBinding>
                </TextBlock.Text>
            </TextBlock>
        <Image x:Name="MainMarquee" Grid.RowSpan="3" Grid.Row="0" Grid.ColumnSpan="8" Grid.Column="0" Source="{Binding Text, ElementName=GameMarquee, FallbackValue='pack://siteoforigin:,,,/Arcade - Marquee/_Default.png'}" Opacity="100" Stretch="Uniform" Panel.ZIndex="1" RenderOptions.BitmapScalingMode="HighQuality" />
    </Grid>
</UserControl>

And this is how it looks like. Nicely aligned, but a lot of unused space as expected:

This is what I get with the Filler Magic after vertically aligning it to the top. Too big, but blurring works if I use smaller marquees:

If anyone would point me to a direction to merge those two XMLs or any other solution to get the FIller Magic work nicely with my display, I would be extremely happy.

Retro808 · May 18, 2021

Retrolusts' marquee filler is just taking the main image line of code and duplicating it underneath and adding a blur effect and filling the grid. So your last image line duplicate it below that one and add a blur effect. Something like this:

        <!-- GAME MARQUEE -->
               
               
        <Image Source="{Binding Path=SelectedGame.MarqueeImagePath}" Stretch="Uniform" HorizontalAlignment="Center" VerticalAlignment="Top" RenderOptions.BitmapScalingMode="HighQuality" />
            <TextBlock x:Name="GameMarquee" Visibility="Visible">
                <TextBlock.Text>
                    <MultiBinding StringFormat="{}pack://siteoforigin:,,,/Arcade - Marquee/_Default.png">
                    <Binding Path="SelectedGame.Platform"/>
                    </MultiBinding>
                </TextBlock.Text>
            </TextBlock>
        <Image x:Name="MainMarquee" Grid.RowSpan="3" Grid.Row="0" Grid.Column="0" Source="{Binding Text, ElementName=GameMarquee, FallbackValue='pack://siteoforigin:,,,/Arcade - Marquee/_Default.png'}" Opacity="100" Stretch="Uniform" Panel.ZIndex="1" RenderOptions.BitmapScalingMode="HighQuality" />
        <Image x:Name="MainMarquee" Grid.RowSpan="3" Grid.Row="0" Grid.Column="0" Source="{Binding Text, ElementName=GameMarquee, FallbackValue='pack://siteoforigin:,,,/Arcade - Marquee/_Default.png'}" Opacity="100" Stretch="Fill" Panel.ZIndex="0" RenderOptions.BitmapScalingMode="LowQuality"><Image.Effect><BlurEffect Radius="99"/></Image.Effect></Image>
    </Grid>
</UserControl>

Sascha-FFM · May 18, 2021

Thanks for you help! I am getting this error message (sorry, couldn't paste so had to do another screenshot) :

I understood that the two elements named "MainMarquee" are an issue, so I called the later one "MainMarquee2". This gets rid of the error, but there is no blur effect to be seen. Imaged aligns nicely, but - no blur. Do you have any idea?

Retro808 · May 18, 2021

Ah, good catch I see I did not alter the name. I am not sure. Can you post your xaml file and I will test.

Sascha-FFM · May 18, 2021

Sure. This is the merge between my initial version, your addition and the name-fix:

<UserControl xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:transitions="clr-namespace:Unbroken.LaunchBox.Wpf.Transitions;assembly=Unbroken.LaunchBox.Wpf"
             xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
             xmlns:cal="http://www.caliburnproject.org"
             mc:Ignorable="d"
             d:DesignHeight="562" d:DesignWidth="1000" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Style="{DynamicResource UserControlStyle}">

<!-- GRID DEFINITIONS -->
            
            
    <Grid Height="1080" Width="1920">
        <Grid.ColumnDefinitions>                       
            <ColumnDefinition Width="1*" />
    </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="*" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
               
               
 	 <!-- GAME MARQUEE -->
               
               
        <Image Source="{Binding Path=SelectedGame.MarqueeImagePath}" Stretch="Uniform" HorizontalAlignment="Center" VerticalAlignment="Top" RenderOptions.BitmapScalingMode="HighQuality" />
            <TextBlock x:Name="GameMarquee" Visibility="Visible">
                <TextBlock.Text>
                    <MultiBinding StringFormat="{}pack://siteoforigin:,,,/Arcade - Marquee/_Default.png">
                    <Binding Path="SelectedGame.Platform"/>
                    </MultiBinding>
                </TextBlock.Text>
            </TextBlock>
        <Image x:Name="MainMarquee" Grid.RowSpan="3" Grid.Row="0" Grid.Column="0" Source="{Binding Text, ElementName=GameMarquee, FallbackValue='pack://siteoforigin:,,,/Arcade - Marquee/_Default.png'}" Opacity="100" Stretch="Uniform" Panel.ZIndex="1" RenderOptions.BitmapScalingMode="HighQuality" />
        <Image x:Name="MainMarquee2" Grid.RowSpan="3" Grid.Row="0" Grid.Column="0" Source="{Binding Text, ElementName=GameMarquee, FallbackValue='pack://siteoforigin:,,,/Arcade - Marquee/_Default.png'}" Opacity="100" Stretch="Fill" Panel.ZIndex="0" RenderOptions.BitmapScalingMode="LowQuality"><Image.Effect><BlurEffect Radius="99"/></Image.Effect></Image>
    </Grid>
</UserControl>

How can I properly display Marquee images on custom cut LCD screen?

Recommended Posts

Link to comment

Share on other sites

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Popular Posts

RetroHumanoid

Retro808

natedog

Posted Images

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation