mirror of
				https://github.com/retspen/webvirtcloud
				synced 2025-07-31 12:41:08 +00:00 
			
		
		
		
	console layout rearranged. fix indentation. add translate tags
This commit is contained in:
		
							parent
							
								
									d95b5a4017
								
							
						
					
					
						commit
						34394c2b5e
					
				
					 3 changed files with 350 additions and 376 deletions
				
			
		|  | @ -26,208 +26,192 @@ | |||
| {% load i18n %} | ||||
| {% load staticfiles %} | ||||
| {% block head %} | ||||
| 
 | ||||
|         <title>WebVirtCloud - Spice Client - Full</title> | ||||
|         <script src="{% static "js/spice-html5/spicearraybuffer.js" %}"></script> | ||||
|         <script src="{% static "js/spice-html5/enums.js" %}"></script> | ||||
|         <script src="{% static "js/spice-html5/atKeynames.js" %}"></script> | ||||
|         <script src="{% static "js/spice-html5/utils.js" %}"></script> | ||||
|         <script src="{% static "js/spice-html5/png.js" %}"></script> | ||||
|         <script src="{% static "js/spice-html5/lz.js" %}"></script> | ||||
|         <script src="{% static "js/spice-html5/quic.js" %}"></script> | ||||
|         <script src="{% static "js/spice-html5/bitmap.js" %}"></script> | ||||
|         <script src="{% static "js/spice-html5/spicedataview.js" %}"></script> | ||||
|         <script src="{% static "js/spice-html5/spicetype.js" %}"></script> | ||||
|         <script src="{% static "js/spice-html5/spicemsg.js" %}"></script> | ||||
|         <script src="{% static "js/spice-html5/wire.js" %}"></script> | ||||
|         <script src="{% static "js/spice-html5/spiceconn.js" %}"></script> | ||||
|         <script src="{% static "js/spice-html5/display.js" %}"></script> | ||||
|         <script src="{% static "js/spice-html5/port.js" %}"></script> | ||||
|         <script src="{% static "js/spice-html5/main.js" %}"></script> | ||||
|         <script src="{% static "js/spice-html5/inputs.js" %}"></script> | ||||
|         <script src="{% static "js/spice-html5/webm.js" %}"></script> | ||||
|         <script src="{% static "js/spice-html5/playback.js" %}"></script> | ||||
|         <script src="{% static "js/spice-html5/simulatecursor.js" %}"></script> | ||||
|         <script src="{% static "js/spice-html5/cursor.js" %}"></script> | ||||
|         <script src="{% static "js/spice-html5/thirdparty/jsbn.js" %}"></script> | ||||
|         <script src="{% static "js/spice-html5/thirdparty/rsa.js" %}"></script> | ||||
|         <script src="{% static "js/spice-html5/thirdparty/prng4.js" %}"></script> | ||||
|         <script src="{% static "js/spice-html5/thirdparty/rng.js" %}"></script> | ||||
|         <script src="{% static "js/spice-html5/thirdparty/sha1.js" %}"></script> | ||||
|         <script src="{% static "js/spice-html5/ticket.js" %}"></script> | ||||
|         <script src="{% static "js/spice-html5/resize.js" %}"></script> | ||||
|         <script src="{% static "js/spice-html5/filexfer.js" %}"></script> | ||||
|         <link rel="stylesheet" type="text/css" href="{% static "js/spice-html5/spice.css" %}" /> | ||||
| 
 | ||||
|     <title>WebVirtCloud - Spice Client - Full</title> | ||||
|     <script src="{% static "js/spice-html5/spicearraybuffer.js" %}"></script> | ||||
|     <script src="{% static "js/spice-html5/enums.js" %}"></script> | ||||
|     <script src="{% static "js/spice-html5/atKeynames.js" %}"></script> | ||||
|     <script src="{% static "js/spice-html5/utils.js" %}"></script> | ||||
|     <script src="{% static "js/spice-html5/png.js" %}"></script> | ||||
|     <script src="{% static "js/spice-html5/lz.js" %}"></script> | ||||
|     <script src="{% static "js/spice-html5/quic.js" %}"></script> | ||||
|     <script src="{% static "js/spice-html5/bitmap.js" %}"></script> | ||||
|     <script src="{% static "js/spice-html5/spicedataview.js" %}"></script> | ||||
|     <script src="{% static "js/spice-html5/spicetype.js" %}"></script> | ||||
|     <script src="{% static "js/spice-html5/spicemsg.js" %}"></script> | ||||
|     <script src="{% static "js/spice-html5/wire.js" %}"></script> | ||||
|     <script src="{% static "js/spice-html5/spiceconn.js" %}"></script> | ||||
|     <script src="{% static "js/spice-html5/display.js" %}"></script> | ||||
|     <script src="{% static "js/spice-html5/port.js" %}"></script> | ||||
|     <script src="{% static "js/spice-html5/main.js" %}"></script> | ||||
|     <script src="{% static "js/spice-html5/inputs.js" %}"></script> | ||||
|     <script src="{% static "js/spice-html5/webm.js" %}"></script> | ||||
|     <script src="{% static "js/spice-html5/playback.js" %}"></script> | ||||
|     <script src="{% static "js/spice-html5/simulatecursor.js" %}"></script> | ||||
|     <script src="{% static "js/spice-html5/cursor.js" %}"></script> | ||||
|     <script src="{% static "js/spice-html5/thirdparty/jsbn.js" %}"></script> | ||||
|     <script src="{% static "js/spice-html5/thirdparty/rsa.js" %}"></script> | ||||
|     <script src="{% static "js/spice-html5/thirdparty/prng4.js" %}"></script> | ||||
|     <script src="{% static "js/spice-html5/thirdparty/rng.js" %}"></script> | ||||
|     <script src="{% static "js/spice-html5/thirdparty/sha1.js" %}"></script> | ||||
|     <script src="{% static "js/spice-html5/ticket.js" %}"></script> | ||||
|     <script src="{% static "js/spice-html5/resize.js" %}"></script> | ||||
|     <script src="{% static "js/spice-html5/filexfer.js" %}"></script> | ||||
|     <link rel="stylesheet" type="text/css" href="{% static "js/spice-html5/spice.css" %}" /> | ||||
| {% endblock %} | ||||
| 
 | ||||
| {% block content %} | ||||
| 
 | ||||
|         <div id="login" hidden> | ||||
|             <span class="logo">SPICE</span> | ||||
|             <label for="host">Host:</label> <input type='text' id='host' value='{{ ws_host }}'> <!-- localhost --> | ||||
|             <label for="port">Port:</label> <input type='text' id='port' value='{{ ws_port }}'> | ||||
|             <label for="password">Password:</label> <input type='password' id='password' value='{{ console_passwd }}'> | ||||
|             <label for="show_console">Show console </label><input type="checkbox" id="show_console" value="1" onchange="toggle_console()" checked> | ||||
|             <button id="connectButton" onclick="connect();">Start</button> | ||||
|         </div> | ||||
| 
 | ||||
|         <div id="spice-area"> | ||||
|             <div id="spice-screen" class="spice-screen"></div> | ||||
|         </div> | ||||
|     <div id="login" hidden> | ||||
|         <span class="logo">SPICE</span> | ||||
|         <label for="host">{% trans 'Host' %}:</label> <input type='text' id='host' value='{{ ws_host }}'> <!-- localhost --> | ||||
|         <label for="port">{% trans 'Port' %}:</label> <input type='text' id='port' value='{{ ws_port }}'> | ||||
|         <label for="password">{% trans 'Password' %}:</label> <input type='password' id='password' value='{{ console_passwd }}'> | ||||
|         <label for="show_console">{% trans 'Show console' %}</label><input type="checkbox" id="show_console" value="1" onchange="toggle_console()" checked> | ||||
|         <button id="connectButton" onclick="connect();">{% trans 'Start' %}</button> | ||||
|     </div> | ||||
| 
 | ||||
|     <div id="spice-area"> | ||||
|         <div id="spice-screen" class="spice-screen"></div> | ||||
|         <div id="message-div" class="spice-message"></div> | ||||
|     </div> | ||||
| 
 | ||||
|     <div id="debug-div"> | ||||
|     <!-- If DUMPXXX is turned on, dumped images will go here --> | ||||
|     </div> | ||||
| 
 | ||||
|         <div id="debug-div"> | ||||
|         <!-- If DUMPXXX is turned on, dumped images will go here --> | ||||
|         </div> | ||||
| {% endblock %} | ||||
| 
 | ||||
| {% block foot %} | ||||
| 
 | ||||
|         <script> | ||||
|             var host = null, port = null; | ||||
|             var sc; | ||||
|     <script> | ||||
|         var host = null, port = null; | ||||
|         var sc; | ||||
| 
 | ||||
|             function spice_error(e) | ||||
|         function spice_error(e) { | ||||
|             disconnect(); | ||||
|         } | ||||
| 
 | ||||
|         function connect() { | ||||
|             var host, port, password, scheme = "ws://", uri; | ||||
| 
 | ||||
|             host = document.getElementById("host").value; | ||||
|             port = document.getElementById("port").value; | ||||
|             if (window.location.protocol == 'https:') { | ||||
|                 scheme = "wss://"; | ||||
|             } | ||||
|             password = document.getElementById("password").value; | ||||
| 
 | ||||
|             if ((!host) || (!port)) { | ||||
|                 console.log("must set host and port"); | ||||
|                 return; | ||||
|             } | ||||
| 
 | ||||
|             if (sc) { | ||||
|                 sc.stop(); | ||||
|             } | ||||
| 
 | ||||
|             uri = scheme + host + ":" + port; | ||||
| 
 | ||||
|             document.getElementById('connectButton').innerHTML = "Stop"; | ||||
|             document.getElementById('connectButton').onclick = disconnect; | ||||
| 
 | ||||
|             try { | ||||
|                 sc = new SpiceMainConn({uri: uri, screen_id: "spice-screen", dump_id: "debug-div", | ||||
|                             message_id: "message-div", password: password, onerror: spice_error, onagent: agent_connected }); | ||||
|             } | ||||
|             catch (e) | ||||
|             { | ||||
|                 alert(e.toString()); | ||||
|                 disconnect(); | ||||
|             } | ||||
|         } | ||||
| 
 | ||||
|             function connect() | ||||
|             { | ||||
|                 var host, port, password, scheme = "ws://", uri; | ||||
|         function disconnect() { | ||||
|             console.log(">> disconnect"); | ||||
|             if (sc) { | ||||
|                 sc.stop(); | ||||
|             } | ||||
|             document.getElementById('connectButton').innerHTML = "Start"; | ||||
|             document.getElementById('connectButton').onclick = connect; | ||||
|             if (window.File && window.FileReader && window.FileList && window.Blob) { | ||||
|                 var spice_xfer_area = document.getElementById('spice-xfer-area'); | ||||
|                 document.getElementById('spice-area').removeChild(spice_xfer_area); | ||||
|                 document.getElementById('spice-area').removeEventListener('dragover', handle_file_dragover, false); | ||||
|                 document.getElementById('spice-area').removeEventListener('drop', handle_file_drop, false); | ||||
|             } | ||||
|             console.log("<< disconnect"); | ||||
|         } | ||||
| 
 | ||||
|                 host = document.getElementById("host").value; | ||||
|                 port = document.getElementById("port").value; | ||||
|                 if (window.location.protocol == 'https:') { | ||||
|                     scheme = "wss://"; | ||||
|                 } | ||||
|                 password = document.getElementById("password").value; | ||||
|         function agent_connected(sc) { | ||||
|             window.addEventListener('resize', handle_resize); | ||||
|             window.spice_connection = this; | ||||
| 
 | ||||
|             resize_helper(this); | ||||
| 
 | ||||
|                 if ((!host) || (!port)) { | ||||
|                     console.log("must set host and port"); | ||||
|                     return; | ||||
|                 } | ||||
| 
 | ||||
|                 if (sc) { | ||||
|                     sc.stop(); | ||||
|                 } | ||||
| 
 | ||||
|                 uri = scheme + host + ":" + port; | ||||
| 
 | ||||
|                 document.getElementById('connectButton').innerHTML = "Stop"; | ||||
|                 document.getElementById('connectButton').onclick = disconnect; | ||||
| 
 | ||||
|                 try | ||||
|                 { | ||||
|                     sc = new SpiceMainConn({uri: uri, screen_id: "spice-screen", dump_id: "debug-div", | ||||
|                                 message_id: "message-div", password: password, onerror: spice_error, onagent: agent_connected }); | ||||
|                 } | ||||
|                 catch (e) | ||||
|                 { | ||||
|                     alert(e.toString()); | ||||
|                     disconnect(); | ||||
|                 } | ||||
|             if (window.File && window.FileReader && window.FileList && window.Blob) { | ||||
|                 var spice_xfer_area = document.createElement("div"); | ||||
|                 spice_xfer_area.setAttribute('id', 'spice-xfer-area'); | ||||
|                 document.getElementById('spice-area').appendChild(spice_xfer_area); | ||||
|                 document.getElementById('spice-area').addEventListener('dragover', handle_file_dragover, false); | ||||
|                 document.getElementById('spice-area').addEventListener('drop', handle_file_drop, false); | ||||
|             } | ||||
|             else { | ||||
|                 console.log("File API is not supported"); | ||||
|             } | ||||
|         } | ||||
| 
 | ||||
|         function toggle_console() { | ||||
|             var checkbox = document.getElementById('show_console'); | ||||
|             var m = document.getElementById('message-div'); | ||||
| 
 | ||||
|             if (checkbox.checked) { | ||||
|                 m.style.display = 'block'; | ||||
|             } | ||||
|             else { | ||||
|                 m.style.display = 'none'; | ||||
|             } | ||||
| 
 | ||||
|             function disconnect() | ||||
|             { | ||||
|                 console.log(">> disconnect"); | ||||
|                 if (sc) { | ||||
|                     sc.stop(); | ||||
|                 } | ||||
|                 document.getElementById('connectButton').innerHTML = "Start"; | ||||
|                 document.getElementById('connectButton').onclick = connect; | ||||
|                 if (window.File && window.FileReader && window.FileList && window.Blob) | ||||
|                 { | ||||
|                     var spice_xfer_area = document.getElementById('spice-xfer-area'); | ||||
|                     document.getElementById('spice-area').removeChild(spice_xfer_area); | ||||
|                     document.getElementById('spice-area').removeEventListener('dragover', handle_file_dragover, false); | ||||
|                     document.getElementById('spice-area').removeEventListener('drop', handle_file_drop, false); | ||||
|                 } | ||||
|                 console.log("<< disconnect"); | ||||
|             window.addEventListener('resize', handle_resize); | ||||
|             resize_helper(sc); | ||||
|         } | ||||
| 
 | ||||
|         function fullscreen() { | ||||
|             var screen=document.getElementById('spice-screen'); | ||||
|             if(screen.requestFullscreen) { | ||||
|                 screen.requestFullscreen(); | ||||
|             } else if(screen.mozRequestFullScreen) { | ||||
|                 screen.mozRequestFullScreen(); | ||||
|             } else if(screen.webkitRequestFullscreen) { | ||||
|                 screen.webkitRequestFullscreen(); | ||||
|             } else if(screen.msRequestFullscreen) { | ||||
|                 screen.msRequestFullscreen(); | ||||
|             } | ||||
|         } | ||||
|         /* SPICE port event listeners | ||||
|         window.addEventListener('spice-port-data', function(event) { | ||||
|             // Here we convert data to text, but really we can obtain binary data also | ||||
|             var msg_text = arraybuffer_to_str(new Uint8Array(event.detail.data)); | ||||
|             DEBUG > 0 && console.log('SPICE port', event.detail.channel.portName, 'message text:', msg_text); | ||||
|         }); | ||||
| 
 | ||||
|             function agent_connected(sc) | ||||
|             { | ||||
|                 window.addEventListener('resize', handle_resize); | ||||
|                 window.spice_connection = this; | ||||
| 
 | ||||
|                 resize_helper(this); | ||||
| 
 | ||||
|                 if (window.File && window.FileReader && window.FileList && window.Blob) | ||||
|                 { | ||||
|                     var spice_xfer_area = document.createElement("div"); | ||||
|                     spice_xfer_area.setAttribute('id', 'spice-xfer-area'); | ||||
|                     document.getElementById('spice-area').appendChild(spice_xfer_area); | ||||
|                     document.getElementById('spice-area').addEventListener('dragover', handle_file_dragover, false); | ||||
|                     document.getElementById('spice-area').addEventListener('drop', handle_file_drop, false); | ||||
|                 } | ||||
|                 else | ||||
|                 { | ||||
|                     console.log("File API is not supported"); | ||||
|                 } | ||||
|             } | ||||
| 
 | ||||
|             function toggle_console() | ||||
|             { | ||||
|                 var checkbox = document.getElementById('show_console'); | ||||
|                 var m = document.getElementById('message-div'); | ||||
| 
 | ||||
|                 if (checkbox.checked) | ||||
|                 { | ||||
|                     m.style.display = 'block'; | ||||
|                 } | ||||
|                 else | ||||
|                 { | ||||
|                     m.style.display = 'none'; | ||||
|                 } | ||||
| 
 | ||||
|                 window.addEventListener('resize', handle_resize); | ||||
|                 resize_helper(sc); | ||||
|             } | ||||
| 
 | ||||
|             function fullscreen() { | ||||
|                 var screen=document.getElementById('spice-screen'); | ||||
|                 if(screen.requestFullscreen) { | ||||
|                     screen.requestFullscreen(); | ||||
|                 } else if(screen.mozRequestFullScreen) { | ||||
|                     screen.mozRequestFullScreen(); | ||||
|                 } else if(screen.webkitRequestFullscreen) { | ||||
|                     screen.webkitRequestFullscreen(); | ||||
|                 } else if(screen.msRequestFullscreen) { | ||||
|                     screen.msRequestFullscreen(); | ||||
|                 } | ||||
|             } | ||||
|             /* SPICE port event listeners | ||||
|             window.addEventListener('spice-port-data', function(event) { | ||||
|                 // Here we convert data to text, but really we can obtain binary data also | ||||
|                 var msg_text = arraybuffer_to_str(new Uint8Array(event.detail.data)); | ||||
|                 DEBUG > 0 && console.log('SPICE port', event.detail.channel.portName, 'message text:', msg_text); | ||||
|             }); | ||||
| 
 | ||||
|             window.addEventListener('spice-port-event', function(event) { | ||||
|                 DEBUG > 0 && console.log('SPICE port', event.detail.channel.portName, 'event data:', event.detail.spiceEvent); | ||||
|             }); | ||||
|             */ | ||||
|             document.getElementById("fullscreen_button").addEventListener('click', fullscreen); | ||||
|             document.getElementById('ctrlaltdel').addEventListener('click', sendCtrlAltDel); | ||||
|             document.getElementById('ctrlaltf1').addEventListener('click', function(){sendCtrlAltFN(0);}); | ||||
|             document.getElementById('ctrlaltf2').addEventListener('click', function(){sendCtrlAltFN(1);}); | ||||
|             document.getElementById('ctrlaltf3').addEventListener('click', function(){sendCtrlAltFN(2);}); | ||||
|             document.getElementById('ctrlaltf4').addEventListener('click', function(){sendCtrlAltFN(3);}); | ||||
|             document.getElementById('ctrlaltf5').addEventListener('click', function(){sendCtrlAltFN(4);}); | ||||
|             document.getElementById('ctrlaltf6').addEventListener('click', function(){sendCtrlAltFN(5);}); | ||||
|             document.getElementById('ctrlaltf7').addEventListener('click', function(){sendCtrlAltFN(6);}); | ||||
|             document.getElementById('ctrlaltf8').addEventListener('click', function(){sendCtrlAltFN(7);}); | ||||
|             document.getElementById('ctrlaltf9').addEventListener('click', function(){sendCtrlAltFN(8);}); | ||||
|             document.getElementById('ctrlaltf10').addEventListener('click', function(){sendCtrlAltFN(9);}); | ||||
|             document.getElementById('ctrlaltf11').addEventListener('click', function(){sendCtrlAltFN(10);}); | ||||
|             document.getElementById('ctrlaltf12').addEventListener('click', function(){sendCtrlAltFN(11);}); | ||||
|             connect(); | ||||
|         </script> | ||||
|         window.addEventListener('spice-port-event', function(event) { | ||||
|             DEBUG > 0 && console.log('SPICE port', event.detail.channel.portName, 'event data:', event.detail.spiceEvent); | ||||
|         }); | ||||
|         */ | ||||
|         document.getElementById("fullscreen_button").addEventListener('click', fullscreen); | ||||
|         document.getElementById('ctrlaltdel').addEventListener('click', sendCtrlAltDel); | ||||
|         document.getElementById('ctrlaltf1').addEventListener('click', function(){sendCtrlAltFN(0);}); | ||||
|         document.getElementById('ctrlaltf2').addEventListener('click', function(){sendCtrlAltFN(1);}); | ||||
|         document.getElementById('ctrlaltf3').addEventListener('click', function(){sendCtrlAltFN(2);}); | ||||
|         document.getElementById('ctrlaltf4').addEventListener('click', function(){sendCtrlAltFN(3);}); | ||||
|         document.getElementById('ctrlaltf5').addEventListener('click', function(){sendCtrlAltFN(4);}); | ||||
|         document.getElementById('ctrlaltf6').addEventListener('click', function(){sendCtrlAltFN(5);}); | ||||
|         document.getElementById('ctrlaltf7').addEventListener('click', function(){sendCtrlAltFN(6);}); | ||||
|         document.getElementById('ctrlaltf8').addEventListener('click', function(){sendCtrlAltFN(7);}); | ||||
|         document.getElementById('ctrlaltf9').addEventListener('click', function(){sendCtrlAltFN(8);}); | ||||
|         document.getElementById('ctrlaltf10').addEventListener('click', function(){sendCtrlAltFN(9);}); | ||||
|         document.getElementById('ctrlaltf11').addEventListener('click', function(){sendCtrlAltFN(10);}); | ||||
|         document.getElementById('ctrlaltf12').addEventListener('click', function(){sendCtrlAltFN(11);}); | ||||
|         connect(); | ||||
|     </script> | ||||
| {% endblock %} | ||||
|  |  | |||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue