AWS IoT TwinMakerとAmazon Managed Grafanaでフロアマップを作成してみた

はじめに

こんにちは！新卒1年目が展示会に使用するフロアマップを作成した内容を備忘録として残しておきたいと思います。この記事を通して、「こんな感じで取り組んだんだな〜」と温かい目で読んでいただけると嬉しいです☺️

今回は2Dのフロアマップを3Dに変換し、AWS IoT SiteWiseはデモのAWS IoT TwinMakerと同期してAmazon Managed Grafanaでフロアマップのオブジェクトの状態を表示する仕組みになります！

PDFファイルをSVGファイルに変換

まずはじめにフロアマップが書かれたPDFファイルがあり、後のTwinMakerにアップロードするため、SVGファイルに変換したいと思います。
今回はpdf2svgというツールを使いました。
使い方としては、対象のPDFファイルと出力先のSVGファイルを以下のように指定します。
※MacBookのターミナル

pdf2svg <input.pdf> <output.svg>

ダウンロードしてない方はこちらから↓
https://cityinthesky.co.uk/opensource/pdf2svg/

inkscape

inkscapeでは先ほどダウンロードしたsvgファイルを編集できます。
inkscapeは高機能なベクターグラフィックエディタで、ロゴデザイン、イラスト、図の作成など、幅広い用途で編集・作成ができます。

今回はこのような形でフロアマップのテキスト削除と背景を追加しました。

Blender

inkscapeで編集したsvgファイルをBlenderのファイル→インポート→Scalable Vector Graphics(.svg)でインポートしたいsvgファイルを選択します。
Blenderは3Dモデルの作成、アニメーション、動画編集など、3DCG制作に必要な機能が総合的に備わっているツールです。

今回はBlenderで2Dのフロアマップを3Dにしたいと思います！

手順

• 各小間に高さをつけるため、オブジェクトを選んだら右の「レンチ/スパナのマーク」→「モディファイアーを追加」→「生成」「→ソリッド化」の順に選択（幅を変えることで高さを調節できます。）
  

• オブジェクト全体を選択し、「変換」→「メッシュ」（以下のように逆三角マークになっていばOK）
  
  

• 完成したフロアマップをglTF2.0(.glb/.gltf)にエクスポート
  

Amazon Managed Grafanaのワークスペースを作成

Grafanaのワークスペースを作成します！

手順

• ワークスペース名を設定をし次へ
  

• 認証アクセスで少なくとも１つの認証方法を設定

• アクセス許可タイプはサービスマネージド

• 以下のオプションはそのままで次へ
  

• IAM アクセス許可アクセス設定では、オプションのデータソースと通知チャネルで「AWS IoT SiteWise」にチェックを入れ、次へ
  

• 設定内容を確認したらワークスペースを作成

✨完成✨

AWS IoT TwinMakerのワークスペースを作成

Twinmakerのワークスペースを作成します！

手順

• Twinmakerのワークスペースを新規で作成しS3バケットやIAMロールは、自動生成でOK！
  ※Grafana v10のTwinmakerプラグインは東京リージョン対応していないようなので今回はバージニアでワークスペースを作成しました。
  

• Grafanaの認証プロパイダーではGrafanaのワークスペースを作成したときに自動的に生成されたGrafanaサービスロールを選択
  

• ダッシュボードポリシーを作成するで動画の許可なし
  

• IAMでポリシーを作成をクリック→「新しいウィンドウでIAMに移動」→「JSONタブで許可ポリシーテンプレートをコピーする」→「IAMポリシー名は、Advent-Calendar2024DashboardRole」でポリシーを作成
  

以下テンプレート↓
この IAM ポリシーは、特定の S3 バケットおよび AWS IoT TwinMaker のリソースに対して、読み取りおよびクエリ実行に関連するアクションを許可しています。

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Effect": "Allow",
            "Action": [
                "s3:GetObject"
            ],
            "Resource": [
                "arn:aws:s3:::twinmaker-workspace-advent-calendar2024-XXXXXXXXXXXX-iad",
                "arn:aws:s3:::twinmaker-workspace-advent-calendar2024-XXXXXXXXXXXX-iad/*"
            ]
        },
        {
            "Effect": "Allow",
            "Action": [
                "iottwinmaker:Get*",
                "iottwinmaker:List*",
                "iottwinmaker:ExecuteQuery"
            ],
            "Resource": [
                "arn:aws:iottwinmaker:us-east-1:XXXXXXXXXXXX:workspace/Advent-Calendar2024",
                "arn:aws:iottwinmaker:us-east-1:XXXXXXXXXXXX:workspace/Advent-Calendar2024/*"
            ]
        },
        {
            "Effect": "Allow",
            "Action": [
                "iottwinmaker:ListWorkspaces",
                "iottwinmaker:GetWorkspace"
        
            ],
            "Resource": "*"
        }
    ]
}

※後で設定するGrafanaのデーターソース設定の際に
iottwinmaker:GetWorkspaceが許可されてないというエラーが出たため、テンプレートに追加しています。

• Twinmakerに戻りダッシュボードロールを作成するため、「ダッシュボードロールポリシーの更新のコードをコピー」→「ダッシュボードロールを作成する」でIAMでダッシュボードロールを作成する
  
  

• 新しいウィンドウの信頼されたエンティティタイプで「カスタム信頼ポリシー」を選択→「カスタム信頼ポリシー」に先ほどコピーしたコードを貼り次へ→「許可ポリシー」で作成したポリシーにチェックを入れ次へ→ロール名はAdvent-Calendar2024DashboardRoleでロールを作成

• ダッシュボードロールを作成するのダッシュボードは作成したAdvent-Calendar2024DashboardRoleを選択
  

• 設定内容を確認したらワークスペースを作成

✨完成✨

AWS IoT SiteWiseの設定

手順

• Sitewiseの左側のメニューから「ビルド」→「モデル」→アセットモデルを作成→モデルの詳細では名前を入力

• 定義では、以下のように属性を新しく追加→モデルの作成
  

• 次はアセットにいき、「アセットの作成」→モデル情報ではモデルの「名前」を入力→アセットの情報でも「名前」を入力→アセットの作成
  

✨完成✨

AWS IoT TwinMakerに3Dのフロアマップをアップロード

Blenderで作成した3DのフロアマップをTwinmakerにアップロードします！

手順

• ソースライブラリのファイルを選択からBlenderで作成した.glbファイルを追加する
  

• シーンから「シーンを作成」→「ID」を入力し作成する
  

• 作成したシーン→「アクション」→「シーンコンポーザ」で開き、「+」 →「3D モデルを追加」→リソースを追加すると3Dのフロアマップがアップロードされる
  
  

✨完成✨

Amazon Managed GrafanaにAWS IoT SiteWiseとAWS IoT TwinMakerをプラグインとデータソースの設定

プラグインの手順

まず最初にAmazon Managed Grafanaのコンソールに行き、プラグイン管理-新規のところがオンになっているか確認（私はここの設定がオフになっていたためプラグインの権限がないと散々言われました...😭）
オンになっていない場合は、「編集」→「プラグイン管理をオン」にするにチェックをいれ保存

• ワークスペースにいき、「Apps」→「AWS Data Sources」→「AWS Services」から「IoT SiteWise」と「TwinMaker」を「Install now」からインストール
  

データソース設定の手順

• 「Apps」→「AWS Data Sources」→「Data Sources」からサービスとリージョンを設定（Sitewiseも同様）
  

• GO to settingをクリック
  

• ARNはTwinmakerのワークスペースを作成したときの「IAMロールのARN」→「リージョン」→ワークスペースを設定
  
  

• save & testでsuccessfully configuredになればOK

✨完成✨

AWS IoT TwinMakerとAWS IoT SiteWiseの同期

• Twinmakerの実行ロールに以下の書き込みアクション許可のポリシーを追加する

CreateEntity
UpdateEntity
DeleteEntity
CreateComponentType
UpdateComponentType
DeleteComponentType
ListEntities
GetEntity
ListComponentTypes

以下公式のテンプレート↓

// permissions - replace ACCOUNT_ID, REGION, WORKSPACE_ID with actual values
{
    "Version": "2012-10-17",
    "Statement": [{
            "Sid": "SiteWiseAssetReadAccess",
            "Effect": "Allow",
            "Action": [
                "iotsitewise:DescribeAsset"
            ],
            "Resource": [
                "arn:aws:iotsitewise:REGION:ACCOUNT_ID:asset/*"
            ]
        },
        {
            "Sid": "SiteWiseAssetModelReadAccess",
            "Effect": "Allow",
            "Action": [
                "iotsitewise:DescribeAssetModel"
            ],
            "Resource": [
                "arn:aws:iotsitewise:REGION:ACCOUNT_ID:asset-model/*"
            ]
        },
        {
            "Sid": "SiteWiseAssetModelAndAssetListAccess",
            "Effect": "Allow",
            "Action": [
                "iotsitewise:ListAssets",
                "iotsitewise:ListAssetModels"
            ],
            "Resource": [
                "*"
            ]
        },
        {
            "Sid": "TwinMakerAccess",
            "Effect": "Allow",
            "Action": [
                "iottwinmaker:GetEntity",
                "iottwinmaker:CreateEntity",
                "iottwinmaker:UpdateEntity",
                "iottwinmaker:DeleteEntity",
                "iottwinmaker:ListEntities",
                "iottwinmaker:GetComponentType",
                "iottwinmaker:CreateComponentType",
                "iottwinmaker:UpdateComponentType",
                "iottwinmaker:DeleteComponentType",
                "iottwinmaker:ListComponentTypes"
            ],
            "Resource": [
                "arn:aws:iottwinmaker:REGION:ACCOUNT_ID:workspace/WORKSPACE_ID"
            ]
        }
    ]
}                      

　※REGIONやACCOUNT_ID:asset,asset-model,WORKSPACE_IDは変更する

　公式のドキュメントはこちらから↓
　https://docs.aws.amazon.com/ja_jp/iot-twinmaker/latest/guide/tm-sw-custom-ws.html

手順

• Twinmakerの設定の「モデルソース」→「ワークスペースを接続」→接続したいワークスペースを選択
  

　※IAMロールではTwinmakerのIAMロールではなく、IAMロールのARNの方を選択する

• エンティティモデルソースのステータスがアクティブになっていたらOK
  

エンティティの一覧を見ると、エンティティとコンポーネントが自動生成されているはずです。

• 次にTwinmakerのシーンに戻り、 左側のルールタブで新規ルールの追加で新しくルールを設定
  （これにより、Sitewiseのルールがデータの処理を行い、モデルシェーダーでその結果を可視化することができる）
  

• 設定したいオブジェクト（赤い丸で囲んだところ）を選択し、「＋」 →「モデルシェーダーを追加」→「検査者」のモデルシェーダーを以下のように設定
  

• エンティティIDは、SitewiseのアセットIDとTwinmakerのエンティティIDが同じになるようにする
  
  

• コンポーネント名はSitewiseと同期した際に自動生成されたコンポーネント

• プロパティ名はSitewiseで設定した属性名

• ルールIDは、先ほど作成したルール名

✨完成✨

Amazon Managed Grafanaのダッシュボード作成

• 「 + Create Dashboard」
  

• 「+ Add Visualization」
  

• Twinmakerを選択
  

• 左側のタブから「Visualization」にいき、「AWS IoT TwinMaker Scene Viewer」を選択
  

• 右側の「AWS IoT TwinMaker Scene Viewer」の欄で対象のWorkspaceとSceneを選択すると、パネルにTwinmakerで作成したSceneが表示される
  

• Queryでは、Querytypeを「Get propety value history」、Regionを「us-east-1」、Aseetを「Advent calender」、Propertyを「number1」に指定し、最後にApply
  

実際にデータが上がってくると、指定したオブジェクトに色がつきます。

✨完成✨

さいご

かなり長くなりましたがここまでお付き合いいただき、ありがとうございました🌟
今回は設定やエラー解決は、慣れるまでまだまだ時間がかかりますが、その分上手く動くと楽しいですね！
この記事が、同じようにチャレンジしている方々の参考になれば嬉しいです。