14

オフィスの動的フロア プラン マップを作成して、占有状況を示し、会議などにリンクしたいと考えています。AutoCAD ファイルがいくつか手元にあり、ブラウザーでこれを作成する方法を研究しています。SVG は、ほとんどのモバイルおよびデスクトップ ブラウザをサポートする優れた候補のように思えますが (古いバージョンの IE は使用しないでください)、フロア プランの各オブジェクトにデータをバインドする方法があるかどうかは疑問です。D3.js や Raphaël などのライブラリを検索しましたが、必要なライブラリのようです。だから私の質問は：

  1. AutoCAD ファイルを SVG のようなものに変換する方法はありますか? SVG は図面上の座席と部屋を個別のオブジェクトとして表示しますか?
  2. どのライブラリ (D3 または Raphaël) が私のニーズに合っていますか? 占有率と会議データを送り出すことができる MySQL データベースがあります。
  3. 開発中の応急処置として、CAD ファイルを画像にエクスポートし、HTML イメージ マップのようなビンテージ ハックを使用して基本的なものを示すことは良い考えだと思いますか? これを行うことが、それらの古き良きブラウザーのフォールバックになるかどうかを考えています。
4

2 に答える 2

31

あなたが作成しているものに似たフロアプラン アプリケーションを作成しました。ソースコードを見て、独自のフォークを作成してください。うまくいけば、そこから何らかのインスピレーションを得ることができます。

SVG 操作に最も関連するコードはMap.jsであるため、そこから開始することをお勧めします。マップ SVG の 1 つがmv.svgに保存されます。

残念ながら、これが実行されているライブ インスタンスを示すことはできません。これは内部の HR サーバー上にあるためです。

アーキテクチャに関する注意事項

  • 壁と部屋の名前は SVG ファイルに保存されます。
    • AutoCAD DWG をインポートできる Adob​​e Illustrator で生成
    • 座席座標の JavaScript 配列を含むように手動で編集された SVG
  • ページの読み込み時に、サーバー側のテンプレートによって SVG が HTML ソースに挿入されます
    • そうしないと、<object>or<image>タグまたは CSSを使用して SVG がロードされた場合background-image、JavaScript を介して SVG DOM にアクセスできなくなります。
  • 動的データ (会議、座席) は Mongo データベースから取得され、JSON REST API を介して公開されます
  • クライアント側の JavaScript MVC アプリケーションは、Backbone を使用して動的データを SVG DOM に挿入し、イベント ハンドラーをアタッチします。
    • 個人のアバターをクリックすると、詳細な個人情報が表示されます
    • ユーザーが検索ボックスに入力すると、SVG のアバターに CSS クラスが適用されるため、検索に一致しないアバター画像は半透明になります。

データベース スキーマ

Mongo データベースにはpeopleコレクションがあり、それぞれに次の形式のドキュメントが含まれています。

{
    "_id" : ObjectId("5201db41f5f4be9ae57e37a9"),
    "fullname" : "Ben Hutchison",
    "desk" : 3,
    "office" : "mv",
    "email" : "ben",
    "title" : "Software Engineer, Graphic Designer",
    "tags" : [  "des",  "eng" ],
    "linkedInId" : 139463329,
    "mobilePhone" : "845-986-0123",
    "workPhone" : "408-550-2995"
}

唯一の必須フィールドはfullname(and_idですが、Mongo に自動生成させます)。

構成

config.json.example提供された をコピーconfig.jsonして新しいファイルに変更を加えることで、データベース接続と HTTP サーバーの設定を構成できます。

スクリーンショット

スクリーンショット

于 2013-09-11T08:25:21.350 に答える