It is currently 28 Mar 2017, 11:04



Flicker effect

Videos, graphics, Flash templates – how to create and play them using CasparCG

Moderators: Macey, Jonas Hummelstrand, didikunz

Flicker effect

Postby toderek » 23 Jul 2012, 15:50

I'm new to Caspar CG, and have one problem.

We are working with CasparCG server 2.0 and Decklink SDI card, producing PAL 16:9 output.

The output works well on screen preview, as well as when we connect SDI output (fill) to the LCD monitor. But when we connect it to a CRT display, we have a flicker effect.

We have a background animation in one layer, and over it we have flash graphics.

I'm uploading you to see the graphics. Can you help detect the problem? Is it up to Decklink, Caspar, Flash or up to graphics itself? If is it up to graphics, where to change it - to change the backgrounds in photoshop, or to change something in Flash?

Thanks in advance.
Attachments
flicker.jpg
flicker.jpg (161.91 KiB) Viewed 1954 times
toderek
 
Posts: 3
Joined: 29 May 2012, 12:46

Re: Flicker effect

Postby Jesper Stærkær » 23 Jul 2012, 15:57

Can it be that the VCR is out of sync? Have you tried with genlock?
Jesper Stærkær
Independent Consultant at SuperFly.tv
User avatar
Jesper Stærkær
 
Posts: 835
Joined: 13 Apr 2010, 18:06
Location: Trondheim, Norway

Re: Flicker effect

Postby toderek » 23 Jul 2012, 16:12

jespers wrote:Can it be that the VCR is out of sync? Have you tried with genlock?


We tried it without genlock so far - just connected fill and that's it. We will try to connect the reference tomorrow as well. Any other ideas if that won't work?
toderek
 
Posts: 3
Joined: 29 May 2012, 12:46

Re: Flicker effect

Postby didikunz » 23 Jul 2012, 20:12

The flicker effect is probabliy a interlace-flicker, on a LCD you will not see it, because it deinterlaces the video. Try to make you graphics slightly out of focus, or make horizontal lines two pixel wide etc. The CRT Monitor must be the reference in all graphics design for a interlaced TV System als PAL is.
Didi Kunz
CasparCG Client-Programmer, Template Maker & Live CG-Operator
Media Support, CH-5722 Gränichen, Switzerland http://mediasupport.ch/
Problems? Guide to posting Bug reports & Feature requests
User avatar
didikunz
 
Posts: 3401
Joined: 10 May 2010, 09:08
Location: Aarau, Switzerland

Re: Flicker effect

Postby Jonas Hummelstrand » 24 Jul 2012, 15:48

When you have narrow lines and sharp contrast, you'll often get flickering when outputting interlaced. Add a slight vertical blur to make it go away.
Jonas Hummelstrand
Independent Consultant at SuperFly.tv
Former Community Manager for CasparCG

Problems? Guide to posting Bug reports & Feature requests
User avatar
Jonas Hummelstrand
 
Posts: 2538
Joined: 21 Apr 2009, 08:07
Location: Stockholm, Sweden

Re: Flicker effect

Postby sirfnomi » 31 Jan 2017, 21:30

i'm getting this same flickering on interlace display like CRT.
i'm using html template and this flickering is also on text

Jonas Hummelstrand wrote:When you have narrow lines and sharp contrast, you'll often get flickering when outputting interlaced. Add a slight vertical blur to make it go away.


kindly explain what is vertical blur means and how can i add vertical blur on html font.
sirfnomi
 
Posts: 30
Joined: 24 Feb 2015, 22:20

Re: Flicker effect

Postby sonny_xny » 01 Feb 2017, 12:16

If you are using html template that having text or image moving, this always making looks flicker, this came from html producer in casparcg server, because html producer can not rendering the template in off screen method, it must be rendering in real time at the real screen, refresh every certain millisecond. Maybe, if caspercg developer team update the html producer using latest CEF library, this problem can be eliminate.
User avatar
sonny_xny
 
Posts: 106
Joined: 06 Jul 2015, 08:59

Re: Flicker effect

Postby sirfnomi » 01 Feb 2017, 15:17

ok.. i was thinking that i'm using PAL format and this is field flickering which we can notice in interlaced display because i'm not using my html properly for PAL (interlace) format.

thanks sonny_xny
sirfnomi
 
Posts: 30
Joined: 24 Feb 2015, 22:20

Re: Flicker effect

Postby didikunz » 01 Feb 2017, 18:25

sirfnomi wrote:ok.. i was thinking that i'm using PAL format and this is field flickering which we can notice in interlaced display because i'm not using my html properly for PAL (interlace) format.

thanks sonny_xny


I don't think, that Sonny is right about this flickering, as it sure is interlace flicker. I am not a HTML 5 guru, but this could probably help: http://css-plus.com/2012/03/gaussian-blur/ By adding a small blur to objects, the interlace flicker can be eliminated.
Didi Kunz
CasparCG Client-Programmer, Template Maker & Live CG-Operator
Media Support, CH-5722 Gränichen, Switzerland http://mediasupport.ch/
Problems? Guide to posting Bug reports & Feature requests
User avatar
didikunz
 
Posts: 3401
Joined: 10 May 2010, 09:08
Location: Aarau, Switzerland

Re: Flicker effect

Postby sirfnomi » 01 Feb 2017, 21:06

adding blur trick is working but css bug that it is not working on 0.1px
0.79px blur is equal to 0px blur
0.8px blur is equal to 1px blur
and 1px blur is making element very blurry

Demo http://codepen.io/anon/pen/VPXmdj
sirfnomi
 
Posts: 30
Joined: 24 Feb 2015, 22:20

Re: Flicker effect

Postby sonny_xny » 02 Feb 2017, 05:13

I don't think, that Sonny is right about this flickering, as it sure is interlace flicker. I am not a HTML 5 guru, but this could probably help: http://css-plus.com/2012/03/gaussian-blur/ By adding a small blur to objects, the interlace flicker can be eliminated.


Well, didi :)

you can try this "running text" using html5 marquee with no javascript, testing in "720p2500" channel mode, just using "Screen Consumer" :

Code: Select all
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Scroll Marque</title>
<style type="text/css">
html {
    -webkit-font-smoothing: antialiased !important;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.004) !important;
}
body {
   margin-left: 0px;
   margin-right: 0px;
}
.news {
   border:solid 1px gray;
   white-space: nowrap;
   overflow:hidden;
   font-family:tahoma;
   font-size:18px;
   font-weight:bold;
   background-color:#DEDEDE;
   color:#000000;
   
   left:10px;
   bottom:20px;
   position:absolute;
   width:98%;
   
   text-rendering: optimizeLegibility !important;
   -webkit-font-smoothing: antialiased !important;
   -moz-osx-font-smoothing: grayscale !important;
   font-smoothing: antialiased !important;
   font-smooth: 3em !important;
}
.news ul{display:inline-block; padding:0px; margin:0px;}
.news li{display:inline; margin-right:30px;}
.news li::before{content:"● ";}
</style>
</head>

<body>
<div class="news no-js">
<marquee scrollamount="1em" scrolldelay="20" behavior="scroll" direction="left" truespeed="truespeed">
<ul>
  <li>Good News 1</li>
  <li>Bad News 2</li>
  <li>Good News 3</li>
  <li>Bad News 4</li>
  <li>Good News 5</li>
  <li>Bad News 6</li>
  <li>Good News 7</li>
  <li>Bad News 8, this news is in the long text so if you can read along</li>
</ul>
</marquee>
</div>
</body>
</html>


You can comparing it with the "gaussian blur" effect method that you're mention :

Code: Select all
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Scroll Marque</title>
<style type="text/css">
html {
    -webkit-font-smoothing: antialiased !important;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.004) !important;
}
body {
   margin-left: 0px;
   margin-right: 0px;
}
.news {
   border:solid 1px gray;
   white-space: nowrap;
   overflow:hidden;
   font-family:tahoma;
   font-size:18px;
   font-weight:bold;
   background-color:#DEDEDE;
   color:#000000;
   
   left:10px;
   bottom:20px;
   position:absolute;
   width:98%;
   
   text-rendering: optimizeLegibility !important;
   -webkit-font-smoothing: antialiased !important;
   -moz-osx-font-smoothing: grayscale !important;
   font-smoothing: antialiased !important;
   font-smooth: 3em !important;
}
.news ul{display:inline-block; padding:0px; margin:0px;}
.news li{display:inline; margin-right:30px;}
.news li::before{content:"● ";}
.blur-dropshadow {
   color: rgba(0,0,0,0);
   margin: 10px;
   text-shadow: 0px 0px 2px #000, 0px 0px 1px #000;
   -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
     -ms-transition: all 0.5s ease;
      -o-transition: all 0.5s ease;
        transition: all 0.5s ease;
}
</style>
</head>

<body>
<div class="news no-js blur-dropshadow">
<marquee scrollamount="1em" scrolldelay="20" behavior="scroll" direction="left" truespeed="truespeed">
<ul>
  <li>Good News 1</li>
  <li>Bad News 2</li>
  <li>Good News 3</li>
  <li>Bad News 4</li>
  <li>Good News 5</li>
  <li>Bad News 6</li>
  <li>Good News 7</li>
  <li>Bad News 8, this news is in the long text so if you can read along</li>
</ul>
</marquee>
</div>
</body>
</html>


You will see what the different :)

Cheers,
Sonny
User avatar
sonny_xny
 
Posts: 106
Joined: 06 Jul 2015, 08:59

Re: Flicker effect

Postby didikunz » 02 Feb 2017, 09:15

Sorry Sonny I did not want to critisize you, nor do I have anything personal against you. There are several reasons why a flicker can occure. One of them is having fine lines / details on an interlaced display. I was just thinking, that the symptoms he was discribing pointed more to such a problem, than to a flickering based on screen updates. As I mentioned in my post, I have no experiance building HTML 5 templates (I still use Flash) and pointing to the page about gaussian blur was just a idea to give him a starting point for furter investigations. That this method only helps on static elements was clear for me. Doing tickers is always another deal.
Didi Kunz
CasparCG Client-Programmer, Template Maker & Live CG-Operator
Media Support, CH-5722 Gränichen, Switzerland http://mediasupport.ch/
Problems? Guide to posting Bug reports & Feature requests
User avatar
didikunz
 
Posts: 3401
Joined: 10 May 2010, 09:08
Location: Aarau, Switzerland

Re: Flicker effect

Postby hreinnbeck » 02 Feb 2017, 09:54

Here is an example of a HTML ticker running smoothly. Programmed about 2 years ago, running on an old build of 2.0.7. The recording isn't the best quality but will suffice to prove my point:
https://www.youtube.com/watch?v=Lvb3xqL15Vg

Also I'd like to point out that the setting called something like "reduce jitter on pause" in the Declink control panel should be off, otherwise it can affect interlaced graphics.

FYI: The ticker uses no blurring or any filters.
hreinnbeck
 
Posts: 294
Joined: 04 Aug 2009, 06:31

Re: Flicker effect

Postby sonny_xny » 03 Feb 2017, 04:17

toderek wrote:We are working with CasparCG server 2.0 and Decklink SDI card, producing PAL 16:9 output.


Maybe you can try this "simple setting" on CasparCG Server Channel Configuration

auto_deinterlace_PAL.jpg
auto_deinterlace_PAL.jpg (48.24 KiB) Viewed 582 times


You can adding "Screen" on Step 3 (Channel Output) if it not exists before and then activate the "Auto Deinterlace" option, goto File menu, choose "Save" and then restart CasparCG Server.

For my experience with PAL system this will help a litte bit,
other wise you can change Decklink configuration just like hreinbeck said :)

Cheers,
Sonny
User avatar
sonny_xny
 
Posts: 106
Joined: 06 Jul 2015, 08:59

Re: Flicker effect

Postby sirfnomi » 06 Feb 2017, 22:38

hreinnbeck wrote:Also I'd like to point out that the setting called something like "reduce jitter on pause" in the Declink control panel should be off, otherwise it can affect interlaced graphics.


yes, i already disable it. thanks
sirfnomi
 
Posts: 30
Joined: 24 Feb 2015, 22:20


Return to Content

Who is online

Users browsing this forum: Google [Bot] and 2 guests