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!
Most recent headlines
05/01/2027
Worlds first 802.15.4ab-UWB chip verified by Calterah and Rohde & Schwarz to be ...
07/10/2026
Dalet, a leading technology and service provider for media-rich organizations, today announced the latest Long-Term Supported (LTS) release of Dalet Flex. Build...
06/09/2026
June 9 2026, 23:00 (PDT) Dolby and MagentaTV Bring Fans Closer to the FIFA Worl...
04/08/2026
Dalet, a leading technology and service provider for media-rich organizations, t...
23/07/2026
Share
Copy link
Facebook
X
Linkedin
Bluesky
Email...
23/07/2026
Share
Copy link
Facebook
X
Linkedin
Bluesky
Email...
23/07/2026
David Dvir, 2D founder (left), Sundeep Reddy (center), and Jean-Marc Bouchut (right), both of Zeiss...
23/07/2026
Screen Australia announces new national documentary accelerator program 23 July 2026
Screen Australia has today announced the Above the Line Documentary Accel...
22/07/2026
Among other tweaks to coverage, the broadcaster added announce positions in the ...
22/07/2026
The Australian Sports Technologies Network (ASTN) has reported a sharp acceleration in Australia's sportstech sector, with revenue growth rising from 10% in...
22/07/2026
From a retrofitted broadcast bus to packed Match Day Live! events, Bennett detai...
22/07/2026
TMRW Sports has named Brendan Donohue as President, Flag Football, where he will lead the company's professional flag football business in partnership with ...
22/07/2026
Stephen Arnold Music (SAM) designed and produced soundtracks for nine projection...
22/07/2026
Harmonic has announced a $25,000 donation to Global Empowerment Mission (GEM) fo...
22/07/2026
Telemundo has announced it has acquired from UC3 exclusive U.S. Spanish-language...
22/07/2026
The Rest Is Football, hosted by Gary Lineker, Alan Shearer, and Micah Richards, ...
22/07/2026
Sports Studio has announced a partnership with TheSoul Group to distribute Free ...
22/07/2026
Daktronics has concluded its 2026 High School Video Summit, a two-day hybrid event combining virtual sessions with hands-on host school visits across the countr...
22/07/2026
FOR-A America will exhibit at the MMCA Show in Pensacola, Florida (July 21-24), marking the company's first appearance at the house of worship AV event. FOR...
22/07/2026
The New York Yankees have selected Lumen Technologies (NYSE: LUMN) to connect Ya...
22/07/2026
Calrec will exhibit at IBC 2026 (Stand 8.C47) with demonstrations of its IP-native audio ecosystem built around the Argo console range, and will announce two ne...
22/07/2026
Solid State Logic has announced the appointment of Algam EKO as its distributor for SSL large format consoles in Italy, covering the Live, Broadcast, and Studio...
22/07/2026
FloSports has announced the launch of the FloSports Channel, a free ad-supported streaming channel premiering on Prime Video in the U.S. on July 21. The channel...
22/07/2026
Banana Ball TV (BTV), the broadcast operation of the Savannah Bananas, has insta...
22/07/2026
SiriusXM and Audacy have announced an agreement bringing 42 Audacy sports, news, and talk stations from 29 U.S. markets to SiriusXM. Twenty-three Audacy sports ...
22/07/2026
The collaboration produced more than 500 short-form videos across four cities th...
22/07/2026
At 2,600 sq. ft., the new home of digital content houses a main studio, podcast space, and an auxiliary control room
NFL franchises are accelerating their prod...
22/07/2026
Library now available in Engine Player
Another of Eduardo Tarilonte's popular sample libraries has just been moved over to Engine Audio's Engine Pla...
22/07/2026
All-in-one mic & DSP interface overhauled
Cloudvocal have just refreshed the design of their all-in-one mic, audio interface and DSP processor, introducing ...
22/07/2026
The final boss of the lost dual-op-amp circuit
Electro-Harmonix have just introduced the Deluxe Big Muff Pi 2, which they say offers their latest take on t...
22/07/2026
eds3_5_jq(document).ready(function($) { $(#eds_sliderM519).chameleonSlider_2_1({ content_source:......
22/07/2026
Share
Copy link
Facebook
X
Linkedin
Bluesky
Email...
22/07/2026
Share
Copy link
Facebook
X
Linkedin
Bluesky
Email...
22/07/2026
Proven managed IP solution helps broadcasters confidently navigate the future of broadcast distribution
LTN announces it has completed successful satellite-to-...
22/07/2026
Today, Chaos announced V-Ray 7, update 4, eliminating the need for asset conversions and tool switching, which slow down media and entertainment pipelines. Arti...
22/07/2026
An AI playground for the Project Indigo camera app
Marc Levoy July 22, 2026
0 Comments
At left is the user interface of our Playground, running on an ...
22/07/2026
Custom Consoles announces the completion of a large technical furniture project for Radio T l vision Suisse (RTS) at the networks recently inaugurated productio...
22/07/2026
Share
Copy link
Facebook
X
Linkedin
Bluesky
Email...
22/07/2026
Share
Copy link
Facebook
X
Linkedin
Bluesky
Email...
22/07/2026
Share
Copy link
Facebook
X
Linkedin
Bluesky
Email...
22/07/2026
Culver City, CA, July 21, 2026 3D streaming infrastructure provider Miris today announced glTF intake, including the binary .glb form, to its spatial streamin...
22/07/2026
Documentary Lo Invisible Captured with Blackmagic PYXIS 6K
Brie Clayton July 21, 2026
0 Comments
Camera's versatile design allowed filmmakers to c...
22/07/2026
AAF Bridge converts AAF and XML Timelines to Ableton Live - and back
Jerome Gardier July 21, 2026
0 Comments
A two-way converter for macOS and Windows...
22/07/2026
From Class to Concert: Explore a Student-Led Production of David Bowies Work Thr...
22/07/2026
NVIDIA founder and CEO Jensen Huang today visited the Naval Postgraduate School in Monterey, California, to commission an NVIDIA DGX GB300 system - bringing one...
22/07/2026
A poisoned spy, a secret war, and a small English city contaminated by a deadly chemical weapon. Available on Sky Documentaries from 4 AugustWednesday 22 July 2...
22/07/2026
Audio at Parity: Comscore Launches Transcript-Level Targeting and Measurement wi...
22/07/2026
Arvato Systems and Lobster Enter into a Partnership and Combine the Integration Platform and Managed Services
Flexible integration solutions for cloud, hybrid...
25 May, 2022
