Jugendhackt: Make SVG templates for intro and outro

jugendhackt/Readme.md

@@ -0,0 +1,45 @@
+# Jugend Hackt Design
+
+Different Jugend hackt events use a similar design for intro and outro, but different accent colors.
+This can be achieved by replacing the color and location in a template SVG.
+
+## Usage
+
+With this configuration, intros and an outro can be generated for any Jugend hackt event using the `make-ffmpeg.py` workflow.
+The ffmpeg video filter-based workflow uses one background video and applies the title and speaker names on top.
+
+To setup a new event, take the color codes from below and follow these steps:
+
+1. Generate "outro.ts"
+  - Copy `outro-template.svg` to `outro.svg`
+  - Replace `$LOCATION` in the SVG with the location name (in capital letters)
+  - Replace `$alpaca_color` in the SVG with corresponding color code
+  - Convert the SVG into png, e.g. with `inkscape --export-filename=outro.png outro.svg`
+  - Generate a video from the background: `ffmpeg -loop 1 -i outro.png -f lavfi -i anullsrc -c:v mpeg2video -t 10 -aspect 16:9 -c:a mp2 -b:v 2500k -map 0:v -map 1:a outro.ts`
+2. Generate "intro-background.ts"
+  - Copy `intro-background-template.svg` to `intro-background.svg`
+  - Replace `$LOCATION` in the SVG with the location name (in capital letters)
+  - Replace `$alpaca_color` in the SVG with corresponding color code
+  - Convert the SVG into png, e.g. with `inkscape --export-filename=intro-background.png intro-background.svg`
+  - Generate a video from the background: `ffmpeg -loop 1 -i intro-background.png -f lavfi -i anullsrc -c:v mpeg2video -t 10 -aspect 16:9 -c:a mp2 -b:v 2500k -map 0:v -map 1:a intro-background.ts`
+3. Edit the schedule URL in the `config.ini`
+4. Run `./make-ffmpeg.py jugendhackt/` and copy the generated files to the encoder
+
+Note: Do **not** commit the customized SVGs to the repo, but keep this folder generic.
+If you really want to commit the config, copy this to a different folder.
+
+## Colors
+
+| Location/ Usage              | Color Code | Color Name  |
+| ---------------------------- | ---------- | ----------- |
+| Jugend hackt Logo            | #00a6de    | Soft Blue   |
+| Hamburg, MV                  | #00b48d    | Soft Green  |
+| Dresden                      | #f3971b    | Soft Orange |
+| Frankfurt                    | #51509d    | Soft Purple |
+| Halle                        | #e6414a    | Soft Red    |
+| Berlin                       | #00498c    | Deep Blue   |
+| AT/Linz                      | #4cad37    | Deep Green  |
+| Rhein-Neckar, München, Ulm   | #ea680c    | Deep Orange |
+| Köln                         | #4c2582    | Deep Purple |
+| CH/Zürich                    | #e52420    | Deep Red    |
+| kein Event                   | #e95197    | Pink        |

jugendhackt/config.ini

@@ -1,7 +1,6 @@
 [default]
-schedule = https://jh.franzi.business/schedule/jh23dd.xml
-# ffmpeg -loop 1 -i alpaka_orange.png -f lavfi -i anullsrc -c:v mpeg2video -t 10 -aspect 16:9 -c:a mp2 -b:v 2500k -map 0:v -map 1:a alpaka_orange.ts
-template = alpaka_orange.ts
+schedule = https://pretalx.c3voc.de/jhhh23/schedule/export/schedule.xml
+template = intro-background.ts
 alpha = false
 prores = false
 fontfile = true
@@ -12,29 +11,29 @@ in = 1
 out = 9.5
 fontfamily =
 fontfile = SourceSansPro-Semibold.ttf
-fontsize = 100
-fontcolor = #00a5dd
-x = 100
-y = 785
+fontsize = 67
+fontcolor = #ffffff
+x = 400
+y = 870
 
 [speaker]
 in = 2
 out = 9
 fontfamily =
 fontfile = SourceSansPro-Semibold.ttf
-fontsize = 55
-fontcolor = #00a5dd
-x = 100
-y = 900
+fontsize = 50
+fontcolor = #ffffff
+x = 400
+y = 950
+
 
 [text]
-in = 3
-out = 8
+in = 0
+out = 0
 fontfamily =
 fontfile = SourceSansPro-Semibold.ttf
-fontsize = 45
-fontcolor = #00a5dd
-x = 100
-y = 720
-text = 'Jugend hackt Dresden 2023'
-
+fontsize = 0
+fontcolor = #ffffff
+x = 0
+y = 0
+text = ''