DEV Community: ATSU

Setting Up a Raspberry Pi for Remote Access Without a Monitor or Keyboard

ATSU — Fri, 08 Mar 2024 07:07:40 +0000

Install the following software for this tutorial

First, start the raspberrypi Imager

When opened, the following configuration screen will be launched.

This time, I'll install Raspberry Pi OS (64-bit) Desktop on a 32GB microSD card, using the Desktop version for graphical display via VNC.

Write with the following settings

Press 「Next」

When asked 「Would you like to apply OS customisation settings?」, press 「EDIT SETTINGS」.

Under the 「GENERAL」 category, set up Wi-Fi and password in the 「OS Customization」 screen.

Select 「SERVICE」 and enter your Wi-Fi and password. If you wish to configure using a public key, select 「SERVICE」 next to 「GENERAL」 and choose 「Allow public-key authentication only. Set authorized_keys for 'pi':'」

And click「SAVE」

When asked 「Would you like to apply OS customisation settings?」, press「YES」.

Please wait a moment while the Raspberry Pi OS is being written to the microSD card.

The display will show 「verifying...」 and after a short while, the process will be completed.

Click 「CONTINUE」 and then follow the on-screen instructions to remove the microSD card.

Next, insert the microSD card into the Raspberry Pi and power it on.

Enter the following command in the terminal to connect to the Raspberry Pi via SSH. If a password has been set, enter the password to log in.



ssh pi@raspberrypi.local



ping pi@raspberrypi.local

Check IPAdress



ssh pi@10.207.171.xxx（IP Address）

If configured as follows, the 'hostname,' 'Username,' and 'Password' will be as follows.

「hostname」: 「raspberrypi」
「Username」：「pi」
「Password」：「raspberry」

During the first login, you will be asked a question like the following, to which you should respond with 'yes'.



ssh pi@(IPAdress)
The authenticity of host '10.207.171.xxx (10.207.171.xxx)' can't be established.
ED25519 key fingerprint is SHA256:xxxxxxxxxxxxxxxxxxxxxxxxx.
This key is not known by any other names
Are you sure you want to continue connecting (yes/no/[fingerprint])?

Yes

Once logged in, you will see a prompt like 「pi@raspberrypi:~ $」, indicating that you have successfully SSH connected to the Raspberry Pi.



Linux raspberrypi 6.1.0-rpi7-rpi-v8 #1 SMP PREEMPT Debian 1:6.1.63-1+rpt1 (2023-11-24) aarch64

The programs included with the Debian GNU/Linux system are free software;
the exact distribution terms for each program are described in the
individual files in /usr/share/doc/*/copyright.

Debian GNU/Linux comes with ABSOLUTELY NO WARRANTY, to the extent
permitted by applicable law.
Last login: xxx. xxx. xxx
pi@raspberrypi:~ $

Having established a connection via SSH in the CLI, I would now like to connect graphically using VNC. To do this, it's necessary to enable VNC connections by running 「sudo raspi-config」.



sudo raspi-config

The screen will change to a blue background, switching to the interface for configuring Raspberry Pi settings.

Select 「3 Interface Options」, Click「Enter」

Select「I2 VNC」

「When asked 'Would you like the VNC server to be enabled?」 select 「Yes」.

This will momentarily switch back to the original black screen. Afterwards, 「The VNC Server is enabled」 will be displayed, so select 「OK」.

Now that VNC is enabled, next launch Real VNC.

Enter the IP address in the input field at the top

Finally, enter the Username and Password you set earlier

If the IP address is entered correctly, the following screen will be displayed for the first time, so click 「Continue」.

Finally, enter the Username and Password you set earlier.

Doing so will display the Raspberry Pi's home screen.

ref in Vue

ATSU — Thu, 15 Feb 2024 12:13:27 +0000

I have updated the content of this article here

Added new functionality to src/components/HelloWorld.vue

ref is a function that makes a piece of data reactive. This means when the data changes, Vue automatically updates the part of your website where that data is displayed. Think of ref like magic glue that connects your data to your website's appearance. Whenever the data changes, the website's look updates by itself without any extra work from you.

<script setup>
import { ref } from "vue";

defineProps({
  msg: String,
});

const count = ref(0);
const isProcessing = ref(false);

const incrementCount = () => {
  isProcessing.value = true;
  fetch(`/increment/${count.value}`)
    .then((response) => {
      if (response.ok) {
        return response.text();
      } else {
        console.error(`${response.status} ${response.statusText}`);
        isProcessing.value = false;
      }
    })
    .then((val) => {
      count.value = parseInt(val);
      isProcessing.value = false;
    })
    .catch((error) => {
      console.error(`Error: ${error.message}`);
      isProcessing.value = false;
    });
};
</script>

<template>
  <h1>{{ msg }}</h1>

  <div class="card">
    <button type="button" :disabled="isProcessing" @click="incrementCount">
      count is {{ count }}
    </button>
    <p>
      Edit
      <code>components/HelloWorld.vue</code> to test HMR
    </p>
  </div>

  <p>
    Check out
    <a href="https://vuejs.org/guide/quick-start.html#local" target="_blank"
      >create-vue</a
    >, the official Vue + Vite starter
  </p>
  <p>
    Install
    <a href="https://github.com/johnsoncodehk/volar" target="_blank">Volar</a>
    in your IDE for a better DX
  </p>
  <p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
</template>

<style scoped>
.read-the-docs {
  color: #888;
}
</style>

const count = ref(0); const isProcessing = ref(false);

const count = ref(0);

This line creates a reactive piece of data named count and starts it off at 0. Imagine count as a scoreboard on a game. Whenever count changes, the scoreboard on your website updates to show the new score.

const isProcessing = ref(false);

This creates another reactive piece of data called isProcessing and sets it to false initially. You can think of isProcessing as a traffic light that controls when you can press the button. When isProcessing is true (the light is red), you cannot press the button. When it's false (the light turns green), you can press it again.

:disabled="isProcessing":
This binds the disabled attribute of the button to the isProcessing reactive reference. When isProcessing is true, the button becomes disabled, preventing users from clicking it again until the current process completes. This is a common pattern to prevent duplicate requests or actions while an asynchronous operation is in progress.

isProcessing.value = true;
This disables the button by setting isProcessing to true.

Creating Kerf-Checker tool with Vite, Vue, and Flask

ATSU — Tue, 12 Dec 2023 04:58:31 +0000

Here is the code, App test video

In the article titled [Web Development with Vite, Vue, and Flask] I detailed the process of creating a web application template with a Vue and a Python backend. The application, Kerf Tool Test Fit Guides Generator, is designed to assist in determining the precise kerf needed for materials that will be joined together through laser cutting or CNC machining, particularly useful in furniture design and fabrication.

Overview

Purpose
It's a tool to determine the right kerf adjustments for materials before cutting, aiming to achieve a snug fit without the need for adhesives.

Functionality
Users enter various parameters like start width, pitch, gap, number of kerfs, and blade diameter. The application then generates a downloadable SVG file that visually represents the kerfs to be tested.

User Interface
Developed in Vue, the application provides a simple form where users input the necessary parameters and receive immediate visual feedback, including error messages if the input values are not within acceptable ranges.

Python Backend Processing
The Flask backend handles the SVG generation logic. It receives parameters from the frontend, validates them (e.g., ensuring the pitch is not too small), and then either returns an SVG file or an error message.

Laser Cutting Specifics
For those using laser cutters, the blade diameter input can be set to zero, as the kerf adjustment takes into account the laser's precision, which does not require accounting for a physical blade's width.

You can run the application with the following command

git clone https://github.com/ATSU3/kerf-tool-test-fit-guides-generator.git

cd kerf-tool-test-fit-guides-generator
yarn
yarn build
flask run

What is Kerf Check tool?

The Kerf Check tool is designed to ensure parts cut by laser or CNC fit together perfectly. It's essential for making press-fit kits where the right fit is key to holding everything together. For example, with 3 mm boards, matching slots can be too loose. This tool helps find the best fit by letting users test different gaps with an SVG file, for a tight, secure assembly.

If you are using a laser cutting machine, enter 0 for blade-diameter: since you do not need to add a T-bone filet (since you do not need to consider the bit diameter).

I've found that 2.65mm is just right for 3mm cardboard, so it will hold firm when we finally create a Press-fit -construction like this one.

When machining with CNC, it is not possible to make right angles, so giving them grooves that are larger than the radius of the drill, and we make escape routes for the drill by adding t-bone filet.

I found 15.3 to be the appropriate value when connecting a 15 mm lumber-core

Code

Here is the code

The app uses Vue.js for the user interface and relies on Python for SVG calculations. This way, as the app gets more complex, we can make the most of Vue for the design and Python for the heavy math.

App.vue

This code generate custom SVG images based on user-provided parameters. It features a user interface where users can input values for the starting width, pitch, gap, number of kerfs, and blade diameter.

Clicking the "Create SVG" button, the app validates the pitch value and, if it meets the required minimum, sends a request to the server to generate the SVG. If the pitch is too small, an error message is displayed immediately, enhancing the user experience by preventing invalid requests. Successful SVG generation results in an image preview on the page, along with a prompt to click the image for downloading.

<script setup>
import { ref, reactive, watch } from 'vue';

const appState = reactive({
  clicked: false,
  success: false,
  downloadURL: '#',
  displayDownloadText: false,
  errorMessage: '',
  parameters: {
    stw: 14,
    inc: 0.05,
    gap: 20,
    num: 4,
    tbone: 12.7
  }
});

watch(() => appState.parameters.inc, (newValue) => {
  if (newValue >= 0.01) {
    appState.errorMessage = '';
  }
});

const createSVG = async () => {
  appState.clicked = true;
  appState.displayDownloadText = false;

  if (appState.parameters.inc < 0.01) {
    appState.errorMessage = "(pitch) is too small. (pitch) can only be set to 1/100 mm increments. (刻み幅)は1/100mm単位までしか設定できません。";
    appState.success = false;
    return;
  }

  try {
    const response = await fetch(`/kerf_check`, {
      method: "POST",
      headers: {
        "Content-Type": "application/json; charset=utf-8",
      },
      body: JSON.stringify(appState.parameters),
    });

    if (!response.ok) {
      const errorData = await response.json();
      appState.errorMessage = errorData.error || response.statusText;
      appState.success = false;
      return;
    }

    const data = await response.text();
    const blob = new Blob([data], { type: "image/svg+xml" });
    appState.downloadURL = window.URL.createObjectURL(blob);
    appState.success = true;
    appState.displayDownloadText = true;
  } catch (error) {
    appState.errorMessage = "An unexpected error occurred.";
    appState.success = false;
  }
};
</script>

<template>
  <div id="app-1" class="kerf-check-container">
    <h1>Kerf Tool Test Fit Guides Generator</h1>

    <div class="input-container">
      <label>基準幅(start-width): <input v-model.number="appState.parameters.stw" placeholder="14"> mm</label>
      <label>刻み幅(pitch): <input v-model.number="appState.parameters.inc" placeholder="0.05"> mm</label>
      <label>隙間(gap): <input v-model.number="appState.parameters.gap" placeholder="20"> mm</label>
      <label>個数(number-of-kerfs): <input v-model.number="appState.parameters.num" placeholder="4"> 個</label>
      <label>刃径(blade-diameter): <input v-model.number="appState.parameters.tbone" placeholder="12.7"> mm</label>
    </div>

    <button @click="createSVG" class="create-svg-button">Create SVG</button>

    <div v-if="appState.displayDownloadText" class="download-instruction">Click the image to download</div>

    <div v-if="appState.success" class="image-container">
      <a :href="appState.downloadURL" download="kerf_check.svg">
        <img :src="appState.downloadURL" alt="Generated SVG" class="generated-image">
      </a>
    </div>

    <div v-if="appState.errorMessage" class="error-message">
      {{ appState.errorMessage }}
    </div>
  </div>
</template>

<style scoped>
.kerf-check-container {
  text-align: center;
  max-width: 600px;
  margin: auto;
}

.input-container {
  display: flex;
  flex-direction: column;
  margin-bottom: 20px;
}

.input-container label {
  margin-bottom: 10px;
}

.create-svg-button {
  margin-bottom: 20px;
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
}

.download-instruction {
  margin-bottom: 10px;
  font-style: italic;
}

.image-container {
  margin-bottom: 20px;
}

.generated-image {
  cursor: pointer;
  max-width: 100%;
  border: 1px solid #ccc;
}

.error-message {
  color: red;
}
</style>

app.py

The /kerf_check route, which accepts POST requests and processes JSON data sent by the client. This route expects to receive specific parameters: stw (start width), inc (increment, which is the pitch), gap, num (number of kerfs), and tbone (blade diameter).

If the absolute value of inc is less than 0.01, the server responds with a 500 Internal Server Error
Otherwise, it calls the generate_svg function with the received parameters to generate an SVG image representation of kerfs.
The generate_svg function creates an SVG image as a string with the specified dimensions and kerf patterns. It calculates the width and height of the SVG canvas based on the parameters and uses a series of SVG path commands to draw the kerfs. The function also adds text elements to the SVG to label each kerf with its width. The SVG string is then returned to the client with a content type of image/svg+xml.

If the request is successful and no error is encountered in the generate_svg function, the server responds with the generated SVG data and a 200 OK status.

import json
from flask import Flask, render_template, request

args = dict()
try:
    with open("args.json") as f:
        args = json.load(f)
except FileNotFoundError:
    pass

app = Flask(__name__, **args)


@app.route("/")
def hello():
    return render_template("index.html")


@app.route("/kerf_check", methods=["POST"])
def kerf_check():
    json = request.json
    stw = json["stw"]
    inc = json["inc"]
    gap = json["gap"]
    num = json["num"]
    tbone = json["tbone"]

    if abs(inc) < 0.01:
        return (
            "(pitch) is too small. (pitch) can only be set to 1/100 mm increments. (刻み幅)は1/100mm単位までしか設定できません。",
            500,
        )

    txt = generate_svg(stw, inc, gap, num, tbone)

    return txt, 200, {"Content-Type": "image/svg+xml"}


def generate_svg(stw, inc, gap, num, tbone):
    # GAP = 16
    MARGIN = 10
    PARTS_HEIGHT = 50
    KERF_HEIGHT = 20

    if inc < 0:
        inc = -inc
        stw = stw - inc * (num - 1)

    cw = (stw + inc * num + gap) * num + gap + MARGIN * 2
    ch = PARTS_HEIGHT + MARGIN * 2
    orign_x = MARGIN
    orign_y = MARGIN

    st1 = f'<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="{cw}mm" height="{ch}mm" viewBox="0 0 {cw} {ch}">'
    ed1 = "</svg>"

    temp = f'<path stroke="red" stroke-width="0.1" fill="none" d="M{orign_x},{orign_y}'
    txt = ""

    x = orign_x
    y = orign_y
    kerf_width = stw

    y += PARTS_HEIGHT
    temp += f" V{y}"
    x += gap
    temp += f" H{x}"

    for i in range(num):
        kerf_width = stw + inc * i
        kerf_width = round(kerf_width, 2)
        if len(str(kerf_width)) == 1:
            adjst = len(str(kerf_width)) - 1
        else:
            adjst = len(str(kerf_width)) - 2

        txt += f'<text x="{x - adjst}" y="25" font-size="3" fill="black">{kerf_width}</text>'

        y -= KERF_HEIGHT
        temp += f" V{y}"
        t_bone = f" A {tbone / 2} {tbone / 2} 0 0 1 {x} {y - tbone}"
        temp += t_bone
        x += kerf_width
        temp += f" H{x}"
        t_bone = f" A {tbone / 2} {tbone / 2} 0 0 1 {x} {y}"
        temp += t_bone
        y += KERF_HEIGHT
        temp += f" V{y}"
        x += gap
        temp += f" H{x}"

    y = y - PARTS_HEIGHT
    temp += f" V{y}"
    x = orign_x
    temp += f" H{x}"
    temp += '"/>'

    result = f"{st1}\n{temp}\n{txt}\n{ed1}"

    return result

Web Development with Vite, Vue, and Flask

ATSU — Thu, 07 Dec 2023 00:18:22 +0000

Introduction

We'll explore how to use Vue.js and Flask together to create an application. We'll cover the process of creating a front-end template using the development tool Vite and subsequently integrating a Flask back-end. This process is quite engaging, and I believe you'll find it intriguing!

Benefits
Combining Vue.js for the front-end and Flask for the back-end in web application development offers several advantages, especially when leveraging their respective strengths.

Python excels in handling backend operations, data manipulation, and complex mathematical calculations. Its vast ecosystem of libraries allows for easy integration with databases, data processing tools, and machine learning frameworks.

Vue.js, a progressive JavaScript framework, is designed to build modern, interactive user interfaces. JavaScript, being the language of the web, is well-suited for client-side development. Vue.js simplifies the creation of dynamic, responsive, and visually appealing UIs.

Overview

Creating a Vue front-end app template with Vite
Integrating with Flask
Creating a Docker image

Creating Vue app template

Navigate to your development directory (e.g., Projects) and execute the following command:

yarn create vite

During the setup, you'll be prompted to answer several questions:

Project name: vite-project (can be any name, for example: 'vite-project')
Select a framework: Vue
Select a variant: JavaScript

A directory named vite-project will be created. Navigate into it and run the yarn command:

cd vite-project
yarn

At this point, you can already run the template application with:

yarn dev

When you visit http://localhost:5173 in a web browser, you'll see the application's interface. There's a button in the center of the screen labeled "count is 0." Clicking this button will increment the count.

Next, build the app.

yarn build

The source will be compiled, and the artifacts will be placed in the dist distribution directory. To perform a final check of the application, execute:

yarn preview

Accessing http://localhost:4173 in a browser, you should see the application interface. The app's behavior will be identical to what was seen with 'yarn dev', but with the compiled JavaScript running the show.

The typical front-end creation process involves modifying the source code, checking its functionality with yarn dev, and if there are no issues, executing yarn build. The final operation is verified with yarn preview, and this cycle continues.

Working with Flask

Initially, let's use Flask simply to display the application's interface. Flask defines where to place different types of resources, necessitating file placement according to these rules:

Parameter Name	Description	Default
static_folder	JS, CSS, Location of static resources such as images	static
template_folder	Location of HTML files to be rendered by Flask	templates
static_url_path	Path name for accessing the static folder	/static

Comparing the actual artifacts in the dist folder layout with the default values, some differences are apparent. Specifically, JS and CSS files are placed in the dist/assets folder, but we aim to align the layout with Flask's requirements by renaming assets to static in the configuration.

To do this, open the vite.config.js file and add the following setting to build.assetsDir:

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],

  build: {
    assetsDir: "static",
  },
});

After running yarn build, confirm that the output has changed to dist/static.

Now, Flask takes the stage:

from flask import Flask, render_template

app = Flask(__name__, static_folder="dist/static", template_folder="dist", static_url_path="/static")


@app.route("/", defaults={"path": ""})
@app.route("/<path:path>")
def index(path):
    return render_template("index.html")

Due to the layout generated by Vite differing from Flask's default, parameters like static_folder are explicitly specified with actual values.

Run the Flask server with:

flask run

Accessing http://localhost:5000 in a browser should display the application interface. The Vite logo might not appear, but the count-up functionality should work fine.

The logo's absence is due to the image file's location. If you check the dist folder, vite.svg is found directly under dist, but as per the table, it needs to be in the static_folder (=dist/static).

To address this, move vite.svg from the public directory to static:

cd public
mkdir static
mv vite.svg static

The reason for not manually handling files under dist is to ensure they are automatically placed during yarn build.

Files in the public directory are copied to the dist directory, maintaining the tree structure during the build.

Additionally, the source referencing vite.svg must be updated. Relevant locations include:

<link rel="icon" type="image/svg+xml" href="/static/vite.svg" />

<img src="/static/vite.svg" class="logo" alt="Vite logo" />

After running yarn build, vite.svg should be in dist/static. Re-run flask run and visit http://localhost:5000. This time, the logo should display correctly!

To further utilize Flask, let's have it handle the incrementing process. Add to app.py:

@app.route("/increment/<int:count>")
def increment(count):
    return f"{count + 1}"

Modify the Vue side to request Flask to increment when the button is pressed. The relevant code is in
src/components/HelloWorld.vue

<div class="card">
  <button type="button" @click="count++">count is {{ count }}</button>
  <p>
    Edit
    <code>components/HelloWorld.vue</code> to test HMR
  </p>
</div>

Replace @click=... with a function that requests Flask. Implement 'incrementCount' as follows:

const count = ref(0);

const incrementCount = () => {
  fetch(`/increment/${count.value}`)
    .then((response) => {
      if (response.ok) {
        return response.text();
      } else {
        throw new Error(`${response.status} ${response.statusText}`);
      }
    })
    .then((val) => {
      count.value = parseInt(val);
    })
    .catch((error) => {
      console.error(`Error: ${error.message}`);
    });
};

Substitute the button press action with this function name:

<div class="card">
  <button type="button" @click="incrementCount">count is {{ count }}</button>
  <p>
    Edit
    <code>components/HelloWorld.vue</code> to test HMR
  </p>
</div>

Verify operation with:

yarn build
flask run

Creating a Docker Image

Having completed most of our objectives, let's also try creating a Docker image.

Use VSCode convenient feature to create a Dockerfile:

Open the folder vite-project in VScode.
(I assume you already have it open...)

Access the command palette (Ctrl+Shift+P) and search for 'Add Docker Files'.

Select Docker: Add Docker Files to Workspace.... (If it doesn't appear, you might need to install the Docker extension).

Select Application Platform.
→ Python Flask.

Choose the app's entry point(e.g. manage.py, app.py)
→ Choose app.py.

What port(s) does your app listen on? Enter a comma-separated list, or empty for no exposed port.
→ Enter a comma-separated list, or empty for no exposed port. Select the displayed number as it is. It is probably 5002, but you can change it to any number you like.

Include optional Docker Compose files.
→ Do you want to create docker-compose.yml as well? Select Yes.

Dockerfile Editing

Make the following changes to the Dockerfile:

Originally, we have:

WORKDIR /app
COPY . /app

Change the COPY source to ./dist since we want the dist directory in the container. Also, move index.html from the dist directory to the templates directory to adhere to the standard Flask structure:

WORKDIR /app
COPY ./dist/ .
RUN mkdir -p templates && mv index.html templates

Modifying and Placing app.py

In the Docker version, the Flask layout has been reverted to default, so the optional parameters specified in app.py should be removed:

app = Flask(__name__, static_folder="dist/static", template_folder="dist", static_url_path="/static")

In Docker, this can be simplified to:

app = Flask(__name__)

Copy app.py to the public directory and run yarn build:

cp app.py public
yarn build

Build the Docker image again with:

docker-compose build

Launch the container with:

docker-compose up -d

Go to http://localhost:5002.

Did it work?

Visit http://localhost:5002 and check if the app works correctly!

Finally, to avoid managing separate versions of app.py for Docker and non-Docker environments, consider using a configuration file to set parameters like static_folder based on the environment. This approach is simple yet effective.

The final app.py could look like this:

import json
from flask import Flask, render_template

args = dict()
try:
    with open("args.json") as f:
        args = json.load(f)
except FileNotFoundError:
    pass

app = Flask(__name__, **args)


@app.route("/", defaults={"path": ""})
@app.route("/<path:path>")
def index(path):
    return render_template("index.html")


@app.route("/increment/<int:count>")
def increment(count):
    return f"{count + 1}"

Create an args.json file with the following contents:

args.json

{
  "static_folder": "dist/static",
  "template_folder": "dist",
  "static_url_path": "/static"
}

By doing this, parameters can be environment-specific, and app.py can be centrally managed. If args.json is missing, Flask will catch the FileNotFoundError and default values will be used.