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

1. Start the simple http-server by going into ./sample-template (Terminal) and use python -m SimpleHTTPServer 9001
2. 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