Clever Geek Handbook

使用OberonJS转换器创建交互式模型编辑器的经验

创建教育模型很有趣。很高兴看到一个人通过与您的程序进行交互来了解自然科学或算法中的一些复杂原理。我是专业的生物物理学家，因此通常在方程和数学方面都没有问题，但是在创建可视交互模型的工具方面我走了很长一段路。我开始在Matlab中建立模型，这里有出色的方程式求解库，可以轻松构建图形。缺点是结果难以共享，并且很难做超出开发人员范围的事情。需要更多自由。我还尝试使用Flash技术，那些年该技术仍然与Web相关，而ActionScript语言使制作繁忙的交互式模型成为可能。但是，ActionScript编程语言本身并不符合我对和谐与秩序的严格要求，然后新的HTML5标准将Flash技术完全从浏览器中挤出来……那时我已经在环境中积极地对模型进行编程了BlackBox组件生成器。这是瑞士的开源开发，与基于ETHOS操作系统开发的IDE操作系统完全隔绝。...图形库对我来说还不错，编译器的性能以及计算代码的执行速度也都很好。最重要的是，Oberon语言理想地基于我的想法，即编程语言在领域专家的头上应该花多少钱。我不需要任何语言上的怪癖，很高兴能在舒适的地方思考任务。但是，在21世纪，很难分发已编译的应用程序来向学生展示一些东西，或者只是在Internet上发布模型。毕竟，人们只是害怕运行第三方应用程序，而防病毒软件通常会带来误报。用于科学和工业的桌面应用程序非常出色，而用于教育人们的交互式模型则不是。

2014年，我们与Informatics-21项目一起在莫斯科举行了一次IT会议。来自俄罗斯乃至白俄罗斯的Oberon系统专家来到了那里。然后我就不太懒惰拿旧相机，并记录了大部分报告。从Alexei Veselovsky的演讲中，我了解了OberonJS转换器。该报告的论点很简单：JavaScript是一种非常不稳定的物质，因此开发一些重大内容令人头疼，但是如果JavaScript是与Oberon一起设计的，则将在调试方面节省大量资金。奥伯龙乐高头脑风暴大片和C的无限自由之间的某种中间联系。通常，您可以在上面做任何事情，同时“脚踩自己的脚”的可能性很小。伙计们然后进行了演示以演示其工作原理。来自CodeMirror窗口的代码直接在客户端浏览器中从Oberon转换为JavaScript并执行。如果Aleksey没有演示如何将其与ProcessingJS框架结合使用，这不会引起我的注意！

严格的简单语言+ HTML5中的高级图形=教育的理想公式，因此用户不仅可以看到交互式图形模型，而且可以轻松理解其核心算法。我喜欢引用谢尔盖·扎尔马诺维奇·斯维尔德洛夫的话：

« — . , , . , - - . , ».

« !» :

MODULE HelloWorld;
IMPORT Log;
BEGIN
 Log.String(" !"); Log.Ln
END HelloWorld.

, .

OberonJS, , , . , , CodeMirror , . , , . . MVP, .

: Log , Math , Strings , Draw , Forms Plot . , .

ProcessingJS, , p5.js. JavaScript JS.do, — . , REAL INTEGER FLOOR FLT. , : , . , , :

MODULE Draw;
IMPORT JS;
...
PROCEDURE Line*(x0, y0, x1, y1: REAL);
BEGIN JS.do("Instance.line(x0,y0,x1,y1)")
END Line;

PROCEDURE LineInt*(x0, y0, x1, y1: INTEGER);
BEGIN JS.do("Instance.line(x0+0.5,y0+0.5,x1+0.5,y1+0.5);")
END LineInt;
...
END Draw.

* . Instance Draw.Start, , p5.js, InnerDraw .

MODULE Draw;

TYPE
 ProcessingType* = POINTER TO RECORD END;

VAR
 Instance: ProcessingType; focus, started: BOOLEAN;

...

PROCEDURE InnerDraw;
BEGIN
 IF DrawProc # NIL THEN
  TrackMouse;
  DrawProc;
  IF FormDraw # NIL THEN FormDraw END
 END
END InnerDraw;

PROCEDURE Start*;
BEGIN
 ASSERT(~started);
 JS.do("let sketchProc = function(p){
 p.preload=Preload;
 p.draw=InnerDraw; p.setup=InnerSetup;
 p.keyPressed=InnerKeyPressed; p.keyTyped=InnerKeyTyped;
 p.mousePressed=InnerPressed; p.mouseReleased=InnerReleased;
 p.mouseOver=InnerOver; p.mouseOut=InnerOut;
 Instance=p;
 }");
 JS.do("var processingInstance = new p5(sketchProc);");
 JS.do("Instance.colorMode(Instance.RGB, 255, 255, 255, 1);");
 JS.do("removeSketch = function() { Remove(); }");
 focus := FALSE;
 started := TRUE
END Start;

END Draw.

JavaScript , , . , . , :

...
var Init = function (Log){

function Do(){
	Log.String(" !");
	Log.Ln();
}
Do();
}(Log);

, JavaScript. :

MODULE Strings;

IMPORT JS;

PROCEDURE Length* (s: ARRAY OF CHAR): INTEGER;
VAR i: INTEGER;
BEGIN i := 0;
 WHILE (i < LEN(s)) & (s[i] > 0X) DO INC(i) END
 RETURN i
END Length;

...

:

var Strings = function (JS){

function Length(s/*ARRAY OF CHAR*/){
	var i = 0;
	i = 0;
	while (true){
		if (i < s.length && RTL$.charAt(s, i) > 0){
			++i;
		} else break;
	}
	return i;
}

charAt :

var RTL$ = {
    charAt: function(s, index){
        if (index >= 0 && index < s.length)
            return s.charCodeAt(index);
        throw new Error("index out of bounds: " + index);
    },
...
}

, , . . — . , , JavaScript. - , .

— . - , , HTML5.

但是，尽管存在技术难题，但从概念上讲，OberonJS帮助解决了创建用于创建交互式模型的友好软件设计器界面的问题。另外，一个重要的优点是，OberonJS转换器在创建程序时不会与服务器联系，并且该程序也在客户端执行，这意味着在扩展的情况下，服务器上的负载应略有增加。

将来，将OberonJS与Electron框架结合会很有趣。



More articles:


All Articles