<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"><channel><title>Personal Website</title><link>https://lxk-221.github.io/</link><atom:link href="https://lxk-221.github.io/index.xml" rel="self" type="application/rss+xml"/><description>Personal Website</description><generator>Hugo Blox Builder (https://hugoblox.com)</generator><language>en-us</language><lastBuildDate>Mon, 24 Oct 2022 00:00:00 +0000</lastBuildDate><image><url>https://lxk-221.github.io/media/icon_hu68170e94a17a2a43d6dcb45cf0e8e589_3079_512x512_fill_lanczos_center_3.png</url><title>Personal Website</title><link>https://lxk-221.github.io/</link></image><item><title>Example Talk</title><link>https://lxk-221.github.io/event/example/</link><pubDate>Sat, 01 Jun 2030 13:00:00 +0000</pubDate><guid>https://lxk-221.github.io/event/example/</guid><description>&lt;div class="flex px-4 py-3 mb-6 rounded-md bg-primary-100 dark:bg-primary-900">
&lt;span class="pr-3 pt-1 text-primary-600 dark:text-primary-300">
&lt;svg height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">&lt;path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m11.25 11.25l.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0a9 9 0 0 1 18 0m-9-3.75h.008v.008H12z"/>&lt;/svg>
&lt;/span>
&lt;span class="dark:text-neutral-300">Click on the &lt;strong>Slides&lt;/strong> button above to view the built-in slides feature.&lt;/span>
&lt;/div>
&lt;p>Slides can be added in a few ways:&lt;/p>
&lt;ul>
&lt;li>&lt;strong>Create&lt;/strong> slides using Hugo Blox Builder&amp;rsquo;s &lt;a href="https://docs.hugoblox.com/reference/content-types/">&lt;em>Slides&lt;/em>&lt;/a> feature and link using &lt;code>slides&lt;/code> parameter in the front matter of the talk file&lt;/li>
&lt;li>&lt;strong>Upload&lt;/strong> an existing slide deck to &lt;code>static/&lt;/code> and link using &lt;code>url_slides&lt;/code> parameter in the front matter of the talk file&lt;/li>
&lt;li>&lt;strong>Embed&lt;/strong> your slides (e.g. Google Slides) or presentation video on this page using &lt;a href="https://docs.hugoblox.com/reference/markdown/">shortcodes&lt;/a>.&lt;/li>
&lt;/ul>
&lt;p>Further event details, including &lt;a href="https://docs.hugoblox.com/reference/markdown/">page elements&lt;/a> such as image galleries, can be added to the body of this page.&lt;/p></description></item><item><title>MOSAIC: Bridging the Sim-to-Real Gap in Generalist Humanoid Motion Tracking and Teleoperation with Rapid Residual Adaptation</title><link>https://lxk-221.github.io/publication/mosaic/</link><pubDate>Mon, 09 Feb 2026 00:00:00 +0000</pubDate><guid>https://lxk-221.github.io/publication/mosaic/</guid><description>&lt;div class="flex px-4 py-3 mb-6 rounded-md bg-primary-100 dark:bg-primary-900">
&lt;span class="pr-3 pt-1 text-primary-600 dark:text-primary-300">
&lt;svg height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">&lt;path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m11.25 11.25l.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0a9 9 0 0 1 18 0m-9-3.75h.008v.008H12z"/>&lt;/svg>
&lt;/span>
&lt;span class="dark:text-neutral-300">Released on arXiv:&lt;/span>
&lt;/div>
&lt;p>MOSAIC is an open-source, full-stack system for humanoid motion tracking and teleoperation:&lt;/p>
&lt;ul>
&lt;li>&lt;strong>Learns a general motion tracker&lt;/strong> via RL on multi-source motion bank&lt;/li>
&lt;li>&lt;strong>Performs rapid residual adaptation&lt;/strong> to bridge sim-to-real gap&lt;/li>
&lt;li>&lt;strong>Supports multiple interfaces&lt;/strong> for teleoperation&lt;/li>
&lt;li>&lt;strong>Validated with real-robot experiments&lt;/strong> demonstrating robust offline motion replay and online long-horizon teleoperation&lt;/li>
&lt;/ul>
&lt;p>&lt;strong>Authors&lt;/strong>: Bo-Sheng Huang*, Yibo Peng*, Xukun Li* (&lt;em>Equal contribution&lt;/em>). Corresponding authors: Zhenshan Bing†, Xinlong Wang†.&lt;/p></description></item><item><title>DECO: Decoupled Multimodal Diffusion Transformer for Bimanual Dexterous Manipulation with a Plugin Tactile Adapter</title><link>https://lxk-221.github.io/publication/deco/</link><pubDate>Thu, 05 Feb 2026 00:00:00 +0000</pubDate><guid>https://lxk-221.github.io/publication/deco/</guid><description>&lt;div class="flex px-4 py-3 mb-6 rounded-md bg-primary-100 dark:bg-primary-900">
&lt;span class="pr-3 pt-1 text-primary-600 dark:text-primary-300">
&lt;svg height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">&lt;path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m11.25 11.25l.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0a9 9 0 0 1 18 0m-9-3.75h.008v.008H12z"/>&lt;/svg>
&lt;/span>
&lt;span class="dark:text-neutral-300">Released on arXiv:&lt;/span>
&lt;/div>
&lt;p>DECO is a decoupled multimodal diffusion transformer for bimanual dexterous manipulation that:&lt;/p>
&lt;ul>
&lt;li>&lt;strong>Disentangles multimodal inputs&lt;/strong> (vision, proprioception, tactile) through specialized conditioning pathways&lt;/li>
&lt;li>&lt;strong>Features a lightweight tactile adapter&lt;/strong> for parameter-efficient injection of tactile signals&lt;/li>
&lt;li>&lt;strong>Achieves 72.25% success rate&lt;/strong> with 21% improvement over baseline&lt;/li>
&lt;li>&lt;strong>Introduces DECO-50 dataset&lt;/strong> with 50 hours of data and over 5M frames&lt;/li>
&lt;/ul></description></item><item><title>Assembly Robot</title><link>https://lxk-221.github.io/project/010.assembly-robot/</link><pubDate>Sun, 01 Sep 2024 00:00:00 +0000</pubDate><guid>https://lxk-221.github.io/project/010.assembly-robot/</guid><description>&lt;h2 id="abstrct">Abstrct&lt;/h2>
&lt;p>Movement Primitives (MP) are promising methods for modeling robot motion from human demonstrations. Using learned parameters and a phase variable typically scaled to $\boldsymbol{[0,1]}$, MP can generate a trajectory as the phase transitions from 0 to 1.
However, in assembly tasks that require high precision and online adjustments, typical MP methods do not work well, particularly when the trajectory is executed with limited controller gains, or when the task is hindered by some obstacles.
Therefore, we propose Phase-Recognizing Movement Primitive (PMP), which can make a stable estimation of the task phase online, make suitable adjustments when the assembly task is hindered by external disturbances, and finally achieve precise assembly while using a low gain compliance controller.
Specifically, given the robot state, we assume the phase is a random variable with a Gaussian distribution. Consequently, the phase velocity can be computed, enabling us to determine whether the task is hindered and to retry if the task is stuck.
We test our method on a Peg-In-Hole assembly task in simulation and a Slide-In-The-Groove assembly task on real UR5. The experimental results show that PMP can make stable estimations of the phase and thus make adjustments to complete the hindered assembly tasks.&lt;/p>
&lt;h2 id="experiment">Experiment&lt;/h2>
&lt;div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;">
&lt;iframe allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen="allowfullscreen" loading="eager" referrerpolicy="strict-origin-when-cross-origin" src="https://www.youtube.com/embed/Hcrcy2lksx4?autoplay=0&amp;controls=1&amp;end=0&amp;loop=0&amp;mute=0&amp;start=0" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border:0;" title="YouTube video"
>&lt;/iframe>
&lt;/div></description></item><item><title>Projects</title><link>https://lxk-221.github.io/projects/</link><pubDate>Sun, 19 May 2024 00:00:00 +0000</pubDate><guid>https://lxk-221.github.io/projects/</guid><description/></item><item><title>🎉 Easily create your own simple yet highly customizable blog</title><link>https://lxk-221.github.io/post/get-started/</link><pubDate>Fri, 27 Oct 2023 00:00:00 +0000</pubDate><guid>https://lxk-221.github.io/post/get-started/</guid><description>&lt;p>Welcome 👋&lt;/p>
&lt;details class="print:hidden xl:hidden" open>
&lt;summary>Table of Contents&lt;/summary>
&lt;div class="text-sm">
&lt;nav id="TableOfContents">
&lt;ul>
&lt;li>&lt;a href="#overview">Overview&lt;/a>
&lt;ul>
&lt;li>&lt;a href="#get-started">Get Started&lt;/a>&lt;/li>
&lt;/ul>
&lt;/li>
&lt;li>&lt;a href="#crowd-funded-open-source-software">Crowd-funded open-source software&lt;/a>
&lt;ul>
&lt;li>&lt;a href="#-click-here-to-become-a-sponsor-and-help-support-hugo-bloxs-future-httpshugobloxcomsponsor">&lt;a href="https://hugoblox.com/sponsor/">❤️ Click here to become a sponsor and help support Hugo Blox&amp;rsquo;s future ❤️&lt;/a>&lt;/a>&lt;/li>
&lt;/ul>
&lt;/li>
&lt;li>&lt;a href="#ecosystem">Ecosystem&lt;/a>&lt;/li>
&lt;li>&lt;a href="#inspiration">Inspiration&lt;/a>&lt;/li>
&lt;li>&lt;a href="#features">Features&lt;/a>&lt;/li>
&lt;li>&lt;a href="#themes">Themes&lt;/a>&lt;/li>
&lt;li>&lt;a href="#license">License&lt;/a>&lt;/li>
&lt;/ul>
&lt;/nav>
&lt;/div>
&lt;/details>
&lt;h2 id="overview">Overview&lt;/h2>
&lt;ol>
&lt;li>The Hugo Blox 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&lt;/li>
&lt;li>The template can be modified and customised to suit your needs. It&amp;rsquo;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 &lt;strong>no-code solution (write in Markdown and customize with YAML parameters)&lt;/strong> and having &lt;strong>flexibility to later add even deeper personalization with HTML and CSS&lt;/strong>&lt;/li>
&lt;li>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&lt;/li>
&lt;/ol>
&lt;h3 id="get-started">Get Started&lt;/h3>
&lt;ul>
&lt;li>👉 &lt;a href="https://hugoblox.com/templates/">&lt;strong>Create a new site&lt;/strong>&lt;/a>&lt;/li>
&lt;li>📚 &lt;a href="https://docs.hugoblox.com/">&lt;strong>Personalize your site&lt;/strong>&lt;/a>&lt;/li>
&lt;li>💬 &lt;a href="https://discord.gg/z8wNYzb">Chat with the &lt;strong>Hugo Blox community&lt;/strong>&lt;/a> or &lt;a href="https://discourse.gohugo.io">&lt;strong>Hugo community&lt;/strong>&lt;/a>&lt;/li>
&lt;li>🐦 Twitter: &lt;a href="https://twitter.com/GetResearchDev">@GetResearchDev&lt;/a> &lt;a href="https://twitter.com/GeorgeCushen">@GeorgeCushen&lt;/a> #MadeWithHugoBlox&lt;/li>
&lt;li>💡 &lt;a href="https://github.com/HugoBlox/hugo-blox-builder/issues">Request a &lt;strong>feature&lt;/strong> or report a &lt;strong>bug&lt;/strong> for &lt;em>Hugo Blox&lt;/em>&lt;/a>&lt;/li>
&lt;li>⬆️ &lt;strong>Updating Hugo Blox?&lt;/strong> View the &lt;a href="https://docs.hugoblox.com/reference/update/">Update Guide&lt;/a> and &lt;a href="https://github.com/HugoBlox/hugo-blox-builder/releases">Release Notes&lt;/a>&lt;/li>
&lt;/ul>
&lt;h2 id="crowd-funded-open-source-software">Crowd-funded open-source software&lt;/h2>
&lt;p>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.&lt;/p>
&lt;h3 id="-click-here-to-become-a-sponsor-and-help-support-hugo-bloxs-future-httpshugobloxcomsponsor">&lt;a href="https://hugoblox.com/sponsor/">❤️ Click here to become a sponsor and help support Hugo Blox&amp;rsquo;s future ❤️&lt;/a>&lt;/h3>
&lt;p>As a token of appreciation for sponsoring, you can &lt;strong>unlock &lt;a href="https://hugoblox.com/sponsor/">these&lt;/a> awesome rewards and extra features 🦄✨&lt;/strong>&lt;/p>
&lt;h2 id="ecosystem">Ecosystem&lt;/h2>
&lt;ul>
&lt;li>&lt;strong>&lt;a href="https://github.com/GetRD/academic-file-converter">Bibtex To Markdown&lt;/a>:&lt;/strong> Automatically import publications from BibTeX&lt;/li>
&lt;/ul>
&lt;h2 id="inspiration">Inspiration&lt;/h2>
&lt;p>&lt;a href="https://hugoblox.com/creators/">Learn what other &lt;strong>creators&lt;/strong>&lt;/a> are building with this template.&lt;/p>
&lt;h2 id="features">Features&lt;/h2>
&lt;ul>
&lt;li>&lt;strong>Page builder&lt;/strong> - Create &lt;em>anything&lt;/em> with no-code &lt;a href="https://hugoblox.com/blocks/">&lt;strong>blocks&lt;/strong>&lt;/a> and &lt;a href="https://docs.hugoblox.com/reference/markdown/">&lt;strong>elements&lt;/strong>&lt;/a>&lt;/li>
&lt;li>&lt;strong>Edit any type of content&lt;/strong> - Blog posts, publications, talks, slides, projects, and more!&lt;/li>
&lt;li>&lt;strong>Create content&lt;/strong> in &lt;a href="https://docs.hugoblox.com/reference/markdown/">&lt;strong>Markdown&lt;/strong>&lt;/a>, &lt;a href="https://docs.hugoblox.com/getting-started/cms/">&lt;strong>Jupyter&lt;/strong>&lt;/a>, or &lt;a href="https://docs.hugoblox.com/getting-started/cms/">&lt;strong>RStudio&lt;/strong>&lt;/a>&lt;/li>
&lt;li>&lt;strong>Plugin System&lt;/strong> - Fully customizable &lt;a href="https://docs.hugoblox.com/getting-started/customize/">&lt;strong>color&lt;/strong> and &lt;strong>font themes&lt;/strong>&lt;/a>&lt;/li>
&lt;li>&lt;strong>Display Code and Math&lt;/strong> - Code syntax highlighting and LaTeX math supported&lt;/li>
&lt;li>&lt;strong>Integrations&lt;/strong> - &lt;a href="https://analytics.google.com">Google Analytics&lt;/a>, &lt;a href="https://disqus.com">Disqus commenting&lt;/a>, Maps, Contact Forms, and more!&lt;/li>
&lt;li>&lt;strong>Beautiful Site&lt;/strong> - Simple and refreshing one-page design&lt;/li>
&lt;li>&lt;strong>Industry-Leading SEO&lt;/strong> - Help get your website found on search engines and social media&lt;/li>
&lt;li>&lt;strong>Media Galleries&lt;/strong> - Display your images and videos with captions in a customizable gallery&lt;/li>
&lt;li>&lt;strong>Mobile Friendly&lt;/strong> - Look amazing on every screen with a mobile friendly version of your site&lt;/li>
&lt;li>&lt;strong>Multi-language&lt;/strong> - 35+ language packs including English, 中文, and Português&lt;/li>
&lt;li>&lt;strong>Multi-user&lt;/strong> - Each author gets their own profile page&lt;/li>
&lt;li>&lt;strong>Privacy Pack&lt;/strong> - Assists with GDPR&lt;/li>
&lt;li>&lt;strong>Stand Out&lt;/strong> - Bring your site to life with animation, parallax backgrounds, and scroll effects&lt;/li>
&lt;li>&lt;strong>One-Click Deployment&lt;/strong> - No servers. No databases. Only files.&lt;/li>
&lt;/ul>
&lt;h2 id="themes">Themes&lt;/h2>
&lt;p>Hugo Blox and its templates come with &lt;strong>automatic day (light) and night (dark) mode&lt;/strong> built-in. Visitors can choose their preferred mode by clicking the sun/moon icon in the header.&lt;/p>
&lt;p>&lt;a href="https://docs.hugoblox.com/getting-started/customize/">Choose a stunning &lt;strong>theme&lt;/strong> and &lt;strong>font&lt;/strong>&lt;/a> for your site. Themes are fully customizable.&lt;/p>
&lt;h2 id="license">License&lt;/h2>
&lt;p>Copyright 2016-present &lt;a href="https://georgecushen.com">George Cushen&lt;/a>.&lt;/p>
&lt;p>Released under the &lt;a href="https://github.com/HugoBlox/hugo-blox-builder/blob/main/LICENSE.md">MIT&lt;/a> license.&lt;/p></description></item><item><title>🧠 Sharpen your thinking with a second brain</title><link>https://lxk-221.github.io/post/second-brain/</link><pubDate>Thu, 26 Oct 2023 00:00:00 +0000</pubDate><guid>https://lxk-221.github.io/post/second-brain/</guid><description>&lt;p>Create a personal knowledge base and share your knowledge with your peers.&lt;/p>
&lt;p>Hugo Blox web framework empowers you with one of the most flexible note-taking capabilities out there.&lt;/p>
&lt;p>Create a powerful knowledge base that works on top of a local folder of plain text Markdown files.&lt;/p>
&lt;p>Use it as your second brain, either publicly sharing your knowledge with your peers via your website, or via a private GitHub repository and password-protected site just for yourself.&lt;/p>
&lt;h2 id="mindmaps">Mindmaps&lt;/h2>
&lt;p>Hugo Blox supports a Markdown extension for mindmaps.&lt;/p>
&lt;p>With this open format, can even edit your mindmaps in other popular tools such as Obsidian.&lt;/p>
&lt;p>Simply insert a Markdown code block labelled as &lt;code>markmap&lt;/code> and optionally set the height of the mindmap as shown in the example below.&lt;/p>
&lt;p>Mindmaps can be created by simply writing the items as a Markdown list within the &lt;code>markmap&lt;/code> code block, indenting each item to create as many sub-levels as you need:&lt;/p>
&lt;div class="highlight">
&lt;pre class="chroma">
&lt;code>
```markmap {height="200px"}
- Hugo Modules
- Hugo Blox
- blox-plugins-netlify
- blox-plugins-netlify-cms
- blox-plugins-reveal
```
&lt;/code>
&lt;/pre>
&lt;/div>
&lt;p>renders as&lt;/p>
&lt;div class="highlight" height="200px">&lt;pre tabindex="0" class="chroma">&lt;code class="language-fallback" data-lang="fallback">&lt;span class="line">&lt;span class="cl">- Hugo Modules
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> - Hugo Blox
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> - blox-plugins-netlify
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> - blox-plugins-netlify-cms
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> - blox-plugins-reveal
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/div>&lt;p>Anh here&amp;rsquo;s a more advanced mindmap with formatting, code blocks, and math:&lt;/p>
&lt;div class="highlight">
&lt;pre class="chroma">
&lt;code>
```markmap
- Mindmaps
- Links
- [Hugo Blox 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}$
```
&lt;/code>
&lt;/pre>
&lt;/div>
&lt;p>renders as&lt;/p>
&lt;div class="highlight">&lt;pre tabindex="0" class="chroma">&lt;code class="language-fallback" data-lang="fallback">&lt;span class="line">&lt;span class="cl">- Mindmaps
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> - Links
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> - [Hugo Blox Docs](https://docs.hugoblox.com/)
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> - [Discord Community](https://discord.gg/z8wNYzb)
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> - [GitHub](https://github.com/HugoBlox/hugo-blox-builder)
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> - Features
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> - Markdown formatting
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> - **inline** ~~text~~ *styles*
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> - multiline
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> text
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> - `inline code`
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> -
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> ```js
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> console.log(&amp;#39;hello&amp;#39;);
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> console.log(&amp;#39;code block&amp;#39;);
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> ```
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> - Math: $x = {-b \pm \sqrt{b^2-4ac} \over 2a}$
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/div>&lt;h2 id="highlighting">Highlighting&lt;/h2>
&lt;p>&lt;mark>Highlight&lt;/mark> important text with &lt;code>mark&lt;/code>:&lt;/p>
&lt;div class="highlight">&lt;pre tabindex="0" class="chroma">&lt;code class="language-html" data-lang="html">&lt;span class="line">&lt;span class="cl">&lt;span class="p">&amp;lt;&lt;/span>&lt;span class="nt">mark&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>Highlighted text&lt;span class="p">&amp;lt;/&lt;/span>&lt;span class="nt">mark&lt;/span>&lt;span class="p">&amp;gt;&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/div>&lt;h2 id="callouts">Callouts&lt;/h2>
&lt;p>Use &lt;a href="https://docs.hugoblox.com/reference/markdown/#callouts">callouts&lt;/a> (aka &lt;em>asides&lt;/em>, &lt;em>hints&lt;/em>, or &lt;em>alerts&lt;/em>) to draw attention to notes, tips, and warnings.&lt;/p>
&lt;p>By wrapping a paragraph in &lt;code>{{% callout note %}} ... {{% /callout %}}&lt;/code>, it will render as an aside.&lt;/p>
&lt;div class="highlight">&lt;pre tabindex="0" class="chroma">&lt;code class="language-markdown" data-lang="markdown">&lt;span class="line">&lt;span class="cl">{{% callout note %}}
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">A Markdown aside is useful for displaying notices, hints, or definitions to your readers.
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">{{% /callout %}}
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/div>&lt;p>renders as&lt;/p>
&lt;div class="flex px-4 py-3 mb-6 rounded-md bg-primary-100 dark:bg-primary-900">
&lt;span class="pr-3 pt-1 text-primary-600 dark:text-primary-300">
&lt;svg height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">&lt;path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m11.25 11.25l.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0a9 9 0 0 1 18 0m-9-3.75h.008v.008H12z"/>&lt;/svg>
&lt;/span>
&lt;span class="dark:text-neutral-300">A Markdown aside is useful for displaying notices, hints, or definitions to your readers.&lt;/span>
&lt;/div>
&lt;p>Or use the &lt;code>warning&lt;/code> callout type so your readers don&amp;rsquo;t miss critical details:&lt;/p>
&lt;div class="flex px-4 py-3 mb-6 rounded-md bg-yellow-100 dark:bg-yellow-900">
&lt;span class="pr-3 pt-1 text-red-400">
&lt;svg height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">&lt;path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0zM12 15.75h.007v.008H12z"/>&lt;/svg>
&lt;/span>
&lt;span class="dark:text-neutral-300">A Markdown aside is useful for displaying notices, hints, or definitions to your readers.&lt;/span>
&lt;/div>
&lt;h2 id="did-you-find-this-page-helpful-consider-sharing-it-">Did you find this page helpful? Consider sharing it 🙌&lt;/h2></description></item><item><title>📈 Communicate your results effectively with the best data visualizations</title><link>https://lxk-221.github.io/post/data-visualization/</link><pubDate>Wed, 25 Oct 2023 00:00:00 +0000</pubDate><guid>https://lxk-221.github.io/post/data-visualization/</guid><description>&lt;p>Hugo Blox is designed to give technical content creators a seamless experience. You can focus on the content and Hugo Blox handles the rest.&lt;/p>
&lt;p>Use popular tools such as Plotly, Mermaid, and data frames.&lt;/p>
&lt;h2 id="charts">Charts&lt;/h2>
&lt;p>Hugo Blox supports the popular &lt;a href="https://plot.ly/">Plotly&lt;/a> format for interactive data visualizations. With Plotly, you can design almost any kind of visualization you can imagine!&lt;/p>
&lt;p>Save your Plotly JSON in your page folder, for example &lt;code>line-chart.json&lt;/code>, and then add the &lt;code>{{&amp;lt; chart data=&amp;quot;line-chart&amp;quot; &amp;gt;}}&lt;/code> shortcode where you would like the chart to appear.&lt;/p>
&lt;p>Demo:&lt;/p>
&lt;div id="chart-836792541" class="chart">&lt;/div>
&lt;script>
async function fetchChartJSON() {
console.debug('Hugo Blox fetching chart JSON...')
const response = await fetch('.\/line-chart.json');
return await response.json();
}
(function() {
let a = setInterval( function() {
if ( typeof window.Plotly === 'undefined' ) {
console.debug('Plotly not loaded yet...')
return;
}
clearInterval( a );
fetchChartJSON().then(chart => {
console.debug('Plotting chart...')
window.Plotly.newPlot('chart-836792541', chart.data, chart.layout, {responsive: true});
});
}, 500 );
})();
&lt;/script>
&lt;p>You might also find the &lt;a href="http://plotly-json-editor.getforge.io/">Plotly JSON Editor&lt;/a> useful.&lt;/p>
&lt;h2 id="diagrams">Diagrams&lt;/h2>
&lt;p>Hugo Blox supports the &lt;em>Mermaid&lt;/em> Markdown extension for diagrams.&lt;/p>
&lt;p>An example &lt;strong>flowchart&lt;/strong>:&lt;/p>
&lt;pre>&lt;code>```mermaid
graph TD
A[Hard] --&amp;gt;|Text| B(Round)
B --&amp;gt; C{Decision}
C --&amp;gt;|One| D[Result 1]
C --&amp;gt;|Two| E[Result 2]
```
&lt;/code>&lt;/pre>
&lt;p>renders as&lt;/p>
&lt;div class="highlight">&lt;pre tabindex="0" class="chroma">&lt;code class="language-fallback" data-lang="fallback">&lt;span class="line">&lt;span class="cl">graph TD
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">A[Hard] --&amp;gt;|Text| B(Round)
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">B --&amp;gt; C{Decision}
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">C --&amp;gt;|One| D[Result 1]
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">C --&amp;gt;|Two| E[Result 2]
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/div>&lt;p>An example &lt;strong>sequence diagram&lt;/strong>:&lt;/p>
&lt;pre>&lt;code>```mermaid
sequenceDiagram
Alice-&amp;gt;&amp;gt;John: Hello John, how are you?
loop Healthcheck
John-&amp;gt;&amp;gt;John: Fight against hypochondria
end
Note right of John: Rational thoughts!
John--&amp;gt;&amp;gt;Alice: Great!
John-&amp;gt;&amp;gt;Bob: How about you?
Bob--&amp;gt;&amp;gt;John: Jolly good!
```
&lt;/code>&lt;/pre>
&lt;p>renders as&lt;/p>
&lt;div class="highlight">&lt;pre tabindex="0" class="chroma">&lt;code class="language-fallback" data-lang="fallback">&lt;span class="line">&lt;span class="cl">sequenceDiagram
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">Alice-&amp;gt;&amp;gt;John: Hello John, how are you?
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">loop Healthcheck
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> John-&amp;gt;&amp;gt;John: Fight against hypochondria
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">end
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">Note right of John: Rational thoughts!
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">John--&amp;gt;&amp;gt;Alice: Great!
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">John-&amp;gt;&amp;gt;Bob: How about you?
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">Bob--&amp;gt;&amp;gt;John: Jolly good!
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/div>&lt;p>An example &lt;strong>class diagram&lt;/strong>:&lt;/p>
&lt;pre>&lt;code>```mermaid
classDiagram
Class01 &amp;lt;|-- AveryLongClass : Cool
Class03 *-- Class04
Class05 o-- Class06
Class07 .. Class08
Class09 --&amp;gt; C2 : Where am i?
Class09 --* C3
Class09 --|&amp;gt; Class07
Class07 : equals()
Class07 : Object[] elementData
Class01 : size()
Class01 : int chimp
Class01 : int gorilla
Class08 &amp;lt;--&amp;gt; C2: Cool label
```
&lt;/code>&lt;/pre>
&lt;p>renders as&lt;/p>
&lt;div class="highlight">&lt;pre tabindex="0" class="chroma">&lt;code class="language-fallback" data-lang="fallback">&lt;span class="line">&lt;span class="cl">classDiagram
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">Class01 &amp;lt;|-- AveryLongClass : Cool
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">Class03 *-- Class04
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">Class05 o-- Class06
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">Class07 .. Class08
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">Class09 --&amp;gt; C2 : Where am i?
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">Class09 --* C3
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">Class09 --|&amp;gt; Class07
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">Class07 : equals()
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">Class07 : Object[] elementData
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">Class01 : size()
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">Class01 : int chimp
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">Class01 : int gorilla
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">Class08 &amp;lt;--&amp;gt; C2: Cool label
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/div>&lt;p>An example &lt;strong>state diagram&lt;/strong>:&lt;/p>
&lt;pre>&lt;code>```mermaid
stateDiagram
[*] --&amp;gt; Still
Still --&amp;gt; [*]
Still --&amp;gt; Moving
Moving --&amp;gt; Still
Moving --&amp;gt; Crash
Crash --&amp;gt; [*]
```
&lt;/code>&lt;/pre>
&lt;p>renders as&lt;/p>
&lt;div class="highlight">&lt;pre tabindex="0" class="chroma">&lt;code class="language-fallback" data-lang="fallback">&lt;span class="line">&lt;span class="cl">stateDiagram
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">[*] --&amp;gt; Still
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">Still --&amp;gt; [*]
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">Still --&amp;gt; Moving
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">Moving --&amp;gt; Still
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">Moving --&amp;gt; Crash
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">Crash --&amp;gt; [*]
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/div>&lt;h2 id="data-frames">Data Frames&lt;/h2>
&lt;p>Save your spreadsheet as a CSV file in your page&amp;rsquo;s folder and then render it by adding the &lt;em>Table&lt;/em> shortcode to your page:&lt;/p>
&lt;div class="highlight">&lt;pre tabindex="0" class="chroma">&lt;code class="language-go" data-lang="go">&lt;span class="line">&lt;span class="cl">&lt;span class="p">{{&amp;lt;&lt;/span> &lt;span class="nx">table&lt;/span> &lt;span class="nx">path&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="s">&amp;#34;results.csv&amp;#34;&lt;/span> &lt;span class="nx">header&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="s">&amp;#34;true&amp;#34;&lt;/span> &lt;span class="nx">caption&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="s">&amp;#34;Table 1: My results&amp;#34;&lt;/span> &lt;span class="p">&amp;gt;}}&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/div>&lt;p>renders as&lt;/p>
&lt;table class="table-auto w-full">
&lt;thead>
&lt;tr> &lt;th class="border-b dark:border-slate-600 font-medium p-4 pt-0 pb-3 text-slate-400 dark:text-slate-200 text-left">customer_id&lt;/th> &lt;th class="border-b dark:border-slate-600 font-medium p-4 pt-0 pb-3 text-slate-400 dark:text-slate-200 text-left">score&lt;/th> &lt;/tr>
&lt;/thead>
&lt;tbody>
&lt;tr>
&lt;td data-table-dtype="number" class="border-b border-slate-100 dark:border-slate-700 p-4 text-slate-500 dark:text-slate-400">1&lt;/td>
&lt;td data-table-dtype="number" class="border-b border-slate-100 dark:border-slate-700 p-4 text-slate-500 dark:text-slate-400">0&lt;/td>
&lt;/tr>
&lt;tr>
&lt;td data-table-dtype="number" class="border-b border-slate-100 dark:border-slate-700 p-4 text-slate-500 dark:text-slate-400">2&lt;/td>
&lt;td data-table-dtype="text" class="border-b border-slate-100 dark:border-slate-700 p-4 text-slate-500 dark:text-slate-400">0.5&lt;/td>
&lt;/tr>
&lt;tr>
&lt;td data-table-dtype="number" class="border-b border-slate-100 dark:border-slate-700 p-4 text-slate-500 dark:text-slate-400">3&lt;/td>
&lt;td data-table-dtype="number" class="border-b border-slate-100 dark:border-slate-700 p-4 text-slate-500 dark:text-slate-400">1&lt;/td>
&lt;/tr>
&lt;/tbody>
&lt;caption class="table-caption">Table 1: My results&lt;/caption>
&lt;/table>
&lt;h2 id="did-you-find-this-page-helpful-consider-sharing-it-">Did you find this page helpful? Consider sharing it 🙌&lt;/h2></description></item><item><title>👩🏼‍🏫 Teach academic courses</title><link>https://lxk-221.github.io/post/teach-courses/</link><pubDate>Tue, 24 Oct 2023 00:00:00 +0000</pubDate><guid>https://lxk-221.github.io/post/teach-courses/</guid><description>&lt;p>&lt;a href="https://hugoblox.com">Hugo Blox Builder&lt;/a> is designed to give technical content creators a seamless experience. You can focus on the content and the Hugo Blox Builder which this template is built upon handles the rest.&lt;/p>
&lt;p>&lt;strong>Embed videos, podcasts, code, LaTeX math, and even test students!&lt;/strong>&lt;/p>
&lt;p>On this page, you&amp;rsquo;ll find some examples of the types of technical content that can be rendered with Hugo Blox.&lt;/p>
&lt;h2 id="video">Video&lt;/h2>
&lt;p>Teach your course by sharing videos with your students. Choose from one of the following approaches:&lt;/p>
&lt;p>&lt;strong>Youtube&lt;/strong>:&lt;/p>
&lt;pre>&lt;code>{{&amp;lt; youtube D2vj0WcvH5c &amp;gt;}}
&lt;/code>&lt;/pre>
&lt;div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;">
&lt;iframe allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen="allowfullscreen" loading="eager" referrerpolicy="strict-origin-when-cross-origin" src="https://www.youtube.com/embed/D2vj0WcvH5c?autoplay=0&amp;controls=1&amp;end=0&amp;loop=0&amp;mute=0&amp;start=0" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border:0;" title="YouTube video"
>&lt;/iframe>
&lt;/div>
&lt;p>&lt;strong>Bilibili&lt;/strong>:&lt;/p>
&lt;pre>&lt;code>{{&amp;lt; bilibili BV1WV4y1r7DF &amp;gt;}}
&lt;/code>&lt;/pre>
&lt;div class="w-full h-auto aspect-video relative">
&lt;iframe src="//player.bilibili.com/player.html?bvid=BV1WV4y1r7DF&amp;page=1"
allow="accelerometer; clipboard-write; encrypted-media; gyroscope; fullscreen; picture-in-picture;"
class="w-full h-full"
>&lt;/iframe>
&lt;/div>
&lt;p>&lt;strong>Video file&lt;/strong>&lt;/p>
&lt;p>Videos may be added to a page by either placing them in your &lt;code>assets/media/&lt;/code> media library or in your &lt;a href="https://gohugo.io/content-management/page-bundles/">page&amp;rsquo;s folder&lt;/a>, and then embedding them with the &lt;em>video&lt;/em> shortcode:&lt;/p>
&lt;pre>&lt;code>{{&amp;lt; video src=&amp;quot;my_video.mp4&amp;quot; controls=&amp;quot;yes&amp;quot; &amp;gt;}}
&lt;/code>&lt;/pre>
&lt;h2 id="podcast">Podcast&lt;/h2>
&lt;p>You can add a podcast or music to a page by placing the MP3 file in the page&amp;rsquo;s folder or the media library folder and then embedding the audio on your page with the &lt;em>audio&lt;/em> shortcode:&lt;/p>
&lt;pre>&lt;code>{{&amp;lt; audio src=&amp;quot;ambient-piano.mp3&amp;quot; &amp;gt;}}
&lt;/code>&lt;/pre>
&lt;p>Try it out:&lt;/p>
&lt;audio controls >
&lt;source src="https://lxk-221.github.io/post/teach-courses/ambient-piano.mp3" type="audio/mpeg">
&lt;/audio>
&lt;h2 id="test-students">Test students&lt;/h2>
&lt;p>Provide a simple yet fun self-assessment by revealing the solutions to challenges with the &lt;code>spoiler&lt;/code> shortcode:&lt;/p>
&lt;div class="highlight">&lt;pre tabindex="0" class="chroma">&lt;code class="language-markdown" data-lang="markdown">&lt;span class="line">&lt;span class="cl">{{&lt;span class="p">&amp;lt;&lt;/span> &lt;span class="nt">spoiler&lt;/span> &lt;span class="na">text&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="s">&amp;#34;👉 Click to view the solution&amp;#34;&lt;/span> &lt;span class="p">&amp;gt;&lt;/span>}}
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">You found me!
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">{{&lt;span class="p">&amp;lt;&lt;/span> &lt;span class="p">/&lt;/span>&lt;span class="nt">spoiler&lt;/span> &lt;span class="p">&amp;gt;&lt;/span>}}
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/div>&lt;p>renders as&lt;/p>
&lt;details class="spoiler " id="spoiler-3">
&lt;summary class="cursor-pointer">👉 Click to view the solution&lt;/summary>
&lt;div class="rounded-lg bg-neutral-50 dark:bg-neutral-800 p-2">
You found me 🎉
&lt;/div>
&lt;/details>
&lt;h2 id="math">Math&lt;/h2>
&lt;p>Hugo Blox Builder supports a Markdown extension for $\LaTeX$ math. Enable math by setting the &lt;code>math: true&lt;/code> option in your page&amp;rsquo;s front matter, or enable math for your entire site by toggling math in your &lt;code>config/_default/params.yaml&lt;/code> file:&lt;/p>
&lt;div class="highlight">&lt;pre tabindex="0" class="chroma">&lt;code class="language-yaml" data-lang="yaml">&lt;span class="line">&lt;span class="cl">&lt;span class="nt">features&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">math&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="w"> &lt;/span>&lt;span class="nt">enable&lt;/span>&lt;span class="p">:&lt;/span>&lt;span class="w"> &lt;/span>&lt;span class="kc">true&lt;/span>&lt;span class="w">
&lt;/span>&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/div>&lt;p>To render &lt;em>inline&lt;/em> or &lt;em>block&lt;/em> math, wrap your LaTeX math with &lt;code>$...$&lt;/code> or &lt;code>$$...$$&lt;/code>, respectively.&lt;/p>
&lt;p>Example &lt;strong>math block&lt;/strong>:&lt;/p>
&lt;div class="highlight">&lt;pre tabindex="0" class="chroma">&lt;code class="language-latex" data-lang="latex">&lt;span class="line">&lt;span class="cl">&lt;span class="sb">$$&lt;/span>&lt;span class="nb">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="nb">&lt;/span>&lt;span class="nv">\gamma&lt;/span>&lt;span class="nb">_{n} &lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="nb"> &lt;/span>&lt;span class="nv">\frac&lt;/span>&lt;span class="nb">{ &lt;/span>&lt;span class="nv">\left&lt;/span>&lt;span class="nb"> | &lt;/span>&lt;span class="nv">\left&lt;/span>&lt;span class="nb"> &lt;/span>&lt;span class="o">(&lt;/span>&lt;span class="nv">\mathbf&lt;/span>&lt;span class="nb"> x_{n} &lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="nb"> &lt;/span>&lt;span class="nv">\mathbf&lt;/span>&lt;span class="nb"> x_{n&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="m">1&lt;/span>&lt;span class="nb">} &lt;/span>&lt;span class="nv">\right&lt;/span>&lt;span class="nb"> &lt;/span>&lt;span class="o">)&lt;/span>&lt;span class="nb">^T &lt;/span>&lt;span class="nv">\left&lt;/span>&lt;span class="nb"> &lt;/span>&lt;span class="o">[&lt;/span>&lt;span class="nv">\nabla&lt;/span>&lt;span class="nb"> F &lt;/span>&lt;span class="o">(&lt;/span>&lt;span class="nv">\mathbf&lt;/span>&lt;span class="nb"> x_{n}&lt;/span>&lt;span class="o">)&lt;/span>&lt;span class="nb"> &lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="nb"> &lt;/span>&lt;span class="nv">\nabla&lt;/span>&lt;span class="nb"> F &lt;/span>&lt;span class="o">(&lt;/span>&lt;span class="nv">\mathbf&lt;/span>&lt;span class="nb"> x_{n&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="m">1&lt;/span>&lt;span class="nb">}&lt;/span>&lt;span class="o">)&lt;/span>&lt;span class="nb"> &lt;/span>&lt;span class="nv">\right&lt;/span>&lt;span class="nb"> &lt;/span>&lt;span class="o">]&lt;/span>&lt;span class="nb"> &lt;/span>&lt;span class="nv">\right&lt;/span>&lt;span class="nb"> |}{&lt;/span>&lt;span class="nv">\left&lt;/span>&lt;span class="nb"> &lt;/span>&lt;span class="nv">\|\nabla&lt;/span>&lt;span class="nb"> F&lt;/span>&lt;span class="o">(&lt;/span>&lt;span class="nv">\mathbf&lt;/span>&lt;span class="nb">{x}_{n}&lt;/span>&lt;span class="o">)&lt;/span>&lt;span class="nb"> &lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="nb"> &lt;/span>&lt;span class="nv">\nabla&lt;/span>&lt;span class="nb"> F&lt;/span>&lt;span class="o">(&lt;/span>&lt;span class="nv">\mathbf&lt;/span>&lt;span class="nb">{x}_{n&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="m">1&lt;/span>&lt;span class="nb">}&lt;/span>&lt;span class="o">)&lt;/span>&lt;span class="nb"> &lt;/span>&lt;span class="nv">\right&lt;/span>&lt;span class="nb"> &lt;/span>&lt;span class="nv">\|&lt;/span>&lt;span class="nb">^&lt;/span>&lt;span class="m">2&lt;/span>&lt;span class="nb">}
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="nb">&lt;/span>&lt;span class="s">$$&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/div>&lt;p>renders as&lt;/p>
$$\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}$$
&lt;p>Example &lt;strong>inline math&lt;/strong> &lt;code>$\nabla F(\mathbf{x}_{n})$&lt;/code> renders as $\nabla F(\mathbf{x}_{n})$.&lt;/p>
&lt;p>Example &lt;strong>multi-line math&lt;/strong> using the math linebreak (&lt;code>\\&lt;/code>):&lt;/p>
&lt;div class="highlight">&lt;pre tabindex="0" class="chroma">&lt;code class="language-latex" data-lang="latex">&lt;span class="line">&lt;span class="cl">&lt;span class="sb">$$&lt;/span>&lt;span class="nb">f&lt;/span>&lt;span class="o">(&lt;/span>&lt;span class="nb">k;p_{&lt;/span>&lt;span class="m">0&lt;/span>&lt;span class="nb">}^{&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="nb">}&lt;/span>&lt;span class="o">)&lt;/span>&lt;span class="nb"> &lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="nb"> &lt;/span>&lt;span class="nv">\begin&lt;/span>&lt;span class="nb">{cases}p_{&lt;/span>&lt;span class="m">0&lt;/span>&lt;span class="nb">}^{&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="nb">} &amp;amp; &lt;/span>&lt;span class="nv">\text&lt;/span>&lt;span class="nb">{if }k&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="m">1&lt;/span>&lt;span class="nb">, &lt;/span>&lt;span class="nv">\\&lt;/span>&lt;span class="nb">
&lt;/span>&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="nb">&lt;/span>&lt;span class="m">1&lt;/span>&lt;span class="o">-&lt;/span>&lt;span class="nb">p_{&lt;/span>&lt;span class="m">0&lt;/span>&lt;span class="nb">}^{&lt;/span>&lt;span class="o">*&lt;/span>&lt;span class="nb">} &amp;amp; &lt;/span>&lt;span class="nv">\text&lt;/span>&lt;span class="nb">{if }k&lt;/span>&lt;span class="o">=&lt;/span>&lt;span class="m">0&lt;/span>&lt;span class="nb">.&lt;/span>&lt;span class="nv">\end&lt;/span>&lt;span class="nb">{cases}&lt;/span>&lt;span class="s">$$&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/div>&lt;p>renders as&lt;/p>
$$
f(k;p_{0}^{*}) = \begin{cases}p_{0}^{*} &amp; \text{if }k=1, \\
1-p_{0}^{*} &amp; \text{if }k=0.\end{cases}
$$
&lt;h2 id="code">Code&lt;/h2>
&lt;p>Hugo Blox Builder utilises Hugo&amp;rsquo;s Markdown extension for highlighting code syntax. The code theme can be selected in the &lt;code>config/_default/params.yaml&lt;/code> file.&lt;/p>
&lt;pre>&lt;code>```python
import pandas as pd
data = pd.read_csv(&amp;quot;data.csv&amp;quot;)
data.head()
```
&lt;/code>&lt;/pre>
&lt;p>renders as&lt;/p>
&lt;div class="highlight">&lt;pre tabindex="0" class="chroma">&lt;code class="language-python" data-lang="python">&lt;span class="line">&lt;span class="cl">&lt;span class="kn">import&lt;/span> &lt;span class="nn">pandas&lt;/span> &lt;span class="k">as&lt;/span> &lt;span class="nn">pd&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">data&lt;/span> &lt;span class="o">=&lt;/span> &lt;span class="n">pd&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">read_csv&lt;/span>&lt;span class="p">(&lt;/span>&lt;span class="s2">&amp;#34;data.csv&amp;#34;&lt;/span>&lt;span class="p">)&lt;/span>
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="n">data&lt;/span>&lt;span class="o">.&lt;/span>&lt;span class="n">head&lt;/span>&lt;span class="p">()&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/div>&lt;h2 id="inline-images">Inline Images&lt;/h2>
&lt;div class="highlight">&lt;pre tabindex="0" class="chroma">&lt;code class="language-go" data-lang="go">&lt;span class="line">&lt;span class="cl">&lt;span class="p">{{&amp;lt;&lt;/span> &lt;span class="nx">icon&lt;/span> &lt;span class="nx">name&lt;/span>&lt;span class="p">=&lt;/span>&lt;span class="s">&amp;#34;python&amp;#34;&lt;/span> &lt;span class="p">&amp;gt;}}&lt;/span> &lt;span class="nx">Python&lt;/span>
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/div>&lt;p>renders as&lt;/p>
&lt;p>
&lt;span class="inline-block pr-1">
&lt;svg style="height: 1em; transform: translateY(0.1em);" xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 448 512" fill="currentColor">&lt;path d="M439.8 200.5c-7.7-30.9-22.3-54.2-53.4-54.2h-40.1v47.4c0 36.8-31.2 67.8-66.8 67.8H172.7c-29.2 0-53.4 25-53.4 54.3v101.8c0 29 25.2 46 53.4 54.3 33.8 9.9 66.3 11.7 106.8 0 26.9-7.8 53.4-23.5 53.4-54.3v-40.7H226.2v-13.6h160.2c31.1 0 42.6-21.7 53.4-54.2 11.2-33.5 10.7-65.7 0-108.6zM286.2 404c11.1 0 20.1 9.1 20.1 20.3 0 11.3-9 20.4-20.1 20.4-11 0-20.1-9.2-20.1-20.4.1-11.3 9.1-20.3 20.1-20.3zM167.8 248.1h106.8c29.7 0 53.4-24.5 53.4-54.3V91.9c0-29-24.4-50.7-53.4-55.6-35.8-5.9-74.7-5.6-106.8.1-45.2 8-53.4 24.7-53.4 55.6v40.7h106.9v13.6h-147c-31.1 0-58.3 18.7-66.8 54.2-9.8 40.7-10.2 66.1 0 108.6 7.6 31.6 25.7 54.2 56.8 54.2H101v-48.8c0-35.3 30.5-66.4 66.8-66.4zm-6.7-142.6c-11.1 0-20.1-9.1-20.1-20.3.1-11.3 9-20.4 20.1-20.4 11 0 20.1 9.2 20.1 20.4s-9 20.3-20.1 20.3z"/>&lt;/svg>
&lt;/span> Python&lt;/p>
&lt;h2 id="did-you-find-this-page-helpful-consider-sharing-it-">Did you find this page helpful? Consider sharing it 🙌&lt;/h2></description></item><item><title>Experience</title><link>https://lxk-221.github.io/experience/</link><pubDate>Tue, 24 Oct 2023 00:00:00 +0000</pubDate><guid>https://lxk-221.github.io/experience/</guid><description/></item><item><title>✅ Manage your projects</title><link>https://lxk-221.github.io/post/project-management/</link><pubDate>Mon, 23 Oct 2023 00:00:00 +0000</pubDate><guid>https://lxk-221.github.io/post/project-management/</guid><description>&lt;p>Easily manage your projects - create ideation mind maps, Gantt charts, todo lists, and more!&lt;/p>
&lt;h2 id="ideation">Ideation&lt;/h2>
&lt;p>Hugo Blox supports a Markdown extension for mindmaps.&lt;/p>
&lt;p>Simply insert a Markdown code block labelled as &lt;code>markmap&lt;/code> and optionally set the height of the mindmap as shown in the example below.&lt;/p>
&lt;p>Mindmaps can be created by simply writing the items as a Markdown list within the &lt;code>markmap&lt;/code> code block, indenting each item to create as many sub-levels as you need:&lt;/p>
&lt;div class="highlight">
&lt;pre class="chroma">
&lt;code>
```markmap {height="200px"}
- Hugo Modules
- Hugo Blox
- blox-plugins-netlify
- blox-plugins-netlify-cms
- blox-plugins-reveal
```
&lt;/code>
&lt;/pre>
&lt;/div>
&lt;p>renders as&lt;/p>
&lt;div class="markmap" style="height: 200px;">
&lt;pre>- Hugo Modules
- Hugo Blox
- blox-plugins-netlify
- blox-plugins-netlify-cms
- blox-plugins-reveal&lt;/pre>
&lt;/div>
&lt;h2 id="diagrams">Diagrams&lt;/h2>
&lt;p>Hugo Blox supports the &lt;em>Mermaid&lt;/em> Markdown extension for diagrams.&lt;/p>
&lt;p>An example &lt;strong>Gantt diagram&lt;/strong>:&lt;/p>
&lt;pre>&lt;code>```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
```
&lt;/code>&lt;/pre>
&lt;p>renders as&lt;/p>
&lt;div class="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
&lt;/div>
&lt;h2 id="todo-lists">Todo lists&lt;/h2>
&lt;p>You can even write your todo lists in Markdown too:&lt;/p>
&lt;div class="highlight">&lt;pre tabindex="0" class="chroma">&lt;code class="language-markdown" data-lang="markdown">&lt;span class="line">&lt;span class="cl">&lt;span class="k">- [x]&lt;/span> Write math example
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl"> &lt;span class="k">- [x]&lt;/span> Write diagram example
&lt;/span>&lt;/span>&lt;span class="line">&lt;span class="cl">&lt;span class="k">- [ ]&lt;/span> Do something else
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/div>&lt;p>renders as&lt;/p>
&lt;ul>
&lt;li>&lt;input checked="" disabled="" type="checkbox"> Write math example
&lt;ul>
&lt;li>&lt;input checked="" disabled="" type="checkbox"> Write diagram example&lt;/li>
&lt;/ul>
&lt;/li>
&lt;li>&lt;input disabled="" type="checkbox"> Do something else&lt;/li>
&lt;/ul>
&lt;h2 id="did-you-find-this-page-helpful-consider-sharing-it-">Did you find this page helpful? Consider sharing it 🙌&lt;/h2></description></item><item><title>BIM-based Robot</title><link>https://lxk-221.github.io/project/008.bim-based-robot/</link><pubDate>Fri, 01 Sep 2023 00:00:00 +0000</pubDate><guid>https://lxk-221.github.io/project/008.bim-based-robot/</guid><description>&lt;h2 id="overview">Overview&lt;/h2>
&lt;p>This research uses Building Information Modeling(BIM) information in 2D Simultaneous Localization and Mapping(SLAM). In this project, the robot uses the information from BIM to generate a 2D map as prior knowledge of the building. Then the mobile robot uses this global map for initial localization and path planning, which can be a coverage path for map updating or a path to a target position. Besides, the mobile robot can update this prior map based on its following exploration. In conclusion, the advantage of this method is that it can help the robot reach its desired target without generating a map first. Instead, the robot can reach the desired position based on prior knowledge and update the map while moving.&lt;/p>
&lt;p>The SLAM approach used in this project is based on Cartographer, and the method is tested in simulation in Gazebo with some random obstacles. All the work was done by myself.&lt;/p>
&lt;h2 id="abstract">Abstract&lt;/h2>
&lt;p>Construction robots don&amp;rsquo;t have the global information of the building unless they are allowed to build a map by SLAM in advance, which is time-consuming and prevents construction robots from making global plan for the task. At the same time, Building Information Modeling (BIM) is a digitalization and standardization of the building information. With the existing of BIM, the building interior in construction scenes is actually semi-unknown instead of totally unknown. In this research, we proposed a pipeline to transform the BIM to a 2D ideal map. Then, we combined the 2D ideal map and SLAM together for robot navigation. By using this ideal 2D map as the initial global map of the robot, the robot can obtain global information about the interior of the building, thus saving the time and inhance the efficiency.&lt;/p>
&lt;h2 id="piepline">Piepline&lt;/h2>
&lt;p>This figure shows the pipline of data transformation.
&lt;figure id="figure-data-transform-pipeline">
&lt;div class="flex justify-center ">
&lt;div class="w-100" >&lt;img src="https://lxk-221.github.io/media/projects/bim-robot/Pipeline.png" alt="screen reader text" loading="lazy" data-zoomable />&lt;/div>
&lt;/div>&lt;figcaption>
Data Transform Pipeline
&lt;/figcaption>&lt;/figure>
&lt;/p>
&lt;p>This figure shows the building in the form of obj.
&lt;figure id="figure-mesh">
&lt;div class="flex justify-center ">
&lt;div class="w-100" >&lt;img src="https://lxk-221.github.io/media/projects/bim-robot/mesh.png" alt="screen reader text" loading="lazy" data-zoomable />&lt;/div>
&lt;/div>&lt;figcaption>
Mesh
&lt;/figcaption>&lt;/figure>
&lt;/p>
&lt;p>This figure shows the building in the form of Octree.
&lt;figure id="figure-octree">
&lt;div class="flex justify-center ">
&lt;div class="w-100" >&lt;img src="https://lxk-221.github.io/media/projects/bim-robot/Octree.png" alt="screen reader text" loading="lazy" data-zoomable />&lt;/div>
&lt;/div>&lt;figcaption>
Octree
&lt;/figcaption>&lt;/figure>
&lt;/p>
&lt;h2 id="simulation">Simulation&lt;/h2>
&lt;p>This figure shows different map in SLAM.&lt;/p>
&lt;p>
&lt;figure id="figure-map-information">
&lt;div class="flex justify-center ">
&lt;div class="w-100" >&lt;img src="https://lxk-221.github.io/media/projects/bim-robot/map.png" alt="screen reader text" loading="lazy" data-zoomable />&lt;/div>
&lt;/div>&lt;figcaption>
Map Information
&lt;/figcaption>&lt;/figure>
&lt;/p>
&lt;p>As shown in this figure, although our robot was new in the environment, it had the global information about the building according to the global costmap, which is generated from the 2D ideal map by the layered costmap structure.
The largest box shows the global costmap, and the second large box shows the information from the sensor. And the smallest box shows the local costmap.&lt;/p>
&lt;p>
&lt;figure id="figure-right-global-path">
&lt;div class="flex justify-center ">
&lt;div class="w-100" >&lt;img src="https://lxk-221.github.io/media/projects/bim-robot/Global.png" alt="screen reader text" loading="lazy" data-zoomable />&lt;/div>
&lt;/div>&lt;figcaption>
Right Global Path
&lt;/figcaption>&lt;/figure>
&lt;/p>
&lt;p>This figure shows that the robot can generate a right path to the target although the sensor doesn&amp;rsquo;t have any information around the target point.&lt;/p>
&lt;p>
&lt;figure id="figure-right-local-path">
&lt;div class="flex justify-center ">
&lt;div class="w-100" >&lt;img src="https://lxk-221.github.io/media/projects/bim-robot/Local.png" alt="screen reader text" loading="lazy" data-zoomable />&lt;/div>
&lt;/div>&lt;figcaption>
Right Local Path
&lt;/figcaption>&lt;/figure>
&lt;/p>
&lt;p>This figureshows that the robot can change its local path according to the local cost map, to avoid the crush between itself and the obstacles.&lt;/p>
&lt;p>
&lt;figure id="figure-arrive-any-target">
&lt;div class="flex justify-center ">
&lt;div class="w-100" >&lt;img src="https://lxk-221.github.io/media/projects/bim-robot/Target.png" alt="screen reader text" loading="lazy" data-zoomable />&lt;/div>
&lt;/div>&lt;figcaption>
Arrive Any Target
&lt;/figcaption>&lt;/figure>
&lt;/p>
&lt;p>This figure shows that the robot can arrive any target point on this specific floor in the building.&lt;/p>
&lt;h2 id="conclusion">Conclusion&lt;/h2>
&lt;p>In this paper, we proposed a pipeline to transform the BIM to a 2D ideal map, and then we used the 2D ideal to navigate the robot thus saving the time for building a map by SLAM in construction scenes. In the future, we will try to use more semantic information and lifecycle information in BIM to help robot finish its task.&lt;/p></description></item><item><title>Painting Robot</title><link>https://lxk-221.github.io/project/009.painting-robot/</link><pubDate>Fri, 01 Sep 2023 00:00:00 +0000</pubDate><guid>https://lxk-221.github.io/project/009.painting-robot/</guid><description>&lt;h2 id="overview">Overview&lt;/h2>
&lt;p>This project is the topic of my Master&amp;rsquo;s thesis.&lt;/p>
&lt;p>In construction spraying operations, spray robots offer significant advantages over manual labor. However, to meet the high precision required, spray robots must accurately perceive large-scale objects. Additionally, the demands of the spraying process require that spray robots incorporate new procedural constraints into their path planning for wall coverage painting. This research mainly addresses the following two issues:&lt;/p>
&lt;ol>
&lt;li>Full-coverage spray trajectory planning considering robot reachability constraints.&lt;/li>
&lt;li>Easy-to-deploy and verifiable algorithms across systems and platforms. Integrated spraying software combined with specific hardware.&lt;/li>
&lt;/ol>
&lt;h2 id="robot-model">Robot Model&lt;/h2>
&lt;p>
&lt;figure >
&lt;div class="flex justify-center ">
&lt;div class="w-100" >&lt;img src="https://lxk-221.github.io/media/projects/painting-robot/PaintingRobot_SW.png" alt="SolidWorks Model" loading="lazy" data-zoomable />&lt;/div>
&lt;/div>&lt;/figure>
&lt;/p>
&lt;h2 id="perception">Perception&lt;/h2>
&lt;p>Initially, we used a region-growing based method for perception, projecting the wall surface onto a 2D plane. This approach effectively transitioned the problem from 3D coverage path planning to 2D coverage path planning.&lt;/p>
&lt;p>However, we discovered that this method was inadequate for handling tasks involving corners and curved surfaces. Therefore, we are now exploring a slicing-based method to address these challenges.&lt;/p>
&lt;h2 id="slicing-based-painting-point-generation">Slicing-Based Painting Point Generation&lt;/h2>
&lt;p>The slicing-based painting point generation method uses a series of parallel planes to slice the area to be painted. This approach is commonly used in workpiece spraying. However, in construction spraying, the robot&amp;rsquo;s spraying range changes from known mesh files to perceived point cloud files, so the painting point generation method needs to be improved.
&lt;figure >
&lt;div class="flex justify-center ">
&lt;div class="w-100" >&lt;img src="https://lxk-221.github.io/media/projects/painting-robot/painting_point_generation.png" alt="Painting Point Generation" loading="lazy" data-zoomable />&lt;/div>
&lt;/div>&lt;/figure>
&lt;/p>
&lt;h2 id="painting-reachability-map-based-trajectory-optimization">Painting Reachability Map Based Trajectory Optimization&lt;/h2>
&lt;p>This paper proposes a Compact Reach Map and a Painting Reach Map, and formulates the spray trajectory generation problem as an optimization problem based on these two maps.&lt;/p>
&lt;h3 id="compact-reach-map">Compact Reach Map&lt;/h3>
&lt;p>
&lt;figure >
&lt;div class="flex justify-center ">
&lt;div class="w-100" >&lt;img src="https://lxk-221.github.io/media/projects/painting-robot/compact_reach_map.png" alt="Compact Reach Map" loading="lazy" data-zoomable />&lt;/div>
&lt;/div>&lt;/figure>
&lt;/p>
&lt;h3 id="painting-reach-map">Painting Reach Map&lt;/h3>
&lt;p>
&lt;figure >
&lt;div class="flex justify-center ">
&lt;div class="w-100" >&lt;img src="https://lxk-221.github.io/media/projects/painting-robot/painting_reach_map.png" alt="Painting Reach Map" loading="lazy" data-zoomable />&lt;/div>
&lt;/div>&lt;/figure>
&lt;/p>
&lt;h3 id="optimization">Optimization&lt;/h3>
&lt;p>Combining the constraints of the Painting Reach Map, the trajectory generation can be formulated as a convex optimization problem for solution.
&lt;figure >
&lt;div class="flex justify-center ">
&lt;div class="w-100" >&lt;img src="https://lxk-221.github.io/media/projects/painting-robot/simulation_result.png" alt="Simulation Result (with doors and windows)" loading="lazy" data-zoomable />&lt;/div>
&lt;/div>&lt;/figure>
&lt;/p>
&lt;h2 id="project-status">Project Status&lt;/h2>
&lt;p>This project is still in progress&amp;hellip;&lt;/p>
&lt;h2 id="experiments">Experiments&lt;/h2>
&lt;p>
&lt;figure id="figure-latex-paint-hanging-test">
&lt;div class="flex justify-center ">
&lt;div class="w-100" >&lt;img src="https://lxk-221.github.io/media/projects/painting-robot/single-spray.gif" alt="Latex Paint Hanging Test" loading="lazy" data-zoomable />&lt;/div>
&lt;/div>&lt;figcaption>
Latex Paint Hanging Test
&lt;/figcaption>&lt;/figure>
&lt;figure id="figure-wide-range">
&lt;div class="flex justify-center ">
&lt;div class="w-100" >&lt;img src="https://lxk-221.github.io/media/projects/painting-robot/wide-range.gif" alt="Wide Range" loading="lazy" data-zoomable />&lt;/div>
&lt;/div>&lt;figcaption>
Wide Range
&lt;/figcaption>&lt;/figure>
&lt;/p></description></item><item><title>Racing Robot</title><link>https://lxk-221.github.io/project/005.racing-robot/</link><pubDate>Fri, 01 Sep 2023 00:00:00 +0000</pubDate><guid>https://lxk-221.github.io/project/005.racing-robot/</guid><description>&lt;h2 id="overview">Overview&lt;/h2>
&lt;p>This project aims to participate in a robot racing competition. In the competition, the robot is asked to finish the track and hit the target at the destination without getting into the black area as fast as possible.
Robots are requested to use a humanoid robot with an omnidirectional chassis comprising three Mecanum wheels and a webcam on its backpack. All programs were running on a Raspberry Pi 4B in the backpack.&lt;/p>
&lt;p>In this project, I was responsible for the simulation, vision, and control algorithm. I built a simulation environment in the V-REP simulator, tested an edge detection-based method for track detection, and used vision-based PD control for the chassis. Besides, we use Keras and TensorFlow to solve a classified problem and rotate the robot in the right direction since the robot is placed in a random direction at the starting point.&lt;/p>
&lt;h2 id="simulation">Simulation&lt;/h2>
&lt;p>We first built a simulation environment in V-REP to test our algorithm, we used a remote Python API for V-REP to get simulation data from the virtual camera and control the robot&amp;rsquo;s motors according to our algorithm. The field of view of the real webcam is tested to guarantee that the virtual camera has similar parameters to the real one.&lt;/p>
&lt;h2 id="real-robot">Real Robot&lt;/h2>
&lt;p>The original position of the webcam is too high to get enough information on the ground in front of the robot. So we used a 3D printer to create an adjustable-angle camera mount, allowing it to tilt downwards to overlook the ground. To increase the friction of the wheels, we tried a new material for molding the tire and did some tests on the real robot.&lt;/p>
&lt;h2 id="video-of-test">Video of test&lt;/h2>
&lt;p>This video shows the whole process of the competition. As we can see, the robot starts with different orientations, then it classifies the command into three classes, namely left, right, and forward, according to the picture from the webcam. For the left or right command, the robot turns left or right with a specific angle. For the forward command, the robot starts to control its chassis with an edge detection-based PD control. The visual algorithm can be robust even when faced with camouflage plots. Finally, the robot uses an arc detection-based method to estimate the distance to the target and decelerate while adjusting its orientation.&lt;/p>
&lt;div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;">
&lt;iframe allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen="allowfullscreen" loading="eager" referrerpolicy="strict-origin-when-cross-origin" src="https://www.youtube.com/embed/cpf3xdfruAY?autoplay=0&amp;controls=1&amp;end=0&amp;loop=0&amp;mute=0&amp;start=0" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border:0;" title="YouTube video"
>&lt;/iframe>
&lt;/div>
&lt;!--
&lt;div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;">
&lt;iframe allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen="allowfullscreen" loading="eager" referrerpolicy="strict-origin-when-cross-origin" src="https://www.youtube.com/embed/L-4Lpmt8hqk?autoplay=0&amp;controls=1&amp;end=0&amp;loop=0&amp;mute=0&amp;start=0" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border:0;" title="YouTube video"
>&lt;/iframe>
&lt;/div>
--></description></item><item><title>Transport Robot</title><link>https://lxk-221.github.io/project/006.transport-robot/</link><pubDate>Fri, 01 Sep 2023 00:00:00 +0000</pubDate><guid>https://lxk-221.github.io/project/006.transport-robot/</guid><description>&lt;h2 id="overview">Overview&lt;/h2>
&lt;p>This project aims to make a lightweight transport robot for a material-carrying competition. Robots are asked to catch materials from several specific positions and carry them to some other positions. The more accurately the materials are placed, and the more materials are handled, the shorter the time used, resulting in a higher score. In this project, a mobile robot with a lightweight arm is designed, and two 2D cameras are used, which are mounted on the end effector of the arm and the side of the robot chassis, respectively. We use a visual serving strategy to adjust our arm to guarantee the accuracy of placing.&lt;/p>
&lt;p>In this project, I was responsible for the control of the chassis, arm, and camera. I use a RANSAC-based method to detect the target and do a close-loop control for placing action. I also participated in the design of the robot, including the layout, the type of arm selected, and the carrying strategy.&lt;/p>
&lt;h2 id="description-of-the-task">Description of the Task&lt;/h2>
&lt;p>Several materials in three colors—red, green, and blue—are arranged in different positions on the shelf. Besides, there are the same number of QR codes on the shelf as the number of materials, each QR code represents the target position of the material. With all this information, the robot should first grasp these materials onto the robot, and carry them to the desired position.&lt;/p>
&lt;p>Besides, black grids on the ground allow us to use grayscale sensors for the robot&amp;rsquo;s localization.&lt;/p>
&lt;p>For the placement, we use a RANSAC-based method to detect the center of the target position according to the camera mounted on the end effector.&lt;/p>
&lt;h2 id="final-version-of-our-robot">Final Version of Our Robot&lt;/h2>
&lt;p>This video shows the whole process of the competition, as we can see, the robot uses a visual serving strategy to adjust the end effector and achieve precise placement.
&lt;div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;">
&lt;iframe allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen="allowfullscreen" loading="eager" referrerpolicy="strict-origin-when-cross-origin" src="https://www.youtube.com/embed/XEpZW4rSB-8?autoplay=0&amp;controls=1&amp;end=0&amp;loop=0&amp;mute=0&amp;start=0" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border:0;" title="YouTube video"
>&lt;/iframe>
&lt;/div>
&lt;/p>
&lt;h2 id="group-and-team">Group and Team&lt;/h2>
&lt;p>
&lt;figure id="figure-team">
&lt;div class="flex justify-center ">
&lt;div class="w-100" >&lt;img src="https://lxk-221.github.io/media/projects/transport-robot/Team.jpg" alt="screen reader text" loading="lazy" data-zoomable />&lt;/div>
&lt;/div>&lt;figcaption>
Team
&lt;/figcaption>&lt;/figure>
&lt;figure id="figure-group">
&lt;div class="flex justify-center ">
&lt;div class="w-100" >&lt;img src="https://lxk-221.github.io/media/projects/transport-robot/Large_Team.jpg" alt="screen reader text" loading="lazy" data-zoomable />&lt;/div>
&lt;/div>&lt;figcaption>
Group
&lt;/figcaption>&lt;/figure>
&lt;/p></description></item></channel></rss>