Introduction
When I joined Screenly, my first big task was re-skinning the existing Edge Apps to a new model. It sounded straightforward initially, but as I delved into the process, I encountered interesting challenges and learning moments. Here’s my journey through the transformation of these apps.
The Need for a Fresh Look
Screenly’s apps were functional, but they lacked a customised feel. We wanted to give users more control over the appearance by allowing them to change the primary and secondary colours while incorporating their domain logos. This meant ensuring a seamless and dynamic UI update based on user preferences.
The challenge was clear: How do we make each app feel like an extension of the user’s brand while maintaining a cohesive design language across all apps?
Implementing Global Branding Settings
I utilised Global Branding Settings, a feature that simplifies the application of brand identity across digital signage. This system automatically extracts branding elements—such as colours and logos—using public data associated with an organisation’s email domain. It seamlessly integrates into all Edge Apps, requiring no extra effort from users or developers. With its support for accent colours, light and dark mode variants, and adaptive logos, this feature ensures that every app consistently represents an organisation’s visual identity, delivering a unified and professional look.
You can find the Global brand setting details here.
The Unexpected Logo Challenge
One of the hurdles I faced was handling customer logos. Users could upload their logos in various formats—PNG, JPEG, SVG, and more—but the system did not provide a MIME type for these images.
To tackle this, I implemented a clever workaround by fetching the file’s initial bytes and using magic numbers to determine the format:
jpegMagicNumbers = "FFD8FF";
pngMagicNumber = "89504E47";
A small but crucial fix ensured proper logo rendering across all apps.
Introducing Sentry for Better Debugging
No project is complete without a solid error-handling strategy. We integrated Sentry to log errors, making tracking and debugging issues easier. This addition will help us identify and resolve problems before they impact users.
Transforming the Apps
With these foundational improvements in place, we set out to re-skin multiple apps:
Some are already live, while others are undergoing final testing before production release. Seeing them evolve into a polished, modern experience was deeply satisfying.
The Open-Source Spirit
One of the best parts of this journey is that all our Edge Apps are open-source and available on GitHub. With documentation in place, the community can contribute improvements and suggestions. This project wasn’t just about redesigning apps but making them more accessible and collaborative. You can find the source here.
Reflections and What’s Next
Re-skinning these apps was an exciting challenge, blending creativity with problem-solving. It reinforced my ability to think critically about UI customisation, handle real-world technical limitations, and implement effective debugging solutions.
I’m eager to see how users will interact with these apps and what improvements we can make in the future. I’m confident that each challenge will provide us with new learning and innovation opportunities!
Final Thoughts
I’m excited about the future of Screenly Edge Apps. The journey has been a mix of challenges and successes, and I’m proud of the work we’ve accomplished. Want to learn more? Check out our Edge Apps overview or launch your first Edge App today with our Edge Apps Store.
