はじめに
Kivyのコードを書いていて、「R(赤), G(緑), B(青) ,A(透明度)有効値0～1」(R,G,B,A)の値設定したときにどういう色味になるのか？を確認したく。視覚でわかるようにするためのコードをkivyとPythonで書いてみた。
kivyについては下記参照。
Androidアプリ化したい場合は下記参照。
Kivyコード
パワーポイントのカラーパレットみたいなのを目指したかったが、今回は簡易的に、スライダーを使い、「「R(赤), G(緑), B(青) ,A(透明度)」の各値を変えたときにどういう色味になるかを出力するコードを作ってみた。
main.py
from kivy.app import App
from kivy.uix.boxlayout import BoxLayout #boxのレイアウト
#.kvファイル内に記述したモジュール名と同じにする。
class Root_Layout(BoxLayout):
r_color=0.00
g_color=0.00
b_color=0.00
a_color=1.00
def sliderR_move(self):
self.r_color=format(self.ids.slider_R.value,'.3f')
self.ids.slider_text_R.text = 'R:'+str(self.r_color)
self.ids.slider_text_R.background_color = (self.r_color,0,0,1)
#全体色
self.ids.text_color.background_color = (self.r_color, self.g_color, self.b_color, self.a_color)
self.ids.text_color.text = '( '+ str(self.r_color) +' ,'+ str(self.g_color) +' ,'+ str(self.b_color) +' ,'+ str(self.a_color) +' )'
def sliderG_move(self):
self.g_color=format(self.ids.slider_G.value,'.3f')
self.ids.slider_text_G.text = 'G:'+str(self.g_color)
self.ids.slider_text_G.background_color = (0,self.g_color,0,1)
#全体色
self.ids.text_color.background_color = (self.r_color, self.g_color, self.b_color, self.a_color)
self.ids.text_color.text = '( '+ str(self.r_color) +' ,'+ str(self.g_color) +' ,'+ str(self.b_color) +' ,'+ str(self.a_color) +' )'
def sliderB_move(self):
self.b_color=format(self.ids.slider_B.value,'.3f')
self.ids.slider_text_B.text = 'B:'+str(self.b_color)
self.ids.slider_text_B.background_color = (0,0,self.b_color,1)
#全体色
self.ids.text_color.background_color = (self.r_color, self.g_color, self.b_color, self.a_color)
self.ids.text_color.text = '( '+ str(self.r_color) +' ,'+ str(self.g_color) +' ,'+ str(self.b_color) +' ,'+ str(self.a_color) +' )'
def sliderA_move(self):
self.a_color=format(self.ids.slider_A.value,'.3f')
self.ids.slider_text_A.text = 'A:'+str(self.a_color)
self.ids.slider_text_A.background_color = (0,0,0,self.a_color)
#全体色
self.ids.text_color.background_color = (self.r_color, self.g_color, self.b_color, self.a_color)
self.ids.text_color.text = '( '+ str(self.r_color) +' ,'+ str(self.g_color) +' ,'+ str(self.b_color) +' ,'+ str(self.a_color) +' )'
#class名称XXXをkvファイル(小文字でOK)にしてファイルをリンクさせる(gui_sample.kv)
class GUI_sample(App):
title = 'GUI sample'
if __name__ == '__main__':
GUI_sample().run()
gui_sample.kv
Root_Layout:
#第一階層
BoxLayout:
orientation:'vertical'
#背景設定
canvas:
Color:
rgba: 1,1,1,1
Rectangle:
size: self.size
pos: self.pos
TextInput:
id:text_color
text: '(1,1,1,1)'
font_size:50
multiline:False #1行
foreground_color:1,1,1,1 #文字色
#第二階層(Slider_R/slider_text_R)
BoxLayout:
orientation:'horizontal'
#第三階層(slider_R)
Slider:
id :slider_R
size_hint_x :0.8 #x軸のサイズ
max :1 #カーソルの最大値
min :0 #カーソルの最小値
value :1 #初期値
cursor_width :16 #カーソルのサイズ(幅)
cursor_height :16 #カーソルのサイズ(高)
on_touch_move :root.sliderR_move() #カーソルを動かしたときの動作
on_touch_up :root.sliderR_move() #カーソルをタッチした時の動作
#第三階層(slider_text_R)
TextInput:
id:slider_text_R
size_hint_x:0.2 #x軸のサイズ
text: ''
foreground_color:1,1,1,1 #文字色
font_size:25
#第二階層(Slider_G/slider_text_G)
BoxLayout:
orientation:'horizontal'
#第三階層(slider_G)
Slider:
id :slider_G
size_hint_x :0.8 #x軸のサイズ
max :1 #カーソルの最大値
min :0 #カーソルの最小値
value :1 #初期値
cursor_width :16 #カーソルのサイズ(幅)
cursor_height :16 #カーソルのサイズ(高)
on_touch_move :root.sliderG_move() #カーソルを動かしたときの動作
on_touch_up :root.sliderG_move() #カーソルをタッチした時の動作
#第三階層(slider_text_G)
TextInput:
id:slider_text_G
size_hint_x:0.2 #x軸のサイズ
text: ''
foreground_color:1,1,1,1 #文字色
font_size:25
#第二階層(Slider_B/slider_text_B)
BoxLayout:
orientation:'horizontal'
#第三階層(slider_B)
Slider:
id :slider_B
size_hint_x :0.8 #x軸のサイズ
max :1 #カーソルの最大値
min :0 #カーソルの最小値
value :1 #初期値
cursor_width :16 #カーソルのサイズ(幅)
cursor_height :16 #カーソルのサイズ(高)
on_touch_move :root.sliderB_move() #カーソルを動かしたときの動作
on_touch_up :root.sliderB_move() #カーソルをタッチした時の動作
#第三階層(slider_text_B)
TextInput:
id:slider_text_B
size_hint_x:0.2 #x軸のサイズ
text: ''
foreground_color:1,1,1,1 #文字色
font_size:25
#第二階層(Slider_A/slider_text_A)
BoxLayout:
orientation:'horizontal'
#第三階層(slider_A)
Slider:
id :slider_A
size_hint_x :0.8 #x軸のサイズ
max :1 #カーソルの最大値
min :0 #カーソルの最小値
value :1 #初期値
cursor_width :16 #カーソルのサイズ(幅)
cursor_height :16 #カーソルのサイズ(高)
on_touch_move :root.sliderA_move() #カーソルを動かしたときの動作
on_touch_up :root.sliderA_move() #カーソルをタッチした時の動作
#第三階層(slider_text_A)
TextInput:
id:slider_text_A
size_hint_x:0.2 #x軸のサイズ
text: ''
foreground_color:1,1,1,1 #文字色
font_size:25