Created
August 23, 2017 00:19
-
-
Save Efreak/4d2dc9f76e2c23633a054d98c2b48de5 to your computer and use it in GitHub Desktop.
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.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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;