Jump to content
LaunchBox Community Forums
Carnovash

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

Recommended Posts

I have recently purchased a custom cut LCD screen from Vitrolight to fit in my cabinet's marquee space.  In testing, Windows sees the screen as a full 1080p monitor, and will try to display information in areas beyond the visible pixels on the marquee.  The visible resolution of the marquee is 1920x360.

By default when I open BigBox and try displaying the marquee images, they will center themselves and appear cutoff on the marquee screen, because BigBox also sees this monitor as a full 1080p display.  I have tried to create a custom 1920x360 resolution through the NVidia Control Panel, but even that will be centered in the theoretical display space, rather than being pushed up to the top of the display which is what I need.  I've tried the NVidia desktop resizing options, but it only seems to be for overscan issues, and will not let me move the screen position to the top.

Has anyone else worked on a similar issue to this, and found a way to properly format the screen to work with BigBox marquees?  Thanks!

Share this post


Link to post
Share on other sites

Does the marquee monitor only display the images offset like that in BigBox? In other words if you simply open an image from a folder on the marquee monitor does it display as you want it or display in the same habit as if it was opened in BigBox?

I cannot help too much with trouble shooting of custom LCD shape as I only use a 29" Ultrawide as my marquee that displays in 21:9 (2560x1080) so BigBox has no issue with it. 

Share this post


Link to post
Share on other sites

It is not only BigBox that displays the issue, it is Windows as a whole, and just the process of them cutting an LCD to that custom dimension.  I don't think BigBox has any marquee settings to customize the display, so it would likely need to be a Windows display setting that would need to change to accommodate this niche scenario.

The only solution I am fairly sure will work would be to convert each marquee by hand to a 1920x1080 image, and ensure that the actual marquee image only appears in the upper 1920x360 portion of the image.  Then I wouldn't care what is cut off, and the visible image that I am looking for should be centered correctly in the marquee LCD.  The big issue with this solution is that I would need to modify every single marquee image by hand, which would be very time consuming.

Share this post


Link to post
Share on other sites

Or just modify the GameMarqueeView and PlatformMarqueeView xaml files in the views folder to display them how you want like I ended up doing.

(Still a work in progress though)

 

Big_Box_Marquee.thumb.png.60bc0b1118c516599eaa6e723db36c45.png

Big_Box_Game_Wheel.thumb.png.cbb5de689cc6f10b9bbed6714378ae0b.png

Edited by RetroHumanoid
  • Like 2

Share this post


Link to post
Share on other sites

Thanks for the tip!  I don't have any experience with editing themes, so I haven't looked into these files.  From the looks of it, I can modify this line and change HorizontalAlighment to "Left" and VerticalAlignment to "Top" and that might resolve my issue.

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

Share this post


Link to post
Share on other sites

It is getting close!  I tried to set the HorizontalAlignment to "Left" and VerticalAlignment to "Top", and it did what I expected!

The last thing that I need is to setup is to limit the image to the top 360x1080 pixels on the screen.  I have one test image for the Shinobi marquee that now appears in the upper left, but is a little too large and expands below the limits of my marquee screen.  In the GamesMarqueeView.xml file, I changed the "d:DesignHeight" from 562 to 360, and the d:DesignWidth from 1000 to 1080.  That did not seem to change anything.

Any theme experts have any tips on if it is possible to limit the images to be stretched along the top 360x1080 pixels on a 1080p display?

Thanks!

Share this post


Link to post
Share on other sites

Try adding this to your xaml file...It's from mine that I set up...if it does not fit still,then try changing grid settings (I'm betting you need Grid.RowSpan="3".Once you establish a grid,it's easy to manipulate the objects on the screen. Make sure to add it just before </UserControl> and change the path to the marquee,to wherever you keep your marquees (both paths need to be changed)

 

<!-- GRID DEFINITIONS -->
             
             
    <Grid Height="1080" Width="1920">
        <Grid.ColumnDefinitions>                        
            <ColumnDefinition Width="1*" />
            <ColumnDefinition Width="1*" />
            <ColumnDefinition Width="1*" />
            <ColumnDefinition Width="1*" />
            <ColumnDefinition Width="1*" />
            <ColumnDefinition Width="1*" />
            <ColumnDefinition Width="1*" />
            <ColumnDefinition Width="1*" />
    </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="*" />
            <RowDefinition Height="*" />
            <RowDefinition Height="*" />
            <RowDefinition Height="*" />
            <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:,,,/
Marquees/Game Marquee/{0}/_Default.png">
                    <Binding Path="SelectedGame.Platform"/>
                    </MultiBinding>
                </TextBlock.Text>
            </TextBlock>
        <Image x:Name="MainMarquee"
Grid.RowSpan="4" Grid.Row="0" Grid.ColumnSpan="8" Grid.Column="0" Source="{Binding Text, ElementName=GameMarquee, FallbackValue='pack://siteoforigin:,,,/Marquees/Game Marquee/_Default.png'}" Opacity="100" Stretch="fill" Panel.ZIndex="1" RenderOptions.BitmapScalingMode="HighQuality" />

    </Grid>

 

 

Edited by RetroHumanoid

Share this post


Link to post
Share on other sites

That helped so much, thank you!  I had to  play around bit with the number of column  and   row definition  entries,  but it now properly fits  the marquee.  My XML looks like this now:

 
<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>

Share this post


Link to post
Share on other sites

Excellent...i'm glad it helped. I could clean up the code a bit for you,but,i'm a firm believer in "If it ain't broke,don't fix it"

I am just learning myself,but,if you run into any issues,I can try to help out again anytime

  • Like 1

Share this post


Link to post
Share on other sites

Thanks for this, I just got in a cut LCD for a work-in-progress cabinet and this code got things working. I had to change the grid settings a little (span 1 row instead of 3), and changed the scaling to unified instead of fill to keep the aspect ratio. That makes the flyer-style marquee images impossible to read. I may delete or find alternatives for those, or try re-scraping in case one of the sources has more appropriate images.

I noticed it draws the image twice - I had set it to unified in one place but not the other, and it had a stretched version under the scaled one. I'm going to try reworking that to be a solid blue field to match the bezel that'll be around the LCD and make it fit in better.

I also have to see if this'll work with CriticalZone v2 - I noticed it doesn't have xamls for the marquee, but the files are referenced in the csproj, so after work I'll figure out if I can just copy those files over and make it work.

Share this post


Link to post
Share on other sites
1 hour ago, TVsIan13 said:

I also have to see if this'll work with CriticalZone v2 - I noticed it doesn't have xamls for the marquee, but the files are referenced in the csproj, so after work I'll figure out if I can just copy those files over and make it work.

Yep...just copy them and it will work

Share this post


Link to post
Share on other sites

Noob here . I just switched over from Hyperspin and I have a Custom LCD for my marquee , and I am getting the marquees cutoff as well . I imagine this will help my problem as well ?

 

1CD4FCD3-27D7-4C14-B18B-C445197ACD34.jpeg

Share this post


Link to post
Share on other sites
27 minutes ago, vincefaro said:

Noob here . I just switched over from Hyperspin and I have a Custom LCD for my marquee , and I am getting the marquees cutoff as well . I imagine this will help my problem as well ?

Yeah, that modified xaml above will do it. You may have to tweak the Grid.Rowspan line (I had to set mine from 3 down to 1), and you may want to change the Stretch mode from Fill to Unified so it doesn't warp the aspect ratio (unless your marquee images are all close to the right shape, then it may not matter).

Share this post


Link to post
Share on other sites

So I copied and pasted this xml into my  gamesMarqueeView.xml file and saved it in my default theme. I startup BigBox and nothing changes , when I go back to the file it is not changed at all . Maybe this is a permission issue ? 

On 4/8/2018 at 10:32 AM, Carnovash said:

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>

 

Share this post


Link to post
Share on other sites

I just confirmed the reason it is not working is you cannot alter the default theme. The default theme will always return to its normal state on restart. You have to copy it and rename it. Then you can make these alterations to that copy of the default theme. 

Share this post


Link to post
Share on other sites
On 4/2/2018 at 4:55 AM, RetroHumanoid said:

Try adding this to your xaml file...It's from mine that I set up...if it does not fit still,then try changing grid settings (I'm betting you need Grid.RowSpan="3".Once you establish a grid,it's easy to manipulate the objects on the screen. Make sure to add it just before </UserControl> and change the path to the marquee,to wherever you keep your marquees (both paths need to be changed)

 

<!-- GRID DEFINITIONS -->
             
             
    <Grid Height="1080" Width=

That worked! This is awesome , one more nail in the coffin for HS.   Question? I am trying to adjust the image a little down on some of the marquees , or maybe just fill . What adjustment is that? I was playing with some of the ones stated but I received errors so obviously I messed something up.  Also, can the marquee be up while the game is being played ? 

Edited by vincefaro

Share this post


Link to post
Share on other sites

Also it is leaving up the wrong marquee when a game is selected , this happened in HyperMarquee as well in HS. 

96C95904-D959-4DB0-888E-217066C207E3.jpeg

Share this post


Link to post
Share on other sites
13 hours ago, vincefaro said:

That worked! This is awesome , one more nail in the coffin for HS.   Question? I am trying to adjust the image a little down on some of the marquees , or maybe just fill . What adjustment is that? I was playing with some of the ones stated but I received errors so obviously I messed something up.  Also, can the marquee be up while the game is being played ? 

The marquee staying up while the game is played should happen. It does in my setup. 

I cannot assist on the other question as I am not familiar with adjusting the xml at all. 

Share this post


Link to post
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.

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...