Retina/HiDPI in web: how exactly?

  1. last year

    Oliver O

    20 Nov 2016 Pre-Release Testers, Xojo Pro https://seminar.pro

    "High-resolution versions of all of the graphics that make up the built-in web controls are now automatically included with your built apps."

    Quoting from here:
    http://developer.xojo.com/web-hidpi-support

    Yes, but how?

    I would like to have some buttons in a webproject, which change color when dragging over or clicking it.

    I figured I would use a webcanvas and add some pictures to the project and make use of them in the paint eventhandler of the webcanvas.

    But how exactly do I make sure that a HiRes picture is loaded on Retina and lowRes on a standard screen?

    "Multi-resolution Images are now available in Web Projects. Just like iOS and Desktop projects, you can now drag in multiple representations of the same image and the Web Framework will automatically deliver the correct version to the browser."

    I guess there are some naming conventions to respect, in order to make this work?

    Where is this documented? Is there a sample project?

  2. Tim P

    20 Nov 2016 Pre-Release Testers, Xojo Pro ⭐️

    When I asked Greg how HiDPI was handled for Web at XDC he said the server sends down the high resolution stuff, so I'm guessing that it's handled automatically. Haven't actually gone to look. Are you experiencing problems?

  3. Greg O

    20 Nov 2016 Xojo Inc Somewhere near Raleigh, NC

    To be clear, drawing a button using a canvas won't be fast enough for what you want to do. Look in the examples for the WebSDK and replace the pictures with images. That should do what you want.

  4. 11 months ago

    Antonio R

    14 Dec 2016 Pre-Release Testers, Xojo Pro Europe (Italy)

    I don't see the Constructor(width As Integer, height As Integer, pics() As Picture) for web picture as stared in the page.

    How can I create a webPicture HiDpi from 2 pictures (low and high)?

    I can only use the standard picture, string constructor but this leads to Feedback Case #46299

    and via introspection I see (as constructors arguments)
    FolderItem()
    FolderItem
    Int32, Int32, FolderItem()
    MemoryBlock, String
    Picture, String
    Picture, String
    String, String

  5. Greg O

    14 Dec 2016 Xojo Inc Somewhere near Raleigh, NC

    @Antonio R I don't see the Constructor(width As Integer, height As Integer, pics() As Picture) for web picture as stared in the page.

    How can I create a webPicture HiDpi from 2 pictures (low and high)?

    I can only use the standard picture, string constructor but this leads to Feedback Case #46299

    and via introspection I see (as constructors arguments)
    FolderItem()
    FolderItem
    Int32, Int32, FolderItem()
    MemoryBlock, String
    Picture, String
    Picture, String
    String, String

    Right. WebPicture is not a subclass of Picture, but a class for delivering Picture objects to a browser.

    To save on memory, multi-resolution WebPictures were designed to be "disk-only". There are two reasons for this:

    1. Because images are not compressed in memory
    2. Because as the scalefactor goes up, the memory requirements increase exponentially.

    To do what you want to do, write each of the images to disk and then use the constructor in this form:

    WebPicture.Constructor(width as Integer, Height as Integer, files() as folderitem)

    Note: There's a version of this constructor which does not require you to pass width & height. It simply opens the first image for a moment to check its width and height for you, but that's unnecessary if you already have it.

  6. Antonio R

    14 Dec 2016 Pre-Release Testers, Xojo Pro Europe (Italy)

    I see
    (you can't use getData for a multi resolution picture)
    So if I have to show the image from a db (where I have the low and high resolution images) what I have to do?
    save the 2 images png and then use them in the web picture constructor?

  7. Greg O

    14 Dec 2016 Xojo Inc Somewhere near Raleigh, NC

    @Antonio R (you can't use getData for a multi resolution picture)

    Right. that would make no sense as getData would have no idea which image you wanted.

    @Antonio R So if I have to show the image from a db (where I have the low and high resolution images) what I have to do?
    save the 2 images png and then use them in the web picture constructor?

    Yes. Remember, they're not necessarily delivered to the browser at the moment you create the WebPicture, and if the user drags their browser between a non-retina and a retina window (and the browser/OS supports it) the browser may request a different resolution image, so it really needs to be there.

  8. Antonio R

    14 Dec 2016 Pre-Release Testers, Xojo Pro Europe (Italy)

    Ok it works, I also have added a cleaning method to clear these files on session close.

    However, I see the high resolution image partially using a WebImageView and screen @150%

    I've to recheck before create a feedback about it

  9. Greg O

    14 Dec 2016 Xojo Inc Somewhere near Raleigh, NC

    @Antonio R Ok it works, I also have added a cleaning method to clear these files on session close.

    However, I see the high resolution image partially using a WebImageView and screen @150%

    I've to recheck before create a feedback about it

    Known issue.

  10. Antonio R

    15 Dec 2016 Pre-Release Testers, Xojo Pro Europe (Italy)

    feedback number?

  11. 7 months ago

    Roger S

    19 Apr 2017 Gaspé, Québec, Canada
    Edited 7 months ago

    @Antonio R I see
    (you can't use getData for a multi resolution picture)
    So if I have to show the image from a db (where I have the low and high resolution images) what I have to do?
    save the 2 images png and then use them in the web picture constructor?

    Sorry, I still don't get it...

    I want to preload pictures in a web app (not use pictures added through the IDE for faster loading).

    1- In the app.open event, I load pictures with (webpicture(folderitem)),
    2- store them in properties as WebPicture
    3-show them in an Image Well in it's open event (me.picture = app.WebPicturePropety)

    My question :

    How to load 3 pictures from disk mypic@1x, mypic@2x, mypic@3x so they behave as an image set as if they were dragged into the IDE?

    Thanks!

  12. Roger S

    19 Apr 2017 Gaspé, Québec, Canada

    WebPicture has a new Constructor for creating multi-resolution pictures for files on disk.
    Constructor(width As Integer, height As Integer, files() As FolderItem)

    This results in a file-based WebPicture which saves on memory and is only loaded/delivered to a browser when it is requested.

    WebImageView, WebCanvas and WebToolbar have all been updated to use the new WebPicture format and deliver high resolution images to browsers that support them.

    I tried :
    1- Method for pre-loading all my pictures

    WHLogo is an app.WebPicture

    Private Sub LoadGlobalPictures()
    Dim iPath As String = "../Graphics/"
    
    WHLogo = LoadPic(iPath, "80x80WHLogoSmall@1x.png,80x80WHLogoSmall@2x.png,80x80WHLogoSmall@3x.png")
    
    End Sub

    2- Method for making a webpicture from multiple folderitems

    Private Function LoadPic(path As String, picNames As String) As WebPicture
    
    Dim fs() As FolderItem
    Dim picNamesArray() As String = Split(picNames, ",")
    
    For i As Integer = 0 To picNamesArray.Ubound
      Dim f As FolderItem = GetFolderItem(path + picNamesArray(i), FolderItem.PathTypeNative)
      If f <> Nil Then
        fs.Append f
      End If
    Next i
    
    If fs.Ubound <> -1 Then
      Dim w As WebPicture = New WebPicture(fs)
      Call w.Preload
      Return w
    Else
      Return Nil
    End If
    
    End Function

    3- On Open

    Sub Open()
    Me.Picture = app.WHLogo
    End Sub

    I get into two issues :

    1- In debug mode, the app stalls showing "event loop" in the "stack" part of the debugger when the Image Well open event is triggered

    2- The image doesn't show...

    Any Idea about what I'm doing wrong?

    Thanks!

or Sign Up to reply!