愛招飛幫助手冊
目录

示例使用方式

# FastWeb 示例使用方式

  FastWeb的示例資料庫中自帶部分IsoBean，下面將介紹這些IsoBean的使用方法。

# 1. 圓形儀表

  圓形儀表的IsoBean編號為 IB_wb-vis-0011_radialgauge。呼叫的URL格式如下：

http://localhost:8888/?isobean=IB_wb-vis-0011_radialgauge&userkey={userid}&{paramname}={paramvalue}
1

  IsoBean有以下參數可以使用，IsoBean會為URL中未使用的參數設定預設值。

參數名稱 paramname 預設值 paramvalue 描述說明
title 儀表顯示的標題
units 儀表單位欄位顯示的內容
valueText 在數值框顯示的文字內容
maxValue 100 刻度顯示的最大值
ticksAngle 270 刻度在儀表盤區域顯示的角度範圍
colorMajorTicks #444 設定主刻度線的顏色序列
colorPlate $00FFFFFF 儀表盤的顏色
colorMinorTicks $00666666 設定次刻度線的顏色
colorNumbers $00444444 設定數值顯示區域的顏色
colorNeedle $008080F0 設定指針面的顏色
colorNeedleEnd $007AA0FF 設定指針面的漸變顏色
colorNeedleCircleInner $00E8E8E8 指針圓盤內圓顏色
colorNeedleCircleOuter $00F0F0F0 指針圓盤外圓顏色
needleCircleSize 10 指針圓盤的尺寸大小
animationRule cycle 動畫顯示的型別，示例選項有 bounce,debounce.cycle,decycle,line
needleType arrow 指針的型別，可選arrow,line
needleStart 20 指針頭的長度
needleEnd 85 指針尾部的長度
needleWidth 4 指針顯示的寬度
borderInnerWidth 3 外邊緣的內邊寬度
borderMiddleWidth 3 外邊緣的中間邊寬度
borderOuterWidth 3 外邊緣的外邊寬度
colorBorderOuter $00DDDDDD 外邊緣的顏色
colorBorderOuterEnd $00AAAAAA 外邊緣的漸變顏色
colorNeedleShadowDown ￥008F8FBC 指針的陰影區域顏色
animationTarget needle 動畫應用的對象needle 或者 plate
fontTitleSize 24 儀表盤標題文字的大小
colorTitle $00888888 儀表盤標題的顏色
animationDuration 500 動畫的持續時間
majorTicks [0, 20, 40, 60, 80, 100] 主刻度的數值顯示序列
minValue 0 刻度顯示的最小值
minorTicks 10 主刻度之間的次刻度分隔數量
startAngle 45 起始刻度的角度
demo 0 演示模式
highlights [ { from: 20, to: 60, color: "#eee" }, { from: 60, to: 80, color: "#ccc" }, { from: 80, to: 100, color: "#999" } ] 設定刻度區的顏色分割槽定義
valueBox true 是否顯示數值框
valueTextShadow true 是否顯示數值文字陰影
needleCircleOuter true 顯示指針外圓
borders true 是否顯示外邊緣
strokeTicks true 是否顯示刻度線的外圈
colorUnits $00888888 計量單位的顏色
tag 0 IsoBean會話標識編號

  通過WebSocket傳輸更新儀表數據的示例json如下：

{
	"username": "demo",
	"action": "callback",
	"tag": "0",
	"data": {
		"callbackcomponent": "wb-vis-0011_radialgauge",
		"callbackeventname": "update",
		"callbackparams": [
			{
				"paramname": "title",
				"paramvalue": "RadialGauge"
			},
			{
				"paramname": "value",
				"paramvalue": "12"
			},
			{
				"paramname": "colorPlate",
				"paramvalue": "$00FF00FF"
			}
		]
	}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

  可設定的參數項如下：

參數名稱 paramname 示例取值 paramvalue 說明
title RadialGauge 儀表顯示的標題
value 12 儀表顯示的數值
colorPlate $00FF00FF 設定儀表盤的顏色

# 2. 線形儀表

  線形儀表的IsoBean編號為 IB_wb-vis-0012_lineargauge。呼叫的URL格式如下：

http://localhost:8888/?isobean=IB_wb-vis-0012_lineargauge&userkey={userid}&{paramname}={paramvalue}
1

  IsoBean有以下參數可以使用，IsoBean會為URL中未使用的參數設定預設值。

參數名稱 paramname 預設值 paramvalue 描述說明
demo 0 演示模式
units 儀表單位欄位顯示的內容
title 儀表顯示的標題
minValue 0 刻度顯示的最小值
maxValue 100 刻度顯示的最大值
majorTicks [0, 20, 40, 60, 80, 100] 主刻度的數值顯示序列
minorTicks 10 主刻度之間的次刻度分隔數量
strokeTicks true 是否顯示刻度線的外圈
ticksWidth 10 刻度線的寬度
ticksWidthMinor 5 次刻度線的寬度
highlights [ { from: 20, to: 60, color: "#eee" }, { from: 60, to: 80, color: "#ccc" }, { from: 80, to: 100, color: "#999" } ] 設定刻度區的顏色分割槽定義
colorMajorTicks #444 設定主刻度線的顏色序列
colorMinorTicks $00666666 設定次刻度線的顏色
colorTitle $00888888 儀表盤標題的顏色
colorUnits $00888888 計量單位的顏色
colorNumbers $00444444 設定數值顯示區域的顏色
borderShadowWidth 3 邊緣陰影區域顯示的顏色
borders true 是否顯示儀表的邊緣
borderRadius 0 邊緣的圓弧半徑
needleType arrow 指針的型別，可選arrow,line
needleWidth 4 指針顯示的寬度
animationDuration 500 動畫的持續時間
animationRule cycle 動畫顯示的型別，示例選項有 bounce,debounce.cycle,decycle,line
colorNeedle $008080F0 設定指針面的顏色
colorBarProgress $00888888 進度條顯示的顏色
colorBar $00CCCCCC 進度條外圈顯示的顏色
barStrokeWidth 0 進度條外圈的描繪寬度
barWidth 20 進度條外圈的寬度
barBeginCircle 30 起始圓的直徑
colorPlate $00FFFFFF 儀表盤的顏色
colorPlateEnd $00FFFFFF 面板顯示的過渡顏色
tag 0 IsoBean會話標識編號

  通過WebSocket傳輸更新儀表數據的示例json如下：

{
	"username": "demo",
	"action": "callback",
	"tag": "0",
	"data": {
		"callbackcomponent": "wb-vis-0012_lineargauge",
		"callbackeventname": "update",
		"callbackparams": [
			{
				"paramname": "title",
				"paramvalue": "LinearGauge"
			},
			{
				"paramname": "value",
				"paramvalue": "12"
			},
			{
				"paramname": "colorPlate",
				"paramvalue": "$00FF00FF"
			}
		]
	}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

  可設定的參數項如下：

參數名稱 paramname 示例取值 paramvalue 說明
title LinearGauge 儀表顯示的標題
value 12 儀表顯示的數值
colorPlate $00FF00FF 設定儀表盤的顏色

# 3. LED燈

  LED燈的IsoBean編號為 IB_wb-vis-0014_meterled。呼叫的URL格式如下：

http://localhost:8888/?isobean=IB_wb-vis-0014_meterled&userkey={userid}&{paramname}={paramvalue}
1

  IsoBean有以下參數可以使用，IsoBean會為URL中未使用的參數設定預設值。

參數名稱 paramname 預設值 paramvalue 描述說明
Size one 燈的尺寸 one two three four
Color blue 燈的顏色 blue red green
tag 0 IsoBean識別編號
state false 燈是否開啟

  通過WebSocket傳輸更新儀表數據的示例json如下：

{
	"username": "demo",
	"action": "callback",
	"tag": "0",
	"data": {
		"callbackcomponent": "wb-vis-0014_meterled",
		"callbackeventname": "update",
		"callbackparams": [
			{
				"paramname": "state",
				"paramvalue": "true"
			},
			{
				"paramname": "Color",
				"paramvalue": "red"
			},
			{
				"paramname": "Size",
				"paramvalue": "One"
			}
		]
	}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

  可設定的參數項如下：

參數名稱 paramname 示例取值 paramvalue 說明
state true 燈是否開啟
Color red 設定燈的顏色
Size One 設定燈的尺寸

# 4. 蓄水罐

  蓄水罐的IsoBean編號為 IB_wb-vis-0019_watertank。呼叫的URL格式如下：

http://localhost:8888/?isobean=IB_wb-vis-0019_watertank&userkey={userid}&{paramname}={paramvalue}
1

  IsoBean有以下參數可以使用，IsoBean會為URL中未使用的參數設定預設值。

參數名稱 paramname 預設值 paramvalue 描述說明
color $000000FF 顏色
height 120 高度
level 51 百分比
width 30 寬度
tag 0 IsoBean識別編號

  通過WebSocket傳輸更新儀表數據的示例json如下：

{
	"username": "demo",
	"action": "callback",
	"tag": "0",
	"data": {
		"callbackcomponent": "wb-vis-0019_watertank",
		"callbackeventname": "update",
		"callbackparams": [
			{
				"paramname": "color",
				"paramvalue": "$000000FF"
			},
			{
				"paramname": "level",
				"paramvalue": "43"
			}
		]
	}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

  可設定的參數項如下：

參數名稱 paramname 示例取值 paramvalue 說明
color $000000FF 顏色
level 43 百分比

# 5. 環繞全景

  環繞全景的IsoBean編號為 IB_wb-vis-0022_3dangle。呼叫的URL格式如下：

http://localhost:8888/?isobean=IB_wb-vis-0022_3dangle&userkey={userid}&{paramname}={paramvalue}
1

  IsoBean有以下參數可以使用，IsoBean會為URL中未使用的參數設定預設值。

參數名稱 paramname 預設值 paramvalue 描述說明
image library/js/egjs-view360/assets/img/smartphone-panorama-picture.jpg 圖片地址
fov 65 預設的視角範圍
fovRange [30,110] 視角範圍的取值
pitch 0 預設的俯仰角度
pitchRange [-90,90] 俯仰角度範圍
yaw 0 橫向環繞的預設角度
yawRange [-180,180] 橫向環繞的角度範圍
projectionType panorama 投影型別
tag 0 IsoBean識別碼

  通過WebSocket傳輸更新儀表數據的示例json如下：

{
	"username": "demo",
	"action": "callback",
	"tag": "0",
	"data": {
		"callbackcomponent": "wb-vis-0022_3dangle",
		"callbackeventname": "update",
		"callbackparams": [
			{
				"paramname": "image",
				"paramvalue": "library/js/egjs-view360/assets/img/smartphone-panorama-picture.jpg"
			},
			{
				"paramname": "fov",
				"paramvalue": "65"
			},
			{
				"paramname": "fovRange",
				"paramvalue": "[30,110]"
			},
			{
				"paramname": "pitch",
				"paramvalue": "0"
			},
			{
				"paramname": "pitchRange",
				"paramvalue": "[-90,90]"
			},
			{
				"paramname": "yaw",
				"paramvalue": "0"
			},
			{
				"paramname": "yawRange",
				"paramvalue": "[-180,180]"
			},
			{
				"paramname": "projectionType",
				"paramvalue": "panorama"
			}
		]
	}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

  可設定的參數項如下：

參數名稱 paramname 示例取值 paramvalue 描述說明
image library/js/egjs-view360/assets/img/smartphone-panorama-picture.jpg 圖片地址
fov 65 預設的視角範圍
fovRange [30,110] 視角範圍的取值
pitch 0 預設的俯仰角度
pitchRange [-90,90] 俯仰角度範圍
yaw 0 橫向環繞的預設角度
yawRange [-180,180] 橫向環繞的角度範圍
projectionType panorama 投影型別

# 6. 3D展示

  3D展示的IsoBean編號為 IB_wb-vis-0023_3dview。呼叫的URL格式如下：

http://localhost:8888/?isobean=IB_wb-vis-0023_3dview&userkey={userid}&{paramname}={paramvalue}
1

  IsoBean有以下參數可以使用，IsoBean會為URL中未使用的參數設定預設值。

參數名稱 paramname 預設值 paramvalue 描述說明
data_amount 36 圖片序列的數量
data_filename chair_{index}.jpg 圖片序列的名稱/命名規則
data_magnifier 3 圖片的放大倍數
button_next false 是否顯示後繼按鈕
button_prev false 是否顯示前驅按鈕
data_autoplay false 是否使用自動播放
data_autoplay_reverse false 是否反向自動播放
data_folder library/js/js-cloudimage-360-view/demo/chair/ 圖片序列的地址目錄
tag 0 IsoBean識別編號

  通過WebSocket傳輸更新儀表數據的示例json如下：

{
	"username": "demo",
	"action": "callback",
	"tag": "0",
	"data": {
		"callbackcomponent": "wb-vis-0023_3dview",
		"callbackeventname": "update",
		"callbackparams": [
			{
				"paramname": "data_folder",
				"paramvalue": "library/js/js-cloudimage-360-view/demo/chair/"
			},
			{
				"paramname": "data_filename",
				"paramvalue": "chair_{index}.jpg"
			},
			{
				"paramname": "data_amount",
				"paramvalue": "36"
			},
			{
				"paramname": "data_magnifier",
				"paramvalue": "3"
			}
		]
	}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

  可設定的參數項如下：

參數名稱 paramname 示例取值 paramvalue 描述說明
data_folder library/js/js-cloudimage-360-view/demo/chair/ 圖片序列的地址目錄
data_filename chair_{index}.jpg 圖片序列的名稱/命名規則
data_amount 36 圖片序列的數量
data_magnifier 3 圖片的放大倍數

# 7. 3D視訊

  3D視訊的IsoBean編號為 IB_wb-vis-0024_3dvideo。呼叫的URL格式如下：

http://localhost:8888/?isobean=IB_wb-vis-0024_3dvideo&userkey={userid}&{paramname}={paramvalue}
1

  IsoBean有以下參數可以使用，IsoBean會為URL中未使用的參數設定預設值。

參數名稱 paramname 預設值 paramvalue 描述說明
image library/js/egjs-view360/assets/img/smartphone-panorama-picture.jpg 圖片地址
fov 65 預設的視角範圍
fovRange [30,110] 視角範圍的取值
pitch 0 預設的俯仰角度
pitchRange [-90,90] 俯仰角度範圍
yaw 0 橫向環繞的預設角度
yawRange [-180,180] 橫向環繞的角度範圍
projectionType panorama 投影型別
tag 0 IsoBean識別碼

  通過WebSocket傳輸更新儀表數據的示例json如下：

{
	"username": "demo",
	"action": "callback",
	"tag": "0",
	"data": {
		"callbackcomponent": "wb-vis-0024_3dvideo",
		"callbackeventname": "update",
		"callbackparams": [
			{
				"paramname": "video",
				"paramvalue": "<source src=\"library/js/egjs-view360/examples/img/seven.mp4\" type=\"video/mp4\">"
			},
			{
				"paramname": "fov",
				"paramvalue": "65"
			},
			{
				"paramname": "fovRange",
				"paramvalue": "[30,110]"
			},
			{
				"paramname": "pitch",
				"paramvalue": "0"
			},
			{
				"paramname": "pitchRange",
				"paramvalue": "[-90,90]"
			},
			{
				"paramname": "yaw",
				"paramvalue": "0"
			},
			{
				"paramname": "yawRange",
				"paramvalue": "[-180,180]"
			},
			{
				"paramname": "projectionType",
				"paramvalue": "panorama"
			}
		]
	}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

  可設定的參數項如下：

參數名稱 paramname 示例取值 paramvalue 描述說明
video <source src="library/js/egjs-view360/examples/img/seven.mp4" type="video/mp4"> 視訊地址
fov 65 預設的視角範圍
fovRange [30,110] 視角範圍的取值
pitch 0 預設的俯仰角度
pitchRange [-90,90] 俯仰角度範圍
yaw 0 橫向環繞的預設角度
yawRange [-180,180] 橫向環繞的角度範圍
projectionType panorama 投影型別

# 8. 甘特圖展示

  甘特圖展示的IsoBean編號為 IB_wb-vis-0030_ganttchart。呼叫的URL格式如下：

http://localhost:8888/?isobean=IB_wb-vis-0030_ganttchart&userkey={userid}&{paramname}={paramvalue}
1

  IsoBean有以下參數可以使用，IsoBean會為URL中未使用的參數設定預設值。

參數名稱 paramname 預設值 paramvalue 描述說明
lang cn 使用者使用的預設語言
tag 0 IsoBean識別編號

  通過WebSocket傳輸更新儀表數據的示例json如下：

{
	"username": "demo",
	"action": "callback",
	"tag": "0",
	"data": {
		"callbackcomponent": "wb-vis-0030_ganttchart",
		"callbackeventname": "update",
		"callbackparams": [
			{
				"paramname": "type",
				"paramvalue": "add"
			},
			{
				"paramname": "pID",
				"paramvalue": "9"
			},
			{
				"paramname": "pName",
				"paramvalue": "啟動大會"
			},
			{
				"paramname": "pStart",
				"paramvalue": "2022-01-10 00:15:00.000"
			},
			{
				"paramname": "pEnd",
				"paramvalue": "2022-01-10 23:59:59.000"
			},
			{
				"paramname": "pClass",
				"paramvalue": "ggroupblack"
			},
			{
				"paramname": "pLink",
				"paramvalue": ""
			},
			{
				"paramname": "pMile",
				"paramvalue": "1"
			},
			{
				"paramname": "pRes",
				"paramvalue": "Dean"
			},
			{
				"paramname": "pComp",
				"paramvalue": "20"
			},
			{
				"paramname": "pGroup",
				"paramvalue": "1"
			},
			{
				"paramname": "pParent",
				"paramvalue": ""
			},
			{
				"paramname": "pOpen",
				"paramvalue": "1"
			},
			{
				"paramname": "pDepend",
				"paramvalue": ""
			},
			{
				"paramname": "pCaption",
				"paramvalue": ""
			},
			{
				"paramname": "pNotes",
				"paramvalue": ""
			}
		]
	}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75

  可設定的參數項如下：

參數名稱 paramname 示例取值 paramvalue 描述說明
type add 專案型別 add(新增) remove(移除單個) clear(移除所有)
pID 9 專案ID編號
pName 啟動大會 專案名稱
pStart 2022-01-10 00:15:00.000 起始時間
pEnd 2022-01-10 23:59:59.000 結束時間
pClass ggroupblack 任務的標籤樣式 』ggroupblack』,』gtaskblue』,』gtaskgreen』
pLink 引用的外部鏈接
pMile 1 是否為里程碑事件，1表示為是，0表示為否
pRes Debian 資源名稱
pComp 20 完成的百分比
pGroup 1 是否是組任務 0 - 正常任務，1 - 標準組任務，2 - 組合任務
pParent 已存在的任務的pID，這表示此任務成為已識別任務的子任務。 數字頂級任務應將pParent設定為0
pOpen 1 在繪製圖表時是否打開標準組任務。 必須為所有專案設定值，但只能由標準組任務使用。 數字，1 =展開開，0 =收起
pDepend 逗號分隔這個任務依賴的id列表。 將從每個列出的任務中畫一條箭頭到該項任務;每個id可以選擇後跟一個依賴關係型別後綴。 有效值是:FS - 完成到開始（如果省略後綴，則為預設值）;SF - 開始到完成;SS』 - 開始啟動;FF - 完成到完成； 如果存在，則後綴必須直接新增到id中。123SS
pCaption 如果 CaptionType 設定為 Caption，將在工作列後面會新增標題
pNotes 將在此任務的工具提示中顯示詳細的任務資訊

# 9. 時間線

  時間線的IsoBean編號為 (IB_wb-vis-0032_timeline。呼叫的URL格式如下：

http://localhost:8888/?isobean=IB_wb-vis-0032_timeline&userkey={userid}&{paramname}={paramvalue}
1

  IsoBean有以下參數可以使用，IsoBean會為URL中未使用的參數設定預設值。

參數名稱 paramname 預設值 paramvalue 描述說明
tag 0 IsoBean識別編號

  通過WebSocket傳輸更新儀表數據的示例json如下：

{
	"username": "admin",
	"action": "callback",
	"tag": "0",
	"data": {
		"callbackcomponent": "wb-vis-0032_timeline",
		"callbackeventname": "update",
		"callbackparams": [
			{
				"paramname": "type",
				"paramvalue": "adddd"
			},
			{
				"paramname": "time",
				"paramvalue": "2009-09-03"
			},
			{
				"paramname": "header",
				"paramvalue": "your header"
			},
			{
				"paramname": "img",
				"paramvalue": "/path/of/img"
			},
			{
				"paramname": "descr",
				"paramvalue": "your description"
			},
			{
				"paramname": "dir",
				"paramvalue": "left"
			}
		]
	}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

  可設定的參數項如下：

參數名稱 paramname 示例取值 paramvalue 描述說明
type clear 型別
clear 清除時間線
addd 新增一個時間線項
addd_begin 新增跑馬燈時間線項
addrow 新增跑馬燈時間線明細項
adddd_end 跑馬燈時間線結束項
adddt 時間節點
time 2009-09-03 時間線時間專案
header 標題 時間線專案標題
img /path/of/img 時間線引用圖片地址
descr your description 時間線描述資訊
dir left 時間線專案的位置朝向
採購訂單編輯
系統函式

← 系統函式→

Copyright © 2021-2025 愛招飛IsoFace | ALL Rights Reserved