#1 2017-01-17 00:27:12

rnshepard
Member
Registered: 2017-01-17
Posts: 3

Checking if file exists and mixing AB and Javascript code

Hello, i am trying out AppBuilder, and trying to use a button to incrementally show images. That works fine, but when it reaches the last image available, I want it to go to the first image; the number of images will vary as I add more.

I tried using javascript in the button code to check if image exists, but it seems to ignore the script. I have the following:

(images are named 1a.jpg, 1b.jpg, then 2a.jpg, 2b.jpg, etc. (when I click on the image 1a.jpg, it loads 1b.jpg, etc.))

//This part works; just shows next image (first image is set in code in body of app).
SetVar "[picnumber]" "[picnumber]+1" "Number" // increments number of image name
SetVar "[picnumber2]" "[picnumber]a" "String" // appends 'a' to name

//following javascript used to see if image exists; this part is not recognized.
function checkImage(imageSrc, good, bad) {
    var img = new Image();
    img.onload = good;
    img.onerror = bad;
    img.src = imageSrc;
}
checkImage("images/[picnumber2].jpg"", function(){ SetVar "[ptoonpic.Image]" "images/[picnumber2].jpg" "String"; }, function(){ SetVar "[ptoonpic.Image]" "images/1a.jpg" "String"; } );

The javascript works outside of appbuilder, in a simple web page, but not in the button code area. Can you advise any simple way to verify if an image exists in folder so I can redirect to first image when image called doesn't exist?

Appreciate your help.

Roger

Offline

#2 2017-01-17 08:25:48

David
Admin
From: Alcobendas, Madrid, Spain
Registered: 2015-04-21
Posts: 1,657
Website

Re: Checking if file exists and mixing AB and Javascript code

Hello,

Maybe you can prepare the Javascript function as an app's function in order to be called from the button's event. The code that you shown may can work, but, the Javascript code must be placed between the actions StartJS and EndJS actions in this way:

StartJS
  // Place here pure Javascript code
EndJS

The External Javascript help topic can be also of your interest, for example, to access AB stuff (variables, etc.) from Javascript code.

Hope this can help you in some way.

Online

#3 2017-01-17 10:29:10

rnshepard
Member
Registered: 2017-01-17
Posts: 3

Re: Checking if file exists and mixing AB and Javascript code

Thanks for the quick reply; ok, I added the Start/End js; Below is my rough code. It runs through and checks if each image exists, then shows it in AB. When it gets to an image that doesn't exist (ie there is no 8a.jpg), I try to use javascript to re-value window.App.RootScope.picnumber3="1a.jpg" (back to first image). But when I run this, the log shows:

[w] Unresolved "D:\Spt\PuntoonApp\Puntoons_Compiled\www\8a.jpg"

And AB still sees the [picnumber3] is not changed back to the 1a.jpg (first image). Am I setting value of the window.App.RootScope.picnumber3 variable correctly? Failing that, is there a way in AB to capture the "Unresolved" error to flag when to change the value in AB itself?

Let me know if this is not clear. I am enjoying learning from your program!

Thanks
Roger

SetVar "[picnumber]" "[picnumber]+1" "Number"
SetVar "[picnumber3]" "[picnumber]a.jpg" "String"

StartJS

function checkImage(imageSrc, good, bad) {
    var img = new Image();
    img.onload = good;
    img.onerror = bad;
    img.src = imageSrc;
}


checkImage(window.App.RootScope.picnumber3, function(){  }, function(){window.App.RootScope.picnumber3="1a.jpg"; } );
EndJS

SetVar "[ptoonpic.Image]" "[picnumber3]" "String"

Offline

#4 2017-01-17 10:55:15

David
Admin
From: Alcobendas, Madrid, Spain
Registered: 2015-04-21
Posts: 1,657
Website

Re: Checking if file exists and mixing AB and Javascript code

Hello,

Without doubt the "Unresolved" error means the image's URL doesn't exists. The variable's assignment appear good to me. I am not sure if this can help you in this specific case, but I update App Builder and now the Image control has an Error event ready to be used, so please update your AB trial now.

If you have a further question, please, maybe you can prepare a little sample application in which I can take a look at what you expected and what you get. Feel free to use the Forum's upload section or send me an email to: info AT davidesperalta DOT com.

Online

#5 2017-01-17 19:10:09

tin
Member
Registered: 2016-03-20
Posts: 161

Re: Checking if file exists and mixing AB and Javascript code

yesterday I was the same situation.I fix it by add image to project files and use path "app/images/h01.png".then use some javascript to control it.(I made cardview by using swiper as manual for user.)

Offline

#6 2017-01-17 19:46:10

David
Admin
From: Alcobendas, Madrid, Spain
Registered: 2015-04-21
Posts: 1,657
Website

Re: Checking if file exists and mixing AB and Javascript code

Hello to all,

tin wrote:

yesterday I was the same situation.I fix it by add image to project files and use path "app/images/h01.png".then use some javascript to control it.(I made cardview by using swiper as manual for user.)

The recently added Image's control's Error event may can help you too Tin! Take a look!

Online

#7 2017-01-18 10:55:30

rnshepard
Member
Registered: 2017-01-17
Posts: 3

Re: Checking if file exists and mixing AB and Javascript code

Okay thanks for the update, installed it ok. Now, hopefully last question before I can get this together. You mentioned: the Image control has an Error event ready to be used. If I give you some pseudo-code can you show me how to address/trap the error event?

SetVar "[picnumber]" "[picnumber]+1" "Number" // This advances image to show next in sequence
SetVar "[picnumber3]" "[picnumber]a.jpg" "String" // This builds the full image name.
SetVar "[ptoonpic.Image]" "[picnumber3]" "String" // Load the image we want.

[StartIf]
if [picnumber3] gives error,
    SetVar "[ptoonpic.Image]" "defaultimg.jpg" "String" // Load the default image on error
[EndIf]

Can you give me a code example how to access and use the image error event? I think once I grasp that I can put this together.

BTW- I notice where you live on your tag; I lived in Aravaca for 5 years (back in the 70's - a lot has changed!). Anyway, nice to meet someone from the old neighborhood, and hello from Oregon.

Thanks
Roger

Offline

#8 2017-01-18 11:18:58

David
Admin
From: Alcobendas, Madrid, Spain
Registered: 2015-04-21
Posts: 1,657
Website

Re: Checking if file exists and mixing AB and Javascript code

Hello Roger,

The Image's Error event is available in the Events tabs of the control: just double click the Image control that you wanted, and then, you enter into the Events tabs. Just look to the "Error" one and place the code that you wanted in that place. I prepare an small application sample for you:

ImageErrorEvent.ab (Right click and choose "Save link as...")

Please, let me know if you have any further question sir.

Online

Board footer

Powered by FluxBB


Copyright ©2018 DecSoft. All rights reserved.