Yapay Zeka ile Mobil Uygulama Geliştirmek – Voltmetre Arayüzü Uygulaması

Bu makalede, OpenAI ile yaptığımız bir uygulamadan bahsedeceğiz. Flutter-Dart ile bir uygulama yapmak istedik. Kodlamaları yaparken OpenAI'den yardım aldık. 

Bu uygulama bir grafik arayüzü uygulaması. Bir mikrodenetleyici sisteminin volt ölçümü için kurulduğunu düşündük. Bluetooth veye Wifi modülü aracılığıyla mobil uygulamaya gelen sayısal veriler nasıl görselleştirilir, bunu göstemek istedik.

Daha önce sitemizde ve youtube kanalımızda bluetooth ve wifi uygulamaları yapmıştık. Bluetooth uygulamalarımıza arasında, bir MCU isteminden gelen verileri mobil uygulama ile nasıl alacağımızı uygulamalarla göstermiştik.

Link: We make temperature and humidity detection system with Android device 

Şimdiki uygulamamızda, sayısal değerler(volt değerleri) random olarak üretiliyor. Her 2 saniyede bir bu sayısal veriler grafik ekrana yansıtılıyor.

Kısa Video: OpenAı ile kod yazmak Kısa Video

Flutter-Dart kodları aşağıda. Bu kodlar blok blok incelendiğinde kolay anlaşılabilir kodlardır. 

import 'dart:async';
import 'dart:math';
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Yatay Voltmetre Uygulaması'),
        ),
        body: Center(
          child: VoltmeterApp(),
        ),
      ),
    );
  }
}

class VoltmeterApp extends StatefulWidget {
  @override
  _VoltmeterAppState createState() => _VoltmeterAppState();
}

class _VoltmeterAppState extends State<VoltmeterApp> {
  double _voltageValue = 0.0;
  Timer? _timer;

  @override
  void initState() {
    super.initState();
    _startTimer();
  }

  @override
  void dispose() {
    _timer?.cancel();
    super.dispose();
  }

  void _startTimer() {
    // Belirli aralıklarla rastgele gerilim değeri üreten bir timer başlatır.
    _timer = Timer.periodic(Duration(seconds: 2), (timer) {
      final randomValue = Random().nextDouble() * 10; // 0 ile 10 arası rastgele gerilim değeri
      setState(() {
        _voltageValue = randomValue;
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    // Gerilim değerini iki basamak küsuratlı olarak biçimlendirir.
    final formattedVoltage = _voltageValue.toStringAsFixed(2);

    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Text(
          'Gerilim Değeri: $formattedVoltage V',
          style: TextStyle(fontSize: 24),
        ),
        SizedBox(height: 20),
        Voltmeter(_voltageValue),
      ],
    );
  }
}

class Voltmeter extends StatelessWidget {
  final double voltage;

  Voltmeter(this.voltage);

  @override
  Widget build(BuildContext context) {
    return Center(
      child: SizedBox(
        width: 200,
        height: 100, // Yatay gösterim için yüksekliği azaltır.
        child: Row(
          children: [
            Transform.rotate(
              angle: pi, // Grafiği yatay olarak çevirir.
              child: CustomPaint(
                painter: VoltmeterPainter(voltage),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

class VoltmeterPainter extends CustomPainter {
  final double voltage;

  VoltmeterPainter(this.voltage);

  @override
  void paint(Canvas canvas, Size size) {
    final centerX = size.width / 2;
    final centerY = size.height / 2;
    final radius = min(centerX, centerY);

    final backgroundPaint = Paint()
      ..color = Colors.grey
      ..style = PaintingStyle.fill;

    final centerPaint = Paint()
      ..color = Colors.black
      ..style = PaintingStyle.fill;

    final indicatorPaint = Paint()
      ..color = Colors.red
      ..style = PaintingStyle.fill
      ..strokeCap = StrokeCap.round
      ..strokeWidth = 10.0;

    final rect = Rect.fromCircle(center: Offset(centerX, centerY), radius: radius);
    final startAngle = 0; // Başlangıç açısını 0 yapar.
    final sweepAngle = (voltage / 10) * pi;

    canvas.drawArc(rect, startAngle, sweepAngle, true, backgroundPaint);

    canvas.drawCircle(Offset(centerX, centerY), radius * 0.1, centerPaint);

    final radians = startAngle + sweepAngle;
    final indicatorLength = radius * 0.7;
    final indicatorX = centerX + indicatorLength * cos(radians);
    final indicatorY = centerY + indicatorLength * sin(radians);

    canvas.drawLine(Offset(centerX, centerY), Offset(indicatorX, indicatorY), indicatorPaint);
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    return false;
  }
}