Project

General

Profile

Feature #2673

support a kind of virtual desktop in the GUI web client

Added by Greg Shah over 8 years ago. Updated over 5 years ago.

Status:
WIP
Priority:
Normal
Target version:
-
Start date:
Due date:
% Done:

0%

billable:
No
vendor_id:
GCD

HotelGuiDesktopImage.png (313 KB) Sergey Ivanovskiy, 10/08/2018 10:15 AM

login_with_logo_bad.png (40.9 KB) Eric Faulhaber, 10/15/2018 05:20 PM

login_new.png (36.5 KB) Eric Faulhaber, 10/16/2018 12:49 PM

desktop_new.png (126 KB) Eric Faulhaber, 10/16/2018 12:49 PM


Related issues

Related to User Interface - Feature #1811: implement the AJAX client driver Closed 11/01/2013 03/06/2014

History

#1 Updated by Greg Shah over 8 years ago

The idea here is to make sure that users can interact with the GUI web client in the similar use patterns to how they can under the 4GL (on a Windows system).

  • The web page already is a kind of desktop or screen. We define that "screen size" in GuiWebDriver, defaulting it to 768 x 1024 BUT allowing each dimension to be overridden by in the directory (see GuiWebDriver.init() and WebClientBuilderOptions.readOptions()). That definition is really only considered on the Java side. We don't fix the size of the web page itself.
  • More worrisome, is that we don't provide any way for accessing windows that are positioned outside of the currently visible web page space. We should support scrollbars when the defined screen size in Java is larger than the viewable page size in the browser.
  • We should provide wallpaper support. We can allow a scaled or cropped image configured in the directory and if it is specified, send it down to the JS side for display as the desktop background.
  • Provide the ability to set the "desktop background" to a specific color.
  • At the login prompt, optionally add a drop-down that allows the user to choose the UI theme. Then make sure to pass that as part of the bootstrap configuration (using client:driver:theme) when launching the web client. If this feature is not enabled in the directory, then the drop-down would not be displayed.
  • Provide a way for custom information to be displayed on the desktop. For example, we might want to allow log entries, server status information or other custom data to be displayed in a read-only "window" that can be seen in this "desktop".
  • Implement the ability to change the user's OS password. This is needed at the initial login panel, not actually in the virtual desktop itself.

#2 Updated by Greg Shah over 8 years ago

More worrisome, is that we don't provide any way for accessing windows that are positioned outside of the currently visible web page space. We should support scrollbars when the defined screen size in Java is larger than the viewable page size in the browser.

Actually, this works now (e.g. branch 1811q revision 11007).

#3 Updated by Greg Shah about 8 years ago

  • Target version deleted (Milestone 12)
  • Parent task deleted (#1811)

#4 Updated by Greg Shah over 5 years ago

The web page already is a kind of desktop or screen. We define that "screen size" in GuiWebDriver, defaulting it to 768 x 1024 BUT allowing each dimension to be overridden by in the directory (see GuiWebDriver.init() and WebClientBuilderOptions.readOptions()). That definition is really only considered on the Java side. We don't fix the size of the web page itself.

Sergey: Is this still an issue?

#5 Updated by Sergey Ivanovskiy over 5 years ago

Yes, the web client updates the desktop size using this message MSG_GET_DESKTOP_DIMENSION. I looked at p2j.socket.js and p2j.screen.js. It seems that its implementation is complete.

#6 Updated by Sergey Ivanovskiy over 5 years ago

This issue is fixed.

#7 Updated by Greg Shah over 5 years ago

  • Assignee set to Sergey Ivanovskiy
  • Status changed from New to WIP

Sergey, please work on the following:

  • We should provide wallpaper support. We can allow a scaled or cropped image configured in the directory and if it is specified, send it down to the JS side for display as the "desktop background".
  • Provide the ability to set the "desktop background" to a specific color.
  • At the login prompt, optionally add a drop-down that allows the user to choose the UI theme. Then make sure to pass that as part of the bootstrap configuration (using client:driver:theme) when launching the web client. If this feature is not enabled in the directory, then the drop-down would not be displayed.

I would like to make sure these are implemented by the end of September.

#8 Updated by Sergey Ivanovskiy over 5 years ago

We have SET_DESKTOP_BGCOLOR drawing primitive that is used to set background colors in the embedded mode client with help of p2j.js and cross-domain message for the embedded frame page.

      /**
       * Set the default desktop background color.
       * 
       * @param    {String} rgb
       *           The CSS color string.
       */
      p2j.setDefaultDesktopBgcolor = function(rgb)
      {
         p2j.defaultDesktopBgcolor = rgb;
      };

      /**
       * Set the desktop background color.
       * 
       * @param    {String} rgb
       *           The CSS color string.
       */
      p2j.setDesktopBgColor = function (rgb)
      {
         if (p2j.embedded)
         {
            if (p2j.defaultDesktopBgcolor)
            {
               rgb = p2j.defaultDesktopBgcolor;
            }

            setStyleForElement(document.body, {background : rgb});
         }
      }

It seems that the background images for virtual desktop should be implemented similarly to the embedded fonts.

#9 Updated by Sergey Ivanovskiy over 5 years ago

Please help to answer if there is a way to enumerate all supported themes. The supported themes can be made hard coded values.

#10 Updated by Ovidiu Maxiniuc over 5 years ago

Sergey Ivanovskiy wrote:

Please help to answer if there is a way to enumerate all supported themes. The supported themes can be made hard coded values.

The Themes do not register themselves in any way. For the moment there are just 4 of them: ClassicTheme, Windows10Theme, Windows8Theme and MaterialTheme, all in the same package com.goldencode.p2j.ui.client.gui.theme. A fifth one exist FwdEnhancedTheme, but I think the issues it addresses were fixed in Windows10Theme so I expect we will drop it. You can hardcode this list and use it to set the Theme in the client using ThemeManager.setTheme(String) method.

Alternatively, we can scan for non-abstract classes that implement Theme interface. They are normally found in the dedicated package: com.goldencode.p2j.ui.client.gui.theme.

#11 Updated by Sergey Ivanovskiy over 5 years ago

OK, thank you. I found that there is reflections-0.9.9-RC1.jar in the build/lib but build.gradle doesn't list this library explicitly. We can use this library to list all sub classes of Theme in this package com.goldencode.p2j.ui.client.gui.theme

#12 Updated by Eric Faulhaber over 5 years ago

I think the themes available to a user should come from a list in the directory, not from every available subclass of Theme. Administrators will want to control this.

#13 Updated by Sergey Ivanovskiy over 5 years ago

Planning to get all available themes from the directory.

#14 Updated by Sergey Ivanovskiy over 5 years ago

I don't understand but this code returns null value for nodePath1

      DirectoryService ds = DirectoryService.getInstance();

      if (!ds.bind())
      {
         throw new RuntimeException("directory bind failed");
      }

      try
      {
         String nodePath = Utils.findDirectoryNodePath(ds, "available-themes", "container", DirScope.BOTH, null);
         String nodePath1 = Utils.findDirectoryNodePath(ds, "webClient", "container", DirScope.BOTH, null);
.................................

I tried to add available themes to the directory but failed?
          <node class="container" name="available-themes">
            <node class="theme" name="theme1">
              <node-attribute name="value" value="com.goldencode.p2j.ui.client.gui.theme.Windows10Theme"/>
              <node-attribute name="name" value="Windows 10"/>
              <node-attribute name="default" value="TRUE"/>
            </node>
            <node class="theme" name="theme2">
              <node-attribute name="value" value="com.goldencode.p2j.ui.client.gui.theme.Windows8Theme"/>
              <node-attribute name="name" value="Windows 8"/>
            </node>
            <node class="theme" name="theme3">
              <node-attribute name="value" value="com.goldencode.p2j.ui.client.gui.theme.ClassicTheme"/>
              <node-attribute name="name" value="Windows Classic"/>
            </node>
            <node class="theme" name="theme4">
              <node-attribute name="value" value="com.goldencode.p2j.ui.client.gui.theme.MaterialTheme"/>
            </node>
          </node>

#15 Updated by Ovidiu Maxiniuc over 5 years ago

I think you need to define the theme node type in src/dir_schema.xml.

#16 Updated by Sergey Ivanovskiy over 5 years ago

I defined this new class but SecurityManager.getAccountIds() throws NullPointerException

   public String[] getAccountIds() 
   {
      // find the security cache
      SecurityContextStack ctxs = SecurityContextStack.getContext(); // <--------------------returns null here

with this stack trace
NullPointerException.<init>() line: 60 [local variables unavailable]    
SecurityManager.getAccountIds() line: 3740    
Utils.getDirectoryNodeWorker(DirectoryService, String, String, Utils$DirectoryHelper, Utils$DirScope, String[]) line: 2786    
Utils.findDirectoryNodePath(DirectoryService, String, String, Utils$DirScope, String[]) line: 2667    

#17 Updated by Eric Faulhaber over 5 years ago

Do we really need a separate theme directory class? This essentially is just a key/value mapping between strings. Can't we just use the entry class instead? The only difference is the additional default value, but that can be done with a separate but related directory setting.

Why does the material theme not have a key/name?

#18 Updated by Sergey Ivanovskiy over 5 years ago

I realized that it is done intentionally due to security restriction. If this code is invoked from StandardServer during initialization it works properly. OK. I will use entry class with key and value map. The reason to use this new class is to be able to write only the class path name

<node class="container" name="available-themes">
.................................................
            <node class="theme" name="theme4">
              <node-attribute name="value" value="com.goldencode.p2j.ui.client.gui.theme.MaterialTheme"/>
            </node>
..................................................
</node>

#19 Updated by Sergey Ivanovskiy over 5 years ago

I was trying to set theme via "client:driver:theme"

        <node class="container" name="remotelaunchoption">
          <node class="container" name="000100">
            <node class="resource" name="resource-instance">
              <node-attribute name="reference" value="client:driver:theme"/>
              <node-attribute name="reftype" value="TRUE"/>
            </node>
            <node class="remoteLaunchOptionRights" name="rights">
              <node-attribute name="allow" value="true"/>
            </node>
            <node class="strings" name="subjects">
              <node-attribute name="values" value="all_others"/>
            </node>
          </node>
        </node>

but found that this code in WebHandler.verifySpawnOptions doesn't work since the security context for the web client os user is not defined and
SecurityContextStack scs = SecurityContextStack.getContext(); returns null in this stack trace
SecurityManager.getPluginInstance(String) line: 4962    
WebHandler.verifySpawnOptions(String, String[]) line: 857    
WebHandler.spawnWorker(String, String, boolean, String[], boolean, String, String[]) line: 794    
WebHandler.doPost(String, Request, HttpServletRequest, HttpServletResponse) line: 599    
WebHandler.handle(String, Request, HttpServletRequest, HttpServletResponse) line: 452    

#20 Updated by Sergey Ivanovskiy over 5 years ago

Greg, please could you advise to do in this case. WebHandler.verifySpawnOptions is used for the trusted mode in this case security context is setup properly. Could we bypass verifySpawnOptions for this client:driver:theme in the virtual desktop mode?

#21 Updated by Constantin Asofiei over 5 years ago

Sergey, for reading the available themes from the directory, follow the FontTable.readFontTable approach; these should NOT be read on every request of WebHandler.doGet, but passed as an argument to the WebHandler c'tor, when the server initializes this; you should have no problem reading this from the server's context.

For the client:driver:theme case - the idea here is the theme chosen from the drop-down must override any other configured theme; you don't need to set anything in the directory.

WebHandler.doPost just has to pass this theme as client:driver:theme=<themeid> to spawnWorker's options parameter (a single element array). Everything else should fall in place and override the client's theme - have you tried this?

#22 Updated by Sergey Ivanovskiy over 5 years ago

Constantin Asofiei wrote:

Sergey, for reading the available themes from the directory, follow the FontTable.readFontTable approach; these should NOT be read on every request of WebHandler.doGet, but passed as an argument to the WebHandler c'tor, when the server initializes this; you should have no problem reading this from the server's context.

Yes. I followed this way.

For the client:driver:theme case - the idea here is the theme chosen from the drop-down must override any other configured theme; you don't need to set anything in the directory.

Yes, I did it and provided theme via option.

WebHandler.doPost just has to pass this theme as client:driver:theme=<themeid> to spawnWorker's options parameter (a single element array). Everything else should fall in place and override the client's theme - have you tried this?

Don't understand. Now the options are verified against security context. Since this context is not set, all options are forbidden. Don't know another ways except these ones: to bypass options verifications for client:driver:theme or to setup the security context as we do for admin applet.

#23 Updated by Constantin Asofiei over 5 years ago

Sergey Ivanovskiy wrote:

Don't understand. Now the options are verified against security context. Since this context is not set, all options are forbidden.

Ah, you are right, when WebHandler.verifySpawnOptions is called we are on a contextless thread. So, now that I understand correctly your original question: Could we bypass verifySpawnOptions for this client:driver:theme in the virtual desktop mode? - I think this is the way to do it - only client:driver:theme is white-listed, and only if we are in a contextless thread. If there is any other option (in this contextless thread case), we treat it as 'access forbidden' and do not move forward with the spawn command.

Please make sure that the theme ID in doPost is fully validated (is a well known theme ID in FWD, and nothing else) - if this is not valid, return immediately with a 'theme ID not valid' error code.

There is no reason to otherwise validate these options, as we have no user-specific context at the time of this call; we could only rely on the server's context (if we use an AssociatedThread with the server's context and delegate the option validation to that thread), but I think this is overkill, as no other option can be injected into the spawn command by the user, at the time of login.

#24 Updated by Sergey Ivanovskiy over 5 years ago

Please review the committed rev 11337 that added UI Theme drop down for the web client. The UI themes are given by available-themes node under /server/default

        <node class="container" name="available-themes">
          <node class="entry" name="theme1">
            <node-attribute name="key" value="com.goldencode.p2j.ui.client.gui.theme.Windows10Theme"/>
            <node-attribute name="value"  value="Windows 10"/>
          </node>
          <node class="entry" name="theme2">
            <node-attribute name="key" value="com.goldencode.p2j.ui.client.gui.theme.Windows8Theme"/>
            <node-attribute name="value"  value="Windows 8"/>
          </node>
          <node class="entry" name="theme3">
            <node-attribute name="key" value="com.goldencode.p2j.ui.client.gui.theme.ClassicTheme"/>
            <node-attribute name="value"  value="Windows Classic"/>
          </node>
          <node class="entry" name="theme4">
            <node-attribute name="key" value="com.goldencode.p2j.ui.client.gui.theme.MaterialTheme"/>
          </node>
        </node>

#25 Updated by Greg Shah over 5 years ago

Constantin: Please review.

#26 Updated by Constantin Asofiei over 5 years ago

Sergey Ivanovskiy wrote:

Please review the committed rev 11337

What branch is this in?

#27 Updated by Sergey Ivanovskiy over 5 years ago

This code rev 11337 from 3600e is in the trunc rev 11286 already. The rest independent part of my task is to set the virtual desktop image. It will be committed today at 3706a.

#28 Updated by Constantin Asofiei over 5 years ago

Review for 3600e rev 11337 (now in trunk 11286):
  • WebHandler.doPost - you need to validate base.getParameter("theme"); against the configured, available themes, which you have saved in WebHandler.THEMES_UI; if this theme parameter is not a valid theme (as configured in the directory's available themse), you need abort authentication. Otherwise, this will be a security hole, where someone can enter whatever it wants, even something like bogus client:driver:type=gui_swing.
  • WebHandler.spawnWorker - you have an extra param in the javadoc
  • why is the OutputManager.instance() change required for this task? Is this trying to initialize itself during the auth process (when you call !SecurityManager.getInstance().hasContext();)?

#29 Updated by Sergey Ivanovskiy over 5 years ago

Constantin Asofiei wrote:

Review for 3600e rev 11337 (now in trunk 11286):
  • WebHandler.doPost - you need to validate base.getParameter("theme"); against the configured, available themes, which you have saved in WebHandler.THEMES_UI; if this theme parameter is not a valid theme (as configured in the directory's available themse), you need abort authentication. Otherwise, this will be a security hole, where someone can enter whatever it wants, even something like bogus client:driver:type=gui_swing.
  • WebHandler.spawnWorker - you have an extra param in the javadoc

Ok, thank you, planning to fix these two issues in 3706a.

  • why is the OutputManager.instance() change required for this task? Is this trying to initialize itself during the auth process (when you call !SecurityManager.getInstance().hasContext();)?

No, it has been invoked at this step

OutputManager<P>.instance() line: 341    
OutputManager<P>.getDriver() line: 354    
MaterialTheme.<init>() line: 139    
NativeConstructorAccessorImpl.newInstance0(Constructor<?>, Object[]) line: not available [native method]    
NativeConstructorAccessorImpl.newInstance(Object[]) line: 62    
DelegatingConstructorAccessorImpl.newInstance(Object[]) line: 45    
Constructor<T>.newInstance(Object...) line: 423    
Class<T>.newInstance() line: 442    
WebHandler$ThemeUI.instantiate(String) line: 1161    
WebHandler.getAvailableThemes() line: 1045    
WebHandler.<clinit>() line: 150    
StandardServer$14.initialize() line: 1360    
StandardServer.hookInitialize() line: 1956    
StandardServer.bootstrap(BootstrapConfig) line: 959    

#30 Updated by Constantin Asofiei over 5 years ago

Sergey Ivanovskiy wrote:

  • why is the OutputManager.instance() change required for this task? Is this trying to initialize itself during the auth process (when you call !SecurityManager.getInstance().hasContext();)?

No, it has been invoked at this step
[...]

Hmm... ideally we wouldn't need to instantiate the theme to get its name. An annotation would be helpful here - Ovidiu, any thoughts?

#31 Updated by Sergey Ivanovskiy over 5 years ago

Constantin Asofiei wrote:

Sergey Ivanovskiy wrote:

  • why is the OutputManager.instance() change required for this task? Is this trying to initialize itself during the auth process (when you call !SecurityManager.getInstance().hasContext();)?

No, it has been invoked at this step
[...]

Hmm... ideally we wouldn't need to instantiate the theme to get its name. An annotation would be helpful here - Ovidiu, any thoughts?

It has been done in order to check the validity of theme keys.

#32 Updated by Constantin Asofiei over 5 years ago

Sergey Ivanovskiy wrote:

Hmm... ideally we wouldn't need to instantiate the theme to get its name. An annotation would be helpful here - Ovidiu, any thoughts?

It has been done in order to check the validity of theme keys.

You can use Theme.class.isAssignableFrom(Class.forName(<clsName>) to check if this is a valid theme; the only need to get an instance is to get the theme name; if we have class-level annotation with the theme name, then no instance is required.

#33 Updated by Sergey Ivanovskiy over 5 years ago

Agree that class annotations can be used for theme name, but in this case we will add new dependency. Theme interface has method getName(). Is it a key only?
Has it meaning of a theme presentation name?

#34 Updated by Ovidiu Maxiniuc over 5 years ago

The Theme.getName() is practically not used. I added it for similar reasons. Currently the name is only displayed in console and used for identifying the theme using a nick/short name as an alternative to full path.

I understand that instantiating the Theme might be costly because of the eventual resources it need to load. A static method would not require the instantiation but we lose inheritance so this cannot be used. As noted above, a new class annotation would solve the problem. And, to be on safe side, maybe the getName() method should return the same value.

There is a 3rd alternative. As workaround we can use the class name, trimming the Theme token. So we would have: Classic for ClassicTheme, Windows10 for Windows10Theme and so on.

#35 Updated by Constantin Asofiei over 5 years ago

Sergey Ivanovskiy wrote:

Agree that class annotations can be used for theme name, but in this case we will add new dependency.

What kind of dependency you mean? The class annotation?

Theme interface has method getName(). Is it a key only? Has it meaning of a theme presentation name?

Actually, what Theme.getName() is not really usable in a UX point of view: it returns i.e. windows8 which is not clean/nice to show on a login page. So, the annotation should provide not a name (which really is an additional theme ID), but a theme label (like Windows 8, FWD Enhanced Theme, etc).

Please go with this annotation approach, to provide a theme label. Another point to avoid theme instantiation is that we will need to be careful not to introduce complex code in the theme c'tor, which can be overlooked easily.

#36 Updated by Sergey Ivanovskiy over 5 years ago

Thanks for the thoughtful discourse of this task. Planning to follow it.

#37 Updated by Ovidiu Maxiniuc over 5 years ago

Constantin Asofiei wrote:

Actually, what Theme.getName() is not really usable in a UX point of view: it returns i.e. windows8 which is not clean/nice to show on a login page.

As noted above, the method does not have a very defined purpose. Sergey, if you consider necessary, you can return any other value, for example Windows 8 for the respective theme. It should be consistent, so it need to match the annotation.

#38 Updated by Sergey Ivanovskiy over 5 years ago

Yes, agree.

#39 Updated by Sergey Ivanovskiy over 5 years ago

Planning to add new directory settings under webClient/desktop

          <node class="container" name="desktop">
            <node class="string" name="background">
              <node-attribute name="value" value="0x000000"/>
            </node>
            <node class="string" name="background-image">
              <node-attribute name="value" value="test.png"/>
            </node>
            <node class="string" name="image-mime-type">
              <node-attribute name="value" value="image/png"/>
            </node>
            <node class="string" name="background-origin">
              <node-attribute name="value" value="border-box"/>
            </node>
            <node class="string" name="background-position">
              <node-attribute name="value" value="center"/>
            </node>
            <node class="string" name="background-size">
              <node-attribute name="value" value="100% 100%"/>
            </node>
            <node class="string" name="background-repeat">
              <node-attribute name="value" value="no-repeat"/>
            </node>
          </node>
  

and new message type - MSG_SET_DESKTOP_IMAGE. At the moment the code has been tested. Planning to commit these changes after testing.

#40 Updated by Greg Shah over 5 years ago

I like it. Please post some details on the meaning of each one.

#41 Updated by Sergey Ivanovskiy over 5 years ago

I didn't invent these parameters they define the CSS background image styles:
https://developer.mozilla.org/en-US/docs/Web/CSS/background-image

The background-image CSS property sets one or more background images on an element.

https://developer.mozilla.org/en-US/docs/Web/CSS/background-origin
The background-origin CSS property sets the background positioning area, i.e., the origin position of an image specified using the background-image property.

https://developer.mozilla.org/en-US/docs/Web/CSS/background-position
The background-position CSS property sets the initial position, relative to the background position layer defined by background-origin, for each defined background image.

https://developer.mozilla.org/en-US/docs/Web/CSS/background-size
The background-size CSS property specifies the size of the element's background image. The image can be left to its natural size, stretched to a new size, or constrained to fit the available space while preserving its intrinsic proportions.

https://developer.mozilla.org/en-US/docs/Web/CSS/background-repeat
The background-repeat CSS property defines how background images are repeated. A background image can be repeated along the horizontal axis, the vertical axis, both axes, or not repeated at all.

The image-mime-type parameter is optional. If the target background-image is given by the file resource, then it, image-mime-type, can be guessed from the file input stream.

#42 Updated by Constantin Asofiei over 5 years ago

Sergey, I don't think we want to encode each and every CSS property you want to set for the image, as a distinct directory entry. Maybe just use a 'css' directory entry, where you just set the CSS separated by ;?

#43 Updated by Greg Shah over 5 years ago

Constantin Asofiei wrote:

Sergey, I don't think we want to encode each and every CSS property you want to set for the image, as a distinct directory entry. Maybe just use a 'css' directory entry, where you just set the CSS separated by ;?

Sergey's current approach is more secure since it is naturally limited in the values we support. I worry that if we open up the style attribute, there may be some security implications.

#44 Updated by Sergey Ivanovskiy over 5 years ago

I didn't add CSS parameters validation now but these parameters are secured by the directory. They can't be inserted from any different source. If the client receives this message MSG_SET_DESKTOP_IMAGE, then it retrieves target parameters and sets the desktop CSS style properties. If somebody can be in the middle of the server and the client and can alter this message, then the parameter validation can help here. Is there another way?

#45 Updated by Greg Shah over 5 years ago

I'm saying that your approach has security advantages.

#46 Updated by Sergey Ivanovskiy over 5 years ago

Please review committed revision 11292 (3706a) that added desktop images for the virtual desktop mode.

#47 Updated by Sergey Ivanovskiy over 5 years ago

Committed revision 11294 fixed NPE if background-image is not set.

#48 Updated by Constantin Asofiei over 5 years ago

Sergey Ivanovskiy wrote:

Please review committed revision 11292 (3706a) that added desktop images for the virtual desktop mode.

What happens if one or more of the CSS settings from #2673-39 are not configured? Does the JS and Java code handle this properly?

#49 Updated by Sergey Ivanovskiy over 5 years ago

I tested if these settings are not configured. Incorrect settings can lead to CSS style errors.The java web client or server can fail to detect the image mime type. These errors can lead to incorrect CSS styles. Finally incorrect CSS styles are ignored by the browser.

#50 Updated by Greg Shah over 5 years ago

You described how incorrect settings were handled. What about missing settings?

#51 Updated by Greg Shah over 5 years ago

Do you have settings we can use with Hotel GUI to add the FWD logo and improve the attractiveness of the virtual desktop mode?

#52 Updated by Sergey Ivanovskiy over 5 years ago

Greg Shah wrote:

You described how incorrect settings were handled. What about missing settings?

No, missing settings are represented by empty strings in CSS style object. They are incorrect settings. There are mutually exclusive settings. Please look at https://developer.mozilla.org/en-US/docs/Web/CSS/background-repeat
where if background-repeat is set to space, then the background-position property is ignored unless only one image can be displayed without clipping.

#53 Updated by Sergey Ivanovskiy over 5 years ago

Greg Shah wrote:

Do you have settings we can use with Hotel GUI to add the FWD logo and improve the attractiveness of the virtual desktop mode?

I didn't add new decorations for Hotel GUI. But adding a new background image is quite simple, but there is no mechanism to refresh the background image without restarting the server.

#54 Updated by Greg Shah over 5 years ago

but there is no mechanism to refresh the background image without restarting the server.

This is OK.

#55 Updated by Sergey Ivanovskiy over 5 years ago

Found a copy paste error in the p2j.socket.js and added empty styles validation. Please review committed rev.11296.

#56 Updated by Sergey Ivanovskiy over 5 years ago

Greg Shah wrote:

Do you have settings we can use with Hotel GUI to add the FWD logo and improve the attractiveness of the virtual desktop mode?

These settings can be used but it doesn't look attractive.

          <node class="container" name="desktop">
            <node class="string" name="background">
              <node-attribute name="value" value="0x000000"/>
            </node>
            <node class="string" name="background-image">
              <node-attribute name="value" value="/com/goldencode/hotel/embedded/images/fwd.png"/>
            </node>
            <node class="string" name="image-mime-type">
              <node-attribute name="value" value="image/png"/>
            </node>
            <node class="string" name="background-origin">
              <node-attribute name="value" value="border-box"/>
            </node>
            <node class="string" name="background-position">
              <node-attribute name="value" value="center"/>
            </node>
            <node class="string" name="background-size">
              <node-attribute name="value" value="100% 100%"/>
            </node>
            <node class="string" name="background-repeat">
              <node-attribute name="value" value="no-repeat"/>
            </node>
          </node>

#57 Updated by Sergey Ivanovskiy over 5 years ago

It seems now to me that this solution is not good, because we should add the desktop image support to index.html template page without adding new MSG_SET_DESKTOP_IMAGE.

#58 Updated by Constantin Asofiei over 5 years ago

Sergey Ivanovskiy wrote:

It seems now to me that this solution is not good, because we should add the desktop image support to index.html template page without adding new MSG_SET_DESKTOP_IMAGE.

I think we need both:
  • index.html will work with a full background image for the login purpose.
  • MSG_SET_DESKTOP_IMAGE will work with setting not the body's background image, but the virtual desktop's (i.e. the image will not be bellow our emulated taskbar).

#59 Updated by Constantin Asofiei over 5 years ago

Eventually, you can set the body image at login, and after login, move this image as background for our virtual desktop? The settings in directory.xml will remain the same, I don't think you need to change these.

#60 Updated by Sergey Ivanovskiy over 5 years ago

I meant that the background images should be managed by the web client web server and should be delivered via https. Now they are delivered via websocket. Do you agree?

#61 Updated by Sergey Ivanovskiy over 5 years ago

Constantin, it seems that web_client.html template is for login page but the JS web client uses index.html template.

#62 Updated by Greg Shah over 5 years ago

Please make sure that Hotel GUI has a functional solution today. We intend to show this at the PUG Challenge.

#63 Updated by Sergey Ivanovskiy over 5 years ago

OK. This task is done. It seems that if the FWD had SET-DESKTOP-IMAGE url. statement, then adding MSG_SET_DESKTOP_IMAGE would make sense.

#64 Updated by Constantin Asofiei over 5 years ago

Sergey Ivanovskiy wrote:

Constantin, it seems that web_client.html template is for login page

Did you add support for a background image for the web_client.html login template?

#65 Updated by Sergey Ivanovskiy over 5 years ago

Constantin Asofiei wrote:

Sergey Ivanovskiy wrote:

Constantin, it seems that web_client.html template is for login page

Did you add support for a background image for the web_client.html login template?

No, I didn't add a desktop image to this template. I added the desktop image to the virtual desktop according to the #2673-7 task. Where this image should be located?

#66 Updated by Constantin Asofiei over 5 years ago

Sergey Ivanovskiy wrote:

Constantin Asofiei wrote:

Sergey Ivanovskiy wrote:

Constantin, it seems that web_client.html template is for login page

Did you add support for a background image for the web_client.html login template?

No, I didn't add a desktop image to this template. I added the desktop image to the virtual desktop according to the note-7 task. Where this image should be located?

I was thinking to use the same image configured in the directory. Greg, do we need this now?

#67 Updated by Constantin Asofiei over 5 years ago

Sergey, please update the Hotel GUI project with all directory settings required for the background image (directory.xml and and the .template versions).

#68 Updated by Sergey Ivanovskiy over 5 years ago

OK. Please wait.

#69 Updated by Greg Shah over 5 years ago

Greg, do we need this now?

If it is easily possible, then yes please do it.

#70 Updated by Sergey Ivanovskiy over 5 years ago

Greg, would you like to use the same desktop image for web_client.html as for index.html?

#71 Updated by Greg Shah over 5 years ago

Yes.

#72 Updated by Sergey Ivanovskiy over 5 years ago

Committed revision 177 (Hotel_GUI) added available-themes and background-image style settings.

#73 Updated by Sergey Ivanovskiy over 5 years ago

It seems that web_client.html can be decorated for an example using the existing Bootsrap styles. In order to do this the web server should manage these resources. The embedded web client has a custom solution for this task. At this moment I don't plan to develop this way, but planning to add this style login class to web_client.html and assign this class to the body element.

<style>
.login {
  "width"  : "100%";
  "height" : "100%";
  "background-image"  : "${background-image}";
  "background-origin" : "${background-origin}";
  "background-position" : "${position}";
  "background-size" : "${size}";
  "background-repeat" : "${repeat}";
}
</style>

Is it enough?

#74 Updated by Greg Shah over 5 years ago

If we can't serve the resources, how does this work?

#75 Updated by Sergey Ivanovskiy over 5 years ago

Don't understand, please clarify your question. The web_client.html template has been filled by WebHandler on GET / request and then it has been sent to the client. WebHandler itself doesn't handle requests for different resources.

#76 Updated by Constantin Asofiei over 5 years ago

Sergey, when starting a standalone server for Hotel GUI embedded mode (ran from /embedded/ folder), I get this error:

java.lang.ExceptionInInitializerError
        at com.goldencode.testcases.embedded.EmbeddedWebAppDriver$EmbeddedPageHandler.handle(EmbeddedWebAppDriver.java:367)
        at org.eclipse.jetty.server.handler.HandlerCollection.handle(HandlerCollection.java:119)
        at org.eclipse.jetty.server.handler.HandlerWrapper.handle(HandlerWrapper.java:134)
        at org.eclipse.jetty.server.Server.handle(Server.java:518)
        at org.eclipse.jetty.server.HttpChannel.handle(HttpChannel.java:308)
        at org.eclipse.jetty.server.HttpConnection.onFillable(HttpConnection.java:244)
        at org.eclipse.jetty.io.AbstractConnection$ReadCallback.succeeded(AbstractConnection.java:273)
        at org.eclipse.jetty.io.FillInterest.fillable(FillInterest.java:95)
        at org.eclipse.jetty.io.ssl.SslConnection.onFillable(SslConnection.java:186)
        at org.eclipse.jetty.io.AbstractConnection$ReadCallback.succeeded(AbstractConnection.java:273)
        at org.eclipse.jetty.io.FillInterest.fillable(FillInterest.java:95)
        at org.eclipse.jetty.io.SelectChannelEndPoint$2.run(SelectChannelEndPoint.java:93)
        at org.eclipse.jetty.util.thread.strategy.ExecuteProduceConsume.produceAndRun(ExecuteProduceConsume.java:246)
        at org.eclipse.jetty.util.thread.strategy.ExecuteProduceConsume.run(ExecuteProduceConsume.java:156)
        at org.eclipse.jetty.util.thread.QueuedThreadPool.runJob(QueuedThreadPool.java:654)
        at org.eclipse.jetty.util.thread.QueuedThreadPool$3.run(QueuedThreadPool.java:572)
        at java.lang.Thread.run(Thread.java:748)
Caused by: java.lang.NullPointerException
        at com.goldencode.p2j.util.Utils.getDirectoryNodeMap(Utils.java:2301)
        at com.goldencode.p2j.main.WebHandler.getAvailableThemes(WebHandler.java:1029)
        at com.goldencode.p2j.main.WebHandler.<clinit>(WebHandler.java:150)
        ... 17 more

See the NPe in WebHandler.getAvailableThemes - this should not be called for embedded mode auth.

The built-in embedded URL (https://localhost:7443/embedded) works fine, only the https://localhost:8443 has the problem.

#77 Updated by Greg Shah over 5 years ago

Sergey Ivanovskiy wrote:

Don't understand, please clarify your question. The web_client.html template has been filled by WebHandler on GET / request and then it has been sent to the client. WebHandler itself doesn't handle requests for different resources.

How would you send the image down? I thought we have no way to expose the URL. At this point: I just want to make sure everything is working.

I see the bitmap in virtual desktop mode. Can we set this so that it is NOT scaled? It looks pretty weird when it is stretched out.

#78 Updated by Sergey Ivanovskiy over 5 years ago

Fixing this NPE now and planning to change background-size to auto can help to preserve the original image.

#79 Updated by Sergey Ivanovskiy over 5 years ago

Committed revision 11300 (3706a) should fix NPE by doing conditional static initializations for the virtual desktop mode only and added background image to web_client.html template. I checked that these parameters can preserve the logo image

          <node class="container" name="desktop">
            <node class="string" name="background">
              <node-attribute name="value" value="0x000000"/>
            </node>
            <node class="string" name="background-color">
              <node-attribute name="value" value="#ffffff"/>
            </node>
            <node class="string" name="background-image">
              <node-attribute name="value" value="/com/goldencode/hotel/embedded/images/fwd.png"/>
            </node>
            <node class="string" name="image-mime-type">
              <node-attribute name="value" value="image/png"/>
            </node>
            <node class="string" name="background-origin">
              <node-attribute name="value" value="border-box"/>
            </node>
            <node class="string" name="background-position">
              <node-attribute name="value" value="left top"/>
            </node>
            <node class="string" name="background-size">
              <node-attribute name="value" value="auto"/>
            </node>
            <node class="string" name="background-repeat">
              <node-attribute name="value" value="no-repeat"/>
            </node>
          </node>

#80 Updated by Sergey Ivanovskiy over 5 years ago

Committed revision 11302 (3706a) has minor fix for background-color and committed rev 178 (Hotel GUI) changed directory.xml and its templates.

#81 Updated by Constantin Asofiei over 5 years ago

Sergey Ivanovskiy wrote:

Committed revision 11302 (3706a) has minor fix for background-color and committed rev 178 (Hotel GUI) changed directory.xml and its templates.

Why are you not centering the image? It looks weird in the top-left corner...

#82 Updated by Sergey Ivanovskiy over 5 years ago

Constantin, please change position if it looks better. It is my subjective judgement that it looks properly with the web client login page.

#83 Updated by Sergey Ivanovskiy over 5 years ago

Committed revision 11303 added background-color setting for the virtual desktop.

#84 Updated by Eric Faulhaber over 5 years ago

Sergey, I'm trying to get the FWD logo centered horizontally on the login page, with a light grey background, maintaining the original aspect ratio of the image, and with a small margin to the left and right. I'd also like to make the opacity < 1.0. I don't know if opacity is a supported setting, but here are the rest of the settings I'm using:

          <node class="container" name="desktop">
            <node class="string" name="background">
              <node-attribute name="value" value="0x000000"/>
            </node>
            <node class="string" name="background-color">
              <node-attribute name="value" value="0xbbbbbb"/>
            </node>
            <node class="string" name="background-image">
              <node-attribute name="value" value="/com/goldencode/hotel/embedded/images/fwd.png"/>
            </node>
            <node class="string" name="image-mime-type">
              <node-attribute name="value" value="image/png"/>
            </node>
            <node class="string" name="background-origin">
              <node-attribute name="value" value="border-box"/>
            </node>
            <node class="string" name="background-position">
              <node-attribute name="value" value="center"/>
            </node>
            <node class="string" name="background-size">
              <node-attribute name="value" value="80%"/>
            </node>
            <node class="string" name="background-repeat">
              <node-attribute name="value" value="no-repeat"/>
            </node>
          </node>

However, the image isn't displaying as I've described above. It looks like this:

How would I accomplish my goals as described above?

#85 Updated by Sergey Ivanovskiy over 5 years ago

Now the opacity is not supported, but it can be coded directly in web_client.html

<!DOCTYPE html>
<html>
   <head>
      <title>Operating System Login (FWD ${client_ui_type} Web Client)</title>
      <style type="text/css" media="screen">
         .login {
            background-image : ${background-image};
            background-repeat : ${background-repeat};
            background-origin : ${background-origin};
            background-position : ${background-position};
            background-size : ${background-size};
            background-color : ${background-color};
            opacity : 0.5; 
            width   : 100%;
            height  : 100%;
         }
      </style>
...........................................................

or we should add new parameter opacity.

In this screen #2673-84 the background image is around the horizontal center and the vertical position of the background image is affected by these styles

   <body class="login" onload="requestHelper.initialize();">
      <div style="margin-top:150px;">
         <div align="center">
            <form name="loginForm" method="POST" onsubmit="return requestHelper.sendRequest();" >
               <table>
                  <tr>
                     <td>User Name:</td><td><input type="text" size="20" name="usr" autofocus></td>
                  </tr>
                  <tr>
                     <td>Password:</td><td><input type="password" size="20" name="psw"></td>
                  </tr>
                  <tr id="UI-Theme-Row">
                     <td>UI Theme:</td><td><select name="theme"></select></td>
                  </tr>
                  <tr>
                     <td>&nbsp;</td><td><input type="submit" value="Login"></td>
                  </tr>
               </table>
            </form>
         </div>
         <div align="center" style="margin-top:100px">
            <h1 id="error" style="color:red">${error}</h1>
         </div> 
      </div>  
   </body>

If we set
            <node class="string" name="background-position">
              <node-attribute name="value" value="center top"/>
            </node>

, then the top of the background image will be at the top of the screen. I will try to fix css for this template in order that this image will be aligned correctly.

#86 Updated by Greg Shah over 5 years ago

we should add new parameter opacity

Please add this.

A customer should not have to edit the html files to get the result Eric is trying to achieve.

#87 Updated by Sergey Ivanovskiy over 5 years ago

Should this opacity style be applied to the login form only? Should it be applied to the virtual desktop too? Now we have common settings for the login desktop and for the virtual desktop.

#88 Updated by Greg Shah over 5 years ago

Good point. Please create a separate configuration for login and desktop. The same features should be available on both.

#89 Updated by Sergey Ivanovskiy over 5 years ago

Please review these changes committed revision 11319. Now the background image position is not affected by the form css styles. This revision added new login form settings under webClient node

          <node class="container" name="login-form">
            <node class="string" name="background-color">
              <node-attribute name="value" value="0xbbbbbb"/>
            </node>
            <node class="double" name="background-opacity">
              <node-attribute name="value" value="0.5"/>
            </node>
            <node class="string" name="background-image">
              <node-attribute name="value" value="/com/goldencode/p2j/admin/fwd.png"/>
            </node>
            <node class="string" name="image-mime-type">
              <node-attribute name="value" value="image/png"/>
            </node>
            <node class="string" name="background-origin">
              <node-attribute name="value" value="border-box"/>
            </node>
            <node class="string" name="background-position">
              <node-attribute name="value" value="center"/>
            </node>
            <node class="string" name="background-size">
              <node-attribute name="value" value="auto"/>
            </node>
            <node class="string" name="background-repeat">
              <node-attribute name="value" value="no-repeat"/>
            </node>
          </node>

and added the background opacity settings to make the background be transparent
            <node class="double" name="background-opacity">
              <node-attribute name="value" value="0.5"/>
            </node>

#90 Updated by Eric Faulhaber over 5 years ago

This is much better, but it only seems to be applying the opacity setting to the background color, not to the background image. I was hoping the opacity would soften the starkness of the image; the contrast is too harsh, IMHO.

Also, I set background-size to 75% instead of auto.

#91 Updated by Sergey Ivanovskiy over 5 years ago

May be this task can be done using images composition but I am not sure

background-image: linear-gradient(rgba(0, 0, 255, 0.5), rgba(255, 255, 0, 0.5)),
                  url("../../media/examples/lizard.png");

Now we can't use this composition of several images. Should it be done?
From https://developer.mozilla.org/en-US/docs/Web/CSS/background-color
The background-color property is specified as a single <color> value.

<color>
    The uniform color of the background. It is rendered behind any background-image that is specified, although the color will still be visible through any transparency in the image. 

#92 Updated by Eric Faulhaber over 5 years ago

Let's leave it as is for now. We can change the opacity of the image directly in the PNG.

#93 Updated by Eric Faulhaber over 5 years ago

Hotel GUI rev 189 changes the configuration for the login page and desktop to present these screens as follows:

Login:

Desktop:

The directory settings are as follows:

          <node class="container" name="login-form">
            <node class="string" name="background-color">
              <node-attribute name="value" value="0xbbbbbb"/>
            </node>
            <node class="double" name="background-opacity">
              <node-attribute name="value" value="0.8"/>
            </node>
            <node class="string" name="background-image">
              <node-attribute name="value" value="/com/goldencode/hotel/embedded/images/fwd_opacity_60.png"/>
            </node>
            <node class="string" name="image-mime-type">
              <node-attribute name="value" value="image/png"/>
            </node>
            <node class="string" name="background-origin">
              <node-attribute name="value" value="border-box"/>
            </node>
            <node class="string" name="background-position">
              <node-attribute name="value" value="center"/>
            </node>
            <node class="string" name="background-size">
              <node-attribute name="value" value="65%"/>
            </node>
            <node class="string" name="background-repeat">
              <node-attribute name="value" value="no-repeat"/>
            </node>
          </node>
          <node class="container" name="desktop">
            <node class="string" name="background">
              <node-attribute name="value" value="0x000000"/>
            </node>
            <node class="string" name="background-color">
              <node-attribute name="value" value="0xbbbbbb"/>
            </node>
            <node class="string" name="background-image">
              <node-attribute name="value" value="/com/goldencode/hotel/embedded/images/fwd.png"/>
            </node>
            <node class="string" name="image-mime-type">
              <node-attribute name="value" value="image/png"/>
            </node>
            <node class="string" name="background-origin">
              <node-attribute name="value" value="border-box"/>
            </node>
            <node class="string" name="background-position">
              <node-attribute name="value" value="center"/>
            </node>
            <node class="string" name="background-size">
              <node-attribute name="value" value="65%"/>
            </node>
            <node class="string" name="background-repeat">
              <node-attribute name="value" value="no-repeat"/>
            </node>
          </node>

Eventually, I think we will want to put the background images somewhere more appropriate, instead of "borrowing" them from the embedded resources, but to keep things simple for now, I followed the lead of the previous settings.

Also available in: Atom PDF