2021-03-19

Web版の組織図・配色図プログラムがバージョンアップしました！
といっても、使う分には何も変わりません（何かできなくなったとかありましたらお知らせください）。

http://www.pixy.cx/~riko/ori/weave.html

Excel版じゃ無理だけど、Web版なら多言語対応できるなーと思い立って、日本語部分を別ファイルにしたんです。
…まあ、日本語の設定ファイルしか作っていないので、日本語にしか対応していませんが。
この先、次の日本語を全部○○語にしてくれる人が現れれば、○○語対応になります。

{
  "title": "織物組織図・配色図 Ver.2.1",
  "to_home": "がらくた織物工房へ戻る",
  "explain": {
    "open": "使い方を開く▼",
    "close": "使い方を閉じる▲",
    "content": {
      "init": {
        "term": "【初期化】",
        "desc": "踏み木の本数、綜絖の枚数、tie-upの位置、図の幅、図の高さを入力して「初期化」をクリックすると、マス目の描き直しを行います。"
      },
      "to_chart": {
        "term": "【綜絖の通し方・踏み方から組織図・配色図を書きたい場合】",
        "desc1": "「組織図・配色図へ」を選びます。",
        "desc2": "綜絖の通し方図、タイアップ、踏み木の踏み方図をクリックしてマスを黒くします。なお、もう一回クリックすると白くなります。",
        "desc3": "上下（踏み木を踏んだら綜絖が上がるか下がるか）を選択して「組織図」をクリックすると、組織図部分が描かれます。",
        "desc4": "配色図を使用する場合は「糸の色」で色を選択し、「経糸の色」行と「緯糸の色」列のマスをクリックして色を塗ったあと「配色図」をクリックします。"
      },
      "from_chart": {
        "term": "【組織図から綜絖の通し方・踏み方を書きたい場合】",
        "desc1": "「組織図から」を選びます。",
        "desc2": "組織図・タイアップをクリックしてマスを黒くします。なお、もう一回クリックすると白くなります。",
        "desc3": "上下（踏み木を踏んだら綜絖が上がるか下がるか）を選択して「通し方＆踏み方図」をクリックすると、綜絖の通し方と踏み方図部分が描かれます。"
      }
    }
  },
  "setting": {
    "treadle": "踏み木の本数：",
    "shaft": "綜絖の枚数：",
    "tie-up": {
      "name": "tie-upの位置：",
      "location": {
        "right-up": "右上",
        "right-down": "右下",
        "left-up": "左上",
        "left-down": "左下"
      }
    },
    "chart": {
      "width": "図の幅：",
      "height": "図の高さ："
    },
    "to_or_from": {
      "to": "組織図・配色図へ",
      "from": "組織図から"
    },
    "up_or_down": {
      "name": "上下：",
      "select": {
        "up": "↑",
        "down": "↓"
      }
    },
    "color": "糸の色：",
    "button": {
      "init": "初期化",
      "chart": {
        "drowdown": "組織図",
        "color": "配色図",
        "thread_and_treadle": "通し方図＆踏み方図"
      }
    }
  },
  "content": {
    "warp_color": "経糸の色",
    "weft_color": "緯糸の色"
  },
  "error": {
    "not_select": {
      "to": "「組織図・配色図へ」になっていません",
      "from": "「組織図から」になっていません"
    },
    "not_draw": {
      "thread": "綜絖の通し方図が黒く塗られていません",
      "treadle": "踏み方図が黒く塗られていません",
      "drawdown": "組織図が黒く塗られていません"
    },
    "not_enough": {
      "thread": "この組織図を実現するには綜絖が足りません",
      "tie-up": "この組織図を実現するにはタイアップが不適切です"
    },
    "not_support": "現在のところタイアップが書かれているものにしか対応していません"
  },
  "home": "がらくた織物工房"
}

英語ですら自分で考える予定がない…（苦笑）。だってすでに見出し語すら怪しいじゃないですか…英作文（というか当然外国語全部）苦手なんですよう…。
あ、一応「がらくた織物工房」だけは「Garakuta Weaving Studio」かなとか考えました（笑)。

---

何も変わりませんと書きましたが。そういえば、多言語化しやすいよう、「踏み木○本」「綜絖○枚」にしていたところを「踏み木の本数：」「 綜絖の枚数：」にしました。変えたのはその位かな…。
「経糸の色」「緯糸の色」に矢印を入れるのはV2.0から諦めました…。だって環境によって矢印が示す方向が違うんですもん…。

にほんブログ村

にほんブログ村

　2021-03-15

Web版織物組織図・配色図 Ver.2.0として、Web版にも組織図から変換する機能を追加して、Ver2.0ということにして公開しました。

http://www.pixy.cx/~riko/ori/weave.html

同じhtmlに「組織図・配色図へ」の機能と、「組織図から」の機能を合わせて載せてあります。(理由は後述）

まず使い方ですが。踏み木・綜絖・tie-upの位置・図の幅・図の高さを入れて「初期化」を押すのは今までと同じです。
そのあと、組織図から変換機能を使いたい場合は、「組織図から」を選びます。
すると、組織図のところとタイアップのところのマス目をクリックして色を塗ることができるので、塗ってください。

そして、踏むと上がるか下がるかを「上下」で選んで、「通し方＆踏み方図」ボタンをクリックすると、

このように、綜絖の通し方と踏み方図が描かれます！！

さて、ところで、なぜ「組織図・配色図へ」の機能と「組織図から」の機能を一枚にしたかというと…Excel版で書いた通り、組織図からの変換機能があって嬉しいのは、ろくろ式の完全意匠図から天秤式の踏み方を生成したりできることだと思うんです。
Excel版の場合はコピー＆ペーストができるので、シートが別でも問題ないですが、Web版でコピー＆ペーストは…、、、絶対無理とは言いませんがちょっと……。

で、考えました。例えば４枚４本のろくろ式から、４枚６本の天秤式に変換する場合。
最終的に４枚６本になることはわかっているので、最初からそれで初期化して、「組織図・配色図へ」にして、ろくろ式の綜絖通しとタイアップと踏み方図を書きます。


それで上下を「↓」にして「組織図」ボタンをクリックすると、ろくろ式の場合の組織図が描かれますね。


ここから天秤式の踏み方図を作りたいわけなので、「組織図から」にして、上下を「↑」にしておいて、タイアップを書き換えます。


それで「通し方図＆踏み方図」をクリックすると

通し方図が天秤式用のものになっています！

そんなわけで、「組織図・配色図へ」「組織図から」と「上下」の選択、「組織図」「通し方図＆踏み方図」ボタンを駆使すれば、けっこう色々な変換ができるのではないかと…思います。ちょっと慣れが必要かもしれませんが…。

おかしなところとか、こうなるともっと便利、とかありましたら、ご意見ください！

にほんブログ村

にほんブログ村

　2021-03-14

Excel版ができたので、Web版にも着手しています。
Web版は、、、Excel版と比べて、より面倒なところがありまして…。
というのもExcelと違って、マス目があるわけではないので、自分で書いてるんです。

例えば、踏み木４本、綜絖４枚、組織図の高さと幅が40だったら、
経糸の色用に40個、
綜絖の通し方図用に160個、
タイアップ用に16個、
組織図用に1600個、
踏み方図用に160個、
緯糸の色用に40個、四角を書いてます。
それで各図のうちの左上から数えて何番目が黒いか、とか調べたり、何番目を何色にする、とかやってるんです。

そんなわけで、Excelマクロよりもさらにちょっと頭が混乱したり…。
頭が疲れてくると、やめてほかのことやったり…。

でも一応、踏み木と綜絖が１対１の場合には対応できました。まだ公開していませんが…。

このように組織図とタイアップを書いて、

「通し方＆踏み方図」のボタンを押すと

このように。

あとは、タイアップが１対複数の場合に対応すれば…。

にほんブログ村

にほんブログ村

　2019-04-20

でーきーまーしーた！配色図機能が！！

http://www.pixy.cx/~riko/ori/weave.html

Excel版と同様配色図もつけたかったんですが、Excelではセルの罫線を上下左右で設定できるものが、SVGだとできないので難しいだろうな、ゴールデンウィークにでも考えるか、と思っていたのですが。
閃きました。できました。
「経糸の色」行と「緯糸の色」列に色を塗っておいて配色図ボタンをクリックすると、このように、どんな感じになるか雰囲気が出ます。


これでExcel版とほぼ同等機能のはずです。
ただ、SVGでしかもテキスト縦書きを使ったので、対応していないブラウザがあるかと思います。とりあえずChromeの最新版では使えています。

…いや「緯糸の色→」を書かなければ、テキスト縦書きはなくてもいけるんですけどね？ないと何を入れるマスかわからないかなあと…。

…ちなみに今、うちのiPhoneとiPadのSafariで見てみたら、「緯糸の色」という字は出ていましたが、矢印が横を向いていました。うーむ…。どうしようかなー。
あと糸の色欄が、テキストで入れるようになってました。これはhtml5の<input type="color">に、各OSとブラウザがどういう対応をしているか次第ですね。ものによってはカラーウィンドウが出ます。
テキストで入力する場合、色は「Red」などの色名でも行けます。色については
https://www.colordic.org/
この辺りを参考にするといいかと思います。

全ブラウザ対応は難しいというか環境もないのでちょっと無理ですが、不具合があったらお知らせください！

にほんブログ村

にほんブログ村

　2019-04-16

タイアップの位置には好みがありますよね。
というわけで、Web版でもタイアップの位置を選べるようにしました。

http://www.pixy.cx/~riko/ori/weave.html

なんとかなったー。（ちょっと大変だったんです…）

---

追記。同じURLで進化させているので、この記事の内容は古くなっています！

にほんブログ村

にほんブログ村

　2019-04-12

上下（踏み木を踏むと綜絖が上がるか下がるか）は、「組織図」ボタンを押す前に選べばいいんじゃない？？と思い当たったので、変更しました。しまった、天秤式とろくろ式、間違えちゃった、という場合でも初期化からやり直さずに済みます。

…実はこっそりV0.7として、使い方の説明文を追加していたので、今回は0.8になります。

http://www.pixy.cx/~riko/ori/weave.html

説明はブログの方を見てね！…という意図があったので、今まで別タブで開いていたのですが、説明文を同じページ内に書いたので、今回は別タブではありません。

---

追記。同じURLで進化させているので、この記事の内容は古くなっています！

にほんブログ村

にほんブログ村

　2019-04-10

空き羽対応をしました。
そして、こっそり不具合があったのでそれも直しました。

※　以下のURLをクリックすると新しいタブ（またはウィンドウ）が開きます。
http://www.pixy.cx/~riko/ori/weave.html

空き羽対応についてはExcel版より賢くできたと思うので、そのうちExcel版もWeb版に合わせて変更したいです。

1. 踏み木の本数、上下（踏み木を踏んだら綜絖が上がるか下がるか）、綜絖の枚数、図の幅、図の高さを入力して「初期化」をクリック。
   
2. 出来上がった図の綜絖の通し方図、タイアップ、踏み木の踏み方図をクリックして黒くします。なお、もう一回クリックすると白くなります。
   
3. 「組織図」をクリックすると、組織図部分が描かれます。なお、組織図をクリックしたあとで、初期化行のところの項目を変更した場合には（例えば上下欄を間違えていて直すとか）、もう一回初期化してください。
   

---

追記。同じURLで進化させているので、この記事の内容は古くなっています！

にほんブログ村

にほんブログ村

　2019-04-09

なんとすごいことにiPhoneでも使えたそうです！
が、ダブルクリックで白くするのができなかったと…。

あー、iPhoneだとダブルクリック（ダブルタップ？）は別のことに割り当てられているんですね…。

というわけで、白いところをクリックしたら黒く、黒いところをクリックしたら白くなるようにしました！

※　以下のURLをクリックすると新しいタブ（またはウィンドウ）が開きます。
http://www.pixy.cx/~riko/ori/weave.html

1. 踏み木の本数、上下（踏み木を踏んだら綜絖が上がるか下がるか）、綜絖の枚数、図の幅、図の高さを入力して「初期化」をクリック。
   
2. 出来上がった図の綜絖の通し方図、タイアップ、踏み木の踏み方図をクリックして黒くします。なお、もう一回クリックすると白くなります。
   
3. 「組織図」をクリックすると、組織図部分が描かれます。なお、組織図をクリックしたあとで、初期化行のところの項目を変更した場合には（例えば上下欄を間違えていて直すとか）、もう一回初期化してください。
   

実は空羽対応ももうちょっとだったので一緒にアップしようと思ったんですが…、最後にテストしていておかしいことに気が付きました！なので、クリック対応だけして取り急ぎアップします。
今晩はもう空羽対応は無理…。

---

追記。同じURLで進化させているので、この記事の内容は古くなっています！

にほんブログ村

にほんブログ村

　2019-04-08

組織図を自動で生成できるようになりました！
…しかし途中の空き羽対応まではできませんでした…。したがって、まだVersionは0.5で。

※　以下のURLをクリックすると新しいタブ（またはウィンドウ）が開きます。
http://www.pixy.cx/~riko/ori/weave.html

1. 踏み木の本数、上下（踏み木を踏んだら綜絖が上がるか下がるか）、綜絖の枚数、図の幅、図の高さを入力して「初期化」をクリック。
   
2. 出来上がった図の綜絖の通し方図、タイアップ、踏み木の踏み方図をクリックして黒くします。なお、一回クリックで黒くなり、ダブルクリックで白くなります。
   
3. 「組織図」をクリックすると、組織図部分が描かれます。なお、組織図をクリックしたあとで、初期化行のところの項目を変更した場合には（例えば上下欄を間違えていて直すとか）、もう一回初期化してください。
   

Google chromeではとりあえず動いています。ほかのブラウザでは確認していません。IEとかではダメそうな気がします。

Excel版よりいいのは、クリックだけでマスが黒くなることかな…。あと多分iOSでも使えるんじゃないかなということです。
Excel版より悪いのは、保存ができないことですね！あとちゃんと印刷するのが面倒かも？それから現状では配色図がないというのもマイナスポイントでしょう。

配色図…Ver.3.2.1での追加機能である「配色図で、経糸が連続で上に出るため浮き上がる場合・緯糸が連続で出るため浮き上がる場合に、その間の罫線を表示しないようにしました。」が難しいんですよ…！たんに色を出すだけならそんなに難しくないと思うんですが。

それよりまず組織図の空き羽対応をしたいと思います…。

---

追記。同じURLで進化させているので、この記事の内容は古くなっています！

にほんブログ村

にほんブログ村

　2019-04-04

興が乗っています！

組織図を自動で書く…方向に進むつもりでしたが、その過程であちこちを変数にしたので、先に踏み木の本数と、綜絖の枚数と、図の幅と高さを指定できるようになりました。指定した後「初期化」を押すと、指定したサイズのマス目ができます。

http://www.pixy.cx/~riko/ori/weave.html

あとは、マス目上でクリックすると黒く塗りつぶされ、ダブルクリックすると白くなるので、手動でせっせと塗ってください。

なお、幅が広くなった時、印刷すると１ページ目しか印刷しないっぽいです。(chromeで確認)
「印刷」の「詳細設定」で、一ページに入るように倍率を下げるか、またはA3などの大きな紙を指定してPDFを作成し、PDFを別のソフトでA4複数ページで印刷する、などをする必要があるようです。

---

追記。同じURLで進化させているので、この記事の内容は古くなっています！

にほんブログ村

にほんブログ村