add remote desktop

RemoteDesktop/README.md

@@ -8,3 +8,8 @@ Further information on **wvnc**: [https://blog.lxsang.me/post/id/23](https://blo
 **Credit**
 * antd-wvnc-plugin: [https://github.com/lxsang/antd-wvnc-plugin](https://github.com/lxsang/antd-wvnc-plugin)
 * wvnc.js: [https://github.com/lxsang/wvnc.js](https://github.com/lxsang/wvnc.js)
+* 
+
+## Change logs
+
+* v0.1.0 - adapt to the new AntOS API

RemoteDesktop/assets/main.css

@@ -5,5 +5,6 @@ afx-app-window[data-id="RemoteDesktop"] div[data-id="container"]
 afx-app-window[data-id="RemoteDesktop"] canvas[data-id="screen"]
 {
     border:0;
-    margin:0 auto;
+    margin: auto;
+    display: block;
 }

RemoteDesktop/build/debug/README.md

@@ -8,3 +8,8 @@ Further information on **wvnc**: [https://blog.lxsang.me/post/id/23](https://blo
 **Credit**
 * antd-wvnc-plugin: [https://github.com/lxsang/antd-wvnc-plugin](https://github.com/lxsang/antd-wvnc-plugin)
 * wvnc.js: [https://github.com/lxsang/wvnc.js](https://github.com/lxsang/wvnc.js)
+* 
+
+## Change logs
+
+* v0.1.0 - adapt to the new AntOS API

RemoteDesktop/build/debug/main.css

@@ -6,5 +6,6 @@ afx-app-window[data-id="RemoteDesktop"] div[data-id="container"]
 afx-app-window[data-id="RemoteDesktop"] canvas[data-id="screen"]
 {
     border:0;
-    margin:0 auto;
+    margin: auto;
+    display: block;
 }

RemoteDesktop/build/debug/package.json

@@ -6,7 +6,7 @@
         "author": "",
         "email": ""
     },
-    "version":"0.0.1-a",
+    "version":"0.1.0-a",
     "category":"Other",
     "icon": "icon.png",
     "mimes":["none"]

RemoteDesktop/coffees/main.coffee

@@ -1,113 +1,138 @@
 class ConnectionDialog extends this.OS.GUI.BasicDialog
     constructor: () ->
-        super "ConnectionDialog", {
+        super "ConnectionDialog", ConnectionDialog.scheme
-            tags: [
+        
-                { tag: "afx-label", att: 'text="__(VNC server)" data-height="23" class="header"' },
+    
-                { tag: "input", att: 'data-height="30"' },
+    main: () ->
-                { tag: "afx-label", att: 'text="__(Bits per pixel)" data-height="23" class="header"' },
+        super.main()
-                { tag: "afx-list-view", att: 'dropdown="true" data-height="30"' },
+        @find("bbp").data = [
-                { tag: "afx-label", att: 'text="__(Compression)" data-height="23" class="header"' },
+            { text: "16 bits", value: 16, selected: true }, 
-                { tag: "afx-list-view", att: 'dropdown="true" data-height="30"' },
+            { text: "32 bits", value: 32 }
-                { tag: "afx-label", att: 'text="__(JPEG quality)" data-height="23" class="header"' },
+        ]
-                { tag: "afx-slider", att: 'max="100" data-height="30"' },
+        @find("compression").data = [
-                { tag: "div", att: ' data-height="5"' }
-            ],
-            width: 350,
-            height: 280, 
-            resizable: false,
-            buttons: [
-                { 
-                    label: "__(Connect)",
-                    onclick: (d) ->
-                        return unless d.handler
-                        data =
-                            server: (d.find "content1").value
-                            bbp: ((d.find "content3").get "selected").value,
-                            flag: ((d.find "content5").get "selected").value,
-                            quality:((d.find "content7").get "value")
-                        d.handler data
-                        d.quit()
-                },
-                { label: "__(Cancel)", onclick: (d) -> d.quit() }
-            ],
-            filldata: (d) -> 
-                (d.find "content1").value = "/opt/www/vnc.conf"
-                (d.find "content3").set "items", [
-                    { text: "16 bits", value: 16 }, 
-                    { text: "32 bits", value: 32, selected:true}]
-                (d.find "content5").set "items", [
             {text: "No compression", value:0}, 
             {text: "JPEG", value:1},
             {text: "zLib", value:2},
             {text: "JPEG & zLib", value:3, selected:true}
         ]
-                (d.find "content7").set "value", 40
+        @find("jq").value = 40
-        }
+        @find("bt-ok").onbtclick = (e) =>
+            return unless @handle
+            data =
+                wvnc: (@find "txtWVNC").value
+                server: (@find "txtServer").value
+                bbp: (@find "bbp").selectedItem.data.value,
+                flag: (@find "compression").selectedItem.data.value,
+                quality:(@find "jq").value
+            @handle data
+            @quit()
+        
+        @find("bt-cancel").onbtclick = (e) =>
+            @quit()
+
+ConnectionDialog.scheme = """
+<afx-app-window width='350' height='270'>
+    <afx-hbox>
+        <div data-width="5"></div>
+        <afx-vbox>
+            <afx-label text="__(WVNC Websocket)" data-height="25" class="header" ></afx-label>
+            <input data-height="25" data-id="txtWVNC" value="wss://localhost/wvnc"></input>
+            <afx-label text="__(VNC Server)" data-height="25" class="header" ></afx-label>
+            <input data-height="25" data-id="txtServer" value="192.168.1.10:5900"></input>
+            <div data-height="5"></div>
+            <afx-label text="__(Bits per pixel)" data-height="25" class="header" ></afx-label>
+            <afx-list-view dropdown = "true" data-id ="bbp" data-height="25" ></afx-list-view>
+            <div data-height="5"></div>
+            <afx-label text="__(Compression)" data-height="25" class="header" ></afx-label>
+            <afx-list-view dropdown = "true" data-id ="compression" data-height="25" ></afx-list-view>
+            <div data-height="5"></div>
+            <afx-label text="__(JPEG quality)" data-height="25" class="header" ></afx-label>
+            <afx-slider data-id ="jq" data-height="25" ></afx-slider>
+            <afx-hbox data-height = '30'>
+                <div  style=' text-align:right;'>
+                    <afx-button data-id = "bt-ok" text = "__(Connect)"></afx-button>
+                    <afx-button data-id = "bt-cancel" text = "__(Cancel)"></afx-button>
+                </div>
+                <div data-width="5"></div>
+            </afx-hbox>
+        </afx-vbox>
+        <div data-width="5"></div>
+    </afx-hbox>
+</afx-app-window>
+
+"""
 
 class CredentialDialog extends this.OS.GUI.BasicDialog
     constructor: () ->
-        super "ConnectionDialog", {
+        super "CredentialDialog", CredentialDialog.scheme
-            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
+    main: () ->
+        @find("bt-ok").onbtclick = () =>
+            return @quit() unless @handle
+            data =
+                username: (@find "txtUser").value
+                password: (@find "txtPass").value
+            @handle data
+            @quit()
+        
+        @find("bt-cancel").onbtclick = () =>
+            @quit()
+
+CredentialDialog.scheme = """
+<afx-app-window width='350' height='150'>
+    <afx-vbox>
+        <afx-label text="__(Username)" data-height="25" class="header" ></afx-label>
+        <input data-height="30" data-id="txtUser"></input>
+        <afx-label text="__(Password)" data-height="25" class="header" ></afx-label>
+        <input type="password" data-height="30" data-id="txtPass"></input>
+        <afx-hbox data-height = '30'>
+            <div  style=' text-align:right;'>
+                <afx-button data-id = "bt-ok" text = "__(Ok)"></afx-button>
+                <afx-button data-id = "bt-cancel" text = "__(Cancel)"></afx-button>
+            </div>
+            <div data-width="5"></div>
+        </afx-hbox>
+    </afx-vbox>
+</afx-app-window>
+
+"""
+
+class RemoteDesktop extends this.OS.application.BaseApplication
     constructor: ( args ) ->
         super "RemoteDesktop", args
         
     main: () ->
-        me = @
         @canvas = @find "screen"
         @container = @find "container"
         @client = new WVNC { 
-            element: me.canvas,
+            element: @canvas,
-            ws: 'wss://localhost:9192/wvnc',
+            worker: "#{@_api.handle.get}/#{@meta().path}/decoder.js"
-            worker: "#{me._api.handler.get}/#{me.meta().path}/decoder.js"   
         }
-        @client.onerror = (m) ->
+        @client.onerror = (m) =>
-            me.error m
+            @error m
-            me.showConnectionDialog()
+            @showConnectionDialog()
-        @client.onresize = ()->
+        @client.onresize = ()=>
-            me.setScale()
+            @setScale()
-        @client.onpassword = ()->
+        @client.onpassword = ()=>
-            return new Promise (r,e)->
+            return new Promise (r,e)=>
-                me.openDialog "PromptDialog", (d) ->
+                @openDialog "PromptDialog", {
+                    title: __("VNC password"), 
+                    label: __("VNC password"),
+                    value: "!x$@n9ph",
+                    type: "password"
+                }
+                .then (d) ->
                     r(d) 
-                , __("VNC password"), { label: __("VNC password"), value: "demopass", type: "password" }
         
-        @client.oncredential = () ->
+        @client.oncredential = () =>
-            return new Promise (r,e) ->
+            return new Promise (r,e) =>
-                me.openDialog new CredentialDialog, (d) ->
+                @openDialog new CredentialDialog, { title: __("User credential") }
+                .then (d) ->
                     r(d.username, d.password)
-                , __("User credential")
+        @on "resize", (e)=> @setScale()
-        @on "resize", (e)-> me.setScale()
+        @on "focus", (e) => $(@canvas).focus()
-        @on "focus", (e) -> $(me.canvas).focus()
+        @client.init().then () => 
-        @client.init().then () -> 
+            @showConnectionDialog()
-            me.showConnectionDialog()
     
     setScale: () ->
         return unless @client and @client.resolution
@@ -118,15 +143,15 @@ class RemoteDesktop extends this.OS.GUI.BaseApplication
         if sx > sy then @client.setScale sy else @client.setScale sx
     
     menu: () ->
-        me = @
+        
         [
             {
                 text: "__(Connection)",
-                child: [
+                nodes: [
                     { text: "__(New Connection)", dataid: "#{@name}-new", },
                     { text: "__(Disconnect)", dataid: "#{@name}-close" }
                 ],
-                onmenuselect: (e) -> me.actionConnection()
+                onchildselect: (e) => @actionConnection()
             }
         ]
     
@@ -135,11 +160,15 @@ class RemoteDesktop extends this.OS.GUI.BaseApplication
         @showConnectionDialog()
     
     showConnectionDialog: () ->
-        me = @
+        
-        @openDialog new ConnectionDialog, (d) ->
+        @openDialog new ConnectionDialog, { title: __("Connection")}
-            me.client.connect d.server, d
+        .then (d) =>
-        , __("Connection")
+            @client.ws = d.wvnc
+            console.log d
+            @client.connect d.server, d
     
     cleanup: () ->
         @client.disconnect() if @client
+        
+        
 this.OS.register "RemoteDesktop", RemoteDesktop

RemoteDesktop/package.json

@@ -6,7 +6,7 @@
         "author": "",
         "email": ""
     },
-    "version":"0.0.1-a",
+    "version":"0.1.0-a",
     "category":"Other",
     "icon": "icon.png",
     "mimes":["none"]

RemoteDesktop/project.apj

@@ -1 +0,0 @@
-{"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"]}

RemoteDesktop/project.json

@@ -0,0 +1,8 @@
+{
+	"name": "RemoteDesktop",
+	"root": "home://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", "assets/icon.png"]
+}

packages.json

@@ -98,6 +98,15 @@
 		"version": "0.0.7-a",
 		"download": "https://raw.githubusercontent.com/lxsang/antosdk-apps/master/Preview/build/release/Preview.zip"
 	},
+	{
+		"pkgname": "RemoteDesktop",
+		"name": "WVNC remote desktop",
+		"description": "https://raw.githubusercontent.com/lxsang/antosdk-apps/master/RemoteDesktop/README.md",
+		"category": "Other",
+		"author": "",
+		"version": "0.1.0-a",
+		"download": "https://raw.githubusercontent.com/lxsang/antosdk-apps/master/RemoteDesktop/build/release/RemoteDesktop.zip"
+	},
 	{
 		"pkgname": "ShowCase",
 		"name": "ShowCase",