DEV Community

Cover image for Github Action Tracker with light and dark mode
Mustafa Unal
Mustafa Unal

Posted on

1

Github Action Tracker with light and dark mode

My Workflow

.github/workflows/workflow.yml

Submission Category:

Interesting IoT

Yaml File or Link to Code

GitHub logo bleakview / actionshackathon21

for dev.to # actionshackathon21




Additional Resources / Info

We watch our how the work progress through screens big small rectangle, square but do we have to squish our view of the world through a window.
We don't have to we can watch the progress with what ever way we want. (and it began to become boring after a while) So I designed a system which show the progress with both cell phone and an IOT device connecting with Bluetooth Low Power or BLE in short.

Requirements:

  • A CloudAMQP account (you need a AMQP server it can be AWS,AZURE ...)
  • A system ready for development for flutter ( I tested in Android IOS should also be fine but I did not test it.)

For Iot:
Light mode:

  • A needle ( I got mine from starbucks :-) )
  • A micro servo
  • ESP32 development board installed with micropython
  • jumpers usb connection cable and breadboard

Dark mode:

  • A led strip with SPI support like APA102
  • ESP32 development board installed with micropython
  • jumpers usb connection cable and breadboard

How it works
System Workflow

Github action sends message to CloudAMQP queue named "github". Since we use a queue Authentication ,storage and API interface is handled automatically. Then our mobile app gets this message it handles it and draw a image on screen. And direct the message to IOT device connected with BLE. And it also handles it. Why BLE ? if we use wifi then user has to enter credentials. Since most IOT devices do not have screen its hard to enter credentials. Also Apple do not require BLE devices with known profiles with MFI program.

How to use

App Screen
This is the main screen in you can interact with it through the bottom buttons.

Search Button Search Button
when you click this button the device automatically enters into search mode it looks for BLE devices which advertise a specific name "GITHUB_ACTION_IOT" when it finds the device it enables connect button.

Connection Button Connection Button
When this button is clicked phone makes connection to prespecified service with Guid "6E400001-B5A3-F393-E0A9-E50E24DCCA9E" and connection point "6E400002-B5A3-F393-E0A9-E50E24DCCA9E" message is sent to the connection point.

Reset Button Reset Button
When this button is clicked the state is reset.

Sound Button Sound Button
When clicked sound is enabled or disabled

PS: I know most people in dev.to do not have experience in electronics. If you have any questions on this project don't hesitate to ask questions. And If you see something wrong both in project or the text please inform me. I'm an introvert extreme edition so writing is new and frightening adventure to me.

Image of Datadog

The Essential Toolkit for Front-end Developers

Take a user-centric approach to front-end monitoring that evolves alongside increasingly complex frameworks and single-page applications.

Get The Kit

Top comments (0)

Image of Datadog

Create and maintain end-to-end frontend tests

Learn best practices on creating frontend tests, testing on-premise apps, integrating tests into your CI/CD pipeline, and using Datadog’s testing tunnel.

Download The Guide

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay