Odil
June 8, 2020, 1:53pm
1
Just want to share custom QR Code generation using JavaScript
const serverUrl = YOUR_SERVER
const draftToken = DRAFT_TOKEN_FROM_CENTRAL
const xmlFormId = YOUR_FORM_ID
// the following url construction is for testing draft forms
// use this for generating QR Code for appUser: …/v1/key/[token]/projects/[pid]
const url = serverUrl + '/v1/test/' + draftToken + '/projects/' + pid + '/forms/'+ xmlFormId + '/draft'
// see more keys at https://docs.getodk.org/collect-import-export/#list-of-keys-for-all-settings
const mysettings = {
general: {
server_url: `${url}`,
},
admin: {},
}
// see http://nodeca.github.io/pako/
var pako = require('pako')
var Uint8Array = new TextEncoder('utf-8').encode(JSON.stringify(mysettings))
var compressedSettings = pako.deflate(Uint8Array, { to: 'string' })
var encodedS64 = btoa(compressedSettings)
console.log(encodedS64 )
// now you can use any QR Code generate library to make QR Code with your own settings.
Hope this helps.
5 Likes
dmenne
August 18, 2020, 1:01pm
2
Thanks for your examples. I have used it to create an R version for use with ruODK.
opened 12:59PM - 18 Aug 20 UTC
feature
The example below shows how to create QR Codes for test submissions. I post it h… ere because there were are some missing parts in the documentation (base64 encoding), and there was a nasty gotcha in `qrencode` that stumbles over the allowed CRLF in base64 encoding. I have not tested it exactly as it is, because it is part of a R6 class that creates the warehouse SQLite database.
Some ideas from [here](https://forum.getodk.org/t/generating-qr-codes-using-tokens-from-central-in-javascript/27156)
Maybe one day I will try to create a pull request - no now.
```
#' @description
#' Generates draft QR Code.
#' \url{https://docs.getodk.org/collect-import-export/#list-of-keys-for-all-settings}
#'
#' @param xmlFormId The id of this Form as given in its XForms XML
#' @param draftToken as obtained from `ru_draft_form_details`
#' @param show_image Displays the QR-Code with image
#' @param JSON file in inst/extdata as template for settings. Use **
#' to delimit `draftToken` insert location.
#' @return QR code for display with `image`
ru_qr_code = function(xmlFormId, draftToken, pid,
show_image = FALSE,
collect_json = "collect_settings.json") {
# Settings file must use ** to delimit replaceable tokens to avoid
# collisions with braces in json
settings_file =
system.file("extdata", collect_json, package = "sgformulare")
if (!file.exists(settings_file))
settings_file = rprojroot::find_package_root_file("inst", "extdata", collect_json)
if (!file.exists(settings_file))
stop("Settings file ", settings_file, " not found")
url = ruODK::get_default_url()
server_url = glue::glue(
"{url}/v1/test/{draftToken}/projects/{pid}/forms/{xmlFormId}/draft")
# Read settings with ** as glue delimiter
settings = gsub("[\r\n\t ]", "", readr::read_file(settings_file))
qq = glue::glue(settings, .open = "**", .close = "**")
# Linebreaks must be removed. qrencode does not follow standards here
# https://github.com/jeroen/jsonlite/issues/220
q64 = gsub("[\r\n]", "", jsonlite::base64_enc(memCompress(qq, "gzip")))
qr = qrencoder::qrencode_raw(q64)
if (show_image) {
# pp = par(mar = c(0,0,0,0) )
image(qr, asp = 1, col = c("white", "black"), axes = FALSE, xlab = "", ylab = "")
# par(pp)
}
qr
}
```
**Template** `collect_settings.json`
```
{
"admin": {
"view_sent": false,
"change_server": false,
"analytics": false,
"save_as": false
},
"general": {
"server_url": "**server_url**",
"navigation": "swipe_buttons",
"periodic_form_updates_check": "every_fifteen_minutes",
"autosend": "wifi_only",
"guidance_hint": "yes_collapsed",
"analytics": false
}
}
```
4 Likes
Fantastic work here, guys!
You saved my life while I was struggling to find a way to generate the appropriate data to put in that QR Code. Here's my contribution to this post: a Python implementation of such mechanism.
odk_qrcode.py
import base64
import json
import qrcode
import qrcode.image.svg as qrsvg
import zlib
def make_odk_auth_qrcode(server_url, app_user_token, project_id):
"""
Creates a QR Code containing base server settings to connect to ODK.
show original
2 Likes
Stuart
November 30, 2021, 8:08am
4
Is there an update to the JSON parameters for the new version of ODK colelct i.e v2021. I'd like to set project name, icon or color.
If anyone needs an updated version, @LN has is a Python implementation that uses our official pyODK library. See https://gist.github.com/lognaturel/d538a40901aad8e5057bf0aeb8081ea6 .
1 Like