RemoteDesktop: add toolbar for canvas control

This commit is contained in:
Dany LE 2023-01-07 14:51:15 +01:00
parent 90382e2f33
commit d1984d89b8
12 changed files with 60 additions and 25 deletions

View File

@ -7,6 +7,7 @@ Further information on **wvnc**: [https://blog.lxsang.me/post/id/23](https://blo
## Change logs
* v0.1.14 - Add toolbar for canvas size control
* v0.1.13 - support AntOS v2.0.x
* v0.1.12 - improve UI handling
* v0.1.11 - Support 16 bits per pixel

View File

@ -1,6 +1,7 @@
afx-app-window[data-id="RemoteDesktop"] div[data-id="container"]
{
background-color: #272822;
overflow: hidden;
}
afx-app-window[data-id="RemoteDesktop"] canvas[data-id="screen"]
{

View File

@ -1,7 +1,17 @@
<afx-app-window apptitle="VNC Remote Desktop" width="720" height="576" data-id="RemoteDesktop">
<afx-hbox >
<afx-vbox >
<div data-id="container">
<canvas data-id="screen"></canvas>
</div>
</afx-hbox>
<afx-hbox data-height="35">
<afx-button iconclass="fa fa-arrows-alt" data-id="btreset" data-width="content"></afx-button>
<div data-width = "5" ></div>
<afx-slider data-id="zoom" ></afx-slider>
<div data-width = "5" ></div>
<afx-button iconclass="bi bi-box-arrow-down" data-id="scroll_down" data-width="content"></afx-button>
<afx-button iconclass="bi bi-box-arrow-up" data-id="scroll_up" data-width="content"></afx-button>
<afx-button iconclass="bi bi-box-arrow-left" data-id="scroll_left" data-width="content"></afx-button>
<afx-button iconclass="bi bi-box-arrow-right" data-id="scroll_right" data-width="content"></afx-button>
</afx-hbox>
</afx-vbox>
</afx-app-window>

View File

@ -7,6 +7,7 @@ Further information on **wvnc**: [https://blog.lxsang.me/post/id/23](https://blo
## Change logs
* v0.1.14 - Add toolbar for canvas size control
* v0.1.13 - support AntOS v2.0.x
* v0.1.12 - improve UI handling
* v0.1.11 - Support 16 bits per pixel

View File

@ -1,6 +1,7 @@
afx-app-window[data-id="RemoteDesktop"] div[data-id="container"]
{
background-color: #272822;
overflow: hidden;
}
afx-app-window[data-id="RemoteDesktop"] canvas[data-id="screen"]
{

File diff suppressed because one or more lines are too long

View File

@ -7,7 +7,7 @@
"author": "Dany LE",
"email": "contact@iohub.dev"
},
"version":"0.1.13-b",
"version":"0.1.14-b",
"dependencies": [],
"category":"Internet",
"icon": "icon.png",

View File

@ -1,7 +1,17 @@
<afx-app-window apptitle="VNC Remote Desktop" width="720" height="576" data-id="RemoteDesktop">
<afx-hbox >
<afx-vbox >
<div data-id="container">
<canvas data-id="screen"></canvas>
</div>
</afx-hbox>
<afx-hbox data-height="35">
<afx-button iconclass="fa fa-arrows-alt" data-id="btreset" data-width="content"></afx-button>
<div data-width = "5" ></div>
<afx-slider data-id="zoom" ></afx-slider>
<div data-width = "5" ></div>
<afx-button iconclass="bi bi-box-arrow-down" data-id="scroll_down" data-width="content"></afx-button>
<afx-button iconclass="bi bi-box-arrow-up" data-id="scroll_up" data-width="content"></afx-button>
<afx-button iconclass="bi bi-box-arrow-left" data-id="scroll_left" data-width="content"></afx-button>
<afx-button iconclass="bi bi-box-arrow-right" data-id="scroll_right" data-width="content"></afx-button>
</afx-hbox>
</afx-vbox>
</afx-app-window>

View File

@ -57,7 +57,6 @@ class CredentialDialog extends this.OS.GUI.BasicDialog
password: (@find "txtPass").value
@handle data
@quit()
@find("bt-cancel").onbtclick = () =>
@quit()
@ -83,6 +82,29 @@ class RemoteDesktop extends this.OS.application.BaseApplication
main: () ->
@canvas = @find "screen"
@container = @find "container"
@zoom = @find "zoom"
@btreset = @find "btreset"
@zoom.max = 200
@zoom.value = 100
@zoom.onvaluechange = (e) => @setScale()
@find("scroll_down").onbtclick = (e) =>
@container.scrollTop += 20
@find("scroll_up").onbtclick = (e) =>
@container.scrollTop -= 20
@find("scroll_left").onbtclick = (e) =>
@container.scrollLeft -= 20
@find("scroll_right").onbtclick = (e) =>
@container.scrollLeft += 20
@btreset.onbtclick = (e) =>
w = $(@container).width()
h = $(@container).height()
sx = w / @client.resolution.w
sy = h / @client.resolution.h
if sx > sy
@zoom.value = sy*100
else
@zoom.value = sx*100
@setScale()
@client = new WVNC {
element: @canvas
}
@ -113,7 +135,7 @@ class RemoteDesktop extends this.OS.application.BaseApplication
@openDialog new CredentialDialog, { title: __("User credential") }
.then (d) ->
r(d.username, d.password)
@on "resize", (e)=> @setScale()
# @on "resize", (e)=> @setScale()
@on "focus", (e) => $(@canvas).focus()
@client.init().then () =>
@showConnectionDialog()
@ -136,12 +158,11 @@ class RemoteDesktop extends this.OS.application.BaseApplication
.catch (err) => @error err.toString(), err
setScale: () ->
console.log "scale changed"
return unless @client and @client.resolution
w = $(@container).width()
h = $(@container).height()
sx = w / @client.resolution.w
sy = h / @client.resolution.h
if sx > sy then @client.setScale sy else @client.setScale sx
@client.setScale @zoom.value / 100.0
@container.scrollLeft = 0
@container.scrollTop = 0
menu: () ->

View File

@ -7,7 +7,7 @@
"author": "Dany LE",
"email": "contact@iohub.dev"
},
"version":"0.1.13-b",
"version":"0.1.14-b",
"dependencies": [],
"category":"Internet",
"icon": "icon.png",

View File

@ -69,16 +69,6 @@
"dependencies": ["Antunnel@0.2.0-b"],
"download": "https://raw.githubusercontent.com/lxsang/antosdk-apps/2.0.x/AntunnelPlugins/build/release/AntunnelPlugins.zip"
},
{
"pkgname": "AntunnelTestClient",
"name": "AntunnelTestClient",
"description": "https://raw.githubusercontent.com/lxsang/antosdk-apps/2.0.x/AntunnelTestClient/README.md",
"category": "Development",
"author": "Dany LE",
"version": "0.1.0-a",
"dependencies": ["Antunnel@0.2.1-b"],
"download": "https://raw.githubusercontent.com/lxsang/antosdk-apps/2.0.x/AntunnelTestClient/build/release/AntunnelTestClient.zip"
},
{
"pkgname": "Archive",
"name": "Archive",
@ -365,7 +355,7 @@
"description": "https://raw.githubusercontent.com/lxsang/antosdk-apps/2.0.x/RemoteDesktop/README.md",
"category": "Internet",
"author": "Dany LE",
"version": "0.1.13-b",
"version": "0.1.14-b",
"dependencies": [],"category":"Internet","icon":"icon.png","mimes":["none"],
"download": "https://raw.githubusercontent.com/lxsang/antosdk-apps/2.0.x/RemoteDesktop/build/release/RemoteDesktop.zip"
},