Reference Project Image in HTMLViewer

I have several images dragged into my project that I would like to then display in an HTMLViewer. I did a search of the forums and didn’t find anything addressing this particular issue, though it seems some discussions were close.

I have these images in the project:

doc1.png
doc2.png
doc3.png

I would like to know what to put in this HTML source to make it viewable in the HTMLViewer:

<img src=”“reference_to_project_image”" />
"

so…

<img src=”“doc1.png”" />
"

Maybe that’s not possible! If not, how do I go about putting project images into an HTMLViewer?

Thank you!

[quote=219990:@Christopher Lester]I have several images dragged into my project that I would like to then display in an HTMLViewer. I did a search of the forums and didn’t find anything addressing this particular issue, though it seems some discussions were close.

I have these images in the project:

doc1.png
doc2.png
doc3.png

I would like to know what to put in this HTML source to make it viewable in the HTMLViewer:

<img src=”“reference_to_project_image”" />
"

so…

<img src=”“doc1.png”" />
"

Maybe that’s not possible! If not, how do I go about putting project images into an HTMLViewer?

Thank you![/quote]

Mac, Windows, Web ? Solutions are different.

Why not use an image well or canvas?

If you’re using a html viewer for just images thats a bit overkill, and if you’re trying to display a local html page then you need a copy files step instead of dragging them into the ide.

Windows, for now… Possibly other desktop OSes in the future… But each bridge as I come to it. :smiley:

[quote=220003:@Tim Parnell]Why not use an image well or canvas?

If you’re using a html viewer for just images thats a bit overkill, and if you’re trying to display a local html page then you need a copy files step instead of dragging them into the ide.[/quote]

It’s actually an attempt to easily duplicate a “document preview” type window, where it shows a document icon with the filename underneath. It seems with HTML, it would be easy to format and I don’t have to keep track of the rows and columns myself. Just put the images+labels in an HTML string and display that, then intercept the link clicks.

Here’s an example (the right side of this UI):

If this is easier/possible with an image well or canvas, I’m all ears! :smiley:

In recent versions of Xojo, images and HTML files dragged into the project are placed inside a Resources folder when the project is compiled. So you can put the whole little web site in there.

Here is an example in the Open event of an HTMLViewer that shows a picture called robot.jpg I dragged into the project of an app called myApp :

Sub Open() Dim resources as string = "MyApp Resources" if DebugBuild then resources = "Debug"+resources dim f as FolderItem = GetFolderItem("").child(resources).child("robot.jpg") me.loadurl( f.URLPath) End Sub

Showing the same picture in a canvas would go in its Open event as :

Sub Open() me.Backdrop = robot End Sub

[quote=220020:@Michel Bujardet]In recent versions of Xojo, images and HTML files dragged into the project are placed inside a Resources folder when the project is compiled. So you can put the whole little web site in there.

Here is an example in the Open event of an HTMLViewer that shows a picture called robot.jpg I dragged into the project of an app called myApp :

Sub Open() Dim resources as string = "MyApp Resources" if DebugBuild then resources = "Debug"+resources dim f as FolderItem = GetFolderItem("").child(resources).child("robot.jpg") me.loadurl( f.URLPath) End Sub
[/quote]

What if you wanted to show a bunch of images? I need to embed the reference to the image inside of HTML. I’m not just displaying the one image, as your code seems to do (not sure).

Thank you!

[quote=220047:@Christopher Lester]What if you wanted to show a bunch of images? I need to embed the reference to the image inside of HTML. I’m not just displaying the one image, as your code seems to do (not sure).

Thank you![/quote]

If you want to show several pictures, then build an HTML page that shows all of them. My code is just an example how to get a file dragged into the project. You could just as well drag an index.html file in the project and call it the same way.

That’s what I’m trying to do. I even said so in my initial post. But I need to know how to reference a graphics image file from the project in the HTML that I display in the HTMLViewer control. Since the HTML will be built dynamically, I can’t just drag an index.html file into the project.

I need the path to put into the src attribute of the img tag (see below).

[code]htmlText = _
“<div class=”“floating_image”“>
<span class=”“docname”“>Document One” + _
“<div class=”“floating_image”“>
<span class=”“docname”“>Document Two” + _
“<div class=”“floating_image”“>
<span class=”“docname”“>Document Three” + _
“<div class=”“floating_image”“>
<span class=”“docname”“>Document Four Has a Long Name” + _
“”

win_Start.html_Favorites.LoadPage(htmlStyle + htmlText,f)[/code]

O-M-G, I figured it out.

  fImg = GetFolderItem("Resources/doc1.png") 'here's what I was missing and couldn't figure out; how to get the resources folder

'then make use of it this way:  
  htmlText = _
  "<div class=""floating_image""><img src=""" + fImg.URLPath + """ /><br/><span class=""docname"">Document One</span></div>"

Hum.

If you had looked at the code I posted above, it gave you the way to get the folderitem. It seems you prefer to use a path, but the principle is the same.

You are on PC, so the separator is backslash. Besides, the Resources folder is not simply named “Resources”. It is called “myApp Resources” when built (myApp is whatever the name of your app), and “DebugmyApp Resources” when run in the IDE.

This should work better in the built program :

fImg = GetFolderItem("myApp Resources\\doc1.png")

It wasn’t working exactly as posted on Windows, so I was confused by it. Part of my confusion was that I couldn’t see the “Resources” folder for my project because it only gets created when I run the project and I was looking for it when my project was not running. LOL! A lightbulb went on in my head at some point and I looked for it while the project was running and lo and behold, there it was!

There was no preference. Somehow I figured out to just use the path with GetFolderItem().

Works fine for me as-is. I think Windows can handle it either way. Have you ever encountered a case where Windows choked on the forward-slash?

For me, on Windows, with the latest version of Xojo IDE, it is simply named “Resources,” even during debug. You might be referring to the parent window, which is named “DebugMy_App_Name.” But inside that parent window is the “Resources” folder, simply named.

I think for your code to work on Windows, it would have to be like this:

Sub Open()
  Dim resources as string = "Resources"
  dim f as FolderItem = GetFolderItem("").child(resources).child("robot.jpg")
  me.loadurl( f.URLPath)
End Sub

[quote=220312:@Christopher Lester]You are on PC, so the separator is backslash.
Works fine for me as-is. I think Windows can handle it either way. Have you ever encountered a case where Windows choked on the forward-slash?[/quote]

In principle, a valid path under Windows is formed with backslash https://msdn.microsoft.com/en-us/library/windows/desktop/aa365247(v=vs.85).aspx?f=255&MSPPError=-2147217396. But you are right, it works with forward slash in Xojo, and even apparently in the Windows 10 command prompt.

Ouch. There was discussion at one point about the need to place several executables in the same folder, so the solution was to let each app have its own Resources folder. That will be implemented in 2015R3.