You are viewing a plain text version of this content. The canonical link for it is here.
Posted to user@guacamole.apache.org by "Natale, Manuel Giovanni" <ma...@capgemini.com.INVALID> on 2023/06/06 08:18:22 UTC
Double cursor Guacamole Angular12 Client
Hi,
I'm having problems with my project, I'm using Angular12 and Java18 with Guacamole packages. I get double cursor in the remote window I get with RDP. Can you give me some help please?
Thanks,
Manuel
This message contains information that may be privileged or confidential and is the property of the Capgemini Group. It is intended only for the person to whom it is addressed. If you are not the intended recipient, you are not authorized to read, print, retain, copy, disseminate, distribute, or use this message or any part thereof. If you receive this message in error, please notify the sender immediately and delete all copies of this message.
Re: Double cursor Guacamole Angular12 Client
Posted by Nick Couchman <vn...@apache.org>.
On Wed, Jun 7, 2023 at 3:43 AM Natale, Manuel Giovanni
<ma...@capgemini.com.invalid> wrote:
>
> Here is my code:
Looking through your code, I do not see anywhere that you are handling
the cursor visibility settings in JavaScript the way that the
Guacamole Client code does (particularly in the two files that I
linked). You'll need to modify your code to handle situations where
you expect the remote system to render the cursor and set the cursor
visibility appropriately in JavaScript.
-Nick
---------------------------------------------------------------------
To unsubscribe, e-mail: user-unsubscribe@guacamole.apache.org
For additional commands, e-mail: user-help@guacamole.apache.org
RE: Double cursor Guacamole Angular12 Client
Posted by "Natale, Manuel Giovanni" <ma...@capgemini.com.INVALID>.
Here is my code:
FE
video-production.component.html
<div id="appDisplay" class="row g-0 justify-content-center app-display"></div>
video-production.component.ts
import { Component, OnInit, ViewEncapsulation, ViewChild, ElementRef, HostListener } from '@angular/core';
import { MatSnackBar } from '@angular/material/snack-bar';
import { HTTPTunnel, Client, Display, Keyboard, Mouse, Layer } from '@illgrenoble/guacamole-common-js';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
import * as FileSaver from 'file-saver';
import { DomSanitizer } from '@angular/platform-browser';
import { RemoteDesktopManager, RemoteDesktopComponent } from '@illgrenoble/ngx-remote-desktop';
//import { ClipboardModalComponent } from '../clipboard-modal';
import { _getFocusedElementPierceShadowDom } from '@angular/cdk/platform';
import { BaseApiService } from '../../service/base-service/base-api.service';
import { Subscription } from 'rxjs';
import { DynamicDialogRef } from 'primeng/dynamicdialog';
import { DynamicDialogConfig } from 'primeng/dynamicdialog';
@Component({
selector: 'app-video-production',
templateUrl: './video-production.component.html',
styleUrls: ['./video-production.component.scss'],
encapsulation: ViewEncapsulation.None,
})
export class VideoProductionComponent implements OnInit {
public manager: RemoteDesktopManager;
private desktopComponent: RemoteDesktopComponent;
public captures: Array<any>;
@ViewChild("canvas") public canvas: ElementRef;
private screenHeight;
private screenWidth;
private display: Display;
constructor(private ngbModal: NgbModal,
private snackBar: MatSnackBar,
private _sanitizer: DomSanitizer,
private baseService: BaseApiService,
public ref: DynamicDialogRef,
public config: DynamicDialogConfig
) {
this.captures = [];
}
private baseUrl = localStorage.getItem('baseUrl');
private mouse: Mouse;
private keyboard: Keyboard;
private subscriptions: Subscription[] = [];
ngOnInit() {
const tunnel = new HTTPTunnel(this.baseUrl + '/api/tunnel', false, { 'Authorization': `Bearer ${this.baseService.getToken()}` });
this.manager = new RemoteDesktopManager(tunnel);
this.handleConnect();
this.display = this.manager.getClient().getDisplay();
let displayContainer = document.getElementById('appDisplay');
let displayElement = this.manager.getClient().getDisplay().getElement();
displayContainer.appendChild(displayElement);
this.desktopComponent = new RemoteDesktopComponent();
this.desktopComponent
this.createDisplayInputs(displayContainer);
this.bindSubscriptions();
this.manager.onTunnelInstruction.subscribe();
}
handleScreenshot(): void {
this.manager.createScreenshot(blob => {
if (blob) {
FileSaver.saveAs(blob, `screenshot.png`);
}
});
}
clickCloseVmix() {
this.ref.close();
}
createModal(classRef) {
this.manager.setFocused(false);
const modal = this.ngbModal.open(classRef, {
size: 'lg',
windowClass: 'modal-xxl',
container: '.ngx-remote-desktop',
keyboard: true
});
modal.componentInstance.manager = this.manager;
return modal;
}
handleDisconnect(): void {
this.manager.getClient().disconnect();
}
handleEnterFullScreen() {
this.manager.setFullScreen(true);
}
handleExitFullScreen() {
this.manager.setFullScreen(false);
}
private getClient(): Client {
return this.manager.getClient();
}
private handleMouseState(mouseState: any): void {
this.getClient().sendMouseState(mouseState);
}
handleConnect() {
const parameters = {
hostname: 'localhost',
port: 8081,
image: 'image/png',
audio: 'audio/L16',
dpi: 96,
width: window.screen.width,
height: window.screen.height,
};
this.manager.connect(parameters);
}
private getDisplay(): Display {
return this.manager.getClient().getDisplay();
}
private handleKeyUp(key: any): void {
this.getClient().sendKeyEvent(0, key);
}
private handleKeyDown(key: any): void {
this.getClient().sendKeyEvent(1, key);
}
private createDisplayInputs(display): void {
this.mouse = new Mouse(display);
this.keyboard = new Keyboard(window.document);
}
private resetKeyboard(): void {
if (this.keyboard) {
this.keyboard.reset();
}
}
private bindDisplayInputListeners(): void {
this.removeDisplayInputListeners();
this.mouse.onmousedown = this.mouse.onmouseup = this.mouse.onmousemove = this.handleMouseState.bind(this);
this.keyboard.onkeyup = this.handleKeyUp.bind(this);
this.keyboard.onkeydown = this.handleKeyDown.bind(this);
}
private handleFocused(newFocused: boolean): void {
if (newFocused) {
this.bindDisplayInputListeners();
} else {
this.removeDisplayInputListeners();
}
}
/**
* Bind all subscriptions
*/
private bindSubscriptions(): void {
this.subscriptions.push(this.manager.onKeyboardReset.subscribe(_ => {
console.log("AAA 3 onKeyboardReset bindSubscriptions " + JSON.stringify(_)),
this.resetKeyboard()
}));
this.subscriptions.push(this.manager.onFocused.subscribe(this.handleFocused.bind(this)));
}
/**
* Unbind all subscriptions
*/
private unbindSubscriptions(): void {
this.subscriptions.forEach(subscription => subscription.unsubscribe());
}
/**
* Remove all input listeners
*/
private removeDisplayInputListeners(): void {
if (this.keyboard) {
this.keyboard.onkeydown = null;
this.keyboard.onkeyup = null;
}
/*if (this.mouse) {
this.mouse.onmousedown = this.mouse.onmouseup = this.mouse.onmousemove = null;
}*/
}
}
This is my package.json:
{
"name": "frontend",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"start_demo": "ng serve --proxy-config proxy.conf.json",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@angular/animations": "~12.2.3",
"@angular/cdk": "~12.2.3",
"@angular/common": "~12.2.3",
"@angular/compiler": "~12.2.3",
"@angular/core": "~12.2.3",
"@angular/forms": "~12.2.3",
"@angular/http": "^7.2.16",
"@angular/localize": "^12.2.3",
"@angular/material": "^12.2.13",
"@angular/material-moment-adapter": "^12.2.3",
"@angular/platform-browser": "~12.2.3",
"@angular/platform-browser-dynamic": "~12.2.3",
"@angular/router": "~12.2.3",
"@ctrl/ngx-codemirror": "^1.1.0",
"@fullcalendar/core": "^5.11.3",
"@illgrenoble/guacamole-common-js": "^0.0.1",
"@illgrenoble/ngx-remote-desktop": "^1.4.2",
"@ng-bootstrap/ng-bootstrap": "^9.0.1",
"@ngx-translate/core": "^10.0.1",
"@ngx-translate/http-loader": "^4.0.0",
"angular-http-server": "^1.11.1",
"angular-l10n": "~3.4.1",
"angular2-toaster": "^8.0.0",
"booking_calendar": "^1.0.40",
"buffer": "^5.5.0",
"chart.js": "^2.9.3",
"codemirror": "^5.34.0",
"electron": "^20.1.0",
"events": "^3.1.0",
"file-saver": "^2.0.2",
"moment": "^2.24.0",
"ng2-charts": "^2.3.0",
"ng2-handsontable": "^2.1.0-rc.3",
"ngx-cookie-service": "^14.0.1",
"ngx-fs": "0.0.1",
"ngx-pagination": "^6.0.2",
"primeicons": "^2.0.0",
"primeng": "9.0.2",
"quill": "^1.3.7",
"rxjs": "~6.6.7",
"rxjs-compat": "^6.5.5",
"sass": "^1.54.8",
"screenfull": "^3.3.2",
"stream": "0.0.2",
"timers": "^0.1.1",
"tslib": "^2.5.2",
"zone.js": "~0.11.4"
},
"devDependencies": {
"@angular-devkit/build-angular": "^12.2.18",
"@angular/cli": "^12.2.2",
"@angular/compiler-cli": "~12.2.3",
"@angular/language-service": "~12.2.3",
"@types/jasmine": "~3.6.0",
"@types/jasminewd2": "~2.0.3",
"@types/node": "~8.9.4",
"codelyzer": "^6.0.0",
"concurrently": "^7.3.0",
"jasmine-core": "~3.6.0",
"jasmine-spec-reporter": "~5.0.0",
"karma": "~6.3.4",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage-istanbul-reporter": "~3.0.2",
"karma-jasmine": "~4.0.0",
"karma-jasmine-html-reporter": "^1.5.0",
"protractor": "~7.0.0",
"ts-node": "~7.0.0",
"tslint": "~6.1.0",
"typescript": "~4.3.5",
"webpack": "^5.74.0",
"webpack-dev-server": "^3.11.3"
}
}
BE GuacamoleController
configuration.setProtocol("rdp");
configuration.setParameter("hostname", "vmix.local");
configuration.setParameter("port", "3389");
configuration.setParameter("username", "vmix");
configuration.setParameter("password", "password");
configuration.setParameter("ignore-cert", "true");
// Connect to guacd, proxying a connection to the VNC server above
GuacamoleSocket socket = new ConfiguredGuacamoleSocket(
new InetGuacamoleSocket(server, port),
configuration
);
// Create tunnel from now-configured socket
org.apache.guacamole.net.GuacamoleTunnel tunnel = new SimpleGuacamoleTunnel(socket);
return tunnel;
Here is a preview of the bug:
https://imgtr.ee/i/double-cursor.plNpz
Thanks,
Manuel
-----Original Message-----
From: Nick Couchman <vn...@apache.org>
Sent: martedì 6 giugno 2023 17:07
To: user@guacamole.apache.org
Subject: Re: Double cursor Guacamole Angular12 Client
******This mail has been sent from an external source. Do not reply to it, or open any links/attachments unless you are sure of the sender's identity.******
On Tue, Jun 6, 2023 at 4:1 AM Natale, Manuel Giovanni <ma...@capgemini.com.invalid> wrote:
>
> Hi,
>
>
>
> I’m having problems with my project, I’m using Angular12 and Java18 with Guacamole packages. I get double cursor in the remote window I get with RDP. Can you give me some help please?
>
>
You'll need to provide more detail than this - the full Guacamole Client does not have this issue, so it definitely can be handled correctly, but, without seeing your code and knowing how you're leveraging things, it's hard to say exactly what the issue is.
If you look at the Guacamole client code, specifically the guacClient directive and the display CSS file, you'll see a bunch of code that deals with handling how and when the cursor is displayed:
https://github.com/apache/guacamole-client/blob/master/guacamole/src/main/frontend/src/app/client/directives/guacClient.js
https://github.com/apache/guacamole-client/blob/master/guacamole/src/main/frontend/src/app/client/styles/display.css
-Nick
---------------------------------------------------------------------
To unsubscribe, e-mail: user-unsubscribe@guacamole.apache.org
For additional commands, e-mail: user-help@guacamole.apache.org
This message contains information that may be privileged or confidential and is the property of the Capgemini Group. It is intended only for the person to whom it is addressed. If you are not the intended recipient, you are not authorized to read, print, retain, copy, disseminate, distribute, or use this message or any part thereof. If you receive this message in error, please notify the sender immediately and delete all copies of this message.
---------------------------------------------------------------------
To unsubscribe, e-mail: user-unsubscribe@guacamole.apache.org
For additional commands, e-mail: user-help@guacamole.apache.org
Re: Double cursor Guacamole Angular12 Client
Posted by Nick Couchman <vn...@apache.org>.
On Tue, Jun 6, 2023 at 4:18 AM Natale, Manuel Giovanni
<ma...@capgemini.com.invalid> wrote:
>
> Hi,
>
>
>
> I’m having problems with my project, I’m using Angular12 and Java18 with Guacamole packages. I get double cursor in the remote window I get with RDP. Can you give me some help please?
>
>
You'll need to provide more detail than this - the full Guacamole
Client does not have this issue, so it definitely can be handled
correctly, but, without seeing your code and knowing how you're
leveraging things, it's hard to say exactly what the issue is.
If you look at the Guacamole client code, specifically the guacClient
directive and the display CSS file, you'll see a bunch of code that
deals with handling how and when the cursor is displayed:
https://github.com/apache/guacamole-client/blob/master/guacamole/src/main/frontend/src/app/client/directives/guacClient.js
https://github.com/apache/guacamole-client/blob/master/guacamole/src/main/frontend/src/app/client/styles/display.css
-Nick
---------------------------------------------------------------------
To unsubscribe, e-mail: user-unsubscribe@guacamole.apache.org
For additional commands, e-mail: user-help@guacamole.apache.org