Post-install setup on OpenBSD 7.4

After installing OpenBSD 7.4, here are customizations to make it more usable.

$ uname -a
OpenBSD obsd.dev.obsd 7.4 GENERIC.MP#2 amd

Install wireless driver

Run ifconfig and see interface names.

$ ifconfig | grep flags | grep -o .*:
lo0:
re0:
iwx0:
enc0:
pflog0:

In this case, the interface named iwx0. Find details about it in dmesg:

$ dmesg | grep iwx0 
iwx0: could not read firmware iwx-cc-a0-77 (error 2)

Download the driver from http://firmware.openbsd.org/firmware/, choose the version you using, in this case is 7.4: http://firmware.openbsd.org/firmware/7.4/iwx-firmware-20230629.tgz

copy the file to an USB formatted as vfat filesystem so all OSes can read from it.

Mount USB

Find the partition to mount: run as root

If the device is sd1, use sd1c as man disklabel explained:

disklabel supports 15 configurable partitions, a through p excluding c. The c partition describes the entire physical disk, is automatically created by the kernel, and cannot be modified or deleted by disklabel.

# disklabel -h /dev/sd1c
# /dev/sd1c:                                                            
type: SCSI                                                              
disk: SCSI disk                                                         
label: DataTraveler 3.0                                                 
duid: 0000000000000000
flags:
bytes/sector: 512
sectors/track: 63
tracks/cylinder: 255
sectors/cylinder: 16065
cylinders: 1884
total sectors: 30277632 # total bytes: 15138816.0K
boundstart: 0
boundend: 30277632 

16 partitions:
#                size           offset  fstype [fsize bsize   cpg]
  c:      15138816.0K                0  unused                    
  i:           480.0K               64   MSDOS                    
  j:        679424.0K             1024   MSDOS    

Here the partition we want to mount is j.

obsd# mount /dev/sd1j /mnt/                                            
obsd# ls /mnt
iwx-firmware-20230629.tgz

Run as root: fw_update /mnt/iwx-firmware-20230629.tgz to install the driver.

Turn on wifi

Run as root:

# ifconfig iwx0 nwid WIFI_NAME wpakey PASSWORD
# ifconfig iwx0 up
# dhclient iwx0

To auto-connect to the wifi on startup, add a file named: /etc/hostname.iwx0 with content:

nwid WIFI_NAME wpakey PASSWORD
inet autoconf

Note: change iwx0 in filename to your real interface name.

Install packages

# pkg_add firefox git tmux redshift

Update firmware

# fw_update

Change window manager

Default window manager is fwwm, right click choose cwm.

To set it permanently, write a file at $HOME/.xsession

# use UTF-8 everywhere
export LANG=en_US.UTF-8

# load Xresources file
xrdb -merge $HOME/.Xresources

xsetroot -solid slategrey &
xterm &
redshift &
exec cwm

Read man cwm for default key bindings.

Enable power management to suspend

rcctl start apmd

Then type zzz to suspend.

Append a line to /etc/rc.conf.local

apmd_flags=

To start apmd with system.

Conclusion

Hello OpenBSD once again in 2024!

Vẽ hình vuông hình tròn: bánh chưng và mặt trời

HTML5 xuất hiện từ 2008, đến nay sau 16 năm đã được phổ cập trên mọi trình duyệt. Điển hình nhất là ngày nay xem video trên Youtube không còn phải cài Adobe Flash nữa mà cứ bấm là xem.

HTML5 có thể làm rất nhiều việc mà trước đây cần phần mềm khác/JavaScript:

• xem video
• nghe nhạc
• vẽ hình 2D 3D
• tạo hình động
• ... vậy nên người ta có thể làm game với HTML5 + JavaScript

Bài này khám phá thẻ canvas trong HTML5 và vẽ bánh chưng mừng tuổi mọi người, hello 2024!

Xem kết quả tại https://hvnsweeting.github.io/js-toys/draw-basic.html

Canvas - vẽ hình

Thẻ canvas chỉ có 2 thuộc tính width (default: 300px) và height (150px), việc vẽ hình được thực hiện bằng JavaScript.

Tạo cặp thẻ HTML canvas rồi lấy object "context" 2D để vẽ hình 2D.

<canvas id="banh" width=300 height=300></canvas>

<script>
  canvas = document.getElementById("banh");
  ctx = canvas.getContext("2d");
  //...
</script>

Vẽ hình chữ nhật với fillRect (rectangle), chọn màu bằng gán giá trị cho ctx.fillStyle.

Vẽ cái bánh chưng: trước tiên là đổ màu lá full hình vuông, sau đó đổi màu rồi vẽ 4 cái lạt, cuối cùng thêm dòng chữ vào góc cho giống VTV:

//ctx.fillRect(x, y, width, height);
ctx.fillStyle = '#44583b';
ctx.fillRect(0, 0, 300, 300);

ctx.fillStyle = '#c7cab8';
ctx.fillRect(95, 0, 10, 300);
ctx.fillRect(195, 0, 10, 300);
ctx.fillRect(0, 95, 300, 10);
ctx.fillRect(0, 195, 300, 10);

ctx.fillText("Chung cake", 240, 20)

Vẽ hình tùy ý

Vẽ hình tự do bằng cách bắt đầu với beginPath(), di chuyển "bút", khi xong thì fill() để tô màu hình kín tạo bởi đường vẽ.

Dùng arc để vẽ hình tròn

arc(x, y, radius, startAngle, endAngle, counterclockwise)

Vẽ cờ nước Nhật: tỷ lệ h:w 3:2, đường kính mặt trời 3/5 chiều cao:

canvas = document.getElementById("jp");
ctx = canvas.getContext("2d");
ctx.fillStyle = '#ffffff';
ctx.fillRect(0, 0, 300, 200);

ctx.fillStyle = '#ff2b2a';
ctx.beginPath();
ctx.arc(150, 100, 60, 0, 2 * 3.14, false);
ctx.fill();
ctx.fillText("JP", 280, 20)

Tham khảo

• https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics

Kết luận

Vẽ vuông vẽ tròn thật đơn giản, thế còn vẽ lá cờ đỏ sao vàng Việt Nam? xem như 1 bài tập về nhà.

Hết.

HVN at http://pymi.vn and https://www.familug.org.

Ủng hộ tác giả 🍺

Làm website đọc chữ phát ra loa với 10 dòng code (no lib, no install)

Sau khi có thể đọc text bằng 5 dòng code, làm luôn trang web.

Tạo site HTML

Tạo 1 ô nhập text (textarea) và 1 nút bấm (button)

<html>
  <body>
    <textarea id="text" rows="24" cols="100">
     In my younger and more vulnerable years my father gave me some advice that I’ve been turning over in my mind ever since.

    “Whenever you feel like criticizing anyone,” he told me, “just remember that all the people in this world haven’t had the advantages that you’ve
    </textarea>
    <br>
    <button id="speak">Speak</button>
  <body>
</html>

Đọc text khi click chuột

button = document.getElementById("speak");

function speak() {
  synth = window.speechSynthesis;
  text = document.getElementById("text").value;
  utter = new SpeechSynthesisUtterance(text);
  voices = synth.getVoices();
  utter.rate = 0.9; // speed - tốc độ
  synth.speak(utter);
}

button.addEventListener('click', speak);

Dòng text = document.getElementById("text").value lấy nội dung trong ô textarea để đọc.

Kết quả

Xem tại https://hvnsweeting.github.io/js-toys/tts.html

Kết luận

Giờ đã có thể dùng điện thoại để đọc text trên trang web dựa trên 5 dòng code ban đầu.

Hết.

HVN at http://pymi.vn and https://www.familug.org.

Ủng hộ tác giả 🍺

Đọc chữ phát ra loa với 5 dòng code (no lib, no install)

Nếu bạn từng có nhu cầu nghe thay vì đọc (tiếng Anh), 5 dòng code JavaScript ngay trên trình duyệt có thể làm điều đó!

Bật Web developer console

Bấm Ctrl-Shift-K https://firefox-source-docs.mozilla.org/devtools-user/web_console/index.html

synth = window.speechSynthesis
text = ` In my younger and more vulnerable years my father gave me some advice that I’ve been turning over in my mind ever since.

“Whenever you feel like criticizing anyone,” he told me, “just remember that all the people in this world haven’t had the advantages that you’ve `
utter = new SpeechSynthesisUtterance(text)
utter.voice = synth.getVoices()[-1] // change to any number to change voice - giọng đọc, thay -1 bằng số khác để đổi giọng
utter.rate = 0.9 // speed - tốc độ
synth.speak(utter)

Text from The Great Gatsby by F. Scott Fitzgerald

Speech Synthesis

Speech synthesis (aka text-to-speech, or TTS) involves receiving synthesizing text contained within an app to speech, and playing it out of a device's speaker or audio output connection. https://developer.mozilla.org/en-US/docs/Web/API/Web_Speech_API/Using_the_Web_Speech_API#speech_synthesis

Speech synthesis (còn gọi là text-to-speech hay TTS) là việc "biến" chữ viết thành dạng nói và phát ra loa.

Utterance

The Web Speech API has a main controller interface for this — SpeechSynthesis — plus a number of closely-related interfaces for representing text to be synthesized (known as utterances), voices to be used for the utterance, etc. Again, most OSes have some kind of speech synthesis system, which will be used by the API for this task as available.

Chữ sẽ được đọc được gọi là "utterance". Giọng đọc được lấy từ hệ thống speech synthesis có trên hệ thống, API của trình duyệt web chỉ tương tác với hệ thống này.

Vì vậy giọng đọc trên MacOS có thể khác Windows và sẽ khác Linux.

Tham khảo

• https://developer.mozilla.org/en-US/docs/Web/API/Web_Speech_API

Kết luận

Đọc chữ với 5 dòng code trên trình duyệt, giờ có thể nhắm mắt... và nằm nghe (chứ đừng xuôi tay).

Hết.

HVN at http://pymi.vn and https://www.familug.org.

Ủng hộ tác giả 🍺