DEV Community: Jack Lin

ESP32 Weather Dashboard with a WiFi Menu

Jack Lin — Wed, 08 Jan 2025 09:14:41 +0000

I first made this project using Raspberry Pi Zero and Python (link), and then I re-made it using ESP32 and Arduino. My weather dashboard shows the current weather and a bar chart of 5-day high and low temperatures. There's also a menu interface for switching Wi-Fi connections.

Hardware setup: ESP32 paired with a Nextion NX8048T050 HMI touchscreen display on UART2.

Features:

Weather data fetching from Open-Meteo API
Utilizes WiFi library for network connection management
Utilizes Nextion GUI designing commands to draw a 5-day weather bar chart
Automatic location detection via IPInfo.io API
Geocoder for location name resolution via Nominatim API

The next step is to set up all the binaries/elf and RTOS from scratch without using the Arduino framework. I don't know how hard would it be. I hope I'll make it in a few weeks.

Demo video: https://www.youtube.com/watch?v=S042fLQz42w

GitHub: https://github.com/blueskyson/esp32-weather

Weather Dashboard with 5-Day Forecast and Wi-Fi Menu

Jack Lin — Mon, 30 Dec 2024 04:53:18 +0000

Countless people have built weather display projects before, and just showing the current weather can get a little dull. So, I decided to take it up a notch. My weather panel displays the current weather and includes a bar chart showing the 5-day high and low temperatures. On top of that, there's a menu interface for switching Wi-Fi connections.

Hardware setup: Raspberry Pi Zero WH paired with a Nextion NX8048T050 HMI touchscreen display.

Features:

Weather data fetching from Open-Meteo API
Utilizes GI (PyGObject) and pycairo for network connection management
Utilizes Nextion GUI designing commands to draw 5-day weather bar chart
Automatic location detection via IPInfo.io API
Geocoder for location name resolution via Nominatim API

This project was implemented on Linux using Python. While Python made the development process straightforward, I felt that the approach lacked the feeling of IoT development. I plan to rewrite the code in C/C++. Another plan is to switch the controller to an ESP32 and maybe implement it on a lightweight RTOS.

Demo video: https://www.youtube.com/shorts/vR5DYhlheCI
GitHub: https://github.com/blueskyson/pi-zero-weather

Dev Blog: Building the Ultimate University Map

Jack Lin — Sun, 03 Mar 2024 08:53:25 +0000

Hey there, fellow developers and map enthusiasts! Welcome to the Dev Blog for University Map, where we're crafting the ultimate university map experience. If you're passionate about maps, user interfaces, and making information accessible, you're in the right place. Let's dive into what Project Uni is all about and how you can get involved.

What is University Map?

University Map is a side project dedicated to creating a comprehensive map of universities around the world. Our goal is to make it easy for students, researchers, and anyone curious about higher education to explore universities, their locations, and key information about them. Whether you're planning your next academic journey or simply exploring the vast world of education, this project has you covered.

Feature Highlights

Comprehensive University Profiles
Search Functionality
Internationalization

Tech Stack

ReactJs
Mantine
Leaflet + OpenStreetMap

The Journey

Firstly, I've only worked with Vue.js in my professional experience. However, during my research, I noticed that most articles related to Leaflet use React.js. I believe using React.js might make problem-solving easier. When I visited the React.js official website, they suggested using frameworks like Next.js or Remix. After watching this easy-to-follow tutorial, I successfully initialized a map and marked National Cheng Kung University on it. Here's the corresponding commit: 5cfad27.

Next, I incorporated Ant Design to create a fixed information panel on the left side. This panel is used to display university banners and information. I chose Ant Design as my UI framework for its robust documentation and easiness. With the university data described in YAML format, I can now dynamically populate the information panel with the university's information:

# /public/universities/Taiwan/National Taiwan University/en.yml
name: "National Cheng Kung University"
address: "No.1, University Road, Tainan City 701, Taiwan (R.O.C)"
locations:
  - name: "Main Campus"
    coordinates: [22.9987772261614, 120.21648234565666]
  - name: "Guiren Campus"
    coordinates: [22.93788805281445, 120.27485576268575]
acronyms: ["NCKU"]
banner: "https://web.ncku.edu.tw/var/file/0/1000/img/495849468.jpg"
introduction: >-
  National Cheng Kung University was originally established under Japanese colonial government in January 1931 as the Tainan Technical College.
  It was upgraded to a provincial university in 1956 as Provincial Cheng Kung University, named after Koxinga, a Chinese military leader who drove the Dutch East India Company from Taiwan and founded the Kingdom of Tungning.
  In 1971, the university became a national university and was renamed to National Cheng Kung University.
gallery:
  [
    "https://web.ncku.edu.tw/var/file/0/1000/img/2638/541084137.jpg",
    "https://web.ncku.edu.tw/var/file/0/1000/img/495849468.jpg",
    "https://web.ncku.edu.tw/var/file/0/1000/img/0111_Sel-044.jpg",
  ]

In addition, when this webpage first loads, it will first load the Markers of all universities through a locations.json:

[
  {
    "name": "National Cheng Kung University",
    "country": "Taiwan",
    "location": [
      {
        "name": "Main Campus",
        "coordinates": [
          22.9987772261614,
          120.21648234565666
        ]
      },
      {
        "name": "Guiren Campus",
        "coordinates": [
          22.93788805281445,
          120.27485576268575
        ]
      }
    ]
  },
  {
    "name": "National Taiwan University",
    "country": "Taiwan",
    "location": [
      {
        "name": "Main Campus",
        "coordinates": [
          25.017491194856326,
          121.53968742646664
        ]
      }
    ]
  }
]

Here's the corresponding commit: 23fa274.

After realizing that Ant Design's style didn't quite match the desired effect, I switched the UI to Mantine. Next, I added a vertical navbar on the left side of the screen. Inside the navbar, there's a language picker used to switch between languages with next-intl, and a link to the GitHub repository of this project. The setup for next-intl was done with reference to this easy-to-follow tutorial.

Here's the corresponding commit: 3bfe12a.

At this point, I believed that the development had reached a milestone, and I was ready to deploy it to GitHub Pages. However, I encountered a critical issue: after the project was built, it wasn't simply a static website. The problem arose from the dynamic routing structure, such as /:lang/university/:country/:university, causing the browser to send requests to GitHub Pages' web server each time a route was switched. Additionally, some Next.js functionalities or middleware might require backend processing. As a solution, I decided to rewrite the entire project using Vite + ReactJS. I replaced next-intl with i18next and implemented a hash router. Finally, after these changes, my website could be successfully deployed on GitHub Pages.

Next, I utilized id_ed25519 as the deploy key for the GitHub Pages repository. The GitHub workflow performed the deployment using the following script:

echo "$BOT_PRIVATE_SSH_KEY" > id_ed25519
chmod 600 id_ed25519
ssh-add id_ed25519

# Copy the built files to the GitHub Pages repository
export SITE_HOME="$HOME/site"
git clone --quiet --depth 1 "git@github.com:university-map/university-map.github.io.git" "$SITE_HOME"
cp -rf dist/* "$SITE_HOME"

# Check if there are changes to commit and deploy
cd "$SITE_HOME"
if [[ -n $(git status -s) ]]; then
  git add -A
  git commit -m "[GitHub Actions] Deploy university-map/university-map@$GITHUB_SHA"
  git push -q
  echo "Finished Deployment"
else
  echo "No changes to deploy. Exiting with status 0."
  exit 0
fi

Finally, I added a search bar allowing users to search for keywords from a drop-down list or through commonly used acronyms such as "CMU" to find schools. Here's the corresponding commit: 88b1bb4.

What's Next?

With the project reaching the first milestone, the journey is far from over. Here are some exciting next steps I'm considering:

Expanding the database to include more universities and detailed information such as yearly rankings, colleges, and living and employment environments.
Integrating social sharing options such as share and embedded HTML.
Improve mobile device display.

That's it for now, folks. Thank you for reading!

Star University Map on GitHub. 🌍🎓🚀

Develop .NET Core 3.1 Inside a Container

Jack Lin — Fri, 07 Jul 2023 16:42:44 +0000

Distros like Ubuntu 22.04 only supports OpenSSL 3, so users can only install .NET 6 SDK, it does not support .NET Core 3.1 or 2. Fortunately, Microsoft officially provides image files for development, and we don't even need to write Dockerfile to set up the environment.

Setup Environment

Here are the instructions to start a container named dotnet31 locally using devcontainers/dotnet:dev-3.1:

$ mkdir -p dev-container/dotnet31
$ cd dev-container
$ docker pull mcr.microsoft.com/devcontainers/dotnet:dev-3.1
$ docker run -it --name dotnet31 --volume ./dotnet31:/workspace:cached --network host mcr.microsoft.com/devcontainers/dotnet:dev-3.1 sleep infinity

Notice that we use --network host, that makes the container share the host’s networking namespace. So be careful to do any network change inside the container. You can omit the option if you don't need to access localhost from the container.

Next, enter the container to test whether the program can be compiled and executed:

$ docker exec -it dotnet31 bash

Inside the container:

# dotnet --list-sdks
3.1.425 [/usr/share/dotnet/sdk]
# mkdir /workspace/test && cd /workspace/test
# dotnet new console
# dotnet run
Hello World!

Then use your favorite IDE or editor to enter the container development, I personally use VS Code's Dev Containers.

Other settings

Notice that you may need to manual use --environment=Development to tell the compiler using development settings.

# dotnet run --environment=Development

You may also need to set up Entity Framework.

# dotnet tool install --global dotnet-ef --version 3.1.3

Finally, you can also install other packages.

# sudo passwd root
# sudo apt install neofetch

Hope this to be helpful for who annoyed at developing old .NET projects in new Ubuntu host systems.

Try Alpaca-LoRA on my laptop

Jack Lin — Mon, 27 Mar 2023 09:22:21 +0000

Alpaca-LoRA is an open-source project that reproduces results from Stanford Alpaca using Low-Rank Adaptation (LoRA) techniques. It provides an Instruct model of similar quality to text-davinci-003, runs on a Raspberry Pi (for research), and the code is easily extended to 13b, 30b and 65b models.

It is impressive that Alpaca-LoRA can scale down the model to run on personal computers without relying on GPU, which I found very intriguing. As a result, I tried the model myself and leaved some screenshots. The whole process is on i7-10750H CPU, 32 GB RAM. The OS is Ubuntu 22.04.

Alpaca-LoRA

Source: https://github.com/tloen/alpaca-lora

Run the program

Resource usage

Screenshots of inputs and responses, each response takes 330 to 420 seconds (Maybe the memory is exhausted and swap is used, so it is very slow?)
Ask it a sample question:

Ask it to write me a BMI calculator:
The BMI program is correct, it also provides parameter annotations.

Ask it to write me Tower of Hanoi:
The program seems wrong.

Ask it "what is machine learning?" in Chinese and have it answer in Chinese:
It can understand Chinese but can only answer in English.

llama.cpp

Source: https://github.com/ggerganov/llama.cpp
The github user ggerganov writes an tensor library for machine learning in C called ggml. Then he ports ggml to LLaMA model, change 16-bit float into smaller value type, and use AVX2 or NEON to accelerate on CPU. See his comment for more information.

The smallest model alpaca-lora-7B-ggml only weights 4GB and can run on a raspberry pi. See the video. I wanted to try this as well, but there's a breaking change recently, not sure if this model works now. So I tried alpaca-lora-30B-ggml. It still executes very slowly, and there seems to be a small bug in the interactive command line. Hope it will be improved to be usable in the future.

See: https://www.youtube.com/watch?v=RgSAe8tDfew

How to view and back trace core dumps through gdb

Jack Lin — Sat, 24 Dec 2022 05:56:07 +0000

Write a sample program that generates a segmentation fault

In Ubuntu, core dumps are not generated by default. If you want the system to generate core dump, you need to enter the following command:

ulimit -c unlimited

In the above command, ulimit is to limit the usage of some user resources, including max user processes, the upper limit of open files, the upper limit of virtual memory, etc., and ulimit -c is to set the size of the core, unlimited means no upper limit, if you want To limit the size of the core, you can change unlimited to other numbers.

Next I wrote a test file that will cause a segmentation fault when executed:

/* myprogram.c */
int main() {
    int *i;
    *i = 1;     // Assign before malloc
    return 0;
}

Add -g debug option when compiling, and then execute:

gcc -g myprogram.c -o myprogram
./myprogram
Segmentation fault (core dumped)

At this time, there should be a file named core left in the current directory, see Method 1. If the file is not found, it means that the Linux version is relatively new, so you may not use this method, but use coredumpctl to manage core dumps, see Method 2.

Method 1

At this time, we want to find out where the program is wrong, so open gdb and enter the program name and core file name:

gdb myprogram core
GNU gdb (Ubuntu 9.1-0ubuntu1) 9.1
Copyright (C) 2020 Free Software Foundation, Inc.
License GPLv3+: GNU GPL version 3 or later <http://gnu.org/licenses/gpl.html>
This is free software: you are free to change and redistribute it.
There is NO WARRANTY, to the extent permitted by law.
Type "show copying" and "show warranty" for details.
This GDB was configured as "x86_64-linux-gnu".
Type "show configuration" for configuration details.
For bug reporting instructions, please see:
<http://www.gnu.org/software/gdb/bugs/>.
Find the GDB manual and other documentation resources online at:
    <http://www.gnu.org/software/gdb/documentation/>.

For help, type "help".
Type "apropos word" to search for commands related to "word"...
Reading symbols from myprogram...
[New LWP 3355]
Core was generated by `./myprogram'.
Program terminated with signal SIGSEGV, Segmentation fault.
#0  0x000056139bf2f135 in main () at myprogram.c:4
4       *i = 1;
(gdb) q

Method 2

Install systemd-coredumpctl:

sudo apt install systemd-coredump

Then use coredumpctl to list the core dump records of myprogram:

TIME                          PID  UID  GID SIG     COREFILE EXE                                SIZE
Sun 2022-10-02 19:52:44 CST 61547 1000 1000 SIGSEGV present  /home/lin/Desktop/test/c/myprogram 18.1K

Then tell gdb to open the core dump with coredumpctl debug myprogram:

coredumpctl debug myprogram
           PID: 61547 (myprogram)
           UID: 1000 (lin)
           GID: 1000 (lin)
        Signal: 11 (SEGV)
     Timestamp: Sun 2022-10-02 19:52:44 CST (1min 0s ago)
  Command Line: ./myprogram
    Executable: /home/lin/Desktop/test/c/myprogram
 Control Group: /user.slice/user-1000.slice/user@1000.service/app.slice/app-org.gnome.Terminal.slice/vte-spawn-f9eab066-b8f1-4ae9-8e21-14c78f25dbe0.scope
          Unit: user@1000.service
     User Unit: vte-spawn-f9eab066-b8f1-4ae9-8e21-14c78f25dbe0.scope
         Slice: user-1000.slice
     Owner UID: 1000 (lin)
       Boot ID: cbadc919c16149c8ae41b0a2ff2a94d4
    Machine ID: bd90775ca2c24d75929026d99304a7c2
      Hostname: Aspire7
       Storage: /var/lib/systemd/coredump/core.myprogram.1000.cbadc919c16149c8ae41b0a2ff2a94d4.61547.1664711564000000.zst (present)
     Disk Size: 18.1K
       Message: Process 61547 (myprogram) of user 1000 dumped core.

                Found module /home/lin/Desktop/test/c/myprogram with build-id: 95d32ba05adbce1c07d8f4a8c4eff5acf5a96cf8
                Found module linux-vdso.so.1 with build-id: 88536f03982667a41f2be85c4e61e7e8307e2700
                Found module ld-linux-x86-64.so.2 with build-id: 61ef896a699bb1c2e4e231642b2e1688b2f1a61e
                Found module libc.so.6 with build-id: 69389d485a9793dbe873f0ea2c93e02efaa9aa3d
                Stack trace of thread 61547:
                #0  0x000055983cee5135 n/a (/home/lin/Desktop/test/c/myprogram + 0x1135)
                #1  0x00007fc884842d90 __libc_start_call_main (libc.so.6 + 0x29d90)
                #2  0x00007fc884842e40 __libc_start_main_impl (libc.so.6 + 0x29e40)
                #3  0x000055983cee5065 n/a (/home/lin/Desktop/test/c/myprogram + 0x1065)

GNU gdb (Ubuntu 12.0.90-0ubuntu1) 12.0.90
Copyright (C) 2022 Free Software Foundation, Inc.
License GPLv3+: GNU GPL version 3 or later <http://gnu.org/licenses/gpl.html>
This is free software: you are free to change and redistribute it.
There is NO WARRANTY, to the extent permitted by law.
Type "show copying" and "show warranty" for details.
This GDB was configured as "x86_64-linux-gnu".
Type "show configuration" for configuration details.
For bug reporting instructions, please see:
<https://www.gnu.org/software/gdb/bugs/>.
Find the GDB manual and other documentation resources online at:
    <http://www.gnu.org/software/gdb/documentation/>.

For help, type "help".
Type "apropos word" to search for commands related to "word"...
Reading symbols from /home/lin/Desktop/test/c/myprogram...
[New LWP 61547]
[Thread debugging using libthread_db enabled]
Using host libthread_db library "/lib/x86_64-linux-gnu/libthread_db.so.1".
Core was generated by `./myprogram'.
Program terminated with signal SIGSEGV, Segmentation fault.
#0  0x000055983cee5135 in main () at myprogram.c:4
4       *i = 1;
(gdb) q

Use the `bt` Instruction for Back Trace

In the previous example, gdb successfully helped me find the error on line 4 of main() in myprogram.c.

However, if the program is complex and generates many function stacks, we may want to trace the calling order of every function stack. We can use bt (back trace) to find a series of function calls stack by stack, such as the following example:

/* myprogram.c */
void func() {
    int *a;
    *a = 1;
}

int main() {
    func();
    return 0;
}

The error is in func(), use bt in gdb to see:

Open core dump by gdb or coredumpctl.

 . . .

Program terminated with signal SIGSEGV, Segmentation fault.
#0  0x000055ab058f0135 in func () at myprogram.c:4
(gdb) bt
#0  0x000055ab058f0135 in func () at myprogram.c:4
#1  0x000055ab058f0150 in main () at myprogram.c:8

You can see that gdb traces back to the call to func(), which is line 8 of main.c.

Implement Fibonacci using MIPS

Jack Lin — Sat, 24 Dec 2022 05:16:42 +0000

You can take Implement factorial using MIPS a look before doing this. This was my college's computer organization assignment. I implemented a Fibonacci using the following algorithm:

\begin{cases} n, & n = 0,1 \\ F(n - 1) + F(n - 2), & n \in \mathbb{N} \end{cases}

In MIPS, I use $a0 as the parameter n of F(n). For example, letting $a0 equal to 10 and jumping to the fib label means F(10), and at the end of the recursion, the result will be stored in $v0.

main:
    addi $a0, $zero, 10       # let the parameter n be 10
    jal fib                   # jump to fib label, i.e. calling F(10)
    j exit

fib:
    addi $sp, $sp, -8         # allocate 8 bytes to this stack
    sw $ra, 0($sp)            # save the address of the instruction that calls fib label (instruction address)
    sw $a0, 4($sp)            # save the value of n

    slti $t0, $a0, 2          # $t0 is used for conditions. If n < 2 then $t0 = 1, else $t0 = 0
    beq $t0, $zero, L1        # if $t0 == 0 then jump to branch L1
    add $v0, $v0, $a0         # let $v0 add n
    addi $sp, $sp, 8          # let $sp point to upper stack
    jr $ra                    # jump to the next line of the line calling fib

L1:
    addi $a0, $a0, -1         # n = n - 1
    jal fib                   # jump to fib label again, like as calling F(n - 1)
    addi $a0, $a0, -1         # n = n - 1
    jal fib                   # jump to fib label again, like as calling F(n - 2)
    lw $a0, 4($sp)            # recover the value of n
    lw $ra, 0($sp)            # recover instruction address
    addi, $sp, $sp, 8         # let $sp point to upper stack
    jr $ra                    # jump to the next line of the line calling L1
exit:

The execution result of the MARS simulator looks like this:

You can see that the value of $v0 is 0x37, 55 in decimal, which is the result of F(10).

OpenCV Image Blending

Jack Lin — Wed, 14 Dec 2022 05:07:17 +0000

The function of OpenCV image mixing is:

cv2.addWeighted(src1, alpha, src2, beta, gamma, dst=..., dtype=...) -> dst

Required parameters:

src1: numpy array of the first image.
alpha: The weight of the first image.
src2: numpy array of the second image.
beta: The weight of the second image.
gamma: A constant added after image blending.

Optional parameters:

dst: numpy array of output images.
dtype: The bit depth of the output image, the default is src1.depth().

The mixed formula can be expressed as follows:

\texttt{dst} (I)= \texttt{saturate} ( \texttt{src1} (I)* \texttt{alpha} + \texttt{src2} (I)* \texttt{beta} + \texttt{gamma} )

Example

The following example sets alpha + beta = 1.0, and gamma = 0.0. This example is also on my github repo. Press ESC after executing the script to exit the script.

import cv2


def main():
    img1 = cv2.imread("Dog_Strong.jpg")
    img2 = cv2.imread("Dog_Weak.jpg")
    window_name = "Blending"

    def change_trackbar(val):
        alpha = float(val / 255)
        blend_img = cv2.addWeighted(img2, alpha, img1, 1.0 - alpha, 0.0)
        cv2.imshow(window_name, blend_img)

    cv2.namedWindow(window_name)
    cv2.createTrackbar("trackbar", window_name, 0, 255, change_trackbar)
    cv2.imshow(window_name, img1)
    while True:
        if cv2.waitKey(100) == 27:  # ESC
            cv2.destroyWindow(window_name)
            break


if __name__ == "__main__":
    main()

Demo:

Deploy Azure Functions using Azure Container Registry

Jack Lin — Tue, 13 Dec 2022 17:08:51 +0000

Develop in Linux through the command line with:

.NET 6.0 SDK
Azure Functions Core Tools 4.x
Azurite storage emulator
Azure CLI 2.4.0 or newer
Docker

Create Project

Use the following command to create a Timer Trigger function in the current directory, and generate the default Dockerfile.

func init --name ContainerApp --worker-runtime dotnet --docker
func new --name TimerTriggerExample --template "timer trigger"

First, run Azurite and then test the function app:

azurite -l azurite_workspace
func start

After testing the app, package the image and run it. Note that when running with docker, you need to set AzureWebJobsStorage to UseDevelopmentStorage=true and simulate storage through Azurite. Enter the name of your Azure Container Registry in the ACR_NAME environment variable in the following command block:

export ACR_NAME=<your azure container registry name>

docker build -t ${ACR_NAME}.azurecr.io/container-app:latest .
docker run --name container-app -p 8000:80 --network host \
    -e AzureWebJobsStorage="UseDevelopmentStorage=true" ${ACR_NAME}.azurecr.io/container-app:latest

Please note that Azure Functions containers cannot currently run directly on Mac M1.

By the way, Azurite also provides a Docker image that can be run directly with the following command:

docker run --name azurite -p 10000:10000 -p 10001:10001 -p 10002:10002 -d mcr.microsoft.com/azure-storage/azurite

After testing the local image, push it to Azure Container Registry:

az login
az acr login -n ${ACR_NAME}
docker push ${ACR_NAME}.azurecr.io/container-app:latest

You can then deploy Azure Functions using Azure Container Registry in two ways:

Method 1: Admin Credentials

Give Functon App a Container Registry account password, so that Function App can log in to Container Registry and pull the image file through this set of account password.

First, create a resource group in Azure Portal, fill in the name of this resource group into the RG_NAME environment variable in the command block below, and create and deploy the resources required by Azure Function in this resource group:

export ACR_NAME=<azure container registry name>
export RG_NAME=<function app resource group>
export APP_NAME=<function app name>
export STORAGE_NAME=<storage account name>

# Create a storage account
az storage account create --name ${STORAGE_NAME} --resource-group ${RG_NAME} --sku Standard_LRS --kind StorageV2

# Create App Service Plan
az appservice plan create --name PlanB1 --resource-group ${RG_NAME} --is-linux --sku B1

# Get the username of ACR
az acr credential show -n ${ACR_NAME} --query username --output tsv

# Get ACR password
az acr credential show -n ${ACR_NAME} --query passwords[0].value --output tsv

# Create/re-deploy the Function App, set all the necessary information at once
az functionapp create --name ${APP_NAME} --storage-account ${STORAGE_NAME} --resource-group ${RG_NAME} \
     --plan PlanB1 --functions-version 4 \
     --deployment-container-image-name ${ACR_NAME}.azurecr.io/container-app:latest \
     --docker-registry-server-password <acr password> \
     --docker-registry-server-user <acr username>

That's it.

Method 2: Managed Identity

Setup an Identity for the Function App, and let Container Registry give it the "AcrPull" permission.

export ACR_NAME=<azure container registry name>
export RG_NAME=<function app resource group>
export APP_NAME=<function app name>
export STORAGE_NAME=<storage account name>

# Create a storage account
az storage account create --name ${STORAGE_NAME} --resource-group ${RG_NAME} --sku Standard_LRS --kind StorageV2

# Create App Service Plan
az appservice plan create --name PlanB1 --resource-group ${RG_NAME} --is-linux --sku B1

# Create a Function App and specify the address of the image
az functionapp create --name ${APP_NAME} --storage-account ${STORAGE_NAME} --resource-group ${RG_NAME} \
     --plan PlanB1 --functions-version 4 \
     --deployment-container-image-name ${ACR_NAME}.azurecr.io/container-app:latest

# Set an Identity for the Function App and get the principalId
az functionapp identity assign --resource-group ${RG_NAME} --name ${APP_NAME} --query principalId --output tsv

# get subscriptionId
az account show --query id --output tsv

# Give Function App "AcrPull" permission
az role assignment create --assignee <principal-id> \
     --scope /subscriptions/<subscription-id>/resourceGroups/<container registry resource group>/providers/Microsoft.ContainerRegistry/registries/${ACR_NAME} \
     --role "AcrPull"

# Set the permission to pull from Container Registry that must be authenticated by Identity
az resource update --ids /subscriptions/<subscription-id>/resourceGroups/${RG_NAME}/providers/Microsoft.Web/sites/${APP_NAME}/config/web --set properties.acrUseManagedIdentityCreds=True

# Deploy Function App
az functionapp config container set --name ${APP_NAME} --resource-group ${RG_NAME} \
     --docker-custom-image-name ${ACR_NAME}.azurecr.io/container-app:latest \
     --docker-registry-server-url https://${ACR_NAME}.azurecr.io

At this time, the terminal will display "No credential was provided to access Azure Container Registry. Trying to look up...", azure will automatically apply the current identity to log in to ACR.

I made a tool for looking up ANSI color code

Jack Lin — Mon, 12 Dec 2022 02:47:51 +0000

Repo: https://github.com/blueskyson/ANSI-escape-code-color

This small program can help me select ANSI color by specific numbers, then automatically generate color codes. Like the following picture:

Execute ./aecc -f to look up font colors..
Execute ./aecc -b to look up background colors.
Execute ./aecc 10 1 to generate the code of green font and red background. If you want to generate a bold font, execute ./aecc B10 1.

This program is written in both cpp and python.

Implement factorial using MIPS

Jack Lin — Sun, 11 Dec 2022 08:33:44 +0000

This was a computer organization class assignment. I implemented a factorial using the following algorithm:

\begin{cases} 1, & n = 0 \\ F(n - 1) * n, & n \in \mathbb{N} \end{cases}

In MIPS, I use $a0 as the parameter n of F(n). For example, letting $a0 equal to 5 and jumping to the fact label means F(5), and at the end of the recursion, the result will be stored in $v0.

main:
    addi $a0, $zero, 5        # let the parameter n be 5
    jal fact                  # jump to fact label, i.e. calling F(5)
    j exit

fact:
    addi $sp, $sp, -8         # allocate 8 bytes to this stack
    sw $ra, 0($sp)            # save the address of the instruction that calls fact label (instruction address)
    sw $a0, 4($sp)            # save the value of n

    slti $t0, $a0, 1          # $t0 is used for conditions. If n < 1 then $t0 = 1, else $t0 = 0
    beq $t0, $zero, L1        # if $t0 == 0 then jump to branch L1
    addi $v0, $zero, 1        # let $v0 be 1
    addi $sp, $sp, 8          # let $sp point to upper stack
    jr $ra                    # jump to the next instruction of the instruction calling fact

L1:
    addi $a0, $a0, -1         # n = n - 1
    jal fact                  # jump to fact label again, like as calling F(n - 1)
    lw $a0, 4($sp)            # recover the value of n
    mul $v0, $a0, $v0         # $v0 *= $a0, like as F(n) = n * F(n - 1)
    lw $ra, 0($sp)            # recover instruction address
    addi, $sp, $sp, 8         # let $sp point to the upper stack
    jr $ra                    # jump to the next instruction of the instruction calling L1

exit:

The execution result of the MARS simulator looks like this:

You can see that the value of $v0 is 0x78, 120 in decimal, which is the result of F(5).

Using Key Vault in Azure Functions

Jack Lin — Fri, 09 Dec 2022 05:02:34 +0000

Create a Key Vault

First, create a Key Vault in Azure named jack-keyvault, which contains:

Secret	Value
TestKey	Hello World

As shown below:

Test the Function App locally

Create a Function App:

func init KeyVaultFunction --dotnet

Install Key Vault's dependencies:

cd KeyVaultFunction
dotnet restore
dotnet add package Azure.Identity
dotnet add package Azure.Security.KeyVault.Secrets

Then add a Http-Triggered function, I named it HttpTrigger.cs and paste the following code:

using System;
using Azure.Security.KeyVault.Secrets;
using Azure.Identity;
using Microsoft.AspNetCore.Mvc;
using Microsoft.Azure.WebJobs;
using Microsoft.Azure.WebJobs.Extensions.Http;
using Microsoft.AspNetCore.Http;
using Microsoft.Extensions.Logging;

namespace KeyVaultFunction
{
    public class HttpTrigger
    {
        [FunctionName("HttpTrigger")]
        public IActionResult Run(
            [HttpTrigger(AuthorizationLevel.Anonymous, "get", "post", Route = null)]
                HttpRequest req,
            ILogger log
        )
        {
            try {
                string keyVaultUrl = Environment.GetEnvironmentVariable("KEY_VAULT_URL")!;
                string secretName = Environment.GetEnvironmentVariable("SECRET_NAME")!;

                var client = new SecretClient(new Uri(keyVaultUrl), new DefaultAzureCredential());
                KeyVaultSecret secret = client.GetSecret(secretName);
                log.LogInformation($"Successfully get Key Vault from: {keyVaultUrl}. Secret name: {secretName}");

                return new OkObjectResult(secret.Value);
            }
            catch (Exception ex)
            {
                log.LogInformation($"Exception occurred. Source: {ex.Source}. Message: {ex.Message}");
                return new BadRequestObjectResult($"Exception occurred. Source: {ex.Source}. Message: {ex.Message}");
            }
        }
    }
}

When the user triggers this function, this code will read the values of KEY_VAULT_URL and SECRET_NAME from local.settings.json, then request Key Vault to return the value of the secret, and finally display the result and return it to the user through OkObjectResult .

{
    "IsEncrypted": false,
    "Values": {
        "AzureWebJobsStorage": "UseDevelopmentStorage=true",
        "FUNCTIONS_WORKER_RUNTIME": "dotnet",
        "KEY_VAULT_URL": "https://jack-keyvault.vault.azure.net/",
        "SECRET_NAME": "TestKey"
    }
}

Now you can test it locally. First log in to Azure to allow SecretClient to verify the identity of you, and then execute the Function App:

az login
func start

Test whether the Function App can get the secret:

curl http://localhost:7071/api/HttpTrigger
Hello World

Test Function App in Azure Portal

First create a Function App, I named it Jack1, then enable its Identity, and press Save:

Fill in the KEY_VAULT_URL and SECRET_NAME that just appeared in local.settings.json into Configuration, and then press Save:

Then go back to Key Vault to add an Access Policy, and then press Save, so that Function App can get the secret data:

Then push the Function App to Azure:

func azure functionapp publish Jack1

Then open https://jack1.azurewebsites.net/api/httptrigger through the browser to see the Hello World string.