Skip to content

Instantly share code, notes, and snippets.

@Efreak Efreak/index.html
Created Aug 23, 2017

Embed
What would you like to do?
GUI for ASF3, based on @KlappPc's page. jQuery removed. Clicking a text area highlights it. Styles added. Font sizes increased. Placeholders added to textareas and input.
<html>
<head>
<script type="text/javascript">
var script = function(){
var textarea = document.getElementById('consoleOut');
var updateLog = function(){
var xhr = new XMLHttpRequest();
xhr.onload = function(){
textarea.innerText=this.response;
}
xhr.open("GET","log.txt");
xhr.send();
textarea.scrollTop = textarea.scrollHeight;
}
setInterval(updateLog, 5000);
document.getElementById('sendbutton').onclick = function(){
var xhr = new XMLHttpRequest();
xhr.onload = function(){
document.getElementById('commandReply').innerText = this.response.trim();
}
xhr.open("GET","IPC/?command=" + document.getElementById('commandInput').value);
xhr.send();
}
document.querySelectorAll('textarea, input[type="text"]').forEach(function(ele){
ele.onclick=function(){
ele.select()
}
});
}
</script>
<style type="text/css">
body {
height: 100%;
margin: 0;
min-width: 75px;
min-height: 400px;
font-size: 14pt;
}
input[type="text"] {
border: 1px solid rgba(0,0,0,0.1);
width: calc(100% - 200px);
margin: 10px 10px 0px 10px;
height: 40px;
padding: 10px;
font-size: 14pt;
}
input[type="button"] {
width: 170px;
height: 40px;
margin: 10px 10px 0px 0px;
float:right;
font-size: 14pt;
}
textarea {
white-space: pre;
overflow: auto;
overflow-y: auto;
overflow-x: auto;
overflow: -moz-scrollbars-horizontal;
width: calc(100% - 20px);
margin: 10px 10px 0px 10px;
font-family: monospace;
border: 1px solid rgba(0,0,0,0.1);
font-size: 14pt;
}
textarea:nth-of-type(1) {
height: calc(50% - 40px);
}
textarea:nth-of-type(2) {
height: calc(50% - 40px);
}
</style>
</head>
<body onload="script()">
<input type="text" id="commandInput" size="120" placeholder="Enter command...">
<input id="sendbutton" type="button" value="Send">
<textarea id="commandReply" readonly placeholder="Command reply"></textarea>
<textarea id="consoleOut" readonly placeholder="Log file"></textarea>
</body>
</html>
@KlappPc

This comment has been minimized.

Copy link

commented Aug 23, 2017

xhr.open("GET","IPC/?command=" + document.getElementById('commandInput').value);

does not work, if the file is only openend locally and is not served by a webserver (as it would be for most users in the end).
Add the IP to the adress for that to work.

I don't have newlines in firefox (in both textareas). In chrome I have. Setting value instead of innerText fixes that. But I don't have vertical scrollbars in firefox as well. Don't know why ^^.

Well if you had the page served by a webserver and you don't have log.txt lying in the same directory you get a 404.

About cross origin.
Firefox handles that by assuming file:/// is the same origin and allowing requests. Yet most methods I tried did not worked for the file-protocol. Thats why I used jQuery. Chrome assumes thats always cross-site and therefore you would have to allow cross site in general for chrome (since log.txt can not sent it's own header via file protocol as far as I know), which is bad.
For sending the IPC you will (and should) get a cross-site exception unless the GUI is served from a webserver with the same ip. Thats why ASF has to allow "null" as origin, because that is the origin from a script executed in a file NOT served by a webserver.
That should work everywhere (but I tested only chrome and firefox).

If you serve the GUI from a webserver with the same IP as ASF you don't have any of these problems. Yet the most common use case will probably be opening the file without a running webserver.

PS: I really dislike the "select everything on click" but I guess you had a reason for that ;->

Edit: Ah, and for the openID. You mean we use openID to send the token to ASF and can read the badgepage without passwort/login or what?
Not possible since ASF needs to be logged in to play games.
Or I am still not getting what you want.
The usecase I am currently picturing is a *.html file without webserver beeing opend locally on the same PC where ASF is running (average "stupid" user case).
In case you have a local webserver some things get easier.
But in case you have a global webserver things suddenly get way more complicated security wise. Is that what you are talking about?

Edit2:
Get both scrollbars with
overflow: -moz-scrollbars-horizontal -moz-scrollbars-vertical;

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.