Skip to main content

Cathx Ocean Image Processing Portal (Angular)

Clarity loading

  • Clarity Home
    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

  • Start by reviewing the Internal Portal specs document and initial balsamic mock ups.
  • Then reviewing the ‘existing’ (newly done) External Portal in terms of functionality and accessibility (WCAG 2.1 AA) as well as look and feel, layout, colours, tech stack (Angular, NGX-bootstrap, Microsoft CRM, SharePoint), common technology and common components (CBI-grid and CBI-data-grid).
  • Read the Central Bank of Ireland branding documentation.
  • Audit the External Portal in terms of accessibility.
  • Read NGX-bootstrap documentation.
  • Review current web traffic to current services (small numbers, hundreds).

Design

  • Design and produce Returns Portal – (Angular) Designing and producing a UI component library.
    • Hosting design workshops, collaboration with project managers, developers and stakeholders across 3 release teams.
    • Creating a design library for every component (see below) and an accompanying design guide which could be referenced by developers and as a means for new developers to quickly get up to date with components and how to use them.
    • Navigation
    • Global Header and Search
    • Layouts
    • Required UI components
    • Inputs (Input, button, checkbox, radio button, toggle switch, select drop-down and slider)
    • Pickers (date picker, calendar, time picker and file upload)
    • Content media (image, icon, video) headings and titles, badge and tags and embed (iframe/embed)
    • Common / shared components (CBI-grid and CBI-data-grid with sorting, filtering and paging)
    • Accordion
    • Progress indicators (bar/spinner/gauge)
    • Dialog and Modals
    • Tool-tips and Popovers
    • Toasts and Notifications
    • Typehead auto-complete
    • Drop-down Menu
    • Tabs
    • Tables and tabular data
    • Breadcrumb
    • Links and router links
    • Pagination
    • Nesting components
    • Experimental components (drop-down menu with auto complete filtering, double click select row, global search)
    • Non-functional requirements
    • App loading – caching
    • CBI-grid – loading
    • Logging
    • Accessibility
  • Update existing External Portal (Angular Prime NG and Bootstrap V3) to add Brand enhanced Fitness and Probity profile section, delegate on-boarding 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)

  • Your Safe Journey Starts Here (Desktop)

RSA Book a Service Portal

Client: RSA – the Raod Safety Authority

Research

  • Working directly with the Road Safety Authority and SGS project managers to gather requirements.
  • Front-end: Taking a ‘mobile first’ approach to design but responsive / adaptive to tablet and desktop.
  • Using Angular and Material Design.
  • Multi lingual with a multi-level navigation which is visible on desktop but collapsed on mobile.
  • Back-end: Microsoft Dynamics.

Design

  • Login and Registration Screens (Register Portal Access and Create Contact, Reset Password Retrieve Username)
  • Services and Eligibility Screens (Manage Journeys and Eligibility, Display All Services available or cancel a booking and Show Eligibility)
  • Scheduling Screens (Scheduling setup and manage scheduling. Book a test. Reschedule) Design the ‘booking process’ taking a User through a typical Journey to book a service.
  • Payments Screens (Manage products and Pricing, Pay for a Test, Refund Process)
  • Confirmation Screens (Manage Communications Templates, Manage Portal Language Strings, View Communications, Emails, SMSs and letters. View Profile, messages, bookings and attachments)
  • Workflow Screens (Auto-cancel Tests. Bulk cancellation / reassign, Synchronize with Agresso (purchasing System) Send Communications to Customers)
  • BI and Reporting (Generate Reports. Display and Configure Dashboards. Demand Management. Ad Hoc Reporting)
Develop
  • Code a template which has all the required global elements:
  • Multi-level responsive navigation (open in desktop and collapsed on mobile).
  • Journey component to step the User through a Driver Learning Journey.
  • My Goals component showing a Users Goals and their current status.
  • My Messages component showing messages to and from the RSA.
  • Services and Eligibility component showing all services available and which ones the Users are eligible for.
  • Booking component

Mixed Gallery


Gallery showing ‘Booking a Service’ (Mobile)


SGS Auditing and Inspection App (Angular)

AuditPro Infographic

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.


Gallery Random Design Screens

Gallery Seafood Watch Admin

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 Bee Safety System

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.


Gallery

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.