ロスジェネ！ねこくんのリスキリングの学びをシェア

この記事では、「Python Kivyプログラミング Pythonで作るマルチタッチアプリ」という本を頼りに、章の終わりごとに本と対応するKivy公式サイト（英語で泣きそう）のサンプルプログラムに挑戦しています。

上の本の、5章を終えた所までで類題として作れるアプリです。

Gallery of Examples FBO Canvas

このアプリは、

この記事の分からない英単語を調べながら読んで行きます。
ちなみに私の英語能力は英検４級（３級落ちた）です。

・instead …代わりに

・Buffer…一時保存用の記憶領域

・attach….添付

「Kivyというライブラリを使ってPythonでアプリを作って行く」に戻る

コードです。

all=(‘FboFloatLayout’,)

from kivy.graphics import Color,Rectangle,Canvas,ClearBuffers,ClearColor
from kivy.graphics.fbo import Fbo
from kivy.uix.floatlayout import FloatLayout
from kivy.properties import ObjectProperty,NumericProperty
from kivy.app import App
from kivy.core.window import Window
from kivy.animation import Animation
from kivy.factory import Factory

class FboFloatLayout(FloatLayout):
texture=ObjectProperty(None,allownone=True)
alpha=NumericProperty(1)

def init(self,kwargs):
self.canvas=Canvas()
with self.canvas:
self.fbo=Fbo(size=self.size)
self.fbo_color=Color(1,1,1,1)
self.fbo_rect=Rectangle()
with self.fbo: ClearColor(0,0,0,0)
ClearBuffers()

#全てのインストラクションを待ってキャンバスにテクスチャーを設置する self.texture=self.fbo.texture
super(FboFloatLayout,self).init(kwargs)
def add_widget(self,largs):

#キャンバスの代わりにグラフィックを添付するトリック canvas=self.canvas
self.canvas=self.fbo ret=super(FboFloatLayout,self).add_widget(largs)
self.canvas=canvas
return ret

def remove_widget(self,largs): canvas=self.canvas self.canvas=self.fbo super(FboFloatLayout,self).remove_widget(largs)
self.canvas=canvas

def on_size(self,instance,value):
self.fbo.size=value
self.texture=self.fbo.texture
self.fbo_rect.size=value

def on_pos(self,instance,value):
self.fbo_rect.pos=value

def on_texture(self,instance,value):
self.fbo_rect.texture=value

def on_alpha(self,instance,value):
self.fbo_color.rgba=(1,1,1,value)

class ScreenLayerApp(App):
def build(self):
f=FboFloatLayout()
b=Factory.Button(text=”FBO”,size_hint=(None,None))
f.add_widget(b)

def anim_btn(*args):
if b.pos[0]==0:
Animation(x=f.width-b.width).start(b)
else:
Animation(x=0).start(b)
b.bind(on_press=anim_btn)
return f

if name == “main”:
ScreenLayerApp().run()

ボタン「FBO」が左右に動くアニメーションが作れました。

これを上下に動くように遊んでみます。

class ScreenLayerApp(App):
def build(self):
f=FboFloatLayout()
b=Factory.Button(text=”FBO”,size_hint=(None,None))
f.add_widget(b)

#ここを、xをy、widthをheightに変える
def anim_btn(*args):
if b.pos[0]==0:
Animation(y=f.height-b.height).start(b)
else:
Animation(y=0).start(b)
b.bind(on_press=anim_btn)
return f

このように遊べました(=^x^=)

「Kivyというライブラリを使ってPythonでアプリを作って行く」に戻る

■　関連記事　■

Python自作サンプル集
Swiftでアプリ開発される方向け
これからプログラミングを始める方へ
プログラミングと資格について

この記事では、「Python Kivyプログラミング Pythonで作るマルチタッチアプリ」という本を頼りに、章の終わりごとに本と対応するKivy公式サイト（英語で泣きそう）のサンプルプログラムに挑戦しています。

上の本の、5章を終えた所までで類題として作れるアプリです。

Kivy Gallery Examples 「Lines Extended Demo」

このアプリは、円、楕円、長方形、とベジエ曲線（多分一番分かりやすいと思うサイト）を描きます。

この記事の分からない英単語を調べながら読んで行きます。
ちなみに私の英語能力は英検４級（３級落ちた）です。

extended…拡張された
static…静的
padding…余白
spacing…間隔

「Kivyというライブラリを使ってPythonでアプリを作って行く」に戻る

コードです。

from kivy.app import App
from kivy.uix.gridlayout import GridLayout
from kivy.uix.widget import Widget
from kivy.lang import Builder

Builder.load_string(”’

<LineEllipse1>:#赤い楕円1
canvas:
Color:
rgba:1,.1,.1,.9
Line:
width:2.
ellipse:(self.x,self.y,self.width,self.height)
Label:
center:root.center
text:’Ellipse’

<LineEllipse2>:#赤い楕円2
canvas:
Color:
rgba:1,.1,.1,.9
Line:
width:2.
ellipse:(self.x,self.y,self.width,self.height,90,180)
Label:
center:root.center
text:’Ellipse from 90 to 180′
#fun result with low segments!

<LineEllipse3>:#赤い楕円3
canvas:
Color:
rgba:1,.1,.1,.9
Line:
width:2.
ellipse:(self.x,self.y,self.width,self.height,90,720,10)
Label:
center:root.center
text:’Ellipse from 90 to 720\n10 segments’
halign:’center’

<LineCircle1>:#緑の円1
canvas:
Color:
rgba:.1,1,.1,.9
Line:
width:2.
circle:
(self.center_x,self.center_y,min(self.width,self.height)/2)
Label:
center:root.center
text:’Circle’

<LineCircle2>:#緑の円2
canvas:
Color:
rgba:.1,1,.1,.9
Line:
width:2.
circle:
(self.center_x,self.center_y,min(self.width,self.height)/2,90,180)
Label:
center:root.center
text:’Circle from 90 to 180′

<LineCircle3>:#緑の円3
canvas:
Color:
rgba:.1,1,.1,.9
Line:
width:2.
circle:
(self.center_x,self.center_y,min(self.width,self.height)/2,90,180,10)
Label:
center:root.center
text:’Circle from 90 to 180\n10 segments’
helign:’center’

<LineCircle4>:#緑の円4
canvas:
Color:
rgba:.1,1,.1,.9
Line:
width:2.
circle:
(self.center_x,self.center_y,min(self.width,self.height)/2,0,360)
Label:
center:root.center
text:’Circle from 0 to 360′
halign:’center’

<LineRectangle>:#青い四角
canvas:
Color:
rgba:.1,.1,1,.9
Line:
width:2.
rectangle:(self.x,self.y,self.width,self.height)
Label:
center:root.center
text:’Rectangle’

<LineBezier>:#青いベジェ曲線
canvas:
Color:
rgba:.1,.1,1,.9
Line:
width:2.
bezier:
(self.x,self.y,self.center_x-40,self.y+100,
self.center_x+40,self.y-100,self.right,self.y)
Label:
center:root.center
text:’Bezier’
”’)

class LineEllipse1(Widget):
pass
class LineEllipse2(Widget):
pass
class LineEllipse3(Widget):
pass
class LineCircle1(Widget):
pass
class LineCircle2(Widget):
pass
class LineCircle3(Widget):
pass
class LineCircle4(Widget):
pass
class LineRectangle(Widget):
pass
class LineBezier(Widget):
pass

class LineExtendedApp(App):
def build(self):
root=GridLayout(cols=2,padding=50,spacing=50)
root.add_widget(LineEllipse1())
root.add_widget(LineEllipse2())
root.add_widget(LineEllipse3())
root.add_widget(LineCircle1())
root.add_widget(LineCircle2())
root.add_widget(LineCircle3())
root.add_widget(LineCircle4())
root.add_widget(LineRectangle())
root.add_widget(LineBezier())
return root

if name == ‘main’:
LineExtendedApp().run()

実行結果です。

ここから少し遊びます(=^x^=)

長方形とベジェ曲線が見づらいので、色を黄色に変えます。

<LineRectangle>:#黄色い四角
canvas:
Color:
rgba:1,1,.1,.9
Line:
width:2.
rectangle:(self.x,self.y,self.width,self.height)
Label:
center:root.center
text:’Rectangle’
<LineBezier>:#黄色いベジェ曲線
canvas:
Color:
rgba:1,1,.1,.9
Line:
width:2.
bezier:
(self.x,self.y,self.center_x-40,self.y+100,
self.center_x+40,self.y-100,self.right,self.y)
Label:
center:root.center
text:’Bezier’

このようになりました。

では、楕円２の孤の表示される角度を変えて、色をマゼンタ（ピンク）に変え、太さを５にします。

<LineEllipse2>:#ピンクの楕円2
canvas:
Color:
rgba:1,.1,1,.9
Line:
width:5.
ellipse:(self.x,self.y,self.width,self.height,180,270)
Label:
center:root.center
text:’Ellipse from 180 to 270′

次に、多角形の角数を10角から20角に変えます。

<LineEllipse3>:#赤い楕円3
canvas:
Color:
rgba:1,.1,.1,.9
Line:
width:2.
ellipse:(self.x,self.y,self.width,self.height,90,720,20)
Label:
center:root.center
text:’Ellipse from 90 to 720\n20 segments’
halign:’center’

最後に円4を０度から360度のところを270度に変えます。

<LineCircle4>:#緑の円4
canvas:
Color:
rgba:.1,1,.1,.9
Line:
width:2.
circle:
(self.center_x,self.center_y,min(self.width,self.height)/2,0,270)
Label:
center:root.center
text:’Circle from 0 to 270′
halign:’center’

このように遊べました(=^x^=)

「Kivyというライブラリを使ってPythonでアプリを作って行く」に戻る

■　関連記事　■

Python自作サンプル集
Swiftでアプリ開発される方向け
これからプログラミングを始める方へ
プログラミングと資格について

この記事では、「Python Kivyプログラミング Pythonで作るマルチタッチアプリ」という本を頼りに、章の終わりごとに本と対応するKivy公式サイト（英語で泣きそう）のサンプルプログラムに挑戦しています。

上の本の、5章を終えた所までで類題として作れるアプリです。

Kivy Gallery Examples 「Bezier Example」

このアプリは、多角形とベジェ曲線（多分一番分かりやすいと思うサイト）を２つのスライダーを使って描きます。
紫の多角形と、赤いベジエ曲線です。

この記事の分からない英単語を調べながら読んで行きます。
ちなみに私の英語能力は英検４級（３級落ちた）です。

bezier…ベジェ曲線
computed…計算された
polygon…多角形
recompute…再計算

「Kivyというライブラリを使ってPythonでアプリを作って行く」に戻る

from kivy.app import App
from kivy.uix.floatlayout import FloatLayout
from kivy.uix.slider import Slider
from kivy.graphics import Color,Bezier,Line

class BezierTest(FloatLayout):
def init (self,points=[],loop=False,args,kwargs): super(BezierTest,self).init(args,kwargs)
self.d=10 #pixel tolerance(支える) when clicking on a point
self.points=points
self.loop=loop
self.current_point=None #index of point being dragged

with self.canvas:
Color(1.0,0.0,0.0)
self.bezier=Bezier(points=self.points,
segments=150,
loop=self.loop,
dash_length=100,
dash_offset=10)
Color(1.0,0.0,1.0)
self.line=Line(points=self.points+self.points[:2],
dash_offset=10,
dash_length=100)

s=Slider(y=0,pos_hint={‘x’:.3},size_hint=(.7,None),height=50)
s.bind(value=self._set_bezier_dash_offset)
self.add_widget(s)

s=Slider(y=50,pos_hint={‘x’:.3},size_hint=(.7,None),height=50)
s.bind(value=self._set_line_dash_offset)
self.add_widget(s)

def _set_bezier_dash_offset(self,instance,value):
#effect to raduce(減らす) length while increase offset
self.bezier.dash_length=100-value
self.bezier.dash_offset=value

def _set_line_dash_offset(self,instance,value):
#effect to reduce length while increase offset
self.line.dash_length=100-value
self.line.dash_offset=value

def on_touch_down(self,touch):
if self.collide_point(touch.pos[0],touch.pos[1]):
for i,p in enumerate(list(zip(self.points[::2],
self.points[1::2]))):

if(abs(touch.pos[0]-self.pos[0]-p[0])<self.d and \
abs(touch.pos[1]-self.pos[1]-p[1])<self.d):
self.current_point=i+1
return True
return super(BezierTest,self).on_touch_down(touch)

def on_touch_up(self,touch):
if self.collide_point(touch.pos[0],touch.pos[1]):
if self.current_point:
self.current_point=None
return True

return super(BezierTest,self).on_touch_up(touch)
def on_touch_move(self,touch):
if self.collide_point(touch.pos[0],touch.pos[1]):
c=self.current_point

if c:
self.points[(c-1)2]=touch.pos[0]-self.pos[0] self.points[(c-1)2+1]=touch.pos[1]-self.pos[1]
self.bezier.points=self.points
self.line.points=self.points+self.points[:2]
return True
return super(BezierTest,self).on_touch_move(touch)

class Main(App):
def build(self):
from math import cos,sin,radians
x=y=150
z=100
#Pacman!
points=[x,y]
for i in range(45,360,45):
i=radians(i)
points.extend([x+cos(i)z,y+sin(i)z])
return BezierTest(points=points,loop=True)

if name == ‘main’:
Main().run()

実行結果です。

「Kivyというライブラリを使ってPythonでアプリを作って行く」に戻る

＜＜関連記事＞＞

Python自作サンプル集
Swiftでアプリ開発される方向け
これからプログラミングを始める方へ
プログラミングと資格について

この記事では、「Python Kivyプログラミング Pythonで作るマルチタッチアプリ」という本を頼りに、章の終わりごとに本と対応するKivy公式サイト（英語で泣きそう）のサンプルプログラムに挑戦しています。

上の本の、5章を終えた所までで類題として作れるアプリです。

Kivy公式Gallery of Examples 「Canvas stress」

このアプリは、画面下のボタンを押すと、その分だけ小さいカラフルな四角を、画面に散りばめることが出来ます。

”’Canvas stress
この例は、指定のボタンを押すと小さい四角が追加されます。
ボタンは黒いスクリーンの下にあります。
”’

「Kivyというライブラリを使ってPythonでアプリを作って行く」に戻る

from kivy.uix.button import Button
from kivy.uix.widget import Widget
from kivy.uix.label import Label
from kivy.uix.boxlayout import BoxLayout
from kivy.app import App
from kivy.graphics import Color,Rectangle
from random import random as r
from functools import partial

class StressCanvasApp(App):
def add_rects(self,label,wid,count,largs): label.text=str(int(label.text)+count)
with wid.canvas:

#ここで、大きさを変えることができる
for x in range(count): Color(r(),1,1,mode=’hsv’)
Rectangle(pos=(r()wid.width+wid.x,
r()wid.height+wid.y),size=(20,20))

def double_rects(self,label,wid,largs):
count=int(label.text)
self.add_rects(label,wid,count,largs)

def reset_rects(self,label,wid,largs):
label.text=’0′
wid.canvas.clear()

def build(self):
wid=Widget()

label=Label(text=’0′)
btn_add100=Button(text=’+ 100 rects’,
on_press=partial(self.add_rects,label,wid,100))

btn_add500=Button(text=’+ 500 rects’,
on_press=partial(self.add_rects,label,wid,500))

btn_double=Button(text=’x 2′,
on_press=partial(self.double_rects,label,wid))

btn_reset=Button(text=’Reset’,
on_press=partial(self.reset_rects,label,wid))

layout=BoxLayout(size_hint=(1,None),height=50)
layout.add_widget(btn_add100)
layout.add_widget(btn_add500)
layout.add_widget(btn_double)
layout.add_widget(btn_reset)
layout.add_widget(label)
root=BoxLayout(orientation=’vertical’)
root.add_widget(wid)
root.add_widget(layout)
return root

if name == ‘main’:
StressCanvasApp().run()

このような四角が表示されました。

ここからちょっと遊んでみます(=^x^=)
上のコードの「大きさを変えられる」のところで、size=(20,20)を100にしてみます。

このように遊べました。

「Kivyというライブラリを使ってPythonでアプリを作って行く」に戻る

＜＜関連記事＞＞

Python自作サンプル集
Swiftでアプリ開発される方向け
これからプログラミングを始める方へ
プログラミングと資格について

この記事では、「Python Kivyプログラミング Pythonで作るマルチタッチアプリ」という本を頼りに、章の終わりごとに本と対応するKivy公式サイト（英語で泣きそう）のサンプルプログラムに挑戦しています。

上の本の、5章を終えた所までで類題として作れるアプリです。

公式サイト
Kivy tutorial 006: Let’s draw something

「Kivyというライブラリを使ってPythonでアプリを作って行く」に戻る

前回 の記事の最後のコードに追記したコードを掲載します。
追記したところはコメントがついています。

from kivy.app import App
from kivy.uix.boxlayout import BoxLayout
from kivy.uix.slider import Slider
from kivy.uix.widget import Widget
from kivy.graphics import Rectangle,Color

class DrawingWidget(Widget):
def init(self):
super(DrawingWidget,self).init()
with self.canvas:
Color(1,1,1,1)#赤、緑、青、透明度
self.rect=Rectangle(size=(self.size),
pos=self.pos)

#前回のコードから追記　
Color(1,0,0,1)
Rectangle(size=(300,100),
pos=(300,200))
self.bind(pos=self.update_rectangle,
size=self.update_rectangle)

def update_rectangle(self,instance,value):
self.rect.pos=self.pos
self.rect.size=self.size

class DrawingApp(App):
def build(self):
root_widget=DrawingWidget()
return root_widget
DrawingApp().run()

実行します。

このコードを修正・追記して、ランダムな色で落書きが出来るようにします。

from kivy.app import App
from kivy.uix.boxlayout import BoxLayout
from kivy.uix.slider import Slider
from kivy.uix.widget import Widget
from kivy.graphics import Rectangle,Color,Line
from random import random

class DrawingWidget(Widget):
def init(self):
super(DrawingWidget,self).init()
with self.canvas:
Color(1,1,1,1)#赤、緑、青、透明度
self.rect=Rectangle(size=self.size,
pos=self.pos)

#修正
self.rect_colour=Color(1,0,0,1)
Rectangle(size=(300,100),
pos=(300,200))
self.bind(pos=self.update_rectangle,
size=self.update_rectangle)
def update_rectangle(self,instance,value):
self.rect.pos=self.pos
self.rect.size=self.size
def on_touch_down(self,touch):

super(DrawingWidget,self).on_touch_down(touch)
with self.canvas:
Color(random(),random(),random())
self.line=Line(points=[touch.pos[0],touch.pos[1]],width=2)

def on_touch_move(self,touch):
self.line.points=self.line.points+[touch.pos[0],touch.pos[1]]

class DrawingApp(App):
def build(self):
root_widget=DrawingWidget()
return root_widget

DrawingApp().run()

今日の日付を書きました。

「Kivyというライブラリを使ってPythonでアプリを作って行く」に戻る

＜＜関連記事＞＞

Python自作サンプル集
Swiftでアプリ開発される方向け
これからプログラミングを始める方へ
プログラミングと資格について