4 |
5 | 本パッケージは、NEDOロボット活用型市場化適用技術開発プロジェクト(2017-2020)で開発された、移動ロボット (Autonomout Mobile Robot: AMR) 用のWeb GUIインターフェースです。
6 |
7 | 
8 |
9 | ## 目次
10 |
11 | - [1. 環境構築](setup)
12 | - [2. インストール](install)
13 | - [3. デプロイ](deploy)
14 | - [4. UI要素と機能](gui)
15 |
16 |
--------------------------------------------------------------------------------
/src/app/shared/storage/storage-data.ts:
--------------------------------------------------------------------------------
1 | /*
2 | * Copyright (C) 2020 TOSHIBA Corporation.
3 | * SPDX-License-Identifier: BSD-2-Clause
4 | */
5 |
6 | import { PickableModel } from '../pickable-model';
7 |
8 | /**
9 | * ストレージモデルデータです。
10 | */
11 | export interface StorageData
4 |
5 | This package is a Web GUI interface package for mobile robots (Autonomous Mobile Robot: AMR) that is released from the NEDO Technology Development Project for Robot Commercialization Applications (Shijyouka Project, robo-marc Project, FY2017-2020.
6 |
7 |
8 |
9 | ## Table of Contents
10 |
11 | - [1. Setup](setup_en)
12 | - [2. Installation](install_en)
13 | - [3. Deployment](deploy_en)
14 | - [4. UI Elements and Functions](gui_en)
15 |
16 |
--------------------------------------------------------------------------------
/src/app/robots/shared/robot-util.ts:
--------------------------------------------------------------------------------
1 | /*
2 | * Copyright (C) 2020 TOSHIBA Corporation.
3 | * SPDX-License-Identifier: BSD-2-Clause
4 | */
5 |
6 | import { Robot } from './robot.model';
7 |
8 | /**
9 | * ロボットユーティリティです。
10 | */
11 | export class RobotUtil {
12 | /**
13 | * URLを取得する。
14 | *
15 | * @param robot ロボット
16 | * @return ロボットのURL
17 | */
18 | static getURL(robot: Robot): string {
19 | if (window.location.protocol === 'https:') {
20 | return 'wss://' + robot.address + ':' + robot.port;
21 | } else {
22 | return 'ws://' + robot.address + ':' + robot.port;
23 | }
24 | }
25 | }
26 |
--------------------------------------------------------------------------------
/src/app/commands/shared/command-info.model.ts:
--------------------------------------------------------------------------------
1 | /*
2 | * Copyright (C) 2020 TOSHIBA Corporation.
3 | * SPDX-License-Identifier: BSD-2-Clause
4 | */
5 |
6 | /**
7 | * コマンドインフォです。
8 | */
9 | export interface CommandInfo {
10 | /** タイプ */
11 | type: string;
12 |
13 | /** リクエストトピックネーム */
14 | request: string;
15 |
16 | /** レスポンストピックネーム */
17 | response: string;
18 |
19 | /** コマンド */
20 | cmd: string;
21 |
22 | /** パラメータカウント */
23 | paramCount: number;
24 |
25 | /** パラメータインデックス */
26 | paramIndex: number;
27 |
28 | /** パラメータ */
29 | param: string;
30 |
31 | /** オートコンプリート */
32 | autocomplete: string[];
33 | }
34 |
--------------------------------------------------------------------------------
/src/app/shared/ros/messages/occupancy-grid.model.ts:
--------------------------------------------------------------------------------
1 | /*
2 | * Copyright (C) 2020 TOSHIBA Corporation.
3 | * SPDX-License-Identifier: BSD-2-Clause
4 | */
5 |
6 | import { MapMetaData } from './map-meta-data.model';
7 |
8 | /**
9 | * オキュパンシーグリッドです。
10 | * @see http://docs.ros.org/kinetic/api/nav_msgs/html/msg/OccupancyGrid.html
11 | */
12 | export interface OccupancyGrid {
13 | /** ヘッダー */
14 | header: any;
15 |
16 | /** MetaData for the map */
17 | info: MapMetaData;
18 |
19 | /** The map data, in row-major order, starting with (0,0). Occupancy probabilities are in the range [0,100]. Unknown is -1. */
20 | data: Int8Array;
21 | }
22 |
--------------------------------------------------------------------------------
/src/app/viewer/shared/markers/marker.ts:
--------------------------------------------------------------------------------
1 | /*
2 | * Copyright (C) 2020 TOSHIBA Corporation.
3 | * SPDX-License-Identifier: BSD-2-Clause
4 | */
5 |
6 | /**
7 | * マーカーです。
8 | */
9 | export interface Marker {
10 | /**
11 | * ビューが変化した際にアップデートする。
12 | */
13 | update(): void;
14 |
15 | /**
16 | * 表示する。
17 | */
18 | show(): void;
19 |
20 | /**
21 | * 非表示にする。
22 | */
23 | hide(): void;
24 |
25 | /**
26 | * 表示か非表示かを返却する。
27 | *
28 | * @return true(表示)/false(非表示)
29 | */
30 | isVisibled(): boolean;
31 |
32 | /**
33 | * 破棄する。
34 | */
35 | dispose(): void;
36 |
37 | /**
38 | * 削除する。
39 | */
40 | remove(): void;
41 | }
42 |
--------------------------------------------------------------------------------
/src/app/shared/ros/messages/map-meta-data.model.ts:
--------------------------------------------------------------------------------
1 | /*
2 | * Copyright (C) 2020 TOSHIBA Corporation.
3 | * SPDX-License-Identifier: BSD-2-Clause
4 | */
5 |
6 | import * as ROSLIB from 'roslib';
7 |
8 | /**
9 | * MapMetaDataメッセージです。
10 | * @see http://docs.ros.org/kinetic/api/nav_msgs/html/msg/MapMetaData.html
11 | */
12 | export interface MapMetaData {
13 | /** The map resolution [m/cell] */
14 | resolution: number;
15 |
16 | /** Map width [cells] */
17 | width: number;
18 |
19 | /** Map height [cells] */
20 | height: number;
21 |
22 | /** The origin of the map [m, m, rad]. This is the real-world pose of the cell (0,0) in the map. */
23 | origin: ROSLIB.Pose;
24 | }
25 |
--------------------------------------------------------------------------------
/ngsw-config.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "./node_modules/@angular/service-worker/config/schema.json",
3 | "index": "/index.html",
4 | "assetGroups": [
5 | {
6 | "name": "app",
7 | "installMode": "prefetch",
8 | "resources": {
9 | "files": [
10 | "/index.html",
11 | "/manifest.webmanifest",
12 | "/*.css",
13 | "/*.js"
14 | ]
15 | }
16 | }, {
17 | "name": "assets",
18 | "installMode": "lazy",
19 | "updateMode": "prefetch",
20 | "resources": {
21 | "files": [
22 | "/assets/**",
23 | "/*.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)"
24 | ]
25 | }
26 | }
27 | ]
28 | }
29 |
--------------------------------------------------------------------------------
/src/app/robots/robot-detail/robot-detail.component.html:
--------------------------------------------------------------------------------
1 |
5 |
6 |
7 |
21 |
--------------------------------------------------------------------------------
/src/app/poses/pose-detail/pose-detail.component.html:
--------------------------------------------------------------------------------
1 |
5 |
6 |
8 |
10 |
11 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 | {{model.id}}: {{model.name}} Details
9 |
7 |
24 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compileOnSave": false,
3 | "compilerOptions": {
4 | "baseUrl": "./",
5 | "outDir": "./dist/out-tsc",
6 | "sourceMap": true,
7 | "declaration": false,
8 | "module": "esnext",
9 | "moduleResolution": "node",
10 | "emitDecoratorMetadata": true,
11 | "experimentalDecorators": true,
12 | "importHelpers": true,
13 | "strictNullChecks": true,
14 | "noImplicitAny": true,
15 | "noImplicitThis": true,
16 | "noImplicitReturns": true,
17 | "noUnusedLocals": true,
18 | "noUnusedParameters": true,
19 | "target": "es2015",
20 | "typeRoots": [
21 | "node_modules/@types"
22 | ],
23 | "lib": [
24 | "es2018",
25 | "dom"
26 | ]
27 | }
28 | }
29 |
--------------------------------------------------------------------------------
/src/app/cmd-lists/cmd-list-detail/cmd-list-detail.component.html:
--------------------------------------------------------------------------------
1 |
5 |
6 |
8 |
11 |
12 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 | {{model.id}}: {{model.name}} Details
9 | 10 |
7 |
22 |
--------------------------------------------------------------------------------
/src/app/poses/pose-form/pose-form.component.css:
--------------------------------------------------------------------------------
1 | .form-container {
2 | display: flex;
3 | flex-direction: column;
4 | }
5 |
6 | .form-container .mat-form-field {
7 | margin-bottom: 5px;
8 | }
9 |
10 | .form-container > * {
11 | width: 100%;
12 | }
13 |
14 | .form-name-and-color {
15 | display: flex;
16 | flex-direction: row;
17 | }
18 |
19 | .form-name-and-color > * {
20 | width: 50%;
21 | }
22 |
23 | .form-name-and-color .mat-form-field {
24 | margin-bottom: 15px;
25 | }
26 |
27 | .form-position {
28 | display: flex;
29 | flex-direction: row;
30 | }
31 |
32 | .form-position > * {
33 | width: 33%;
34 | }
35 |
36 | .form-position .mat-form-field {
37 | margin-bottom: 15px;
38 | }
39 |
40 | .right {
41 | text-align: right;
42 | }
43 |
--------------------------------------------------------------------------------
/src/app/viewer/select-dialog/select-dialog.component.html:
--------------------------------------------------------------------------------
1 |
5 |
6 |
8 |
11 |
12 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 | {{ model.id }}: {{ model.name }} Details
9 | 10 |{{ data.title }}
7 |
8 |
18 |
9 |
10 |
11 |
12 | {{ option }}
13 |
14 |
15 |
16 |
17 |
19 |
20 |
21 |
22 |
--------------------------------------------------------------------------------
/src/app/viewer/shared/protocol/robot-command-request.model.ts:
--------------------------------------------------------------------------------
1 | /*
2 | * Copyright (C) 2020 TOSHIBA Corporation.
3 | * SPDX-License-Identifier: BSD-2-Clause
4 | */
5 |
6 | /**
7 | * ロボットコマンドパラメーターです。
8 | */
9 | export interface RobotCommandParameter {
10 | /** ネーム */
11 | name: string;
12 |
13 | /** バリュー */
14 | values: string[];
15 | }
16 |
17 | /**
18 | * ロボットコマンドです。
19 | */
20 | export interface RobotCommand {
21 | /** コマンド名 */
22 | cmd: string;
23 |
24 | /** パラメータ */
25 | params: RobotCommandParameter[];
26 | }
27 |
28 | /**
29 | * ロボットコマンドリクエストです。
30 | */
31 | export interface RobotCommandRequest {
32 | /** トピック */
33 | topic: string;
34 |
35 | /** メッセージタイプ */
36 | messageType: string;
37 |
38 | /** メッセージ */
39 | messages: RobotCommand[];
40 | }
41 |
--------------------------------------------------------------------------------
/src/index.html:
--------------------------------------------------------------------------------
1 |
5 |
6 |
7 |
8 |
9 |
10 |
7 |
27 |
--------------------------------------------------------------------------------
/src/app/shared/ros/pose.ts:
--------------------------------------------------------------------------------
1 | /*
2 | * Copyright (C) 2020 TOSHIBA Corporation.
3 | * SPDX-License-Identifier: BSD-2-Clause
4 | */
5 |
6 | import * as ROSLIB from 'roslib';
7 |
8 | // add type definition
9 |
10 | declare module 'roslib' {
11 | /**
12 | * ポーズです。
13 | * roslibで型定義が宣言されていないので追加する。
14 | */
15 | export class Pose {
16 | /**
17 | * オブジェクトを構築する。
18 | *
19 | * @param options オプション
20 | */
21 | constructor(options: { position: any; orientation: any });
22 |
23 | /** ポジション */
24 | position: ROSLIB.Vector3;
25 |
26 | /** オリエンテーション */
27 | orientation: ROSLIB.Quaternion;
28 |
29 | /**
30 | * トランスフォームをアプライする。
31 | *
32 | * @param tf tf
33 | */
34 | applyTransform(tf: { rotation: any }): void;
35 |
36 | /**
37 | * クローンする。
38 | */
39 | clone(): void;
40 | }
41 | }
42 |
--------------------------------------------------------------------------------
/src/environments/environment.ts:
--------------------------------------------------------------------------------
1 | /*
2 | * Copyright (C) 2020 TOSHIBA Corporation.
3 | * SPDX-License-Identifier: BSD-2-Clause
4 | */
5 |
6 | // This file can be replaced during build by using the `fileReplacements` array.
7 | // `ng build --prod` replaces `environment.ts` with `environment.prod.ts`.
8 | // The list of file replacements can be found in `angular.json`.
9 |
10 | export const environment = {
11 | production: false,
12 | config: {} as any
13 | };
14 |
15 | /*
16 | * For easier debugging in development mode, you can import the following file
17 | * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
18 | *
19 | * This import should be commented out in production mode because it will have a negative impact
20 | * on performance if an error is thrown.
21 | */
22 | // import 'zone.js/dist/zone-error'; // Included with Angular CLI.
23 |
--------------------------------------------------------------------------------
/src/app/shared/ros/messages/config.model.ts:
--------------------------------------------------------------------------------
1 | /*
2 | * Copyright (C) 2020 TOSHIBA Corporation.
3 | * SPDX-License-Identifier: BSD-2-Clause
4 | */
5 |
6 | import { BoolParameter } from './bool-parameter.model';
7 | import { IntParameter } from './int-parameter.model';
8 | import { StrParameter } from './str-parameter.model';
9 | import { DoubleParameter } from './double-parameter.model';
10 | import { GroupState } from './group-state.model';
11 |
12 | /**
13 | * Configメッセージです。
14 | *
15 | * @see http://docs.ros.org/kinetic/api/dynamic_reconfigure/html/msg/Config.html
16 | */
17 | export interface Config {
18 | /** boolパラメータ配列 */
19 | bools: BoolParameter[];
20 |
21 | /** intパラメータ配列 */
22 | ints: IntParameter[];
23 |
24 | /** strパラメータ配列 */
25 | strs: StrParameter[];
26 |
27 | /** doubleパラメータ配列 */
28 | doubles: DoubleParameter[];
29 |
30 | /** groupsパラメータ配列 */
31 | groups: GroupState[];
32 | }
33 |
--------------------------------------------------------------------------------
/src/app/shared/store/store.service.ts:
--------------------------------------------------------------------------------
1 | /*
2 | * Copyright (C) 2020 TOSHIBA Corporation.
3 | * SPDX-License-Identifier: BSD-2-Clause
4 | */
5 |
6 | import { Injectable } from '@angular/core';
7 | import { KeyValueStore } from './key-value-store';
8 | import { LocalStorageStore } from './local-storage-store';
9 | import { HttpClient } from '@angular/common/http';
10 |
11 | /**
12 | * ストアサービスする。
13 | */
14 | @Injectable({
15 | providedIn: 'root'
16 | })
17 | export class StoreService {
18 | /** キーバリューストア */
19 | keyValueStore: KeyValueStore;
20 |
21 | /**
22 | * オブジェクトを構築する。
23 | *
24 | * @param http HTTPクライアント
25 | */
26 | constructor(public http: HttpClient) {
27 | this.keyValueStore = new LocalStorageStore();
28 | }
29 |
30 | /**
31 | * キーバリューストアを返す。
32 | *
33 | * @return キーバリューストア
34 | */
35 | getKeyValueStore(): KeyValueStore {
36 | return this.keyValueStore;
37 | }
38 | }
39 |
--------------------------------------------------------------------------------
/src/assets/configs/reset/poses.json:
--------------------------------------------------------------------------------
1 | {
2 | "array": [
3 | {
4 | "name": "P000",
5 | "color": "#03A9F480",
6 | "rospose": {
7 | "position": {
8 | "x": 0.00000000000000,
9 | "y": 0.00000000000000,
10 | "z": 0
11 | },
12 | "orientation": {
13 | "x": 0,
14 | "y": 0,
15 | "z": 0,
16 | "w": 1
17 | }
18 | },
19 | "id": 0
20 | },
21 | {
22 | "name": "P001",
23 | "color": "#FF980080",
24 | "rospose": {
25 | "position": {
26 | "x": -0.484975072012876,
27 | "y": -2.70799473067883,
28 | "z": 0
29 | },
30 | "orientation": {
31 | "x": 0,
32 | "y": 0,
33 | "z": -0.7071067811865476,
34 | "w": 0.7071067811865475
35 | }
36 | },
37 | "id": 1
38 | }
39 | ],
40 | "nextId": 2
41 | }
42 |
--------------------------------------------------------------------------------
/src/app/viewer/input-dialog/input-dialog.component.html:
--------------------------------------------------------------------------------
1 |
5 |
6 |
8 |
26 |
9 |
10 |
16 | MyCmdList
17 |
18 |
19 | {{ option }}
20 |
21 |
22 |
23 |
24 | {{ data.title }}
7 |
8 |
25 |
9 |
10 |
17 |
18 |
19 | {{ option }}
20 |
21 |
22 |
23 |
24 |
26 |
27 |
28 |
29 |
--------------------------------------------------------------------------------
/src/app/viewer/shared/protocol/robot-command-response.model.ts:
--------------------------------------------------------------------------------
1 | /*
2 | * Copyright (C) 2020 TOSHIBA Corporation.
3 | * SPDX-License-Identifier: BSD-2-Clause
4 | */
5 |
6 | /**
7 | * ロボットレスポンスパラメーターです。
8 | */
9 | export interface RobotResponseParameter {
10 | /** ネーム */
11 | name: string;
12 |
13 | /** バリュー */
14 | values: string[];
15 | }
16 |
17 | /**
18 | * ロボットレスポンスステータスです。
19 | */
20 | export interface RobotResponseStatus {
21 | /** ステータス */
22 | statuses: string[];
23 | }
24 |
25 | /**
26 | * ロボットレスポンスです。
27 | */
28 | export interface RobotResponse {
29 | /** コマンド名 */
30 | cmd: string;
31 |
32 | /** パラメータ */
33 | params: RobotResponseParameter[];
34 |
35 | /** ステータス */
36 | status: RobotResponseStatus;
37 | }
38 |
39 | /**
40 | * ロボットコマンドレスポンスです。
41 | */
42 | export interface RobotCommandResponse {
43 | /** トピック */
44 | topic: string;
45 |
46 | /** メッセージタイプ */
47 | messageType: string;
48 |
49 | /** メッセージ */
50 | messages: RobotResponse[];
51 | }
52 |
--------------------------------------------------------------------------------
/src/app/settings/settings.component.html:
--------------------------------------------------------------------------------
1 |
5 |
6 |
7 |
14 |
15 |
16 |
27 |
28 |
29 |
33 |
--------------------------------------------------------------------------------
/src/app/poses/poses.component.ts:
--------------------------------------------------------------------------------
1 | /*
2 | * Copyright (C) 2020 TOSHIBA Corporation.
3 | * SPDX-License-Identifier: BSD-2-Clause
4 | */
5 |
6 | import { Component, Renderer2 } from '@angular/core';
7 | import { Pose } from './shared/pose.model';
8 | import { PoseService } from './shared/pose.service';
9 | import { StorageComponent } from '../shared/storage/storage-component';
10 | import { StoreService } from '../shared/store/store.service';
11 |
12 | /**
13 | * ポーズのコンポーネントです。
14 | */
15 | @Component({
16 | selector: 'app-poses',
17 | templateUrl: './poses.component.html',
18 | styleUrls: ['./poses.component.css']
19 | })
20 | export class PosesComponent extends StorageComponentSettings
8 |
9 |
10 |
11 |
12 |
13 | | Id | 18 |Name | 19 |Value | 20 |
|---|---|---|
| {{ row.id }} | 23 |{{ row.name }} | 24 |{{ row.value }} | 25 |
30 |
31 |
32 |
7 |
38 |
--------------------------------------------------------------------------------
/src/app/viewer/input-dialog/input-dialog.component.ts:
--------------------------------------------------------------------------------
1 | /*
2 | * Copyright (C) 2020 TOSHIBA Corporation.
3 | * SPDX-License-Identifier: BSD-2-Clause
4 | */
5 |
6 | import { Component, Inject } from '@angular/core';
7 | import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
8 | import { InputDialogData } from './input-dialog-data';
9 |
10 | /**
11 | * インプットダイアログのコンポーネントです。
12 | */
13 | @Component({
14 | selector: 'app-input-dialog',
15 | templateUrl: './input-dialog.component.html',
16 | styleUrls: ['./input-dialog.component.css']
17 | })
18 | export class InputDialogComponent {
19 | /**
20 | * オブジェクトを構築する。
21 | *
22 | * @param dialogRef ダイアログのリファレンス
23 | * @param data ダイアログデータ
24 | */
25 | constructor(
26 | public dialogRef: MatDialogRef
8 |
10 |
11 |
31 |
32 |
33 |
34 |
35 |
36 |
37 | {{model.id}}: {{model.name}} Details
9 |
12 |
13 |
19 |
20 |
30 |
21 |
22 |
27 |
28 |
29 |
7 |
16 |
17 |
18 |
29 |
30 |
31 |
32 |
33 | 34 |
35 |
36 |
37 | New cmdList
38 | Type cmdList info
39 |
40 |
42 |
43 |
44 |
45 |
46 |
47 |
--------------------------------------------------------------------------------
/src/app/cmd-lists/cmd-list-detail/cmd-list-detail.component.ts:
--------------------------------------------------------------------------------
1 | /*
2 | * Copyright (C) 2020 TOSHIBA Corporation.
3 | * SPDX-License-Identifier: BSD-2-Clause
4 | */
5 |
6 | import { Component, Input } from '@angular/core';
7 | import { ActivatedRoute } from '@angular/router';
8 | import { Location } from '@angular/common';
9 | import { CmdList } from '../shared/cmd-list.model';
10 | import { CmdListService } from '../shared/cmd-list.service';
11 | import { StorageDetail } from '../../shared/storage/storage-detail';
12 | import { CommandService } from '../../commands/shared/command.service';
13 |
14 | /**
15 | * コマンドリストの詳細を表示するコンポーネントです。
16 | */
17 | @Component({
18 | selector: 'app-cmd-list-detail',
19 | templateUrl: './cmd-list-detail.component.html',
20 | styleUrls: ['./cmd-list-detail.component.css']
21 | })
22 | export class CmdListDetailComponent extends StorageDetailCmdLists
8 | 9 |
10 |
11 |
12 |
13 |
14 |
15 | | Id | 20 |Name | 21 |Commands | 22 |
|---|---|---|
| {{ row.id }} | 25 |{{ row.name }} | 26 |{{ toStringBrief(row.commands, 80) }} | 27 |
33 | 34 |
7 |
16 |
17 |
18 |
35 |
36 |
37 |
38 |
39 | 40 |
41 |
42 |
43 | New robot
44 | Type robot info
45 |
46 |
48 |
49 |
50 |
51 |
52 |
53 |
--------------------------------------------------------------------------------
/src/app/app-routing.module.ts:
--------------------------------------------------------------------------------
1 | /*
2 | * Copyright (C) 2020 TOSHIBA Corporation.
3 | * SPDX-License-Identifier: BSD-2-Clause
4 | */
5 |
6 | import { NgModule } from '@angular/core';
7 | import { RouterModule, Routes } from '@angular/router';
8 | import { HomeComponent } from './home/home.component';
9 | import { RobotsComponent } from './robots/robots.component';
10 | import { RobotDetailComponent } from './robots/robot-detail/robot-detail.component';
11 | import { SettingsComponent } from './settings/settings.component';
12 | import { PosesComponent } from './poses/poses.component';
13 | import { PoseDetailComponent } from './poses/pose-detail/pose-detail.component';
14 | import { SettingDetailComponent } from './settings/setting-detail/setting-detail.component';
15 | import { CmdListsComponent } from './cmd-lists/cmd-lists.component';
16 | import { CmdListDetailComponent } from './cmd-lists/cmd-list-detail/cmd-list-detail.component';
17 |
18 | const routes: Routes = [
19 | { path: '', redirectTo: '/', pathMatch: 'full' },
20 | { path: '', component: HomeComponent },
21 | { path: 'robots', component: RobotsComponent },
22 | { path: 'robot/detail/:id', component: RobotDetailComponent },
23 | { path: 'poses', component: PosesComponent },
24 | { path: 'pose/detail/:id', component: PoseDetailComponent },
25 | { path: 'cmd-lists', component: CmdListsComponent },
26 | { path: 'cmd-list/detail/:id', component: CmdListDetailComponent },
27 | { path: 'settings', component: SettingsComponent },
28 | { path: 'setting/detail/:id', component: SettingDetailComponent },
29 | { path: '**', component: HomeComponent }
30 | ];
31 |
32 | @NgModule({
33 | imports: [RouterModule.forRoot(routes)],
34 | exports: [RouterModule]
35 | })
36 | export class AppRoutingModule { }
37 |
--------------------------------------------------------------------------------
/src/app/settings/settings.component.ts:
--------------------------------------------------------------------------------
1 | /*
2 | * Copyright (C) 2020 TOSHIBA Corporation.
3 | * SPDX-License-Identifier: BSD-2-Clause
4 | */
5 |
6 | import { Component, Renderer2 } from '@angular/core';
7 | import { Router } from '@angular/router';
8 | import { Setting } from './shared/setting.model';
9 | import { ConfigService } from '../shared/config/config.service';
10 | import { SettingService } from './shared/setting.service';
11 | import { StorageComponent } from '../shared/storage/storage-component';
12 | import { StoreService } from '../shared/store/store.service';
13 |
14 | /**
15 | * セッティングのコンポーネントです。
16 | */
17 | @Component({
18 | selector: 'app-settings',
19 | templateUrl: './settings.component.html',
20 | styleUrls: ['./settings.component.css']
21 | })
22 | export class SettingsComponent extends StorageComponentRobots
8 | 9 |
10 |
11 |
12 |
13 |
14 |
15 | | Id | 20 |Name | 21 |Color | 22 |Namespace | 23 |Address | 24 |Port | 25 |
|---|---|---|---|---|---|
| {{ row.id }} | 28 |{{ row.name }} | 29 |{{ row.color }} | 30 |{{ row.namespace }} | 31 |{{ row.address }} | 32 |{{ row.port }} | 33 |
39 | 40 |
7 |
16 |
17 |
18 |
41 |
42 |
43 |
44 |
45 | 46 |
47 |
48 |
49 | New pose
50 | Type pose info
51 |
52 |
54 |
55 |
56 |
57 |
58 |
59 |
--------------------------------------------------------------------------------
/src/app/viewer/shared/markers/ros-marker.ts:
--------------------------------------------------------------------------------
1 | /*
2 | * Copyright (C) 2020 TOSHIBA Corporation.
3 | * SPDX-License-Identifier: BSD-2-Clause
4 | */
5 |
6 | import 'pixi.js';
7 | import { BaseViewer } from '../base-viewer';
8 | import { BaseMarker } from './base-marker';
9 |
10 | /**
11 | * Rosマーカーです。
12 | */
13 | export class RosMarker extends BaseMarker {
14 | /** Rosワールドコンテナ */
15 | rosWorld: PIXI.Container;
16 |
17 | /** スケーリングRosワールドコンテナ */
18 | rosWorldScale: PIXI.Container;
19 |
20 | /**
21 | * オブジェクトを構築する。
22 | *
23 | * RosワールドコンテナをビューワーのRosワールドコンテナに追加する。
24 | * スケーリングRosワールドコンテナをビューワーのスケーリングRosワールドコンテナに追加する。
25 | *
26 | * コンテナの親子関係
27 | * Viewer.root -> BaseMarker.root
28 | * Viewer.rosWorld -> RosMarker.rosWorld
29 | * Viewer.rosWorldScale -> RosMarker.rosWorldScale
30 | *
31 | * @param viewer ビューワー
32 | */
33 | constructor(viewer: BaseViewer) {
34 | super(viewer);
35 | this.rosWorld = new PIXI.Container();
36 | this.viewer.rosWorld.addChild(this.rosWorld);
37 | this.rosWorldScale = new PIXI.Container();
38 | this.viewer.rosWorldScale.addChild(this.rosWorldScale);
39 | }
40 |
41 | /**
42 | * 表示する。
43 | *
44 | * Rosワールドコンテナを表示する。
45 | * スケーリングRosワールドコンテナを表示する。
46 | */
47 | show(): void {
48 | super.show();
49 | this.rosWorld.visible = true;
50 | this.rosWorldScale.visible = true;
51 | }
52 |
53 | /**
54 | * 非表示にする。
55 | *
56 | * Rosワールドコンテナを非表示にする。
57 | * スケーリングRosワールドコンテナを非表示にする。
58 | */
59 | hide(): void {
60 | super.hide();
61 | this.rosWorld.visible = false;
62 | this.rosWorldScale.visible = false;
63 | }
64 |
65 | /**
66 | * 削除する。
67 | *
68 | * RosワールドコンテナをビューワーのRosワールドコンテナから削除する。
69 | * スケーリングRosワールドコンテナをビューワーのスケーリングRosワールドコンテナから削除する。
70 | */
71 | remove(): void {
72 | super.remove();
73 | this.viewer.rosWorld.removeChild(this.rosWorld);
74 | this.viewer.rosWorldScale.removeChild(this.rosWorldScale);
75 | }
76 | }
77 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "AMR-IF-UI",
3 | "version": "1.0.0",
4 | "license": "BSD-2-Clause",
5 | "description": "AMR-IF-UI is application that implements a common IF for AMR(Autonomous Mobile Robot)",
6 | "homepage": "https://github.com/AMR-IF/AMR-IF-UI",
7 | "repository": {
8 | "type": "git",
9 | "url": "https://github.com/AMR-IF/AMR-IF-UI.git"
10 | },
11 | "scripts": {
12 | "ng": "ng",
13 | "start": "ng serve",
14 | "build": "ng build",
15 | "lint": "ng lint"
16 | },
17 | "private": true,
18 | "dependencies": {
19 | "@angular/animations": "~9.1.0",
20 | "@angular/cdk": "^9.2.0",
21 | "@angular/common": "~9.1.0",
22 | "@angular/compiler": "~9.1.0",
23 | "@angular/core": "~9.1.0",
24 | "@angular/forms": "~9.1.0",
25 | "@angular/material": "^9.2.0",
26 | "@angular/platform-browser": "~9.1.0",
27 | "@angular/platform-browser-dynamic": "~9.1.0",
28 | "@angular/pwa": "^0.901.0",
29 | "@angular/router": "~9.1.0",
30 | "@angular/service-worker": "~9.1.0",
31 | "ngx-build-plus": "^9.0.6",
32 | "pixi-layers": "^0.2.3",
33 | "pixi.js": "^5.2.1",
34 | "roslib": "^1.1.0",
35 | "rxjs": "~6.5.4",
36 | "tslib": "^1.11.1",
37 | "zone.js": "~0.10.3"
38 | },
39 | "devDependencies": {
40 | "@angular-devkit/build-angular": "~0.901.0",
41 | "@angular/cli": "~9.1.0",
42 | "@angular/compiler-cli": "~9.1.0",
43 | "@angular/language-service": "~9.1.0",
44 | "@types/jasmine": "~3.5.10",
45 | "@types/jasminewd2": "~2.0.8",
46 | "@types/node": "^13.9.4",
47 | "@types/roslib": "^1.0.0",
48 | "codelyzer": "^5.2.1",
49 | "jasmine-core": "~3.5.0",
50 | "jasmine-spec-reporter": "~5.0.1",
51 | "karma": "~4.4.1",
52 | "karma-chrome-launcher": "~3.1.0",
53 | "karma-coverage-istanbul-reporter": "~2.1.1",
54 | "karma-jasmine": "~3.1.1",
55 | "karma-jasmine-html-reporter": "^1.5.3",
56 | "protractor": "^5.4.3",
57 | "ts-node": "~8.8.1",
58 | "tslint": "~6.1.0",
59 | "typescript": "~3.7.5"
60 | }
61 | }
62 |
--------------------------------------------------------------------------------
/docs/install.md:
--------------------------------------------------------------------------------
1 | # AMR-IF-UI: インストール
2 |
3 |
4 | - [1. インストール](#1-インストール)
5 | - [1.1. コード取得](#11-コード取得)
6 | - [1.2. 依存パッケージのインストール](#12-依存パッケージのインストール)
7 | - [1.3. アクセステスト](#13-アクセステスト)
8 |
9 |
10 |
11 | ## 1. インストール
12 |
13 | ### 1.1. コード取得
14 |
15 | 本AMR-IFは、githubリポジトリからダウンロードするなどして適当なディレクトリに展開してください。
16 |
17 | ```shell
18 | $ git clone https://github.com/robo-marc/AMR-IF-UI
19 | $ cd AMR-IF-UI
20 | $ ls
21 | LICENSE doc package-lock.json tsconfig.spec.json
22 | LICENSE_HEADER img package.json tslint.json
23 | README.md karma.conf.js src
24 | angular.json ngsw-config.json tsconfig.app.json
25 | browserslist node_modules tsconfig.json
26 | ```
27 |
28 | ### 1.2. 依存パッケージのインストール
29 |
30 | ここで、npm ci コマンドで依存パッケージをインストールします。
31 |
32 | ```shell
33 | $ sudo npm ci
34 | :
35 | > @angular/cli@9.1.0 postinstall /home/n-ando/work/AMR-IF-UI/node_modules/@angular/cli
36 | > node ./bin/postinstall/script.js
37 |
38 | added 1476 packages in 31.457s
39 | $ sudo npm install -g @angular/cli
40 | ```
41 |
42 | ```shell
43 | $ ng serve
44 | :
45 | 少し時間がかかります。
46 | :
47 | Date: 2021-09-23T08:04:01.730Z - Hash: 98b0164d374b20b98c5c
48 | 5 unchanged chunks
49 |
50 | Time: 542ms
51 | : Compiled successfully.
52 | ```
53 |
54 | このとき、以下のように、GoogleのAngularチームと使用状況データを共有するか、以下のように確認のメッセージが表示されますので、特に問題がなければ "y" を入力して先に進みます。（そういうのを好まない場合は "n" でも結構です。）
55 |
56 | ```shell
57 | ? Would you like to share anonymous usage data with the Angular Team at Google u
58 | nder Google’s Privacy Policy at https://policies.google.com/privacy?
59 | For more details and how to change this setting, see http://angular.io/analytics.
60 | ```
61 |
62 | "ng serve" コマンド実行後は、コマンドプロンプトは帰ってきませんが、これは裏でHTTPサービスが動作しているためです。次のアクセステストに進み、Webサービスにアクセスできるかテストします。
63 |
64 | ### 1.3. アクセステスト
65 |
66 | ブラウザから、http://localhost:4200 にアクセスしてみてください。
67 |
68 | - [http://localhost:4200](http://localhost:4200)
69 |
70 | 以下のような画面が表示されるはずです。
71 |
72 | Poses
8 | 9 |
10 |
11 |
12 |
13 |
14 |
15 | | Id | 20 |Name | 21 |Color | 22 |Position | 23 |Orientation | 24 |
|---|---|---|---|---|
| {{row.id}} | 27 |{{row.name}} | 28 |{{row.color}} | 29 |30 | ({{ row.rospose.position.x | number }}, 31 | {{ row.rospose.position.y | number }}, 32 | {{ row.rospose.position.z | number }}) 33 | | 34 |35 | ({{ row.rospose.orientation.y | number }}, 36 | {{ row.rospose.orientation.z | number }}, 37 | {{ row.rospose.orientation.w | number }}) 38 | | 39 |
45 | 46 |
73 |
74 | ポートは以下のように "--port" オプションで変更可能です。
75 |
76 | ```shell
77 | $ ng server --port 8080
78 | ```
79 | 1023番以下のポートにする場合は root 権限が必要ですので、コマンドの前に sudo などが必要です。
80 |
--------------------------------------------------------------------------------
/docs/deploy.md:
--------------------------------------------------------------------------------
1 | # AMR-IF-UI: デプロイ
2 |
3 |
4 |
5 | - [1. デプロイメント](#1-デプロイメント)
6 | - [1.1. ビルド](#11-ビルド)
7 | - [1.2. ベースURLの変更](#12-ベースurlの変更)
8 |
9 |
10 |
11 | ## 1. デプロイメント
12 |
13 | AMR-IF-UI は、Angularフレームワークで構築されており、
14 | AOT (Ahead-of-time) コンパイラで事前にトランスパイル (ビルドする) することで、
15 | ブラウザでのロード速度を向上させることができる事ができ、
16 | nodejs/npm 等がインストールされていないWebサーバ上へデプロイ（配置）することができます。
17 | (ただし、AMR-IF-UI自体は ROS/Robot Web Tools に依存していますので、
18 | 必要なパッケージは別途インストールする必要があります。)
19 |
20 | ### 1.1. ビルド
21 |
22 | AMR-IF-UI のプロジェクトルートディレクトリで ng build コマンドを入力します。
23 |
24 | ```shell
25 | $ ls
26 | LICENSE README.md browserslist img
27 | ngsw-config.json package-lock.json src tsconfig.json
28 | tslint.json LICENSE_HEADER angular.json karma.conf.js
29 | package.json tsconfig.app.json tsconfig.spec.json
30 | $ ng build
31 | Compiling @angular/cdk/keycodes : es2015 as esm2015
32 | Compiling @angular/animations : es2015 as esm2015
33 | :
34 | 中略
35 | :
36 | chunk {vendor} vendor-es5.js, vendor-es5.js.map (vendor) 7.42 MB [initial] [rendered]
37 | Date: 2021-09-23T14:35:03.634Z - Hash: 36137cafdae0110f8877 - Time: 101231ms
38 |
39 | ```
40 |
41 | dist/AMR-IF-UI というディレクトリが作成されており、
42 | その中にデプロイ可能なパッケージが生成されています。
43 |
44 | ```shell
45 | $ cd dist/AMR-IF-UI/
46 | $ ls
47 | assets main-es2015.js main-es5.js manifest.webmanifest
48 | :
49 | styles-es2015.js styles-es5.js vendor-es2015.js vendor-es5.js
50 | $
51 | ```
52 |
53 | このディレクトリ内のファイルをHTTPサーバの公開可能なディレクトリへコピーすることで、
54 | このプロジェクトを公開可能です。
55 |
56 | 仮に、いま "/var/www/data" が空であり、 apache の Document Root であると仮定すると
57 | ```shell
58 | $ sudo cp * /var/www/data/
59 | ```
60 |
61 | apacheが動作していれば、http://localhost にアクセスすると以下の画面が表示されます。
62 |
63 | - [http://localhost](http://localhost)
64 |
65 |
66 |
67 | ### 1.2. ベースURLの変更
68 |
69 | Webサーバのドキュメントルートで公開するのではなく、
70 | 場合によっては特定の階層下のURLで公開したいことがあります。
71 |
72 | その場合は、build するときに、--base-href= オプションを使用して
73 | 公開する階層のパスを指定します。
74 |
75 | ```shell
76 | $ cd
7 |
80 |
--------------------------------------------------------------------------------
/src/app/cmd-lists/cmd-lists.component.ts:
--------------------------------------------------------------------------------
1 | /*
2 | * Copyright (C) 2020 TOSHIBA Corporation.
3 | * SPDX-License-Identifier: BSD-2-Clause
4 | */
5 |
6 | import { Component, Renderer2 } from '@angular/core';
7 | import { CmdList } from './shared/cmd-list.model';
8 | import { CmdListService } from './shared/cmd-list.service';
9 | import { StorageComponent } from '../shared/storage/storage-component';
10 | import { Command } from '../commands/shared/command.model';
11 | import { CommandService } from '../commands/shared/command.service';
12 | import { StoreService } from '../shared/store/store.service';
13 |
14 | /**
15 | * コマンドリストのコンポーネントです。
16 | */
17 | @Component({
18 | selector: 'app-cmd-lists',
19 | templateUrl: './cmd-lists.component.html',
20 | styleUrls: ['./cmd-lists.component.css']
21 | })
22 | export class CmdListsComponent extends StorageComponent
8 |
79 |
9 |
10 |
16 | MyPose
17 |
18 |
19 | {{ option }}
20 |
21 |
22 |
23 |
24 |
30 | #000000FF
31 |
32 |
37 | {{ option.value }} [{{ option.name }})]
38 |
39 |
40 |
41 |
42 |
43 |
44 |
52 | x
53 |
54 |
55 |
63 | y
64 |
65 |
66 |
75 | yaw[degree]
76 |
77 |
78 |
68 |
69 | ### 1.2. Chaging base URL
70 |
71 | In some cases, you may want to publish at a URL below a specific
72 | directory instead of publishing at the document root of the web server.
73 |
74 | In that case, when building, use the "--base-href=option" to specify the
75 | path of the hierarchy to expose.
76 |
77 |
78 | ```shell
79 | $ cd
79 |
80 | The port-number can be changed with "--port" option.
81 |
82 | ```shell
83 | $ ng server --port 8080
84 | ```
85 |
86 | If you use under 1023 port, since root privilege is required, use sudo before the command.
87 |
--------------------------------------------------------------------------------
/src/app/viewer/shared/markers/base-marker.ts:
--------------------------------------------------------------------------------
1 | /*
2 | * Copyright (C) 2020 TOSHIBA Corporation.
3 | * SPDX-License-Identifier: BSD-2-Clause
4 | */
5 |
6 | import 'pixi.js';
7 | import { Subscription, Subject, Observable } from 'rxjs';
8 | import { BaseViewer } from '../base-viewer';
9 | import { Marker } from './marker';
10 |
11 | /**
12 | * ベースマーカーです。
13 | */
14 | export class BaseMarker implements Marker {
15 | /** ビューワー */
16 | viewer: BaseViewer;
17 |
18 | /** ルートコンテナ */
19 | root: PIXI.Container;
20 |
21 | /** サブスクリプション */
22 | subscription: Subscription;
23 |
24 | /** ビジブル */
25 | visible = true;
26 |
27 | /** ビジブルサブジェクト */
28 | visibleSubject: Subject
7 |
89 |
--------------------------------------------------------------------------------
/src/app/poses/shared/pose.service.ts:
--------------------------------------------------------------------------------
1 | /*
2 | * Copyright (C) 2020 TOSHIBA Corporation.
3 | * SPDX-License-Identifier: BSD-2-Clause
4 | */
5 |
6 | import * as ROSLIB from 'roslib';
7 | import { Injectable } from '@angular/core';
8 | import { Pose } from './pose.model';
9 | import { BaseStorage } from '../../shared/storage/base-storage';
10 | import { StoreService } from '../../shared/store/store.service';
11 |
12 | /**
13 | * ポーズサービスです。
14 | */
15 | @Injectable({
16 | providedIn: 'root'
17 | })
18 | export class PoseService extends BaseStorage
8 |
88 |
9 |
10 |
16 | MyRobot
17 |
18 |
19 | {{ option }}
20 |
21 |
22 |
23 |
24 |
30 | #000000FF
31 |
32 |
37 | {{ option.value }} [{{ option.name }})]
38 |
39 |
40 |
41 |
42 |
43 |
44 |
50 | trr1
51 |
52 |
53 | {{ option }}
54 |
55 |
56 |
57 |
58 |
64 | localhost
65 |
66 |
67 | {{ option }}
68 |
69 |
70 |
71 |
72 |
79 |
80 |
81 | {{ option }}
82 |
83 |
84 | 9090
85 |
86 |
87 |
7 |
10 |
11 |
12 |
146 |
147 |
148 |
149 |
--------------------------------------------------------------------------------
Commands
8 | 9 || Order | 14 |Id | 15 |Cmd | 16 |Params | 17 |OK_nextid | 18 |NG_nextid | 19 |Operations | 20 |
|---|---|---|---|---|---|---|
| 24 | {{ indexOf(row) }} 25 | | 26 | 27 |
28 | |
36 |
37 |
38 | |
55 |
56 |
57 |
61 |
103 | |
106 |
107 |
108 | |
116 |
117 |
118 | |
126 |
127 | 128 | 131 | 134 | 137 | 140 | 143 | | 144 |