LoginSignup
2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

@yasunori-kirin0418

Conkyで円グラフとか簡単に作るconky-drawを紹介してみる。

Posted at

はじめに

デスクトップ環境のLinuxのシステムモニターと言えばConkyですが、GitHubやDeviantart等など、調べるとイケてるウィジェットがいっぱい出てきます。
でも、Linux使ってるんだから、人が作ったものより、自分が作ったやつでデスクトップを飾りたいと思いませんか？
今回紹介するconky-drawは、そんなあなたにおすすめです。

conky_draw

簡単に説明するなら、いっぱいLuaを勉強しなくても、Conkyに円グラフを描写することが出来ます。
GUIも開発されているようですが、私は上手く動かせなかったので割愛します

インストール

まずは、GitHubからクローンしましょう。

terminal
git clone https://github.com/fisadev/conky-draw

クローンしてきた物の中にconky_draw.luaとconky_draw_config.luaが有ります。
それらを~/.conkyにコピーしましょう。

terminal
cd conky-draw
cp *.lua ~/.conky

使用環境により異なりますが、大体はそこに.conkyrcがあるはずです。
.conkyrcのconky.config内に以下を記述します。

.conkyrc
lua_load = 'conky_draw.lua', 
lua_draw_hook_pre = 'main',

これでインストールは完了です。

※今回はconky-drawの紹介なので、.conkyrcの記述は省きます。
詳しくはConky Wikiをご覧下さい。

プロパティ

基本的にconky_draw_config.luaのelements内に書いていきます。
全体的な書き方はGitHubのExamplesを参考にしてください。
ここでは、各プロパティの種類と説明をします。

kindとrequired

最初にkindに描写したい物の種類を設定します。

kind 説明
ring 円を描写します。
ring_graph 円グラフを描写します。
conky_valueで指定した変数に応じたグラフになります。
ellipse 楕円を描写します。
ellipse_graph 楕円グラフを描写します。
conky_valueで指定した変数に応じたグラフになります。
line 線を描写します。
bar_graph バーグラフを描写します。
conky_valueで指定した変数に応じたグラフになります。
static_text 文字を描写します。
variable_text conky内で使える変数を描写します。
Conky変数のcpugraphの様な物には対応してません。

描写出来るものは以上になります。描写時に必須のプロパティは以下の表になります。

required kind 説明
from line
bar_graph
static_text
variable_text		 描写時の始点
{x=?,y=?}の形式で指定
to line
bar_graph		 描写時の終点
{x=?,y=?}の形式で指定
radius ring
ring_graph
ellipse
ellipse_graph		 円の半径
center ring
ring_graph
ellipse
ellipse_graph		 描写時の中心座標
width
height		 ellipse
ellipse_graph		 楕円描写時に、高さと幅を指定して、潰しているイメージ
text static_text 文字列
conky_value bar_graph
ring_graph
ellipse_graph
variable_text		 conkyで使用できる変数
基本グラフには、パーセンテージを入れる

max_value

conky_valueにパーセンテージ以外の変動する数値を入れた場合、max_valueに正しく最大値を入れれば、パーセンテージ系の変数を入れた時と同じ振る舞いをします。
が、最大値を取得できるconky変数をmax_valueにセットしても、そこから最大値は取得してくれません。何かしら、一工夫が必要です。
素直に最大値を調べて、max_valueに入れてしまうのが無難ですね。

color

色の設定は、16進数表記のRGBを使用します。このスクリプトでは、0x000000という形で宣言します。

一覧は以下の表になります。

プロパティ kind 説明
color line
ring
ellipse
static_text
variable_text		 文字列の色
background
_color		 bar_graph
ring_graph
ellipse_graph		 グラフの背景部分の色
bar_color bar_graph
ring_graph
ellrpse_graph		 前景部分の色

thickness

線の厚さの設定になります。

一覧は以下の表になります。

プロパティ kind 説明
thickness line
ring
ellipse		 線の厚さ
background
_thickness		 bar_graph
ring_graph
ellipse_graph		 背景部分の線の厚さ
bar_thickness bar_graph
ring_graph
ellipse_grape		 前景部分の線の厚さ

alpha

不透明度の設定になります。alpha=0で透明。alpha=1で不透明。alpha=0.5の様に設定してください。

一覧は以下の表になります。

プロパティ kind 説明
alpha line
ring
ellipse
static_text
variable_text		 線や文字の不透明度
background
_alpha		 bar_graph
ring_graph
ellipse_graph		 背景部分の線の不透明度
bar_alpha bar_graph
ring_graph
ellipse_grape		 前景部分の線の不透明度

text関連

文字を描写する時に関連するプロパティ一覧は、以下の表になります。

プロパティ 説明
font 描写テキストのフォント
デフォルトは"Liberation Sans"
font_size 描写テキストのサイズ
.conkyrcよりも小さい。詳しくはこちら
bold 描写テキストを太文字にする。
設定値はBoolean
italic 描写テキストをイタリック体(斜体)にする。
設定値はBoolean

boldやitalicは、ちゃんと対応したフォントのインストールが、必須だと思われます。
また、フォントによっては、極太とか極細みたいな、フォントファミリーがあるかもしれませんが、それらには未対応の様です。

critical_thresholdとchange系プロパティ

グラフで一定の値になった時に、グラフの見た目を変えることができます。
critical_thresholdにしきい値を設定し、しきい値以上になったら、change系プロパティに設定した通りの見た目に変わります。
この時の変化は前景背景関係なく全部変わります。
この変化を無効にしたい場合は、max_valueと同じ値にしてください。

change系プロパティの一覧は、以下の表になります。

プロパティ 説明
change_color
_on_critical		 しきい値以上になったら、設定した色に変化します。
change_thickness
_on_critical		 しきい値以上になったら、設定した厚さに変化します。
change_alpha
_on_critical		 しきい値以上になったら、設定した不透明度に変化します。

angle

GitHubより-欠けた円
↑こういう感じの欠けた円を作ります。円関係に使えます。
使用する際は、start_angleとend_angleにそれぞれ角度を、整数で設定してください。

円を東西南北で見た時、角度は以下の表になります。

方角 角度
東 0°
南 90°
西 180°
北 270°

デフォルトでは、

start_angle=0, 
end_angle=360,

となっています。

graduation

GitHubより

↑設定すると、線や円の見た目をこんな感じにします。(以下:graduation)

このスクリプトを使って円グラフを作るなら、必ずは使ってみたいプロパティですね。

プロパティ 説明
graduated 線や円をgraduationにする場合は、必ずtrueにしてください。
number_graduation 目盛り(graduation)の数
space_between
_graduation		 目盛り(graduation)の間隔

こういうグラフの名前って正確には何て言うんですかね……
一応、目盛りとか言ってますけど、graduationで調べても卒業って単語しか出ないんですよね。
ご存知の方がいらっしゃったら、コメントください。

応用編

自分でウィジェット作る時に、覚えておくと便利な物を紹介します。

変数

座標や色など、何度も入力するのは面倒になるはずなので、elementsの上の方に変数を設定しておきます。

conky_draw_config.lua
local thickness_size = 15

local center_x = 190
local center_y = 190

local minimum_radius = 50
local ring_increment_size = 18

local bg_color = 0x606060
local bg_alpha = 0.5

local fg_color = 0x006eff
local fg_alpha = 0.8
elements{
    {
        kind = 'ring_graph',
        conky_value = 'cpu cpu8',
        center = {x = center_x, y = center_y},
        thickness = thickness_size,
        bar_color = fg_color,
        bar_alpha = fg_alpha,
        bar_thickness = thickness_size,
        background_color = bg_color,
        background_alpha = bg_alpha,
        background_thickness = thickness_size,
        radius = minimum_radius + (ring_increment_size * 0),
        max_value = 100,
        start_angle = 270,
        end_angle = 0,
        graduated = true,
        number_graduation = 75,
        angle_between_graduation = 0.5,
    },{
        kind = 'ring_graph',
        conky_value = 'cpu cpu7',
        center = {x = center_x, y = center_y},
        thickness = thickness_size,
        bar_color = fg_color,
        bar_alpha = fg_alpha,
        bar_thickness = thickness_size,
        background_color = bg_color,
        background_alpha = bg_alpha,
        background_thickness = thickness_size,
        radius = minimum_radius + (ring_increment_size * 1),
        max_value = 100,
        start_angle = 270,
        end_angle = 0,
        graduated = true,
        number_graduation = 75,
        angle_between_graduation = 0.5,
    },{
        kind = 'ring_graph',
        conky_value = 'cpu cpu6',
        center = {x = center_x, y = center_y},
        thickness = thickness_size,
        bar_color = fg_color,
        bar_alpha = fg_alpha,
        bar_thickness = thickness_size,
        background_color = bg_color,
        background_alpha = bg_alpha,
        background_thickness = thickness_size,
        radius = minimum_radius + (ring_increment_size * 2),
        max_value = 100,
        start_angle = 270,
        end_angle = 0,
        graduated = true,
        number_graduation = 75,
        angle_between_graduation = 0.5,
    },{……

自分の作ってる奴の一部を抜粋してきました。こんな風に変数使うんだな、くらいに思って貰えれば大丈夫です。

文字サイズ

.conkyrc内のconky.textで文字を描写する時と、conky-drawで文字を描写する時とでは、フォントサイズがconk-drawの方が小さいです。
座標で指定できるconky-drawの方が文字を描写する時も便利ですが、多少なりとも、.conkyrcも併用したい時が出てきます。

自分は.conkyrcのフォントサイズに合わせる様に、以下の関数をelementsの上の方に作って使ってます。

conky_draw_config.lua
function font_gap(font_size)
    return font_size * 1.333
end

elements{
    {
        kind = 'static_text',
        from = {x = 100, y = 100},
        text = 'test',
        font_size = font_gap(16),
    },{……}
}

自分の環境で何度か試した結果、conky-drawで描写するテキストを1.333倍すれば、.conkyrcで描写するテキストと同じサイズになりました。1

さいごに

全プロパティの紹介には、骨が折れました。（笑）
GitHubのページを翻訳すれば、ある程度は分かる事なのですが、こうやって日本語にしておくだけでも、自分だけのウィジェット開発の参考になるので、こういう形でアウトプットするのも有りだと思いました。

このスクリプト、なかなかの神スクリプトだと思うのですが、開発が2年前で止まっているのが少々残念な所。issuesにもリクエストが幾つか来ているし、伸び代はいっぱいあるんですけどね……

注釈

  1. 自分の環境以外では違うのか、検証できてません。違うよって人が居たら教えてください。 ↩

2
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?