Skip to content

RFID Chip Processing Customization

On this page, explore the customization capabilities available for the RFID chip processing.

The following elements are customizable:

Background

The processing screen background color can be adjusted in the following way.

For example:

DocReader.shared.customization.uiConfiguration = DocReader.UIConfiguration { 
    $0.setColor(.blue, forItem: .RFIDProcessingScreenBackground)
}

RGLDocReader.shared.customization.uiConfiguration = [RGLUIConfiguration configurationWithBuilderBlock:^(RGLUIConfigurationBuilder * _Nonnull builder) {
    [builder setColor:[UIColor blueColor] forItem:RFIDProcessingScreenBackground];
}];

DocumentReader.Instance().customization().edit()
    .setColor(CustomizationColor.RFID_PROCESSING_SCREEN_BACKGROUND, R.color.colorPrimary)
    .apply()

DocumentReader.Instance().customization().edit()
        .setColor(CustomizationColor.RFID_PROCESSING_SCREEN_BACKGROUND, R.color.colorPrimary)
        .apply();

DocumentReader.instance.customization.colors.rfidProcessingScreenBackground = Colors.blue;

DocumentReader.setCustomization({
  colors: {
    rfidProcessingScreenBackground: 0xff0000ff
  }
}, _ => { }, _ => { })

DocumentReader.setCustomization({
  colors: {
    rfidProcessingScreenBackground: 0xff0000ff
  }
})

DocumentReader.setCustomization({
  colors: {
    rfidProcessingScreenBackground: 0xff0000ff
  }
}, function (m) { }, function (e) { })

// Android
DocumentReader.Instance().Customization().Edit().SetColor(CustomizationColor.RfidProcessingScreenBackground, 0xff0000ff).Apply();

// iOS
RGLDocReader.Shared.Customization.UiConfiguration = RGLUIConfiguration.ConfigurationWithBuilderBlock((RGLUIConfigurationBuilder builder) =>
{
    builder.SetColor(UIColor.Blue, RGLCustomizationColor.Background);
});

Hint Messages

Messages displayed during the processing are customizable. You can adjust:

  • Text color
  • Text font
  • Background color

For example:

DocReader.shared.customization.uiConfiguration = DocReader.UIConfiguration { 
    $0.setColor(.purple, forItem: .RFIDProcessingScreenHintLabelText)
    $0.setColor(.blue, forItem: .RFIDProcessingScreenHintLabelBackground)
    $0.setFont(.italicSystemFont(ofSize: 16), forItem: .RFIDProcessingScreenHintLabel)
}

RGLDocReader.shared.customization.uiConfiguration = [RGLUIConfiguration configurationWithBuilderBlock:^(RGLUIConfigurationBuilder * _Nonnull builder) {
    [builder setColor:[UIColor purpleColor] forItem:RFIDProcessingScreenHintLabelText];
    [builder setColor:[UIColor blueColor] forItem:RFIDProcessingScreenHintLabelBackground];
    [builder setFont:[UIFont italicSystemFontOfSize:16] forItem:RFIDProcessingScreenHintLabel];
}];

val typeface = Typeface.SERIF
DocumentReader.Instance().customization().edit()
    .setColor(CustomizationColor.RFID_PROCESSING_SCREEN_HINT_LABEL_TEXT, R.color.colorPrimary)
    .setColor(CustomizationColor.RFID_PROCESSING_SCREEN_HINT_LABEL_BACKGROUND, R.color.colorAccent)
    .setFont(CustomizationFont.RFID_PROCESSING_SCREEN_HINT_LABEL, typeface)
    .apply()

Typeface typeface = Typeface.SERIF;
DocumentReader.Instance().customization().edit()
        .setColor(CustomizationColor.RFID_PROCESSING_SCREEN_HINT_LABEL_TEXT, R.color.colorPrimary)
        .setColor(CustomizationColor.RFID_PROCESSING_SCREEN_HINT_LABEL_BACKGROUND, R.color.colorAccent)
        .setFont(CustomizationFont.RFID_PROCESSING_SCREEN_HINT_LABEL, typeface)
        .apply();

DocumentReader.instance.customization.colors.rfidProcessingScreenHintLabelText = Colors.purple;
DocumentReader.instance.customization.colors.rfidProcessingScreenHintLabelBackground = Colors.blue;
DocumentReader.instance.customization.fonts.rfidProcessingScreenHintLabel = Font(
  "sans-serif-thin",
  style: FontStyle.BOLD_ITALIC,
  size: 14,
);

DocumentReader.setCustomization({
  colors: {
    rfidProcessingScreenHintLabelText: 0xff00ff00,
    rfidProcessingScreenHintLabelBackground: 0xff0000ff,
  },
  fonts: {
    rfidProcessingScreenHintLabel: {
      name: "sans-serif-thin",
      style: FontStyle.BOLD_ITALIC,
      size: 14,
    }
  }
}, _ => { }, _ => { })

DocumentReader.setCustomization({
  colors: {
    rfidProcessingScreenHintLabelText: 0xff00ff00,
    rfidProcessingScreenHintLabelBackground: 0xff0000ff,
  },
  fonts: {
    rfidProcessingScreenHintLabel: {
      name: "sans-serif-thin",
      style: FontStyle.BOLD_ITALIC,
      size: 14,
    }
  }
})

DocumentReader.setCustomization({
  colors: {
    rfidProcessingScreenHintLabelText: 0xff00ff00,
    rfidProcessingScreenHintLabelBackground: 0xff0000ff,
  },
  fonts: {
    rfidProcessingScreenHintLabel: {
      name: "sans-serif-thin",
      style: FontStyle.BOLD_ITALIC,
      size: 14,
    }
  }
}, function (m) { }, function (e) { })

// Android
DocumentReader.Instance().Customization().Edit()
    .SetColor(CustomizationColor.RfidProcessingScreenHintLabelText, 0xff00ff00)
    .SetColor(CustomizationColor.RfidProcessingScreenHintLabelBackground, 0xff0000ff)
    .SetFont(CustomizationFont.RfidProcessingScreenHintLabel, Typeface.Serif)
    .Apply();

// iOS
RGLDocReader.Shared.Customization.UiConfiguration = RGLUIConfiguration.ConfigurationWithBuilderBlock((RGLUIConfigurationBuilder builder) =>
{
    builder.SetColor(UIColor.Purple, RGLCustomizationColor.HintLabelText);
    builder.SetColor(UIColor.Blue, RGLCustomizationColor.HintLabelBackground);
    builder.SetFont(UIFont.ItalicSystemFontOfSize(16), RGLCustomizationFont.HintLabel);
});

Progress Bar

When the processing begins, a progress bar and a message above it appear. You can customize the following elements:

  • Text color
  • Text font
  • Progress color
  • Background color

For example:

DocReader.shared.customization.uiConfiguration = DocReader.UIConfiguration {
    $0.setColor(.purple, forItem: .RFIDProcessingScreenProgressLabelText)
    $0.setColor(.blue, forItem: .RFIDProcessingScreenProgressBar)
    $0.setColor(.yellow, forItem: .RFIDProcessingScreenProgressBarBackground)
    $0.setFont(.italicSystemFont(ofSize: 16), forItem: .RFIDProcessingScreenProgressLabel)
}

RGLDocReader.shared.customization.uiConfiguration = [RGLUIConfiguration configurationWithBuilderBlock:^(RGLUIConfigurationBuilder * _Nonnull builder) {
    [builder setColor:[UIColor purpleColor] forItem:RFIDProcessingScreenProgressLabelText];
    [builder setColor:[UIColor blueColor] forItem:RFIDProcessingScreenProgressBar];
    [builder setColor:[UIColor yellowColor] forItem:RFIDProcessingScreenProgressBarBackground];
    [builder setFont:[UIFont italicSystemFontOfSize:16] forItem:RFIDProcessingScreenProgressLabel];
}];

val typeface = Typeface.SERIF
DocumentReader.Instance().customization().edit()
    .setColor(CustomizationColor.RFID_PROCESSING_SCREEN_PROGRESS_LABEL_TEXT, R.color.colorPrimary)
    .setColor(CustomizationColor.RFID_PROCESSING_SCREEN_PROGRESS_BAR, R.color.colorAccent)
    .setColor(CustomizationColor.RFID_PROCESSING_SCREEN_PROGRESS_BAR_BACKGROUND, R.color.orange)
    .setFont(CustomizationFont.RFID_PROCESSING_SCREEN_PROGRESS_LABEL, typeface)
    .apply()

Typeface typeface = Typeface.SERIF;
DocumentReader.Instance().customization().edit()
        .setColor(CustomizationColor.RFID_PROCESSING_SCREEN_PROGRESS_LABEL_TEXT, R.color.colorPrimary)
        .setColor(CustomizationColor.RFID_PROCESSING_SCREEN_PROGRESS_BAR, R.color.colorAccent)
        .setColor(CustomizationColor.RFID_PROCESSING_SCREEN_PROGRESS_BAR_BACKGROUND, R.color.orange)
        .setFont(CustomizationFont.RFID_PROCESSING_SCREEN_PROGRESS_LABEL, typeface)
        .apply();

DocumentReader.instance.customization.colors.rfidProcessingScreenProgressLabelText = Colors.purple;
DocumentReader.instance.customization.colors.rfidProcessingScreenProgressBar = Colors.blue;
DocumentReader.instance.customization.colors.rfidProcessingScreenProgressBarBackground = Colors.yellow;
DocumentReader.instance.customization.fonts.rfidProcessingScreenProgressLabel = Font(
  "sans-serif-thin",
  style: FontStyle.BOLD_ITALIC,
  size: 14,
);

DocumentReader.setCustomization({
  colors: {
    rfidProcessingScreenProgressLabelText: 0xffff0000,
    rfidProcessingScreenProgressBar: 0xff00ff00,
    rfidProcessingScreenProgressBarBackground: 0xff0000ff,
  },
  fonts: {
    rfidProcessingScreenProgressLabel: {
      name: "sans-serif-thin",
      style: FontStyle.BOLD_ITALIC,
      size: 14,
    }
  }
}, _ => { }, _ => { })

DocumentReader.setCustomization({
  colors: {
    rfidProcessingScreenProgressLabelText: 0xffff0000,
    rfidProcessingScreenProgressBar: 0xff00ff00,
    rfidProcessingScreenProgressBarBackground: 0xff0000ff,
  },
  fonts: {
    rfidProcessingScreenProgressLabel: {
      name: "sans-serif-thin",
      style: FontStyle.BOLD_ITALIC,
      size: 14,
    }
  }
})

DocumentReader.setCustomization({
  colors: {
    rfidProcessingScreenProgressLabelText: 0xffff0000,
    rfidProcessingScreenProgressBar: 0xff00ff00,
    rfidProcessingScreenProgressBarBackground: 0xff0000ff,
  },
  fonts: {
    rfidProcessingScreenProgressLabel: {
      name: "sans-serif-thin",
      style: FontStyle.BOLD_ITALIC,
      size: 14,
    }
  }
}, function (m) { }, function (e) { })

// Android
DocumentReader.Instance().Customization().Edit()
    .SetColor(CustomizationColor.RfidProcessingScreenProgressLabelText, 0xffff0000)
    .SetColor(CustomizationColor.RfidProcessingScreenProgressBar, 0xff00ff00)
    .SetColor(CustomizationColor.RfidProcessingScreenProgressBarBackground, 0xff0000ff)
    .SetFont(CustomizationFont.RfidProcessingScreenProgressLabel, Typeface.Serif)
    .Apply();

// iOS
    RGLDocReader.Shared.Customization.UiConfiguration = RGLUIConfiguration.ConfigurationWithBuilderBlock((RGLUIConfigurationBuilder builder) =>
    {
        builder.SetColor(UIColor.Purple, RGLCustomizationColor.ProgressLabelText);
        builder.SetColor(UIColor.Blue, RGLCustomizationColor.ProgressBar);
        builder.SetColor(UIColor.Yellow, RGLCustomizationColor.ProgressBarBackground);
        builder.SetFont(UIFont.ItalicSystemFontOfSize(16), RGLCustomizationFont.ProgressLabel);
    });

Error Screen

On the error screen, you can adjust:

  • Text color
  • Text font
  • Image

For example:

DocReader.shared.customization.uiConfiguration = DocReader.UIConfiguration { 
    $0.setColor(.blue, forItem: .RFIDProcessingScreenResultLabelText)
    $0.setFont(.italicSystemFont(ofSize: 16), forItem: .RFIDProcessingScreenResultLabel)
    $0.setImage(UIImage(named: "custom_image_rfid_failure")!, forItem: .RFIDProcessingScreenFailureImage)
}

RGLDocReader.shared.customization.uiConfiguration = [RGLUIConfiguration configurationWithBuilderBlock:^(RGLUIConfigurationBuilder * _Nonnull builder) {
    [builder setColor:[UIColor blueColor] forItem:RFIDProcessingScreenResultLabelText];
    [builder setFont:[UIFont italicSystemFontOfSize:16] forItem:RFIDProcessingScreenResultLabel];
    [builder setImage:[UIImage imageNamed:@"custom_image_rfid_failure"] forItem:RFIDProcessingScreenFailureImage];
}];

val typeface = Typeface.SERIF
DocumentReader.Instance().customization().edit()
    .setColor(CustomizationColor.RFID_PROCESSING_SCREEN_RESULT_LABEL_TEXT, R.color.colorPrimary)
    .setFont(CustomizationFont.RFID_PROCESSING_SCREEN_RESULT_LABEL, typeface)
    .setImage(CustomizationImage.RFID_PROCESSING_SCREEN_FAILURE_IMAGE, getDrawable(R.drawable.image))
    .apply()

Typeface typeface = Typeface.SERIF;
DocumentReader.Instance().customization().edit()
        .setColor(CustomizationColor.RFID_PROCESSING_SCREEN_RESULT_LABEL_TEXT, R.color.colorPrimary)
        .setFont(CustomizationFont.RFID_PROCESSING_SCREEN_RESULT_LABEL, typeface)
        .setImage(CustomizationImage.RFID_PROCESSING_SCREEN_FAILURE_IMAGE, getResources().getDrawable(R.drawable.image))
        .apply();

DocumentReader.instance.customization.colors.rfidProcessingScreenResultLabelText = Colors.blue;
DocumentReader.instance.customization.fonts.rfidProcessingScreenResultLabel = Font(
  "sans-serif-thin",
  style: FontStyle.BOLD_ITALIC,
  size: 16,
);
DocumentReader.instance.customization.images.rfidProcessingScreenFailureImage = await rootBundle.load("custom_image_rfid_failure");

DocumentReader.setCustomization({
  colors: {
    rfidProcessingScreenResultLabelText: 0xff0000ff,
  },
  fonts: {
    rfidProcessingScreenResultLabel: {
      name: "sans-serif-thin",
      style: FontStyle.BOLD_ITALIC,
      size: 16,
    }
  },
  images: {
    rfidProcessingScreenFailureImage: "base64Image"
  }
}, _ => { }, _ => { })

DocumentReader.setCustomization({
  colors: {
    rfidProcessingScreenResultLabelText: 0xff0000ff,
  },
  fonts: {
    rfidProcessingScreenResultLabel: {
      name: "sans-serif-thin",
      style: FontStyle.BOLD_ITALIC,
      size: 16,
    }
  }
  images: {
    rfidProcessingScreenFailureImage: "base64Image"
  }
})

DocumentReader.setCustomization({
  colors: {
    rfidProcessingScreenResultLabelText: 0xff0000ff,
  },
  fonts: {
    rfidProcessingScreenResultLabel: {
      name: "sans-serif-thin",
      style: FontStyle.BOLD_ITALIC,
      size: 16,
    }
  },
  images: {
    rfidProcessingScreenFailureImage: "base64Image"
  }
}, function (m) { }, function (e) { })

// Android
DocumentReader.Instance().Customization().Edit()
    .SetColor(CustomizationColor.RfidProcessingScreenResultLabelText, 0xff0000ff)
    .SetFont(CustomizationFont.RfidProcessingScreenResultLabel, Typeface.Serif)
    .SetImage(CustomizationImage.RfidProcessingScreenFailureImage, Platform.AppContext.Resources.GetDrawable(Resource.Drawable.image))
    .Apply();

// iOS
RGLDocReader.Shared.Customization.UiConfiguration = RGLUIConfiguration.ConfigurationWithBuilderBlock((RGLUIConfigurationBuilder builder) =>
{
    builder.SetColor(UIColor.Blue, RGLCustomizationColor.ResultLabelText);
    builder.SetFont(UIFont.ItalicSystemFontOfSize(16), RGLCustomizationFont.ResultLabel);
    builder.SetImage(UIImage.FromFile("custom_image_rfid_failure.png"), RGLCustomizationImage.RFIDProcessingScreenFailureImage);
});

Examples

See the sample projects, demonstraring how to customize the RFID chip processing:

Next Steps