react-native-artag-module

react native artag module to scan the custom artag and find the card identity, objective options (A,B,C,D) based on (x,y,z) axis

Installation

npm install react-native-artag-module

Usage

import * as React from 'react';

import { StyleSheet, Text, View, PermissionsAndroid } from 'react-native';
import ArtagModule, { ARCameraView, ARtagEventEmitter } from 'react-native-artag-module';


export default class App extends React.Component<any> {


  state = {
    cameraPermission: false,
    options: {
      attendanceLabel: 'Attendances',
      isAttendanceLabel: true,
      attendanceTextSize: 14,
      standardLabel: 'Standards',
      isStandardLabel: true,
      standardNameTextSize: 14,
      fillRectangleBackgroundColor: false, // fill reactangle color true | false
      fillRectangleBackgroundColorCode: { R: 0, G: 255, B: 0 }, // rectangle fill color code in RGB
      markerCornerColor: true, // Corner Color
      markerCornerColorCode: { R: 0, G: 255, B: 0 },

      OptionColor: true, // Options 
      OptionColorCode: { R: 0, G: 255, B: 0 },

      markerIdentityColor: true, // Student ID
      markerIdentityColorCode: { R: 0, G: 255, B: 0 },

      outlineRectangleColor: true, // Outline Color Code
      outlineRectangleColorCode: { R: 0, G: 255, B: 0 },

      instantDataLabel: { A: "S", B: "B", C: "C", D: "D" }
    },
    scantype: 2, // 0 - Attendance,  1 - Instant Feedback, 2 -Quizz
    classdata: {
      class_id: "1",
      class_name: "PKG-B",
      student_count: 3,
      subject_id: "6",
      subject_name: "English",
      academic_year: "2021",
      name: "Feedback11",
      topics: "test",
      question_set_id: "10",
      serial_no: "1"
    },
    carddata: [
      {
        academic_year: "2021",
        card_id: "1",
        class_id: "1",
        profile_picture: "/media/a44e9e0c-579c-4e91-b418-e3e6a191e594.jpg",
        student_id: 1,
        student_name: "Ashwinn"
      },
      {
        academic_year: "2021",
        card_id: "2",
        class_id: "1",
        profile_picture: "/media/a44e9e0c-579c-4e91-b418-e3e6a191e594.jpg",
        student_id: 34,
        student_name: "Rakshan"
      },
      {
        academic_year: "2021",
        card_id: "3",
        class_id: "1",
        profile_picture: "/media/a44e9e0c-579c-4e91-b418-e3e6a191e594.jpg",
        student_id: 82,
        student_name: "Sathyan"
      },
      {
        academic_year: "2021",
        card_id: "4",
        class_id: "1",
        profile_picture: "/media/a44e9e0c-579c-4e91-b418-e3e6a191e594.jpg",
        student_id: 82,
        student_name: "Sathyan"
      },
      {
        academic_year: "2021",
        card_id: "5",
        class_id: "1",
        profile_picture: "/media/a44e9e0c-579c-4e91-b418-e3e6a191e594.jpg",
        student_id: 82,
        student_name: "Sathyan"
      }
    ]
  }

  async componentDidMount() {
    await PermissionsAndroid.requestMultiple([
      PermissionsAndroid.PERMISSIONS.CAMERA,
      PermissionsAndroid.PERMISSIONS.READ_EXTERNAL_STORAGE,
      PermissionsAndroid.PERMISSIONS.WRITE_EXTERNAL_STORAGE,
    ]);

    await ArtagModule.ARInitialize().then(async res => {
      console.log('ARInitialize', res);
      this.setState({ cameraPermission: true })
      ARtagEventEmitter.addListener('onChange', this._onChange);
    });
  }

  componentWillUnmount() {
    ARtagEventEmitter.removeListener('onChange', this._onChange);
  }

  _onChange(result: any) {
    console.log("result", result);

  }

  render() {
    if (!this.state.cameraPermission) {
      return (
        <>
          <View style={styles.container}>
            <Text>Please wait....</Text>
          </View>
        </>
      )
    } else {
      return (
        <ARCameraView {...this.props} style={styles.preview} options={this.state.options} type={this.state.scantype} classes={this.state.classdata} cards={this.state.carddata} onChange={this._onChange} />
      )
    }

  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },

  preview: {
    alignItems: 'center',
    backgroundColor: 'transparent',

    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    position: 'absolute',
    width: '100%',
    height: '100%'
  },
});

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT