Slide 1
Slide 1 text
Raspberry pi picoでモニター出力
【MTG】鹿児島Linux User Groupやってます、
今回はライトニングトークもやります
2021. 03. 06
1
kazueda
か ず え だ
Slide 2
Slide 2 text
kazueda（かずえだ）の紹介
• 大阪出身、丙午、おとめ座、O型
• 科学者（化学）
• 2003年4月から、浜松で働き始める
• 自転車での移動が生活の足
• 趣味は、「ラジオを聴くこと」、
「アメリカのコミックの邦訳を読む
こと」
• 「STAY HOME」期間にオンライン
イベントの楽しさを知りました。
• 老眼にははんだ付けはつらいので、
はんだを付けを避けて電子工作しま
す。
@kazueda
2
slideshare speaker deck
Slide 3
Slide 3 text
今回のお話
• Raspberry pi picoでのモニター出力方法
• デモを楽しむ
• 画像を入れ替える
• まとめ
3
Slide 4
Slide 4 text
今回のお話
• Raspberry pi picoでのモニター出力方法
• デモを楽しむ
• 画像を入れ替える
• まとめ
4
Slide 5
Slide 5 text
Raspberry pi picoでの
モニター出力方法
1. composite（ビデオ出力）
2. VGA
3. HDMI
5
Slide 6
Slide 6 text
Raspberry pi picoでの
モニター出力方法
1. composite（ビデオ出力）
2. VGA
3. HDMI
6
Slide 7
Slide 7 text
composite（ビデオ出力）
7
http://www.breakintoprogram.co.uk/projects
/pico/composite-video-on-the-raspberry-pi-pico
Slide 8
Slide 8 text
composite（ビデオ出力）
8
http://www.breakintoprogram.co.uk/projects
/pico/composite-video-on-the-raspberry-pi-pico
• 440 Ω×5
• 220 Ω×5
• 110 Ω×1
• RCAコネクタ
• 配線など
Slide 9
Slide 9 text
composite（ビデオ出力）
9
https://github.com/breakintoprogram/pico-mposite
Slide 10
Slide 10 text
composite（ビデオ出力）
10
https://github.com/breakintoprogram/pico-mposite
256×192 greyscale
Slide 11
Slide 11 text
Raspberry pi picoでの
モニター出力方法
1. composite（ビデオ出力）
2. VGA
3. HDMI
11
Slide 12
Slide 12 text
VGA
12
https://datasheets.raspberrypi.org/rp2040
/hardware-design-with-rp2040.pdf
R
G
B
R
G
B
Slide 13
Slide 13 text
VGA
13
https://datasheets.raspberrypi.org/rp2040
/hardware-design-with-rp2040.pdf
R
G
B
• 4.02 kΩ×3
• 2 kΩ×3
• 1 kΩ×3
• 499 Ω×3
• 470 Ω×2
• VGAコネクタ
• 配線など
Slide 14
Slide 14 text
VGA
14
https://www.hackster.io/news/learn-how-to-get-vga-video-
output-from-a-raspberry-pi-pico-f97c8ead9dee
R
G
B
Slide 15
Slide 15 text
Raspberry pi picoでの
モニター出力方法
1. composite（ビデオ出力）
2. VGA
3. HDMI
15
Slide 16
Slide 16 text
HDMI
16
https://github.com/Wren6991/PicoDVI
Slide 17
Slide 17 text
HDMI
17
https://github.com/Wren6991/PicoDVI
Bitbanged DVI
on the RP2040 Microcontroller
Slide 18
Slide 18 text
HDMI
18
https://github.com/Wren6991/PicoDVI
Bitbanged DVI
on the RP2040 Microcontroller
640x480 RGB565 image, 640x480p 60 Hz DVI
mode. 264 kB SRAM, 2x Cortex-M0+, system
clock 252 MHz
Slide 19
Slide 19 text
HDMI
19
https://github.com/Wren6991/PicoDVI
RP2040
W25Q16JV
16M-bit Flash memory
Bitbanged DVI
on the RP2040 Microcontroller
Slide 20
Slide 20 text
HDMI
20
https://github.com/Wren6991/PicoDVI
Slide 21
Slide 21 text
HDMI
21
https://github.com/Wren6991/PicoDVI
Slide 22
Slide 22 text
HDMI
22
https://github.com/Wren6991/PicoDVI
• 270 Ω×9
• 2.2 kΩ×3
• HDMI端子
• 配線など
Slide 23
Slide 23 text
HDMI
23
https://github.com/Wren6991/PicoDVI
• 270 Ω×9
• 2.2 kΩ×3
• HDMI端子
• 配線など
HDMI breakout
board
Slide 24
Slide 24 text
HDMI
24
https://github.com/Wren6991/PicoDVI
• 270 Ω×9
• 2.2 kΩ×3
• HDMI端子
• 配線など
配線してみました
VBUS, GND
On
Bread board
HDMI breakout
board
Raspberry pi pico
Slide 25
Slide 25 text
今回のお話
• Raspberry pi picoでのモニター出力方法
• デモを楽しむ
• 画像を入れ替える
• まとめ
25
Slide 26
Slide 26 text
デモを楽しむ
動作確認済み
• Terminal：8x8pxの白黒フォントを80x60文字表示
• Moon：640x480のRGB111の静止画を表示
• Hello DVI：QVGA RGB565の画像をスクロール表示
• Mandelbrot：QVGA RGB565でレンダリング
• Sprite Bounce：画面上を画像が動く
動作確認できず（RAMが必要？）
• Bad Apple：720p 30FPS動画ビュワー
• Vista：VGA RGB565画像ビュワー
26
https://github.com/Wren6991/PicoDVI
Slide 27
Slide 27 text
今回のお話
• Raspberry pi picoでのモニター出力方法
• デモを楽しむ
• 画像を入れ替える
• まとめ
27
Slide 28
Slide 28 text
発表の冒頭に示したもの
動作確認済み
• Terminal：8x8pxの白黒フォントを80x60文字表示
• Moon：640x480のRGB111の静止画を表示
• Hello DVI：QVGA RGB565の画像をスクロール表示
• Mandelbrot：QVGA RGB565でレンダリング
• Sprite Bounce：画面上を画像が動く
動作確認できず（RAMが必要？）
• Bad Apple：720p 30FPS動画ビュワー
• Vista：VGA RGB565画像ビュワー
28
https://github.com/Wren6991/PicoDVI
Slide 29
Slide 29 text
画像を入れ替える
moonの場合
1. 640x480 pxの画像を用意
2. $ ./packtiles -sdf r1 hoge.png
hoge_1bpp_640x480.h
3. $ make -j2
4. 作成したmoon.uf2を、 Raspberry pi picoに
ドラッグ&ドロップ
5. 自作の白黒画像が表示される
29
https://github.com/Wren6991/PicoDVI
Slide 30
Slide 30 text
画像を入れ替える
Hello DVIの画像を入れ替える
1. 320x240 pxの画像を用意
2. $ ./packtiles -sdf rgb565 hoge.png
hoge_320x240_rgb565.h
3. $ make -j2
4. 作成したhello_dvi.uf2を、 Raspberry pi
picoにドラッグ&ドロップ
5. 自作のhello_dviを表示
30
https://github.com/Wren6991/PicoDVI
Slide 31
Slide 31 text
まとめ
• Raspberry pi picoにHDMI端子を増設して画
像出力を行った
• デモの画像データの入れ替えに、一部成
功した
• 画像変換法の解明
• データ入れ替えの再挑戦
• VGA、Composite出力の再現
31
今後の展開
おしまい
Slide 32
Slide 32 text
まとめ
• Raspberry pi picoにHDMI端子を増設して画
像出力を行った
• デモの画像データの入れ替えに、一部成
功した
• 画像変換法の解明
• データ入れ替えの再挑戦
• VGA、Composite出力の再現
32
今後の展開
おしまい
Slide 33
Slide 33 text
まとめ
• Raspberry pi picoにHDMI端子を増設して画
像出力を行った
• デモの画像データの入れ替えに、一部成
功した
• 画像変換法の解明
• データ入れ替えの再挑戦
• VGA、Composite出力の再現
33
今後の展開
おしまい