Add text field event target, focus event target if "Show Keyboard" is clicked and...
[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         <input id="eventTarget"
58                type="text"
59                style="width: 0; height: 0; position: fixed; opacity: 0"
60                value="x"/>
61
62         <!-- Display -->
63         <div id="display">
64             
65             <!-- Menu trigger -->
66             <div id="menuControl"></div>
67
68         </div>
69
70         <!-- On-screen keyboard -->
71         <div id="keyboardContainer"></div>
72
73         <!-- Dimensional clone of viewport -->
74         <div id="viewportClone"/>
75
76         <!-- Dialogs -->
77         <div class="dialogOuter">
78             <div class="dialogMiddle">
79
80                 <!-- Status Dialog -->
81                 <div id="statusDialog" class="dialog">
82                     <p id="statusText"></p>
83                     <div class="buttons"><button id="reconnect">Reconnect</button></div>
84                 </div>
85
86             </div>
87         </div>
88
89         <!-- guacamole-common-js scripts -->
90         <script type="text/javascript" src="guacamole-common-js/keyboard.js"></script>
91         <script type="text/javascript" src="guacamole-common-js/mouse.js"></script>
92         <script type="text/javascript" src="guacamole-common-js/layer.js"></script>
93         <script type="text/javascript" src="guacamole-common-js/tunnel.js"></script>
94         <script type="text/javascript" src="guacamole-common-js/guacamole.js"></script>
95         <script type="text/javascript" src="guacamole-common-js/oskeyboard.js"></script>
96
97         <!-- guacamole-default-webapp scripts -->
98         <script type="text/javascript" src="scripts/interface.js"></script>
99
100         <!-- Init -->
101         <script type="text/javascript"> /* <![CDATA[ */
102
103             // Start connect after control returns from onload (allow browser
104             // to consider the page loaded).
105             window.onload = function() {
106                 window.setTimeout(function() {
107
108                     var tunnel;
109
110                     // If WebSocket available, try to use it.
111                     if (window.WebSocket)
112                         tunnel = new Guacamole.ChainedTunnel(
113                             new Guacamole.WebSocketTunnel("websocket-tunnel"),
114                             new Guacamole.HTTPTunnel("tunnel")
115                         );
116
117                     // If no WebSocket, then use HTTP.
118                     else
119                         tunnel = new Guacamole.HTTPTunnel("tunnel")
120
121                     // Instantiate client
122                     var guac = new Guacamole.Client(tunnel);
123
124                     // Add client to UI
125                     guac.getDisplay().className = "software-cursor";
126                     GuacamoleUI.display.appendChild(guac.getDisplay());
127
128                     // Tie UI to client
129                     GuacamoleUI.attach(guac);
130
131                     try {
132
133                         // Get ID
134                         var id = window.location.search.substring(1);
135
136                         // Connect client
137                         guac.connect("id=" + id);
138
139                     }
140                     catch (e) {
141                         GuacamoleUI.showError(e.message);
142                     }
143
144                 }, 0);
145             };
146
147         /* ]]> */ </script>
148
149     </body>
150
151 </html>