Add openRoberta Plugin

[dasGoogle]

Proposed Changes

• Adds support for openRoberta graphic robot programming utitity.

ToDos

• future changes to openRoberta to allow for integration with storage of student data

Full documentation for future changes

Usage

Users can copy openRoberta program links to add a block to Edtr.

openRoberta data format

The openRoberta links contain an XML rendering of the created program.

Future changes to openRoberta for storing student data in Edtr.io

OpenRoberta does currently not support any output via window.postMessage to enable the storage of edited programs. This could be resolved with a few changes in the openRoberta code. Preparations for such a feature are commented out in this plugin.
See below:

Um aus dem eingebetteten iFrame von openRoberta im Edtr Daten erhalten zu können, muss openRoberta um eine Schnittstelle erweitert werden, die auf window.postMessage()-Nachrichten reagiert.

Der Code zu openRoberta findet sich in folgendem Repository:
https://github.com/OpenRoberta/openroberta-lab
Und kann nach der dort gegebenen Anleitung installiert werden.

An diesem Repository muss die Datei

/OpenRobertaServer/staticResources/js/app/roberta/controller/program.controller.js

ca. in Zeile 365 um folgende Funktionen erweitert werden:

function programLinkExport() {
    var dom = Blockly.Xml.workspaceToDom(blocklyWorkspace);
    var xml = Blockly.Xml.domToText(dom);
    //TODO this should be removed after the next release
    xml = '<export xmlns="http://de.fhg.iais.roberta.blockly"><program>' + xml + '</program><config>' + GUISTATE_C.getConfigurationXML()
            + '</config></export>';
    var link = 'https://lab.open-roberta.org/#loadProgram';
    link += '&&' + GUISTATE_C.getRobot();
    link += '&&' + GUISTATE_C.getProgramName();
    link += '&&' + xml;
    link = encodeURI(link);
    var $temp = $("<input>");
    return link; 
}


window.addEventListener("message", function(event){
    console.log(event)
    if(event.data === "getLink"){
        event.source.postMessage({
            dataType: "programLink", 
            data: programLinkExport()
        }, event.origin);
    }
}, false)

exports.programLinkExport = programLinkExport; 

Funktionsweise der Datenübertragung an das Plugin

Das Plugin sendet im Intervall von 5 Sekunden (bei Bedarf anpassen) eine Nachricht "getLink" an den iFrame. im iFrame erzeugt openRoberta den entsprechenden Link und sendet ein JSON-Paket in folgendem Format zurück:

{
    dataType: "programLink", 
    data: "https://lab.open-roberta.org/#loadProgram ... "
}

Dieses wird erkannt und entsprechend der State der Plugin-Instanz aktualisiert.
An dieser Stelle muss die Datenverarbeitung an das kommende Backend angepasst werden.

[janrenz]

What about make a PR with the updated code on OpenRoberta?

[gisderdube]

Sieht relativ gut aus.
Ab edtr-io v0.6.2 gibt es ne eigene PrimarySettings component, die aus editor-ui importiert werden muss und nicht mehr über props.

Ansonsten noch ein paar Sachen:

• prefer functional components over class components
• syntax -> einmal prettier laufen lassen
• code comments -> sofern das plugin fertig ist würde ich die auskommentierten codeblöcke entfernen
• beim reload der Seite kommt ein alert, dass es ungesicherte Änderungen gibt. Wenn möglich ausstellen.

[dasGoogle]

@gisderdube Die Frage ist für mich, ob die Vorbereitungen für spätere Einbindung drin bleiben sollen oder nicht.
Falls ja, brauche ich die Klassenstruktur, falls nein eben nicht.
Kannst Du mir da sagen, wie ich das handhaben soll?

[dasGoogle]

@gisderdube Ich habe jetzt die Moduldefinitionen auf Funktionen umgestellt und die entsprechenden Vorbereitungen rausgeworfen. Das Abschalten der Meldung beim neu laden klappt leider nicht, da ich ja keinen Zugriff auf den DOM des iFrames habe. Ich habe ansonsten auch andere Methoden probiert, aber offenbar scheint das beforeclose-Event erst im iFrame und dann im Browser geladen zu werden, sodass man die Meldung nicht verhindern kann.

[janrenz]

@dasGoogle wie ist denn hier der Status?