示例使用方式
# 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}
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"
}
]
}
}
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}
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"
}
]
}
}
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}
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"
}
]
}
}
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}
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"
}
]
}
}
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}
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"
}
]
}
}
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}
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"
}
]
}
}
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}
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"
}
]
}
}
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}
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": ""
}
]
}
}
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}
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"
}
]
}
}
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 | 时间线项目的位置朝向 |