Retina/HiDPI in web: how exactly?

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?

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

Where is this documented? Is there a sample project?

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?

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.

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 <https://xojo.com/issue/46299>

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

[quote=303304:@Antonio Rinaldi]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 <https://xojo.com/issue/46299>

and via introspection I see (as constructors arguments)
FolderItem()
FolderItem
Int32, Int32, FolderItem()
MemoryBlock, String
Picture, String
Picture, String
String, String[/quote]
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.

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?

Right. that would make no sense as getData would have no idea which image you wanted.[quote=303308:@Antonio Rinaldi]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?[/quote]
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.

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

[quote=303315:@Antonio Rinaldi]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[/quote]
Known issue.

feedback number?

[quote=303308:@Antonio Rinaldi]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?[/quote]

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!

[quote]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.[/quote]

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

WHLogo is an app.WebPicture

[code]Private Sub LoadGlobalPictures()
Dim iPath As String = “…/Graphics/”

WHLogo = LoadPic(iPath, “80x80WHLogoSmall@1x.png,80x80WHLogoSmall@2x.png,80x80WHLogoSmall@3x.png”)

End Sub[/code]

2- Method for making a webpicture from multiple folderitems

[code]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
[/code]

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!