[FEATURE REQUEST]Add simple exchange between external panel/page and main UI

[luc-github]

Per @CodyWMitchell suggestion

• send gcode command from external page and push it to webUI query processor
• catch all informations from web socket and push to iframe

Basicaly it should use some custom events with data, each part listen events and post messages

https://stackoverflow.com/questions/9153445/how-to-communicate-between-iframe-and-the-parent-site https://gist.github.com/pbojinov/8965299

event message can contain any object

I think need a setting in preferences to allow or not such communication

samplecode.zip

[luc-github]

In addition would be interresting to inject the main UI CSS to each iframe document - so iframe page would be as light as possible

something like

var css= document.querySelector("style");
var iframe = top.frames[name].document;
iframe.onload="injectCSS"
function injectCSS(){
iframe.open();
iframe.write(css);
iframe.close();
}

[luc-github]

I did some POC in rewrite version, I have created a new content called extension here a sample code

<script type="text/javascript">
    function sendMessage(msg){
            const resultPanel = document.getElementById("terminal");
        resultPanel.innerHTML = resultPanel.innerHTML + "<br>" + msg.content.replace("\n", "<br/>")  ;
        window.parent.postMessage(msg, '*');
    };
    function processMessage(eventMsg){
        let line
        if (eventMsg.data.type && eventMsg.data.content){
            line =  eventMsg.data.content
            const resultPanel = document.getElementById("terminal");
            resultPanel.innerHTML = resultPanel.innerHTML + "<br>" + line.replace("\n", "<br/>") ;
        }
    }
    window.addEventListener("message", processMessage, false)
</script>
<div class="container">
    <button class="btn m-1" onclick="sendMessage({type:'cmd', content:'G0 X100.0 F100'});">Gcode</button>
    <button class="btn m-1" onclick="sendMessage({type:'cmd', content:'[ESP800]'});">[ESP800]</button>
    <button class="btn m-1" onclick="sendMessage({type:'cmd', content:'[ESP111]'});">[ESP111]</button>
    <div class="container m-2">
    <pre id="terminal" class="bg-primary p-2" style="min-height: 200px;"></pre>
    </div>
</div>

It use main UI CSS, it allows to send command and receive response, currently only http response is implemented, I need to add websocket response, but I want to do terminal panel first, anywayt it is promising and should only need few code in theory I may also add the list of available icons un UI to allow easier customization - TBC

[luc-github]

It is now implemented in 3.0 rewrite, please check extension.html file for basic usage - I will do proper documentation later when I have time, also current implementation may change as it is the first POC.

I have implemented 3 types of message for the moment - so more can be added example of message which has 2 parts whereever it come from 1 - type the type can be:

• cmd for command to be send (GCODE, {EXPXXXX], anything...
• response for http response of command
  • error for http response of command
• core for data coming from ESP3D from WebSocket Text: connection id, sensor report, ping, etc,,,
• stream for data coming from WebSocket Binary: anything received by ESP3D serial, or sent by Fw directly

2 - content the message content itself

{type:'cmd', content:'G0 X100.0 F100'} {type:'stream', content:'ok\r\n'} {type:'cmd', content:'[ESP111]'} {type:'response', content:'192.168.0.1'}

note: stream is not formated as it is a stream it is up to extension to isolate the proper answer, as a stream does not mean it end by \r\n, it can come is several parts.

More features may be added in future like icons sharing from main UI, file transfert feature, etc...

But for basic communication I think it is good start

[github-actions[bot]]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.