It is currently 26 May 2017, 23:50



HTML jagged edges on rotation and text

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

Moderators: Macey, Jonas Hummelstrand, didikunz

HTML jagged edges on rotation and text

Postby ASmith3006 » 11 Aug 2016, 20:07

I'm currently working on replacing our existing graphics hardware with an HTML template and running into some issues with jagged edges.
Attached is a picture of the issue, the page works fine on my computer in Firefox and Chrome, yet on CasparCG the edges are markedly jagged.

I've tried this both on my desktop PC using the screen consumer (the easiest way to get a screen grab) but I've also tried this on a decent spec dedicated server for this using a blackmagic 4K Pro card and have the same issue.

Could anyone who successfully runs HTML templates try running this page too to see if they get the same results?

Either way, does anyone have any suggestions on setting to try?

I've tried:
Server 2.0.7 running Decklink 2.6.8 - as attached
Server 2.0.7 running Decklink 2.7.1 - awful (not surprisingly)
Server 2.1.0 running 2.6.8 - awful (not surprisingly)
Server 2.1.0 running 2.7.1 - same result as attached.

I've also created a very simple HTML page which suffers the same issues, please forgive the quality of the code, no one was ever supposed to see this!
Code: Select all
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html> 
  <head> 
    <meta http-equiv="content-type" content="text/html; charset=windows-1250"> 
    <meta name="generator" content="PSPad editor, www.pspad.com"> 
    <title>
    </title> 
    <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Open+Sans" />
    <link type="text/css" rel='stylesheet' href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" />     
    <style type="text/css">   
    body, div, span {
   margin: 0px;
   padding: 0px;
  box-sizing: border-box;
  font-family: Open Sans;
}
#one {
   width: 1024px;
   height: 576px;
}
body {
   background: inherit;
   overflow: hidden;
}
#leftcolumn {
   position: fixed;
   top: 20px;
   left: 20px;
   height: 50px;
   width: 300px;
   background: #7e35a6;
  background: #f2f2f2;
}
#bottombar {
   position: fixed;
   top: 450px;
   left: 20px;
   height: 100px;
   width: 800px;
   background: #7e35a6;
  background: #f2f2f2;
   font-size: 20px;
}
#bottombar span {
   float: right;
}
#bottombar div {
   float: left;
}   
    </style> 
  </head> 
  <body>
    <div id="one">
      <div id="leftcolumn" class="animated slideInLeft">
      </div>
      <div id="bottombar" class="animated slideInUp">
        <div id="phonenumber">Some Text Will be here
        </div>
        <div id="info">Text goes here AbCd
        </div>
        <span>
        </span>
      </div>
    </div>
    <div id="tests"></div>
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
 function testAnim(id, x, remove) {
    $('#'+id).removeClass().addClass(x + ' animated').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){
      if(remove || false){
        $(this).removeClass(x + ' animated');
      }
    });
  };
  var graphicsOn = true;
  function test2(){
    graphicsOn = !graphicsOn;
    if(graphicsOn){
    testAnim("leftcolumn","bounceInLeft");
    testAnim("bottombar","bounceInDown");
    }else{
    testAnim("leftcolumn","bounceOutLeft");
    testAnim("bottombar","bounceOutDown");
    }
  }
 
   function test3(){
    graphicsOn = !graphicsOn;
    if(graphicsOn){
    testAnim("leftcolumn","rollIn");
    testAnim("bottombar","rollIn");
    }else{
    testAnim("leftcolumn","rollOut");
    testAnim("bottombar","rollOut");
    }
    //testAnim("bounceInLeft");
  }
 
  function test(){
    testAnim('phonenumber','rubberBand', true);
  }
 
  function generateTests(names){
    for(var i=0;i<names.length;i++){
      $('#tests').append('<input type="button" value="'+names[i]+'"/>');
    }
    $('#tests input').on("click",function(){
      eval($(this).val()+"()");
    });
  }
 

  generateTests(['test','test2','test3']);
</script> 
  </body>
</html>

You can test it by running
Code: Select all
CALL 1-1 test()
CALL 1-1 test2()
CALL 1-1 test3()

And my config file
Code: Select all
<?xml version="1.0" encoding="utf-8"?>
<configuration>
    <paths>
        <media-path>media\</media-path>
        <log-path>log\</log-path>
        <data-path>data\</data-path>
        <template-path>templates\</template-path>
        <thumbnails-path>thumbnails\</thumbnails-path>
    </paths>
<auto-deinterlace>false</auto-deinterlace>
    <channels>
        <channel>
            <video-mode>PAL</video-mode>
            <consumers>
 <decklink>
                <device>1</device>
                <embedded-audio>true</embedded-audio>
                <channel-layout>stereo</channel-layout>
                <latency>normal</latency>
                <keyer>external</keyer>
                <key-only>false</key-only>
                <buffer-depth>3</buffer-depth>
            </decklink>
</decklink>
        </channel>
      
    </channels>
    <controllers>
        <tcp>
            <port>5250</port>
            <protocol>AMCP</protocol>
        </tcp>
    </controllers>
</configuration>
Attachments
webgl casparcg.png
webgl casparcg.png (73.42 KiB) Viewed 995 times
ASmith3006
 
Posts: 64
Joined: 12 Dec 2013, 14:47

Re: HTML jagged edges on rotation and text

Postby ASmith3006 » 12 Aug 2016, 12:08

I am getting the following error
Code: Select all
[0812/120256:ERROR:renderer_main.cc(226)] Running without renderer sandbox

A bit of googling suggests this is safe to ignore, is that the case?
ASmith3006
 
Posts: 64
Joined: 12 Dec 2013, 14:47

Re: HTML jagged edges on rotation and text

Postby mcdikki » 12 Aug 2016, 12:23

The error can be ignored.
Your problem seems to be missing anti aliasing.
But you won't get a good result with your code anyway because you're using css3 animations which run with an unpredictable framerate that won't be synchronous to ccg.

Smooth animations need to use the window.RequestAnimationFrame(callback) method where you register a function that does all the animations for exactly one frame. This will be called by ccg when it renders a new frame.

Cheers
mcdikki
sublan.tv - Wir teilen Begeisterung
User avatar
mcdikki
 
Posts: 1056
Joined: 11 Dec 2012, 15:48
Location: Germany

Re: HTML jagged edges on rotation and text

Postby Jesper Stærkær » 13 Aug 2016, 21:02

Currently the only way to have somehow proper antialiasing for HTML text is to use SVG fonts. This is a problem due to the old version of CEF.
Jesper Stærkær
Independent Consultant at SuperFly.tv
User avatar
Jesper Stærkær
 
Posts: 847
Joined: 13 Apr 2010, 18:06
Location: Trondheim, Norway

Re: HTML jagged edges on rotation and text

Postby ASmith3006 » 15 Aug 2016, 10:25

Jesper Stærkær wrote:Currently the only way to have somehow proper antialiasing for HTML text is to use SVG fonts. This is a problem due to the old version of CEF.

Jesper,

Thanks for clarifying that. I assume that swapping to a more recent version of CEF isn't a trivial matter?
ASmith3006
 
Posts: 64
Joined: 12 Dec 2013, 14:47


Return to Content

Who is online

Users browsing this forum: No registered users and 4 guests