WebcamStudio For GNU/Linux 0.53+ support a new kind of Video Source called Widgets.

Basically, a Widget is a simple XML file that will define a composite of images and texts to display as a source in your broadcast.  You can create your own Widget or use those already built by downloading the XML files from that page.

How to build a Widget

To create a Widget, you need to create a text file encoded in UTF-8.  Generally, it's the default for any text editor like Gedit.  Here is an example of a Widget file:


First thing to define is the tag "ws4gl".  This tag will define the final output size as being 400x300 pixels in this example.  The data source for the XML content is also define by the attribute "xmldataurl".  The attribute "updatefrenquency" is telling WS4GL to reload that source each X minutes.

Beside "name", "description" and "author" tags, you have to possibilities to include images and text by using several "image"/"text" tags.  Note that the order of rendering will follow the order of in which you put your tags in the XML file.  So in this case, the image will be drawn first, and the text over the image.

<image>

• x:  Location of the image on the X axis
• y:  Location of the image on the Y axis
• width:  The width of the image inside the Widget
• height:  The height of the image inside the widget
• url:  The url where to fetch the image

<text>

• x:  Location of the text on the X axis
• y:  Location of the text on the Y axis (Remember that for text, the reference is the bottom of the string...)
• fontsize:  The size of the font to use
• color:  The color of the font in color notation (ie: #RRGGBB)
• fontname:  The font name to use like Monospaced, Arial and so on...
• bold:  Display text in bold (true/false)
• italic:  Display text in italic (true/false)

In text content, as in image url, you can put tags to replace that value with a value from the data xml file that you have loaded.  The tags but be between brackets [ ] and lead to path to the value in the XML data source.  Here is an example of data:


So to show the temperature from that data source, you have to use the tag [local.temp].  As you can see, multiple nodes can be supported by simply using the dot (.) between the node's name.  The get the value from an attribute, simply add another dot (.) and the attribute name ([local.temp.units]).

So for Current Temp: [local.temp], you would get Current Temp: -14
The same for image url:  http://someurl.com/[local.feelike].png would be translated to http://someurl.com/Cold.png

In some cases, you will have multiple elements with the same name.  Simply add a number in your path to set the element that you want to use:

Current Temp: [local.item.1.temp]

The instance 0 is the default, the first one in the list, so you don't have to put [local.item.0.temp]...

Now time to have some fun!

Here is a working example to retrieve latest news from OSNews.com