Wicket の Autocomplete といえば、jQuery UI を利用したものが慣れ親しんでものであった。 最近よく使われる Bootstrap デザインを適用しても使えないわけではない、 ＣＳＳスタイルシートを合わせて書いていけば良いのだが、 Bootstrap と jQuery UI を併…

メモ、 以下からダウンロード https://github.com/uxsolutions/bootstrap-datepickerHTML head 読込み指定 曜日を日本語表示の為には、配布されてる中の bootstrap-datepicker.ja.min.js を使う。 <link href="dist/css/bootstrap-datepicker.css" rel="stylesheet" /> <script src="dist/js/bootstrap-datepicker.js"></script> </link>

以前、 oboe2uran.hatenablog.comを書きましたが、 この時、選択配下のノードツリーを配列JSONで取得する処理 on メソッドで、select_node.jstree でイベントと結合して $('#tree').jstree({ 'core':{ data':{ "url":"./tree.json", "dataType":"json" }, })…

Chart.js https://www.chartjs.org/ Ｘ軸＝時刻 の線グラフを描画するためのJSONデータ作成する Java クラスを作成して、AJAX通信によるJSONデータ → Chart.js グラフ描画をデザインを除いた 可変の JSONデータ生成だけでも汎用的にならないかと考えました。…

Java と JavaScript 間の AES暗合 - Oboe吹きプログラマの黙示録 に書いたように、PBKDF2WithHmacSHA1 で実行する AES暗合も一計ですが、 単純に、SHA-256 ハッシュ＆初期ベクトルを単純にハッシュ値から持ってくる方法も、 CryptoJS で書こうと思えば書けま…

Java と JavaScript 言語間の暗合文や鍵の渡し方はいろんな方法あるので ここでは書きません。 相互での暗合復号の実際の実行を書いてます。 CBCモードで、PBKDF2WithHmacSHA1 です。 Java側JavaScript は、crypto-js を使います。 https://code.google.com/…

OpenSSL で作成した RSA 暗合鍵、どのＪＳコードが良いのか探した。 JSEncrypt というのが一番使い易い。 電子署名で、SHA256 にするので、CryptoJS から、 sha256.js だけ使う。 <script src="jsencrypt.min.js" type="text/javascript"></script> <script src="sha256.js" type="text/javascript"></script> 公開鍵で暗合化 var crypt = new JSEncrypt(); // 公開鍵 publickey は、Ba…

Cropper JS使用の画像 crop で、常に固定サイズ ＝常に一定の width と height で切り取りするようにする。切り取り BOX をリサイズ不可にするのは、 https://github.com/fengyuanchen/cropperjs#options にあるとおり、cropBoxResizable オプションを false…

Webページ上で画像切取り crop を行う時のプレビューhttps://github.com/fengyuanchen/cropperjs を元に jQuery 用の Cropper https://github.com/fengyuanchen/jquery-cropper これを使用した時の プレビューについて、 crop 実行のオプションで任意の場所…

Bootstrap モーダルをドラッグ移動可能にするには、やはり、jQuery UI を使うのが簡単 <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> id=getCroppedCanvasModal が、BootStrap のモーダルエリアなら、、 $("#getCroppedCanvasModal").draggable({ cursor: "move" }); 昨日、悩んだのは、jQuery UI を使わ…

画像のｃｒｏｐ（切取）を、GitHub - fengyuanchen/jquery-cropper: A jQuery plugin wrapper for Cropper.js. を使って必要最低限の機能を試してみる。 ＨＴＭＬページは以下のような画面レイアウト BootStrap を使う。アイコンには fontawesome を使う。 H…

あまり画像処理のことは詳しくない。押し迫って着手することも少なかったせいか、 疎い方だ。 いいかげん気になってたので、少し触っていこうか。。。 github.com昔、Windows PC に、GIMP を入れて使ったりしてたことあったけど、 https://github.com/oliver…

jsTree でノードを折りたたみをした時に 折りたたんだ中に選択していたノードが存在したかチェックして処理したい場合がある。”折りたたみ”のイベントを探して処理を書く。 →ここで、探す。。 https://www.jstree.com/api/#/?q=.jstree%20Event&f=after_clos…

jsTree の contextmenu プラグイン と dnd （ドラッグ＆ドロップ）プラグインの処理で イベントによる処理を書く場合、基本的には各イベント名で、 on の bind関数を書けばよいのだが、、 .on( Eventname , function(ev, data){ } https://www.jstree.com/ap…

jsTree search プラグインで検索した結果、Ｈｉｔしたノードの階層の下も 表示させるには、 以下の属性、default : false を true にする。https://www.jstree.com/api/#/?f=$.jstree.defaults.search.show_only_matches_children$.jstree.defaults.search.s…

html2canvas＋jsPDF で表示したHTML ページの中の任意の領域をＰＤＦに作成する方法は、 以下のようにするが、 （入りきらない場合の対策をしていない） $('#outpdf').click(function(){ html2canvas(document.querySelector("#content")).then(function(can…

jsTreeでノード選択時の処理、 jQuuery on メソッドで、select_node.jstree でイベントと結合 $('#tree').jstree({ 'plugins': [ 'contextmenu','dnd' ], 'core':{ data':{ "url":"./tree.json", "dataType":"json" }, 'check_callback' : true, } }).on('se…

編集可能 jsTree の編集結果を Pyhon で、JSON 保存 - Oboe吹きプログラマの黙示録 の続き、アイコン無し、フォルダ等の区別がない、自由にツリーを組み立てるようにする jsTree 編集可能 jsTree の編集結果を Pyhon で、JSON 保存 - Oboe吹きプログラマの黙…

「jsTree 描画→Treeの編集操作→ 編集結果を次回表示の為に保存」 （ここでいうTreeの編集操作は、ツリーアイテムを移動したり新規作成・削除・名称変更をツリー図上で実行することです） 通常は、ブラウザで表示した jsTree → JavaScript で JSON 変換、→ サ…

jsTree の AJAX による URL指定の描画は、わざわざ Webサイトを立てないと 確認できません。 ↑のGIF画像になってしまいます。 サーバを立てなくても描画させるのに、 Python の eel パッケージを使って、手元のWindows PC上で、HTML と JS ＋ Pythonスクリプ…

昔、Wicket の ModalWindow の caption を非表示にする css を書いたり、 Wicketモーダルウィンドウの外観を変更する - Oboe吹きプログラマの黙示録 CSS の記述で、画面いっぱいの ModalWindow 表示を書いたことがありました。 Wicket ModalWindow full scre…

Datepicker は jQuery ui 以外にも沢山あるのでまだ、jQuery ui を使うなんてという批判はさておき、 使い慣れてもいるので。。。 年月セレクタをプルダウンにした時、、 jquery-ui-1.12.1.min.js と、 <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/i18n/jquery.ui.datepicker-ja.min.js"></script> で、以下のようにdatepicker を設定して表示した時、…

昨日の投稿、WicketのPagingNavigatorで、先頭(first)と末尾(last)を表示させない方法 - Oboe吹きプログラマの黙示録 に続いて、Wicket で、Bootstrap用の PagingNavigator を作りました。 ↓ 以下のような描画になります。（色は別にＣＳＳで指定） まず、Bo…

先日、html2canvas を使って表示ＨＴＭＬを画像変換してダウンロード - Oboe吹きプログラマの黙示録 を書いて、ＩＥ１１では不可能と書きましたが、方法があったのです。 html2canvas を実行した時に、Promise が認識できなくてダメだったのですが、 Polyfil…

jsTree jsTree で作成したツリー図をＰＤＦで出力するのは、jsTreeがHTML表示としたものを 画像データにして、ＰＤＦ作成のツールで出力ということをしなければなりません。 ＰＤＦ作成でテンプレートによる作成というのは無理があります。＝できない。【大…

html2canvas - Screenshots with JavaScript を使います。 ＨＴＭＬが以下の様に、画像抽出されるエリアと抽出実行制御するボタンがあります。 <div id="tree">この中が画像として抽出される</div> <div> <ul> <li><button id="preview" type="button">prev Image</button></li> <li><button id="outImage" type="button">Download</button> <a id="download" href="#"></a> </li> </ul>…</div>

表示中HTMLのスクリーンショットを canvas tag にイメージ貼り付けしようと html2canvas を使おうと思い、、 html2canvas - Screenshots with JavaScript 最新バージョンで試すと、 html2canvas: onrendered option is deprecated, html2canvas returns a Pr…

JavaScriptコードの中で日付データのJSONとDateオブジェクトの変換をどうしようと悩んでたら、 なるほどと思う記事を見つけた。 【JavaScript】JSON.stringify/parse をカスタマイズしてDate型とかを使えるようにする - 藤 遥のブログ ありがたく書いて頂い…

https://www.jstree.com/api/#/?f=$.jstree.defaults.types types プラグインの li_attr と a_attr は、ＨＴＭＬの li タグと a タグに追加する属性ということぐらいしか 書いてなくて、、どう書けば良いか？書いたらどうなるか？がどうも見えてこない。 結…

https://www.jstree.com/api/#/?f=$.jstree.defaults.typesこれを使えば、コンテキスメニューにおける _disabled の判定も、 以前書いた jsTree のコンテキストメニューをカスタマイズ - Oboe吹きプログラマの黙示録 も、get_node した icon を問い合わせる…