Skip to content

Technical Overview

VisionScreens is a .NET desktop application written in C# and built using the Avalonia UI framework.

The core functionality of the app is the display of graphics and video playback.

The app provides workflows and integrations for the input, output and control of presentation items and events. For example: song slides auto-generated from the arrangement of song stanzas.

App screenshot

Goals

  1. Easy

    • Emphasis on modern UI/UX design and practice to make a great experience.
    • Consider the audience: tech desk voluneteers, ministry workers, volunteers - anyone and everyone should be able to pick up and use this software without much training.
    • Make life easier by templating as much as possible - song slides, designs, presentation playlists.

  2. Flexible

    • Integrations with other technologies and systems (control from a Stream Deck, web control, web stage display, livestream lyrics, etc)
    • Make edits on the fly: Workflows that allow manipulation of items whilst also in live presentation mode (you can't afford to pause the slides even if that youth pastor has just rocked up and given you their slides, or that last minute video!)

  3. Reliable

    • Things need to work.
    • Actions need to be recoverable in the event of an app error.
    • Logging and tracing for diagnostics.

Graphics engine

I have not written my own graphics engine. Graphics rendering is mostly handled by the Avalonia framework (internally this is OpenGl, backed by Skia).

Slides are AXAML Avalonia controls, using data bindings to template text and background images.

These slides are pre-rendered as Bitmaps (where possible) for performance - e.g. to display many slide thumbnails on screen: it is cheaper to render lots of images rather than a lot of complex Avalonia controls.

Video playback

Currently deciding between VLC or LibMPV

These integrations work by hosting the HWND within the Avalonia window - i.e. external components drawing themselves in the airspace of the Avalonia window.

Futher work needs to be done to have 'video motion backgrounds' - as video playback together with lyrics is more complex to implement (would video looping work smoothly? can lyrics be drawn over the video at acceptable visual quality? how would lyric text transitions between slides work?)

(Future - Chromium CEF / Edge WebView2 for embedding YouTube videos could be possible)

Presentation media

  • PowerPoint via NetOffice

  • Google Slides via official REST API's

  • Canva does NOT provide an API, which is why I've added PDF importing

Syncing

The idea is that the user can import a 'pptx' into the playlist. The user can then make edits to the 'pptx', and then sync these changes into the playlist. This means that the selected slide is kept.

NDI SDK

Originally I had a hacky solution to output the graphics and video to NDI. Due to implementation issues, I've paused NDI integration efforts for now. The current solution of capturing video playback requires software rendering which is much too slow.

Coding Style

As a side project... it could be better🙈. As the project matures I expect to refactor as I go.

Project History

Back in 2015 I thought to myself, 'how hard could it be to write an app to show a bunch of text on a screen?'

It started with countless pen on paper sketches.

I prototyped in Qt5/C++, and later WPF/C#, and eventually settled for AvaloniaUI/C# thinking that cross-platform support (i.e. macOS) would be good (MAUI was not a thing back then).

Working on the current codebase started end of 2021.

Avalonia's MVVM framework ReactiveUI has been difficult to pick up - I may consider changing this out for some other MVVM framework.