BrythonでPath2Dオブジェクトを使う

2016-10-15 / tau / コメントする

Brythonでcanvasに描画をする場合、取得したcontextに直接描いていくほかに、Path2Dオブジェクトにサブパスを追加していってから最後に描くという方法がある(HTML5のcanvasを参照)。

BrythonにはPath2Dオブジェクトは実装されていないが、JavaScriptの組み込みクラスを扱う方法によって、Path2Dオブジェクトを使えるようになる。

from browser import document
from browser import window
from javascript import JSConstructor

canvas = document['cvs_main']
if hasattr(canvas, 'getContext'):
    context = canvas.getContext('2d')
else:
    context = None

Path2D = JSConstructor(window.Path2D)
path = Path2D()
path.moveTo(200, 100)
path.lineTo(300, 200)
path.lineTo(100, 200)
path.closePath()

context.stroke(path)

from browser import document

from browser import window

from javascript import JSConstructor

canvas = document['cvs_main']

if hasattr(canvas, 'getContext'):

context = canvas.getContext('2d')

else:

context = None

Path2D = JSConstructor(window.Path2D)

path = Path2D()

path.moveTo(200, 100)

path.lineTo(300, 200)

path.lineTo(100, 200)

path.closePath()

context.stroke(path)

BrythonでJavaScriptの組み込みクラスを使う

2016-10-15 / tau / 2件のコメント

次の手順でBrythonからJavaScriptのクラスを直接使うことができる。JavaScript側の自作クラスをPythonで使う例はいくつか見かけたが、組込関数はどうかと思って試してみた。

browserモジュールからwindowオブジェクトをインポートする
JSConstructor()関数の引数にJavaScriptの組み込みクラスのコンストラクタを与えてPythonとしてのコンストラクタを得る
- ()や引数はつけない
- 引数に与えるJavaScriptのコンストラクタはwindowオブジェクトに属している
上のコンストラクタを使ってインスタンスを生成

たとえばJavaScriptの組込クラスArrayを使ってみる。

from browser import window
from javascript import JSConstructor

Array = JSConstructor(window.Array)
array = Array("one", "two", "three")
print(array)
# ['one', 'two', 'three']

from browser import window

from javascript import JSConstructor

Array = JSConstructor(window.Array)

array = Array("one", "two", "three")

print(array)

# ['one', 'two', 'three']

Arrayオブジェクトをつくると、Pythonのリストとして生成されているらしい。メソッドも使えそう。

array.reverse()
print(array)
# ['three', 'two', 'one']
array.sort()
print(array)
# ['one', 'three', 'two']

array.reverse()

print(array)

# ['three', 'two', 'one']

array.sort()

print(array)

# ['one', 'three', 'two']

ところがtoString()メソッドを使おうとするとエラーに。

print(array.toString())
# AttributeError: 'list' object has no attribute '$$toString'

1 2	print(array.toString()) # AttributeError: 'list' object has no attribute '$$toString'

これを見ると、JavaScriptのコンストラクタを使っているが、Pythonではリストとして解釈されるので、メソッドが存在しない、とエラーになる。上のreverse()やsort()は、JavaScriptのArrayクラスのメソッドではなく、Pythonのリストオブジェクトのメソッドとして解釈・実行されたということになる。

Pythonのクラスに定義されていないプロパティにアクセスした場合もエラーになる。

print(len(array))
# 3
print(array.length)
# AttributeError: 'list' object has no attribute 'length'

print(len(array))

# 3

print(array.length)

# AttributeError: 'list' object has no attribute 'length'

もともとBrythonに該当するものがないJavaScriptのクラスの場合。たとえばPath2Dをつくってみると、JSObjectでラップされたオブジェクトになっているらしい。

from browser import window
from javascript import JSConstructor

Path2D = JSConstructor(window.Path2D)
path = Path2D()
print(path)
# <JSObject wraps [object Path2D]>

from browser import window

from javascript import JSConstructor

Path2D = JSConstructor(window.Path2D)

path = Path2D()

print(path)

# <JSObject wraps [object Path2D]>

このPath2DオブジェクトのmoveTo()やlineTo()といったメソッドは問題なく機能して、canvasに描画することができる。

Brython – 日時とタイマ

2016-10-11 / tau / コメントする

このページでは、Brythonの外部スクリプトファイルを読み込んで実行している。ページのロード後にその時の日時が表示され、下のボタンを押すたびに現在時刻が1秒間隔で表示され、またそれが停止する。

このページのHTML部分は以下の通りで、ボタンと表示部、スクリプト読み込みが主要部分。

・・・・・

<input id="start-stop" type="button" value="Start/Stop" />
<div id="show-area" style="font-size: 2em;"></div>

・・・・・

<p style="font-size: 2em;"><script type="text/python" src="../brython/datetime.py"></script></p>

・・・・・

・・・・・

外部スクリプトの内容は以下の通り。global変数は使わず、timerを保持・表示するクラスを関数の引数に渡している。

また、timer.set_interval()の引数に関数を渡す際、インスタンスメソッドを渡すこともできる。

from browser import document
from datetime import datetime
from browser import timer

class DateTimeObject:
    def __init__(self):
        self.timer = None

    def show():
        date_string = datetime.now().strftime('%Y/%m/%d %H:%M:%S')
        document["show-area"].html = date_string

def switch(datetime_obj):
    if datetime_obj.timer is None:
        datetime_obj.timer = timer.set_interval(datetime_obj.show, 1000)
    else:
        timer.clear_interval(datetime_obj.timer)
        datetime_obj.timer = None

datetime_obj = DateTimeObject()
datetime_obj.show()

document["start-stop"].bind("click", lambda: switch(datetime_obj))

from browser import document

from datetime import datetime

from browser import timer

class DateTimeObject:

def __init__(self):

self.timer = None

def show():

date_string = datetime.now().strftime('%Y/%m/%d %H:%M:%S')

document["show-area"].html = date_string

def switch(datetime_obj):

if datetime_obj.timer is None:

datetime_obj.timer = timer.set_interval(datetime_obj.show, 1000)

else:

timer.clear_interval(datetime_obj.timer)

datetime_obj.timer = None

datetime_obj = DateTimeObject()

datetime_obj.show()

document["start-stop"].bind("click", lambda: switch(datetime_obj))

Brythonでのタイマの使い方についてはこちらを参照。

Brythonの開発環境

2016-10-10 / tau / コメントする

概要

Brythonの開発環境については、Brython Documentationの”Development Environment“で説明されている。

開発環境のダウンロードと解凍

まず、開発環境のzipファイルをダウンロードする。ファイルは”BrythonX.Y.Z_site_mirror”で、X.Y.Zはバージョン番号。

ダウンロードしたファイルをディレクトリ下に解凍する。以下、このディレクトリを”brython_directory”とする。

サーバの起動・終了

Brythonをローカル環境で開発するため、ローカルサーバを起動する。サーバはPythonでつくられていて、その場所はbrython_directory直下、ファイル名はserver.py。

brython_directoryで、コンソールからpython server.pyと打つとポート8000でローカルサーバが動き出す。

>python server.py

1	>python server.py

起動時の--portオプション指定で8000以外のポートを割り当てることも可能。

>python server.py --port 8001

1	>python server.py --port 8001

サーバの終了は、サーバが稼働中のコンソールで[CTRL-C]

ファイルの配置と呼び出し

開発するBrythonを呼び出すHTMLファイルを置く場所は、brython_directory/wwwの下に任意のディレクトリを作成して配置。

たとえばbrython_directory/www/brython_test/index.htmlなど。

ブラウザからこのファイルを読みに行く場合は”http://localhost:8000/brython_test/index.html”とする。

WordPressでのBrythonの扱い方

2016-10-10 / tau / コメントする

注意点

WordPressでBrythonを使うとき、以下の点に気を付けなければならない。

brython.jsを読み込むのはheadセクションだが、カスタムセクションにこれを書くなど、WordPressとしての扱いが必要
onload時にbrython()を実行させる処理が必要
スクリプトをHTML内に直接書くときに、WordPressのエディタの仕様が問題になる(勝手に<p>タグがつけられる)。

Brythonの読み込み

通常はHTMLドキュメントのheadセクションでbrython.jsを読み込むが、WordPressの場合は別途処理しなければならない。

このページでは、Custom CSS and JavaScriptでターゲットを指定している。

onload時の処理

<body>タグがPHPに含まれているので触り難いが、以下のようなjavascriptファイルをheadセクションで読み込んでおけば、onload時に関数が呼ばれてbrython()が実行される(WordPressでのonload処理を参照)。

function onload_brython() {
    brython()
}

window.onload = function() {
    onload_brython();
}

function onload_brython() {

brython()

}

window.onload = function() {

onload_brython();

}

このページでは、上記ファイルをonload_brython.jsとしてサーバ上に置き、先のBrythonの読み込みの後に、Custom CSS and JavaScriptで読み込んでいる。

スクリプトを直接書く時の注意

Brythonを展開するのに、直接HTMLファイルにスクリプトを書く方法と、外部スクリプトファイルに分ける方法の2つがあるのは他のスクリプトと同じ。

ただしWordPressのエディタのテキストモードでスクリプトをHTML内に直接書く場合、スクリプト中に空行があると勝手に<p>タグが挿入されるので、実行時にエラーとなる。<p>タグを付加するのを抑制するか、あるいは空行なしで書けば正常に実行される。

以下の例は、このページ中に直接Brythonのスクリプトを書いたもの。

<script type="text/python">
from browser import alert, document
def html_direct():
    alert("これはHTML内に直接書いたスクリプトです。")
document['btn-html-direct'].bind("click", html_direct)
</script>

from browser import alert, document

def html_direct():

alert("これはHTML内に直接書いたスクリプトです。")

document['btn-html-direct'].bind("click", html_direct)

</script>

あるいは下の例のように、スクリプトを外部ファイルにすれば、問題なく実行される。

<script type="text/python" src="./startup-outer-script.py"></script>

1	<script type="text/python" src="./startup-outer-script.py"></script>

from browser import alert, document

def outer_script():
    alert("こちらは外部スクリプトファイルです。")

document['btn-outer-script'].bind("click", outer_script)

from browser import alert, document

def outer_script():

alert("こちらは外部スクリプトファイルです。")

document['btn-outer-script'].bind("click", outer_script)

TauStation

タグ: Brython

BrythonでPath2Dオブジェクトを使う

BrythonでJavaScriptの組み込みクラスを使う

Brython – 日時とタイマ

Brythonの開発環境

概要

開発環境のダウンロードと解凍

サーバの起動・終了

ファイルの配置と呼び出し

WordPressでのBrythonの扱い方

注意点

Brythonの読み込み

onload時の処理

スクリプトを直接書く時の注意