图像识别

# FastWeb 图像识别

图像识别的 IsoBean 参照图像识别-可视化控件进行改进。可在调用URL的同时传入参数 imgpath，用于加载要输入的图片。

# 1. 设计Bean模块

点击 [云服务工具] - [Bean模块(Web)]，打开Bean模块管理界面，点击 [添加] 按钮，创建一个Bean模块，设置示例如下。点击 [保存] 按钮。

选择刚才创建的Bean，点击 [Bean设计] 按钮，进入Bean设计的主界面，设计的界面样式如下。界面样式与脚本设计部分的配置参考图像识别-可视化控件。

Bean模块在原有基础上修改的部分如下。

新增UgWebRunFrameOnAjaxEvent事件，说明如下。

//JScript
//更新识别的图片
//{
//  "username": "demo",    //运行IsoBean的用户，修改为实际运行的用户
//  "action": "callback",   
//  "tag": "0",   
//  "data": {
//    "callbackcomponent": "wb-vis-0009_picture_reco",    
//    "callbackeventname": "update",  
//    "callbackparams": [              
//      {
//        "paramname": "imgpath",
//        "paramvalue": "library/js/ml5-library/assets/cat.jpg"  //设置识别的图片
//      }
//    ]
//  }
//}
function UgWebRunFrameOnAjaxEvent(sender,eventname,params)
{
  if (SameText(eventname,"update"))
  {
    UgObjectDetect01.Image = Params.Values["imgpath"];
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

//PasScript
//更新识别的图片
//{
//  "username": "demo",    //运行IsoBean的用户，修改为实际运行的用户
//  "action": "callback",   
//  "tag": "0",   
//  "data": {
//    "callbackcomponent": "wb-vis-0009_picture_reco",    
//    "callbackeventname": "update",  
//    "callbackparams": [              
//      {
//        "paramname": "imgpath",
//        "paramvalue": "library/js/ml5-library/assets/cat.jpg"  //设置识别的图片
//      }
//    ]
//  }
//}
procedure UgWebRunFrameOnAjaxEvent(Sender: TObject;Eventname:String;params:TStringList);
begin
  if SameText(eventname,'update') then
  begin
    UgObjectDetect01.Image := Params.Values['imgpath'];
  end;
end;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

// Make sure to add code blocks to your code group

# 2. 设计IsoBean模块

点击 [云服务工具] - [IsoBean模块管理]，打开IsoBean模块管理界面，点击 [添加] 按钮，按照以下提示创建一个IsoBean模块。点击 [保存] 按钮。

创建完成后，选择创建的IsoBean，点击 [API设计]，创建的API请按照以下方式进行设置。

//JScript
function RestAPI()
{
  var url,imgpath,tag;
  imgpath = iif(URLParams.Values["imgpath"]=="",APIParams.Values["imgpath"],URLParams.Values["imgpath"]);
  tag = iif(URLParams.Values["tag"]=="",APIParams.Values["tag"],URLParams.Values["tag"]);
  url = "/?bean="+Var_Bean + "&userkey=" + Var_UserKey + "&language=" + Var_Language + "&tag=" + tag + "&imgpath=" + Httpencode(imgpath); 
  
  Result = " <html>"
  + "   <body style=\"margin: 0px;height: 100%;width: 100%;\">"
  + "     <iframe width=\"100%\" height=\"100%\" frameborder=\"no\" border=\"0\" marginwidth=\"0px\" marginheight=\"0px\" scrolling=\"no\" allowtransparency=\"yes\" src=\"" + url + "\"" 
  + "             width=\"100%\""
  + "             height=\"100%\""
  + "     >"
  + "     </iframe>"
  + "   </body>"
  + " </html>";
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

//PasScript
function RestAPI:String;
var
  url: String;
  imgpath: String;
  tag: String;
begin
  imgpath := iif(URLParams.Values['imgpath']='',APIParams.Values['imgpath'],URLParams.Values['imgpath']);
  tag := iif(URLParams.Values['tag']='',APIParams.Values['tag'],URLParams.Values['tag']);
  url := '/?bean='+Var_Bean + '&userkey=' + Var_UserKey + '&language=' + Var_Language + '&tag=' + tag + '&imgpath' + Httpencode(imgpath); 
  Result := ' <html>'
  + '   <body style="margin: 0px;height: 100%;width: 100%;">'
  + '     <iframe width="100%" height="100%" frameborder="no" border="0" marginwidth="0px" marginheight="0px" scrolling="no" allowtransparency=\"yes\" src="' + url + '"' 
  + '             width="100%"'
  + '             height="100%"'
  + '     >'
  + '     </iframe>'
  + '   </body>'
  + ' </html>';
end;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

// Make sure to add code blocks to your code group

# 3. 发布IsoBean

保存后，返回列表界面，选择刚才创建的IsoBean模块，点击 [IsoBean发布]，打开 IsoBean 发布界面。

选择要发布的用户(admin)，点击 [IsoBean 选择...]，从打开的IsoBean列表中选择IsoBean模块，双击导入至发布列表中，点击 [保存] 按钮，然后点击 [确定] 按钮关闭发布界面。

重新返回API设计界面，点击 [测试] 图标按钮，打开界面。点击 [Send] 按钮查看运行的结果。如果返回的结果中包含数据信息，则IsoBean创建成功。

按照本节开头的方式将IsoBean发布给其他用户，之后，可使用 http://localhost:8888/?isobean=IB_wb-vis-0009_picture_reco&userkey={user_guid} (opens new window) 打开页面。{user_guid} 为发布用户的ID，请注意，{query} 中的内容需经过 URL编码 (opens new window) 后才可作为参数值使用。

当此 IsoBean 处于运行状态时，可使用 WebSocket 发送以下消息模板以更新查询信息。

{
  "username": "admin",    //运行IsoBean的用户，修改为实际运行的用户
  "action": "callback",    
  "tag":"0",  
  "data": {
    "callbackcomponent": "wb-vis-0009_picture_reco",    
    "callbackeventname": "update",  
    "callbackparams": [              
      {
        "paramname": "imgpath",
        "paramvalue": "library/js/ml5-library/assets/cat.jpg"  //要识别的图片所在的位置
      }
    ]
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

在FastWeb中使用以下示例来更新。

//JScript
{
  var l;
  l = new TStringlist();
  //修改为需要识别的图片的位置
  l.Values["imgpath"] = "library/js/ml5-library/assets/cat.jpg";
  //demo 处修改为实际运行的用户名称
  UGMM.SendWsMsg("demo","callback","wb-vis-0009_picture_reco","0","updatequery",l);
  l.Free;
}

1
2
3
4
5
6
7
8
9
10

//PasScript
var
  l: TStringList;
begin
  l := TStringList.Create();
  //修改为需要识别的图片的位置
  l.Values['imgpath'] := 'library/js/ml5-library/assets/cat.jpg';
  //demo 处修改为实际运行的用户名称
  UGMM.SendWsMsg('demo','callback','IB_wb-vis-0009_picture_reco','0','updatequery',l);
  l.Free;
end;

1
2
3
4
5
6
7
8
9
10
11

// Make sure to add code blocks to your code group

← 环绕风景展示网络文档浏览→