Added version information, added lowerthird example

Author: martastain

build.py

@@ -25,7 +25,7 @@ def build(
         dist_dir:pathlib.Path=typer.Option("./dist", help="Path to the directory where resulting zip files will be stored", **dir_checks)
         ):
     """
-    HTML Template Builder
+    HTML Template Builder 0.3
 
     For detailed instructions, see the README.md file or visit
     https://github.com/aveco-automation/html-template-builder

build/.gitkeep

@@ -0,0 +1,10 @@
+{
+    "js" : ["gsap.min.js"],
+    "parameters" : [
+        { "id" : "MainText", "type" : "string", "info" : "Main text line" },
+        { "id" : "HeaderText", "type" : "string", "info" : "Header text" },
+        { "id" : "LowerText", "type" : "string", "info" : "Bottom text line bellow the main text" },
+        { "id" : "Info", "type" : "string", "info" : "Info text" },
+        { "id" : "Label", "type" : "string", "info" : "Bottom small text" }
+    ]
+}

dist/.gitkeep

@@ -0,0 +1,17 @@
+<div id="container" class="hidden">
+    <div id="lower-third">
+        <div id="line1">
+            <div id="header-text"><span>Header text</span></div>
+        </div>
+
+        <div id="line2">
+            <div id="info"><span>INFO</span></div>
+            <div id="main-text"><span>This is the main text</span></div>
+        </div>
+
+        <div id="line3">
+            <div id="label"><span>LIVE</span></div>
+            <div id="lower-text"><span>This is the lower text</span></div>
+        </div>
+    </div>
+</div>

src/.gitkeep

@@ -0,0 +1,54 @@
+// Map parameters (data fields defined in the manifest) to the DOM elements
+var data_fields = {
+    "MainText"   : "main-text",
+    "HeaderText" : "header-text",
+    "LowerText"  : "lower-text",
+    "Info"       : "info",
+    "Label"      : "label"
+}
+
+// Create a timeline and start in a paused state
+var timeline = gsap.timeline();
+timeline.pause();
+
+// first we add a red rectangle spin-in effect
+timeline.from("#info",               {duration: .6, opacity:0, rotationY: "-90"});
+
+// main-text animation needs to start slightly before the first animation ends
+timeline.from("#main-text",          {duration: .3, opacity:0, x: "-100%"}, "-=0.1");
+
+// as soon the main-text animation finishes, slide down the bottom line
+timeline.from("#label, #lower-text", {duration: .3, opacity:0, y: "-100%"});
+
+// start header-text animation at the same time as the previous one
+timeline.from("#header-text",        {duration: .3, opacity:0, y: "100%"}, "-=0.3");
+
+//
+// CasparCG handlers
+//
+
+function play(){
+    // show the #container, which is hidden by default and start the animation
+    document.getElementById("container").setAttribute("class", "visible");
+    timeline.play();
+}
+
+function stop(){
+    // to hide the layout, just play the timeline in reverse
+    timeline.reverse();
+}
+
+function update(data){
+    var params = parse_params(data);
+    for (var idx in data_fields){
+        var field_name = data_fields[idx];
+        if (idx in params){
+            document.getElementById(field_name).querySelector("span").innerText = params[idx];
+        }
+    }
+}
+
+// Autoplay: comment this out in production
+//document.addEventListener("DOMContentLoaded", function(){
+//    play();
+//}); // DOMContentLoaded

src/example-lowerthird/manifest.json

@@ -0,0 +1,106 @@
+
+// We have different variables for background and foreground colors
+// Notice that black and white backgounds are slightly transparent
+
+$bkg-red: #c01010
+$bkg-black: #2c2323cc
+$bkg-white: #f0f0f0cc
+
+$fg-red: #c01010
+$fg-black: #2c2323
+$fg-white: #f0f0f0
+
+$font-family: Roboto, Helvetica, Arial
+$font-size-large: 36px
+$font-size-small: 22px
+
+$vertical-safe-area : 5%
+$horizontal-safe-area : 5%
+
+// Base container respects EBU R-095/2017 safe areas recommendation
+// Hidden by default, the container contains all elements which are
+// therefore displayed only when PLAY action is is invoked
+
+#container
+    position: absolute
+    top: $vertical-safe-area
+    bottom: $vertical-safe-area
+    left:  $horizontal-safe-area
+    right: $horizontal-safe-area
+    font-family: $font-family
+
+    &.visible
+        visibility: visible
+
+    &.hidden
+        visibility: hidden
+
+
+// LAYOUT
+
+// Lower third is aligned to the bottom-left corner of the safe-area
+#lower-third
+    position: absolute
+    bottom: 0
+    left: 0
+    display: flex
+    flex-direction: column
+
+    // we have three lines in the layout: #line1, #line2, #line3
+    div
+        display: flex
+        flex-direction: row
+        overflow: hidden
+        span
+            padding: 6px 14px
+
+    // move the first line contents (#header-text)
+    // to the far right of the graphic
+    #line1
+        justify-content: flex-end
+
+    // left segments have the fixed width of 150 pixels
+    // and their text is centered
+    #info, #label
+        width: 150px
+        span
+            margin: 0 auto
+
+    // expand main-text and lower-text to the width of the longest element
+    #main-text, #lower-text
+        flex-grow: 1
+
+
+// Apperance
+// This section defines colors and font sizes of CG elements
+
+#main-text
+    text-transform: uppercase
+    font-size: $font-size-large
+    background-color: $bkg-white
+    color: $fg-black
+
+#lower-text
+    font-size: $font-size-small
+    background-color: $bkg-black
+    color: $fg-white
+
+#label
+    font-size: $font-size-small
+    font-weight: bold
+    background-color: $bkg-white
+    color: $fg-black
+
+#info
+    font-size: $font-size-large
+    font-weight: bold
+    background-color: $bkg-red
+    color: $fg-white
+    // Main text slides behind this element,
+    // so info needs to be in the front
+    z-index: 100
+
+#header-text
+    font-size: $font-size-small
+    background-color: $bkg-red
+    color: $fg-white