Cathx Ocean Sub Sea Imaging Portal (Angular)

Posted on August 15, 2023 - 5:22 pm by admin

Home - Mission Config, Camera Monitor and Workflow
Camera Monitor with Mission Slider, a 'Soundcloud style UI' highlighting mission observables and survey dept

Cathx Ocean Sub Sea Imaging Portal

Device: Desktop Only

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

Develop an app where the UI communicates with the engine (.NET) through MQTT IoT commands to retrieve available ‘workflows’ (various image and laser manipulation), providing users with the ability to configure, initiate and terminate workflows as required.

Research existing software (Scene Config, Camera Monitor and SOLID)

SOLID (existing image processing requirements)

Hunter Setup Camera A and B for Hugin Vessle

Calrity hub initial wireframes — Clarity initial wire frames

Approx mission start and end points — A Mission

Cathx Ocean health and wellbeing...The Wicklow Way — Cathx Ocean health and wellbeing…The Wicklow Way

Image Augmentation - Official council sign pending Health and Safety review and committee :) — Image Augmentation – Official council sign pending Health and Safety review and committee 🙂

Worth it for this view (Round tower) — Cathx Ocean health and wellbeing

'Mitch' Cathx Ocean health and well-being — Cathx Ocean health and well-being

Chris - Cathx Ocean health and well-being — Cathx Ocean health and wellbeing

Cathx Oceans 11 - Not so much a pose more a 4 man ballet / battle to be first while trying to look casual :) — Cathx Oceans 11

The size of the Titanic and how far down it was. — Context is everything

Clarity favicon strip

LIVE View UI Concept — UI Concept LIVE View

SGS Auditing and Logging App (Angular)

Posted on August 8, 2023 - 2:08 pm by admin

Auditing and Logging App

Client: SGS

An advanced ultra-dynamic auditing and logging app designed for SGS agents to inspect petrol and gas stations in the EMEA region.

Managed and monitored by regional managers, it features a traffic light alert system, reporting tools, and Power BI dashboards.

The app is multilingual and adaptable for various audits, including environmental checks at fish farms in Asia (Seafood Watch).

Below is 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

OCM Logo Development

Nav V2

Manage User Nav

SGS feul station assment modal on mobile

Extra info in a 'popover' — Extra info in a ‘popover’

Gallery Seafood Watch Admin

SGS BeeAlert App (jQuey)

Posted on February 18, 2020 - 2:19 pm by admin

Bee Alert (Desktop)
Bee Alert (Mobile)

SGS BeeAlert Bee Safety System

Device: Mobile, Tablet and Desktop

Quiet a nice idea here which involved a collaborative initiative between farmers and beekeepers aims to protect bees. Beekeepers receive alerts when farmers spray crops, allowing them to shield the bees from harmful exposure, thus contributing to bee conservation.

My contribution involved branding the user interface with SGS’s colour scheme and developing a proof of concept (POC) prototype. This prototype serves both as a demonstration for potential clients and as a marketing tool.

The development was carried out using jQuery, Kendo, and Bootstrap to create a Single Page Web Application (SPA).

The gallery below illustrates various aspects of this SPA, including brand and logo design, info-graphics, user interface design, and responsive layout.