Ruoyu's Homepage

Example Talk

Sat, 01 Jun 2030 13:00:00 +0000

Click on the Slides button above to view the built-in slides feature.

Slides can be added in a few ways:

Create slides using Hugo Blox Builder’s Slides feature and link using slides parameter in the front matter of the talk file
Upload an existing slide deck to static/ and link using url_slides parameter in the front matter of the talk file
Embed your slides (e.g. Google Slides) or presentation video on this page using shortcodes.

Further event details, including page elements such as image galleries, can be added to the body of this page.

CLIO: A Tour Guide Robot with Co-speech Actions for Visual Attention Guidance and Enhanced User Engagement

Fri, 05 Dec 2025 00:00:00 +0000

A Traffic Conflict Identification and Severity Assessment Method Based on Multi-Vehicle Trajectory Prediction

Mon, 28 Jul 2025 00:00:00 +0000

Air Bumper: A Collision Detection and Reaction Framework for Autonomous MAV Navigation

Mon, 13 May 2024 00:00:00 +0000

A Self-Evolving Digital Twin System Architecture for Indoor UAV Management based on Online Deep Learning

Fri, 15 Mar 2024 00:00:00 +0000

Synergistic Temporal Logic Planning for an Aerial Gripper

Wed, 13 Mar 2024 00:00:00 +0000

Blog with Jupyter Notebooks!

Sat, 04 Nov 2023 00:00:00 +0000

from IPython.core.display import Image
Image('https://www.python.org/static/community_logos/python-logo-master-v3-TM-flattened.png')

print("Welcome to Academic!")

Welcome to Academic!

Organize your notebooks

Place the notebooks that you would like to publish in a notebooks folder at the root of your website.

Import the notebooks into your site

pipx install academic
academic import 'notebooks/**.ipynb' content/post/ --verbose

The notebooks will be published to the folder you specify above. In this case, they will be published to your content/post/ folder.

An interactive system for multiple-task linear temporal logic path planning

Sun, 01 Oct 2023 00:00:00 +0000

Sampling-based path planning under temporal logic constraints with real-time adaptation

Thu, 01 Jun 2023 00:00:00 +0000

Autonomous Drone Inspection for Swimming Pool Ceiling

Tue, 16 May 2023 00:00:00 +0000

Autonomous Indoor Drone Inspection and Modeling System

Sun, 30 Apr 2023 00:00:00 +0000

Design of a Fully-autonomous Collision-resilient UAV

Sun, 30 Apr 2023 00:00:00 +0000

1. Drone’s components

4K HD camera:

This camera offers impressive capabilities including 20MP photo capture, 4K@30FPS video recording, and Electronic Image Stabilization.

Brushless DC Motor & Propeller:

Motors are responsible for spinning the propellers and generating thrust (up to a maximum of 6.4kg) to lift the drone off the ground.

Onboard Computer

Onboard computer provides powerful computing capabilities for autonomous inspection algorithms and data collection.

Carbon Fiber Composite Cage

The lightweight but reliable cage holds all the components together and protects the internal components from damage.

3D LiDAR

This compact yet powerful 3D LiDAR provides precise 360-degree data collection and perception, offering centimeter-level accuracy.

Flight Controller

The flight controller is like the brain of the drone. It contains sensors (such as gyroscopes and accelerometers) and processes data to stabilize and control the drone’s movements.

Electronic Speed Controllers (ESCs)

ESCs control the speed and direction of each motor. They receive commands from the flight controller and adjust the power sent to the motors accordingly.

Battery

The battery supplies power to the drone. It is a rechargeable lithium polymer (LiPo) battery with a capacity of 6000 mAh.

2. Advantages of our drone

Speed

The drone is designed for quick deployment and ease of use. In our swimming pool trial, we completed the ceiling inspection, including pre-flight preparations and actual flights (about 20 mins), in just 2 hours.

Safety

To ensure safety, the drone is equipped with a customized cage that fully covers its body, providing ample protection for both the drone and the surrounding facilities. Additionally, autonomous flight capabilities and intelligent collision avoidance algorithms contribute to safe and controlled operations.

Accuracy

With its powerful 3D LiDAR (centimeter-level accuracy) and advanced localization algorithm, the drone can provide high-accuracy point cloud data collection. This precision allows operators to precisely identify and locate defects in the following inspections.

Flexibility

The drone’s design is tailored for inspections, making it adaptable to various application scenarios. For instance, an up-looking camera is included specifically for ceiling inspections, enhancing its performance in our swimming pool trial.

A UAV-based explore-then-exploit system for autonomous indoor facility inspection and scene reconstruction

Sat, 01 Apr 2023 00:00:00 +0000

Sim-in-real: Digital twin based uav inspection process

Tue, 21 Jun 2022 00:00:00 +0000

Welcome to Hugo Blox Builder, the website builder for Hugo

Sun, 13 Dec 2020 00:00:00 +0000

import libr
print('hello')

Overview

The Wowchemy website builder for Hugo, along with its starter templates, is designed for professional creators, educators, and teams/organizations - although it can be used to create any kind of site
The template can be modified and customised to suit your needs. It’s a good platform for anyone looking to take control of their data and online identity whilst having the convenience to start off with a no-code solution (write in Markdown and customize with YAML parameters) and having flexibility to later add even deeper personalization with HTML and CSS
You can work with all your favourite tools and apps with hundreds of plugins and integrations to speed up your workflows, interact with your readers, and much more

Get Started

👉 Create a new site
📚 Personalize your site
💬 Chat with the Wowchemy community or Hugo community
🐦 Twitter: @wowchemy @GeorgeCushen #MadeWithWowchemy
💡 Request a feature or report a bug for Wowchemy
⬆️ Updating Wowchemy? View the Update Tutorial and Release Notes

Crowd-funded open-source software

To help us develop this template and software sustainably under the MIT license, we ask all individuals and businesses that use it to help support its ongoing maintenance and development via sponsorship.

As a token of appreciation for sponsoring, you can unlock these awesome rewards and extra features 🦄✨

Ecosystem

Hugo Academic CLI: Automatically import publications from BibTeX

Inspiration

Check out the latest demo of what you’ll get in less than 10 minutes, or view the showcase of personal, project, and business sites.

Features

Page builder - Create anything with widgets and elements
Edit any type of content - Blog posts, publications, talks, slides, projects, and more!
Create content in Markdown, Jupyter, or RStudio
Plugin System - Fully customizable color and font themes
Display Code and Math - Code highlighting and LaTeX math supported
Integrations - Google Analytics, Disqus commenting, Maps, Contact Forms, and more!
Beautiful Site - Simple and refreshing one page design
Industry-Leading SEO - Help get your website found on search engines and social media
Media Galleries - Display your images and videos with captions in a customizable gallery
Mobile Friendly - Look amazing on every screen with a mobile friendly version of your site
Multi-language - 34+ language packs including English, 中文, and Português
Multi-user - Each author gets their own profile page
Privacy Pack - Assists with GDPR
Stand Out - Bring your site to life with animation, parallax backgrounds, and scroll effects
One-Click Deployment - No servers. No databases. Only files.

Themes

Wowchemy and its templates come with automatic day (light) and night (dark) mode built-in. Alternatively, visitors can choose their preferred mode - click the moon icon in the top right of the Demo to see it in action! Day/night mode can also be disabled by the site admin in params.toml.

Choose a stunning theme and font for your site. Themes are fully customizable.

License

Released under the MIT license.

Writing technical content in Markdown

Fri, 12 Jul 2019 00:00:00 +0000

Hugo Blox Builder is designed to give technical content creators a seamless experience. You can focus on the content and Wowchemy handles the rest.

Highlight your code snippets, take notes on math classes, and draw diagrams from textual representation.

On this page, you’ll find some examples of the types of technical content that can be rendered with Wowchemy.

Examples

Code

Wowchemy supports a Markdown extension for highlighting code syntax. You can customize the styles under the syntax_highlighter option in your config/_default/params.yaml file.

```python
import pandas as pd
data = pd.read_csv("data.csv")
data.head()
```

renders as

import pandas as pd
data = pd.read_csv("data.csv")
data.head()

Mindmaps

Wowchemy supports a Markdown extension for mindmaps.

Simply insert a Markdown markmap code block and optionally set the height of the mindmap as shown in the example below.

A simple mindmap defined as a Markdown list:


```markmap {height="200px"}
- Hugo Modules
- wowchemy
- blox-plugins-netlify
- blox-plugins-netlify-cms
- blox-plugins-reveal
```

renders as

- Hugo Modules
- wowchemy
- blox-plugins-netlify
- blox-plugins-netlify-cms
- blox-plugins-reveal

A more advanced mindmap with formatting, code blocks, and math:


```markmap
- Mindmaps
- Links
- [Wowchemy Docs](https://docs.hugoblox.com/)
- [Discord Community](https://discord.gg/z8wNYzb)
- [GitHub](https://github.com/HugoBlox/hugo-blox-builder)
- Features
- Markdown formatting
- **inline** ~~text~~ *styles*
- multiline
text
- `inline code`
-
```js
console.log('hello');
console.log('code block');
```
- Math: $x = {-b \pm \sqrt{b^2-4ac} \over 2a}$
```

renders as

- Mindmaps
- Links
- [Wowchemy Docs](https://docs.hugoblox.com/)
- [Discord Community](https://discord.gg/z8wNYzb)
- [GitHub](https://github.com/HugoBlox/hugo-blox-builder)
- Features
- Markdown formatting
- **inline** ~~text~~ *styles*
- multiline
text
- `inline code`
-
```js
console.log('hello');
console.log('code block');
```
- Math: $x = {-b \pm \sqrt{b^2-4ac} \over 2a}$

Charts

Wowchemy supports the popular Plotly format for interactive charts.

Save your Plotly JSON in your page folder, for example line-chart.json, and then add the {{< chart data="line-chart" >}} shortcode where you would like the chart to appear.

Demo:

You might also find the Plotly JSON Editor useful.

Math

Wowchemy supports a Markdown extension for $\LaTeX$ math. You can enable this feature by toggling the math option in your config/_default/params.yaml file.

To render inline or block math, wrap your LaTeX math with {{< math >}}$...${{< /math >}} or {{< math >}}$$...$${{< /math >}}, respectively. (We wrap the LaTeX math in the Wowchemy math shortcode to prevent Hugo rendering our math as Markdown. The math shortcode is new in v5.5-dev.)

Example math block:

{{< math >}}
$$
\gamma_{n} = \frac{ \left | \left (\mathbf x_{n} - \mathbf x_{n-1} \right )^T \left [\nabla F (\mathbf x_{n}) - \nabla F (\mathbf x_{n-1}) \right ] \right |}{\left \|\nabla F(\mathbf{x}_{n}) - \nabla F(\mathbf{x}_{n-1}) \right \|^2}
$$
{{< /math >}}

renders as

$$\gamma_{n} = \frac{ \left | \left (\mathbf x_{n} - \mathbf x_{n-1} \right )^T \left [\nabla F (\mathbf x_{n}) - \nabla F (\mathbf x_{n-1}) \right ] \right |}{\left \|\nabla F(\mathbf{x}_{n}) - \nabla F(\mathbf{x}_{n-1}) \right \|^2}$$

Example inline math {{< math >}}$\nabla F(\mathbf{x}_{n})${{< /math >}} renders as $\nabla F(\mathbf{x}_{n})$.

Example multi-line math using the math linebreak (\\):

{{< math >}}
$$f(k;p_{0}^{*}) = \begin{cases}p_{0}^{*} & \text{if }k=1, \\
1-p_{0}^{*} & \text{if }k=0.\end{cases}$$
{{< /math >}}

renders as

$$ f(k;p_{0}^{*}) = \begin{cases}p_{0}^{*} & \text{if }k=1, \\ 1-p_{0}^{*} & \text{if }k=0.\end{cases} $$

Diagrams

Wowchemy supports a Markdown extension for diagrams. You can enable this feature by toggling the diagram option in your config/_default/params.toml file or by adding diagram: true to your page front matter.

An example flowchart:

```mermaid
graph TD
A[Hard] -->|Text| B(Round)
B --> C{Decision}
C -->|One| D[Result 1]
C -->|Two| E[Result 2]
```

renders as

graph TD A[Hard] -->|Text| B(Round) B --> C{Decision} C -->|One| D[Result 1] C -->|Two| E[Result 2]

An example sequence diagram:

```mermaid
sequenceDiagram
Alice->>John: Hello John, how are you?
loop Healthcheck
John->>John: Fight against hypochondria
end
Note right of John: Rational thoughts!
John-->>Alice: Great!
John->>Bob: How about you?
Bob-->>John: Jolly good!
```

renders as

sequenceDiagram Alice->>John: Hello John, how are you? loop Healthcheck John->>John: Fight against hypochondria end Note right of John: Rational thoughts! John-->>Alice: Great! John->>Bob: How about you? Bob-->>John: Jolly good!

An example Gantt diagram:

```mermaid
gantt
section Section
Completed :done, des1, 2014-01-06,2014-01-08
Active :active, des2, 2014-01-07, 3d
Parallel 1 : des3, after des1, 1d
Parallel 2 : des4, after des1, 1d
Parallel 3 : des5, after des3, 1d
Parallel 4 : des6, after des4, 1d
```

renders as

gantt section Section Completed :done, des1, 2014-01-06,2014-01-08 Active :active, des2, 2014-01-07, 3d Parallel 1 : des3, after des1, 1d Parallel 2 : des4, after des1, 1d Parallel 3 : des5, after des3, 1d Parallel 4 : des6, after des4, 1d

An example class diagram:

```mermaid
classDiagram
Class01 <|-- AveryLongClass : Cool
Class03 *-- Class04
Class05 o-- Class06
Class07 .. Class08
Class09 --> C2 : Where am i?
Class09 --* C3
Class09 --|> Class07
Class07 : equals()
Class07 : Object[] elementData
Class01 : size()
Class01 : int chimp
Class01 : int gorilla
Class08 <--> C2: Cool label
```

renders as

classDiagram Class01 <|-- AveryLongClass : Cool Class03 *-- Class04 Class05 o-- Class06 Class07 .. Class08 Class09 --> C2 : Where am i? Class09 --* C3 Class09 --|> Class07 Class07 : equals() Class07 : Object[] elementData Class01 : size() Class01 : int chimp Class01 : int gorilla Class08 <--> C2: Cool label

An example state diagram:

```mermaid
stateDiagram
[*] --> Still
Still --> [*]
Still --> Moving
Moving --> Still
Moving --> Crash
Crash --> [*]
```

renders as

stateDiagram [*] --> Still Still --> [*] Still --> Moving Moving --> Still Moving --> Crash Crash --> [*]

Todo lists

You can even write your todo lists in Markdown too:

- [x] Write math example
 - [x] Write diagram example
- [ ] Do something else

renders as

Write math example
- Write diagram example
Do something else

Tables

Save your spreadsheet as a CSV file in your page’s folder and then render it by adding the Table shortcode to your page:

{{< table path="results.csv" header="true" caption="Table 1: My results" >}}

renders as

Table 1: My results
customer_id	score
1	0
2	0.5
3	1

Callouts

Academic supports a shortcode for callouts, also referred to as asides, hints, or alerts. By wrapping a paragraph in {{% callout note %}} ... {{% /callout %}}, it will render as an aside.

{{% callout note %}}
A Markdown aside is useful for displaying notices, hints, or definitions to your readers.
{{% /callout %}}

renders as

A Markdown aside is useful for displaying notices, hints, or definitions to your readers.

Spoilers

Add a spoiler to a page to reveal text, such as an answer to a question, after a button is clicked.

{{< spoiler text="Click to view the spoiler" >}}
You found me!
{{< /spoiler >}}

renders as

Click to view the spoiler

You found me!

Icons

Academic enables you to use a wide range of icons from Font Awesome and Academicons in addition to emojis.

Here are some examples using the icon shortcode to render icons:

{{< icon name="terminal" pack="fas" >}} Terminal
{{< icon name="python" pack="fab" >}} Python
{{< icon name="r-project" pack="fab" >}} R

renders as

Terminal
Python
R

Slides

Tue, 05 Feb 2019 00:00:00 +0000

Create slides in Markdown with Hugo Blox Builder

Hugo Blox Builder | Documentation

Features

Efficiently write slides in Markdown
3-in-1: Create, Present, and Publish your slides
Supports speaker notes
Mobile friendly slides

Controls

Next: Right Arrow or Space
Previous: Left Arrow
Start: Home
Finish: End
Overview: Esc
Speaker notes: S
Fullscreen: F
Zoom: Alt + Click
PDF Export

Code Highlighting

Inline code: variable

Code block:

porridge = "blueberry"
if porridge == "blueberry":
 print("Eating...")

Math

Fragments

Make content appear incrementally

{{% fragment %}} One {{% /fragment %}}
{{% fragment %}} **Two** {{% /fragment %}}
{{% fragment %}} Three {{% /fragment %}}

Press Space to play!

One Two Three

A fragment can accept two optional parameters:

class: use a custom style (requires definition in custom CSS)
weight: sets the order in which a fragment appears

Speaker Notes

Add speaker notes to your presentation

{{% speaker_note %}}

- Only the speaker can read these notes
- Press `S` key to view
 {{% /speaker_note %}}

Press the S key to view the speaker notes!

Themes

black: Black background, white text, blue links (default)
white: White background, black text, blue links
league: Gray background, white text, blue links
beige: Beige background, dark text, brown links
sky: Blue background, thin dark text, blue links

night: Black background, thick white text, orange links
serif: Cappuccino background, gray text, brown links
simple: White background, black text, blue links
solarized: Cream-colored background, dark green text, blue links

Custom Slide

Customize the slide style and background

{{< slide background-image="/media/boards.jpg" >}}
{{< slide background-color="#0000FF" >}}
{{< slide class="my-style" >}}

Custom CSS Example

Let’s make headers navy colored.

Create assets/css/reveal_custom.css with:

.reveal section h1,
.reveal section h2,
.reveal section h3 {
 color: navy;
}

Questions?

Ask

Documentation

Ruoyu's Homepage

Example Talk

CLIO: A Tour Guide Robot with Co-speech Actions for Visual Attention Guidance and Enhanced User Engagement

A Traffic Conflict Identification and Severity Assessment Method Based on Multi-Vehicle Trajectory Prediction

Air Bumper: A Collision Detection and Reaction Framework for Autonomous MAV Navigation

A Self-Evolving Digital Twin System Architecture for Indoor UAV Management based on Online Deep Learning

Synergistic Temporal Logic Planning for an Aerial Gripper

Blog with Jupyter Notebooks!

Organize your notebooks

Import the notebooks into your site

An interactive system for multiple-task linear temporal logic path planning

Sampling-based path planning under temporal logic constraints with real-time adaptation

Autonomous Drone Inspection for Swimming Pool Ceiling

Autonomous Indoor Drone Inspection and Modeling System

Design of a Fully-autonomous Collision-resilient UAV

1. Drone’s components

4K HD camera:

Brushless DC Motor & Propeller:

Onboard Computer

Carbon Fiber Composite Cage

3D LiDAR

Flight Controller

Electronic Speed Controllers (ESCs)

Battery

2. Advantages of our drone

Speed

Safety

Accuracy

Flexibility

A UAV-based explore-then-exploit system for autonomous indoor facility inspection and scene reconstruction

Sim-in-real: Digital twin based uav inspection process

Welcome to Hugo Blox Builder, the website builder for Hugo

Overview

Get Started

Crowd-funded open-source software

❤️ Click here to become a sponsor and help support Wowchemy’s future ❤️

Ecosystem

Inspiration

Features

Themes

License

Writing technical content in Markdown

Examples

Code

Mindmaps

Charts

Math

Diagrams

Todo lists

Tables

Callouts

Spoilers

Icons

Did you find this page helpful? Consider sharing it 🙌

Slides

Create slides in Markdown with Hugo Blox Builder

Features

Controls

Code Highlighting

Math

Fragments

Speaker Notes

Themes

Custom Slide

Custom CSS Example

Questions?