Kodi Kontroller is fast approaching MVP and its first public beta under its new code base in PHP Slim. We spent most of saturday kicking it into shape on its new home (a raspberry pi in our comms room) and quickly proceeded to corrupt the SD card. It’s all on GIT but i’ve now got to re-build its home first, fun.
It looks much the same, but a lot less buttons for the moment. We’re going real MVP with this – announcements and news cycle.
The News Cycle will be a group of content that gets played on the hour – every hour on all screens. Announcements are targeted to one screen or a group. Once this is safely working and handed over to the admin team that will be in charge of content we’ll work on building out some more wider facing content and overrides. All the other integration will follow soon after.
I’ve also been working away on the hardware project to re-use our old laptop LCD panels in our meeting rooms. MVP 1:
The plan for announcements was to use PHP to put text on pre-defined images, all through a browser with a preview screen so non-techies could use it, in implementing the news cycle we quickly found that pictures and their playlists are treated in very specific ways by kodi, which is fine for its normal use but screws us pretty comprehensively. We ran into 2 or 3 issues that weren’t even worth raising with Team-Kodi as the niche use case is very unlikely to be catered for. After some thinking and trial & error – i’ve landed on FFMPEG.
The main frustration with Kodi was that we couldn’t include picture durations per file. So all slides would show for the same length of time. Not a great user experience. To get around this we’re ditching slides for the news cycle completely. Kodi can slideshow images fine and we’ll use that functionality for cycling through actual photos but we need a bit more control for some content.
I spent a few hours knocking this together:
# Add a line of text centred to the video ffmpeg -i input.mp4 -vf drawtext="fontfile=c:\dashboard\foe_display-webfont.ttf text='Stuff Occurred!': fontcolor=white: fontsize=24: box=1: firstname.lastname@example.org boxborderw=5: x=(w-text_w)/2: y=(h-text_h)/2" -codec:a copy output.mp4 # Add multiple lines of text from a text file to a video, text will be aligned left. ffmpeg -i input4.mp4 -vf "[in]drawtext=fontfile=foe_display-webfont.ttf:fontsize=120:fontcolor=white:box=1: email@example.com: boxborderw=5: x=(w-text_w)/2:y=(h-text_h)/2:textfile='text.txt'[out]" -c:v libx264 -t 10 output4.mp4 # Adds FontAwesome Icon to top of screen, removed shadow behind, re-insert below code to change this back # box=1: firstname.lastname@example.org: boxborderw=5: ffmpeg -i input5.mp4 -vf drawtext="fontfile=fontawesome-webfont.ttf: text='': fontcolor=white: fontsize=200: x=(w-text_w)/2: y=10:" -codec:a copy output9.mp4 # Add a centred line of text, could be replaced by above text file code. ffmpeg -i output9.mp4 -vf drawtext="fontfile=foe_display-webfont.ttf: text='Drupal build starting!': fontcolor=white: fontsize=120: box=1: email@example.com: boxborderw=5: x=(w-text_w)/2: y=(h-text_h)/2" -codec:a copy output91.mp4 # Adds a second line of text at the bottom of the screen in smaller type. ffmpeg -i output91.mp4 -vf drawtext="fontfile=foe_display-webfont.ttf: text='Please save your work & sign-out': fontcolor=white: fontsize=75: box=1: firstname.lastname@example.org: boxborderw=5: x=(w-text_w)/2: y=550" -codec:a copy output92.mp4
If you run the final three commands in a row, you get this:
It’s a proof of concept for now, and it took a while to get my head around using FontAwesome – the cheat i found was to copy the wanted character out of windows character map, pasting the unicode directly into command line. When we implement this properly in PHP we’ll have more options available to us.
Ultimately this adds processing but gives a much nicer end-user experience, it’ll take some wrangling to make it fool-proof but it allows us to keep the goal of instructing kodi with playlists rather than relying on cycling through whole folders of content.