Skip to main content

Cathx Ocean Image Processing Portal (Angular)

  • Home - Mission Config, Camera Monitor and Workflow

Sub Sea Imaging

Client: Cathx Ocean

The role involved Research, Design and Development of a browser based image processing portal which interacts with a Microsoft dot net engine by means of a MQTT Internet of Things message broker.

One web based system, ‘Clarity’, to replace three existing desktop applications used by Cathx Ocean for Sub Sea Imaging:

1) Scene Config, which sets up the scene and camera, light and laser controls and sequencer.
2) Camera Monitor, which monitors the cameras live. And
3) SOLID, which is used for image and or laser processing.

Research

  • Technology: Nodes.io, Flutter or Angular?
  • Review: (SOLID) the existing desktop image and laser processing application.
  • Email: out a survey to customers and in-house Users, share with the team and take on board the feedback.
  • Review: ‘Camera Monitor’ and ‘Scene Config’ GUI that operate camera, light and laser controls and sequencer.
  • Inspect: the existing camera profiles Json file and do some quick analytics to get a better view of the data.
  • Research: the Engine (dot NET running Python scripts – GeoAPI, Extended Xml Serializer, Json.NET, OpenCV, MathNet Spatial, Nav, MQTTnet, Zio, logging and Meta Shape for navigation and License Spring to manage the distribution of licences.)
  • Research: sending lightweight MQTT IOT messages via web sockets.
  • Define: front-end stack (Angular, not Flutter, Material design, Node JS and, Express JS)

Design

  • Host weekly workshops
  • Showing design ideas, mock ups and prototypes.
  • Generate Strategic Ideas including: current depth UI, demo hub on sub domain, working selection to allow User to select a short sample to focus on and transform before applying to all images.
  • Demo UI components.
  • Design screens for Camera Monitoring,  Scene Configuration and Workflow design.

Development

  • Build a ‘Get Status’ proof of concept App that interacts with the Engine via MQTT to get and display the status of the engine. Commands are sent in Json format to the engine via MQTT pub sub model using ‘topics’ and ‘response topics’ which both the engine and UI subscribe to.
  • Develop an Angular App which gets the available ‘workflows’ from the engine and displays a list to the User. (a workflow is a group of micro services which do various image and data transformations).
    • When the User clicks to select a ‘workflow’ the engine returns a list of variables related to that workflows micro services and builds them into a ‘stepper’ form User interface.
    • Every step in the stepper form is a micro service related to the workflow.
    • The prototype workflow was ‘offline undistort’, other workflows include: Camera Monitor (live undistort), Motion Correction, Sharpen, Object Detection, Make Mosaic Friendly, Mission Rules,  Select Mission Range, Select Mission Timeframe, Mission Logging and Mission Alerts.
    • The prototype workflow ‘offline undistort’ is a simple workflow which basically takes a cameras lens calibration file and executes a python script to correct for the visual distortion in an image taken with that lens.
    • The prototype workflow ‘offline undistort’ had only 4 exposed variables:
      1. The images source folder (the Cathx Ocean mission folder)
      2. The camera calibration file (this file is custom to each camera lens and supplied by Cathx Ocean)
      3. Select camera (which camera to process or select all cameras). And
      4. The images Output folder.
    • When the User has stepped through the stepper and the validation is all checked the User can then click ‘Run Workflow’.
    • The engine then goes to work creating the images; during this the UI is constantly querying the status of the engine to determine if the work is complete.
    • When the work is complete the User gets notified via Toast Message.
    • The engine then sends the ‘transformed’ images back to the User by base 64 encoding the images and sending via MQTT message.
    • The process of getting an image or laser file, transforming that data or just encoding it RAW and sending if via MQTT can be done to preview or view live data.

Central Bank of Ireland Returns Portal (Angular)

  • Central Bank of Ireland internal tax return portal home

Internal Portal

The ‘Returns Portal’ –  An internal portal to handle end of year tax returns.

Client: The Central Bank of Ireland.

Research

  • Review existing External Portal. (UI design, technologies used, functionality)
  • Review technical specs document (Approved technologies Angular & NGX Bootstrap)
  • Review existing balsamic wire frame screens
  • Review existing External Portal ()

Design

  • Facilitating design workshops, collaboration with project managers, developers and stakeholders across 3 release teams.
  • Design and produce their new Internal Portal – (Angular) Designing and producing a UI component library.
  • Update existing External Portal (Angular Prime NG and Bootstrap V3) to add Brand enhanced Fitness and Probity profile section, delegate onboarding and individual questionnaire.

Develop

  • Develop a ‘Design Guide’ as to how to use the UI Library for best User Experience and how to comply with accessibility guidelines (WCAG 2.1 AA)

Test

  • Accessibility testing ARIA features using assistive technologies (NVDA and JAWS)

RSA Book a Service Portal (Angular)

RSA Book a Service Portal

Client: RSA – the Raod Safety Authority

Working directly with the RSA and SGS managers to design and produce the RSA Booking Module App. Built with Angular and Material Design for the UX and UI. Not happy just producing “pretty pictures” when designing I also have a local project where I actually flesh out any of the interface elements.

The RSA had a requirement to use Google’s Material Design on the frontend. They also wanted a fixed left hand navigation which was capable of being at least 3 levels deep and of course multi-lingual.

It was my first time using Material Design and I found it handy to work with. I think Material Design ahem.. ‘ticks a lot of boxes’ in terms of Accessibility and User Experience ; )

Design included: InVision prototyping for desktop, tablet and mobile.


Mobile View, Tablet View and Desktop View


RSA Angular and Material Design App (prototype)’


 

 

SGS Auditing and Inspection App (Angular)

Inspection App (Angular)

Client: SGS

An ultra dynamic ‘auditing and logging’ App which could be setup by managers to be deployed and used by SGS agents in the field to ‘audit’ petrol / gas stations across the EMEA region.

Setup, configured and monitored by regional managers it also included a traffic light system of alerts to managers along side reporting tools and power bi dashboards.

Multi lingual, as this app was built well which meant it could be easily translated into and then used in any language. In this case the app was used to ‘log and verify’ water conditions and environmental standards in fish farms across Asia. So yea From ‘forecourts’ to ‘fish farms’ 🙂


Below shows a selection of screens from the App interface. Design included  brand design, logo development, info graphic design, interface design, responsive design and layout.


Antique Mirrors Ireland

Antique Mirrors Ireland

Moving into place and taking pictures of antique mirrors, some of which needed two or more people to move. Then standardizing the photos and setting them on a neutral background to best show off the amazing gold leaf detailing.

Then selecting some of the mirrors and setting them into interior design settings to appeal to certain clients…. ‘People with new houses’ …a hem… not all of us live in an Edwardian property.

Setting the scene and showing how these mirrors can really add a touch of class to your interior.

SGS BeeAlert App (jQuey)

  • Bee Alert (Desktop)

BeeAlert SPA

Client: SGS

Quiet a nice idea here which involved farmers and beekeepers working together to save the bees. When farmers are spraying the beekeepers get notified so they can ensure the bees are not exposed to the environment during these times this way saving the bees.

My role was to brand the UI with SGS colours and to develop a POC working prototype to demo to clients and to use as a sales tool.

Using jQuery, Kendo and bootstrap to produce this SPA(Single Page Web App).

The gallery below shows a selection of screens from this Single Page App, Brand design and logo development, infographic design, interface design, responsive design and layout.


Open BeeAlert in a new tab


WholeWorldBand Audio / Video App (React)

Alert Make Video Permissions Screen

Audio / Video App

Client: Whole World Band

Audio / video collaboration web app designed for desktop, android & apple devices. Built using with React (JSX) and bootstrap on the Front-end.

Ensuring a consistent user experience and improved branding and as a result improved user engagement.

Below are links to a low detail mock-up which can be previewed on mobile, tablet and desktop Views. ‘Clicking on any top navigation link from with the mock-Up to see the Reset Password Modal’.


Ian made some crucial changes which improved the user experience and interface design.

Re-factoring the code into a responsive design displaying well on mobile and tablet devices.

John HollandWholeWorldBand

IMC Cinema Website

IMC Cinema Website

Client: IMC Cinemas

Design of website front-end and back-end. Design to Incorporate a ‘Page take-over Ad’ as shown on this page with the Background of the page Branded in this case for the Launch of the Fantastic Mr Fox film.

Also shown is image ‘Design Footer ‘, part of a Low Detail Mock-Up Designed to ‘demonstrate the Design’ to the client.



© 2024 FeD. All rights reserved.