Regular and bold font in the same text field of flash template

anchius · September 6, 2018, 4:20pm

Hi,
What would be the best way to achieve the case of using regular and bold text in the same textfield of flash template? For example, I need to be “Name Surname” aligned left, but Surname needs to be in bold (Name in regular). I have tried using htmltext with bold tags, but it looks like CasparCG does not support it. It only works on Flash/Animate preview.

didikunz · September 6, 2018, 5:03pm

That’s not true, the problem is, that you need to setup the htmltext property “by hand” in your SetData() function, as otherways Caspar sets the text property and that does not support HTML.

anchius · September 6, 2018, 5:16pm

Thank you Didi. I had a doubts it could be the case you have explained. The only thing left is to figure it out how to properly setup the property as htmlText in SetData() function Do I need to override it somehow?

anchius · September 7, 2018, 6:34am

OK, I am trying to approach the solution. This is the code:

package {
        	//import flash.display.MovieClip;
        	import se.svt.caspar.ICommunicationManager;
        	import se.svt.caspar.IRegisteredDataSharer;
        	import se.svt.caspar.template.CasparTemplate;
        	import se.svt.caspar.template.components.CasparTextField;

        	public class DemoTextChange extends CasparTemplate {
        		private const customParameterDescription:XML = 
        		<parameters>
        		<parameter id="htmlText" type="string" info="text with HTML tags" />
        		</parameters>;
        		
        		override public function SetData(xmlData:XML):void 
        		{
        		   for each (var element:XML in xmlData.children())
        		   {
        			  if (element.@id == "htmlText") 		
        			  {
        				  _textField.htmlText = xmlData.data.@value;
        			  }
        			 
        		   }
        		   super.SetData(xmlData);		
        		}
        	}
        }

The problem is with _textField.htmlText = xmlData.data.@value; line for now. How to reach the textField correctly to use it as a htmlText (not Text as done as default)? Am I on the right direction at all?

rrebuffo · September 8, 2018, 1:17am

First of all, the line super.SetData(xmlData); will set the TextField’s text property after you set the htmlText property so it should restore it to unformatted text.
Also, the bold tags don’t work apparently. You should set it as:
Name Surname
When you embed the fonts, mark the “Export for ActionScript” option, otherwise it won’t work.

didikunz · September 8, 2018, 8:18am

Good to know, thanks.

Zoxg · September 19, 2020, 12:49pm

i am also trying to do this, and i did not get it reading your solution, should i pass entire html code in one var to dynamic text, and declare it before that in as file, or something different?

rrebuffo · September 19, 2020, 1:11pm

Yes, you should use font names as they appear in the Font Name detail of the font embedding window (the selected info in the left image), like:

textField.htmlText = 'Name Surname'

You should make sure every font variant it is exported for ActionScript.

Zoxg · September 21, 2020, 6:59pm

i have tried to do this and i get error

[error]<invoke name="OnError" returntype="xml"><arguments><string>@Add@1@TypeError: Error #1010@</string></arguments></invoke>

my AS code is:

package
{
	import caurina.transitions.Equations;
	import caurina.transitions.Tweener;
	import flash.display.Loader;
	import flash.display.MovieClip;
	import flash.events.Event;
	import flash.events.TimerEvent;
	import flash.net.URLRequest;
	import flash.text.TextField;
	import flash.utils.Timer;
	import flash.geom.ColorTransform;
	import se.svt.caspar.ICommunicationManager;
	import se.svt.caspar.IRegisteredDataSharer;
	import se.svt.caspar.template.CasparTemplate;


	
	public class vs_lt extends CasparTemplate
	{
		
		
		private const customParameterDescription:XML =
		<parameters>
		<parameter id="logo1" type="string" info="URL slike 1" />
		<parameter id="logo2" type="string" info="URL slike 2" />
		<parameter id="html" type="string" info="html" />
		</parameters>;
					
		
		
		override public function SetData(xmlData:XML):void 
		{
			
			
			
			for each (var element:XML in xmlData.children())
			{
				
				if (element.@id == "logo1") 		
				{	
					tekst.tim1.source = element.data.@value.toString();
				}
				if (element.@id == "logo2") 		
				{	
					tekst.tim2.source = element.data.@value.toString();
				}
				if (element.@id == "html") 		
				{	
					tekst.vs.htmlText = element.data.@value.toString();
				}
				
			}

			
			super.SetData(xmlData):void;
			
			
		}
	}
}

html var that i send from my C# app is:

<font face="Font 1">Name </font> <font face="Font 2" > Surname</font>

Font 1 and Font 2 are embeded names in Animate 19

rrebuffo · September 21, 2020, 7:16pm

The Font 1 and Font 2 values are wrong, it looks for the actual font names as they appear in the details I showed above (the blue selection on the left image) and not the custom embed names.
As for the #1010 error, it seems that the field (or some variable) is not yet instantiated when it executes.

Zoxg · September 21, 2020, 7:31pm

i got template working now, but now i get entire html string in dynamic text, and html tags are enabled in Animate textbox settings.

rrebuffo · September 21, 2020, 7:32pm

Can you share the template so I can take a look?

Zoxg · September 21, 2020, 7:40pm

Sure here is link

https://drive.google.com/drive/folders/1bPoFbCjy-xWqD7VIlXZn4p8_s_me6Z0w?usp=sharing

rrebuffo · September 21, 2020, 8:28pm

Oh I just noticed you set the text value before the super. The super will override any value you set before. Move it to the top of the function or remove it completely if you already deal with all the fields manually.

Zoxg · September 21, 2020, 8:51pm

so basicaly i can just send string

<font face="Formula Condensed Bold">Name</font> <font face="Formula Condensed Light" > Surname</font>

from client app without declaring anything in AS?

rrebuffo · September 21, 2020, 8:54pm

That’s right, you only need to override the SetData function and set the text through the htmlText = "</>" setter instead of text = "".

You can also receive the two variables, store them and join them with the style hardcoded in the template:

override public function SetData(xmlData:XML):void 
{	
	super.SetData(xmlData):void;
	
	var _name = "";
	var _surname = "";
	
	for each (var element:XML in xmlData.children())
	{
		
		if (element.@id == "logo1")
		{	
			tekst.tim1.source = element.data.@value.toString();
		}
		if (element.@id == "logo2")
		{	
			tekst.tim2.source = element.data.@value.toString();
		}
		if (element.@id == "name")
		{	
			_name = element.data.@value.toString();
		}
		if (element.@id == "surname")
		{	
			_surname = element.data.@value.toString();
		}
	}

	tekst.vs.htmlText = '<font face="Formula Condensed Bold">'+_name+'</font> <font face="Formula Condensed Light">'+_surname+'</font>';
}

Zoxg · September 21, 2020, 9:08pm

I found a problem html code is not correctly sent from C# to flash, thats why it did not worked before.
< > are sent like &lt and &gt. That made me confusion. but that solution you made can work it arround. Thanx very much

rrebuffo · September 21, 2020, 9:44pm

You can decode it into actual HTML with the decodeURI method.

Zoxg · September 21, 2020, 10:12pm

i have tried

if (element.@id == "html") 		
				{	
					var htt:String = element.data.@value.toString();
					var decoded:String = decodeURI(htt);
					tekst.vs2.htmlText = decoded;
				}

but no success

Zoxg · September 21, 2020, 10:44pm

just to clarify, i get now decoded html code, but it is not parsed by textbox, it is displayed as raw html. If i put that same string as hardcoded, then it is parsed correctly and displayed