Custom TVML Elements & Styles

A Sample Project how to add custom TVML Elements and Styles to your TVML/TVJS Project using TVElementFactory, TVStyleFactory and the TVInterfaceCreating Protocol

The Story behind

A blog post about the motivation.

How to run

Start the simple http-server by going into ./sample-template (Terminal) and use python -m SimpleHTTPServer 9001
Open the Xcode-Project in the ./app folder and run the App

Sample App

The Sample App demonstrates how to use custom fonts + text-decoration and is easily extendable.

How to use

The best way to understand how to use custom elements and styles is to have a look at the sample-template: https://github.com/goergisn/custom-tvml-elements/blob/master/sample-template/application.js

Custom Elements

tvce-attributedText (Allows the usage of tvcs-text-decoration and tvcs-font to have custom fonts and decorations)

tvce-button (Allows (animated-)background images for different states + custom fonts/decorations)

tvce-image (Allows animated Images)

Custom Styles

tvcs-text-decoration (Allows to add a line below or through the text)

Allowed Values:
- line-through
- underline
Works with:
- tvce-button
- tvce-attributedText

tvcs-font (Allows usage of different fonts)

Allowed Values:
- All supported fonts on tvOS (http://ericasadun.com/2015/11/08/available-built-in-tvos-fonts/)
Works with:
- tvce-button
- tvce-attributedText

tvcs-background-image, tvcs-background-image-highlighted, tvcs-background-image-focused, tvcs-background-image-disabled, tvcs-background-image-selected (Allows setting background images to buttons)

Allowed Values:
- Valid image URLs (including gif support)
Works with:
- tvce-button

tvcs-content-mode

Allowed Values:
- fit (Scales the content/image to fit inside the size of the element)
- fill (Scales the content/image to fill the element. Some parts of the content may be clipped)
- defaults to stretching the image to fill
Works with:
- tvce-image
- tvce-button