PythonのKivyのカラーパレットを作ってみる

はじめに

　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