Barcode reader in appStudio


#1

I found a nice barcode reader that will work out of a web app (like appStudio makes) and javascript. The question I have:

  1. it has several .js files to include - how does one include .js files in an appStudio project?
  2. it has several .css files to include - how does one include .js files in an appStudio project?
  3. it has script calls at the end of the HTML page - can these just go in the code behind, perhaps on an .onshow() event for the form?
  4. I expect I could put the HTML in the ‘body’ in an HTMLview.inner view - is that true?

Thanks so much for any direction you can point me to, any answers you can provide. DBR-JS-6.5.zip (1.0 MB)


#2

#3 is an old school way of making sure the JavaScript didn’t get executed until after the html was loaded. This was usually required to set/get some value on some html element and if the JavaScript was run at the top of the page the html element would not yet exist and you’d have a bug (good times!). Nowadays we use events and execute our code when the event fires. So you’re correct in using .show() or some other event.


#3

For 1 and 2, put the files in the project’s home directly. Then drag and drop them into the Project Explorer.

  1. Put this this code into function Main(), which gets called after everything is loaded.

  2. Use a Container - it has a convenient innerHTML property:
    https://wiki.appstudio.dev/Container


#4

Great help. I did the following.

  1. Made a Main() function that holds the JS that was at the end of the original HTML (for startup).
  2. Put the three .js and two .css files in the project folder and in the Project Explorer.
  3. Used a Container control and put the HTML in the Content property.

At this point, the project on the design side looks OK, but the project GoodBarcode.appstudio.zip (66.5 KB)
won’t run, either locally or on Volt. When asked to run, it just doesn’t do anything visible. Any thoughts?


#5

I had a look at your project. Once of the third party css files you were adding had a bad character in it. We have just uploaded a new build (7.3.1.3) which handles this gracefully.


#6

Thanks. I couldn’t get it to run in appStudio (got it to run in a plain browser with HTML). I’m just not familiar enough with how to make something in HTML transfer into an appStudio app. Thanks anyways George.

CIndy


#7

Give me a bit more detail - it’s usually pretty straightforward to do this.


#8

I think I am not putting files in the right places in appStudio. Linked is my last attempt - and also the original HTML-based code. Be quite interested in your thoughts. Thanks George
Last Attempt - https://send.firefox.com/download/a3eae355a0afea23/#_Q88uYv44V3pwJEukc3AEA

Original (I was working on Samples > Decode Video with Settings -
https://send.firefox.com/download/a487afb1c1a3ff97/#JMmSCrbsNtn_RKXHiWGGNg

Cindy


#9

I downloaded your last attempt. Not much shows up in AppStudio’s Design Screen, so I pressed Run to see what was going on. Sure enough - there’s an error in the HTML preventing the form from displaying. (“Unxpected token < line 2 column 5”)

Opening the Chrome Console, I see errors, like “Uncaught ReferenceError: dynamsoft is not defined”. First job is to fix that error. I see dynamsoft is called from foundation.min.js.

It looks like you’re missing a .js file to define dynamsoft.

The next step for you will be to figure out what file you need for dynamsoft and add that to your project.


#10

George-
Thanks again.

As for the < error, I had seen this earlier but couldn’t see the problem in the code - this is what the ‘offending code’ looks like in appStudio (second line, )


#11

That one is easy. Those statements are in HTML, not JavaScript, so they won’t work there.

Just remove them. AppStudio will add them automatically. It does so with all the files dragged and dropped to the Project Explorer.


#12

Took care of the HTML problem by removing the lines - thanks!

The second problem was that the program is not finding the dynamsoft object. This object appears to be defined in the dbr_6_5_0_2_min_js file on line 16 (at the end).

The documentation on lines 6-9 in the script_js file says to indicate where I put it (when I moved it). I put the dbr_6_5_0_2_min_js file in two places (not knowing which would word): in a Dist folder (the folder it was in for their original example - I added one to my project), and in the same folder as the .project file (and dragged it onto the Project Explorer). The comment that said that the *wasm" file should be in the same place as the dbr_6_5_0_2_min_js file so I put it in each of the two places also. Then I added the line of code (line 10) in script_js:

dynamsoft.dbrEnv.resourcesPath = Dist/

Thoughts? Here is a link to the original and current version of the app.

https://send.firefox.com/download/8347c284f49e1a7d/#FBXHVznchVJ4x0zxXkiV3Q

CIndy


#13

The line

dynamsoft.dbrEnv.resourcesPath = Dist/

isn’t valid JavaScript, so it gets rejected. I think it wants you to identify the directory the files are found in - they are top level. You’ll need to replace Dist/ with something like “” or “./”. It needs to be a string.

Once you make that change, you’ll find dynamsoft is still not defined. What library supported to define it?

A second issue that this is the first time someone has used an .wasm file with AppStudio. Is there a non-wasm way to do this?


#14

I don’t know of a non-wasm way to do this.

I tried ./ and . - didn’t work. I also put it on a server and used this in script.js:

dynamsoft.dbrEnv.resourcesPath = ‘https://www.cindycorritore.com/barcode/dbrwasm/js

Didn’t work (same error).

The dynamsoft object appears to be defined in the dbr_6_5_0_2_min_js file on the end of line 16 (var dynamsoft). If you look in the original zipped file from the dynamsoft folks, this is all of the code to make it work. I used their code and made it work in a browser with simple HTML demo webpage they included.

Do you think appStudio won’t work with a wasm file?


#15

George-
I tried moving the two dbr_ files up - get a new error now (see attached). This is using the url location for the files:
dynamsoft.dbrEnv.resourcesPath = ‘https://www.cindycorritore.com/barcode/dbrwasm/js

Thoughts?

Cindy

Cynthia L. Corritore, Ph.D.

Professor, Business Intelligence and Analytics
Business Intelligence & Analytics Department
Heider College of Business
Creighton University
Omaha, NE USA
402-612-1260


#16

You were right to move the file up. The problem was that script.js was executing before the dbr module had run. The order is important.

Since AppStudio doesn’t know how to automatically deal with wasm files (yet):

  1. Delete the file from the Project Explorer.
  2. Drag the file back into the project folder.
  3. Add the file name to ‘manifest’ in project properties.
  4. You may need something in extraheaders as well - wasm files are still new to AppStudio.

#17

See link below - I moved the .wasm file out, then back in and note it in the manifest. This is the order of files in the Project Explorer now:

Still get this error when running it:

Time to give up? I suspect the .wasm is the issue now… and I know nothing about wasm.

Would a temp. fix be to run it off a web server in a container as an iframe perhaps?

Thanks so much -

Cindy


#18

You’re really close. The comment for line 10 reads:

// By default, js will load `dbr-<version>.min.js` & `dbr-<version>.wasm` in the same folder as the context.
// `dbr-<version>.min.js` & `dbr-<version>.wasm` should always put in same folder.
// Modify this setting when you put `dbr-<version>.min.js` & `dbr-<version>.wasm` somewhere else.
// Original: dynamsoft.dbrEnv.resourcesPath = 'https://demo.dynamsoft.com/dbr_wasm/js';

Since the .wasm file is now in the same folder as the corresponding .js file, you don’t need to change the path to it. Just comment line 10 out.


#19

Good - that makes it run without errors. Now to make it work - it doesn’t turn on the camera at this point, although this code ran outside of appStudio. Thanks George

Cindy


#20

While your support request is for a web app, if you go PhoneGap you can plug into the barcodescanner app. It is very plug and play and works great,