Troubling using QuaggaJS - Javascript Barcode Scanner - javascript

I am using QuaggaJS. On the home page there, it has basic descriptions of its main methods, as well as an example html folder in its downloadable zip. My problem, is that one of the example HTMLs is called static_images. This takes in image src's for its scanning procedure, but I cannot figure out how to give it a custom single src that I specify. (The example HTML seems to use a pre-set list of images in the folder).
I read (on QuaggaJS git homepage) that the method Quagga.decodeSingle(config, callback) does exactly what I want.
In contrast to the calls described above, this method does not rely on
getUserMedia and operates on a single image instead. The provided
callback is the same as in onDetected and contains the result data
object.
But I cannot figure out how to implement that method into his example code. Can someone guide me, and explain, how I am to implement that method within QuaggaJS? (quagga/example/static_images.html/js)

The method Quagga.decodeSingle takes an object as the first parameter (config) that has a property called "src". You can pass your src to this property.
The example the author gives is:
Quagga.decodeSingle({
readers: ['code_128_reader'],
locate: true, // try to locate the barcode in the image
src: '/test/fixtures/code_128/image-001.jpg' // or 'data:image/jpg;base64,' + data
}, function(result){
console.log(result);
});
where the readers property indicates the method will only decode code_128 barcodes. You can add the other barcode types in this array, which are basically the names of the protocols with underscores instead of spaces with "_reader" at the end (e.g., ["code_128_reader", "code_39_reader", "code_39_vin_reader", "ean_reader", "ean_8_reader", "upc_reader", "upc_e_reader", "codabar_reader"]).

Related

Modify URL on copy (-paste)

I need to modify the url on copy from an angular project.
When the user selects URL and copy (like ctrl+c), it is
page/item/123
I need to modify that to
page/item?id=123
How can I do that?
Reason: I could not make the web.config work to pass the full path (item/123), so angular cannot parse what is not there.
However, I can make item?id=.... work, so it opens "item" and there I can get the query parameter.
Added: in the comments it was suggested to do it one way/the right way only and I agree - but I am here because my original problem cannot be solved: web.config - forward full path with parameter
How to make rules work with parameters and pass the full path for parsing
Here's how it can be done:
html
<div (copy)="handleCopy($event)">page/item/1234</div>
ts
handleCopy(event: ClipboardEvent) {
event.clipboardData.setData('text/plain',
document.getSelection().toString().replace(/\/(?=[^\/]*$)/, "?id="));
event.preventDefault();
}

Googel Apps Script hasNext() returns false

I'm trying a very simple thing but can't seem to get it to work
I have a number of files with the same name "Facturas 21" living in different subfolders in my drive. I want to do stuff to them but I cannot access them with the file iterator for some reason.
My code is as simple as it gets:
function getFiles() {
const drive = DriveApp.getFolderById("XXXXXXXXX");
const files = drive.getFilesByName("Facturas 21");
Logger.log(files.hasNext()); // logs false!
while (files.hasNext()) {
let file = files.next();
... some code
}
}
Why is it giving me false when it's a fact that there are those files? FYI, I've copied and pasted the string, so no misspelling or mistyping.
According to the docs, getFilesByName() "gets a collection of all files in the user's Drive that have the given name" and returns a FileIterator object. What am I not seeing??
You need to traverse the whole tree of content. Drive won't do that for you.
You're getting an empty FileIterator, presumably because you don't have any files named "Facturas 21" directly in folder XXX.
Recursively call drive.getFolders() until you reach the child node.
The reason this line Logger.log(files.hasNext()); returns false is mainly because you are performing the search in the specific folder with the id you provisioned.
Just like mentioned in the other answer, you will have to traverse the whole Drive tree.
However, you may benefit from using the below snippet in order to list all the files named "Facturas 21":
function listFiles() {
var query = "title contains 'Facturas 21'";
let files = Drive.Files.list({q: query}).items;
// code
}
The code above makes use of the Drive advanced service and is returning all the files named "Facturas 21" from the whole Drive. The files variable returned will be an array of objects of type File, so depending on the end result you are expecting, you can manipulate these for your needs.
Note
Please bear in mind that the Drive advanced service makes use of Drive API v2.
Reference
Drive API v2 Search Terms;
Drive API v2 Files:list;
Apps Script Advanced Drive Service.
Explanation:
According to this link, the hasNext() method of the Class FileIterator returns a Boolean value. Thus, this is the reason why you're getting "false" or "true" result when you run your code Logger.log(files.hasNext());.
Additionally, I tried your code and I was able to get the "Facturas 21" file as seen here by adding the file's extension (in my case it's .txt) on the line 3 const files = drive.getFilesByName("Facturas 21.txt");. This is the main reason why you're only getting the false result.

base link and search api

I am attempting to query a database through an API which I don't fully understand. I have been sent an example of the API being used with a keyword search form. The form is an html file and uses jquery return JSON documents, format items into an array array, and display.
I tried to build the design of my application and manipulate the form to work within my pages. The file the uses the API requires that the a base link be used.
<base href="{{app_root}}">
If I remove this base link my functionality of the search is lost. If I use the base link all of presentation and CSS is lost.
I thought maybe I could change the base link dynamically when I needed to call the search file with:
<script type="text/javascript">
function setbasehref(basehref) {
var thebase = document.getElementsByTagName("base");
thebase[0].href = basehref;
}
//setbasehref("{{app_root}}");
setbasehref("{{app_root}}");
</script>
Then use setbasehref() to change it back to my original base link, but that didn't work.
I'm new to javascript and JSON, and I'm not entirely sure what app_root is doing. Any thoughts?

Expression Engine Extension Development - Add custom javascript to rendered entry

I'm working on an extension and one of the options available in the settings needs a custom javascript to be added to the document head when rendered. The problem I am having is with the parsing order. (There may also be a better way of doing the include too)
I am using the channel_entries_tagdata hook.
Inside this, once the settings are processed, I am doing the following:
// Add the required javascript
$jscript = "
<script type="text/javascript">
/*! etc......
</script></head>
";
// Add js
$tagdata = str_replace("</head>", $jscript, $tagdata);
I would like to be able to just keep my javascript in a separate file and include it somehow by reference, but I don't know how to do that at this stage.
The other issue I am running into is the parsing order of the EE variables. Inside the javascript, I am using the variables from the $tagdata. Something like this:
$.post("URL", { channel: "{channel}", entryId: "{entry_id}", urlTitle: "{url_title}", lastSegment: "{last_segment}", editDate: eo.editDate, field: eo.eleName }, function(data){...
How would I call/use the EE variables in this case?
Elaborated...
This extension is for the following:
In the Addons -> Extensions from the control panel, they will activate the extension. In the 'Settings' for that extension, they will be able to authorize, by Channel, the members or groups that can 'edit' entries in that channel.
The extension, after checking permissions, edits each custom field type before it is rendered and wraps it in a class element. The JavaScript file is for this functionality next. When that element is clicked, a modal is opened which will contain the custom field type as well as the channel/entry information, so it can save the field once edited.
Could you let the script in the <head> be a generic function and pass variables to it by calling it from inside your channel entries?
<head>
...
<script>
function W3bGuy_function(channel, entry_id, last_segment) {
...whatever...
}
</script>
</head>
<body>
...
{exp:channel:entries}
some action triggers: W3bGuy_function('{channel}', '{entry_id}', '{segment_3}');
{/exp:channel:entries}
...
channel_entries_tagdata contains the raw template code pulled from within each {exp:channel:entries} loop, and then has another variable ($row) which is an array of the actual data for that entry. (As per the docs.)
So first, you'll have to make sure your entire page template is within your Channel Entries loop if you want to add JS to the <head> in this manner - and that may not work if your <head> is inside an embed.
Second, I'd suggest dumping the $row data that's passed via that hook, to see if you can extract your data in your returned JS from there.
Hope that helps.

webOS/Ares : read JSON from URL, assign to label

I've used the webOS Ares tool to create a relatively simple App. It displays an image and underneath the image are two labels. One is static, and the other label should be updated with new information by tapping the image.
When I tap the image, I wish to obtain a JSON object via a URL (http://jonathanstark.com/card/api/latest). The typcial JSON that is returned looks like this:
{"balance":{"amount":"0","amount_formatted":"$0.00","balance_id":"28087","created_at":"2011-08-09T12:17:02-0700","message":"My balance is $0.00 as of Aug 9th at 3:17pm EDT (America\/New_York)"}}
I want to parse the JSON's "amount_formatted" field and assign the result to the dynamic label (called cardBalance in main-chrome.js). I know that the JSON should return a single object, per the API.
If that goes well, I will create an additional label and convert/assign the "created_at" field to an additional label, but I want to walk before I run.
I'm having some trouble using AJAX to get the JSON, parse the JSON, and assign a string to one of the labels.
After I get this working, I plan to see if I can load this result on the application's load instead of first requiring the user to tap.
So far, this is my code in the main-assistant.js file. jCard is the image.
Code:
function MainAssistant(argFromPusher) {}
MainAssistant.prototype = {
setup: function() {
Ares.setupSceneAssistant(this);
},
cleanup: function() {
Ares.cleanupSceneAssistant(this);
},
giveCoffeeTap: function(inSender, event) {
window.location = "http://jonathanstark.com/card/#give-a-coffee";
},
jcardImageTap: function(inSender, event) {
//get "amount_formatted" in JSON from http://jonathanstark.com/card/api/latest
//and assign it to the "updatedBalance" label.
// I need to use Ajax.Request here.
Mojo.Log.info("Requesting latest card balance from Jonathan's Card");
var balanceRequest = new Ajax.Request("http://jonathanstark.com/card/api/latest", {
method: 'get',
evalJSON: 'false',
onSuccess: this.balanceRequestSuccess.bind(this),
onFailure: this.balanceRequestFailure.bind(this)
});
//After I can get the balance working, also get "created_at", parse it, and reformat it in the local time prefs.
},
//Test
balanceRequestSuccess: function(balanceResponse) {
//Chrome says that the page is returning X-JSON.
balanceJSON = balanceResponse.headerJSON;
var balanceAmtFromWeb = balanceJSON.getElementsByTagName("amount_formatted");
Mojo.Log.info(balanceAmtFromWeb[0]);
//The label I wish to update is named "updatedBalance" in main-chrome.js
updatedBalance.label = balanceAmtFromWeb[0];
},
balanceRequestFailure: function(balanceResponse) {
Mojo.Log.info("Failed to get the card balance: " + balanceResponse.getAllHeaders());
Mojo.Log.info(balanceResponse.responseText);
Mojo.Controller.errorDialog("Failed to load the latest card balance.");
},
//End test
btnGiveCoffeeTap: function(inSender, event) {
window.location = "http://jonathanstark.com/card/#give-a-coffee";
}
};
Here is a screenshot of the application running in the Chrome browser:
In the browser, I get some additional errors that weren't present in the Ares log viewer:
XMLHttpRequest cannot load http://jonathanstark.com/card/api/latest. Origin https://ares.palm.com is not allowed by Access-Control-Allow-Origin.
and
Refused to get unsafe header "X-JSON"
Any assistance is appreciated.
Ajax is the right tool for the job. Since webOS comes packaged with the Prototype library, try using it's Ajax.Request function to do the job. To see some examples of it, you can check out the source code to a webOS app I wrote, Plogger, that accesses Blogger on webOS using Ajax calls. In particular, the source for my post-list-assistant is probably the cleanest to look at to get the idea.
Ajax is pretty much the way you want to get data, even if it sometimes feels like overkill, since it's one of the few ways you can get asynchronous behavior in JavaScript. Otherwise you'd end up with code that hangs the interface while waiting on a response from a server (JavaScript is single threaded).

Categories

Resources