Closed luc-github closed 3 years ago
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();
}
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
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 commandcore
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 directly2 - 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
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.
Per @CodyWMitchell suggestion
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