opencv学习培训梯度方向算不上很平整

锲子：

opencv学习培训梯度方向算不上很平整，在其中一个很重要的原因是因为cv复杂性，cv中函数公式其特殊的应用场景，对于不同函数公式应用参数值不一样，结论会相差很大。cv尽管带来了迅速gui插口，还可以用cvui立即3D渲染控制到页面上，简单的任务基本上应对。但是对一些繁杂优化算法，除开需要大量方式、主要参数调整以外，还得有数据记录剖析比照等一系列数据分析报告。前一段时间在教学Blender节点系统软件，参数调节眼见为实十分形象化，工作效能大幅提高。使用一段时间后觉得还可以在opencv中搞些姿势，用最明显的方式来开发opencv作用。

型号选择

但连接点系统软件型号选择上，犹豫再三，imgui-node-editor是第一选择，因为他依靠少，混合开发性非常好，3D渲染中显示上并没有太大的缺点，但没连接点计算逻辑涉及到，也就是说一个人去完成连接点计算逻辑，欠缺比较好的应用实例，这就是我最终放弃imgui-node-editor的一个主要缘故。

Litegraph.js 都是基于javascript的，互交以canvas为核心的，原生态连接点用来可就拿。在这个基础上，能够实现绝大多数页面互交。尽管有关litegraph.js研发的材料特别少，可是litegraph.js本身就是一个很好的学习案例，可以参考一下如shader连接点、MIDI管理等控制模块，webglstudio.js-master也很值得参照。此外litegraph.js都是适用连接点运算连接点扩展作用。自定连接点写起来非常清晰，我后面要花一点时间来讲解。

js和python插口：EEL是一个选择项，在python系统中标明下插口，既能根据js来浏览该插口以此实行python函数，一样大道理，还可以在Web中标明函数接口，让python来启用该插口开展页面更新。EEL能够作为一个服务器后台程序执行还可以一个Chrome独立程序立即运作。

图象插口：基本目标如标值、字符串数组等可以方便快捷的传送，图象略微繁琐点，传送需要使用base64文件格式做为正中间文件格式往来于每个结点中间，python插口在接到base64格式主要参数后，变换变成np的array文件格式后即可开始后续处理，测算完成后再用base64文件格式回到js。

举个简易事例：

基本方式

例如必须对图象做一个清除孤立点工作，所需要的python编码如下所示，编码必须对图象做两步实际操作，开启初始图象，一次dilate，一次Canny，一次connectedComponentsWithStats，最终依据阀值开展孤立点涂颜色或标明等，最终导出图象，编码如下所示

import cv2
import numpy as np
filename="image/test.jpg"
img = cv2.imread(filename,0)
kernel = np.ones((3,3),np.uint8)
dilate = cv2.dilate(img,kernel,iterations = 1)
canny1=cv2.Canny(dilate,100,200)
_, labels, stats, centroids = cv2.connectedComponentsWithStats(canny1)
for istat in stats:
    if istat[4]<120:
        if istat[3]>istat[4]:
            r=istat[3]
        else:r=istat[4]
        cv2.rectangle(canny1,tuple(istat[0:2]),tuple(istat[0:2] istat[2:4]) , 0,thickness=-1) 
cv2.imwrite('canny1.jpg',canny1)

我们自己的方式

根据连接点达到的，开发设计的页面如下所示

一个典型性节点事例，旋转图片，2个插口，有两种控制

第一个参数控制图像旋转的视角，用拖拽操纵角度尺寸 第二个参数控制图象是否要保存裁切（图象初始尺寸可以改变）

连接点作用区划不一定十分科学，因此按色调、输出、转换、算法来划分。已实现的Opencv连接点如下所示，

色调

键入

图像变换

图象算法

标明

集合操作

Litegraph连接点接口实现

要实现对opencv图象功能性的封装形式，除了需要开展连接点复位外，还自定连接点包含以下具体内容： 键入/导出连接点、特性、连接点构件（用以实际参数操纵或其它） 加上输入节点，第一个主要参数是连接点名，第二个主要参数是节点类型，类型不同不可以联接

输出

//复位环节
this.addInput("A","number");
//加上输入节点，启用方法同输入节点
this.addOutput("A B","number");
//次之必须完成liteGraph Node好多个关键插口，另外还要申请注册自身节点

连接点实行

//OnExecute环节
//得到第一个输入节点内容
this.getInputData(0);
//导出值到第一个导出连接点
this.setOutputData(0,value);
//得到数据信息
A = getInputData(0)
//做些什么
var B = do_something(A)
//回到数据信息
setOutputData(0,B)

连接点特性

特性非常简单，是可以被实例化的结构自变量，构造并不难

    this.properties = {
        kernel_size: 5,
        iterate_times: 1,
        kernel_type:"MORPH_RECT",
   };

实行

Litegraph.js 会依据卡扣结构，全自动计算节点优先，确定什么连接点先测算，什么连接点后测算。这儿只需要将每个节点的”每日任务”分配好，不劳而获就可以，看起来很简易。 OnExecute接口在graph.runStep() 或graph.run() 实行的时候会被启用，runStep()是做好特定比较有限总数，run乃是持续进行测算直至接收到stop()数据信号，在计算负荷比较重的情景，最好使用runStep()取代run()

连接点高端具体内容

连接点构件

包含最基本的部件： slider 、text、button都是一致的

text输入情况下会出现一个文本框，在触摸屏的生活环境并没有实验过，这一困惑我好久好久，后来才发现是css引入出现了问题，eel调节js还是得用chrome的日志去解决，这跟js调节是一致的，

slider 导轨

combo 类似下拉列表

toggle 类似checkbox

缺陷：

并没有color picker ，slider只支持浮点数，但不是问题，针对自定连接点制图，应用此插口开展二次开发，当连接点坍塌的现象不用实行，静态数据为主导节点能够制作到image目标中降低2d重绘，环境制作可以参考一下如下所示编码

node.onDrawBackground = function（）{
  if(this.flags.collapsed)
    return;
  ctx.save();
  ctx.fillColor = "black";
  ctx.fillRect(0,0,10,this.size[1]);
  ctx.restore();
  }

相似的js难题也有许多，

例如that和this问题，js老手都知道的

也有例如 EEL传参问题

以前是这么想的,结论一直取不上，忙活了接近一个礼拜

var B = eel.color_filter(A,low,upper);
this.setOutputData(0,B);

之后仅有阅读文章eel的源代码，了解eel返回是一个promise目标，因为之前做js异步编程的好机会特别少，没真真正正学懂所造成的

var B = eel.color_filter(A,low,upper);

B().then(
(data)=>{
this.setOutputData(0,data);
},
(err)=>{this.setOutputData(0,"data:image/gif;base64,R0lGODlhAQABAAAAACwAAAAAAQABAAA=");}
)

这三个插口仅仅在需要解决客户互交的画面应用，例如制图、标识等，可以参考一下源代码CurveEditor一部分去学习。

onMouseDown（）
onMouseMove（）
onMouseUp（）

效果展示

gitee好像无法晒出了，github编码详细地址如下所示 github.com/touchmaker/…

eel_run.py     <-- Python scripts
switch.py
web/           <-- Web folder
  test01.jpg
  test02.jpg
  test03.jpg
  main.html
  css/
    menu.css
  js/
    litegraph.core.js
    comm.js
    curvenode.js
    nodecv.js
    menu.js

文章内容说到这里，感觉屏幕前自己非常磨磨蹭蹭

新项目从开始到现在接连不断进行了2个月上下，自己写的编码绝未超过2000行，可用这般精减的代码编写该要求，自己就觉得难以置信，

我就做代码的搬运工人，当然也没必要孤高自许，略微重新编辑改投github，期待感兴趣的朋友一起进入，日常维护issue难题，明确提出念头

许多同学现今还在磨刀霍霍提前准备换工作，无论是干前端的或是后台管理小猴子，能恪守在一线的程序猿也越来越少