mikeo_410

はじめに

 音のスペクトル表示

 音の周波数

 Silverlight 4 では、マイクロホンが使えるので、マイク入力のサンプル・プログラムを書き直しました。
  Cと刻んである音叉(おそらく、523.25Hz)を打撃したところです。

  左図をクリックすると別窓が開きます。
  Silverlightのページが開いたら、「START」ボタンで表示を開始します。ボタンの表示が「STOP」に変ります。「STOP」を押すと止まります。
  最初に「START」ボタンを押したときには、マイク接続の使用の「許可」を求めるダイアログがでます。

  1. 入力に関しては素直にPCMデータが取得できました。
  2. 表示は、旧サンプル同様、RAW PNGへ変換を行っています。
  3. ファイルへの保存は、SaveFileDialogでできました。

  旧サンプルについて：

  旧サンプルはAction Script のMIC クラス と ファイル保存機能を利用したものでした。
  以下のようなものでした。

  1. マイク入力は、サーバーに転送する以外には取り出せない。サーバーの通信をまねて、データを取得する必要がある。
  2. PCMデータは取得できない。圧縮したもののみが取り出せる。NellyMoser のデコードをすることになった。PCMにして、(「音の周波数測定」)のプログラムを使った。
  3. 音声の圧縮はもともも時間軸から周波数軸へ変換結果なので、デコードしなくても周波数分布がわかる。このことを「音について」「DCT結果の見方」に書きました。
  4. ビットマップも圧縮したものしか表示できない。Raw PNGを受け付けたのでビットマップの代わりに使った。

  WPFのWebBrowserコントロールを使って、HTMLマークアップ用のWYZIWYGなエディタを作りました。

ダウンロード
  1. FckEditorと同様、ブラウザのコンポーネントを利用するもので、操作性の点で似ています。
  2. このプログラムはスタンドアロン(EXE)で、ネットワーク・アプリケーションではありません。
  3. このプログラムは、データベースに格納したコンテンツの管理を目的にしたもので、階層的な目次が使えます。
  4. このプログラムは、すべてC#で書きました。エディタ部分はコントロールとして分離しました。
  5. データベースの操作をする部分とも独立しており、データベースやテーブルのフィールドにも非依存で、カスタマイズできます。この部分のソースコードを付けました。

  以下の機能を追加しました。

  1. CSSにフォーマットを登録して、テーブル挿入時に選択可能に
  2. Visual Studio から、ソースコードを専用枠を作って直接貼り付ける
  3. XAMLをスクリプトとして埋め込む
  4. Silverlightオブジェクトの挿入
  5. IFRAMEの挿入


WpfFontViewer フォントビューア

ダウンロード：WpfFontViewer

  フォントはパソコンやプリンタの付き物で、文書の作成側では制御できないものでしたが、フォントを埋め込んでも軽々と動作する時代になりました。
  こうなると、フォントも文書を作る側の守備範囲のようです。

  フォントファミリを選択するか、ttf、ttc、odttf ファイルを貼り付けてフォントファイルを開きます。
  フォントを選んでXPSファイルを作ることができ、フォントのサブセットを作ることが出来ます。

  特に数式で使われていた、フォントサイズを数倍も上回る大きな字形を、重ならないように表示することを工夫しました。


Silverlight の Unicode 一覧

  フォントファミリーやフォントファイルを明示しない場合、「Portable User Interface」フォントが使われると言うことですがどんなものでしょうか。

  左図をクリックするとSilverlightアプリケーションで作成したコード表が起動します。

  Silverlightの場合、「Portable User Interface」を使うか、組み込みフォントを使う方法がとれますが、ブラウザ側のフォントを明示的に使うことはできないように思います。

  U+1D400からの数学用英数字など、数式で必要な文字は含まれているようです。
  Glyphs を TextBlock に置き換えても、充分表示できそうです。


「ワード」で数式や図を書いてXPS形式で保存します。それをXAMLにしてVisual Studioで使おうと言うものです。

  1. XPS2XAML
  2. Silverlightアプリケーションの例(1)
  3. Silverlightアプリケーションの例(2)
  4. WPFアプリケーションの例
  5. XPS中のImageBrushとSilverlight
  6. XPSファイルでの座標
  7. GlyphsをTextBlockに置き換えることの問題点

 ダウンロード：Xps2Xaml

  文字列を縦方向に設定した場合の問題を改善して差し替えました。いずれ更新されると思います。（V1.0->V1.1)

  作ったサンプルは、左図をクリックすると実行できます。

  開発環境が Silverlight 3 になっているので、Linux はまだだと思っていたのですが、左図のように、Fedora、FireFox、Moonlight で動作します。



  ワードの出力もXMLになって、最終的な清書機械から、文書入力装置になるのだろうと思うのですが。
  XMLは手ごわいので、XPSを変換するプログラムを作って見ました。
  前回は、組み込みフォントを使う方法を試しましたが、今回は Glyphs を TextBlock に置き換えて見ました。
  これで、左図のようにVisual Studio や Blend でも開けます。

  使用目的に応じて、フォントやイメージの所在を変えられるようにしてからアップロードしようと思います。

  Silverlightの場合の標準のフォントは何かも調べる必要があることも気が付きました。

  XPS から XAML に変換したもののサンプルは、ここにあります。

  XAMLファイルは、テキストですし、ブラウザでも開けます。ダウンロードするなり、ブラウザで開くなりしてください。

  1. XPS2XAML
  2. XPS中のImageBrushとSilverlight

(これを試していて気が付いたのは、XMLファイルではUnicode全体が使われる可能性があるわけですが、テキストエディタはBMP以外の部分を表示できないのが現状だと言うことです。Visual Studioも表示できません。□で表示されます。出力ウインドウも□になります。デザイン表示や実行時には正しく表示されます。見つけた、唯一正しく表示するエディタは、BlendのXAMLの編集窓です。)




  ワードの数式をホームページに使えないかと言う試みです。
  左図は、XAMLファイルをリンクしてあります。ブラウザで開くなり、ダウンロードして見るなりしてください。
  この XAMLファイルは、ワードで文章を書き、XPSで保存して作成しました。XPS 中の XAML 記述から、フォントのパスだけを書き換えました。（Glyphs の FontUri）
  XAML はブラウザで直接開けますし、HTMLに埋め込むこともできます。

  「SilverlightとWPFでのXPSファイルの表示」で、プログラムとして表示可能なのは試してみました。これを元に、ワードの数式をマークアップ記述のままブラウザで開くことを考えてみました。

  XAMLを開く機能は1とつではなく、フォントの設定も差のあることに気が付きました。

  1. XAMLの種類
  2. Loose XAML でのイメージ、フォント
  3. HTMLでXAML数式をホストして見る
  4. XPS中のXAMLの文字コード
  5. BMP外のUnicode


  データベースの使い方のサンプルを作ろうと思って始めたことですが、図の描画でいくつかメモして置きます。

  1. マウスのボタンのイベントは、図形オブジェクトの上でのみ発生する。
    図形オブジェクトの上かどうかは、Fill や Background にブラシが設定されているかどうかで判断されているようだ。
    PolygonにFillを指定しない、Canvas に Background を指定しない、状態だと線上のみでイベント処理が呼び出される。
    透明ブラシ、白ブラシでも指定があれば、面も図形オブジェクトらしい。
  2. ScaleTransform での拡大はビットマップとして拡大される。
    Canvas に設定した ScaleTransform に倍率を設定すると線幅も拡大される。
  3. マウスホイールをズーム（拡大率の変更）に使うには工夫を要す。
    WPF では、ScrollViewer が縦スクロールに使っていて、MouseWheelイベントを指定しただけではこの動作が止められない。
    Silverlight では、ブラウザが縦スクロールに使っている。 ( Silverlight のサンプル2 のようにMouseWheelでズームすることはできる。)

  図をクリックすると Silverlight のサンプルが起動します。

  1. 図のズーム
  2. JPN.mdbの読み取り
  3. System.Data.Sqlite、Linq
  4. LINQ to SQL クラス
  5. LINQ to SQL クラスの自動生成
  6. SQLite の dbml
  7. SQLiteとDataGridのバインド


  (http://www.gadm.org/ から mdb 形式のデータ（海岸線、県境、市区町村境界）が入手可能なのに気が付いて始めました。このデータはの利用については、１）原著作者のクレジットを表示、２）非営利利用、３）の許諾条件の継承 の条件が付いています。私には「原著作者」が誰なのかわかりませんがライセンス条項へのリンクを乗せて置きます。 Creative Commons Attribution-Noncommercial-Share Alike 3.0 United States License.)

  SketchFlow を試そうとして、お菓子検索のサンプルを作って、Silverlight のバインディングの話になってしましました。
  今度は、文章の入れ方を考えようとして、フォントやリソースの話です。
  お菓子検索を差し替えてあります。左図をクリックするとSilverlightアプリケーション（SketchFlow）が起動します。ナビゲーションで、「XPSファイルの表示」をクリックしてください。
  以下は、ワードで文章を作って、XSPファイルを表示して見ました。WPFと同じ方法ではできないことや、フォントやイメージをどこに置けるかが検討したことです。

  1. 「Silverlightのマニフェスト・リソース」
  2. 「Silverlightのリソースの分類」
  3. 「Silverlightのフォントとイメージの検索」
  4. 「SilverlightとWPFでのXPSファイルの表示」


  前に挙げた、お菓子検索を Silverlight にしました。これで、画像をクリックすれば動くサンプルを見ていただけます。
  お菓子の虜 Web API の検索機能を使っています。

  SketchFlow を使って見ようと始めたのですが、その前にいくつか記録の必要なことがあります。

  Silverlight アプリケーションが、プログラム外のリソース（ファイルや通信）を使う方法について、「Silverlightの入出力」にまとめました。
  NuSoap を使ったサービス参照について「SilverlightとNuSoap」にまとめました。

  Web由来のデータをできるだけコードを書かずにバインドすることに付いて、調べたことをまとめました。

「WPFのバインディング」 「Silverlight のバインディング」 「ListBoxのバインディング」 「Silverlightのカラーとバインディング」

「XAMLの応用方法」 

  気が付いたことを挙げて置きます。

  1. SketchFlow も、普通の httpサーバーでホストできます。前に挙げた Silverlight のサンプル同様、Linux、Apachのレンタルサーバ上にあります。
  2. Silverlight のアプリケーションが複数のサーバーと通信することは可能です。意図的に Flash や Silverlight の接続を許可しているサーバーとだけ繋がるようにできているようです。
  3. WEB API を提供しているところをいくつか試しましたが、ほとんど許可されていません。繋がることの確認には、Digg API を使いました。
  4. ここで使った、お菓子の虜 Web API も許可されていません。おそらく禁止している意図はないのだと思います。Silverlightのために特別なことが必要だと気が付いていないだけだと思います。 
  5. そこで、このサーバーが代理でWeb APIをすることにしました。
  6. NuSoap で、サーバー側のサービスを書き、Silverlight 側では、サービス参照の追加をしました。
  7. SketchFlowのソリューションには、2つのプロジェクトがあり、1つはapp.xamlを、他方は画面1.xamlが含まれています。2つのDLLが作られることになります。
  8. サーバーと通信するのは、後者なのでサービス参照を後者に追加しました。実行しようとすると、ServiceReferences.ClientConfig が xap ファイルに含まれていないと言って実行できません。
  9. Visual Studio のソリューション・エクスプローラで、ServiceReferences.ClientConfig を、前者のプロジェクト内にコピーすると xapに入れることができることに気が付きました。
    ・圧縮ツールで再圧縮して xap にリネームすると言うのは上手くいきませんでした。
    ・２つの ServiceReferences.ClientConfig は同じ内容になるように維持しなければなりません。
  10. Blend3 でプロジェクトを開くと、ServiceReferences.ClientConfig が既にコピーされていると言ったような警告が表示されます。Blend3は、コピーが必要なことを知っているようです。
  11. ページごとにDLLになるなら、共通の処理はシルバーライト・クラスライブラリのDLLにまとめれば良いのかと考えています。
  12. お菓子のイメージ
    お菓子の虜 Web API は、イメージのURLを知らせてくれます。API ではなく、普通のブラウズとして、イメージをダウンロードします。この処理は、非同期に完了するので、完了したときに ListBox に追加するようにしました。同じ検索をしても表示順が変わります。
  13. このイメージがGIFでした。Silverlight は、GIFを表示しないもののようです。
    デコーダーがあるとのことなので探しましたが、大抵はSilverlightのライブラリではないとリンクできません。Image Tools だけはリンクができました。しかし、コアラで見つかる11件の内、3件の画像が出ません。違いはインターレースで、インターレースをサポートしないようです。

  今度は、１つのカラーを選択して、他の色を距離でソートして表示して見ました。
  図をクリックすると起動します。

  １．グリッドの背景色を交互に変えて見易くする。
  ２．メニューバーなどの背景にグラデーションを付けて立体感を出す。

  と、いった時の色の選択の目安を探しています。
  いずれの場合も、文字が読みにくくならないように色を選ぶことが必要です。

  上の段の、丸い色見本をクリックすると、その色を背景色にして、近い色から下に向かって並べて、下段に表示します。
  20個で折り返しています。

  中ほどに2行、色の情報を表示します。上の行は、背景になっている、上の段で選んだ色の情報です。
  下の行は、下段の色見本をクリックすると表示されます。
  表示しているのは、色名、L*a*b のカラーコード、[色相、半径]、RGBコードです。
  色名なり、RGBコードなりをコピーしてプログラミングに使います。(右ボタンメニューは、「Silverlight」と表示されますが、CTRL-X や CTRL+Insert でコピーできます。)

  [色相、半径]は、Lを無視して、a-b平面上の、点(a,b)の位置を書いています。a軸との角度(度)と半径で表しています。角度は、色の種類を、半径はその鮮明度を知る目安になると考えました。

  表示している色は、Colorsクラスにある、名前の付いたカラーです。
  色の間の距離を使って、組み合わせを行おうとするもので、できるだけ色見本で距離がわかるようにしたいのですが。
  詳細は、「名前の付いたカラー」を参照ください。

  Colorsクラスの全色の一覧は、ここにあります。



  文字の色と背景色、グラデーションで盛り上がりを作る、など2色の組合せがなかなか上手く作れません。左図のプログラムを作ってみました。図をクリックすると起動します。

  丸い色見本をクリックすると、色1、色2の選択されている方にセットされます。「表示」をクリックすると、色の組み合わせのサンプルを表示します。

  表示しているのは、Colorsクラスにある、名前の付いたカラーです。
  色の間の距離を使って、組み合わせを行おうとするもので、できるだけ色見本で距離がわかるようにしたいのですが。
  詳細は、「名前の付いたカラー」を参照ください。

  Colorsクラスの全色の一覧は、ここにあります。



  このサイトのオフライン編集ツールを、故あって、Windows Server 2008 上で動かしています。これには、一つ修正が必要でした。C#から旧来のDLLの関数を呼び出す DllImport が失敗する箇所がありました。おそらく、これは Vista でも同じなのだろうと思います。

  1. [DllImport("sqlite3.dll")]
  2. static extern string sqlite3_libversion();

  これは、戻りの型をIntPtrに変えて、Marshal.PtrToStringAnsi() で文字列にすれば、XPでも両立します。Vista を使ったことがないので知らずにいました。
  これをきっかけに、Vector にアップしていたプログラムを、Vista、Windows 7RCで動作確認しました。今後は x64 も普及するのだろうと、これも試してみました。
  C#は、CPU、OS非依存の中間コードなのでほとんど問題ありませんでした。FlvMP3Gain 以外の修正の必要なものは差し替えました。

  1. 前述の、文字列が返される関数のDllImportの修正
  2. x64 OS で動作しないものがある。プラットフォームを Any CPU から x86 にすると動作する。納得はいかないが。
  3. FlvMP3Gainについては、VolMaxを作ったので、使わなくなっていた。性格を明確にして作り直すことにした。 

  このサイトのCMSはPHPを使ったCupCakeでできています。管理者権限のない、（データベースもサービスされていない）レンタルサーバを利用するには、唯一の選択肢だと思います。

  理想は、単一の言語、単一のツールでホームページを作成、維持できることです。
  レンタルサーバには乗らなくても、そんな方法がないものかと思っていました。

  「マイクロソフトがオープンソースのCMS...」の見出しを見て、Oxiteを調べてみました。
  期待するSilverlightとの連携などはありませんが、これもCupCakeと同じMVCモデルのCMSであることを知りました。「LINQ to SQL」や「ASP.NET MVC Framework」を、もう少し調べて、「IISでCMS」以下に書いて置こうと思います。

  Expression Blend を使ってGUIや図を書く練習をしていたのですが、大半の図形は最終的にPathオブジェクトで表現されることを知りました。
  ツールを使って作った図形は、小さなパーツの集合になって、扱いずらいだろうと思っていたのですが、複雑な形状も1つのPathオブジェクトで表現されています。
  このPathオブジェクトの表現はどこかで見たことがあると思っていたのですが、文字列をインタプリットするL-systemの話に似ていることに気がつきました。
  一筆書きのような形状だけでなく、分岐のある形状も １つのPathオブジェクトに置き換えられます。
  これを Silverlight のプログラムにして見ました。上の図をクリックすると実行できます。
  プログラムについては、「「かたち」について」「L-system」に書きます。

 

  音程と拍数を指定して音楽を演奏する Silverlight アプリケーションのサンプルを作りました。

 「音の周波数測定（マイクから入力）」で、Silverlightアプリケーションへの音の取り込みに苦戦しましたが、音を作る方でもMP3のエンコードをすることになってしまいました。Silverlight3(ベータ)は、今のところクライアントでもSDKをインストールする必要があるようなので、Silverlight2に戻ったのですが、PCMを再生しない仕組みのようです。Silverlight2がWAVを再生しないのは、コンテナの問題なのだとの認識で、ASFにPCMを入れて作成したのですが失敗でした。ロスレスの圧縮も不可です。コンテナの問題ではなく、PCMやロスレスを通さないようにしているようです。MP3なら通るので、PCMで音を作ってから、MP3にエンコードして通すことにしました。
  このサンプルは、縦方向に音程を、横に時間(拍）を取っていて、16拍分の演奏をします。
  チェック箇所の音程に従って、単純にサインを計算して振幅データにしています。


 

  左の図をクリックすると、Silverlightのプログラムがポップアップ表示されます。スライダを動かして見てください。

   ウエブ・アプリケーションの作り方を調べていて、時計のデモビデオを見ました。
  それを元にしたサンプルです。
  一番驚いたのは、グラデーションの付いた同心円を重ねて少し角度をずらすだけで立体的に見えることでした。ほんの数十秒で立体が書けるのに驚きました。同じ角度のずれでも、上下を逆にすると凹凸まで変わって見えます。

  PCM入出力DLL(WaveIO2.DLL)、簡単チャート(ChartCtrl)
 

  SampleRecorder.exe や WaveIO2.dllを使ったアプリケーションで、録音の再開ができないとのご指摘を頂きました。
  SampleRecorder.exe の場合は、ヘッダのみのWAVファイルになってしまいます。
  WaveIO2.DLLを更新しました。

簡単なグラフ作成用.Netユーザーコントロール
http://www.vector.co.jp/soft/winnt/prog/se408537.html

Wave録音・再生.NETアセンブリ
http://www.vector.co.jp/soft/winnt/prog/se341363.html

 (ブラウザのウインドウサイズを変えて見てください)

  ウスホイールでのズーミング、パネルのドラッグを追加しました。

  動的にコントロールを配置する方法を試してみました。
  「コントロールの動的配置」

  さらに、均等に配置する方法を考えてみました。
  「コントロールの均等配置(フレーム周期の描画)」


  この例は、BorderとImageで作った2種類のマークをたくさん作って表示しています。
  最初は中央に集中しているマークが左図のようになります。

   均等と言ってもまだまだ工夫の余地があります。また、プログラミング的にも理解できていないところがあります。
いずれライブラリ化したいと思います。


Imageやコントロールには Effect プロパティがありました。
HLSL で効果が記述できると言うことなので試してみました。

「XAML、WPF、Silverlight」「BitmapEffect」のようにコントロールに適用するのは簡単ではないようです。
イメージ全体に同じ処理をするなら何とかなりそうです。

「XAML、WPF、Silverlight」「HLSLでEffect」を参照ください。




ボタンのサンプルを作ってみました。

「Tips」「XAML」に記述しました。

  Silverlightアプリケーションで、コントロールのスタイルやテンプレートを独立した別ファイルにして実行時に読み込むことができるようになりました。これで再利用が容易になるので少しは見栄えに気を使うことができます。
  どうやら、Blendと言うツールでデザインするもののようなので、このツールを使えば、ここでの工夫は徒労なのかもしれませんが。

  もう少し、工夫が必要ですが、そろそろXAMLベースでページを書けそうです。


ブラウザで手軽に開けるグラフィカルなページを作るには Silverlight を使うものと思っていたのですが

  1. 現状、Moonlightは、Silverlight２ 相当ではないらしい
    （マルチプラットフォーム化が十分でない）
  2. Silverlightでは、Viewport3Dなど使えない機能がある
    （多くのプラットフォームやブラウザをサポートする代償）

と言う事のようです。

そこで、いっそWindows、IEに限るとして、XAMLだけでページを作ってみました。

http://hp.vector.co.jp/authors/VA039696/xaml/mirror_sphere.xaml

Viewport3Dも有効ですし、開くときにインストール動作が起きることもありません。
わたしの使い方にはこれで良さそうです。
何かのプラグインによるのかもしれませんが FireFox でも開けます。

  ブラウザで簡単に実行できるようなサンプルを作るには、Silverlightが良いわけですがPixel単位の操作がないことがわかりました。
  これは、Pixel単位の操作がブラウザにとって一般的にサポートされてないためなのだと思います。
  ブラウザは、イメージファイルを表示する機能を標準的に持っています。
  そこで、Bitmapの代わりに、SilverlightがサポートするPNG形式のファイルのPixelを操作するようなプログラムを作ってみました。

  プログラムの目的は、RGBを255x255x255の立方体と考えて、各面に平行な面での切断面を見てみようと言うものです。
  R,G,B 3つのスライダーがあり、切断する位置を移動できます。

  内部的には、スライダの移動に応じて、PNG形式ファイル（メモリー・ストリーム）のPixelを操作しています。
  PNG形式には無圧縮形式があることを利用しています。

  「XAML,WPF,Silverlight」「Silverlight」を参照ください。


名前の付いているカラーの一覧。大きなウインドウで表示してください。（Windows、IE）



  XAMLの話題には３Dがあるのですが座標が理解できません。カメラの位置と向きが要点のようなので試してみました。

http://mikeo410.lv9.org/samples/wpfba_camera1/wpfba_camera1.xbap

「XAMLで３D」参照。

Visual Studio のエディタから色付きでテキストがワープロに貼り付けられることに気が付きました。
そこで、クリップボード上のテキストの色情報を使ってHTMLに変換するプログラムを作りました。

これで、見たままに貼り付けられます。
しかし、テキストエディタやR言語のコンソールからはできません。
これは、アプリケーション側がどんな形式でクリップボードに積むかに掛かっており、どうしようもなさそうです。
テキストなら、キーワードでカラーリングすることも必要なようです。
テキストエディタはマクロが使えないかと考えましたが、文字が拾えても、色などの属性は取得できないようです。

行番号を付けるとコピーで困るのではと思っていましたがこれも問題ないことを知りました。

今までは、HTMLを「ソース」に切り替えて貼り付けていました。
クリップボードに格納するときには、HTMLとして格納できることを知りました。こうすると、FCKeditorにそのまま貼れることがわかりました。
ただし、HTMLとしてクリップボードに積むと、テキストエディタに貼れなくなります。
クリップボードへは複数の形式で積めるのでまだ工夫の余地があります。

サーバーを使えれば、どこからでも編集できると考えて始めたわけですが、サーバーのダウンを機会にローカルで編集することにします。
そこで、下図のような編集ツールを作ってみました。FCK Editor をスタンドアロンで動かすものです。

サーバーを起動しないで、編集できます。
また、目次もマウスで移動できるようになりました。

SQLite3とMySQLの両方で、HTML（コンテンツ）を管理することにします。
 

 自身の問題解決や、 いろいろな疑問を考えるのにパソコンを利用する、と言う当然のことがなかなかできません。
試してみると、C#やR言語のすばらしさには驚くばかりです。パソコンの進歩があるのでしょうが、画像でもなんでも、オンメモリで高速に演算できます。
もっといろいろなことができそうです。

また、思いついたことや試したことをその場で簡単に記録できることも重要です。

mikeo_410@hotmail.com
千葉 県 不動産 市川市 新築 ランドセル 田園都市線　不動産 医療用かつら