web-dev-qa-db-ja.com

モバイルブラウザとデスクトップブラウザでうまく機能するフロアプランを作成するにはどうすればよいですか？

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

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

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

SVG操作に最も関連するコードは Map.js なので、そこから始めたいと思うかもしれません。マップSVGの1つは mv.svg に保存されます。

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

アーキテクチャノート

  • 壁と部屋の名前はSVGファイルに保存されます。
    • autoCADDWGをインポートできるAdobeIllustratorで生成されます
    • 座席座標のJavaScript配列を含むように手動で編集されたSVG
  • ページの読み込み時に、サーバー側のテンプレートがSVGをHTMLソースに挿入します
    • それ以外の場合、SVGが<object>または<image>タグまたはCSSbackground-imageを使用してロードされると、JavaScriptを介してSVGDOMにアクセスできなくなります。
  • 動的データ（会議、座席）はMongoデータベースから取得され、JSON REST API
  • クライアント側のJavaScriptMVCアプリケーションは、バックボーンを使用して動的データを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（および_idですが、Mongoに自動生成させます）です。

構成

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

スクリーンショット

screenshot

31
Ben Hutchison

フロアプランマップのフォールバックのようなものが必要な場合は、iiCreator（ http：// wwwなど）を使用して、エクスポートした画像の座席と部屋を描画してみてください。 .iicreator.com ）は、フロアプランの画像をインポートでき、ツールを使用して座席と部屋を簡単に作成できます。 Aldavivaのフロアプランシステムほどフル機能ではないかもしれませんが、短期的には目的を果たします。

1
Mandi