[Pictogramming Series] Pictogramming updated mouse operations and corresponding processing on the pictogram display area.

Pictogramming updated mouse operations and corresponding processing on the pictogram display area. Following table shows the list of  mouse operation.  The corresponding commands can be added to the program display area automatically by various mouse operations on the pictogram display area.

Mouse position of starting Mouse operation Processing on pictogram display area
In the human pictogram display area

(Expect for the drawing point of human pictogram)

Left click and drag Rotate correspond part of human pictogram
Right click and drag Translate
Outside the human pictogram display area Left click and drag Draw line
Right click and drag Draw Oval
Any Hold down Change direction( front and side) of human pictogram
A drawing point of human pictogram Click Hold and release the pen at a drawing point

 

Following is a demonstration video.

 

[ピクトグラミングシリーズ] 座標指定によるグラフィックス描画方式に対しての「円」描画命令の追加,および円をマウス操作のみでも描画できるようにしました.対応する円命令も自動的にプログラムに挿入されます.#pictogramming #ピクトグラミング

ピクトグラミングでは,次に示す3通りの描画方式をサポートしており,(a)「人型ピクトグラムの体の部位の移動の履歴で描画」する方式,「(b)人型ピクトグラム自身の移動の履歴で描画」する方式(タートルグラフィックスに相当)では円を描くことができましたが,一般的なプログラミング言語で採用されている「(c)座標を指定して描画」では円を描く機能はあえて実装していませんでした.今回これを実装いたしました.標準のピクトグラミングPicthonJavaScpict, Block Pictogramming(日本語版英語版いずれも)が対応されています.以下標準のピクトグラミングを例に説明しますが,他についても同様です.

追加された命令の様式は以下の通りです.

命令の様式 処理
O arg1 arg2 arg3 arg4 [arg5] 中心座標(arg1,arg2),幅 arg3, 高さ arg4,中心座標を中心に反時計回りに arg5 度回転した楕円を描く.arg5 が 省略された時は,arg5に0が入力されているものとして取り扱う.

 

標準のピクトグラミングにおける各言語での命令表記は以下になります.

英語表記 英語 日本語 にほんご
O Oval えん

 

さらに円の描画も,ピクトグラム表示領域に対するマウスドラッグ操作でできるようにしました.下の表にあるように,人型ピクトグラムが表示されている以外の場所を,右クリックでドラッグすると,ドラッグ開始時の座標を中心点とする楕円を描くことができます.またマウスで操作した場合においても,対応する「円描画命令」が自動的にプログラムに挿入されます.

 

ドラッグ開始時のマウスの座標 ドラッグ開始時におけるマウス操作 操作
人型ピクトグラムの表示領域内 左クリック 人型ピクトグラムの対応する部位を回転
右クリック 人型ピクトグラムの平行移動
人型ピクトグラムの表示領域外 左クリック 線分の描画
右クリック 楕円の描画
長押し 人型ピクトグラムの向いている方向の変更(正面と側面)

 

このマウス操作による「円の描画」は,人型ピクトグラムへの様々なマウス操作(回転,平行移動等)が有効になっている場合に限りますので,マウス操作を有効にしたいときは,下の図の「マウス操作禁止」の横にあるチェックボックスをオフにしてください.

 

 

以下のようなピクトグラムもマウス操作だけで作成できるようになりました.

注: 2020/03/16現在 このO命令を使うと画像と動画の保存ができなくなります(使わなければ保存できます).原因を調査し改善します.

注: 2020/03/16 「このO命令を使うと画像と動画の保存ができなくなります(使わなければ保存できます).原因を調査し改善します.」について解決しました.

 

 

[ピクソン] ピクソン(ピクトグラミングPython版)のプログラム記述領域にコードエディタを採用しました.

これまでピクトグラミングシリーズは,プログラムを記述する領域に,HTML5標準のテキストエリアを使用してきましたが,今回ブラウザ上で動作するコードエディタ CodeMirror を使用することにしました.これにより行番号の表示,シンタックスハイライトなど,プログラムを記述する上でより利便性が高まります.JavaScpictに続けて,ピクトグラミングのPython版である,Picthonに対して適用しました.今後,ピクトグラミングシリーズの他のアプリケーション(ブロックピクトグラミングを除く)にも順次適用予定です.

 

[ジャバスクピクト] ジャバスクピクト(ピクトグラミングJavaScript版)のプログラム記述領域にコードエディタを採用しました.

これまでピクトグラミングシリーズは,プログラムを記述する領域に,HTML5標準のテキストエリアを使用してきましたが,今回ブラウザ上で動作するコードエディタ CodeMirror を使用することにしました.これにより行番号の表示,シンタックスハイライトなど,プログラムを記述する上でより利便性が高まります.手始めにピクトグラミングのJavaScript版である,JavaScpictに対して適用しました.今後,ピクトグラミングシリーズの他のアプリケーション(ブロックピクトグラミングを除く)にも順次適用予定です.

[ピクトグラミングシリーズ] 体の各部位(9箇所)に対するペンの持つ・放すをマウスクリック操作で変更できるようにしました.対応する命令も自動的にプログラムに挿入されます.#pictogramming #ピクトグラミング

ピクトグラミングでは,体,左右のひじ,手,ひざ,あしの9箇所にペンを独立に持つことができます.ペンを持つとその部分の移動の履歴が描画されます.

各部位に対するペンの持つ・放すをマウスクリック操作で変更できるようにしました.表示されている人型ピクトグラムの対応する位置にマウスカーソルを持っていくとピンクの十字が現れますので,そこでマウスをクリックするとペンの持つ・放すが切り替わります.ペンを持っている場合は,対応する位置に赤い十字が表示されます.またマウスで操作した場合においても,対応する「ペンを持つ・放す命令」が自動的にプログラムに挿入されます.

このクリック操作による「ペンの持つ/放す」は,人型ピクトグラムへの様々なマウス操作(回転,平行移動等)が有効になっている場合に限りますので,マウス操作を有効にしたいときは,下の図の「マウス操作禁止」の横にあるチェックボックスをオフにしてください.

人型ピクトグラム表示領域に対する機能追加なので,標準のピクトグラミングPicthonJavaScpict, Block Pictogramming(日本語版英語版いずれも), 自然言語ピクトグラミング全てが対応されています.

 

 

 

 

 

[ブロックピクトグラミング] ブロックピクトグラミングにキーイベントを追加しました.

もともとピクトグラミングはキーイベントをサポートしています.サンプルはこちらです.

今回,ブロックピクトグラミング(標準版IE対応版のいずれも)にキーイベントのサポートを追加しました.

サンプル画面です.上下左右のキーでピクトグラムを動かし,スペースキーを押すと右腕でその場で円を書きます.このサンプルプログラムはこちらです.

 

注意点として,プログラム入力テキストエリア(画面右側)がフォーカスされている場合,キーイベントは発生しませんので,実行開始ボタンを押して実行させ,フォーカスを変更させるか,人型ピクトグラム表示フィールドをクリックしてフォーカスを変更してください.

また,ピクトグラミングでは,一つ以上実行中あるいは実行開始前の命令がある状態をプログラム実行中とみなします.イベントはプログラム実行中しか駆動しませんので,メインプログラムの最後に(1000秒待つ)とかいうブロックを追加して,実行開始からしばらくの間実行中の状態にする必要があります.

工夫次第で簡単なゲームの作成も可能だと思います.

[ピクトグラミングシリーズ] 線の太さの初期値を1から15にしました.https://pictogramming.org/ #プログラミング #ピクトグラム

ピクトグラミングでは,様々な方法で線が描けますが,その線の太さの初期状態の値を1から15に変えました.

 

線の太さを変えるには,線の太さを変える命令を入力する必要があります.この命令の存在に気づかないと,初期状態(太さ1)のままピクトグラムを作成してしまい,以下のようなピクトグラムになってしまいます.ピクトグラミングでは,プログラミングの視点からすると,複雑な線画を単純な命令列でプログラムできるのが特徴となっており,その場合,太さを1にしておいたほうが望ましいので,これまでデフォルトを1としていました.一方ピクトグラムを作るという視点からすると,細い線は視認性が悪く,ピクトグラムデザインの点からもよくありません.そこで今回デフォルトの線の太さを15としました.

 

 

よって,これからは,以下のようなピクトグラムが,線の太さの設定を変えずに作ることができます(つまりはマウス操作だけでもできます.).ピクトグラミングシリーズは共通のコンポーネントを使っているので,全てのシリーズ(標準のピクトグラミング,ピクソン,ジャバスクピクト, ブロックピクトグラミング)で変更されます.

ただし,小学校向けコンテンツ中の算数(第5学年)B 図形(1)正多角形に特化した二つのバージョンは,図形(正多角形)を描くことが目的となっているので,線の太さは1のまま(正確には最初に線の太さを1にする命令を裏で実行している)にしています.