数字旗手

电气化、自动化、数字化、智能化、智慧化

0%

简介 前面讲了ImJoy主站的入口文件main.js,这一篇解析一下该主站的ImJoy组件,它也是整个app的“门面担当”,起到了统筹整个网站的作用。 为了便于分析,将很多高阶的暂时用不到的组件(比如工具栏、窗口管理、文件上传、连接后台Engine等)都删掉,留下最基本的能运行最小化imjoy插件的功能,截图如下: 这样便于分析整个组件的宏观结构和运行逻辑。 下面是对于该极小化组件的逐行代码分析。 template代码 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
Read more »

简介 前面讲了ImJoy的core库和rpc库作为函数库如何被集成调用,而基于这两个核心库有一个能开箱即用的完整网站,即ImJoy主站,使用它就可以无需了解上面的技术细节,直接加载各种函数插件即可(但也因为这样,你无法更改网站样貌,如果没有定制开发的需求,则直接使用该网站即可)。 从该文章开始,将尝试对ImJoy主站进行详细分析,看官方是怎样应用ImJoy的core和rpc库的。 代码结构 ImJoy主站是用vue.js前端框架写的,整个目录结构由vue脚手架vue-cli 4生成,所以首先要分析清楚vue脚手架生成的代码结构是怎样的,可以参考这篇教程 截取其中的代码分析图: 理清楚代
Read more »

简介 ImJoy设计的初衷就包括可以被集成使用。这意味着它可以根据需求以多种方式集成到一个项目中。 这里的“集成”有两个意思: (1)将ImJoy的核心core库集成在自己的网站或web应用中,从而可以调用ImJoy生态中的各种插件; (2)将ImJoy的运行时rpc库集成到自己的web应用中,从而将自己的web应用转换为ImJoy的一个插件,即被别人可调用和访问。 安装 集成ImJoy(无论是imjoy-core还是imjoy-rpc)主要有三种方式: (1)在页面上以 CDN 包的形式导入。 (2)下载 JavaScript 文件并自行托管。 (3)使用 npm 安装它。 下面详细说明。
Read more »

上一篇着重介绍了如何使用JavaScript库来编写插件的前端UI和后端计算逻辑,这一节会介绍如何将计算后端切换为python语言,即计算逻辑完全使用python编写,充分利用python庞大的计算生态。 使用python开发计算插件有两种: (1)web-python:即python运行在浏览器中,其原理实际是应用了Pyodide这一工具,将python代码编译在浏览器中,但其缺点也很明显,首先是加载速度非常慢,因为第一次运行时需要将所用的python库都下载下来;然后其也无法应用整个python深度学习生态。 (2)native-python:该类型插件会链接一个本地的jupyter插件引
Read more »

参考文献 Build web-based plugins for image analysis 简介 在本文中,将制作一个基于Web网页的用于图像分析的ImJoy交互式插件。 使用 HTML/CSS/JS 制作GUI插件 如下插件实现了一个上传并显示图像的功能,具体函数说明详见下面代码的注释: 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
Read more »

参考文献 ImJoy API 简介 ImJoy的每个插件都在自己的类似沙箱的容器环境中运行(如JavaScript插件的Web Worker 或iframe、Python插件的进程process)。这样可以避免其他插件的干扰并使ImJoy应用程序更加安全。 插件与ImJoy主程序或插件与插件之间的交互是通过一组API函数(ImJoy API)进行的。所有插件都可以访问到一个名为api的特殊对象。在Javascript中,api 是一个可以直接使用的全局对象。在Python中,可以通过调用 from imjoy import api 来导入它。有了这个对象,插件可以做很多事情,比如显示一个对话
Read more »

参考文献 Developing Plugins for ImJoy 上一篇文章中介绍了插件的文件格式,这一篇介绍如何进行实际的插件开发。 指定依赖 对于一个插件,其往往不是单一的功能实现,往往需要其他软件库的配合。 插件的依赖在其文件的config 块的requirements字段中进行指定。 根据不同的插件类型,可以指定不一样的依赖。 Web Worker 和 Window 插件 对于这两类插件,可以通过一个JavaScript库的url数组来指定依赖。这些库会被importScripts方法导入。 例如,要指定最新的 plotly.js 库,可以这样写: 1 "requireme
Read more »

参考文献 Developing Plugins for ImJoy 概览 ImJoy插件文件本质上是包括一系列自定义块的html文件(受.vue 格式启发)。 如下是一个插件文件的典型组成。需要注意的是,这些块的顺序无关紧要,因此可以将块打乱。 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 ** 该代码块以Json格式定义插件的属性** 《script lang="javascript"> ** 该代码块以JavaScript 或 Pyth
Read more »

参考文献 I2K Workshop Tutorial Developing Plugins for ImJoy 概述 开发ImJoy插件既简单又快速,可直接使用运行在web上的内置的代码编辑器,而不需要额外的 IDE 或编译器。 ImJoy 插件系统的主要功能有: (1)支持 Python 和 JavaScript * JavaScript 插件与安全沙箱隔离 * Python 插件在自己的进程中运行 * 使用 async/await 语法支持并发 API 调用 * 支持 Python 的虚拟环境和 pip 包 * 支持托管在 GitHub 或 CDN 上的 JavaScript
Read more »

这一篇主要介绍ImJoy中的核心概念。 参考文献: I2K Workshop Tutorial ImJoy插件 ImJoy 提供了一个灵活的框架来开发具有不同类型的 Web 或 Python 编程语言的插件。 有四种类型的插件,其可用于不同的目的: (1)Web 插件直接在浏览器中运行,支持如下三种类型: * Window (HTML/CSS/JS)(type=window) 插件,用于使用 HTML5/CSS 和 JavaScript 构建丰富的交互式用户界面; * Web Worker (JS)(type=web-worker) 插件,用于使用 JavaScript 或 WebA
Read more »