Results 1 to 7 of 7

Thread: [RESOLVED] PNG logo over video

  1. #1

    Thread Starter
    New Member
    Join Date
    Oct 2017
    Posts
    6

    Resolved [RESOLVED] PNG logo over video

    Hi all, just like it says in the title, I have a simple yet maddening problem i can'd fix no matter how much research i do. I want to take a video (right now it's just an mp4 but eventually i want it to be live video) and simply put text and a logo (png with alpha) over top of it. I've researched this, and thought i found a solution by using e.graphics.drawimage to directly paint the logo over the video. works perfectly on the form, but the mediaplayer doesn't have a "paint" event so that was a dead end.

    I'm assuming it will require something a bit more involved but i can't find it. any ideas?

  2. #2
    PowerPoster boops boops's Avatar
    Join Date
    Nov 2008
    Location
    Holland/France
    Posts
    3,201

    Re: PNG logo over video

    Hi shrillHarpee, welcome to VBForums. A relatively simple way to display images and text over a live video is to use a separate Form (an "overlay") in front of the main form. Here's a code example with a Form (Form1) containing a Media Player (AXWindowsMediaPlayer1) and the PNG file image stored as a resource (My.Resources.logo).
    Code:
    Public Class Form1
       Private WithEvents OverlayForm As New Form
       Private logo As Image = My.Resources.logo
    
       Private Sub Form1_Load(sender As Object, e As System.EventArgs) Handles Me.Load
          With OverlayForm
             .FormBorderStyle = Windows.Forms.FormBorderStyle.None
             .BackColor = Color.Magenta
             .TransparencyKey = .BackColor
             .Opacity = 0.5
             .ShowInTaskbar = False
             .Show(Me)
          End With
       End Sub
    
       Private Sub Form1_Move_etc(sender As System.Object, e As System.EventArgs) Handles Me.Shown, Me.SizeChanged, Me.Move
          OverlayForm.Bounds = Me.RectangleToScreen(Me.ClientRectangle)
       End Sub
    
       Private Sub OverlayForm_Paint(sender As Object, e As System.Windows.Forms.PaintEventArgs) Handles OverlayForm.Paint
          Dim x As Integer = AxWindowsMediaPlayer1.Left + 10
          Dim y As Integer = AxWindowsMediaPlayer1.Top + 10
          e.Graphics.DrawImage(logo, x, y)
       End Sub
    
    End Class
    The "Me" argument in the Show method makes Form1 the Owner of OverlayForm. That means the overlay will stay locked to the main form, for example when you minimize or restore the form; it also prevents the overlay showing up in Alt-Tab as a separate window. The Form1_Move_etc sub is needed if the media player can change size or position, for example if it is docked into a resizable form.

    This should work well if your PNG is a solid coloured image on a transparent background. If the image contains translucent areas, including antialiased edges, the partly transparent pixels will show up mixed with the overlay form's background color instead of transparent. How bad this looks depends on the video content and the chosen BackColor. You can still adjust the overall transparency of the image by setting the Opacity property as in the example. For higher quality results with antialiasing and translucent colours, you will get the best results by building the interface in WPF.

    BB

  3. #3

    Thread Starter
    New Member
    Join Date
    Oct 2017
    Posts
    6

    Re: PNG logo over video

    Thanks boops boops. ironically, I had considered that a potential solution but had no idea how to go about it, so thanks a lot! I don't necessarily need translucent areas, but I imagine the method you describe will not be antialiased because of the translucency issue you describe. If I wanted to try it in WPF instead, would I use pretty much the same coding steps?

  4. #4

    Thread Starter
    New Member
    Join Date
    Oct 2017
    Posts
    6

    Re: PNG logo over video

    ** Update...... ok some progress. ALMOST there, but one little thing I'm still doing wrong obviously ...

    1) I have my main form successfully showing the live video via directshow
    2) i have my secondary form with the png logo drawn on it
    3) it all works! yay. EXCEPT it only works on the very first frame of video as the png is drawn. Then the video underneath it keeps moving but the rectangle that was drawn with the logo is frozen with the video from the first frame with the png superimposed over it.

    this is what i'm using. I suspect it's not the right sub to override but i'm stumped

    Protected Overrides Sub OnPaintBackground(ByVal pevent As System.Windows.Forms.PaintEventArgs)
    Dim gfx As dra.Graphics = pevent.Graphics
    Dim IMA As Image
    IMA = Image.FromFile("D:\WORK\myfile.png", True)
    gfx.DrawImage(IMA, New dra.Rectangle(0, 0, Me.Width, Me.Height))
    End Sub

  5. #5
    PowerPoster boops boops's Avatar
    Join Date
    Nov 2008
    Location
    Holland/France
    Posts
    3,201

    Re: PNG logo over video

    I presume you are using DirectShow .Net. I took a look at it and noticed that it hasn't been updated since 2010. If the provided sample of placing text over a playing video doesn't work, maybe it's incompatible with the current OS. WPF is itself a managed wrapper for DirectX, so maybe DirectShow .Net has become redundant.

    I don't have a lot of experience with WPF, but I can give you an impression of how easy (or not) it is to get it working. The code below uses a MediaPlayer to play a video and a Label to display both text and an image over it. You don't have to do anything extra to get partial transparency or antialiasing.

    Assuming you haven't tried WPF before, here's the first steps:
    1. start a WPF project in Visual Studio.
    2. By default the window hosts an (invisible) Grid control. Left-click the window once to select the Grid, then set its Name property to Grid1 so you can reference it from code.
    3. Right-click the window and select view code.

    Paste in the following code. Obviously, you must replace the MP4 and PNG path names by your own file paths; you may also want change details such as the Label Width and Height. All dimensions are in device-independent units, not pixels.
    Code:
    Class MainWindow
    
       Dim videoPath As String = "D:\Music\Video Downloads\Sample1.mp4"
       Dim imagePath As String = "D:\Pictures\transp_blue.png"
    
       Private Sub MainWindow_Initialized(sender As Object, e As EventArgs) Handles Me.Initialized
          PlayVideo()
          ShowLabel()
       End Sub
    
       Private Sub PlayVideo()
          Dim player As New MediaPlayer
    
          player.Open(New Uri(videoPath, UriKind.Relative))
          ' Create the VideoDrawing.
          Dim videoDrawing As New VideoDrawing()
          videoDrawing.Rect = New Rect(150, 0, 100, 100)
          videoDrawing.Player = player
          ' Assign the DrawingBrush.
          Dim brush As New DrawingBrush(videoDrawing)
          Me.Background = brush
    
          ' Start playback.
          player.Play()
       End Sub
    
       Private Sub ShowLabel()
          Dim Label1 As New Label
    
          ' Give the Label a semi-transparent background image from a PNG file:
          Dim uri As New Uri(imagePath)
          Dim bi As New BitmapImage(uri)
          Dim labelBackground As New ImageBrush(bi)
          labelBackground.Opacity = 0.5
    
          ' Set the Label properties including text
          With Label1
             .Background = labelBackground
             .Content = "Example Text"
             .Height = 100
             .Width = 400
             .Opacity = 0.5
             .FontSize = 48
             .Foreground = Brushes.Red
             .FontFamily = New FontFamily("Segoe WP Black")
          End With
    
          ' Add a Label to the Grid
          Grid1.Children.Add(Label1)
       End Sub
    
    End Class
    WPF code tends to be a bit verbose, but once you get used to it it's much easier to add controls like the MediaPlayer and the Label and set their properties in the Designer instead of in code.

    BB

  6. #6

    Thread Starter
    New Member
    Join Date
    Oct 2017
    Posts
    6

    Re: PNG logo over video

    Wow thanks a lot, that worked perfectly right out of the box. I will have to learn a bit more about WPF to replicate all of the winforms code i want to add but the underlying problem is solved thanks to you.

  7. #7
    PowerPoster boops boops's Avatar
    Join Date
    Nov 2008
    Location
    Holland/France
    Posts
    3,201

    Re: PNG logo over video

    Quote Originally Posted by shrillHarpee View Post
    Wow thanks a lot, that worked perfectly right out of the box. I will have to learn a bit more about WPF to replicate all of the winforms code i want to add but the underlying problem is solved thanks to you.
    I'm glad to hear that. Please mark this thread [RESOLVED] by selecting it from the Thread Tools menu above this thread. It will be more useful for other people seeking help on this topic.

    BB

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  



Click Here to Expand Forum to Full Width