Create QR-Codes with circles

[MonkeybreadSoftware]

You may have seen similar barcodes, which use circles instead of blocks to draw a barcode. We can do the same with MBS FileMaker Plugin 15.1 using Barcode.GenerateJSON function. In order to do this, we added the option to output the drawing commands as JSON instead of drawing them to an image directly. 

 

The JSON includes the width and height of the barcode, which depends on the Scale parameter in the options. For our vector drawing, we would prefer bigger numbers, so a Scale of 4 or 8 may be good. The JSON contains arrays for rectangles, strings, hexagons and circles. For the QR-Codes, we only get rectangles, but an EAN code would have a text below the code. A Maxicode barcode would have hexagons for the dots and circles in the middle.

Here is a sample JSON, but shorted:

{
	"width":	472,
	"height":	465,
	"rectangles":	[
		{
			"width":	8,
			"height":	400,
			"x":	56,
			"y":	0,
			"colour":	-1
		}, 
		{
			"width":	16,
			"height":	400,
			"x":	72,
			"y":	0,
			"colour":	-1
		}, 
		{
			"width":	16,
			"height":	400,
			"x":	96,
			"y":	0,
			"colour":	-1
		}, 
...
	],
	"strings":	[
		{
			"length":	5,
			"width":	376,
			"x":	244,
			"y":	464,
			"text":	"12345",
			"rotation":	0,
			"fsize":	80,
			"halign":	0
		}
	]
}

In the script (in sample database Barcode Generation JSON.fmp12), we first generate the barcode and then walk over the rectangles in the JSON. To generate the barcode, we start with options as JSON:

{
	"Symbology":	"EANX",
	"Text":	"54321",
	"Transparent":	1
}

In our sample script, we add options like OutputJSON to turn on the JSON output. We also set scale to 4 or 8 to increase the coordinate numbers for our drawing.

Set Field [ Barcode Generation JSON::Image ; "" ]
Set Variable [ $options ; Value: Barcode Generation JSON::JSON ]
Set Variable [ $options ; Value: JSONSetElement ( $options; "OutputJSON" ; 1 ; JSONBoolean ) ]
Set Variable [ $options ; Value: JSONSetElement ( $options; "Scale" ; 8 ; JSONNumber ) ]
 
Then we generate a barcode and check if we got an error. We even store the JSON in $$json, so we can inspect it for debugging later.
 
Set Variable [ $json ; Value: MBS("Barcode.GenerateJSON"; $options) ]
Set Variable [ $$json ; Value: $json ]
If [ MBS("IsError") = 0 ]
	...
Else
	Show Custom Dialog [ "Failed to create barcode" ; $json ]
End If

Inside the block we query the setting for scale and the size of the barcode into a local variables. We also add a border since our circle lines may otherwise be cropped by the edge of the image. And it may be good to do a check for the image size. If something goes wrong, you don't like to cause a very long wait time if the width is a million points. If the size is reasonable, we create a picture with the size. Here we can define the fill color for the background and we pick white. For drawing, we can set the stroke color with GMImage.SetStrokeColor and the GMImage.SetFillColor for the filling. For us both are black, but you could e..g use a gray level for the stroke color to make the look more smooth.

Set Variable [ $Border ; Value: 10 ]
Set Variable [ $Scale ; Value: JSONGetElement ( $options ; "Scale" ) ]
Set Variable [ $width ; Value: JSONGetElement ( $json ; "width" ) + 2 * $Border ]
Set Variable [ $height ; Value: JSONGetElement ( $json ; "height" ) + 2 * $Border ]
 
If [ $width > 2000 or $height > 2000 ]
	Show Custom Dialog [ "Huge picture?" ; $width & "x" & $height ]
	Exit Script [ Text Result:    ]
End If
 
Set Variable [ $img ; Value: MBS( "GMImage.New"; $width & "x" & $height; "white") ]
Set Variable [ $r ; Value: MBS( "GMImage.SetStrokeColor"; $img; "black") ]

Next we check the rectangles. This is a JSON array with objects for each rectangle, defined by X, Y, width and height values. The loop counts up from 0 for the first entry to the count. When we the loop ends, we output the image as PNG and destroy the image:

# we only do rectangles here, no circles, strings or hexagons
Set Variable [ $rectangles ; Value: JSONGetElement ( $json ; "rectangles" ) ]
 
Set Variable [ $count ; Value: MBS("JSON.GetArraySize"; $rectangles) ]
Set Variable [ $index ; Value: 0 ]
If [ $index ≤ $count ]
	Loop [ Flush: Defer ]
		# your script steps here
		Set Variable [ $item ; Value: MBS("JSON.GetArrayItem"; $rectangles; $index) ]
		...
		# next
		Set Variable [ $index ; Value: $index + 1 ]
		Exit Loop If [ $index ≥ $count ]
	End Loop
End If
# 
Set Field [ Barcode Generation JSON::Image ; MBS( "GMImage.WriteToPNGContainer"; $img; "barcode.png") ]
Set Variable [ $r ; Value: MBS( "GMImage.Destroy"; $img ) ]

Inside the loop, we check the size and position of the rectangle. We can use these coordinates to draw a rectangle there and call it a day. But of course be do the circles a few lines further. We also should not forget to add the border margin here to the coordinates, so the circles are not moved to the edge.

Set Variable [ $width ; Value: GetAsNumber( JSONGetElement ( $item; "width" )) ]

 

[Ocean West]

Cool, do you think we could inject a logo into a QR code?