For Geoff Haynes, his work as a developer started at home with BASIC on a Commodore 64, that led him to PHP and Microsoft SQL Server for some web development, which then lead him to traveling the US amusement park circuit to install the hardware and software for point of sale (POS) systems. Today, he is settled and running Raximus Studios, using Xojo and enjoying doing what he knows best.

Q&A with Geoff Haynes of Raximus Studios

Mac, Windows or Linux?

Windows for anything requiring a UI. Linux for everything else. Sadly, I do not own a Mac but my iPhone is my daily driver for most tasks.

What’s next on your “Learn Next” list?

I spent a couple months early in 2023 learning about electrical engineering and designing circuits. I started building an EEPROM bios programming circuit but did not have time to finish it. I would like to learn more about electrical engineering and circuit design in the future.

What programming moments made you think “Wow, I love my job so much.”

• The first time I used the Xojo crypto module to send encrypted data back and forth to an Android app written in Java.
• The first time I compiled a class library in C# and used declares in Xojo to access the functions inside of it.

What is something that has surprised you about coding in the last 10 years?

The major shift to web-based cloud systems replacing software running locally on computers.

What is a cool piece of software more people should know about?

• I think SQLyog is a great tool for MariaDB. I tried many different tools used to manage MariaDB and SQLyog is my favorite.
• Voidtools Everything is a great program I use a lot to quickly find files on my development machine.
• By far, UnmanagedExports by Robert Giesecke is the most useful tool I use in every new software project.

What’s the most interesting thing you worked on recently?

Earlier this year I wrote a C# class library that can take image files and convert the binary data to work with ESCPOS commands to print perfect graphics using receipt printers in Xojo. That was really challenging and satisfying when I got it working perfectly.

Music or no music while coding?

The answer depends on what I am coding. If I am designing UI or server backend code then no music. If I am working on tedious tasks e.g. threading database queries then it’s usually Radiohead’s A Moon Shaped Pool or the Tron: Legacy soundtrack playing in the background.

When did you start using Xojo?

In 2009 I was offered a position to develop different types of software for a local IT business that was interested in writing custom applications for their clients. This is how I started using Xojo (then Real Studio). For the next several years I wrote many different types of custom applications for local businesses in Real Studio. Some examples include an office check-in manager, a contest management system, I also developed a system that was designed to work with grocery store membership cards. In addition to Real Studio, I also wrote many different types of mobile Android applications in Java. In my spare time I worked on custom database report applications in Real Studio for clients that I met during my time working in the POS industry. 

What did you first build with Xojo?

In 2016 after I parted ways with the local IT company, I decided to start Raximus Studios when I had the idea to design an arcade debit card system in Xojo that could take advantage of the cheaper IoT circuit boards that had become available.
I integrated the arcade debit system with other existing POS systems that I knew from my years of subcontractor work in the POS amusement industry. A few other systems I have designed in Xojo that are currently in use at locations include:

•  An unattended gate access system that controls turnstile entry through barcode and QR scans as well as biometrics. 
• A media control system that uses IR scanning devices to control AV devices like the type of systems used to control multiple monitors in restaurants and bowling alleys. 
• A cloud-based gate security system used to design and create photo ID cards that are scanned and verified for gate entry. 

What are you building with Xojo today?

In 2023 I started work on my own amusement and entertainment POS system written in Xojo. This new POS system RAXPOS will be launching in early 2025 at the first location. 

Thank you to Geoff Haynes for answering questions and sharing his experience with Xojo with the community. You can contact Geoff at @raximusstudios and learn more about his projects at Raximus Studios. If you have an app, a project or a person you want to see featured in Spotlight On, tell us about it!

• Facebook
• X
• LinkedIn
• GitHub
• YouTube

For some years now, it has been common for cards to include a QR code that corresponds to the contact details so that, when scanned, they can be added directly to the Address Book on a device or computer.

This tutorial creates an app that generates QR codes with the embedded information in vCard format. Additionally, learn how to to export that file in vCard format and, if you want, include an image like a contact photograph or logo.

Download Xojo and install it on your computer just as you would do with any other application on your operating system of choice (macOS, Windows or Linux).

Once Xojo is installed, launch it and select Desktop in the Choose a Project window. Enter the desired name for this application, as well as the name of the company, etc. You can leave the values presented as default or change them to those of your choice.

Designing the User Interface

This is the process that will likely take us the longest (with the most steps required). Through this process we will see how to use the Container control to our advantage to compartmentalize different aspects of the UI and also the logic associated with each of these components. Let’s get started!

Personal Data Container

Click the Library button to access the library that displays all of the user interface controls included by default in Xojo for Desktop projects.

Locate the Container control and drag it onto the Project Navigator. This is the vertical area on the left side of the IDE window where all the elements added to the project are displayed.

When you release the control over the Project Navigator you will see that it is added as a new component and the associated Inspector Panel will appear in the right area of the IDE window. Change the following values using the Inspector Panel:

• Name: PersonalInfoContainer
• Width: 374
• Height: 302

With the PersonalInfoContainer control still selected in the Navigator, access the Layout Editor for that control by clicking on the Library icon again. Locate the GroupBox control and double-click on it so it is automatically added to the Layout Editor for the container. Use the following values in the associated Inspector Panel:

• Left: 0
• Top: 0
• Width: 374
• Height: 302
• Locking: Close the four locks
• Caption: Personal Information

Next we will add both the labels and the text fields on the GroupBox1 control so the user can enter the data from which both the vCard and the QR will be created with said information.

Add Label and TextField controls from the library so the user interface looks like this:

Select all the Label items and change the following attribute in the Inspector panel (the change will be applied to all the selection):

• Text Alignment: Right

Next, enter the following values for each of the Labels, selecting them one by one from the top to the bottom:

Label1

• Name: NameLB
• Text: Name:

Label2

• Name: SurnameLB
• Text: Surname:

Label3

• Name: CompanyLB
• Text: Company:

Label4

• Name: TitleLB
• Text: Title:

Label5

• Name: PhoneLB
• Text: Phone:

Label6

• Name: MobileLB
• Text: Mobile:

Label7

• Name: EmailLB
• Text: Email:

Label8

• Name: WebLB
• Text: Web:

Next, select each of the Textfields, starting from the top, and enter the following values in the inspector panel associated with each of them:

TextField1

• Name: NameTF
• Locking: Close the left, top and right locks.

TextField2

• Name: SurnameTF
• Locking: Close the left, top and right locks.

TextField3

• Name: CompanyTF
• Locking: Close the left, top and right locks.

TextField4

• Name: TitleTF
• Locking: Close the left, top and right locks.

TextField5

• Name: PhoneTF
• Locking: Close the left, top and right locks.

TextField6

• Name: MobileTF
• Locking: Close the left, top and right locks.

TextField7

• Name: EmailTF
• Locking: Close the left, top and right locks.

TextField8

• Name: WebTF
• Locking: Close the left, top and right locks.

When you’re done, the PersonalInfoContainer’s user interface will look like this:

Postal Address Container

We’re done with the design of the container that will be used to enter the personal information data. Now, add a new Container to the Project Navigator and select it to access the associated Layout Editor.

Use the Inspector Panel to change the following values:

• Name: PostalContainer
• Width: 398
• Height: 212

Next, double-click the GroupBox control in the Library to add it to the new container, and change the following values using the associated inspector panel:

• Left: 0
• Top: 0
• Width: 398
• Height: 212
• Locking: Close the four locks.
• Caption: Postal Address:

Like we did in the previous container, this time add a total of five labels and as many text fields. The result should be similar to this:

Align all labels to the right, just like we did with the previous Container. Then, from top to bottom, modify the following properties for each of them:

Label1

• Name: StreetLB
• Text: Street:

Label2

• Name: PostcodeLB
• Text: Postcode:

Label3

• Name: CityLB
• Text: City:

Label4

• Name: ProvinceLB
• Text: Province:

Label5

• Name: CountryLB
• Text: Country or Region:

And change the following values in the inspector panel for each of the TextFields, also from top to bottom

TextField1

• Name: StreetTF
• Locking: Close the left, top and right locks.

TextField2

• Name: PostalCodeTF
• Locking: Close the left, top and right locks.

TextField3

• Name: CityTF
• Locking: Close the left, top and right locks.

TextField4

• Name: ProvinceTF
• Locking: Close the left, top and right locks.

TextField5

• Name: CountryTF
• Locking: Close the left, top and right locks.

Once completed, the layout for the PostalContainer container will look similar to this:

Completing the UI Design

With the design of the two containers completed, it is time to add them to the main window of the project (Window1), as well as some remaining controls.

Start by selecting the Window1 item in the Navigator to display it in the Layout Editor. Next, drag the PersonalInfoContainer container and drop it onto the top of the right side of the window in the Layout Editor. It should look like this:

With the Window1 item still selected in the Navigator, it is a good time to change some of its properties in the associated Inspector:

• Width: 600
• Height: 604
• Minimum Width: 600
• Minimum Height: 604
• Maximum Width: 600
• Maximum Height: 604
• Title: QR From vCard – vCard Export

Now, select the PostalContainer container and drop it just below the PersonalInfoContainer container in the Layout Editor for Window1. The result should look like this:

As you can see, the PostalContainer1 container is slightly wider than the PersonalInfoContainer1 item. Select the latter in the Window1 layout editor and use the left middle handle to drag it to the left until the alignment guide appears. This will mean that both containers are aligned.

Now, continue adding the necessary controls to finish the UI:

• An ImageWell control to display the image selected by the user for the vCard.
• A button that, when pressed, allows the user to select the image to use in the vCard.
• An ImageWell control that displays the preview of the QR generated from the vCard.
• A button that, when pressed, allows you to create the QR from the vCard as well as assign the resulting image to the preview control.
• A button that, when activated, allows the QR to be exported as an image file in PNG format.
• A button that, when pressed, generates the vCard as a file with the selected name and location.
• A last button that, when pressed, resets the UI to its default values.

Selecting the Contact Image

The contact image selected by the user will be added as part of the vCard generated as a file but not to the QR code because it does not have enough room to accommodate such a large amount of information.

To do this we need to add two controls to Window1: an ImageWell and a Button. Start by adding an ImageWell control to the top left area of the Window1 window in the Layout Editor:

Use the inspector panel associated with that control to change the following values:

• Name: PersonPreview
• Left: 20
• Top: 20
• Width: 150
• Height: 150

Next, drop a Button control just below the PersonPreview and use the associated inspector panel to modify the following values:

• Name: OpenPictureBT
• Left: 20
• Top: 182
• Width: 150
• Height: 20
• Caption: Open Picture…

The result should look something like this:

QR Preview and Export

Now, continue with the UI items corresponding to the QR code preview and the buttons to create it, export the QR or export the vCard.

Drop a new ImageWell control from the library onto Window1 in the Layout Editor and modify the following attributes in the associated inspector panel:

• Name: QRPreview
• Left: 20
• Top: 304
• Width: 150
• Height: 150

Add a button just below QRPreview and use the following values in the associated Inspector Panel:

• Name: CreateQRBT
• Left: 20
• Top: 466
• Width: 150
• Height: 20
• Caption: Create QR

Add a new button under CreateQRBT and modify the following values in the inspector panel:

• Name: ExportQRBT
• Left: 20
• Top: 498
• Width: 150
• Height: 20
• Caption: Export QR
• Enabled: Desactivado

Add a new button just below ExportQRBT and modify the following values in the inspector panel:

• Name: ExportVCardBT
• Left: 20
• Top: 530
• Width: 150
• Height: 20
• Caption: Export vCard

Add the last of the required buttons, just below the PostalContainer1 container and use the following values in the inspector panel:

• Name: ClearBT
• Left: 500
• Top: 562
• Width: 80
• Height: 20
• Locking: Close the bottom and right locks.
• Caption: Clear

We have completed the UI design! This is how it should look:

Adding Functionality to the PersonalInfoContainer

It’s time to add the code (functionality) to each of the components that need it. Start with PersonalInfoContainer, select it in the Navigator. With PersonalInfoContainer1 selected, choose the Insert > Method menu option and use the following values in the associated inspector panel:

• Method Name: GetPersonalInformation
• Return Type: String
• Scope: Public

Adding the following code in the Code Editor associated with the newly added method:

Var fullName As String = Nametf.Text + " " + SurnameTF.Text

Var returnedValues() As String

If fullname.ReplaceAll(" ", "") <> "" Then returnedValues.Add("FN:" + fullName)
If SurnameTF.Text <> "" Or nametf.Text <> "" Then returnedValues.Add("N:" + SurnameTF.Text + ";" + NameTF.Text + ";;;")
If CompanyTF.Text <> "" Then returnedValues.Add("ORG:" + CompanyTF.Text + ";")
If TitleTF.Text <> "" Then returnedValues.Add("TITLE:" + TitleTF.Text)
If PhoneTF.Text <> "" Then returnedValues.Add("TEL;Type=HOME:" + PhoneTF.Text)
If MobileTF.Text <> "" Then returnedValues.Add("TEL;Type=CELL:" + MobileTF.Text)
If EmailTF.Text <> "" Then returnedValues.Add("EMAIL;Type=INTERNET;type=WORK;type=pref:" + EmailTF.Text)
If WebTF.Text <> "" Then returnedValues.Add("URL:" + WebTF.Text)

Return String.FromArray(returnedValues, EndOfLine)

As you can see, the code for this method is pretty easy to follow. Basically, only the fields in the vCard whose TextField contains values (i.e. are not empty) will be added to the ReturnedValues array. Similarly, and to keep the code as short as possible, this tutorial does not perform any kind of validation on the entered data.

Add a new method to PersonalInfoContainer that will be responsible for cleaning up the UI of that container; use the following values using the Inspector associated with the new method:

• Method Name: Clear
• Scope: Public

And type the following code in the associated Code Editor for the Clear method:

For Each ctl As DesktopUIControl In Self.Controls
  If ctl IsA DesktopTextField Then
    DesktopTextField(ctl).Text = ""
  End If
Next

As you can see, this code loops through all the controls in the PersonalInfoContainer and uses the IsA keyword to check if the iterated control is a DesktopTextField. If it is, it then casts the iterated control to the DesktopTextField class to access its Text property and assign to it the empty string value (“”).

Add Functionality to the PostalContainer

Select the PostalContainer container in the Project Navigator. You will see that the functionality is very similar to that added in the previous one.

Create a new method and use the associated panel to change the following values:

• Method Name: GetPostalInformation
• Return Type: String
• Scope: Public

And type the following code in the Code Editor associated with the method:

Var returnedValue As String
Var inputValues() As String

inputValues.Add(StreetTF.Text)
inputValues.Add(CityTF.Text)
inputValues.Add(ProvinceTF.Text)
inputValues.Add(PostalCodeTF.Text)
inputValues.Add(CountryTF.Text)

Var address As String = String.FromArray(inputValues, ";")

If address.ReplaceAll(";","") <> "" Then returnedValue = "ADR;type=WORK:;;" + address

Return returnedValue

As you can see, it is very similar to the one above. The result will be the one corresponding to the “ADR” field of a vCard.

Add a second method with the following values in the inspector panel:

• Method Name: Clear
• Scope: Public

And write the following code in the associated editor:

For Each ctl As DesktopUIControl In Self.Controls
  If ctl IsA DesktopTextField Then
    DesktopTextField(ctl).Text = ""
  End If
Next

In this case, the code is the same as the one used in the previous container when “resetting” its UI to the initial values.

Add General Functionality to the Window

Select Window1 in the Project Navigator and add a method using the following values using the Inspector Panel:

• Method Name: GenerateVCARD
• Parameters: forVCardExport as Boolean = False
• Return Type: String

And type the following code in the associated Code Editor:

Var vCard() As String
vCard.Add("BEGIN:VCARD")
vCard.Add("VERSION:3.0")
vCard.Add(PersonalInfoContainer1.GetPersonalInformation)
vCard.Add(PostalContainer1.GetPostalInformation)
If PersonPreview.Image <> Nil And forVCardExport Then
  vCard.Add("PHOTO;ENCODING=BASE64;TYPE=JPEG:" + getPersonImage)
End If
vCard.Add("REV:" + GetRevisionTime)
vCard.Add("END:VCARD")

Return String.FromArray(vCard, EndOfLine)

Add a second method with the following values:

• Method Name: GetRevisionTime
• Return Type: String

And type the following lines of code in the associated code editor:

Var current As DateTime = DateTime.Now
Var currentToUTC As DateTime = New DateTime(current.SecondsFrom1970 - current.Timezone.SecondsFromGMT)

Return currentToUTC.Year.ToString + currentToUTC.Month.ToString + currentToUTC.Day.ToString + "T" + currentToUTC.Hour.ToString + currentToUTC.Minute.ToString + currentToUTC.Second.ToString + "Z"

Add the last of the general methods and use the following values in the Inspector:

• Method Name: GetPersonImage
• Return Type: String

Next, enter the following code into the associated editor:

Var returnedValue As String

Const kWidth as Double = 120
var pHeight as Double

If PersonPreview.Image <> Nil Then
  
  pHeight = (kWidth * PersonPreview.Image.Height) / PersonPreview.Image.Width
  
  Var tempPic As New Picture(kWidth, pHeight)
  tempPic.Graphics.DrawPicture(PersonPreview.Image, 0, 0, kWidth, pHeight, 0, 0, PersonPreview.Image.Width, PersonPreview.Image.Height)
  
  Var mb As MemoryBlock = TempPic.ToData(Picture.Formats.JPEG)
  
  returnedValue = EncodeBase64(mb)
  returnedValue = returnedValue.ReplaceLineEndings("")
End If

Return returnedValue

Adding Specific Functionality to Controls

We just need to add the functionality that will be executed when the different buttons are pressed. Start by selecting ClearBT in the Project Navigator then select the “Add to ‘ClearBT’ > Event Handler…” option in the context menu. Choose the Pressed event in the resulting window and confirm the selection so that this event is added to the control.

Now, enter the following code in the code editor associated with the Pressed event of the ClearBT control:

PersonPreview.Image = Nil
QRPreview.Image = Nil
ExportQRBT.Enabled = False

PersonalInfoContainer1.Clear
PostalContainer1.Clear

Add the Pressed event to the CreateQRBT control and type the following code in the associated code editor:

QRPreview.Image = Nil

Var theCard As String = GenerateVCARD

Try
  Var p As Picture = Barcode.Image(theCard, 600, 600)
  
  If p <> Nil Then
    QRPreview.Image = p
    ExportQRBT.Enabled = True
  Else
    ExportQRBT.Enabled = False
  End If
  
Catch e As UnsupportedOperationException
  
  MessageBox("Unable to Create QR" + EndOfLine + EndOfLine + "Probably the provided data exceeds the available room for a QR.")
  
End Try

Add the Pressed event to the ExportQRBT control and enter the following code in the associated code editor:

If QRPreview.Image <> Nil Then
  
  Var f As FolderItem = FolderItem.ShowSaveFileDialog("", "ExportedQR.PNG")
  
  If f <> Nil Then
    
    QRPreview.Image.Save(f, Picture.Formats.PNG)
    
  End If
  
End If

Add the Pressed event to the ExportVCardBT control and enter the following code in the associated Code Editor:

Var theCard As String = GenerateVCARD(True)

Var f As FolderItem = FolderItem.ShowSaveFileDialog("", "Exported.vCard")

If f <> Nil Then
  Var tos As TextOutputStream = TextOutputStream.Create(f)
  
  tos.Write(theCard)
  tos.Flush
  tos.Close
End If

Add the Pressed event to the OpenPictureBT control and type the following code using the associated Code Editor:

PersonPreview.Image = Nil

Var f As FolderItem = FolderItem.ShowOpenFileDialog(SupportedImageFormats.All)

If f <> Nil Then
  PersonPreview.Image = Picture.Open(f)
End If

Files Filtering

As you can see, in the second line of the above code we reference the SupportedImageFormats.All object as a parameter to filter the type of files that the user can select.

To do this, add a new File Type Group from Insert > File Type Group. With the newly added item in the Project Navigator selected, click the leftmost button in the toolbar to add the “image/jpeg” entry. Repeat this to add “image/png” as well.

Finally, in the inspector panel change the name of the item to SupportedImageFormats. Once finished, it should look like this:

Let’s Go!

Now the design and the functionality of our app are both completed! Let’s run it and do some tests. Try selecting a contact image (or not), filling in any of the fields, generating the associated QR and exporting it … or exporting the vCard file directly so that you can import it from any compatible application (for example, Contacts on macOS).

Of course, you can expand and complete this small example: from introducing validations for the fields that require it, increasing the number of fields so that the vCard also includes any other fields supported by the standard, etc.

Conclusion

As you have seen, generating both the vCard and the QR that contains contact information does not require a large amount of code. Best of all, with Xojo, you can check a box and cross-compile your app for macOS, Windows and Linux.

Happy Xojo Coding!

Javier Menendez is an engineer at Xojo and has been using Xojo since 1998. He lives in Castellón, Spain and hosts regular Xojo hangouts en español. Ask Javier questions on Twitter at @XojoES or on the Xojo Forum.

• Facebook
• X
• LinkedIn
• GitHub
• YouTube

Generate Codes

The ability to generate codes and identify them from images is available as a shared method for the indicated platforms, in desktop and console apps. The latter is interesting because it means that you can use this functionality in web apps deployed on Windows or Mac servers.

Creating QR or Bar128 codes couldn’t be simpler. Since it uses a shared method, it is not even necessary to have previously created an instance of the class, you only need to invoke the method:

Barcode.Image(value As String, width As Integer, height As Integer, type As Barcode.Types = Barcode.Types.QR) As Picture

Where the expected parameters are the following:

• Value: Source text string that will be converted to the indicated code type
• Width: Width of the resulting image with the generated code
• Height: Height of the resulting image with the generated code
• Type: The type of code you want to generate. It can be QR or Bar128; these values are available in the Barcode.Types enumerator

Once the method is invoked, you will obtain an image (Picture) that you can use in your app; or you will receive an InvalidArgumentException if some of the parameters provided are invalid, such as passing an empty text string as the data source.

For example, the following line of code generates a 120 x 120 image corresponding to a QR code with the text provided:

Var p As Picture = Barcode.Image("Xojo Rocks!", 120, 120, Barcode.Types.QR)

Recognize Codes in Images

In the same way it is possible to generate code images from text, it is also possible to recognize up to twelve different types of codes from an image. To do this we will use another shared method of the Barcode class:

Barcode.FromImage(image As Picture) As String()

As you can see, in this case the method will return an array of Strings with the values of the recognized codes. It is possible that the image contains more than one code; but it is also possible that no code could be recognized in the provided image, so it is advisable to check the limits of the received array before proceeding.

For example, this line of code will recognize the codes available in the MyPicture image and return the values in the RecognizedCodes() array:

Var RecognizedCodes() As String = Barcode.FromImage(MyPicture)

Scan Codes

Scanning QR codes (or any of the other supported codes) on desktop is only available for macOS and Windows platforms. This is due to desktop presenting a user interface where you can preview the image captured by the selected camera. You can select the camera to use to scan from those connected to the computer (including, for example, iOS devices in the case of Mac, through Continuity; or Android devices paired with your Windows computer). In the case of Mac, the ability to scan images is only available using macOS 10.15 or higher.

To scan codes directly using any of the cameras connected to the computer it is necessary to have previously created an instance of the Barcode class (for example, drag the class from the IDE Library onto the tray area in the Layout Editor window):

Doing so will add it to the Project Browser where we can select it and implement any of the three available Event Handlers:

• ScanCancelled: The user has canceled the code scanning operation, such as by closing the presented UI window
• ScanCompleted: Receive the value as String corresponding to the code detected by the camera
• ScanFailed: Raised when some type of error has occurred, such as the fact that no camera is detected

To display the code scanning UI, invoke the StartScan method on the created Barcode instance. For example:

Barcode1.StartScan

The scan UI does not close automatically when a code is recognized to allow scanning a series of codes (such as in the case of inventory), so it is also possible to stop the operation by code by calling the StopScan method. For example, you can include this line of code in the ScanCompleted event of the Barcode1 instance after the received value has been processed:

me.StopScan

As expected, invoking the StopScan method from code will close the code scanning UI.

Conclusion

Now you can create all types of applications on macOS, Windows and iOS with the ability to generate and scan QR codes, Barcodes and other types of codes, opening up a wide field of possibilities for Xojo users.

Javier Menendez is an engineer at Xojo and has been using Xojo since 1998. He lives in Castellón, Spain and hosts regular Xojo hangouts en español. Ask Javier questions on Twitter at @XojoES or on the Xojo Forum.

• Facebook
• X
• LinkedIn
• GitHub
• YouTube