Image and text in a grid button

1

I have been a long time user of NSBasic, but now i am 72 years old and memory started playing tricks on me.
I wll like to make me a small app to keep track of what chemicals i already have at home.
I remember vaguely seeing something like what is in the image

Screenshot_Main_MyKURA
Screenshot_Main_MyKURA1080×2340 223 KB

, but i can remember what control allows image and text that I can see in the main screen as a buttons type of grid, and allows me to navigate to a detail screen.

You may ask what is the advantage of having this simple app. Pool chemicals are very expensive and they tend to go bad after a long time, so it is better to use what is in stock. More than once I got home from the pool place and found that I didn’t have enough of the chemical I needed.

This MyKura app seems ok but is missing a notes field and maybe an extra field to record the container empty weight, so I can record the exact amount left over after usage.

Screenshot_Item_MyKURA
Screenshot_Item_MyKURA1080×2340 96.2 KB

Thank you.

2

Have a look at the Bootstrap 4 Card control. It lets you have a header, picture, tile, subtitle, text and footer (all elements are optional, I believe).

You can even have a button to start an action.

3

I use the Common grid to display items from a database.

commongrid
commongrid655×566 82.1 KB

Some code: may not be entirely correct but should give you an idea what is happening.

  D = "&nbsp&nbsp<img  width = 44 height=40 style='border:2px solid yellow' src='costco.jpg' id='grdShop_" & k & "_0' align=Middle>" & "&nbsp&nbspCostco"
  D = D & "<img  width = 44 height=34 src='uparrowT.png' id='grdShop_" & k & "_0' align=Right>"
  grdShop.setValue(k,0,D) 
  grdShop.cell(k,0).style.background = "brown"
  grdShop.cell(k,1).style.background = "brown"
  grdShop.cell(k,2).style.background = "brown"
  grdShop.cell(k,0).style.color = "yellow"

Note:where grdShop is the common grid and k = the grid row and the images are in extraFiles. The id= is needed so the gridShop_onclick() event can return the row and colum selected. So you can only query the cell the user selects and not the image within the cell. To edit a data line, like the amount for an item in column 2, I use another form to enter the amount and then update the selected cell.

John