import PostLayout from '../../components/PostLayout'

export default function Layout({children}) {
 return <PostLayout title="PortExcel" slug="portexcel" description="Smart Digital Port solution to improve shipping efficiency and safety." finishDate="2023-09-30" thumbnail="thumbnail.png">{children}</PostLayout>
}

Smart Digital Port solution to improve shipping efficiency and safety.

PortExcel

import PostLayout from '../../components/PostLayout'

export default function Layout({children}) {
 return <PostLayout title="Sonoro" slug="sonoro" description="VR Music Therapy System to help SEN students improve focus and self-expression." finishDate="2023-07-31" thumbnail="sonoro.jpg">{children}</PostLayout>
}

VR Music Therapy System to help SEN students improve focus and self-expression.

Sonoro

import PostLayout from '../../components/PostLayout'

### Background

This project was developed as a year long team project. I was the software lead of the team, and was responsible for developing the graphics and animation library, researching the use of machine learning models to integrate into the product, managing the codebase, and general project management, along with common duties among the team, such as problem definition, consolidating product features, form design, etc.

The topic of the project was Emotional Wellness. We started off by pinpointing our target demographic as students, as depression and anxiety are huge problems among students, and with the workload and in the context of the pandemic, students feel more and more isolated, and find it increasingly hard to form support networks to help them in times of need, either through practical advice and assistance or emotional support. Therefore, our goal is to **provide immediate companionship to the user, as well as means to forge real connections and provide a safe space for users to express their emotions**. our product would be something more geared towards young people; and at the same time not too intrusive in terms of space occupied, and time used to interact with the product, so as to not interfere with students’ day to day work.


### Product Ideation

Our inspiration mainly comes from E-Pets and fidget toys, since 1) they are appealing to young people, and 2) they are commonly used to provide companionship and stress relieve. We see an opportunity to add a social aspect to these product to help students improve their mental health.

Here are some iterations of the design of the product:
<img src="/projects/iris/design-evolution.png" style={{ width: "80%" }} />

After weeks of ideation, we landed on this design:
<img src="/projects/iris/iris-whole-render.png" style={{ width: "80%" }} />

The whole system is as such:
<img src="/projects/iris/hardware-system.png" style={{ width: "80%" }} />
<img src="/projects/iris/data-flow.jpg" style={{ width: "80%" }} />


### Graphics and Animation Library

For this product, we used the TFT display for showing the UI of the pet. A common tool for developing with the TFT display with a microcontroller is the TFT_eSPI library, which is a low level library that provide imperative functions to draw mainly shapes and text on the screen. However, since our application manages a lot of assets in its UI, since we have screens for multiple functions inside our product, and each screen has multiple visual elements, each comprises of different shapes. Therefore, we need some layer of abstraction to make developing the UI more manageable. There is the popular LVGL library for this exact purpose, but that library is more geared towards building static menus and pages; and since we are trying to develop something that can resemble a pet, we would like the flexibility of creating more lively animations. Therefore, I ultimately decided to build on top of the TFT_eSPI library, so that we can use more abstract object to manage the states and memory of the UI elements, and add animation utilities to each of these components. While developing, I did run into issues of screen flickering and inconsistent frame rates, but through researching and experimentation, I was able to use Direct Memory Access (DMA) to draw the elements at a higher speed, and sprites to create buffers in memory to draw elements out before displaying. I finally arrived at a tool that manages the component tree, with screen navigation interfacing with the hardware inertial measurement unit (IMU), and animations with easing options.

While the utilities were written specifically for the project, I am planning to extract it into its own standalone library for more generalized usage.

Here is the codebase for the project:
[https://github.com/renaultluk/Emotional-Pet](https://github.com/renaultluk/Emotional-Pet) 


### Machine Learning Research

To see more details about the research, here is the [Google Colab link](https://colab.research.google.com/drive/1SQbqdtftOJxlWUl8a7v_Vo1CcEoF9pjX?usp=sharing) for documentation.

A gap that we identified with existing E-Pets is that they do not provide feedback to the user based on their mood, and rather only reacting to more superficial interactions. Therefore, we would like to see if we could gauge the user’s emotion, and react based on said emotions. Therefore, I looked at several approaches to predict user emotions based on the inputs we get from the product.

One approach is to anaylze the voice gathered from the voice message functionality. Once we gathered the voice, we can use extract features in the user’s voice by generating mel spectrograms, or processing that further to get Mel-frequency cepstral coefficients (MFCC). We are then able to use a convolutional neural network (CNN) to pair these extracted features with the corresponding emotion, and outputs a prediction.
<img src="/projects/iris/cnn.png" style={{ width: "80%" }} />

Another approach is to use Heart Rate Variabiliy (HRV) to predict stress levels. Intuitively, the more stressed you are, the more sporadic your heart rate is. Therefore, we can get statistical features in a heart rate signal and train a Random Forests Model or a regression model to predict one’s stress levels.
<img src="/projects/iris/hrv-forests.jpg" style={{ width: "80%" }} />

Ultimately, we used the heart rate variability model, since analyzing audio and running a CNN is more computationally expensive than processing tabular data using regression and random forests by a considerable amount.


### Results

We created an assembled prototype with finished chassis, all components connected, with the UI, navigation using the IMU, heart rate measurement, and emotion prediction running smoothly. We were honoured to receive the Chinachem PrimeMovership Award based on the project.

export default function Layout({children}) {
 return <PostLayout title="IRIS - Smart Digital Pet" slug="iris" description="A smart digital pet that monitors your emotional health and provides a safe space to express your emotion." finishDate="2022-05-28" thumbnail="iris-whole-render.png">{children}</PostLayout>
}

A smart digital pet that monitors your emotional health and provides a safe space to express your emotion.

IRIS - Smart Digital Pet

import PostLayout from '../../components/PostLayout'

export default function Layout({children}) {
 return <PostLayout title="Kerry Logistics Smart Cargo Tracking" slug="kerry" description="An IoT-based solution for monitoring cargo conditions and tracking cargo movements." thumbnail="kerry-finish.jpg" finishDate="2022-05-16">{children}</PostLayout>
}

An IoT-based solution for monitoring cargo conditions and tracking cargo movements.

Kerry Logistics Smart Cargo Tracking

import PostLayout from '../../components/PostLayout'

This project was done as a submission to hackUST 2022, the largest hackathon in Asia. We tackled the theme of ESG and Smart Shopping / Spending / Living Experience in The Era of Information Overflow.

## Background
We started by identifying the gap in the market, and topics being discussed regarding sustainability. One such topic is fast fashion. Nowadays, mainstream fashion culture is moving at a breakneck speed: on top of the switching of styles every season, certain brands are pushing for new sets every month, and some “hype” brands even doing new drops every other week. The immense waste that goes into producing the items, as well as packaging and international shipping in the age of remote shopping, is often not talked about enough. As the turnover rate of clothing items increasing, more and more clothes that haven’t been used to their fullest end up in the landfills faster.

On the other hand, we noticed that a “thrifting” counter-culture is on the rise in Western countries, where consumers buy and consequently mix and match used clothing items donated from or sold by other people at a discounted price, creating its own genre of fashion. However, in Eastern cultures (such as in Hong Kong), there is a stigma to wearing other people’s clothes, as it might risk the wearer looking “cheap”.

Therefore, our solution aims to promote the culture of thrifting to the local scene, thereby reducing waste by preventing old clothes being thrown away; and at the same time satisfy consumers’ needs, so they reduce the amount of new clothes to buy, therefore reducing the demand for more clothing items and their subsequent waste being produced.


## Features
For this hackathon, we have created this website as a way to showcase our project.

There are two main flows of interacting with this website:

#### Customer
As a customer, you can:
1. Browse the marketplace by the 3 categories:
 - Women
 - Men
 - Kids 
The marketplace screen contains a list of product cards, each with information such as an image of the item, brand and name of the item, the price and the estimated water consumption used to produce the item.
2. Inspect details of a product by clicking onto a product card
3. Add a product to your cart by clicking on the "Add to Cart" button
4. Choose your means of delivering the product using the dropdown in the cart, and seeing the CO2 emissions of each method. By choosing to delay on the delivery and choosing less wasting delivery methods, the delivery process becomes more environmentally friendly through easier planning for bulk delivery on delivery companies' part.
5. Check out your cart by clicking on the "Checkout" button

#### Donator
As a donator, you can:
1. Add a product to the marketplace by clicking on the "Add Donation Item" button
2. Input details of your donation item, including name, weight, and images of the item. Once the items are inputted, an estimated amount of rewards given to you will be calculated. The heavier the items, the more you are saving on the emission and waste that goes into producing and distributing the goods, as a result you get a larger sum of rewards. Right now, you get 50 Thriftee Dollars per kg of items donated, which can translate to different vouchers.
3. Submit your donation item by clicking on the "Confirm" button
4. Download an auto-generated shipping label with the information of your donation, including user ID, items donated, estimated rewards, etc. An QR code is also generated on the shipping label to ease the process of processing the donation.


## Tech Stack
For the prototype, we used Next.js as the frontend framework, along the React Bootstrap as the styling library. We also used Zustand as the state management library to manage account info and shopping cart items.

As for the backend, we used Firebase to save all product information.


## Results



## License
For the licenses for 3rd party libraries used in this projects, please see the LICENSE-3RD-PARTY.txt.


## Full Repository
You can find the full repository of this project at:
https://github.com/renaultluk/hackUST-Online-Thrift-Shop

export default function Layout({children}) {
 return <PostLayout title="Thriftee (hackUST 2022 Submission)" slug="thriftee" description="A thift shopping platform that encourages more environmentally friendly shopping habits." thumbnail="thriftee-logo.jpg" finishDate="2022-05-01">{children}</PostLayout>
}

A thift shopping platform that encourages more environmentally friendly shopping habits.

Thriftee (hackUST 2022 Submission)

import PostLayout from '../../components/PostLayout'

export default function Layout({children}) {
 return <PostLayout title="USThing x UST Fintech Easter Campaign Game" slug="usthing-wordle" description="A Wordle-like web game for the UST Fintech Easter Campaign." finishDate="2022-04-01" thumbnail="wordle-main.jpg">{children}</PostLayout>
}

A Wordle-like web game for the UST Fintech Easter Campaign.

USThing x UST Fintech Easter Campaign Game

import PostLayout from '../../components/PostLayout'

export default function Layout({children}) {
 return <PostLayout title="Cathay Pacific Flight Flask" slug="cathay" description="A drinking flask designed to reduce catering waste in the flight cabin." thumbnail="cathay-render.jpg" finishDate="2021-12-31">{children}</PostLayout>
}

A drinking flask designed to reduce catering waste in the flight cabin.

Cathay Pacific Flight Flask

import PostLayout from '../../components/PostLayout'

export default function Layout({children}) {
 return <PostLayout title="Student Information System Redesign" slug="sis" description="A redesign of the SIS for better user experience on mobile." thumbnail="sis-thumbnail.jpg" finishDate="2021-12-31">{children}</PostLayout>
}

A redesign of the SIS for better user experience on mobile.

Student Information System Redesign

import image from 'next/image'
import PostLayout from '../../components/PostLayout'

This project was done as a submission for the course Internet of Things: From Component 
Skills to System Integration at HKUST.
## Background
As a course project, it has a few requirements that we had to fulfill:
1. The system must be a functional IoT system with a meaningful application. 
2. The system must include the highlighted components, and other components listed are preferred as well. 
**a. Sensors** 
**b. Embedded system** 
c. Amplifiers 
d. Actuators 
e. Signal/data processing 
**f. Communication system** 
**g. MQTT** 
h. Data analytics 
i. Machine Learning 
## Motivation
The reasons we would like to establish a smart road planning and self-driving project are to prevent traffic congestions and car accidents. Imagine if we could collect GPS data of all the vehicles and control car movements by algorithm calculations. Then there will not be any man-made accidents. 

## Background Research
In terms of road planning, there have been projects like intelligent traffic lights. It collects road condition data including traffic congestions and road accidents due to adverse weather circumstances. Then it would control traffic flow by adjusting waiting and running time. 

For self-driving, the existing technology allows users to set the destination at the beginning and the system would calculate a route. The self-driving car has a lidar installed to detect 60 meters range around the car. A dynamic three-dimensional map of the car’s current environment is generated to obtain the car’s current position relative to the map. Besides, there would be a radar to calculate distances to obstacles. Finally, AI is applied to self-drive the vehicles. 

Our proposed solution is to combine the two existing technologies to avoid traffic congestions and eliminate car accidents. First, users could choose the desired destination and the system would pre-planned the routes. Then safety measures with ultrasound sensors are established to keep distance between the vehicles to avoid car crashes. 

## Design and Methodology
#### Setup
The map can be seen as a weighted graph, where points of significance (e.g. intersections, destinations) are the nodes, while the roads are the edges. The edges are weighted by their physical lengths and distance between the nodes. Additional weight will be added to the edges if a vehicle plans to pass through it.
<img src="/projects/smart-traffic/image1.png" alt="map" width="100%" />


#### Operation Flow

*1. Pre-journey planning* 
The vehicle will plan out its journey before it starts driving. It first searches paths possible using Dijkstra’s Algorithm, by tracing each path along with the nodes, and returning the shortest distance from the initial node to all of the other nodes. It ultimately reconstructs the path through tracing the target's immediate predecessor, and the immediate predecessor of that, and so on; and saves the steering directions in a queue.
<img src="/projects/smart-traffic/image6.png" alt="map" width="100%" />


After it finishes planning, its path will be appended on a list on the server through MQTT, where additional weights will be added onto each edge that the vehicle will pass through, to deter other vehicles from occupying the same road.


*2. Driving* 

The vehicle drives along the line on the road, where the infrared line sensor will guide the vehicle to follow closely with the PID controller, whereby the vehicle will calculate a weighted sum of the data from each IR sensor inside the line sensor, and offset the PWM of the motors driving the wheels accordingly.

*3. Passing a node* 

When the vehicle passes a node, the following operation will be carried out:

Steering: When facing a crossroads, the line sensor will either scan from left to right (if going left) or from right to left (if going right) and only read the first line it encounters. By carrying out PID with only the relevant line, the vehicle will steer without affecting the overall speed of the vehicle.
Updating the direction queue: The first element of the direction queue (the operation it just carried out) will be dequeued, so the vehicle will check for the next element in the queue next time.
Updating the map: The edge that the vehicle just passed through will be removed from the list on the server, and the additional weight on the edge will be subtracted, freeing up the path for other vehicles.

a. System diagram (path planning)
<img src="/projects/smart-traffic/image4.png" alt="map" width="100%" />


(system flowchart)
<img src="/projects/smart-traffic/image2.png" alt="map" width="100%" />



b. Basic components included and their functions 

- Arduino board - signal control 
- Motor driver - motor control 
- Motors - actuators 
- Infrared sensors - line follower 
- UWB - location detection 
- Ultrasound sensor - distance detection 

c. Integration/signal flow between different components 
<img src="/projects/smart-traffic/image5.png" alt="map" width="100%" />
<img src="/projects/smart-traffic/image3.png" alt="map" width="100%" />

The Arduino handles the processing of signal and data. The line sensor and the ultrasonic sensor feeds in real-time data to actuate the motors with a motor driver, and updates the weight map through MQTT.


## Results
The line following and path planning functions are able to be achieved. UWB is able to extract basic information from the Arduino board. Ultrasonic sensor is able to detect distance changes between the cars. Vehicle motors could follow PID for steering.

While we faced a lot of unexpected technical issues in this project, including the malfunction of UWB, wrong sensitivity of sensors, and so on; we learnt a lot from trial and error, such as translating design requirements into technical implementations, taking into consideration the sampling rate of each sensor, and utilization of MQTT.

## Full Repository
You can find the full repository of this project at:
https://github.com/renaultluk/Smart-Traffic-Management-System

export default function Layout({children}) {
 return <PostLayout title="Smart Traffic Management System" slug="smart-traffic" description="A prototype of an IoT-based traffic management system for smart cities" finishDate="2021-12-31" thumbnail="image1.png">{children}</PostLayout>
}

A prototype of an IoT-based traffic management system for smart cities

Smart Traffic Management System

import PostLayout from '../../components/PostLayout'

export default function Layout({children}) {
 return <PostLayout title="ANJO Lamp" slug="anjo" description="A lamp designed for the professional work-from-home setting." finishDate="2021-06-01" thumbnail="anjo-white-bg.png">{children}</PostLayout>
}

A lamp designed for the professional work-from-home setting.

ANJO Lamp

import PostLayout from '../../components/PostLayout'

export default function Layout({children}) {
 return <PostLayout title="Smart Mobility Device" slug="mobility" description="A mobile phone-controlled smart mobility device." finishDate="2021-06-01" thumbnail="mobility-final.jpg">{children}</PostLayout>
}

A mobile phone-controlled smart mobility device.

Smart Mobility Device

import PostLayout from '../../components/PostLayout'

export default function Layout({children}) {
 return <PostLayout title="ClipAsk" slug="clipask" description="A learning platform designed for students, by students." finishDate="2020-01-01" thumbnail="clipask-icon.png">{children}</PostLayout>
}

A learning platform designed for students, by students.

My Work