Hatena::Groupnadesiko

雪乃☆雫のなでしこ日和

2017/10/28 (土)

テーブルに編集機能をつけてみたよ!

| 17:43 | テーブルに編集機能をつけてみたよ! - 雪乃☆雫のなでしこ日和 を含むブックマーク はてなブックマーク - テーブルに編集機能をつけてみたよ! - 雪乃☆雫のなでしこ日和 テーブルに編集機能をつけてみたよ! - 雪乃☆雫のなでしこ日和 のブックマークコメント

 クリックした時、画像部分コピーで選択色を入れる代わりに、メモ開くようにしただけです。

 デフォルトはオフですが、「編集はオン」とすると、有効になります。

 アイテムの変更が確定するのは、別のセルにフォーカスが移った時です。

#-----------------------------------------------------------------------
#「table_改.nako」
# 編集機能付きテーブル
#-----------------------------------------------------------------------
■テーブル改 +イメージ
 ・太{=2}
 ・線色{=$CCCCCC}
 ・背景色{=$FFFFFF}
 ・選択色{=$EEEEEE}
 ・文字色{=$000000}
 ・文字サイズ{=12}
 ・フォント{=「MS ゴシック」}

 ・左余白{=3}
 ・右余白{=10}
 ・上余白{=3}
 ・下余白{=5}
 ・最小セル幅{=30}
 ・編集{=オフ}

 ・列数
 ・行数
 ・アイテム ←アイテム設定 →アイテム取得
 ・アイテム_
 ・アイテム取得~それ=アイテム_。
 ・アイテム設定(S)~
  Sの変数型確認。
  もしそれが「配列」でなければ、アイテム_=SをCSV取得。
  違えば、アイテム_=S。
  アイテム_=アイテム_表行列交換。
  列数=アイテム_要素数。
  アイテム_=アイテム_表行列交換。
  行数=アイテム_要素数。

 ・標準カラー設定({数値=0}Vに)~
  Vで条件分岐
   0ならば文字色黒色。背景色=白色線色=$CCCCCC。選択色=$EEEEEE。
   1ならば文字色=白色線色=$808080。背景色=黒色。選択色=$808080。

 ・作る~
  オブジェクト=VCL_CREATE(自身, 名前, VCL_GUI_IMAGE)。
  テーブルイメージバックアップ画面をイメージとして作成。
  テーブルイメージバックアップ画面→可視=オフ。
  テーブルイメーフォーカス用画面をイメージとして作成。
  テーブルイメーフォーカス用画面→可視=オフ。
  テーブル編集用メモメモとして作成。
  テーブル編集用メモ→可視はオフ。
  テーブル編集用メモ→スクロールバー。

 ・選択行
 ・選択列
 ・マウス移動した時は~/*マウス位置設定するためのダミー定義*/
 ・クリックした時は~フォーカス選択。
// ・ダブルクリックした時は~選択行&`,`&選択列と言う。

 ・セルX
 ・セルY
 ・セルW
 ・セルH
 ・セル編集フラグ{=0}
 ・フォーカス選択~
  セル内容変更。
  左位置=``。右位置=``。上位置=``。下位置=``。
  高列=高配列&改行&H。幅列=列幅配列。
  
  オン
   I=回数-1。左位置=幅列[0]。幅列の0を配列削除。
   (幅列[0]>マウスX)ならば、右位置=幅列[0]。抜ける。
  選択列=I。もし、選択列>列数-1ならば、選択列=列数-1。
  オン
   I=回数-1。上位置=高列[0]。高列の0を配列削除。
   (高列[0]>マウスY)ならば、下位置=高列[0]。抜ける。
  選択行=I。もし、選択行>行数-1ならば、選択行=行数-1。
  
  セルX=左位置+描補正位置。セルY=上位置+描補正位置。セルW=右位置-左位置-線太さ。セルH=下位置-上位置-線太さ。
  S=私→アイテム。S=S[私→選択行][私→選択列]。テーブル編集用メモ→テキストはS。
  テーブル編集用メモ文字サイズは私→文字サイズ。テーブル編集用メモ文字書体は私→フォント。
  テーブル編集用メモ→Xは私→セルX+私→X。テーブル編集用メモ→Yは私→セルY+私→Y。
  テーブル編集用メモ→Wは私→セルW。テーブル編集用メモ→Hは私→セルH。
  もし、編集=オンならば、テーブル編集用メモ→可視はオン。テーブル編集用メモ→注目。
  違えば、
    テーブルイメージバックアップ画面を私の0,0へ画像コピー。
    テーブルイメーフォーカス用画面のセルX,セルY,セルW,セルHを私のセルX,セルYへ画像部分コピー。
    描画処理反映。
  セル編集フラグ=1。

 ・セル内容変更~
  テーブル編集用メモ→可視はオフ。
  自身を私にグループ参照コピー。
  もし、セル編集フラグ=0でなければ、
    S=私→アイテム。S[私→選択行][私→選択列]はテーブル編集用メモ→テキスト。
    私→アイテム=S。自動作成。

 ・高配列
 ・描補正位置
 ・アイテム段数配列
 ・自動作成~
  もし線太さ%2=0ならば、描補正位置=(太/2)を切捨。
  違えば、描補正位置=(太/2)を切捨+1。
  システム設定変更。文字幅設定する。自身白色画面クリア。
  アイテム配列座標付情報作成する。
  HI=(線太さ/2)を切捨。
  //外枠を描く
  自身の(線太さ/2)を切捨,(線太さ/2)を切捨からW+1-(線太さ/2)を切捨,表下位置+1+(線太さ/2)を切捨へ四角。
  高配列=(線太さ/2)を切捨。最大出現数とは整数=0。
  アイテムを反復
   //行を描く。
   V=アイテム段数配列[回数-1]。
   (V+1)、HI=HI+文字高。
   HI=HI+(上余白+下余白)。
   もし回数行数ならば自身太-1,HIからW-線太さ+1,HIへ。
   HIを高配列配列追加。
  //列を描く。
  列幅配列反復
    (回数>1)かつ(回数<列数+1)ならば自身対象,0から対象,表下位置へ。
  
  アイテム描画する。
  バックアップ画面作成する。
  システム設定戻す。

 ・S_塗色
 ・S_太
 ・S_文字色
 ・S_線色
 ・S_文字サイズ
 ・S_文字書体
 ・システム設定変更~
  S_塗色=システム:塗色。S_太=システム:太。S_線色=システム:線色。S_文字色=システム:文字色。S_文字サイズ=システム:文字サイズ。S_文字書体=システム:文字書体。
  システム:塗色=背景色。システム:太=太。システム:線色線色。システム:文字色文字色。システム:文字サイズ文字サイズ。システム:文字書体=フォント。
 ・システム設定戻す~
  システム:塗色=S_塗色。システム:太=S_太。システム:線色=S_線色。システム:文字色=S_文字色。システム:文字サイズ=S_文字サイズ。システム:文字書体=S_文字書体。

 ・アイテム描画~
  自身を私にグループ参照コピー。X1とは整数。Y1とは整数。
  テーブルイメーフォーカス用画面を貴方にグループ参照コピー。
  貴方→サイズ=私→サイズ。貴方→画面クリア(私→選択色)。
  アイテム配列座標付情報を反復
   X1=対象[1]。Y1=対象[2]
   自身のX1,Y1へ対象[0]を文字表示。
   貴方のX1,Y1へ対象[0]を貴方:文字表示。

 ・アイテム配列座標付情報
 ・アイテム配列座標付情報作成~
  HI=(線太さ/2)を切捨。I=0。アイテム配列座標付情報=``。
  アイテムを反復
   対象反復
    アイテム配列座標付情報[I][0]=対象
    アイテム配列座標付情報[I][1]=(列幅配列[回数-1]+左余白)
    アイテム配列座標付情報[I][2]=(HI+上余白)。
    Iに1を直接足す。
   V=アイテム段数配列[回数-1]。
   (V+1)、HI=HI+文字高。
   HI=HI+(上余白+下余白)。

 ・バックアップ画面作成~
  自身を私にグループ参照コピー。
  テーブルイメージバックアップ画面→サイズ=私→サイズ。
  自身をテーブルイメージバックアップ画面の0,0へ画像コピー。

 ・文字高
 ・表下位置 //表の下の位置
 ・文字情報設定~
  アイテム段数配列。
  アイテムを反復
   最大出現数=0。
   対象反復
    V=対象で「{CHR(10)}」の出現回数。
    (最大出現数<V)ならば、最大出現数=V。
   最大出現数をアイテム段数配列配列追加。
  
  実行数とは整数=0。
  アイテム段数配列反復
   実行数=実行数+(対象+1)
  
  文字高=`字`の文字高さ取得。
  表下位置=(実行数×文字高)+行数*(上余白+下余白)。

 ・最大列幅
 ・列幅配列
 ・文字幅設定~
  文字幅表=``。最大列幅=``。列幅配列。
  文字情報設定。
  アイテムを反復
   I=回数-1。V=0。
   対象反復
    対象を「{CHR(10)}」で区切って反復
     もし、V<(対象文字幅取得)ならば、V=対象文字幅取得。
    もし、V<最小セル幅ならば、V=最小セル幅。
    文字幅表[I][回数-1]=V+左余白+右余白。
    V=0。
   文字幅表[I]の配列合計を最大列幅に配列追加。
  最大列幅=最大列幅の配列最大値。
  V=0。
  (線太さ/2)を切捨を列幅配列配列追加。
  (文字幅表の表列数)
   V=文字幅表の(回数-1)を表列取得配列最大値+太をVに直接足。
   Vを列幅配列配列追加。
  表サイズ設定する。

 ・サイズ
 ・表サイズ設定~W=列幅配列配列最大値+描補正位置。H=表下位置+太。サイズ[0][0]=0。サイズ[0][1]=0。サイズ[0][2]=W。サイズ[0][3]=表下位置。

#-----------------------------------------------------------------------
# 以下はテスト
#!「table_改.nako」を取り込む。
ファイル名=「{デスクトップ}Book1.csvもし、ファイル名の存在はいならば、データはファイル名を開く違えば、データ=「1,2,3
A,B,"C""D""E"
"いろはにほへと{~}ちりぬるを","わかよ,たれ","つねならむ"」

Tとはテーブル改。
これについて
  編集はオン。
  アイテムはデータ。

母艦について
 クリックした時は~
  Tのセル内容変更。
  Tを自動作成。
 閉じた時は~
  Tのアイテムをファイル名に保存。

Tを自動作成。
#-----------------------------------------------------------------------

 どうかな~?

 うまくいってると思うんだけど。

 とりあえず、ちょっとワタシが使う分には大丈夫そう

通りすがり通りすがり2017/10/31 21:04Unicode系の命令をまとめたnakoファイルを用意して、UTF8用のものを作ってみました。
変更箇所は結構少ないです。
(設定反映のために、一見、無駄に見える命令があるります。)

weyk.la.coocan.jp/files/tableU.zip

Unicode系の命令を調べている中で、表示サイズを調べる命令と、実際の表示する命令がいくつかあったので、うまく使えばGridのセルを表示するときに役立ちそうです(はみ出るときは「...」的なものを表示 とかもできるっぽい)

雪乃☆雫雪乃☆雫2017/11/02 00:43いつもながら、さすがですね~!(@_@)
シカシ、いきなり「CSVの記述に誤りがあります」とか言われてしまったのでした。しくしく。
文字列を""でくくったらダメっぽい・・??
これまで文字コードのコトなんて気にして生きてこなかったので、Unicodeのこと自体があまり分かっていなかったり;
もうちょっとよくお試ししてみますです☆

通りすがり通りすがり2017/11/03 18:35初期データ(UTF8の二次元配列のデータ)の生成だけうまくゆかないようなので、1項目づつUTF8に変換するようにしてみました。
ほんとは、CSV取得のUT8版かASCII版(SJISではだめ)があるとよいのですが

雪乃☆雫雪乃☆雫2017/11/06 15:30遅くなりましてスミマセン;
ありがとうございます、うまくいきました☆
本当は「UniUtil.nako」の中身をよく研究すると色々賢くなれそうな気がしているんですが、まだそこまで到達していません(^▽^;

トラックバック - http://nadesiko.g.hatena.ne.jp/snowdrops89/20171028

2017/10/25 (水)

table.nakoを改造してみるよ!

| 22:26 | table.nakoを改造してみるよ! - 雪乃☆雫のなでしこ日和 を含むブックマーク はてなブックマーク - table.nakoを改造してみるよ! - 雪乃☆雫のなでしこ日和 table.nakoを改造してみるよ! - 雪乃☆雫のなでしこ日和 のブックマークコメント

 文字サイズの変更が出来なかったことに比べれば、全然たいしたこと無いですけど、ぱっと見どうしても気になってならないのが、最終行の高さが他と合ってないことと、フォーカスの選択色が枠に少しかぶること。

 細かくてスミマセン;;;

 枠全体のサイズの計算が行引くための行枠高の計算と合ってないために、のしわ寄せが最終行に来ているっぽい。

 してさらにどーでもいいようなことですが、ワタシとしては枠の中にピタッとフォーカスが入って欲しいワケですよ。


 それから、アイテムに指定するデータの形式が、CSVと見せかけて(別に見せかけてはいない;)ちょっと特殊仕様(?)っぽいんだけど、出来ればエクセルで作ってCSV保存したものがふつーに表示出来るようにしたい。


 あと、テーブルの背景色や文字色などを設定すると、システムの塗り色文字色を書き換えてしまうんですよね。フツーのGUIは、んなことにはならないですよね。

 さらによろしくないことには、テーブルの背景色や文字色などを設定してあっても、自動作成する前にシステムの塗り色文字色を設定したら、それで描画が行われちゃう。

 たぶん、テーブルを作ったら、設定から自動作成まで一連のセットとして記述する前提の仕様なんだろうけど、ダブルクリックしたら編集用の窓を開いて、内容を書き換えることができるようにしようと思ったら、編集するたびに自動作成で描画し直すことになるんで、の時設定も全部し直さなきゃないことになっちゃう><

 でもこれは、カンタンに直せそう


 で・・・

■テーブル改 +イメージ
 ・列数{=2}
 ・行数{=1}

 ・太{=2}
 ・線色{=$CCCCCC}
 ・背景色{=$FFFFFF}
 ・選択色{=$EEEEEE}
 ・文字色{=$000000}
 ・文字サイズ{=12}
 ・フォント{=「MS ゴシック」}

 ・左余白{=3}
 ・右余白{=10}
 ・上余白{=3}
 ・下余白{=5}

 ・アイテム ←アイテム設定 →アイテム取得
 ・アイテム_
 ・アイテム取得~それ=アイテム_。
 ・アイテム設定(S)~
  Sの変数型確認。
  もしそれが「配列」でなければ、アイテム_=SをCSV取得。
  違えば、アイテム_=S。
  アイテム_=アイテム_表行列交換。
  列数=アイテム_要素数。
  アイテム_=アイテム_表行列交換。
  行数=アイテム_要素数。

 ・標準カラー設定({数値=0}Vに)~
  Vで条件分岐
   0ならば文字色黒色。背景色=白色線色=$CCCCCC。選択色=$EEEEEE。
   1ならば文字色=白色線色=$808080。背景色=黒色。選択色=$808080。

 ・作る~
  オブジェクト=VCL_CREATE(自身, 名前, VCL_GUI_IMAGE)。
  テーブルイメージバックアップ画面をイメージとして作成。
  テーブルイメージバックアップ画面→可視=オフ。
  テーブルイメーフォーカス用画面をイメージとして作成。
  テーブルイメーフォーカス用画面→可視=オフ。

 ・選択行
 ・選択列
 ・マウス移動した時は~/*マウス位置設定するためのダミー定義*/
 ・クリックした時は~
   フォーカス選択。
// ・ダブルクリックした時は~選択行&`,`&選択列と言う。

 ・セルX
 ・セルY
 ・セルW
 ・セルH
 ・フォーカス選択~
  左位置=``。右位置=``。上位置=``。下位置=``。
  高列=高配列&改行&H。幅列=列幅配列。
  
  オン
   I=回数-1。左位置=幅列[0]。幅列の0を配列削除。
   (幅列[0]>マウスX)ならば、右位置=幅列[0]。抜ける。
  選択列=I。
  オン
   I=回数-1。上位置=高列[0]。高列の0を配列削除。
   (高列[0]>マウスY)ならば、下位置=高列[0]。抜ける。
  選択行=I。
  自身を私にグループ参照コピー。
  セルX=左位置+描補正位置。セルY=上位置+描補正位置。セルW=右位置-左位置-線太さ。セルH=下位置-上位置-線太さ。
  テーブルイメージバックアップ画面を私の0,0へ画像コピー。
  テーブルイメーフォーカス用画面のセルX,セルY,セルW,セルHを私のセルX,セルYへ画像部分コピー。
  描画処理反映。

 ・高配列
 ・描補正位置
 ・アイテム段数配列
 ・自動作成~
  もし線太さ%2=0ならば、描補正位置=(太/2)を切捨。
  違えば、描補正位置=(太/2)を切捨+1。
  システム設定変更。文字幅設定する。
  アイテム配列座標付情報作成する。
  HI=(線太さ/2)を切捨。
  //外枠を描く
  自身の(線太さ/2)を切捨,(線太さ/2)を切捨からW+1-(線太さ/2)を切捨,表下位置+1+(線太さ/2)を切捨へ四角。
  高配列=(線太さ/2)を切捨。最大出現数とは整数=0。
  アイテムを反復
   //行を描く。
   V=アイテム段数配列[回数-1]。
   (V+1)、HI=HI+文字高。
   HI=HI+(上余白+下余白)。
   もし回数行数ならば自身太-1,HIからW-線太さ+1,HIへ。
   HIを高配列配列追加。
  //列を描く。
  列幅配列反復
    (回数>1)かつ(回数<列数+1)ならば自身対象,0から対象,表下位置へ。
  
  アイテム描画する。
  バックアップ画面作成する。
  システム設定戻す。

 ・S_塗色
 ・S_太
 ・S_文字色
 ・S_線色
 ・S_文字サイズ
 ・S_文字書体
 ・システム設定変更~
  S_塗色=システム:塗色。S_太=システム:太。S_線色=システム:線色。S_文字色=システム:文字色。S_文字サイズ=システム:文字サイズ。S_文字書体=システム:文字書体。
  システム:塗色=背景色。システム:太=太。システム:線色線色。システム:文字色文字色。システム:文字サイズ文字サイズ。システム:文字書体=フォント。
 ・システム設定戻す~
  システム:塗色=S_塗色。システム:太=S_太。システム:線色=S_線色。システム:文字色=S_文字色。システム:文字サイズ=S_文字サイズ。システム:文字書体=S_文字書体。

 ・アイテム描画~
  自身を私にグループ参照コピー。X1とは整数。Y1とは整数。
  テーブルイメーフォーカス用画面を貴方にグループ参照コピー。
  貴方→サイズ=私→サイズ。貴方→画面クリア(私→選択色)。
  アイテム配列座標付情報を反復
   X1=対象[1]。Y1=対象[2]
   自身のX1,Y1へ対象[0]を文字表示。
   貴方のX1,Y1へ対象[0]を貴方:文字表示。

 ・アイテム配列座標付情報
 ・アイテム配列座標付情報作成~
  HI=(線太さ/2)を切捨。I=0。アイテム配列座標付情報=``。
  アイテムを反復
   対象反復
    アイテム配列座標付情報[I][0]=対象
    アイテム配列座標付情報[I][1]=(列幅配列[回数-1]+左余白)
    アイテム配列座標付情報[I][2]=(HI+上余白)。
    Iに1を直接足す。
   V=アイテム段数配列[回数-1]。
   (V+1)、HI=HI+文字高。
   HI=HI+(上余白+下余白)。

 ・バックアップ画面作成~
  自身を私にグループ参照コピー。
  テーブルイメージバックアップ画面→サイズ=私→サイズ。
  自身をテーブルイメージバックアップ画面の0,0へ画像コピー。

 ・文字高
 ・表下位置 //表の下の位置
 ・文字情報設定~
  アイテム段数配列。
  アイテムを反復
   最大出現数=0。
   対象反復
    V=対象で「{CHR(10)}」の出現回数。
    (最大出現数<V)ならば、最大出現数=V。
   最大出現数をアイテム段数配列配列追加。
  
  実行数とは整数=0。
  アイテム段数配列反復
   実行数=実行数+(対象+1)
  
  文字高=`字`の文字高さ取得。
  表下位置=(実行数×文字高)+行数*(上余白+下余白)。

 ・最大列幅
 ・列幅配列
 ・文字幅設定~
  文字幅表=``。最大列幅=``。
  文字情報設定。
  アイテムを反復
   I=回数-1。V=0。
   対象反復
    対象を「{CHR(10)}」で区切って反復
     もし、V<(対象文字幅取得)ならば、V=対象文字幅取得。
    文字幅表[I][回数-1]=V+左余白+右余白。
    V=0。
   文字幅表[I]の配列合計を最大列幅に配列追加。
  最大列幅=最大列幅の配列最大値。
  V=0。
  (線太さ/2)を切捨を列幅配列配列追加。
  (文字幅表の表列数)
   V=文字幅表の(回数-1)を表列取得配列最大値+太をVに直接足。
   Vを列幅配列配列追加。
  表サイズ設定する。

 ・サイズ
 ・表サイズ設定~W=列幅配列配列最大値+描補正位置。H=表下位置+太。サイズ[0][0]=0。サイズ[0][1]=0。サイズ[0][2]=W。サイズ[0][3]=表下位置。

#-----------------------------------------------------------------------
# 以下はテスト
#!「table_改.nako」を取り込む。

データ=「1,2,3
A,B,"C""D""E"
"いろはにほへと{~}ちりぬるを","わかよ,たれ","つねならむ"」//をCSV取得
//データは「Book1.csv」を開く

Tとはテーブル改。
これについて
  選択色は$EEEEEE
  背景色は$EEFFFF
  線太さは5
  線色は$CCCCCC
  文字色は$000066
  フォントは「MS 明朝」
  文字サイズは18

  上余白は10。
  下余白は10。
  左余白は10。
  右余白は10。

  アイテムはデータ。

Tを自動作成。
#-----------------------------------------------------------------------

 エクセルで保存したCSV改行CR+LFではなくLFみたい。

 上下左右の余白(padding的な)を設定できるようにしてみた。


 さてさて、どうかな?

 見た目的にはうまくいってると思うんだけど・・・

 あと、やっぱり編集できるようにしたいね。

トラックバック - http://nadesiko.g.hatena.ne.jp/snowdrops89/20171025

2017/10/22 (日)

新機能のテーブルをお試ししてみる

| 19:36 | 新機能のテーブルをお試ししてみる - 雪乃☆雫のなでしこ日和 を含むブックマーク はてなブックマーク - 新機能のテーブルをお試ししてみる - 雪乃☆雫のなでしこ日和 新機能のテーブルをお試ししてみる - 雪乃☆雫のなでしこ日和 のブックマークコメント

 なでしこ1.57で、自由なレイアウトでグリッドを表現できる「table.nako」が新機能として追加されたんですが、どうするもんだかの説明はマニュアルにもサンプルにも追加されていないっぽいんですよね~(?)

 グループのことがあんまり分かっていないけど、ちょこっと眺めてみた感じ、どうやら、イメージ部品を使って、アイテムとして与えた配列を表にして表示するモノのようです。

 なんか、こんな感じ?

#-----------------------------------------------------------
!「table.nako」を取り込む。
データ=「1,2,3
A,B,C
い,ろ,は」

Tとはテーブル。
のアイテムはデータ。

Tを自動作成。
#-----------------------------------------------------------

 すごいのは、クリックすると、こにフォーカスが入る点ですね☆

 元のイメージのバックアップと、フォーカスが入った時のカラーと、二枚の裏画面を使って画像部分コピーするとゆう、わりとワタシがやりそうな原始的な方法で実現しているようです。


 背景色、選択色(フォーカスが入った時の色)、線色線太さ文字色文字サイズ、フォントは変更できるようです。

 グループってすごいな~。便利そうだな~とは思うものの、ひとつひらめかない

 眺めると、何となく分かるよーな気はするものの、自分で作れる気がしない~;;;


 ところで、どうも文字サイズの変更が、うまくいきません。

 アイテムを設定する前に文字サイズを設定しようとするとエラーになっちゃう。

 アイテムを設定した後だと・・・エラーは出ないけど反映されてない

 ちょっと標準の文字がでかすぎるからちっちゃくしたいと思っただけなのにぃ~。しくしくしくしく。

 うーむと思って眺めていると・・・159行目、文字情報設定で、なんで文字サイズを40に決め打ちしちゃってるんすか?? 反映されるわけなくないですか?? ここは「文字サイズ_」なのでは???

 しかし、それでもやっぱりうまくいきません。

 どうやら、文字サイズ設定時に文字幅設定しているんだけど、この時アイテムがだとダメっぽい。

 どっちみち、アイテム設定する時に、正規化アイテム表作成を行う中で文字幅設定をするんだからと、消してみる(無謀;)

 エラー出なくなりました☆

 が・・・アイテムを設定した後に文字サイズを設定したら反映されません。ついでに、フォントの設定もアイテムを設定した後だと、反映されません。

 文字情報設定は文字幅設定の中で、文字幅設定は正規化アイテム表作成の中で、正規化アイテム表作成はアイテム設定の中で行われているんだから当然でしたね(@_@;ヤヤコヤシイ...

 てゆうか、最終的には「自動作成」で引いて表にしてるんだから、全部ココでいいんじゃないの?(ヤケ;)

 とゆうわけで、自動作成の最初に正規化アイテム表作成するを突っ込んだところ、とりあえず、文字サイズの設定に関してはうまくいってるっぽい感じになりました。

 うーん、これはバグ・・・なのかなぁ。

 このやっつけな修正が妥当なのかどうかもよく分からんし・・・

 悩むわ~;;;


 でも、とりあえずは動いてる。

!「table.nako」を取り込む。
データ=「1,2,3
A,B,C
い,ろ,は」

Tとはテーブル。
これについて
  選択色は$999999
  背景色は$EEFFFF
  線太さは3
  線色は$CCCCCC
  文字色は$000066
  フォントは「MS 明朝」
  文字サイズは18

  アイテムはデータ。
Tを自動作成

 して、このテーブルの機能としては、表示するだけなのかな?

 編集するなどは、各自で別途プログラムするというコトかな??

 ダブルクリックした時、選択行,選択列を言うようになっているのが、こはかとなくお試し中感なんだけど、ここを書き換える???

トラックバック - http://nadesiko.g.hatena.ne.jp/snowdrops89/20171022

2017/09/25 (月)

丸いボタンを作りたい!

| 09:11 | 丸いボタンを作りたい! - 雪乃☆雫のなでしこ日和 を含むブックマーク はてなブックマーク - 丸いボタンを作りたい! - 雪乃☆雫のなでしこ日和 丸いボタンを作りたい! - 雪乃☆雫のなでしこ日和 のブックマークコメント

 だって、本来ボタンって、丸いモノでしょ。

 服のボタンなら、四角い方が珍しいくらい。

 ・・・それはともかく、画像ボタンとかはあるけど、ボタン自体は結局四角くなってしまうため、丸とか、あと楕や角丸の形で凹むボタンが欲しいなあと思って、かなり無理矢理系で作ってみたはいいけれど、使いどころが無いまま放置してあったのを、ちょこっと手直しして、なんとなくUPしてみる。(なでしこ1)

#-----------------------------------------------------------
# イメージボタン
#-----------------------------------------------------------
#  画像ボタンとかは、ボタン自体は四角になってしまうため、
# 丸や楕、角丸の形で凹むボタンとして作成したものです。
#  画像も使えますが、周囲にアンチエイリアスのかかってない
# 単純形状のものに限ります。(影が変になるんで)
#★便利機能としてイメージのサイズに合わせて、図形描画位置と、文字描画位置を取得する関数追加。
#-----------------------------------------------------------------------
●イメージボタン作成({数値=$FFFFFF}地色に{グループ=?}OBJから{数値=1}影幅,{数値=$000000}影色で)
  OBJの白色を$FFFFFEに画像色置換。 #白色は地色に置換されてしまうための措置;
  マスクをイメージとして作成。マスクの可視はオフ。マスクの画像はOBJ→名前。
  処理用をイメージとして作成。処理用の可視はオフ。処理用の画像はOBJ→名前。

 #マスク作成
  マスクの0,0を点取得。
  マスクをそれ画像マスク作成。

 #ボタン押下時の画像を作成
  #影の部分
  マスクを処理用の0,0へ画像コピー。
  処理用の黒色を影色に画像色置換。

  #ボタン画像を影幅分ずらした位置に合成
  マスクを画像ネガポジ。
  マスクをOBJの0,0へ画像ANDコピー。
  マスクを画像ネガポジ。
  マスクを処理用の影幅,影幅へ画像ANDコピー。
  OBJを処理用の影幅,影幅へ画像ORコピー。

 #ボタンの透明色を地色に変換
  マスクをOBJの0,0へ画像ORコピー。
  OBJの白色を地色に画像色置換。

 #ボタン押下時ようのイメージ作成
  ON用=「{OBJ→名前}ON」。
  「{ON用}をイメージとして作成。{ON用}の可視はオン。OBJを最前面。
{ON用}の位置はOBJ→位置。{ON用}の幅はOBJ→幅。{ON用}の高さはOBJ→高さ。

#処理用を元のボタンに合わせて切り抜く。
マスクを{ON用}の0,0へ画像ANDコピー。
処理用を{ON用}の0,0へ画像ORコピー。
{ON用}の白色を地色に画像色置換。

#ボタン押下のマウスイベント
OBJ→マウス押した時は~自身→可視はオフ。
OBJ→マウス離した時は~自身→可視はオン。」をナデシコする。

 #マスクと処理用は壊す。
  VCL_FREE(マスク)
  VCL_FREE(処理用)

●イメージボタン可視設定({グループ=?}OBJを|OBJのAに|Aで)
  ON用=「{OBJ→名前}ON」
  「もし、A=オンならば、OBJ→可視はオン。{ON用}→可視はオン違えば、OBJ→可視はオフ。{ON用}→可視はオフ。」をナデシコする。

●イメージボタン位置変更({グループ=?}OBJを|OBJのx,yに|x,yで)
  ON用=「{OBJ→名前}ON」
  「OBJ→位置は"{x},{y}"。{ON用}→位置は"{x},{y}"」をナデシコする。
#-----------------------------------------------------------------------
#-----------------------------------------------------------
x1とは整数。y1とは整数。x2とは整数。y2とは整数mxとは整数。myとは整数。
*イメージボタン描画位置取得({グループ=?}OBJの)
  x1=(線太さ/2)。y1=(線太さ/2)。x2=(OBJ→幅-線太さ/2)。y2=(OBJ→高さ-線太さ/2)。
  
*イメージボタンテキスト位置取得(Sで{グループ=?}OBJの)
  mx=(OBJ→幅/2)-(Sの文字幅取得/2)。my=(OBJ→高さ/2)-(Sの文字高さ取得/2)
#-----------------------------------------------------------

#以下はテスト

丸ボタンとはイメージ
これについて
  位置は"10,10"。幅は50。高さは50。可視はオン。
  緑色画面クリア。
  塗り色白色線色黒色線太さは2。
  丸ボタンイメージボタン描画位置取得。
  x1,y1からx2,y2へ。
  文字色赤色文字書体は「|20|太字」
  「OK」で丸ボタンイメージボタンテキスト位置取得。
  mx,myへ「OK」を文字描画。
  クリックした時は~
    自身の可視はオン。  #処理によっては必要。(ダイアログ表示秒待つ命令でウェイトがかかる時とか、処理が終わるまでボタンが押ささったままになっちゃうんで)
    10,10で丸ボタンイメージボタン位置変更。
    「OK!」と言う。

角丸ボタンとはイメージ
これについて
  位置は"100,15"。幅は90。高さは40。可視はオン。
  緑色画面クリア。
  塗り色ウィンドウ背景色線色黒色線太さは3。
  角丸ボタンイメージボタン描画位置取得。
  x1,y1からx2,y2へ20,30で角丸四角
  文字色黒色文字書体は「|12|」
  「ON/OFF」で角丸ボタンイメージボタンテキスト位置取得。
  mx,myへ「ON/OFF」を文字描画。
  クリックした時は~
    もし、丸ボタンの可視=オンならば
      オフで丸ボタンイメージボタン可視設定。
    違えば、
      丸ボタンオンイメージボタン可視設定。

楕ボタンとはイメージこれについて
  位置は"210,10"。幅は80。高さは50。可視はオン。
  白色画面クリア。
  塗り色は$FFAAAA。線色は$993333。線太さは2。
  楕ボタンイメージボタン描画位置取得。
  x1,y1からx2,y2へ
  文字色は$660000。文字書体は「|12|」
  「↓移動」で楕ボタンイメージボタンテキスト位置取得。
  mx,myへ「↓移動」を文字描画。
  クリックした時は~
    次位置=丸ボタンのY
    次位置=次位置+10
    10,次位置で丸ボタンイメージボタン位置変更。

母艦を$FFCCCCで画面クリア
$FFCCCCに丸ボタンからイメージボタン作成。
$FFCCCCに角丸ボタンからイメージボタン作成。
$FFCCCCに楕ボタンから2,$660000でイメージボタン作成

 ・・・どうかな~?

 元の画像から、無理矢理影付きの画像を自動生成してるんだよねぇ~w



 なでしこ3は、DOMスタイル設定ができるから、CSSを使ってもっとカンタンに作れそう

 っとゆうわけで、とりあえずこんな感じ。

http://www.geocities.jp/snowdrops890/wnako3_test/06_maru_button.html

(本当は、もうちょっと丁寧に、マウス乗った時は、ボーダーと影の色も一緒に薄めるようにしたほうがよさそう


 して、のコードは・・・

 こっコードはっ・・・・・・

<style type="text/css">
<!--
#btn {
    position:relative;                  /* 相対位置への配置(凹むボタンでtopの位置を変えるのに必要) */
    display:table-cell;                 /* コレを設定しないとwidthとheightの設定が効かない。 */
    cursor:pointer;                     /* カーソルを手の形に。 */

    width:50px;                         /* ボタンの幅。 */
    height:50px;                        /* ボタンの高さ。 */
    border-radius:30px;                 /* 角丸設定(ボタンサイズの半分よりもちょい大きめのほうが綺麗な丸になるっぽい) */
    background-color: #FFCCCC;          /* ボタンの色。 */
    border:1px solid #FF9999;           /* ボタン線色。 */
    box-shadow:1px 2px 0 #CC6666;       /* ボタンの影設定。 */

    color: #FFFFFF;                     /* 文字色。*/
    font-weight:bold;                   /* 文字太さ。*/
    font-size:24px;                     /* フォントサイズ。*/
    text-shadow:0 1px 1px rgba(0,0,0,.3);      /* 文字の影設定。*/
    text-align:center;                  /* 横方向文字揃え。 */
    vertical-align:middle;              /* 縦方向文字揃え。 */
    text-decoration:none;               /* 装飾無し(aタグには大抵下とかが付いてるので解除する) */
}
#btn:hover {                         /* マウス乗った時 */
    background-color: #FFDDDD;          /* ボタンの色を薄くする。 */
}
#btn:active {                        /* マウス押した時 */
    top: 2px;                           /* ボタン位置を下げる。 */
    box-shadow:none;                    /* 影を消す。 */
}
 -->
</style>

<!-- 丸いボタン -->
<a id="btn">OK</a>

 ・・・こんだけです。

 ええ、こんだけです。なでしこいりません。CSSだけで出来ましたw

 ってか、トランジョンとか、アニメーションとかあって、もっと凝ったことがCSSだけでもなんぼでもできるっぽいです。すごいな。

 でっでもっ、いちおうコレを全部DOMスタイル設定でやってみようと思ったんです。

 だけど、うまく出来ませんでした。しくしくしく。

 どうやら、:hover:activeは、設定できないっぽくて・・・(?)

 それに・・・はIDを振っているけど、たぶんボタンって複数あって、みんな同じよーなデザインに揃えるのがふつーだから、classでまとめて設定すると思うんだけど、コレもどうやらDOMスタイル設定ではできないっぽい・・・(?)

 ならば、DOM_HTML設定を使えば・・・とも思ったのですが、ココで浮上したのがまた、例の波カッコ閉じが使えない問題です(´д`; ←0.1.6で対応されました!

 前に、背景色設定をした時には、取りあえず閉じなくても通ったんだけど、最低でも:hover:activeとで項目が二つとゆうことになると、閉じないわけにはいないでしょ。

 それぞれにstyleタグを用意して別々にDOM_HTML設定する・・・などという方法も考えられましたが、あんまりにもやっつけ感が過ぎる上に、別に背に腹は替えられないって状況でもないんで、試してません;

 うまくなでしこで設定できるようなら、いつも使うような定型のボタンを、この見てるだけで具合わるくなるCSSをいちいちやらなくても、日本語だけで色とか文字とかサイズとかを設定して使える関数が作れるんじゃないかと思ったんだけどね。

トラックバック - http://nadesiko.g.hatena.ne.jp/snowdrops89/20170925

2017/08/19 (土)

バイオリズム

| 21:18 | バイオリズム - 雪乃☆雫のなでしこ日和 を含むブックマーク はてなブックマーク - バイオリズム - 雪乃☆雫のなでしこ日和 バイオリズム - 雪乃☆雫のなでしこ日和 のブックマークコメント

 突然何の脈絡も無く、バイオリズムを表示するプログラム。

 ムカシはだいぶ流行ったけど、最近はあんまりお見かけしませんね。

 やっぱり、カガク的コンキョに欠けるとゆうコトなんでしょうか。

 のわりには、血液型占いは廃れないよね~。

 A型が几帳面だなんて、絶っっ対にあり得ないと思うんだけど・・・(^▽^;

#バイオリズム(なでしこ1)

#-----宣言--------------------------------------------------
生年月日とは文字列。生年月日=「」。
当日とは整数。当日=今日の2文字右部分整数変換。
当月とは整数。当月=今日の6から2文字抜き出しを整数変換。
基準日とは整数。基準日=今日に「-0/0/{当日-1}」を日付加算。
誕生日とは文字列表示年とは整数表示月とは整数表示年月とは文字列。
閏年とは整数。
月末とは整数。
#-----------------------------------------------------------
母艦について
  クライアント幅は640。クライアント高さは480。

文字色黒色。30,20へ「生年月日(yyyy/mm/dd):」を文字描画。
生年月日エディタとはエディタこれについて
  位置は「175,15」。幅は80。テキストは生年月日。
部品間隔は0。
前月ボタンとはボタンこれについて
  位置は「280,15」。幅は50。高さは20。
  クリックした時は~
    基準日=基準日に「-0/1/0」を日付加算。
    バイオリズム表示今月ボタンとはボタンこれについて
  位置は前月ボタンの右側。幅は50。高さは20。
  クリックした時は~
    基準日=今日に「-0/0/{当日-1}」を日付加算。
    バイオリズム表示。
翌月ボタンとはボタンこれについて
  位置は今月ボタンの右側。幅は50。高さは20。
  クリックした時は~
    基準日=基準日に「+0/1/0」を日付加算。
    バイオリズム表示文字色青色。480,20へ「■身体」を文字描画文字色赤色。530,20へ「■感情」を文字描画文字色緑色。580,20へ「■知性」を文字描画。
#-----------------------------------------------------------
枠描画。
もし、生年月日がならば、「生年月日を入力して下さい」と言う違えば、バイオリズム表示。
#-----------------------------------------------------------

*枠描画
 線スタイルは実塗りスタイルはべた。線色白色塗り色白色文字色黒色。
 0,40から640,480へ四角。
 11
  もし、((回数-1)=0)ならば、3,40へ「高{~}調{~}期」を文字描画。
  もし、((回数-1)=9)ならば、3,((回数-1)*40+40)へ「低{~}調{~}期」を文字描画。
  もし、((回数-1)=5)ならば、
    3,((回数-1)*40+20)へ「要{~}{~}意」を文字描画。
    線スタイルは透明。塗りスタイルはべた。塗り色黄色。
    20,((回数-1)*40+20)から620,((回数-1)*40+60)へ四角。
  線色黒色塗りスタイルは透明。
  もし、((回数-1)=0)または((回数-1)=5)または((回数-1)=10)ならば、
    線太さは2。線スタイルは実。
  違えば、
    線太さは1。線スタイルは点。
  20,((回数-1)*40+40)から620,((回数-1)*40+40)へ。

 31
  もし、((回数-1)=0)または((回数-1)=30)ならば、
    線太さは2。線スタイルは実。
  違えば、
    線太さは1。線スタイルは点。
  ((回数-1)*20+20),40から((回数-1)*20+20),440へ。

 (月末)
  ((回数-1)*20+15),450へ回数文字描画。
#-----------------------------------------------------------

*バイオリズム表示
  生年月日は生年月日エディタのテキスト。
  誕生日=「{生年月日の4文字左部分}年{生年月日の6から2文字抜き出し}月{生年月日の2文字右部分}日」
  表示年=基準日の4文字左部分整数変換。
  表示月=基準日の6から2文字抜き出しを整数変換。
  表示年月=「{表示年}年{表示月}月」

  もし表示年%4=0でなければ、閏年=いいえ。
  違えばもし表示年%100=0でなければ、閏年=はい。
  違えばもし表示年%400=0でなければ、閏年=いいえ。
  違えば、閏年=はい。
  もし、(表示月=02)または(表示月=04)または(表示月=06)または(表示月=09)または(表示月=11)でなければ、月末=31。
  違えばもし表示月=02ならば、
    もし、閏年=はいならば、月末=29。
    違えば、月末=28。
  違えば、月末=30。

  母艦のタイトルは「{誕生日} 生まれの方の {表示年月} のバイオリズム」
  枠描画。バイオリズム描画。

*バイオリズム描画
 線太さは3。線スタイルは実塗りスタイルはベタ。
 31
  日付=基準日に「+0/0/{回数-1}」を日付加算。
  結果=生年月日と日付でバイオリズム計算。
  身体2=(結果¥0)*2。
  感情2=(結果¥1)*2。
  知性2=(結果¥2)*2。
  もし回数>1ならば、
    線色青色。(20*(回数-1)),(-身体1+240)から(20*回数),(-身体2+240)へ
    線色赤色。(20*(回数-1)),(-感情1+240)から(20*回数),(-感情2+240)へ
    線色緑色。(20*(回数-1)),(-知性1+240)から(20*回数),(-知性2+240)へ
  もし、(表示年=今年)かつ(表示月=今月)かつ(回数=当日)ならば、
    線色青色塗り色青色。(20*回数-5),(-身体2+240-5)から(20*回数+5),(-身体2+240+5)へ
    線色赤色塗り色赤色。(20*回数-5),(-感情2+240-5)から(20*回数+5),(-感情2+240+5)へ
    線色緑色塗り色緑色。(20*回数-5),(-知性2+240-5)から(20*回数+5),(-知性2+240+5)へ
  身体1=身体2。
  感情1=感情2。
  知性1=知性2。
#-----------------------------------------------------------
#外枠の表示
 線色黒色塗りスタイルは透明。
 18,38から622,442へ四角。
#-----------------------------------------------------------
*バイオリズム計算(誕生日と基準日で)
  日数=誕生日と基準日の日数差。
  結果¥0=SIN(日数/23*PI*2)*100を整数変換。
  結果¥1=SIN(日数/28*PI*2)*100を整数変換。
  結果¥2=SIN(日数/33*PI*2)*100を整数変換。
  結果で戻る。
#-----------------------------------------------------------

 生年月日を入力して「今月」のボタンを押せば表示されます。

 宣言のところで、生年月日に自分のを入れとけば、それが自動的に表示されます。

 高調期や低調期は、それほど気にする必要は無く、0と交わる辺りが注意日で色々と不安定になるので気をつけなければならないそうです。


 こんなヤツを、なでしこ3で、ウェブ上に設置できたら面白そうだなぁ~と思って、なでしこ1で試しに作ってみたんだけど・・・

 まあ、バイオリズム自体は、サインカーブを描くだけなんで、サインもコサインも何も覚えてないけど、プログラム的にはそう難しいことはないんですが、なでしこ3では使えない命令があったり、色々ナゾ現象はあるし、密かに違っているところも多くて、なんだか次から次へとエラーが出る~(*_*;

 たとえば、文字列中の{}の中の変数は、1同様展開されるんだけど、の中で{回数-1}みたいに計算するコトは出来ないみたいなんだよね。不便っす;;;

 でも、それ以前にずっと引っかかっていたのは、<button>タグのonclickに、なでしこの関数を設定したりは出来ないのかしらん・・・とゆうことでした。

 カナリ色々試したんだけど、のところムリっぽい気が~・・・・・・(?)

 ↑バージョン0.1.5でできるようになりました!!!


◆覚え書き◆

※バイオリズムの計算式
日数差=誕生日-基準日。
身体のリズム=23。
感情のリズム=28。
知性のリズム=33。
SIN日数差/リズム*PI*2)

※閏年の計算方法
1、4で割り切れる。
2、ただし、100で割り切れる場合は閏年でない。
3、ただし、400で割り切れる場合は閏年である
トラックバック - http://nadesiko.g.hatena.ne.jp/snowdrops89/20170819