NT 11.04 src tag for image does not get generated

[jking]

Bruce,

     I have a field on a form where I enter the name of an image I want to display.  On another tab is an image control.  I have it set as seen in the attached image ImageFieldSetup.png.  When I open the form there is no image.  Using DevTools, I see there is no image src tag generated.  See Image_no_src_generated.png.  If I manually edit and add a new src attribute, the image displays.  See Image_src_manual.png.  This is for the CoinCollector PWA/Disconnected app I have been working on for weeks.  I have set the image control settings as I did in an older normal web app, which does display images properly.
     Either I have set things up incorrectly or the src tag is not being generated.  Can you also check this in the example app I emailed you today?

Thanks,

Jeff

[peterH]

Jeff,

The Image field must contain a (disk) file name, not a field name as shown on your first example.

Peter

[jking]

Peter,

     The field name does contain the name of the disk file to display.  For example, it now contains ScanMan.png.  So I tried the following:

     'C:\C11Development\WebDevelopment\CoinCollector\web\uploads\'&p_web.GSV('CC:Coin_Image_Name_Obv')

     'C:\C11Development\WebDevelopment\CoinCollector\web\uploads\'&Clip(CC:Coin_Image_Name_Obv)

     '\uploads\'&p_web.GSV('CC:Coin_Image_Name_Obv')

     '\uploads\'&Clip(CC:Coin_Image_Name_Obv)

In all cases all I get for the src tag is "/uploads/", as seen in the attached image.  I wonder if I must use the local store value?  Not sure how to do that.

Thanks,

Jeff

[jking]

I placed a message statement just before the p_web.CreateImage routine and it seems the contents of the field CC:Coin_Image_Name_Obv are not in scope here.

I need to be able to point the image control to the file name contained in this field.  I can't do this explicitly in the Image field of the template Display tab as each record will have a different file name stored in this field.  Something is wrong here, as my C10/NT10 web app uses this technique and it works as expected.  This disconnected/PWA app is causing me lots of troubles!

Thanks,

Jeff

[Bruce]

Hi Jeff,

So this is an interesting use-case.
You've got a PWA - which means "data is local".

But a file-Upload implies that you are uploading to somewhere - in this case specifically the server.

You mention NT10, but that's a web app, not a PWA, so it's quite different.

I suppose what it needs to do is upload the pic to the server, but write the filename into the local data. You would need to be online for the file to get to the server (and indeed to get the image back in the browser...)

I'll need to play with this a bit to see what the best approach is.

Cheers
Bruce

[jking]

Bruce,

     The app I have in mind is for my coin collection.  When I go to coin shows, I need to look up to see if I already have a particular coin, and get some of the details about the coin I have.  I may also want to view an image of the front and back of the coin I have.  These coin shows have unreliable wireless connectivity or none at all.  Thus, I think a disconnected app is ideal.
     There really is not much data involved, just a date, mint mark, condition, and one or two other descriptive fields.  Then there are two images, one for the front, one for the back.  Storing these images in the local store may be possible, perhaps in a BLOB?  Or in a separate folder?  However, I thought it best to store these on the server (upload).  Perhaps I need to rethink this, as you mentioned, to see the images will require a connection to the server.  If I take a photo at a show, and I don't have a connection, then the photo remains on the device anyway.  Can a BLOB be used in the local store and then synced back to the server?  This would eliminate the "upload" issue.

Thanks,

Jeff

[jking]

Bruce,

     I just did some quick searching and it seems BLOBS are not supported in IndexedDB, at least on Safari/iOS.  Maybe this has changed recently, but as I use an iPhone 6, this may not be an option for my app.  So, can StringTheory be used to store BLOB/binary data in a string?  Maybe this is the route to take?

Thanks,

Jeff

[jking]

Bruce,

     After more research, seems iOS vs 12.1.2, on my phone, uses Safari 12, which should support BLOBS in IndexedDB.  This is according to CanIUse.com.  So, I added two BLOB fields (binary) and tried to get an image to store in a BLOB.  This did not seem to work, even though the File Upload template interface has an option to store the uploaded image to a BLOB.  See the attached image.
     I really would like to get this working, after having gone down many dead ends the past 4 weeks.  Any chance you can carve out some time to go over the file uploads and BLOB storage in a disconnected app?  As I indicated earlier, I think it best to use BLOBS to store images on the local device, which get synced to the server.  Then I will have images even if the device is disconnected.

Thanks,

Jeff

[Bruce]

Hi Jeff,

>> These coin shows have unreliable wireless connectivity or none at all.  Thus, I think a disconnected app is ideal.

I agree - it is an ideal use case.

There are however a number of moving parts here when it comes to images. I think it would be do'able to store the images in a IndexedDB field, and display it from there. But there is a wrinkle with that approach.

IndexedDB has "size limits" which are alas somewhat unpredictable, and seem to change. Originally it was 5MB per database, but that seems to have changed now. iOS apparently has a 50MB limit.

It would probably be helpful if you had a look at the size of the images files you currently have. Hopeffuly they are PNG files (best quality) but they might be jPG's I guess. Either way let me know how big they are (on average) as that gives an idea of how many you can store. I guess it depends on how many coins you have as well.

>> This did not seem to work, even though the File Upload template interface has an option to store the uploaded image to a BLOB.

There are a _lot_ of moving parts that go into making a disconnected application (ie a PWA). Fundamentally all the template options need to have supporting code not just in Clarion but in JavaScript as well. This is an example of something that works in Clarion, but does not yet work as JavaScript.

>> Any chance you can carve out some time to go over the file uploads and BLOB storage in a disconnected app?

yes, but I need to get the 11.05 build done first. Also it may unfortunately be a dead end if you have lots of coins / pic picture space etc. But the general idea is a good one.

cheers
Bruce

[jking]

Bruce,

     Thanks for the details about size constraints.  As an example, I have 57 silver dollars, with 2 images for each, totaling 10.3 MB.  The images are jpg files that range from 50 KB to 250 KB.  Some can be 450 KB.  So, it is apparent that with the 5-50 MB size restrictions on a mobile device, storing images in the local store is not a viable option.  That means I need to go back to the original idea of uploading images.  Hopefully we can work this out after you finish with NT 11.05.

     I did a bit more research, looking at various articles about these size limitations.  One thing that stood out was that various browsers will start deleting data from the local store as resource use goes past a certain limit.  Since I'm not going to store images in the local store, just basic coin info, I don't think I'll reach these potential limits, even with a few thousand coins in the database.  However, if a browser starts deleting things, the sync routines will presumably move more data from the server back to the device.  Seems to be a potential conflict for resources here, but I guess we can deal with that if it ever happens.

     I still need to upload images when needed, and to view them periodically.  Hopefully, we can get this app to download images on demand, for viewing.  Perhaps just create a URL link to the image on the form, for the user to click on when they want to view an image.  I guess it would just open in another browser tab/form.

     I'm now viewing webinar #487 again, looking for how you used JavaScript in a few embeds.  Hopefully this will help me get a handle on how to use it in this app.  I'll continue to experiment.

Thanks,

Jeff

[jking]

Bruce,

     I have made some progress with this today.  First, on tab 2 of the update form, I removed the file upload control, and replaced it with a field(CC:Coin_Image_Name_Obv).  I now manually enter a file name.  Then, on tab 3, I have an image control, set up as in the attached image.  I call a JavaScript function from here:

     function setObverseImage() {

   $("#obvImage").attr("src", "/uploads/" + $("#CC__Coin_Image_Name_Obv").val());
   
      }

This adds a src attribute to the image code, that includes the file name from the field on page 2 (CC:Coin_Image_Name_Obv).  This works upon loading the application or doing a few refreshes in the browser.  I now need code to refresh the image immediately upon tabbing from page 2 to page 3, accepting the new image name in the field on page 2, or on saving.  Some research I did suggests this may be due to caching the page.  Can you suggest a way to refresh the image after entering a image file name on page 2?

Once I get this working, I'll then try this with the upload control, to see if I can store the uploaded file name, which is not working in NT 11.04.

Thanks,

Jeff

Addendum:  seems this function does not always work...maybe a caching issue?  However, if I enter the code into the DevMode console, it works all the time.

[Jane]

Jeff,

For your caching issue, what Bruce posted the other day on the 3rd party newsgroup might be useful:

Just passing a parameter in the URL will typically bypass the cache

So instead of downloading
www.johan.com/reports/sales.pdf
you make the URL
www.johan.com/reports/sales.pdf?c=1

Typically then the browser will force-fetch the file.

cheers
Bruce

[jking]

Jane,

     Thanks, but that did not help.  I'm almost there.  When I go to the third page (tab), I see an empty image control (NoImage.png).  Once I click on the image control, the correct image appears (WithImage.png).  Here is the code that should fire when I tab to page 3:

     $("#obvImage").attr("src", "/uploads/" + $("#CC__Coin_Image_Name_Obv").val());

I have tried adding .on("Click"), .focus(), .click(), etc.  I just need the image control to receive focus and fire this code. 

I have also tried selecting the tab (Page 3):

     $("#ui-id-10").on("click", function () {
           $("#obvImage").attr("src", "/uploads/"+$("#CC__Coin_Image_Name_Obv").val());       
     });

In this case, the image appears when I click on the tab a second time. 

Note, I have a custom JS function called setObverseImage(), and I call this from the onGenerate (JavaScript) template field for the Image control (page 3) and the onChange (JavaScript) template field for the file name field (page 2).

Perhaps I'm going about this wrong, so any suggestions wold be appreciated.

Thanks,

Jeff

[Bruce]

as always an updated example will likely help me hel you. It's hard to comment on what might be wrong when I can't see what you have done.

[jking]

Bruce,

     Sent the latest version I have via email.  Also attached here, should anyone else want to take a look.

Thanks,

Jeff