HTML jagged edges on rotation and text

#1
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 1140 times

Re: HTML jagged edges on rotation and text

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

Who is online

Users browsing this forum: Google [Bot] and 1 guest

cron