include::configJ.adoc[]
:toc: left
:lang: ja
// :doctype: bookDir
:toc-title: 目次
:toclevels: 5
:sectnums:
:sectnumlevels: 6
:example-caption: ■
:imagesdir: 

= PDFormstudio V200ボタンデザインの変更

== 概要
PDFormstudioのメジャーバージョンアップにおいて、ワークフロー設計画面の変更を行う。
処理の流れをダイアグラムでレイアウトするが、以下の課題があった

課題::
* タスクを配置しても、接続操作時にしかその接続可否がわからない
* 接続の組み合わせは多種に及んでおり、その入出力の接続種別がわからない
V200で改善::
* タスクの配置前に、どの組み合わせが配置できるか確認できるようにした
* タスクの入出力をアイコンで明示

== 変更前のレイアウト画面

.V171の旧画面
image::V171.JPG[V171,600,400,align="left"]

.操作イメージ（アニメGIF)
image::Anime/V171D.gif[V200anime,600,400]

== 変更後のレイアウト画面(V200暫定)

.V200の新画面
image::V200.JPG[V200,600,400,align="left"]

.操作イメージ（アニメGIF)
image::Anime/V200D.gif[V200anime,600,400]


//image::screentogif-test.gif[複雑なGIFアニメ]

== デザインの課題

* 見た目が貧弱なので工夫したい。
* 種別アイコンを色で表現しているが、色以外の表現方法も試してみたい。

== 現在のタスクデザイン
タスクは、以下 ** 接続円形BitMap+タスク本体のBitMap+タスク文字列** を合成して動的にレイアウトします。
差し替えデザインはこれらのサイズを踏襲する必要があります。

.円形接続BitMapデータ
[cols="1,2", options="header"]
|===
|イメージ(bmp)| 仕様
| 
image:開発中BMP/TaskPort_1.bmp[赤]
image:開発中BMP/TaskPort_2.bmp[緑]
image:開発中BMP/TaskPort_4.bmp[黄色]	
image:開発中BMP/TaskPort_8.bmp[青]
image:開発中BMP/TaskPort_6.bmp[緑＋黄]
image:開発中BMP/TaskPort_13.bmp[赤＋黄＋青]
image:開発中BMP/TaskPort_14.bmp[緑＋青＋黄]
| 23 x 25 pix, 24bpp BGR
| 
image:開発中BMP/Task-Red.bmp[赤] image:開発中BMP/Task-Yellow.bmp[緑]| 95  x 25 pix, 24bpp BGR
|===

== その他の案

.連結色の意味
|===
|image:2_連結色_意味.JPG[連結色の意味] 
|===
.タスクフロー組み合わせ 例
|===
|image:接続フロー.JPG[連結フロー] 
|===

.塩基の意味をそのまま踏襲したもの
[cols="1,1"]
|===
|
元の意味をそのまま接続子に→ ボタンが大きくなりすぎて不可、視認性も悪い。
image:別案1.JPG[別案] 
| 
接続できない時にグレーアウト 
image:別案1b.JPG[別案b] 
|===