Skip to main content

PngNote

About 2 min

PngNote

karino2が作っているONYX BOOX Note3用のノートアプリ。 ただAndroid用のブランチも一応ある。

コンセプト

  • BOOXのNote3でペンが快適に使える事
  • 単なるpngの連番ファイルとディレクトリ
  • 低機能で使っていて迷う所が無いような選択肢の少ないUI
  • 講義ノートなどを取るのに特化した機能＞講義ノート

半ページスクロール 2026-06-14 (日)

式変形の途中で次のページに行くと前のページといったりきたりして不便なので、半ページスクロール、というか、0.5ページ進めた状態にするボタンを作ってみた。 これはかなり良いのでは？紙のノートにずっと欲しかった機能だ！

e-inkは自由にスクロール出来てもいまいちなのだが、ページネーションの快適さを維持したままページ境界問題を解決出来た。

なんか一度pngファイルが壊れたのでもう少し叩いて安定したらリリースしよう。

大きめの修正 2026-06-09 (火)

最近不安定な挙動が目立っていたので、ちゃんと直す。

まずはonResumeとレイアウトとfocus周辺のタイミングの問題はマグナスケッチで割とちゃんと直したのでそれを持ってくる。

裏BitmapのActor化

それでもまだたまにraw renderingが有効だが実際は描けて無くてボタンも押せない状態になるな。

ログをはっつけてgeminiに聞いた所、どうもSurfaceViewのlockCanvasをしつつBitmap関連のlockをしていると、 描画リソースが足りないとかで他を待つ時に他もこのロックで待つというような事が起こりうるらしい。

SurfaceViewのlockCanvasをもう少し短期間で済むようにしたい。 基本的には画面に書いている時に裏のbitmapにも同じものを描いている訳だが、この時にundoとredoバッファを作るのが結構重い。 しかも裏に描くのは別に同期する必要は全く無い。

だが全部キューにたまったイベントの処理が終わった、という事を待つ必要があるタイミングはある。

呼ぶ側はいつもUIスレッドなので、そんなに複雑な事は考えなくてもいいはずだが、一応そういう修正をしたい。

雑感

BOOX Note3のペンは非常に良い。 普通のデジタイザみたいに描いている所との距離を感じず、直接表面に描いているような感覚になっている。ペン先も細かいし。

画面の大きさと相まって、紙のノートに非常に近い感じで使えるようになっている。ここまで紙のノートっぽく使えるデバイスは初めてなんじゃないか。 まだ微妙に実際のノートより字が大きくなりがちなので完璧に紙のノートより優れているとは言えないが、 自分的にはもうこれでいいか、と思える程度には紙のノートに近い。

一方でBOOX Note3のサイズでもようやくギリギリ、という感じなので、まだ8インチでは紙のノートは置き換えできないなぁ、と思う。

また、PngNoteの余計な機能はつけない、という方針はかなりうまく行っている気がする。 モードの切り替え的な事はやはりノートを取るのには邪魔だよな。 なにもないページに自由に描き始められる感じが凄く気分が良い。 この気分の良さは損なわないように機能追加はやっていきたいな。

バックグラウンド画像機能

現状、フォルダにbackground.pngというファイルがあると、それをそのノートのバックグラウンドとして描画する。 罫線の機能を実現するために実装した機能だが、ToDoリストなどでも使えるように、とは考えている。

なお、現状はbackground.pngを置くUIは無い。自分で画像を用意して手で置く。 自分はこれを使っている。 https://github.com/karino2/PngNote/blob/main/images/background.png

github pagesへの公開

公開にはGithubPagesGalleryを使っている。

ペンサイズの変更（予定）

現状はペンサイズが変更できないが、対応しても良い気はしている。 お絵かきアプリならスライダで変更出来るようにする所だが、ノートの場合、細い線に戻す時に太さが違うと気になるので、 あまりスライダというのは気乗りしない。ホバーで出るブラシカーソルも無いし。消しゴムはスライダでもいい気もするが。

考えているのは、3種類くらいの太さのペンを用意して、それをポップアップリスト的なので選ばせる、というもの。 ただ、これをカスタマイザブルにしようかなぁ、と思っている。 pen_settings.txtというファイルがあったらその中身をパースしてそれを使う、みたいな。

今考えているのは、ARGBと太さと、消しゴムとペンの種別、そしてリスト上に表示するラベルをセミコロン区切りとかでいいかなぁ、と思っているがどうだろう？

これなら、カラーの機種でカラーで半透明のマーカーみたいなのを作りたい、という人でも使えるし、 紙ノートにおける三色ボールペン的な感覚で気分良く使えるんじゃないか。

消しゴムは指定できなくても良さそうだが、どうせペンを選べるようにすれば消しゴム対応も大差無く出来るし、細い消しゴムと太い消しゴムはたまに欲しくもなるからやっておいてもいいかなぁ、とは思っている。

ただペンは自分は欲しいと思った事無いんだよなぁ。要るかなぁ。

メモ: 点線を入れるなら、

DashPathEffect

を使う。

例えば以下でどうだろう？

基本は

  • ラベル
  • 種別
  • ARGB
  • 太さ

をセミコロン区切り。種別がeの時は太さだけ、種別がd（点線）の時はこれにさらにDashPathEffectにわたすパラメータ2つが最後に加わる。

ペン;p;255,0,0,0;12.8
赤;p;255,255,0,0;12.8
青;p;255,0,0,255;12.8
太ペン;p;255,0,0,0;20
マーカー;p;128,255,148,224;20
点線;d;255,0,0,0;20;10.0,20.0
消しゴム;e;20
消しゴム（細）;e;8.0