DEV Community: Arno Solo

Frontend Developer Roadmap

Arno Solo — Sat, 17 Feb 2024 00:23:16 +0000

Step by step guide to becoming a frontend developer.

Beginner

If you are familiar with the items listed in this chapter, you will be able to understand what other frontend engineers are talking about.

Foundational concepts
- HTML
- CSS
- JavaScript
Getting Help
- ChatGPT
- Google
Command-line interface
- ls, cd, grep, rm, man...
Version control
- Git
HTTP request
- Fetch API
Data structures
- Data types
- TypeScript
Frontend frameworks
- React
- Vue.js
Package Managers
- npm
CSS frameworks
- Tailwind CSS
Build and deploy
- Domain names
- DNS
- Vite
- Github Actions
- AWS s3
- AWS cloudfront
- AWS route53
Testing
- Jest

Intermediate

The following topics are not mandatory. Learn according to project needs.

Web APIs
- Canvas
- SVG
- MediaDevices
Authentication
- Sign in with Google
- JWT
Accept payments
- Stripe
- PayPal
Frontend frameworks
- Astro
Package Managers
- pnpm
Linter
- ESLint
- Lint staged
- Husky
Data visualization
- Chart.js

Source

https://arnosolo.github.io/learn-web-development/article-2-frontend-developer-roadmap.html

How to create a div with a curved bottom

Arno Solo — Tue, 04 Apr 2023 23:00:17 +0000

When we need a rounded edge we can use border-radius. But what if we need create a div with a curved bottom?

CSS clip-path

If we read CSS clip path api doc. We will find that we can crop a div into any shape we want with path

clip-path: circle(40%);
clip-path: path('M 0 200 L 0,75 A 5,5 0,0,1 150,75 L 200 200 z');

Understand svg path

If you copy this path into this svg-path-editor we can visualize the shape of it.



m 0 0 v 305.867 c 114 30 229 30 343 0 V 0 Z

The only problem is what are all those number means. You can drag the control points a little. Then you will find they are nothing but the coordinates of 2d points.

Write a basic example

If you have realized that those numbers in the path is just coordinates, then we can start write our example



<template>

  <div 

    class="demo"

    :style="{ 'clip-path': path('m 0 0 v 100 c 70 30 140 30 210 0 V 0 Z')}"

    >

    <p :style="{'padding': '12px'}">hi</p>

  </div>

</template>

<style scoped>

.demo {

  background-color: orange;

  height: 150px;

  width: 210px;

}

</style>

The Code of first example

Code

If you find this article useful, maybe you can buy my calculator for $0.99? It is a calculator that can change layout. So you can only keep the buttons you prefer. -> App Store

Ionic Appflow live update alternative

Arno Solo — Sat, 04 Feb 2023 13:28:04 +0000

Ionic Appflow live update is a good feature. It allows you update your app without waiting Play Store's review. But Appflow charges 499 USD per month for this feature, that a lot money, so I'm glad that I found an alternative which cost almost nothing. Mega save, yes!

Which part of App can be live updated?

The web part. You see when we pack a web project, we run npm run build, and a dist folder will be generated which contains some html css js file. That part can be live updated.

But If you added a new camera plugin which contains a lot native codes in your capacitor app, then you need build a new bundle.

What tool did I choose?

I found this tool Cap-go/capacitor-updater can do the job. And It's actually quite easy to use.

But there is one thing you need pay attention to. Which is the 3.x.x version of @capgo/capacitor-updater only work with @capacitor/core 3.x.x. And the v3 and v4 api of @capgo/capacitor-updater are quite different.

"@capgo/capacitor-updater": "3.3.20"
"@capacitor/core": "^3.0.0"

@capgo/capacitor-updater V3 doc

Basic Workflow

Why I say @capgo/capacitor-updater is actually quite easy to use?

Because core feature of live update can actually be implemented with only two sentences.

// This version is not the version of app, but more like the id of downloaded package
const { version } = await CapacitorUpdater.download({
  // npm run build -> dist -> compress -> dist.zip
  url: 'http://localhost:3000/dist.zip',
})

// Update to the new version
await CapacitorUpdater.set({ version })

And there is one thing you have to pay attention to. Which is you must make sure that you have set this config in capacitor.config.ts. Otherwise every time you reopen the app, you will found the new version you downloaded is not applied. And the program will try to redownload the new version and update to that version again.

plugins: {
  CapacitorUpdater: {
    autoUpdate: false,
  },
},

How to control update version

I just simply create another branch called live_update_json, and create a new file in this branch called live_update.json which looks like this.

{
  "com.arno_studio.ionic_app": {
    "1.0": "se345dd",
    "1.1-comment": "since 1.1, image lib updated: 2.0 -> 3.0",
    "1.1": "620008b"
  },
}

So every our app in lunched, it will fetch this file. Then get the latest web build version according to its own bundle id and bundle version. Then download the related dist.zip.

Bundle version: Defined in android or ios folder, looks like 1.0, 1.1

Web build version: The first 7 digits of current commit id, looks like se345dd, 620008b. You can get this id with git rev-parse --short HEAD

Fetch dist.zip from AWS S3

I choose Github Action x AWS S3, because in this way every time I push a commit to the repo in Github. A dist.zip will be built and then upload to the aws s3 by Github Action.

How to use Github Action? That's just another topic, and deserve its own article.

If you need help about ionic live update or capgo live update, feel free to contact me.

Use Alamofire with async and await

Arno Solo — Fri, 27 Jan 2023 06:44:56 +0000

Alamofire is a swift http request lib. By default, we need use completion handler to handle response. Today we are going to find out how to use it with async and await.

And we will learn how to achieve this by fetching a appliance list from this url. It's provided by random-data-api.com

Install Alamofire

First we should create an new iOS project in XCode, and install Alamofire in our project with Swift package manger

https://github.com/Alamofire/Alamofire.git

Define Model Appliance

Models/Appliance.swift

struct Appliance: Identifiable, Codable {
    let id: Int
    let uid: String
    let brand: String
    let equipment: String
}

Create Network Manager

Network/NetworkManager.swift

import Foundation
import Alamofire

private let API_BASE_URL = "https://random-data-api.com"

actor NetworkManager: GlobalActor {
    static let shared = NetworkManager()
    private init() {}

    private let maxWaitTime = 15.0
    var commonHeaders: HTTPHeaders = [
        "user_id": "123",
        "token": "xxx-xx"
    ]

    func get(path: String, parameters: Parameters?) async throws -> Data {
       // You must resume the continuation exactly once
        return try await withCheckedThrowingContinuation { continuation in
            AF.request(
                API_BASE_URL + path,
                parameters: parameters,
                headers: commonHeaders,
                requestModifier: { $0.timeoutInterval = self.maxWaitTime }
            )
            .responseData { response in
                switch(response.result) {
                case let .success(data):
                    continuation.resume(returning: data)
                case let .failure(error):
                    continuation.resume(throwing: self.handleError(error: error))
                }
            }
        }
    }

    private func handleError(error: AFError) -> Error {
        if let underlyingError = error.underlyingError {
            let nserror = underlyingError as NSError
            let code = nserror.code
            if code == NSURLErrorNotConnectedToInternet ||
                code == NSURLErrorTimedOut ||
                code == NSURLErrorInternationalRoamingOff ||
                code == NSURLErrorDataNotAllowed ||
                code == NSURLErrorCannotFindHost ||
                code == NSURLErrorCannotConnectToHost ||
                code == NSURLErrorNetworkConnectionLost
            {
                var userInfo = nserror.userInfo
                userInfo[NSLocalizedDescriptionKey] = "Unable to connect to the server"
                let currentError = NSError(
                    domain: nserror.domain,
                    code: code,
                    userInfo: userInfo
                )
                return currentError
            }
        }
        return error
    }
}

Create Network API

Network/NetworkAPI.swift

import Foundation

class NetworkAPI {
    static func getAppliances() async -> [Appliance]? {
        do {
            let data = try await NetworkManager.shared.get(
                path: "/api/v2/appliances?size=4", parameters: nil
            )
            let result: [Appliance] = try self.parseData(data: data)
            return result
        } catch let error {
            print(error.localizedDescription)
            return nil
        }
    }

    private static func parseData<T: Decodable>(data: Data) throws -> T{
        guard let decodedData = try? JSONDecoder().decode(T.self, from: data)
        else {
            throw NSError(
                domain: "NetworkAPIError",
                code: 3,
                userInfo: [NSLocalizedDescriptionKey: "JSON decode error"]
            )
        }
        return decodedData
    }
}

Create view model for ContentView

ContentView.swift

class ContentViewViewModel: ObservableObject {
    @MainActor @Published var errorMessage = ""
    @MainActor @Published var appliances: [Appliance] = []

    func fetchAppliances() async {
        await MainActor.run {
            self.errorMessage = ""
        }
        if let res = await NetworkAPI.getAppliances() {
            await MainActor.run {
                self.appliances = res
            }
        } else {
            await MainActor.run {
                self.errorMessage = "Fetch data failed"
            }
        }
    }
}

Render data in ContentView

ContentView.swift

struct ContentView: View {
    @StateObject var viewModel = ContentViewViewModel()

    var body: some View {
        VStack(spacing: 16) {
            Image(systemName: "globe")
                .imageScale(.large)
                .foregroundColor(.accentColor)
            if viewModel.errorMessage != "" {
                Text(viewModel.errorMessage)
            }
            Button("Fetch") {
                Task {
                    await viewModel.fetchAppliances()
                }
            }
            List {
                ForEach(viewModel.appliances, id: \.id) { item in
                    Text("\(item.brand) - \(item.equipment)")
                }
            }
            .listStyle(.inset)
        }
        .padding()
        .onAppear {
            Task {
                await viewModel.fetchAppliances()
            }
        }
    }
}

And the job is done. Source code

How to import code editor in web

Arno Solo — Thu, 24 Nov 2022 21:10:36 +0000

After reading this article, you will know how to introduce the same code editor as VS Code (Monaco Editor) in your web pages.

Yesterday my boss took on an old and new project, it's new because the vue version used is vue3, it's old because this runs all over the street, and there are js everywhere .

Fortunately, I just need to add a SQL query interface, which is not difficult. Problem is the sql input should have code highlighted. I found some vue components, tried them and found that they didn't work. Finally, I found this Monaco Editor and it works.

The following example is written in ts. If you're using js, remove the types
Install

npm install monaco-editor

Wrap into a component

<!-- CodeEditor.vue -->
<script setup lang="ts">
import * as monaco from 'monaco-editor'
import { onMounted, ref, watch } from 'vue'

const emit = defineEmits(['updateContent'])

const monaco_editor_el = ref<HTMLDivElement>()

let monacoEditor: monaco.editor.IStandaloneCodeEditor

// DOM elements can only be obtained after the component is mounted
onMounted(() => {
  if (monaco_editor_el.value) {
    monacoEditor = monaco.editor.create(monaco_editor_el.value, {
      value: '',
      language: 'sql',
      automaticLayout: true,
    })

    monacoEditor?.setValue(props.content)
    monacoEditor.onDidChangeModelContent(() => {
      if (monacoEditor) {
        emit('updateContent', monacoEditor.getValue())
      }
    })
  }
})
</script>

<template>
  <div class="border-1 border-gray-200 py-4 pr-4">
    <div ref="monaco_editor_el" class="h-200px" />
  </div>
</template>

Use the component

<script setup lang="ts">
const sqlContent = ref('')
function handleContentUpdate(newVal: string) {
  sqlContent.value = newVal
}
</script>

<template>
    <code-editor @update-content="handleContentUpdate" />
</template>

How to convert text into image with svg tag

Arno Solo — Thu, 17 Nov 2022 12:16:44 +0000

Original post

Convert text into image with svg tag. The text is centered and able to wraps automatically.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 125">
    <foreignObject width="200" height="125" x="0" y="0">
        <div class="h-full flex justify-center items-center">
            <p class="text-16px text-center">
                YOUR_TEXT_HERE
            </p>
        </div>
    </foreignObject>
</svg>

viewBox means that the canvas starts at (0,0) and has a length and width of 200 and 125

foreignObject allows HTML elements to be placed in SVG
div flex layout is used to center the text, if you are not familiar with this atomized style, you can take a look at tailwind css. This example is using unocss

A better way to pass parameters to functions

Arno Solo — Thu, 17 Nov 2022 12:12:08 +0000

Original link

If a function requires 4 arguments, then we need to pass in 4 arguments, even if the middle argument is not needed in some cases. So can you pass in a few parameters if you need a few parameters? Yes, you will know after reading this article.

// 👎 Ordinary way of passing parameters
printTodo('Learn Swift', undefined, undefined, ['learning']);

// 👍 Pass in only the parameters needed
printTodo({title: 'Learn Swift', tags: ['learning']});

Ordinary way

function printTodo(
    title = 'Untitled',
    content = '',
    isDone = false,
    tags: string[] = [],
) {
    console.log(`Title: ${title}`);
    console.log(`Content: ${content}`);
    console.log(`Tags: ${tags.map(tag => `#${tag} `).join()} \n`);
}

printTodo('Learn Swift', undefined, undefined, ['learning']);

Pass in only the parameters needed

interface Todo {
    title?: string;
    content?: string;
    isDone?: boolean;
    tags?: string[];
}

function printTodo({
    title = 'Untitled',
    content = '',
    isDone = false,
    tags = [],
}: Todo = {}) {
    console.log(`Title: ${title}`);
    console.log(`Content: ${content}`);
    console.log(`Tags: ${tags.map(tag => `#${tag} `).join()} \n`);
}

printTodo({title: 'Learn Swift', tags: ['learning']});
printTodo();

Responsive asynchronous request status

Arno Solo — Wed, 28 Sep 2022 08:02:10 +0000

Can anyone tell me did I did it right?

pages/products.vue

<template>
        <div v-if="fetchDataState.isFetching" py-4 w-full flex justify-center>
            <spinner />
        </div>
        <div v-else-if="fetchDataState.isFailed" text-center py-4>
            Load failed
        </div>
        <product-list v-else :products="products" />
</template>

<script setup lang="ts">
    const { products, fetchDataState } = useProductsByCatalog();
</script>

composables/useProductsByCatalog.ts

    export function useProductsByCatalog(catalogId: string) {
    const { products, setProducts } = useProducts();
    const { fetchDataState } = useFetchDataState();

    onMounted(() => {
        fetchDataState.isFetching = true;
        setTimeout(() => {
            fetchDataState.isSuccess = true;
            setProducts(xxx)
            }, 1000);
    });

    return {
        products,
        fetchDataState,
    };
    };

composables/useFetchDataState.ts

enum AsyncReqState {
    beforeReq,
    waitRes,
    success,
    failed,
}

class FetchDataState {
    reqState: AsyncReqState;
    constructor() {
        this.reqState = AsyncReqState.beforeReq;
        this.isFetching = false;
    }

    set isBeforeReq(newVal: boolean) {
        if (newVal) {
            this.reqState = AsyncReqState.beforeReq;
        }
    }

    get isBeforeReq() {
        return this.reqState === AsyncReqState.beforeReq;
    }

    set isFetching(newVal: boolean) {
        if (newVal) {
            this.reqState = AsyncReqState.waitRes;
        }
    }

    get isFetching() {
       return this.reqState === AsyncReqState.waitRes;
    }


    set isSuccess(newVal: boolean) {
        if (newVal) {
            this.reqState = AsyncReqState.success;
        }
    }

    get isSuccess() {
        return this.reqState === AsyncReqState.success;
    }


    set isFailed(newVal: boolean) {
        if (newVal) {
           this.reqState = AsyncReqState.failed;
        }
    }

    get isFailed() {
        return this.reqState === AsyncReqState.failed;
    }
}

export function useFetchDataState() {
    const fetchDataState = reactive<FetchDataState>(new FetchDataState());

    return {
        fetchDataState,
    };
}

Ring progress bar

Arno Solo — Sun, 14 Aug 2022 06:37:40 +0000

<RingProgressBar :progress="progress" :rotate-angle="-90"/>
<input type="number" v-model="progress" step="10" min="0" max="100">

<script setup lang="ts">
import { computed } from 'vue';

interface Props {
  progress: number; // 0 ~ 100
  size?: number;
  rotateAngle?: number; // start angle 0 ~ 360
  strokeWidth?: number;
  bgStrokeColor?: string;
  strokeColor?: string;
}

const props = withDefaults(defineProps<Props>(), {
  size: 100,
  rotateAngle: 0,
  bgStrokeColor: '#EAEFF4',
  strokeColor: '#ffaa00',
  strokeWidth: 8

})

const r = 43
const perimeter = r * 2 * Math.PI
const dashoffset = computed(() => {
  let progress = props.progress
  if(progress > 100) progress = 100
  if(progress < 0) progress = 0
  return perimeter * (1- progress/100)
})
</script>

<template>
  <svg :width="size" :height="size" :style="{'color': strokeColor}" viewBox="-50 -50 100 100">
    <circle cx="0" cy="0" :r="r" :stroke-width="strokeWidth" fill="none" :stroke="bgStrokeColor" />
    <circle cx="0" cy="0" :r="r" :stroke-width="strokeWidth" fill="none" stroke="currentColor"
      :stroke-dashoffset="dashoffset"
      :stroke-dasharray="`${perimeter}, ${perimeter}`"
      stroke-linecap='round'
      :transform="`rotate(${rotateAngle})`"
    />
  </svg>
</template>

<style scoped>
</style>

How to apply a mask into a portrait with canvas

Arno Solo — Sun, 07 Aug 2022 00:36:08 +0000

You see, photo contains a lot pixels, and each pixel contains 4 values: r: RED, g: GREEN, b: BLUE, a: ALPHA or opacity. What we need is set the alpha value of original photo as the average of r g b value of mask photo.

    const maskedImageBase64 = await maskPhoto(maskPhotoUrl, originalPhotoUrl)

/**
 * Url to HTMLImageElement
 * @param {string} url: image url
 * @returns {Promise<HTMLImageElement>} HTMLImageElement
 */
export function urlToImageElement(url: string) {
  return new Promise<HTMLImageElement>((resolve, reject) => {
    const img = new Image()
    img.crossOrigin = "anonymous";
    img.src = url
    img.onload = () => resolve(img)
    img.onerror = reject
  })
}

/**
 * mask.jpg + original.jpg => masked.jpg
 * @param {string} maskImageUrl: mask image url
 * @param {string} originalImageUrl: original image url
 * @returns {Promise<string | undefined>} masked image url(base64)
 */
export async function maskPhoto(maskImageUrl:string, originalImageUrl:string) {
  try {
    const maskImage = await urlToImageElement(maskImageUrl)
    const originalImage = await urlToImageElement(originalImageUrl)
    const canvas = document.createElement('canvas')
    if (canvas) {
      canvas.width = originalImage.width
      canvas.height = originalImage.height
      const ctx = canvas.getContext('2d')
      if (ctx) {
        ctx.drawImage(maskImage, 0, 0, canvas.width, canvas.height)
        const maskImagedata = ctx.getImageData(0, 0, canvas.width, canvas.height)
        ctx.drawImage(originalImage, 0, 0, canvas.width, canvas.height)
        const originalImagedata = ctx.getImageData(0, 0, canvas.width, canvas.height)
        for (let i = 0; i < maskImagedata.data.length; i += 4) {
          const alpha = (maskImagedata.data[i] + maskImagedata.data[i+1] + maskImagedata.data[i+2]) / 3
          originalImagedata.data[i+3] = alpha;
        }
        ctx.putImageData(originalImagedata, 0, 0);
        return canvas.toDataURL()
      }
    }
  } catch (error) {
    console.error(error)
  }
}

How 3D printer works

Arno Solo — Sun, 17 Jul 2022 09:59:28 +0000

Hello, I am Arno. Today we are going to find out how 3d printer works by writing a firmware. code link

Setup

Hardware

Firstly, we need a 3D printer that is already able to print. So if we encounter any issue while we are writing firmware, we know it's not a hardware problem. You can buy a machine directly, but I would recommend you assemble one by yourself. In this way, If there is a mechanical problem, you can handle it by yourself since you already familiar with the mechanical structure and also because you have schematic to check which these commercial companies probably not willing to provide. Here are hardware I choosen.

Mother board
- MKS GENL V2.1
which controlled by a AVR mega2560
Stepper driver
- X TMC2008
- Y TMC2008
- Z A4988
- E TMC2225
Mechanical structure
- Big fish i3

Software

In this step, we want make sure the MCU can run our code.

Download vscode
Install addon platformio
Open platformio tag, create new project, choose Board as mega2560, choose Framework as Arduino.
Now we write some test code in src/main.cpp

   // src/main.cpp
   #include <Arduino.h>

   void setup() {
       Serial.begin(115200);
   }

   void loop() {
       Serial.println("Hello from Mega2560.");
       delay(1000);
   }

Connect 3D printing motherboard with compute, click the right arrow ➡ button at the bottom of vscode. Then platformio will compile and upload the test code above into 3D printing motherboard

Open any Serial assistant you prefer, connect the motherboard, if you found Hello from Mega2560. is printed, then you are all set.

Parse gcode

Gcode was generated by Slicer like Cura or Prusa. It tells the printer where the hotend should go and what temperature should it maintain.

Most used gcode

  G1 F200 X2 Y4 ; move to (2,4,0) and set feedrate as 200mm/min, 99% gcodes looks like this
  G28 X0 Y0 ; move X/Y to min endstops
  M104 S200 ; set hotend temp as 200℃
  M20 ; List SD Card
  M23 ; Select SD file

check all gcodes in online documents of Marlin

In this section, we should implement the parse function of Gcode class which is able to convert a gcode string like G1 X2.4 Y5.6 into a gcode object.

gcode object example

  gcode.cmdtype = 'G';
  gcode.cmdnum = 1;
  gcode.X = 2.4;
  gcode.Y = 5.6;
  gcode.hasX = true;
  gcode.hasY = true;

Notice that if you try to use '\n' to split string like me, you need be careful that some gcode string might end with "\r\n"

SD card

In general, we need to configure SPI to use SD card. But we are using mega2560, we can use the SD Library for Arduino. The only thing we need to do is find which pin is the CS (chip select) pin in schematic and call SD.begin(csPin) function in setup function.

Temperature control

Call hotend.update() every 150ms, which will decide turn the heater on or off according to current temperature.

150ms interval was implemented using timer(Heater::init)
Temperature control algorithm is PID(Heater::calculatePid)

Motor control

In this section, we should figure out how to control stepper motor through a stepper motor driver like A4988.

A4988

VMOT

8V~35V DC, A 100uf capacitor needs to be placed between VMOT and GND to quickly respond to the motor's power demand. Beware, this is the only pin that connect high voltage, if you connect other pins with 24V DC, this module will burn in seconds.

1A 1B

Connect to coil 1 of the stepper motor

2A 2B

Connect to coil 2 of the stepper motor

MCU power

Connect to MCU, high and low each represent a different direction.

STEP

Each time this pin receives a pulse, A4988 will dive the stepper motor advance one step. Normal stepper motor used in 3d printer takes 200 steps to complete a revolution, which means 200 pulses.

MS1 MS2 MS3

But in most conditions, to drive stepper motor advance one revolution, 3200 pulses should be feed into A4988. That's because one step is divided into 16 micro steps.

| MS1 | MS2 | MS3 | subdivision |
| --- | --- | --- | ----------- |
| 0 | 0 | 0 | 1 |
| 1 | 0 | 0 | 2 |
| 0 | 1 | 0 | 4 |
| 1 | 1 | 0 | 8 |
| 1 | 1 | 1 | 16 |

ENABLE

LOW: enable module

HIGH: disable module

SLEEP

LOW: sleep

HIGH: active

RESET

LOW: reset module

Steps per unit

Now we know how to control stepper motor through A4988. But how long does the hotend travel(mm) if motor advance one step?

Synchronized pulleys and belts

Take the 2GT 20-tooth synchronous wheel as an example. 2GT means that one tooth corresponds 2mm, then if the synchronous wheel has 20 teeth, each time it rotates 1 revolution, the belt will travels 40mm. And if we motor drive as 16 subdivision, then one revolution means 3200 pulses is needed.

  stepPerUnit = 3200steps / 40mm

Screw

Take a screw with a pitch of 2mm and a lead of 8mm as an example. The lead means the linear distance traveled by the screw for one revolution.

  stepPerUnit = 3200steps / 8mm

Endstop

Endstop has 3 pins: normal open(NO), normal close(NC), circuit common(COM). If we the NC and COM then:

State	on or off	MCU read
not triggered	on	LOW
triggered	break	HIGH

Motion control

How to advance

Assuming that our starting point is (0,0), target point is (6, 3). Then motorX shoud advance (6 x 80) steps, motorY should advance (3 x 80) steps. Of course, we can demand the motorX to advance first then motorY like Plan B. But there is a better way like Plan A.

This is Bresenham's algorithm. Specifically, since it takes 480 steps in the X direction and 240 steps in the Y direction, hotend should move 480 times, each time motorX advance one step, however motorY advance one step each tow times. Each time of motion is called a step event. The total number of times is called step event count, and its value is the greater of X and Y.

// module/Planner.cpp - planBufferLine
block.stepEventCount = getMax(block.steps);

// main.cpp - motion control isr
motorX.deltaError = -(curBlock->stepEventCount / 2);
motorY.deltaError = motorX.deltaError;

motorX.deltaError += curBlock->steps.x;
if (motorX.deltaError > 0) {
    motorX.moveOneStep();
    motorX.deltaError -= curBlock->stepEventCount;
}

motorY.deltaError += curBlock->steps.y;
if (motorY.deltaError > 0) {
    motorY.moveOneStep();
    motorY.posInSteps += curBlock->dir.y;
    motorY.deltaError -= curBlock->stepEventCount;
}

Do not use float to calculate the number of steps directly, because it might lead to step missing.

Multiple motion commands

We should push a block which contains how many steps every motor should advance in a queue, and take it out when needed.

block

  block.dir.x = 1
  block.steps.x = 37
  ...
  block.stepEventCount = 37
  block.accelerateUntil = 6
  block.decelerateAfter = 37
  block.entryRate = 1808
  block.nominalRate = 2001
  block.exitRate = 2001

Speed control

For example, if we want set speed as 1000steps/s, then every step event takes 1ms, which means every 1ms an interrupt should be generated.

Trapezoidal acceleration

We can set speed as constant, but changing the speed can improve efficiency.

Specifically, a block can be divided into an acceleration segment, a constant speed segment and a deceleration segment. Noted that if the length of block is very short, the acceleration graph should becomes a triangle.

Connection speed

In order to prevent the speed and coherence between each block. We need to calculate the entry speed and exit speed of each block. The estimation method is given below. Noted that the arc in the figure is only used to estimate the connection speed. The hotend does not go through this arc in practice.

I hope this article is useful or at least interesting for you.

Change Image brightness then download

Arno Solo — Mon, 04 Jul 2022 08:30:21 +0000

Core function

const processedImagebase64 = new ImageFilter(originalImage)
        .changeBrightness(brightness)
        .changeContrast(contrast)
        .getResult();

Step1: Create a new Image

let originalImage = new Image();

 async function updateOriginalImage(url: string) {
                try {
                    originalImage = await urlToImageElement(url);
                } catch (error) {
                    console.warn(error);
                }
            }

function urlToImageElement(dataUrl: string) {
    return new Promise<HTMLImageElement>((resolve, reject) => {
        const img = new Image();
        img.setAttribute('crossOrigin', 'anonymous');
        img.src = dataUrl;
        img.onload = () => resolve(img);
        img.onerror = reject;
    })
}

Step2: Apply Filter

const processedImagebase64 = new ImageFilter(originalImage)
        .changeBrightness(brightness)
        .changeContrast(contrast)
        .getResult();

export class ImageFilter {
    imagedata: ImageData
    canvas: HTMLCanvasElement;
    ctx: CanvasRenderingContext2D | null;

    /**
     * Create a Image Filter instance
     * @param {HTMLImageElement} inputImage An Image Element was expected
     * @returns call getResult() to get the processed image in base64 format
     */
    constructor(inputImage: HTMLImageElement) {
        this.canvas = document.createElement('canvas');
        this.canvas.width = inputImage.width;
        this.canvas.height = inputImage.height;
        this.ctx = this.canvas.getContext('2d');
        if (this.ctx) {
            this.ctx.drawImage(inputImage, 0, 0, this.canvas.width, this.canvas.height);
            this.imagedata = this.ctx.getImageData(0, 0, this.canvas.width, this.canvas.height);
        } else {
            throw Error("ImageFilter init failed: Can't get context of canvas");
        }
    }

    /**
     * Get processed image in base64 format
     * @returns {string} success: processed image in base64 format
     * @returns {undefined} failed: return undefined
     */
    getResult() {
        if (this.ctx) {
            this.ctx.putImageData(this.imagedata, 0, 0);
            return this.canvas.toDataURL();
        } else {
            return undefined;
        }
    }

    /**
     * Change Brightness
     * @param {number} amount 0:dark, 1:original, 2:brigher
     * @returns {ImageFilter} imageFilter object will be returned
     */
    changeBrightness(amount: number) {
        const data = this.imagedata.data;
        let adjustedAmount = amount;
        if (amount > 2) {
            adjustedAmount = 2;
        }
        if (amount < 0) {
            adjustedAmount = 0;
        }

        let r, g, b;
        for (let i = 0; i < data.length; i += 4) {
            r = data[i] * adjustedAmount;
            g = data[i + 1] * adjustedAmount;
            b = data[i + 2] * adjustedAmount;

            data[i] = r;
            data[i + 1] = g;
            data[i + 2] = b;
        }

        return this;
    }

    /**
     * Change Contrast
     * @param {number} amount 0:less, 1:original, 2:more
     * @returns {ImageFilter} imageFilter object will be returned
     */
    changeContrast(amount: number) {
        const data = this.imagedata.data;
        let adjustedAmount = amount;
        if (amount > 2) {
            adjustedAmount = 2;
        }
        if (amount < 0) {
            adjustedAmount = 0;
        }

        let r, g, b;
        for (let i = 0; i < data.length; i += 4) {
            r = 128 + (data[i] - 128) * adjustedAmount;
            g = 128 + (data[i + 1] - 128) * adjustedAmount;
            b = 128 + (data[i + 2] - 128) * adjustedAmount;

            data[i] = r;
            data[i + 1] = g;
            data[i + 2] = b;
        }

        return this;
    }
}

Step3: Download processed Image

async function downloadImage(base64: string, fileName: string) {
                let tmpLink = document.createElement('a');
                tmpLink.download = fileName;
                tmpLink.href = base64;
                tmpLink.click();
            }