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

Retro808 · October 6, 2019

9 hours ago, Chillijason said:

Do you know how to make clear logos appear for unknown marquees instead of boxart? i cant seem to change the folder priority.

cheers

I responded in your thread since you started a new post.

Chillijason · October 6, 2019

Thanks, im hoping someone may have seen that post and i could get a copy of the code used... a little beyond my xaml skills at the moment. cheers

daphnefan · January 3, 2020

hi all. I just got my vitrolight in the mail and the files on the first page were excellent! however, is there a way to make this work with @Mr. RetroLust's Screen Filler Magic? Every modification i try to make to adapt his xml stuff to the stuff from the first page ends in error for me. the other option is to have the marquees stretch but i dont like how that looks.

Retro808 · January 3, 2020

1 hour ago, daphnefan said:

hi all. I just got my vitrolight in the mail and the files on the first page were excellent! however, is there a way to make this work with @Mr. RetroLust's Screen Filler Magic? Every modification i try to make to adapt his xml stuff to the stuff from the first page ends in error for me. the other option is to have the marquees stretch but i dont like how that looks.

It is possible. We would have to see exactly what you are doing. Retrolust's code is simply mirroring the MarqueeImage and applying a blur effect to it. Post your xaml file or code.

daphnefan · January 4, 2020

4 minutes ago, Retro808 said:

It is possible. We would have to see exactly what you are doing. Retrolust's code is simply mirroring the MarqueeImage and applying a blur effect to it. Post your xaml file or code.

Thanks! I’m using the code in this post:

Retro808 · January 4, 2020

12 minutes ago, daphnefan said:

Thanks! I’m using the code in this post:

Yeah, I got that. I meant specifically what you have in the xaml file. You said you did modification and tried to adapt the codes. Without seeing exactly what you did we cannot see what the error might be. We would basically just be guessing what is wrong.

daphnefan · January 4, 2020

44 minutes ago, Retro808 said:

Yeah, I got that. I meant specifically what you have in the xaml file. You said you did modification and tried to adapt the codes. Without seeing exactly what you did we cannot see what the error might be. We would basically just be guessing what is wrong.

I deleted what I had tried and reverted to the code I posted earlier and came here for help lol. I tried taking all the lines in retrolust’s code that y’all about the image source and plug them in the best I could but I either got marquees that were center on the screen (so I only saw the very top of them) or it would just give me an error and revert to default settings

daphnefan · January 7, 2020

On 1/3/2020 at 7:11 PM, Retro808 said:

Yeah, I got that. I meant specifically what you have in the xaml file. You said you did modification and tried to adapt the codes. Without seeing exactly what you did we cannot see what the error might be. We would basically just be guessing what is wrong.

So this is the code im using, but it stretches the image and that is killing me

<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="fill" 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="fill" Panel.ZIndex="1" RenderOptions.BitmapScalingMode="HighQuality" />
    </Grid>
</UserControl>

Here is the code from the Mr. RetroLust's Marquee Screen Filler Magic that im trying to adapt, but i get errors every time.

<Image Source="{Binding Path=SelectedGame.MarqueeImagePath}" Panel.ZIndex="1" Stretch="Uniform" 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" RenderOptions.BitmapScalingMode="LowQuality"><Image.Effect><BlurEffect Radius="99"/></Image.Effect></Image>
</Grid>
</UserControl>

I'm guessing that the place to place this is near the end of the first code, but i've tried just out and out replacing that section and it didnt work and ive tried just replacing little bits here and there where i noticed differences and it also gave me errors. I must be missing something but im not sure what.

Retro808 · January 7, 2020

What is the exact look you are trying to get?

The image is stretching because you are using "Fill" in the Stretch command. You would want something more like "Uniform" which will keep the image aspect. If you use "UniformToFill" it will keep the aspect of the image, fill the space, but part of the image will cutoff. So depending on the look you are trying to go for you may need to make some design concessions.

I was able to get it to show the marquee in the upper 3rd of the screen with the affect by changing the code a bit.

<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="1080" d:DesignWidth="1920" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Style="{DynamicResource UserControlStyle}">
<!-- 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}" Panel.ZIndex="9" 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" Panel.ZIndex="9" Grid.Row="0" Grid.Column="0" Source="{Binding Text, ElementName=GameMarquee, FallbackValue='pack://siteoforigin:,,,/Arcade - Marquee/_Default.png'}" Opacity="100" Stretch="Uniform" RenderOptions.BitmapScalingMode="HighQuality" />
		<Image Source="{Binding Path=SelectedGame.MarqueeImagePath}" Panel.ZIndex="0" Grid.Row="0" Grid.Column="0" Stretch="Fill" RenderOptions.BitmapScalingMode="LowQuality"><Image.Effect><BlurEffect Radius="99"/></Image.Effect></Image>
    </Grid>
</UserControl>

TVsIan13 · January 8, 2020

23 hours ago, Retro808 said:

What is the exact look you are trying to get?

The image is stretching because you are using "Fill" in the Stretch command. You would want something more like "Uniform" which will keep the image aspect. If you use "UniformToFill" it will keep the aspect of the image, fill the space, but part of the image will cutoff. So depending on the look you are trying to go for you may need to make some design concessions.

I was able to get it to show the marquee in the upper 3rd of the screen with the affect by changing the code a bit.


<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="1080" d:DesignWidth="1920" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Style="{DynamicResource UserControlStyle}">
<!-- 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}" Panel.ZIndex="9" 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" Panel.ZIndex="9" Grid.Row="0" Grid.Column="0" Source="{Binding Text, ElementName=GameMarquee, FallbackValue='pack://siteoforigin:,,,/Arcade - Marquee/_Default.png'}" Opacity="100" Stretch="Uniform" RenderOptions.BitmapScalingMode="HighQuality" />
		<Image Source="{Binding Path=SelectedGame.MarqueeImagePath}" Panel.ZIndex="0" Grid.Row="0" Grid.Column="0" Stretch="Fill" RenderOptions.BitmapScalingMode="LowQuality"><Image.Effect><BlurEffect Radius="99"/></Image.Effect></Image>
    </Grid>
</UserControl>

I tried this code on my cabinet last night (also using a 1/3 cut Vitrolight LCD), and noticed something weird.

For game marquees, it works just fine, comes up like the preview image with the blurred image behind the clear one.

But I have a set of category/platform/playlist marquees that I made that are the exact resolution of the LCD. And using the same code for the platform marquee .xaml, only the blurred one appears. It's definitely selecting the right image, as the blur matches and if I comment out the blurred one the correct one shows up. But either it's drawing the blurred one on top, or it's just not drawing the unblurred one.

I tried switching the order of the two lines and messing with the zindex a little, but the only way I could get it to show properly was leaving the blurred version commented out.

Ordinarily I'd say it's not a big deal since it's super unlikely that the games will have an image the same resolution as the display, and I can just have the two marquee xamls differ, but I'd also like to use those platform images as a default if there's no marquee, and that would be an issue.

Any idea what could be causing that? When I get home from work, I could try rescaling one of them down by 1 pixel all around and see if that works as kind of a brute force solution. I think the images are 1920x357, but I don't have them on me to double check, if there's any way to figure out the source of that issue.

Retro808 · January 8, 2020

Try a more simpler code like below. Why it is not respecting the Z Index I am not sure.

<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="1080" d:DesignWidth="1920" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" 
			 Style="{DynamicResource UserControlStyle}">

	<!-- 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}" Panel.ZIndex="9" Grid.Row="0" Grid.Column="0" Stretch="Uniform" HorizontalAlignment="Center" VerticalAlignment="Center" RenderOptions.BitmapScalingMode="HighQuality"><Image.Effect><DropShadowEffect BlurRadius="99" /></Image.Effect></Image>
		<Image Source="{Binding Path=SelectedGame.MarqueeImagePath}" Panel.ZIndex="0" Grid.Row="0" Grid.Column="0" Stretch="Fill" RenderOptions.BitmapScalingMode="LowQuality"><Image.Effect><BlurEffect Radius="99"/></Image.Effect></Image>
	</Grid>
	</UserControl>

Mr. RetroLust · January 8, 2020

I see:

Opacity="100"

was this in the orginal code? (Not at the pc atm so I can't check it)

Retro808 · January 8, 2020

2 hours ago, Mr. RetroLust said:
I see:
Opacity="100"
was this in the orginal code? (Not at the pc atm so I can't check it)

Nah, that's like just a remnant from something I was testing playing around with opactities. It still displays correctly though.

EDIT:

I edited out that piece of the code.

Mr. RetroLust · January 8, 2020

In case it is needed, heres the original files including the platform marquee xaml, which should just work.

Mr.RetroLusts Marquee Screen Filler Magic.zip

TVsIan13 · January 8, 2020

6 hours ago, Mr. RetroLust said:

In case it is needed, heres the original files including the platform marquee xaml, which should just work.

Mr.RetroLusts Marquee Screen Filler Magic.zip 1.34 kB · 0 downloads

It'll work if the marquee is a full monitor, but taking a look at the file, it doesn't look like it'll chop it down to the top third. These cut LCDs register as 1920x1080 when you plug them in, but only the top 357 pixels actually exist.

I'll try the second modified version and the original after work and see if either one does work though. I wonder if feeding a 1920x1080 marquee to the original version would produce the same issue.

[Edit]I figured it out. Had to change SelectedGame.MarqueeImagePath to SelectedPlatform.BackgroundImagePath in the platform marquee xaml. Now, as to why it picked the correct image for the blurred version or when I commented out the blur, I have no idea. But it works now.

Edited January 9, 2020 by TVsIan13
Fixed problem

daphnefan · January 9, 2020

On 1/7/2020 at 9:58 AM, Retro808 said:

What is the exact look you are trying to get?

The image is stretching because you are using "Fill" in the Stretch command. You would want something more like "Uniform" which will keep the image aspect. If you use "UniformToFill" it will keep the aspect of the image, fill the space, but part of the image will cutoff. So depending on the look you are trying to go for you may need to make some design concessions.

I was able to get it to show the marquee in the upper 3rd of the screen with the affect by changing the code a bit.


<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="1080" d:DesignWidth="1920" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Style="{DynamicResource UserControlStyle}">
<!-- 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}" Panel.ZIndex="9" 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" Panel.ZIndex="9" Grid.Row="0" Grid.Column="0" Source="{Binding Text, ElementName=GameMarquee, FallbackValue='pack://siteoforigin:,,,/Arcade - Marquee/_Default.png'}" Opacity="100" Stretch="Uniform" RenderOptions.BitmapScalingMode="HighQuality" />
		<Image Source="{Binding Path=SelectedGame.MarqueeImagePath}" Panel.ZIndex="0" Grid.Row="0" Grid.Column="0" Stretch="Fill" RenderOptions.BitmapScalingMode="LowQuality"><Image.Effect><BlurEffect Radius="99"/></Image.Effect></Image>
    </Grid>
</UserControl>

I'll give this a shot tonight and see how it works. What i am trying to get is for the image to show up but not stretched, and for the empty space left by the unstretched image to appear as a blurred background. I think this code might work for that. Thanks for being so helpful!

Edited January 9, 2020 by daphnefan

angerman · March 22, 2020

Hi there ! I have 2 screens and thanks to yours advices everything working perfect .... quick question when Im on the page when you can pick platform there is a baner on the second screen with that platform ..can I set there a movie like ps one opening movie ... simply I want a startup movie from platforms to be displeyed on the second screen when you choose the platform !!! is this possible ??

thank You

Retro808 · March 22, 2020

Just now, angerman said:

Hi there ! I have 2 screens and thanks to yours advices everything working perfect .... quick question when Im on the page when you can pick platform there is a baner on the second screen with that platform ..can I set there a movie like ps one opening movie ... simply I want a startup movie from platforms to be displeyed on the second screen when you choose the platform !!! is this possible ??

thank You

No. The marquee currently does not support videos.

natedog · April 23, 2020

Thank you, this thread helped me. I have always dreamed of a digital marquee, getting close! Prototyping.

Retro808 · April 23, 2020

3 hours ago, natedog said:

Thank you, this thread helped me. I have always dreamed of a digital marquee, getting close! Prototyping.

Looks good. Yeah, eventually Jason will add more in depth marquee functionality. For not though it has to wait as he has a host of other things they are working on getting in LB/BB.

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