1st version of RemoteDesktop using wvnc

This commit is contained in:
lxsang 2018-10-02 10:01:09 +00:00
parent aa07c5a57a
commit d04fc7a2af
14 changed files with 194 additions and 52 deletions

View File

@ -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**

Binary file not shown.

After

Width:  |  Height:  |  Size: 188 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 KiB

View File

@ -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;
}

View File

@ -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**

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 KiB

View File

@ -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;
}

File diff suppressed because one or more lines are too long

View File

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

Binary file not shown.

View File

@ -44,6 +44,37 @@ class ConnectionDialog extends this.OS.GUI.BasicDialog
(d.find "content7").set "value", 40 (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 class RemoteDesktop extends this.OS.GUI.BaseApplication
constructor: ( args ) -> constructor: ( args ) ->
super "RemoteDesktop", args super "RemoteDesktop", args
@ -54,7 +85,7 @@ class RemoteDesktop extends this.OS.GUI.BaseApplication
@container = @find "container" @container = @find "container"
@client = new WVNC { @client = new WVNC {
element: me.canvas, element: me.canvas,
ws: 'wss://localhost:9192/wvnc', ws: 'wss://lxsang.me/wvnc',
worker: "#{me._api.handler.get}/#{me.meta().path}/decoder.js" worker: "#{me._api.handler.get}/#{me.meta().path}/decoder.js"
} }
@client.onerror = (m) -> @client.onerror = (m) ->
@ -67,6 +98,12 @@ class RemoteDesktop extends this.OS.GUI.BaseApplication
me.openDialog "PromptDialog", (d) -> me.openDialog "PromptDialog", (d) ->
r(d) r(d)
, __("VNC password"), { label: __("VNC password"), value: "demopass", type: "password" } , __("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 "resize", (e)-> me.setScale()
@on "focus", (e) -> $(me.canvas).focus() @on "focus", (e) -> $(me.canvas).focus()
@client.init().then () -> @client.init().then () ->
@ -80,6 +117,23 @@ class RemoteDesktop extends this.OS.GUI.BaseApplication
sy = h / @client.resolution.h sy = h / @client.resolution.h
if sx > sy then @client.setScale sy else @client.setScale sx 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: () -> showConnectionDialog: () ->
me = @ me = @
@openDialog new ConnectionDialog, (d) -> @openDialog new ConnectionDialog, (d) ->

File diff suppressed because one or more lines are too long

View File

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

View File

@ -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"]}