Home Weekly Assignments Final Project About me Student Agreement

Interface and Application Programming

The assignments for this week:

For the code for this interface, Click Here

Using MIT App Inventor and Kodular Creator

I decided to use MIT App Inventor or Kodular as a user interface design leveraging their visual development environments to create intuitive and interactive interfaces for mobile applications without the need for traditional coding skills.They are visual development platforms providing a drag-and-drop interface for building Android applications.
You can design UI elements such as buttons, text fields, images, and more by simply dragging them onto the design canvas.
Use the Blocks Editor we can define the behavior and functionality of the UI elements.
They offers various components and features to create engaging user interfaces, including sensors, multimedia, connectivity, and data storage components.
Once the UI design is complete, we can preview and test the application directly on an Android device using the Companion app or by generating an APK file for installation.

Using Kodular as a reminder to drink water

After trying both, I preferred Kodular. I felt it had more options for customisation.
  • I logged in to my Kodular account and started a new project.
  • I dragged and dropped two TextBox components onto the screen for entering the time interval and number of glasses.
  • Then, I placed a Button component for the "Remind Me" button.
  • To add a touch of fun, I also dragged and dropped an Image component onto the screen and uploaded an image of Dory.
  • I arranged all these components on the screen to make it look appealing.
  • I customized the properties of each component according to my preferences. For instance, I set the text of the TextBox components to give clear instructions to the user.




  • In the Blocks field, I used blocks to retrieve the values entered in the TextBox components.
  • I downloaded an extension for Alarm
  • Using the Clock component, I scheduled reminders at the specified time intervals by setting it to trigger at those intervals.
  • When the Clock component triggered, I displayed a notification reminding me to drink water.



  • I used the Kodular Companion app to test or generated an APK file to install the app on my phone.
  • Testing was crucial, so I checked to ensure that reminders were displayed at the specified intervals and that the counter accurately tracked the number of glasses consumed.
  • Based on my testing, I made any necessary adjustments to the design and functionality of my app. I iterated on the design and functionality as needed to enhance the user experience and ensure that the app met my requirements.
  • To do this, once you design the screen we can add the buttons and bluetooth client in the designer. In the blocks module, we can add the code.
  • To export to the phone we have to download Kodular Companion and scan the code generated in kodular in the laptop.


    • Using Kodular to control the LED in my board

    I wanted to use my PCB which has ATtiny1614 as the microcontroller but it didnt have a bluetooth module. , so I had to add a Bluetooth module. I thought of using the Quentorres board to power the board.
  • I made a bridge board for this. This board had two sockets—one for my original ATtiny1614 board and another for the new Bluetooth module. To power everything up, I used a Quentorres board. And to connect everything, I used an FTDI to UPDI converter.



  • Now, I wanted to control the lights on my PCB using an app made with Kodular. So, I designed an easy-to-use app with buttons and sliders in Kodular. With the app, I could connect to the Bluetooth module on the bridge board and send commands to turn the lights on and off from my phone.
  • Drag and drop a BluetoothClient component onto the screen. Add buttons (two buttons named "Turn On" and "Turn Off") for controlling the LEDs.

  • Go to the Blocks section to add functionality to the buttons.

    • Here, '1' indicates on and this will be communicated to the board and '0' indicates off.
  • Upload this code to the ATtiny1614 using the FTDI to UPDI converter:
    •     #include < SoftwareSerial.h>

      #define LED_PIN 8 // Define your LED pin

      SoftwareSerial Bluetooth(5, 4); // RX, TX

      void setup() {
      pinMode(LED_PIN, OUTPUT);
      Bluetooth.begin(9600); // Set Bluetooth module baud rate
      Serial.begin(9600); // Optional: For debugging
      }

      void loop() {
      if (Bluetooth.available()) {
      char command = Bluetooth.read();
      Serial.println(command); // Optional: For debugging

      if (command == '1') {
      digitalWrite(LED_PIN, HIGH); // Turn the LED on
      } else if (command == '0') {
      digitalWrite(LED_PIN, LOW); // Turn the LED off
      }
      }
      }




    Group assignment:

    Interface and Applications Programmings



    Design files

    Bridge board
    HTML for Blink in XIAO RP2040
    Kodular file for Reminder to drink water
    Kodular file for controlling LED