Hi Team,
I have added a button for the fullscreen in Guacamole 1.0.0 Version.
*FILE [ index.html ]*
<div class="toolbar" id="toolbar">
> <img src="images/logo-144.png" title="Fullscreen" draggable="false"
> class="ffullscreen" id="Fullscreen"
> ng-click="toolBarFunctionality.menuControl.menuFunction.onFullScreen()"
> style="background-image: url('images/logo-144.png');">
> </div>
>
*Controller [ indexController ]*
var *onFullScreen *= function ()
> {
> if (!document.fullscreenElement && !document.mozFullScreenElement &&
> !document.webkitFullscreenElement && !document.msFullscreenElement)
> { // current working methods
>
> document.getElementById("Fullscreen").style.backgroundImage =
> "url('/fes-bin/public/portal/html5/minimize.png')";
> document.getElementById("Fullscreen").title = "Exit fullScreen";
>
> if (document.documentElement.requestFullscreen) {
> document.documentElement.requestFullscreen();
> } else if (document.documentElement.msRequestFullscreen) {
> console.log('IE full screen called');
> document.documentElement.msRequestFullscreen();
> } else if (document.documentElement.mozRequestFullScreen) {
> document.documentElement.mozRequestFullScreen();
> } else if (document.documentElement.webkitRequestFullscreen) {
>
> document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
> }
> } else {
> document.getElementById("Fullscreen").style.backgroundImage =
> "url('/fes-bin/public/portal/html5/fullscreen.png')";
> document.getElementById("Fullscreen").title = "FullScreen";
>
> if (document.exitFullscreen) {
> document.exitFullscreen();
> } else if (document.msExitFullscreen) {
> document.msExitFullscreen();
> } else if (document.mozCancelFullScreen) {
> document.mozCancelFullScreen();
> } else if (document.webkitExitFullscreen) {
> document.webkitExitFullscreen();
> }
> }
>
> }
> $scope.toolBarFunctionality = {
> menuControl: {
> menuCss: {
> backColor: '',
> foreCOlor: ''
> },
> menuFunction: {
> onFullScreen : onFullScreen,
> onClick: function() {
> // raise event to toggle menu.
> $rootScope.$broadcast('menuClicked');
> }
> },
> }
> };
It is working in Chrome, Firefox, Safari and Edge.
It is not working in IE. I debugged and came to know that *OffsetHeight *and
*OffsetWidth *passed is zero.
var checkSize = function checkSize() {
> // Call callback only if size actually changed
> if (element.offsetWidth !== lastWidth
> || element.offsetHeight !== lastHeight) {
> // Call resize callback, if defined
> if (guacResize) {
> $scope.$evalAsync(function elementSizeChanged() {
> guacResize(element.offsetWidth,
> element.offsetHeight);
> });
> }
> // Update stored size
> lastWidth = element.offsetWidth;
> lastHeight = element.offsetHeight;
> }
> };
It closed the websocket connection as well because of the* kernel trap
divide error* .
I have fixed the above kernel trap error by adding the following :-
void guac_rdp_disp_set_size(guac_rdp_disp* disp, guac_rdp_settings*
> settings,
> freerdp* rdp_inst, int width, int height) {
>
>
> * /* Do not update size if no requests have been received */ if (width
> == 0 || height == 0) return;*
> /* Fit width within bounds, adjusting height to maintain aspect ratio
> */
> guac_rdp_disp_fit(&width, &height);
> /* Fit height within bounds, adjusting width to maintain aspect ratio
> */
> guac_rdp_disp_fit(&height, &width);
> /* Width must be even */
> if (width % 2 == 1)
> width -= 1;
> /* Store deferred size */
> disp->requested_width = width;
> disp->requested_height = height;
> /* Send display update notification if possible */
> guac_rdp_disp_update_size(disp, settings, rdp_inst);
> }
*but I couldn't find why document.msExitFullscreen() API is not working in
Guacamole.*
Any suggestions for the above ?
*Thanks and Regards,*
*Amarjeet Singh*
