1st version of RemoteDesktop using wvnc

RemoteDesktop/README.md

@@ -1,24 +1,10 @@
-# RemoteDesktop
+# WVNC remote desktop
-This project is generated by AntOS Development Kit
+![](https://os.lxsang.me/repo/RemoteDesktop/RemoteDesktop.png)
 
-## Howto
+A web based VNC client allowing to control remote VNC desktop from browser. The application is based on **wvnc**, a protocol and API that uses web socket to communicate with remote VNC server.
 
-1. Open the project.apj file with AntOSDK (simply double Click on it)
+Further information on **wvnc**: [https://blog.lxsang.me/post/id/23](https://blog.lxsang.me/post/id/23)
-2. Modify the UI in *assets/scheme.html* 
-3. Modify application code in *coffees/main.coffee*
-4. Modify CSS style in *css/main.css*
-5. Other files need to be copied: put in to assets
 
-## Set up build target
+**Credit**
-
+* antd-wvnc-plugin: [https://github.com/lxsang/antd-wvnc-plugin](https://github.com/lxsang/antd-wvnc-plugin)
-Click **Menu> Build > Build Option** or simply hit **ALT-Y**
+* wvnc.js: [https://github.com/lxsang/wvnc.js](https://github.com/lxsang/wvnc.js)
-
-In the build options dialog, add or remove files that need to be
-included into the build 
-
-Click **Save**
-
-## Build application
-* To build: **Menu > Build > Build** or **ALT-C**
-* To build and run: **Menu > Build > Build and Run** or **CTRL-R**
-* To release: **Menu > Build > Build release** or **ALT-P**

RemoteDesktop/assets/main.css

@@ -0,0 +1,9 @@
+afx-app-window[data-id="RemoteDesktop"] div[data-id="container"]
+{
+    background-color: #272822;
+}
+afx-app-window[data-id="RemoteDesktop"] canvas[data-id="screen"]
+{
+    border:0;
+    margin:0 auto;
+}

RemoteDesktop/build/debug/README.md

@@ -1,24 +1,10 @@
-# RemoteDesktop
+# WVNC remote desktop
-This project is generated by AntOS Development Kit
+![](https://os.lxsang.me/repo/RemoteDesktop/RemoteDesktop.png)
 
-## Howto
+A web based VNC client allowing to control remote VNC desktop from browser. The application is based on **wvnc**, a protocol and API that uses web socket to communicate with remote VNC server.
 
-1. Open the project.apj file with AntOSDK (simply double Click on it)
+Further information on **wvnc**: [https://blog.lxsang.me/post/id/23](https://blog.lxsang.me/post/id/23)
-2. Modify the UI in *assets/scheme.html* 
-3. Modify application code in *coffees/main.coffee*
-4. Modify CSS style in *css/main.css*
-5. Other files need to be copied: put in to assets
 
-## Set up build target
+**Credit**
-
+* antd-wvnc-plugin: [https://github.com/lxsang/antd-wvnc-plugin](https://github.com/lxsang/antd-wvnc-plugin)
-Click **Menu> Build > Build Option** or simply hit **ALT-Y**
+* wvnc.js: [https://github.com/lxsang/wvnc.js](https://github.com/lxsang/wvnc.js)
-
-In the build options dialog, add or remove files that need to be
-included into the build 
-
-Click **Save**
-
-## Build application
-* To build: **Menu > Build > Build** or **ALT-C**
-* To build and run: **Menu > Build > Build and Run** or **CTRL-R**
-* To release: **Menu > Build > Build release** or **ALT-P**

RemoteDesktop/build/debug/main.css

@@ -0,0 +1,10 @@
+
+afx-app-window[data-id="RemoteDesktop"] div[data-id="container"]
+{
+    background-color: #272822;
+}
+afx-app-window[data-id="RemoteDesktop"] canvas[data-id="screen"]
+{
+    border:0;
+    margin:0 auto;
+}

RemoteDesktop/build/debug/package.json

@@ -1,6 +1,6 @@
 {
     "app":"RemoteDesktop",
-    "name":"RemoteDesktop",
+    "name":"WVNC remote desktop",
     "description":"",
     "info":{
         "author": "",
@@ -8,6 +8,6 @@
     },
     "version":"0.0.1-a",
     "category":"Other",
-    "iconclass":"fa fa-adn",
+    "icon": "icon.png",
     "mimes":["none"]
 }

RemoteDesktop/coffees/main.coffee

@@ -44,6 +44,37 @@ class ConnectionDialog extends this.OS.GUI.BasicDialog
                 (d.find "content7").set "value", 40
         }
 
+class CredentialDialog extends this.OS.GUI.BasicDialog
+    constructor: () ->
+        super "ConnectionDialog", {
+            tags: [
+                { tag: "afx-label", att: 'text="__(User name)" data-height="23" class="header"' },
+                { tag: "input", att: 'data-height="30"' },
+                { tag: "afx-label", att: 'text="__(Password)" data-height="23" class="header"' },
+                { tag: "input", att: 'data-height="30" type="password"' },
+                { tag: "div", att: ' data-height="5"' }
+            ],
+            width: 350,
+            height: 150, 
+            resizable: false,
+            buttons: [
+                { 
+                    label: "__(Ok)",
+                    onclick: (d) ->
+                        return d.quit() unless d.handler
+                        data =
+                            username: (d.find "content1").value
+                            password: (d.find "content3").value
+                        d.handler data
+                        d.quit()
+                },
+                { label: "__(Cancel)", onclick: (d) -> d.quit() }
+            ],
+            filldata: (d) -> 
+                (d.find "content1").value = "demo"
+                (d.find "content3").value = "demo"
+        }
+
 class RemoteDesktop extends this.OS.GUI.BaseApplication
     constructor: ( args ) ->
         super "RemoteDesktop", args
@@ -54,7 +85,7 @@ class RemoteDesktop extends this.OS.GUI.BaseApplication
         @container = @find "container"
         @client = new WVNC { 
             element: me.canvas,
-            ws: 'wss://localhost:9192/wvnc',
+            ws: 'wss://lxsang.me/wvnc',
             worker: "#{me._api.handler.get}/#{me.meta().path}/decoder.js"   
         }
         @client.onerror = (m) ->
@@ -67,6 +98,12 @@ class RemoteDesktop extends this.OS.GUI.BaseApplication
                 me.openDialog "PromptDialog", (d) ->
                     r(d) 
                 , __("VNC password"), { label: __("VNC password"), value: "demopass", type: "password" }
+        
+        @client.oncredential = () ->
+            return new Promise (r,e) ->
+                me.openDialog new CredentialDialog, (d) ->
+                    r(d.username, d.password)
+                , __("User credential")
         @on "resize", (e)-> me.setScale()
         @on "focus", (e) -> $(me.canvas).focus()
         @client.init().then () -> 
@@ -80,6 +117,23 @@ class RemoteDesktop extends this.OS.GUI.BaseApplication
         sy = h / @client.resolution.h
         if sx > sy then @client.setScale sy else @client.setScale sx
     
+    menu: () ->
+        me = @
+        [
+            {
+                text: "__(Connection)",
+                child: [
+                    { text: "__(New Connection)", dataid: "#{@name}-new", },
+                    { text: "__(Disconnect)", dataid: "#{@name}-close" }
+                ],
+                onmenuselect: (e) -> me.actionConnection()
+            }
+        ]
+    
+    actionConnection: (e) ->
+        @client.disconnect() if @client
+        @showConnectionDialog()
+    
     showConnectionDialog: () ->
         me = @
         @openDialog new ConnectionDialog, (d) ->

RemoteDesktop/package.json

@@ -1,6 +1,6 @@
 {
     "app":"RemoteDesktop",
-    "name":"RemoteDesktop",
+    "name":"WVNC remote desktop",
     "description":"",
     "info":{
         "author": "",
@@ -8,6 +8,6 @@
     },
     "version":"0.0.1-a",
     "category":"Other",
-    "iconclass":"fa fa-adn",
+    "icon": "icon.png",
     "mimes":["none"]
 }

RemoteDesktop/project.apj

@@ -1 +1 @@
-{"name":"RemoteDesktop","root":"home://Documents/workspace/antosdk-apps/RemoteDesktop","css":["assets/main.css"],"javascripts":["javascripts/wvnc.js"],"coffees":["coffees/main.coffee"],"copies":["assets/scheme.html","package.json","README.md","javascripts/decoder.js","javascripts/wvnc_asm.js","javascripts/wvnc_asm.wasm"]}
+{"name":"RemoteDesktop","root":"home://workspace/RemoteDesktop","css":["assets/main.css"],"javascripts":["javascripts/wvnc.js"],"coffees":["coffees/main.coffee"],"copies":["assets/scheme.html","package.json","README.md","javascripts/decoder.js","javascripts/wvnc_asm.js","javascripts/wvnc_asm.wasm","assets/icon.png"]}