Use Guacamole.ChainedTunnel when WebSocket is available (to safely fall back to HTTP...
[guacamole.git] / src / main / webapp / client.xhtml
1 <?xml version="1.0" encoding="UTF-8"?>
2 <!DOCTYPE html>
3
4 <!--
5     Guacamole - Clientless Remote Desktop
6     Copyright (C) 2010  Michael Jumper
7
8     This program is free software: you can redistribute it and/or modify
9     it under the terms of the GNU Affero General Public License as published by
10     the Free Software Foundation, either version 3 of the License, or
11     (at your option) any later version.
12
13     This program is distributed in the hope that it will be useful,
14     but WITHOUT ANY WARRANTY; without even the implied warranty of
15     MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
16     GNU Affero General Public License for more details.
17
18     You should have received a copy of the GNU Affero General Public License
19     along with this program.  If not, see <http://www.gnu.org/licenses/>.
20 -->
21
22 <html xmlns="http://www.w3.org/1999/xhtml">
23
24     <head>
25         <link rel="icon" type="image/png" href="images/guacamole-logo-64.png"/>
26         <link rel="stylesheet" type="text/css" href="styles/client.css"/>
27         <link rel="stylesheet" type="text/css" href="styles/keyboard.css"/>
28         <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, target-densitydpi=device-dpi"/>
29         <meta name="apple-mobile-web-app-capable" content="yes"/>
30         <title>Guacamole ${project.version}</title>
31     </head>
32
33     <body>
34
35         <!-- Menu -->
36         <div id="menu">
37
38             <!-- Clipboard -->
39             <button id="showClipboard">Show Clipboard</button>
40             <div id="clipboardDiv">
41                 <h2>Clipboard</h2>
42                 <p>
43                 Text copied/cut within Guacamole will appear here. Changes to the text will affect the remote clipboard, and will be pastable within the remote desktop. Use the textbox below as an interface between the client and server clipboards.
44                 </p>
45                 <textarea rows="10" cols="40" id="clipboard"></textarea>
46             </div>
47
48             <button id="showKeyboard">Show Keyboard</button>
49             <button id="ctrlAltDelete">Ctrl-Alt-Delete</button>
50             <button id="logout">Logout</button>
51
52             <!-- Logo and status -->
53             <img id="status-logo" class="logo" src="images/guacamole-logo-24.png" alt="Guacamole" title="Guacamole ${project.version}"/>
54
55         </div>
56
57
58         <!-- Display -->
59         <div id="display">
60             
61             <!-- Menu trigger -->
62             <div id="menuControl"></div>
63
64         </div>
65
66         <!-- On-screen keyboard -->
67         <div id="keyboardContainer"></div>
68
69         <!-- Dimensional clone of viewport -->
70         <div id="viewportClone"/>
71
72         <!-- Dialogs -->
73         <div class="dialogOuter">
74             <div class="dialogMiddle">
75
76                 <!-- Status Dialog -->
77                 <div id="statusDialog" class="dialog">
78                     <p id="statusText"></p>
79                     <div class="buttons"><button id="reconnect">Reconnect</button></div>
80                 </div>
81
82             </div>
83         </div>
84
85         <!-- guacamole-common-js scripts -->
86         <script type="text/javascript" src="guacamole-common-js/keyboard.js"></script>
87         <script type="text/javascript" src="guacamole-common-js/mouse.js"></script>
88         <script type="text/javascript" src="guacamole-common-js/layer.js"></script>
89         <script type="text/javascript" src="guacamole-common-js/tunnel.js"></script>
90         <script type="text/javascript" src="guacamole-common-js/guacamole.js"></script>
91         <script type="text/javascript" src="guacamole-common-js/oskeyboard.js"></script>
92
93         <!-- guacamole-default-webapp scripts -->
94         <script type="text/javascript" src="scripts/interface.js"></script>
95
96         <!-- Init -->
97         <script type="text/javascript"> /* <![CDATA[ */
98
99             // Start connect after control returns from onload (allow browser
100             // to consider the page loaded).
101             window.onload = function() {
102                 window.setTimeout(function() {
103
104                     var tunnel;
105
106                     // If WebSocket available, try to use it.
107                     if (window.WebSocket)
108                         tunnel = new Guacamole.ChainedTunnel(
109                             new Guacamole.WebSocketTunnel("websocket-tunnel"),
110                             new Guacamole.HTTPTunnel("tunnel")
111                         );
112
113                     // If no WebSocket, then use HTTP.
114                     else
115                         tunnel = new Guacamole.HTTPTunnel("tunnel")
116
117                     // Instantiate client
118                     var guac = new Guacamole.Client(tunnel);
119
120                     // Add client to UI
121                     guac.getDisplay().className = "software-cursor";
122                     GuacamoleUI.display.appendChild(guac.getDisplay());
123
124                     // Tie UI to client
125                     GuacamoleUI.attach(guac);
126
127                     try {
128
129                         // Get ID
130                         var id = window.location.search.substring(1);
131
132                         // Connect client
133                         guac.connect("id=" + id);
134
135                     }
136                     catch (e) {
137                         GuacamoleUI.showError(e.message);
138                     }
139
140                 }, 0);
141             };
142
143         /* ]]> */ </script>
144
145     </body>
146
147 </html>