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で進化させているので、この記事の内容は古くなっています！

にほんブログ村

にほんブログ村

　2019-03-30

カード織りのアプリについて思いをはせた結果、Excelマクロでの限界を感じ、「うーん、html5+SVG+jQueryだったらどうにかなるかな」と、html5もSVGもやったことがないのに、ちょっと着手してみました。
いきなりカード織りアプリはハードルが高いので、ふつうの織物組織図です。

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

今のところ40×40の組織図用のマス目が出ているだけです。マス目上でクリックすると黒く塗りつぶされ、ダブルクリックすると白くなります。
自動で組織図を描いてくれたりはしませんが、Atelier kisaragiさんが、ドット絵アプリを組織図を描くのに便利とおっしゃっていたので、自力で埋めるマスでも、使う人いるかしらー？と思って一応公開してみます。
A4で印刷するとちょうどいいサイズにしている…つもりです。

ただ、Google Chrome 73.0.3683.86では動きましたが、IE11では動きませんでした。ほかは確認していません。

さて、これはこの先どっち方向に進化していくでしょうね…。とりあえず、綜絖通し図とタイアップと踏み方図を書いてボタンを押したら組織図は自動で描いてくれるようにしたいんですけどね…。

---

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

にほんブログ村

にほんブログ村