Display a photo jpg from disk in table bean

Classic Servoy
1

I am using Patrick’s table bean and have it working as expected for displaying textual information. I am also able to display .jpg photos in the table if they are stored in the database. For that, it works great.

Now I am trying to read in a directory of jpg files, show the file names, and show a thumb-nail of each file in the grid. I can read the filenames okay, but instead of displaying the photos, it is showing the textual name of my javascript object. I can’t figure out how to get the photos to show.

What I am trying to do is to manipulate the images locally and resize them before uploading them into the database. The user will select certain photos and click “upload”, at which point I will add them to records in the database.

Here is my code:

// Get list of photos from a directory and put in the grid
var dir = plugins.file.showDirectorySelectDialog()
var aFiles = databaseManager.convertToDataSet(plugins.file.getFolderContents(dir, new Array('.jpg')))
var vFileCount = aFiles.length
var ds = databaseManager.createEmptyDataSet(1,2)
for(var x=1; x <= aFiles.getMaxRowIndex(); x++)
{
 	var image = plugins.images.getImage(aFiles.getValue(x,1))
 	image = image.resize(160,120)
	ds.addRow(new Array(aFiles.getValue(x,1), image))
}
elements.bean_filelist.setData(ds)
elements.bean_filelist.rowHeight = 120

Thanks for any help.

2

Hello Jason,

the Servoy forum is not really the place to discuss third party products. In the future, please contact us via support@servoy-plugins.de.

From what I see in your code, you are adding an object created by the image plugin (a JSImage) to the dataset. What happens if you change one thing like this:

ds.addRow(new Array(aFiles.getValue(x,1), image.getData()))

3

I solved my problem, and in the process, I found a Servoy bug with datasets.

It seems to be related to the dataset.addRow() function. If I predefine how many rows I want in my dataset when I create it:

var ds = databaseManager.createEmptyDataSet(10,4)

Then my images will display fine when I use ds.setValue(1,1,image.getData()).

However, if I start with one row in my dataset:

var ds = databaseManager.createEmptyDataSet(1,4)

My first row works fine because it was predefined. But every row I add with the command below will not show images:

ds.addRow(new Array(value1, image.getData(), value3, value4))

Luckily, I will know how many rows I need before creating my dataset in this situation. However, I’d consider this a bug that needs to be fixed, unless I’m missing something.

4

Ok, ok. Let’s discuss here.

I have tried myself and it seems that somehow going through a dataset seems to be the problem (a byte turns into a JavaNativeArray or something like that). I will look into this.

What should work, however, is a simple array. So can you try this code:

// Get list of photos from a directory and put in the grid
    var dir = plugins.file.showDirectorySelectDialog()
    var aFiles = databaseManager.convertToDataSet(plugins.file.getFolderContents(dir, new Array('.jpg')))
    var data = new Array()
    for(var x=1; x <= aFiles.getMaxRowIndex(); x++)
    {
       var image = plugins.images.getImage(aFiles.getValue(x,1))
       image = image.resize(160,120)
       data[x-1] = new Array();
       data[x-1][0] = aFiles.getValue(x,1);
       data[x-1][1] = image.getData();
    }
    elements.bean_filelist.setData(data, ['file', 'image'])
    elements.bean_filelist.rowHeight = 120

Hope it works then.

5

See my post that I just edited above. I found the problem. It is indeed a dataset problem with addRow().

Thanks for diving in! Very much appreciated.