DEV Community: Akira Kashihara

How to Draw a Vertical Line on a Heatmap Using seaborn, Python

Akira Kashihara — Sat, 09 Jul 2022 03:10:37 +0000

I want to draw a vertical line on a heatmap to grasp when the event occurred on the analysis object. For example, the heatmap expresses the result of STFT (Short-Time Fourier Transform) has two dimensions; the x-axis is the time axis, and the y-axis indicates frequency.

Source Code and The Result

Source Code

import matplotlib.pyplot as plt
import numpy as np
import seaborn as sns

# Make the sample data
arr = np.random.rand(20, 20)

# Draw the heatmap (a figure on the left)
fig, (ax1, ax2) = plt.subplots(1, 2)
sns.heatmap(arr, vmin=0, vmax=5, cmap="jet", ax=ax1)

# Add the vertical line on the headmap (a figure on the right)
sns.heatmap(arr, vmin=0, vmax=5, cmap="jet", ax=ax2)
ax2.axvline(x=4, linewidth=2, color="w")

# Drawing
plt.show()

The Result

The figure on the left side does not draw a vertical line, and the figure on the right side draws one.

Reference

matplotlib.org

This original article is the following that is written by me. This is a translation of a portion of this original article from Japanese to English.

Pythonのseabornで描画したヒートマップ上に垂直線を引く方法 #matplotlib - Qiita

はじめに　ヒートマップは、横軸と縦軸に空間的な座標をとって表示することが良くあります。それに加え、横軸に時間、縦軸に周波数をとるSTFT（Short-Time Fourier Transform)…

qiita.com

I Could Not Run a Sample Code to Use MySQL with Go on Docker (Error 1064)

Akira Kashihara — Sat, 02 Jul 2022 02:16:52 +0000

I executed the insert statement using Go on Docker, and I got the following error.

panic: Error 1064: You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near 'generated(owner, repository) VALUES( ?, ? )' at line 1

I made the source code by reference to README.md of github.com/go-sql-driver/mysql package GitHub, but I got the error.

I want to share the solution to resolve this problem.
I do not have any idea the reason why the source code I wrote first did not run, so if you know about the reason, I would appreciate it if you could tell me about that.

The Source Code I Wrote for The First Time

I use github.com/go-sql-driver/mysql package to use MySQL.
The references are the official README.md, a sample code, the article Masao wrote (in Japanese), and the MariaDB document.

mDB.go

package mDB

import (
    "database/sql"
    "log"

    _ "github.com/go-sql-driver/mysql"
)

type MDB struct {
    Host     string
    User     string
    Password string
    Database string
}

func (m MDB) Test() {
    db, er := sql.Open("mysql", m.User+":"+m.Password+"@"+"tcp("+m.Host+":3306)"+"/"+m.Database)
    if er != nil {
        log.Fatal(er)
    }
    defer db.Close()

    er = db.Ping()
    if er != nil {
        panic(er.Error())
    }

    stmtIns, err := db.Prepare("insert into generated(owner, repository) values( ?, ? )")
    if err != nil {
        panic(err.Error()) // proper error handling instead of panic in your app
    }
    defer stmtIns.Close() // Close the statement when we leave main() / the program terminates

    stmtIns.Exec("Hacknock", "testdayo")
}

I got the following response when mDB.Test() runs.

panic: Error 1064: You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near 'generated(owner, repository) values( ?, ? )' at line 1 [recovered]
panic: Error 1064: You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near 'generated(owner, repository) values( ?, ? )' at line 1

This source code is much the same as the sample code...

The Source Code That Runs Fine

I got the expected result if I modify to the insert statement like the one below, as the result of various trials.

insert into [database name].generated(owner, repository) values( ?, ? )

I specified the database name on sql.Open... Why do I need to specify the database name on the insert statement...?
The following code runs fine.

package mDB

import (
    "database/sql"
    "log"

    _ "github.com/go-sql-driver/mysql"
)

type MDB struct {
    Host     string
    User     string
    Password string
    Database string
}

func (m MDB) Test() {
    db, er := sql.Open("mysql", m.User+":"+m.Password+"@"+"tcp("+m.Host+":3306)"+"/"+m.Database)
    if er != nil {
        log.Fatal(er)
    }
    defer db.Close()

    er = db.Ping()
    if er != nil {
        panic(er.Error())
    }

    stmtIns, err := db.Prepare("insert into " + m.Database + ".generated(owner, repository) values( ?, ? )")
    if err != nil {
        panic(err.Error()) // proper error handling instead of panic in your app
    }
    defer stmtIns.Close() // Close the statement when we leave main() / the program terminates

    stmtIns.Exec("Hacknock", "testdayo")
}

I Want to Test Local Plural Packages on Go

Akira Kashihara — Wed, 22 Jun 2022 07:08:58 +0000

I faced the problem that it is difficult to test local plural packages on Go. For example, I want to test all packages (calculate and outLog) under src directory, as shown below.

./src
  |- calculate/
    |- calculate.go
    |- calculate_test.go
    |- go.mod
  |- outLog/
    |- outLog.go
    |- outLog_test.go
    |- go.mod
main.go
go.mod

You can test all packages using the below command if you do not make go.mod in calculate and outLog (it means that if you do not initialize calculate and outLog as a module).
However, you cannot use these packages on main.go if you do not initialize them as a module, so you should initialize them.

This article's goal is that I know how to test local plural packages after initializing them as packages(modules) on Go.
I could not find good TIPS in Google, so I took a trial-and-error. I want to share them.

On the other hand, Go has interface, so I guess that we can use DI(Dependency Injection) on Go. My guess is that it is better to test each local package after dividing dependencies among all packages(Single responsibility principle?), but I'm a beginner at using Go, so it is difficult for me to use DI for now. I shared this article topic as interim progress to DI.

Initialize Each Local Package (Module)

Before testing, I initialize each package using the following command.

go mod init [any name of your package you decided]
go mod tidy

After that, I make a path to each package. I run the following command on the directory, which has main.go.

go mod edit -replace [any name of your package you decided]=[relative path to each module]
go mod tidy

In this article, I named playground/calculate and playground/outLog to each package, so main.go has the following source code.

package main

import (
    "fmt"
    "playground/calculate"
    outlog "playground/outLog"
)

func main() {
    ol := outlog.OutLog{To_console: true, To_file: false}
    ol.Error("Success to output an Error🎉")
    res := calculate.Calculate(3)
    fmt.Printf("The result of calculation：%d", res)
}

How to Test All Packages?

Test Files on the Directory, Which Has `main.go`

I'm sure that I can test all packages if I make a test file on the directory, which has main.go as shown below.

package main

import (
    "playground/calculate"
    outlog "playground/outLog"
    "testing"
)

func TestCal(t *testing.T) {
    result := calculate.Calculate(2)
    if result != 2*2 {
        t.Fatal("Not match the result of calculation.")
    }
}

func TestConsole(t *testing.T) {
    outLog := outlog.OutLog{To_console: true, To_file: false}
    rec, err := outLog.Error("Please find me!!🐬")
    if rec == "" || err != nil {
        t.Fatal("The failed to output an error.")
    }
}

After that, I run the following command on the directory, which has main.go.

go test -v ./...

However, I do not want to test in this way because I have to make a lot of test files on the directory which has main.go.

Test All Packages using `go test -v [package name]`

This is a better solution, I think, but this command will be long if I use a log to packages.
In this article, go.mod of main.go is the following.

module playground/main

go 1.18

replace playground/outLog => ./src/outLog

replace playground/calculate => ./src/calculate

require (
    playground/calculate v0.0.0-00010101000000-000000000000
    playground/outLog v0.0.0-00010101000000-000000000000
)

I run the following command on the directory, which has main.go if I want to test playground/calculate and playground/outLog.

go test -v playground/calculate playground/outLog

After that command runs, I get the following result.

=== RUN   TestCal
--- PASS: TestCal (0.00s)
PASS
ok      playground/calculate    (cached)
=== RUN   TestConsole
2022/06/17 15:55:19 [2022-06-17T15:55:19+09:00][Error] - Please find me!!🐬
--- PASS: TestConsole (0.00s)
PASS
ok      playground/outLog   (cached)

In this way, the directory has main.go does not need to have too many test files. It is a good point.

Conclusion

I do not have the best idea to resolve this problem. If you have any good ideas to resolve it, I would greatly appreciate it if you could let me know your idea.

This original article is the following that is written by me. This is a translation of a portion of this original article from Japanese to English.

Goで一度に複数パッケージのテストをしたい

zenn.dev

How to Display a Web Application with Basic Authentication in WKWebView using SwiftUI (iOS)

Akira Kashihara — Wed, 15 Jun 2022 11:07:21 +0000

This article shows how to display a web application with basic authentication in WKWebView using SwiftUI.

Source Code

This source code was made with reference to "WKWebView with Basic auth" and "Using WebKit Delegates".

ContentView.swift

import SwiftUI

struct ContentView: View {
    var body: some View {
        WebViewTest()
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

WebViewTest.swift

import SwiftUI
import WebKit

struct WebViewTest: UIViewRepresentable {
    func updateUIView(_ uiView: WKWebView, context: Context) {
        //
    }

    func makeCoordinator() -> Coordinator {
        Coordinator(self)
    }

    var url: String = "https://hogehoge.hoge"

    func makeUIView(context: Context) -> WKWebView {
        let view = WKWebView()
        view.navigationDelegate = context.coordinator
        view.load(URLRequest(url:URL(string: url)!))
        return view
    }

    class Coordinator: NSObject, WKNavigationDelegate {
            let parent: WebViewTest

            init(_ parent: WebViewTest) {
                self.parent = parent
            }

        func webView(_ webView: WKWebView, didReceive challenge: URLAuthenticationChallenge,
                         completionHandler: @escaping(URLSession.AuthChallengeDisposition, URLCredential?) -> Void) {
                let credential = URLCredential(user: "The user name to Basic Auth.",
                                               password: "The password to Basic Auth.",
                                               persistence: .forSession)
                completionHandler(.useCredential, credential)
            }
        }
}

struct WebViewTest_Previews: PreviewProvider {
    static var previews: some View {
        WebViewTest()
    }
}

The Result

I cannot show you the contents of the web application. But I guess that you can check that all contents (text and images) are loaded.

This original article is the following that is written by me. This is a translation of a portion of this original article from Japanese to English.

SwiftUIのWKWebViewでBasic認証を行いWebアプリを表示する（iOS）

zenn.dev

How to Display a Web Application with Basic Authentication in WebView using Jetpack Compose (Android)

Akira Kashihara — Thu, 09 Jun 2022 00:44:47 +0000

This article shows how to display a web application with Basic Authentication in WebView using Jetpack Compose.
The sample code on this article was made with reference to the thread on StackOverflow. StackOverflow's code is written in Java, but this article shows you the sample code in kotlin.

Source Code

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent{ MyWebClient(url = "https://hogehoge.hoge")}
    }
}

@SuppressLint("SetJavaScriptEnabled")
@Composable
fun MyWebClient(url: String) {

    AndroidView(factory = ::WebView,
    update = { webView ->
        webView.webViewClient = MyWebViewClient()
        webView.settings.javaScriptEnabled = true
        webView.loadUrl(url)

    })
}

// Ovverride onReceivedHttpAuthRequest in new class which extends WebViewClient().
private class MyWebViewClient: WebViewClient() {
    @Override
    override fun onReceivedHttpAuthRequest(
        view: WebView?,
        handler: HttpAuthHandler?,
        host: String?,
        realm: String?
    ) {
        if (handler != null) {
            handler.proceed("The user name to Basic Auth.", "The password to Basic Auth.")
        }
    }
}

The Result

I cannot show you the contents of the web application. But I guess that you can check that all contents (text and images) are loaded.

This original article is the following that is written by me. This is a translation of a portion of this original article from Japanese to English.

ComposeのWebViewでBasic認証を行いWebアプリを表示する（Android）

zenn.dev

How to Mock query Method of MariaDB using spyOn on Vitest

Akira Kashihara — Fri, 03 Jun 2022 06:38:51 +0000

I faced a problem to mock query of MariaDB on Vitest. I share the problem and its solution here.
I appreciate that you point out my mistakes if you find them.

The Method to Be Test

You might have a way to mock query of MariaDB that is in the mocked class in __mocks__ directory according to "ES6 Class Mocks" on Jest official website. However, I want to quickly mock query method using spyOn because I just want to test whether the parent method can get the error query method throws.

The Method to Be Tested

This section indicates the method to be tested, which is called checkCardName.

import mariadb, { Connection, Pool } from "mariadb";
export default class OperateMariadb {
  pool: Pool;
  connection: Connection | undefined;
  constructor() {
    this.pool = mariadb.createPool({
      host: process.env.MARIADB_HOST,
      user: process.env.MARIADB_USER,
      password: process.env.MARIADB_PASSWORD,
      database: process.env.MARIADB_DATABASE,
    });
  }

  async getConnection(): Promise<void> {
    try {
      this.connection = await this.pool.getConnection();
    } catch (err: any) {
      throw new Error(err);
    }
  }

  async disconnection(): Promise<boolean> {
    if (this.connection) {
      try {
        await this.connection.end()
        return true;
      } catch (err: any) {
        throw new Error(err);
      }
    } else {
      throw new Error("The connection has not been established.")
    }
  }

  poolEnd() {
    this.pool.end();
  }

  // This method to be tested.
  async checkCardName(cardName: string): Promise<boolean> {
    try {
      if (this.connection) {
        const result = await this.connection.query(
          "select * from cards where card_name = ?",
          [cardName]
        );
        delete result.meta;
        const lengthObj = Object.keys(result).length;
        if (lengthObj > 0) {
          return true;
        } else if (lengthObj === 0) {
          return false;
        } else {
          throw new Error("Object length is invalid in checkCardName.");
        }
      } else {
        throw new Error("The database connection does not exist.");
      }
    } catch (err: any) {
      throw new Error(err);
    }
  }
}

The Code on My Idea (This code is not good)

The following is my idea but it is not good.

  it("con.query throws error", async () => {
    const operateMariadb = new OperateMariadb();
    await operateMariadb.getConnection();
    vi.spyOn(operateMariadb.connection, "query").mockImplementation(() =>
      Promise.reject(new Error("Query Error."))
    );

    expect(operateMariadb.checkCardName("king")).rejects.toThrow(
      "Query Error."
    );
    operateMariadb.disconnection();
    operateMariadb.poolEnd();
  });

I'm not sure that this spyOn usage to mock await this.connection.query("select * from cards where card_name = ?",[cardName]); in checkCardName. It runs and passes correctly, but it is not good because it gets an error as the following.

What's Wrong with This Code?

Vitest only gives us a brief error message, and I do not have any idea what's wrong with this code, so I run the testing on Jest. Jest gives us the following.

I guess Jest told me operateMariadb.connection can be undefined, which is wrong.
I insert if (operateMariadb.connection) before the error, and this testing runs without any errors.
The following is the final test code.


describe("Error handling testing.", () => {
  it("con.query throws error", async () => {
    const operateMariadb = new OperateMariadb();
    await operateMariadb.getConnection();
    if (operateMariadb.connection) { //Vitest and Jest throws an error on "query" in the line after this without this if statement.
      vi.spyOn(operateMariadb.connection, "query").mockImplementation(() =>
        Promise.reject(new Error("Query Error."))
      );

      expect(operateMariadb.checkCardName("king")).rejects.toThrow(
        "Query Error."
      );

      operateMariadb.poolEnd();
    }
  });

  it("this.connection is undefined.", () => {
    const operateMariadb = new OperateMariadb();

    expect(operateMariadb.checkCardName("king")).rejects.toThrow(
      "The database connection does not exist."
    );

    operateMariadb.poolEnd();
  });
});

You can check the execution result of this code in the following URL to the Github Actions page.

https://github.com/KASHIHARAAkira/vitest-playground/actions/runs/2432378503

This original article is the following that is written by me. This is a translation of a portion of this original article from Japanese to English.

VitestでMariaDBのqueryメソッドをモックする

zenn.dev

To Run Services After Deploying The MariaDB Service Using Docker Compose

Akira Kashihara — Sat, 28 May 2022 05:55:29 +0000

The depends_on key in docker-compose.yml can set the order to start running each service such as starting the Node.js service after starting the MariaDB service. However, it cannot control the order to run services after deploying the dependent service as shown the NG case in the figure below. For example, in the case of using MariaDB(a similar database to MySQL), it means that Docker runs any services without waiting to finish initializing MariaDB such as making tables if you just set the depends_on keys only.
This article shows the way to run the Node.js service after deploying the MariaDB service as examples to run services after deploying the dependent service using Docker Compose.
The following figure indicates the comparison of running services order between only using the depends_on key and this article method.

Source Code

This sample source code was made based on the source code that snowcait told me in the Discussion of this original article (written in Japanese). I thank snowcait to give me this idea.
As important notes, you should type the user name and password that are initialized in /docker-entrypoint-initdb.d to the test command in the healthcheck key if you need Docker to wait for the finish to run the script in /docker-entrypoint-initdb.d before running Node.js. It is better to make the code to access a new table that was made in /docker-entrypoint-initdb.d script if you only make some tables without making other users.

.github/workflows/test.yml

name: Actions Test

on:
  push:
    branches:
      - dev-*

jobs:
  sandbag_test:
    runs-on: ubuntu-20.04
    timeout-minutes: 5
    env:
      MARIADB_ROOT_PASSWORD: ${{secrets.MARIADB_ROOT_PASSWORD}}
      MARIADB_DATABASE: ${{secrets.MARIADB_DATABASE}}
      MARIADB_WEB_USER: ${{secrets.MARIADB_WEB_USER}}
      MARIADB_WEB_PASSWORD: ${{secrets.MARIADB_WEB_PASSWORD}}
      MARIADB_API_USER: ${{secrets.MARIADB_API_USER}}
      MARIADB_API_PASSWORD: ${{secrets.MARIADB_API_PASSWORD}}
      MARIADB_PORT: ${{secrets.MARIADB_PORT}}
      DB_HOST: ${{secrets.DB_HOST}}
      WEB_PORT: ${{secrets.WEB_PORT}}

    steps:
      - uses: actions/checkout@v2

      - name: Shutdown MariaDB
        run: sudo service mysql stop

      - name: Run docker-compose
        shell: bash
        run: |
          touch .env
          docker-compose -v
          docker-compose up --build --abort-on-container-exit
        working-directory: ./

docker-compose.yml

version: '3'
services:
  mariadb:
    image: mariadb:10.7
    container_name: sandbag_mariadb
    environment:
      - MARIADB_ROOT_PASSWORD=${MARIADB_ROOT_PASSWORD}
      - MARIADB_DATABASE=${MARIADB_DATABASE}
      - MARIADB_USER=${MARIADB_WEB_USER}
      - MARIADB_PASSWORD=${MARIADB_WEB_PASSWORD}
      - MARIADB_API_USER=${MARIADB_API_USER}
      - MARIADB_API_PASSWORD=${MARIADB_API_PASSWORD}
      - MARIADB_HOST=%
    tty: true
    volumes:
      - ./sql:/docker-entrypoint-initdb.d
    networks:
      - datastream
    healthcheck:
      test: ["CMD", "mariadb", "-u${MARIADB_API_USER}", "-p${MARIADB_API_PASSWORD}", "-e", "use ${MARIADB_DATABASE}"]
      interval: 10s
      timeout: 5s
      retries: 5
      start_period: 5s
  web:
    env_file:
      - .env
    build:
      context: ./web/.
      dockerfile: "Dockerfile"
    ports:
      - ${WEB_PORT}:${WEB_PORT}
    depends_on:
      mariadb:
        condition: service_healthy
    command: ["npm", "test"]
    volumes:
      - ./volume/log/web:/usr/src/logger/web
    networks:
      - datastream
networks:
  datastream:

The Execution Result of The Source Code

You can check the execution result of this source code in the following URL.

https://github.com/KASHIHARAAkira/actions-playground/runs/6634973345?check_suite_focus=true

Acknowledgement

As I indicated before, snowcait provided me the most of this source code in the Discussion of this original article (written in Japanese). I thank snowcait to give me this idea.

This original article is the following that is written by me. This is a translation of a portion of this original article from Japanese to English.

docker composeでMariaDBの起動を待ちNode.jsを起動する

zenn.dev

Code Example of LEB Blinking and UART Communication for dsPIC30F4013

Akira Kashihara — Sun, 22 May 2022 01:31:19 +0000

dsPIC series are famous for embedded system development. However, it is difficult for me to use dsPIC30F4013 to blink LED and communicate with the PC through the UART (Universal Asynchronous Receiver/Transmitter) communication.
I share the sample code of LED Blinking and UART communication for dsPIC30F4013.
This code works with the internal clock.
It blinks LED at 1Hz intervals and transfers "S" through the UART communication.

Circuit

Photo (Breadboard Prototyping)

Wiring Table

dsPIC30F4013	Peripheral Devices (LED or FT232)
Vdd	3V3(FT232)
Vss	GND(FT232)
pin25(U1TX)	RXD(FT232)
pin26(U1RX)	TXD(FT232)
pin27	Anode(LED)

Source Code

// FOSC
#pragma config FOSFPR = FRC_PLL4             // Oscillator (Internal Fast RC (No change to Primary Osc Mode bits))
#pragma config FCKSMEN = CSW_FSCM_OFF   // Clock Switching and Monitor (Sw Disabled, Mon Disabled)

// FWDT
#pragma config FWPSB = WDTPSB_16        // WDT Prescaler B (1:16)
#pragma config FWPSA = WDTPSA_512       // WDT Prescaler A (1:512)
#pragma config WDT = WDT_OFF            // Watchdog Timer (Disabled)

// FBORPOR
#pragma config FPWRT = PWRT_64          // POR Timer Value (64ms)
#pragma config BODENV = BORV27          // Brown Out Voltage (2.7V)
#pragma config BOREN = PBOR_ON          // PBOR Enable (Enabled)
#pragma config MCLRE = MCLR_DIS          // Master Clear Enable (Enabled)

// FGS
#pragma config GWRP = GWRP_OFF          // General Code Segment Write Protect (Disabled)
#pragma config GCP = CODE_PROT_OFF      // General Segment Code Protection (Disabled)

// FICD
#pragma config ICS = ICS_PGD            // Comm Channel Select (Use PGC/EMUC and PGD/EMUD)

// #pragma config statements should precede project file includes.
// Use project enums instead of #define for ON and OFF.

#include <xc.h>

unsigned int counter = 0;   // Initialize counter

int main() {
    /* OSCCON oscillator setting register */
    OSCCONbits.CF = 0;  // Not detected clock failure
    OSCCONbits.COSC = 0b111;    // PLL oscillator which was defined FOSFPR
    OSCCONbits.LOCK = 1;    // PLL is in lock
    OSCCONbits.LPOSCEN = 0; // Secondary oscillator is disabled
    OSCCONbits.NOSC = 0b111;    // New PLL oscillator which was defined
    OSCCONbits.OSWEN =  0;  // Switch is completed
    OSCCONbits.POST = 0;    // Postscaler does not alter clock

    /* IO Setting */
    TRISA = 0;  // Digital out
    TRISB = 0;  // Digital out
    TRISC = 0;  // Digital out
    TRISD = 0;  // Digital out
    TRISF = 0;  // Digital out
    TRISFbits.TRISF2 = 1;   // RX pin setting
    TRISFbits.TRISF3 = 0;   // TX pin setting
    TRISBbits.TRISB0 = 1;   // Analog in
    TRISBbits.TRISB1 = 1;   // Analog in
    TRISBbits.TRISB2 = 1;   // Analog in
    TRISBbits.TRISB3 = 1;   // Analog in
    TRISBbits.TRISB4 = 1;   // Analog in
    TRISBbits.TRISB5 = 1;   // Analog in
    TRISBbits.TRISB8 = 1;   // Analog in
    TRISBbits.TRISB9 = 1;   // Analog in
    TRISBbits.TRISB10 = 1;  // Analog in
    TRISBbits.TRISB11 = 1;  // Analog in
    TRISBbits.TRISB12 = 1;  // Analog in

   /*Timer Setting Register(ADC Sampling Time Management)*/
    T1CONbits.TON = 0; //Timer OFF. タイマーOFF.
    T1CONbits.TCS = 0; //Use internal Clock. 内部クロックを使用.
    T1CONbits.TGATE = 0; //Gate time accumulate is off.ゲートタイム累積無効. 
    T1CONbits.TSIDL = 0; //Continue on IDLE mode. アイドルモードでタイマ継続.
    T1CONbits.TSYNC = 0; //NONE. 無視(TCS = 0のとき)
    T1CONbits.TCKPS = 0b11; //prescaler 256

    /*Interrupt Setting*/
    PR1 = 28; //700Hz
    IPC0bits.T1IP = 5; //Interrupt priority is 5. 優先順位5, 高いほうが優先順位が高い.
    IEC0bits.T1IE = 1; //Timer 1 interrupt is enable. タイマ1割り込みON.
    IFS0bits.T1IF = 0; //Timer 1 Interrupt flag is off. タイマ1割り込みフラグ0。
    T1CONbits.TON = 1; //Timer ON

    /* UART Setting */ 
    U1MODEbits.UARTEN = 1; //UART disabled
    U1MODEbits.USIDL = 0; //Run UART on IDLE mode
    U1MODEbits.ALTIO = 0; //Alternate pin is enabled
    U1MODEbits.WAKE = 0; //Wakeup is disabled
    U1MODEbits.LPBACK = 0; //Loopback mode is disabled
    U1MODEbits.ABAUD = 1; //U1RX to Capture
    U1MODEbits.PDSEL = 0; //No parity 8-bit
    U1MODEbits.STSEL = 0; //1STOP bit
    U1STAbits.UTXISEL = 1; //When buffer is empty
    U1STAbits.UTXBRK = 0; //Transfer break is normal mode
    U1STAbits.URXISEL = 0b00; //When accepting any character, interrupt is occured
    U1STAbits.ADDEN = 0; //Address detector is disabled
    U1STAbits.OERR = 0; //Not Overrun (First write only)

    U1BRG = 49;
    U1MODEbits.UARTEN = 1; //UART disabled
    U1STAbits.UTXEN = 1; //UART TX is enabled.

    PORTFbits.RF5 = 1;   // Invert bit
    while(1);
}

int flagLED = 0;
int counterLED  = 0;
void __attribute__((interrupt, shadow, auto_psv)) _T1Interrupt(void) {
    IFS0bits.T1IF = 0;  // Flag is low
    counterLED++;
    if(counterLED >= 1000) {
        printf("S\n");
        if (flagLED == 0) flagLED = 1;
        else flagLED = 0;
        PORTFbits.RF5 = flagLED;
        counterLED = 0;
    }
}

Demo

This original article is the following that is written by me. This article was translated from Japanese to English.

dsPIC30F4013でLチカとUART通信をする

zenn.dev

connect-redis on Docker with Password

Akira Kashihara — Sun, 15 May 2022 12:33:32 +0000

I want to share the solution to use connect-redis with a password on Docker.

Problem

I use redis@v4.
connect-redis official website provides the following code. However, this code does not work correctly on Docker using docker-compose. This code does not include password settings. It is also one of the problems.
I guess that this container connects to localhost on the setting of this code. So it might be its cause.

const session = require("express-session")
let RedisStore = require("connect-redis")(session)

// redis@v4
const { createClient } = require("redis")
let redisClient = createClient({ legacyMode: true })
redisClient.connect().catch(console.error)

app.use(
  session({
    store: new RedisStore({ client: redisClient }),
    saveUninitialized: false,
    secret: "keyboard cat",
    resave: false,
  })
)

Solution

redis on npm website provides me to solve these problems.
It indicates the following code. So I try to make a code according to this code.

createClient({
  url: 'redis://alice:foobared@awesome.redis.server:6380'
});

The contents of this URL are the following.

redis[s]://[[username][:password]@][host][:port][/db-number]

Of course, this is an URL; you should not use "/," "+," "&" and "?".
host is a service name that is written on docker-compose.yml.
The following is a sample code.
You must add legacyMode:true to createClient argument. The process does not escape from store process if you do not add this option.

const RedisStore = require("connect-redis")(session);

// redis@v4
const { createClient } = require("redis")
console.log(env.REDIS_PASS);
// let redisClient = createClient({host: 'redisdb', port: 6379, legacyMode: true, password: env.REDIS_PASS })
let redisClient = createClient({url: `redis://${env.REDIS_USER}:${env.REDIS_PASS}@${env.REDIS_HOST}:${env.REDIS_PORT}`, legacyMode: true})
redisClient.connect().catch(console.error);

The description of each vairable on this code is the following.

REDIS_USER=user name（default value is "default"）
REDIS_PASS=password
REDIS_HOST=host name (It is written to docker-compose.yml)
REDIS_PORT=port number（default value is 6379）

This original article is the following that is written by me. This article was translated from Japanese to English.

connect-redisをDockerで使うときに躓いた

zenn.dev

How to upload files to Google Cloud Storage using Javascript on only the browser

Akira Kashihara — Mon, 09 May 2022 04:08:26 +0000

This article shows how to upload files to Google Cloud Storage using Javascript on only the browser (without Node.js).

Implementation

This source code was made based on GCP(Google Cloud Platform) Official reference. This article uses JSON API GCP provides and OAuth2.0.

Auth (OAuth2.0)

The goal in this section is to get an access token to access Cloud Storage. We get it through Google OAuth2.0. "OAuth 2.0 for Client-side Web Applications" shows us the necessary source code for authorization. This is a reference to make the following source code.

Get Necessary Information

You need to get the necessary information to use Cloud Storage through JSON API. These are the following three items.

Client ID
Redirect URL
Scope

Please refer to "How to get Google Client ID and Client Secret?" if you do not have any idea to get them. Additionally, please make the "OAuth consent screen." Please select the appropriate scope according to "
Cloud Storage authentication".

Get Access Token (Source Code and Result)

This section shows the source code that gets access token only. It provides the function to get an access token through the OAuth consent screen when the user clicks the "Get Access Token" button.

Source Code

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <script type="text/javascript" src="/index.js" defer></script>
  </head>
  <body>
    <button onclick="oauthSignIn()">Get Access Token</button>
    <form id="formElem">
      <input type="file" id="file-upload" name="file-upload" />
      <input type="submit" id="submit-button" disabled />
    </form>
  </body>
</html>

index.js

/**
 * Extract the access token from the URL
 */
for (value of location.hash.split("&")) {
  if (value.indexOf("access_token=") === 0) {
    const access_token = value.split("=")[1];
    const ele = document.createElement("p");
    ele.textContent = "Your access token is '" + access_token + "'.";
    document.body.appendChild(ele);
  }
}
/**
 * The following source code is from the page.
 * https://developers.google.com/identity/protocols/oauth2/javascript-implicit-flow#oauth-2.0-endpoints
 */
/*
 * Create a form to request an access token from Google's OAuth 2.0 server.
 */
function oauthSignIn() {
  // Google's OAuth 2.0 endpoint for requesting an access token
  var oauth2Endpoint = "https://accounts.google.com/o/oauth2/v2/auth";

  // Create <form> element to submit parameters to OAuth 2.0 endpoint.
  var form = document.createElement("form");
  form.setAttribute("method", "GET"); // Send as a GET request.
  form.setAttribute("action", oauth2Endpoint);

  // Parameters to pass to OAuth 2.0 endpoint.
  var params = {
    client_id: [Client ID you set up before section],
    redirect_uri: [Refirect URL you set up before section, for example, "http://localhost:3000"],
    response_type: "token",
    scope: [Scope you set up before section, for example, "https://www.googleapis.com/auth/devstorage.read_write"],
    include_granted_scopes: "true",
    state: "pass-through value",
  };

  // Add form parameters as hidden input values.
  for (var p in params) {
    var input = document.createElement("input");
    input.setAttribute("type", "hidden");
    input.setAttribute("name", p);
    input.setAttribute("value", params[p]);
    form.appendChild(input);
  }

  // Add form to page and submit it to open the OAuth 2.0 endpoint.
  document.body.appendChild(form);
  form.submit();
}

Result

Upload Files to Cloud Storage (Source Code and Result)

This section shows how to upload files to Cloud Storage using the access token you get in the previous section. You need to make a new bucket on Cloud Console. If you don't know how to make it, please refer to "Create storage buckets".

Source Code

The HTML file is the same as before. Please fix the Javascript source code as the following.

index.js

const bucketName = [Bucket name you made];
const clientID = [Client ID you set up];
const redirectURL = [Redirect URL];
const scope = [Scope];
let accessToken = null;

/**
 * Extract the access token from the redirect URL
 */
for (value of location.hash.split("&")) {
  if (value.indexOf("access_token=") === 0) {
    const access_token = value.split("=")[1];
    const ele = document.createElement("p");
    ele.textContent = "Your access token is '" + access_token + "'.";
    accessToken = access_token;
    document.body.appendChild(ele);
    document.getElementById("submit-button").disabled = false;
  }
}

/**
 * Upload file
 */
formElem.onsubmit = async (e) => {
  e.preventDefault();
  const file = document.getElementById("file-upload");
  const filename = file.value.split("\\").slice(-1)[0];
  console.log("File Name: " + JSON.stringify(filename));
  const extension = filename.split(".").slice(-1)[0].toLocaleLowerCase();
  let contentType = null;
  // Detect Content Type
  if (extension === "png") {
    contentType = "image/png";
  } else if (extension === "jpg" || extension === "jpeg") {
    contentType = "image/jpeg";
  } else if (extension === "svg") {
    contentType = "image/svg+xml";
  } else if (extension === "mpeg") {
    contentType = "video/mpeg";
  } else if (extension === "webm") {
    contentType = "video/webm";
  } else {
    alert("This file is invalid.");
  }
  // Load file and upload it
  if (contentType) {
    const reader = new FileReader();
    reader.addEventListener("load", async (event) => {
      const bytes = event.target.result;
      let response = await fetch(
        `https://storage.googleapis.com/upload/storage/v1/b/${bucketName}/o?uploadType=media&name=${filename}`,
        {
          method: "POST",
          headers: {
            "Content-Type": contentType,
            Authorization: `Bearer ${accessToken}`,
          },
          body: bytes,
        }
      );

      let result = await response.json();
      if (result.mediaLink) {
        alert(
          `Success to upload ${filename}. You can access it to ${result.mediaLink}`
        );
      } else {
        alert(`Failed to upload ${filename}`);
      }
    });

    reader.readAsArrayBuffer(file.files[0]);
  }
};

/**
 * The following Source code originated from https://developers.google.com/identity/protocols/oauth2/javascript-implicit-flow#oauth-2.0-endpoints
 */
/*
 * Create a form to request an access token from Google's OAuth 2.0 server.
 */
function oauthSignIn() {
  // Google's OAuth 2.0 endpoint for requesting an access token
  var oauth2Endpoint = "https://accounts.google.com/o/oauth2/v2/auth";

  // Create <form> element to submit parameters to OAuth 2.0 endpoint.
  var form = document.createElement("form");
  form.setAttribute("method", "GET"); // Send as a GET request.
  form.setAttribute("action", oauth2Endpoint);

  // Parameters to pass to OAuth 2.0 endpoint.
  var params = {
    client_id: clientID,
    redirect_uri: redirectURL,
    response_type: "token",
    scope: scope,
    include_granted_scopes: "true",
    state: "pass-through value",
  };

  // Add form parameters as hidden input values.
  for (var p in params) {
    var input = document.createElement("input");
    input.setAttribute("type", "hidden");
    input.setAttribute("name", p);
    input.setAttribute("value", params[p]);
    form.appendChild(input);
  }

  // Add form to page and submit it to open the OAuth 2.0 endpoint.
  document.body.appendChild(form);
  form.submit();
}

Result

I list references in the following.

MIME Types

MIME types (IANA media types) - HTTP | MDN

A media type (also known as a Multipurpose Internet Mail Extensions or MIME type) indicates the nature and format of a document, file, or assortment of bytes. MIME types are defined and standardized in IETF's RFC 6838.

developer.mozilla.org

upload file to Cloud Storage using curl

Upload objects | Cloud Storage | Google Cloud

Describes options for uploading objects to a Cloud Storage bucket. An object consists of the data you want to store along with any associated metadata. You can upload objects using the supplied code and API samples.

cloud.google.com

fetch usage

Using the Fetch API - Web APIs | MDN

The Fetch API provides a JavaScript interface for accessing and manipulating parts of the HTTP pipeline, such as requests and responses. It also provides a global fetch() method that provides an easy, logical way to fetch resources asynchronously across the network.

developer.mozilla.org

<input type="file"> usage

Using files from web applications - Web APIs | MDN

Using the File API, which was added to the DOM in HTML5, it's now possible for web content to ask the user to select local files and then read the contents of those files. This selection can be done by either using an HTML <input type="file"> element or by drag and drop.

developer.mozilla.org

<input type="file"> - HTML: HyperText Markup Language | MDN

<input> elements with type="file" let the user choose one or more files from their device storage. Once chosen, the files can be uploaded to a server using form submission, or manipulated using JavaScript code and the File API.

developer.mozilla.org

The original article is the following. This article was translated from Japanese to English.

フロントエンドJavascriptのみでCloud Storageにファイルをアップロードする

zenn.dev

How to mock FileList on Vitest

Akira Kashihara — Mon, 02 May 2022 01:40:13 +0000

I need to mock FileList that <input type="file" multiple /> provides. This article shows you how to mock it. I had a hard time mocking it.
The requirement to mock FileList is the following.

Object.prototype.toString.call can return a string representing the FileList mock object.
The function that will be tested can process each File using for statement.

How to Mock `FileList`?

Environment

Vitest v0.9.3

Source Code

The Source Code of The Tested Function



export const filesProcess = (fileList) => {
  if (
    Object.prototype.toString.call(fileList).split(" ")[1].slice(0, -1) !=
    "FileList"
  )
    throw Error("Please input FileList type object as the argument.");

  for (let file of fileList) {
    console.log("File name: " + file.name);
  }
};

Test Code



    it("testing", () => {
      const file = new File(["foo"], "foo.txt", {
        type: "text/plain",
      });
      const file2 = new File(["this is test file"], "test.txt", {
        type: "text/plain",
      });
      const input = document.createElement("input");
      input.setAttribute("type", "file");
      input.setAttribute("name", "file-upload");
      input.multiple = true;
      let mockFileList = Object.create(input.files); 
      mockFileList[0] = file;
      mockFileList[1] = file2;
      Object.defineProperty(mockFileList, "length", { value: 2 });
      console.log(
        "The string representation the object: " +
          Object.prototype.toString.call(mockFileList)
      );
      filesProcess(mockFileList);
      expect(1).toBe(1); // Dummy assertion because I want to try only to mock FileList
    });

Result

The result shows the result of testing using console.log.

Reference

Object.create() - JavaScript | MDN

The Object.create() static method creates a new object, using an existing object as the prototype of the newly created object.

developer.mozilla.org

As An Aside

I make the browser displays all elements of FileList that I generated by inputting some files to <input type="file" multiple /> using console.log. After that, I googled necessary elements making ways and making testing code.

The original article is the following. This article was translated from Japanese to English.

FileListをモックする（フロントエンドJavascriptテスト）

zenn.dev

How to make internationalization your website on Vue@3 and Vue-i18n@9

Akira Kashihara — Sun, 24 Apr 2022 04:59:01 +0000

What this article shows you

I18n (Internationalization) according to language setting in the browser
I18n according to the user-selected language
- Using two-way binding (Vue.js)
- Using addEventListener (Javascript)

Source code & Result

All source code in this article work on a static web page.

Environment

I18n according to language setting in the browser

This source code was implemented based on Vue I18n official Guide and Issues on its Github repository.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Vue I18n Test</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@3"></script>
    <script src="https://unpkg.com/vue-i18n@9"></script>
  </head>
  <body>
    <div id="yokan">
      <span> {{ $t("message.hello") }} </span>
    </div>
  </body>
  <script>
    /**
     * Get the language setting in your browser
     */
    const langBrowser = navigator.language.split("-")[0];
    console.log("Language setting in your browser is " + langBrowser + ".");

    const messages = {
      en: {
        message: {
          hello: "Hi!",
        },
      },
      ja: {
        message: {
          hello: "やあ！",
        },
      },
    };

    const i18n = VueI18n.createI18n({
      locale: langBrowser,
      fallbackLocale: "en",
      messages,
    });

    const app = Vue.createApp({});
    app.use(i18n);
    app.mount("#yokan");
  </script>
</html>

The result is the following.

I18n according to the user-selected language

This section shows the website in the language the user select using <select> tag. This article indicates two source codes: "Using two-way binding (Vue.js)" and "Using addEventListener (Javascript)."

Using two-way binding (Vue.js)

This source code was implemented based on Vue I18n official Guide and two-way binding in Vue.js.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Vue I18n Test</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@3"></script>
    <script src="https://unpkg.com/vue-i18n@9"></script>
  </head>
  <body>
    <div id="yokan">
      <span> {{ $t("message.hello") }} </span>
      <select
        v-model="selected"
        name="lang"
        class="legal-item"
        id="select-lang"
        v-on:change="switchLang"
      >
        <option value="en">English</option>
        <option value="ja">Japanese</option>
      </select>
    </div>
  </body>
  <script>
    /**
     * Get the language setting in your browser
     */
    const langBrowser = navigator.language.split("-")[0];
    console.log("The language setting in your browser is " + langBrowser + ".");

    const binding = {
      data() {
        return {
          selected: langBrowser,
        };
      },
      methods: {
        switchLang() {
          this.$i18n.locale = this.selected;
        },
      },
    };

    const messages = {
      en: {
        message: {
          hello: "Hi!",
        },
      },
      ja: {
        message: {
          hello: "やあ！",
        },
      },
    };

    const i18n = VueI18n.createI18n({
      locale: langBrowser,
      fallbackLocale: "en",
      messages,
    });

    const app = Vue.createApp(binding);
    app.use(i18n);
    const vm = app.mount("#yokan");
  </script>
</html>

The result is the following.

Using `addEventListener` (Javascript)

The source code in this section was written based on Vue I18n official Guide and the question in stack overflow.
In the following source code, this line is necessary for some cases, even the same setting of Vue.js and Vue I18n.

vm.$forceUpdate(); // Some cases need it.

The case this line is necessary for my environment, which uses *.prod.js that was installed using npm. Perhaps, this might be in the specification. The full source code is the following.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Vue I18n Test</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@3"></script>
    <script src="https://unpkg.com/vue-i18n@9"></script>
  </head>
  <body>
    <div id="yokan">
      <span> {{ $t("message.hello") }} </span>
    </div>
    <select name="lang" class="legal-item" id="select-lang">
      <option value="en">English</option>
      <option value="ja">Japanese</option>
    </select>
  </body>
  <script>
    /**
     * Get the language setting in your browser.
     */
    const langBrowser = navigator.language.split("-")[0];
    if (langBrowser === "en" || langBrowser === "ja")
      document.getElementById("select-lang").value = langBrowser;
    else document.getElementById("select-lang").value = "en";
    console.log("The language setting in your browser is " + langBrowser + ".");

    const messages = {
      en: {
        message: {
          hello: "Hi!",
        },
      },
      ja: {
        message: {
          hello: "やあ！",
        },
      },
    };

    const i18n = VueI18n.createI18n({
      locale: langBrowser,
      fallbackLocale: "en",
      messages,
    });

    const app = Vue.createApp({});
    app.use(i18n);
    const vm = app.mount("#yokan");

    /**
     * The event handler of <select>
     */
    document.getElementById("select-lang").addEventListener("change", () => {
      vm.$i18n.locale = document.getElementById("select-lang").value;
      vm.$forceUpdate(); // Some cases need it.
      console.log(
        "You change the language setting to " +
          document.getElementById("select-lang").value +
          "."
      );
    });
  </script>
</html>

The result is this.

Notice

This article was translated from the following article, which is written in Japanese.

Vue@3&Vue-i18n@9で<select>を使って言語切り替えをする方法

zenn.dev

DEV Community: Akira Kashihara

How to Draw a Vertical Line on a Heatmap Using seaborn, Python

Source Code and The Result

Source Code

The Result

Reference

I Could Not Run a Sample Code to Use MySQL with Go on Docker (Error 1064)

The Source Code I Wrote for The First Time

The Source Code That Runs Fine

I Want to Test Local Plural Packages on Go

Initialize Each Local Package (Module)

How to Test All Packages?

Test Files on the Directory, Which Has main.go

Test All Packages using go test -v [package name]

Conclusion

How to Display a Web Application with Basic Authentication in WKWebView using SwiftUI (iOS)

Source Code

The Result

How to Display a Web Application with Basic Authentication in WebView using Jetpack Compose (Android)

Source Code

The Result

How to Mock query Method of MariaDB using spyOn on Vitest

The Method to Be Test

The Method to Be Tested

The Code on My Idea (This code is not good)

What's Wrong with This Code?

To Run Services After Deploying The MariaDB Service Using Docker Compose

Source Code

.github/workflows/test.yml

docker-compose.yml

The Execution Result of The Source Code

Acknowledgement

Code Example of LEB Blinking and UART Communication for dsPIC30F4013

Circuit

Photo (Breadboard Prototyping)

Wiring Table

Source Code

Demo

connect-redis on Docker with Password

Problem

Solution

How to upload files to Google Cloud Storage using Javascript on only the browser

Implementation

Auth (OAuth2.0)

Get Necessary Information

Get Access Token (Source Code and Result)

Source Code

Result

Upload Files to Cloud Storage (Source Code and Result)

Source Code

Result

How to mock FileList on Vitest

How to Mock FileList?

Environment

Source Code

The Source Code of The Tested Function

Test Code

Result

Reference

As An Aside

How to make internationalization your website on Vue@3 and Vue-i18n@9

What this article shows you

Source code & Result

Environment

I18n according to language setting in the browser

I18n according to the user-selected language

Using two-way binding (Vue.js)

Using addEventListener (Javascript)

Notice

Test Files on the Directory, Which Has `main.go`

Test All Packages using `go test -v [package name]`

How to Mock `FileList`?

Using `addEventListener` (Javascript)