Putting a picture into a Canvas from file path

General
1

Friends

Though the forums have a lot of data on getting a picture into a canvas, I’m having trouble getting a string to be a picture object that can fit into a canvas (either on desktop or web).

I have a png file in the root of my application (to make it simpler for the moment). I am trying to get this to display in a canvas. I’m not using a file open, just trying to display the image from a written string. What I actually want to do is emulate the way you’d do it in php on an html page, using a database with a field containing a local URL. So this canvas would be referencing a variable that would change with every change of the database row.

Something like this pseudocode:

PicVariable as Picture
StringVariable as String = DB.URLField.Text
PicVariable =ConvertToPicture(StringVariable)

I see some BLOB examples that do this but I want to use separate picture files (.png, .jpg) like you’d normally do in an image folder inside the htdocs directory of an Apache installation.

If an HTML viewer would be more appropriate, that’s okay too. My criterion is that the image will change with a database row.

Thank you
fritz

2

Picture.FromData:
https://documentation.xojo.com/api/graphics/picture.html#picture-fromdata

Picture.ToData
https://documentation.xojo.com/api/graphics/picture.html#picture-todata

3

Usually, the image is encoded using Base64() which returns a string that is is saved in the database. Using a query qyou get the string and convert it back to the image using Base64Decode().

4

There are multiple ways depending on what you do.
In desktop-app you do something like:

Var picFile As New FolderItem(DB.URLField.Text)

If picFile <> Nil And picFile.Exists Then
Var pic As Picture
pic = Picture.Open(picFile)

’ refresh Canvas and do your things in Canvas.paint event
End If

If you want to change the image when it changes in db, you have to chack the db for changes and do this again. If there is an url in your db (file behind a webserver), you can load that file in html-viewer.

In an web-project you can use WebImageViewer and load a webpicture (like i explained before) or load the url (of an online available image) directy.

To check changes, you could use an timer and check the path/ulr every x seconds. If it changes load the new file.

1 Like
5

Take a look at the Eddie’s electronic app in the Xojo example projects.
A picture is loaded from the database and displayed in an Imageviewer.

If you want to display the picture in a Canvas, just keep a reference to the picture object in the Window and draw the picture in the canvas.

1 Like
6

Friends

I don’t want you to think I haven’t been paying attention, but I am still attempting to implement several of your collective suggestions. I am pretty sure where I’m going, but it’s just taking a while to get there. I hope to report some progress in the very near future.

Thank you
fritz

1 Like
7

Friends

I tried all of these. They all seem to work fine in general, Jeremie’s is the easiest, and the Eddie’s Electronics example works this way. Julia’s references have the most code and the least guesswork (on my part) behind them, so that’s my solution du jour. Thank you for all your generous advice.

If I have to scale this, I’ll be getting my graphics from an Apache server to avoid slowing the app down (though I don’t know that direct file system access is inherently slower than a hyperlink), but that’s a job for another day.

fritz

1 Like