Sony Pixel Power calrec Sony

Video Platform Observability using Agama AWE SDK - Part 2: Layout & Style

25/05/2022

25 May, 2022

Blog

By Anders Svensson

In our previous article Par1 of this series, we presented the Agama AWE SDK, the requirements needed to create a simple application to provide real use for Agama customers and the configuration of the project.

In the second part of the series, we're diving into how to create the layout and styling, and also elaborate on the application logic.

We have created a boilerplate application and defined the configuration parameters that shall be possible for the users to adapt. It is now time to start creating the actual functionality of the application. An important part of that is the actual layout and structure of the presentation, which for these applications is controlled by standard HTML, CSS, and JavaScript. In the application index.html below, we have modified the boilerplate HTML structure and instead defined a set of div:s used as placeholders for the configured test name and a div for the status indicator.

The ADE will automatically update the UI while editing and saving HTML so the structural changes will be shown immediately. The result is not interesting right now as we have not yet populated the div:s with any content and styling, so the result is still just an empty screen.

The Application logic To start populating the application with the configured content, test logic and the test status results, we need to start adding JavaScript code.

The main application entry point that is called by the Agama application framework is the onUpdate function. This function has two parameters, state and reason. The state parameter is an object that contains the configuration of the application. So, all the parameters that we defined in the JSON returned in the onConfiguration function, will be available in this object. The reason parameter is an integer stating why the function is being called; it allows us to implement different handling and behavior depending on this. In our application we must handle the create and configuration change reason. In the code above one can see how easily and obviously we can access and use the different configuration parameters that we have defined.

The program logic needed to implement the functionality is quite simple. When the application is created, we set up a timer that ensures that our test function update() is called at the user configured interval. The update() function in turn calls the defined REST API and checks the result codes against the configured, and depending on the result adding either a fail or ok CSS class to the status div.

The current result is now as above. We can now see the defined test name, in this case VoD system (which is the name we configured) but we do not see any status symbol. That is correct and it is because we have not yet added the styling for the status div.

Styling Adding CSS styling for the application is the last step in getting the applications appearance and functionality in-place. We use the automatically created file css/style.css and add the following.

It is here where we define the fail to indicate with an orange background, and ok to indicate with a green background.

Yes, now it looks more promising!
LINK: https://agama.tv/video-platform-observability-using-agama-awe-sdk-seri...
See more stories from agama

Europe Stories

05/01/2027

Worlds first 802.15.4ab-UWB chip verified by Calterah and Rohde & Schwarz to be demoed at CES 2026

Worlds first 802.15.4ab-UWB chip verified by Calterah and Rohde & Schwarz to be ...

04/08/2026

Dalet Announces Commercial Availability of Dalia, Bringing Media-Aware Agentic AI to Enterprise Productions

Dalet, a leading technology and service provider for media-rich organizations, t...

04/07/2026

Detective Conan: Fallen Angel of the Highway Opens in Dolby Cinemas Across Japan, Presented in Dolby Atmos and Dolby ...

April 7 2026, 19:00 (PDT) Detective Conan: Fallen Angel of the Highway Opens in...

01/06/2026

Dolby Sets the New Standard for Premium Entertainment at CES 2026

January 6 2026, 05:30 (PST) Dolby Sets the New Standard for Premium Entertainment at CES 2026 Throughout the week, Dolby brings to life the latest innovatio...

02/05/2026

Dalet Flex LTS Delivers Smarter Search, Faster Editing, and an AI-Ready Foundation for Modern Media

Dalet, a leading technology and service provider for media-rich organizations, t...

01/05/2026

NBCUniversal's Peacock to Be First Streamer to Integrate Dolby's Full Suite of Premium Picture and Sound Innovations

January 5 2026, 18:30 (PST) NBCUniversal's Peacock to Be First Streamer to ...

14/04/2026

ToolsOnAir and Omnistream Bring Mobile SRT Contribution into Professional 24/7 Playout and Live News Workflows

ToolsOnAir and Omnistream Bring Mobile SRT Contribution into Professional 24/7 P...

14/04/2026

AIR Music Tech release Fabric Vintage Synths Vol.1

Captures a trio of renowned polysynths The latest software to join AIR Music Tech's extensive catalogue captures the sound of three sought-after polysyn...

14/04/2026

United Plugins introduce UnitedFreeBundle

Free offering includes 10 powerful plug-ins United Plugins have announced the launch of a new bundle that brings together 10 of their pro-audio plug-ins, an...

14/04/2026

Celemony update Tonalic

Julian Coryell joins virtual session player line-up Announced at NAMM 2026, Celemony's Tonalic kits DAW users out with real performances by world-class ...

14/04/2026

X-Rite Pantone Color Academy Grand Opening in Shanghai

X-Rite Pantone Color Academy Grand Opening in Shanghai On March 27, 2026, X-Rite Pantone, the global authority in color standards and color science, held the...

14/04/2026

VEON and JazzWorld Receive Competition Commission of Pakistan Approval for Acquisition of TPL Insurance

14 Apr 2026 VEON and JazzWorld Receive Competition Commission of Pakistan Appro...

14/04/2026

Nicola Coughlan and Aimee Lou Wood to host next two episodes of Saturday Night Live UK

Tuesday 14 April 2026 Nicola Coughlan and Aimee Lou Wood to host next two episo...

14/04/2026

p Drs leads Sky and AMC+ Original Gangs of London Series 4 as new players enter the fight for control of Londons underworld

Lead writer and executive producer Jack Lothian joins alongside lead director Je...

14/04/2026

Thomas Riedel Acquires Premium Manufacturer ARRI

Wuppertal April 14, 2026 Thomas Riedel Acquires Premium Manufacturer ARRIStrategic Alignment With the Riedel Group for Innovation and Growth Thomas Riedel, f...

14/04/2026

Harmonic Introduces Breakthrough AI Orchestration Service for Live Video Workflows

New Service Simplifies Integration of AI Applications with Exceptional Reliabili...

14/04/2026

SES, Japan Airlines to Expand Multi-Orbit Inflight Connectivity to Long-Haul Fleet

Luxembourg, April 14, 2026 - SES, a leading space solutions company, today annou...

13/04/2026

ToolsOnAir Composition Builder 2026 Boilerplate

ToolsOnAir Composition Builder 2026 Boilerplate More Details: The Composition Builder 2026 application for macOS enables TV stations and Live Event broadcast...

13/04/2026

ToolsOnAr just:live pro 2026 Boilerplate

ToolsOnAr just:live pro 2026 Boilerplate More Details: just:live pro 2026 is a Multi-Channel Live Production Playout solution for video and static or real-ti...

13/04/2026

ToolsOnAr just:play pro 2026 Boilerplate

ToolsOnAr just:play pro 2026 Boilerplate More Details: just:play pro 2026 is a Multi-Channel automated 24/7 Master Control playout solution with SD, HD and U...

13/04/2026

ToolsOnAr live:cut 2026 Boilerplate

ToolsOnAr live:cut 2026 Boilerplate More Details: live:cut is an option to just:in mac pro 2025 and enables multicamera production workflows for up to 16 cam...

13/04/2026

ToolsOnAir Just In Mac Lite NDI 2026 Boilerplate

ToolsOnAir Just In Mac Lite NDI 2026 Boilerplate More Details: The Just In Mac Lite NDI application is a streamlined media capture solution designed specific...

13/04/2026

ToolsOnAir Just In Mac Lite 2026 Boilerplate

ToolsOnAir Just In Mac Lite 2026 Boilerplate More Details: The Just In Mac Lite application is a streamlined media capture solution designed specifically for...

13/04/2026

ToolsOnAir just:in mac pro 2026 Boilerplate

ToolsOnAir just:in mac pro 2026 Boilerplate More Details: just:in mac pro is a macOS-based client-server multichannel capture solution to record SDI, HDMI, N...

13/04/2026

Musik Hack update SweetEQ

Intuitive EQ plug-in gets an upgrade Following its official launch back in February 2026, Musik Hack's intuitive EQ plug-in has been treated to its firs...

13/04/2026

Vintage Vault 5 from UVI

Flagship soft synth collection expanded The latest version of UVI's flagship vintage-inspired soft synth collection has just arrived, expanding the suit...

13/04/2026

Sonuscore launch Lux Orchestral Strings Elements

Free version of innovative string library arrives Released in October 2025, Lux Orchestral Strings was said to be Sonuscore's most ambitious library to ...

13/04/2026

Girls' Research Camp at SGL Carbon in Meitingen inspires young women to pursue STEM careers

The Girls' Research Camp is part of the Technology - Future in Bavaria edu...

13/04/2026

Rohde & Schwarz transforms submarine communications for realtime underwater dominance at UDT 2026

Rohde & Schwarz transforms submarine communications for real time underwater dom...

13/04/2026

Rohde & Schwarz enables Pulsar signal simulation to support next-generation navigation devices

Rohde & Schwarz enables Pulsar signal simulation to support next-generation navi...

13/04/2026

Global environmental action NGO WRAP brings recycling to life with Rescue Me TV campaign, backed by Sky Media

Monday 13 April 2026 Global environmental action NGO WRAP brings recycling to l...

13/04/2026

Jnger Audio Joins EBU ADM Integration Group as Founding Member to Help Advance ADM/S-ADM Integration

J nger Audio has joined the EBU ADM Implementers Group (ADM-IG) as a founding me...

13/04/2026

FOX Latin America Announces The Launch Of The FOX Channel In Central America And Strengthens Its Position In The Region

FOX Latin America Announces The Launch Of The FOX Channel In Central America And...

13/04/2026

Every mic on deck: recording "Sinners" for IMAX

No amps, no safety net The biggest challenge was the music itself. Everything in the film is acoustic and unamplified. The theme itself is kind of hard to expl...

13/04/2026

RT Radio 1 unveils new audio identity

RT Radio 1 has today launched a significant step in its ongoing strategic evolution. Following the launch of its brand-new schedule late last year, RT Radio 1...

13/04/2026

The Late Late Show offers a once-in-a-lifetime prize to the winner of next week's Opening Act compet

The Late Late Show Opening Act, the search for Ireland's newest country musi...

13/04/2026

RT appoints new Chief Financial Officer

RT has today announced the appointment of Annemarie Britz to the position of Chief Financial Officer, RT following a public competition. Annemarie Britz is c...

12/04/2026

Areal unveil the SR1

Headphone system designed for immersive monitoring With the demand for immersive audio showing no signs of slowing down, lots of companies are turning their...

11/04/2026

Infrasonic launch Infrasonic Berlin

Engineer collective welcome Freddy Knop Infrasonic, an award-winning collective of audio engineers operating out of Nashville and Los Angeles with credits r...

10/04/2026

Fans Crown Winners at the First Spotify Podcast Awards in France

After launching the Spotify Podcast Awards in Mexico last year, we brought the fan-voted celebration to Paris this week for its first edition in France. Hosted ...

10/04/2026

Yamaha launch the DXR/DXS & CXR/CXS Mk3

Powered and unpowered live PA ranges upgraded Yamaha have just refreshed four of their hugely popular PA speaker ranges, delivering significant improvements...

10/04/2026

UJAM open Gorilla Engine to third-party developers

Underlying plug-in & VI technology now available to others UJAM's latest announcement sees the company open up' Gorilla Engine, the development pla...

10/04/2026

SES Announces Implementation of a Liquidity Contract With BNP Paribas

Luxembourg, April 10, 2026 - SES, a leading space solutions company, announces that it has entrusted BNP Paribas with the implementation of a liquidity agreemen...

10/04/2026

UKTV Highlights: Saturday April 25th - Friday May 1st 2026

What can I watch on UKTV and stream on U this week? This week on UKTV and the free streaming service U, viewers can watch a range of new and returning programm...

10/04/2026

Multi-BAFTA-winning Chernobyl makes its free-to-air debut, marking 40 years since the disaster

Five-part Sky Original drama airs nightly on Sky Mix and Sky Atlantic from 20 Ap...

09/04/2026

Yospace surpasses 10 billion ads stitched in a single month, as ad-supported streaming surges

Staines-upon-Thames, UK, 09, April, 2026 - Yospace, the trusted leader in Dynam...

09/04/2026

just:play pro 2026 and just:live pro 2026 Sneak Preview News for NAB 2026

just:play pro 2026 and just:live pro 2026 Sneak Preview News for NAB 2026 More Details:At NAB 2026, ToolsOnAir will showcase just:play pro 2026 and just:live p...

09/04/2026

just:in mac pro 2026 - The Next Level of Professional Recording on macOS at NAB 2026

just:in mac pro 2026 - The Next Level of Professional Recording on macOS at NAB ...

09/04/2026

Spotify Introduces New Video Controls for Listeners

Spotify has always been about putting listeners in the driver's seat. Today, people don't just want more ways to spend their time; they want that time t...