0

JAVAFX & Arduino Analog Değerleri Seriport’tan okuyup Grafiğe Aktarma Part -1

Merhaba arkadaşlar bu yazımda Javafx ve Arduino ‘yu birbirine karıştırıp bir uygulama yapmak istiyorum. Bilindiği gibi grafikler bir çok yerlerde verileri ifade etmede kullanılan elemanlar ve görsel açıdan uygulamalara zenginlik katan birşey. Bende bu uygulamada hem javafx chart sınıfındaki “lineChart” için bir uygulama yapayım , hemde Arduino ile seriport’tan değer okuyup grafiğe aktarayım istedim kodları yazarken üstlerine açıklama satırları ile ne anlama geldiğini yazdım. Bu uygulamadaki grafiksel gösterimi geçenlerde bir plc programcısı sormuştu ona cevap vermiştim kendime de not düşüp kaydedeyim dedim. Ben bu uygulamada bilgiyi arduino aracılığıyla seri port’a yazdım . isteyen plc veya arm vb. işlemcilerler yaptığı uygulamalardada kullanabilir. yeter ki seriporta data yazılsın yeter :). bu bölümde seriport’a bağlanmayacağım bilgileri random üretip çalışabililirliği deneyecem ikinci bölümde part-2 de seri porta bağlanıp verileri çekeceğim inşallah.. buyrun kodlar 

 

Screen.java – uygulama sınıfı

import javafx.application.Application;
import javafx.application.Platform;
import javafx.geometry.Insets;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.chart.Axis;
import javafx.scene.chart.LineChart;
import javafx.scene.chart.NumberAxis;
import javafx.scene.chart.XYChart;
import javafx.scene.control.Button;
import javafx.scene.effect.Glow;
import javafx.scene.layout.Priority;
import javafx.scene.layout.Region;
import javafx.scene.layout.StackPane;
import javafx.scene.layout.VBox;
import javafx.scene.paint.Color;
import javafx.stage.Stage;

import javax.management.NotificationEmitter;

import java.text.DecimalFormat;
import java.util.Random;

public class Screen extends Application {

    // X ve Y eksenlerini oluşturalım

    NumberAxis xAxis=new NumberAxis();
    NumberAxis yAxis=new NumberAxis();


    XYChart.Series<Number,Number> series;

     private static final int  TICK_COUNT = 50;


    @Override
    public void start(Stage primaryStage) throws Exception {


        VBox root=new VBox();
        root.setSpacing(30);
        root.setAlignment(Pos.CENTER);



        // X ve Y ekseni için bir etiket belirleyelim
        yAxis.setLabel("Voltaj Değeri");
        xAxis.setLabel("Süre");
        yAxis.setTickLabelFill(Color.WHITE);
        xAxis.setTickLabelFill(Color.WHITE);


        // Şimdi LineChart 'ımızı oluşturalım
        LineChart<Number,Number> lineChart=new LineChart<>(xAxis,yAxis);
        lineChart.setAnimated(false);
        lineChart.setTitle(" Javafx & Arduino Analog Port Okuma");
        lineChart.setPadding(new Insets(30));

        lineChart.setCreateSymbols(false); // chart üzerindeki noktaları kaldırır

        // İçinde gösterilen herbir grafige ait bilgileri Series nesnesi tutuyor

        series=new XYChart.Series<>();
        series.setName("A0 Analog Port Değerleri");


        // İlk program açıldığında tümünü sıfırlamak için bütün x değerlerine sıfır atayalım
        for(int i=0; i<TICK_COUNT;i++) {

            series.getData().add(new XYChart.Data<>(i,0));
        }

        // Seriyi lineChart 'ın içine atalım
        lineChart.getData().add(series);

        Button button=new Button("Değerleri Okumaya Başla");
        button.setPadding(new Insets(10));

        Region spacer=new Region();
        root.setVgrow(spacer, Priority.ALWAYS);

        root.getChildren().addAll(lineChart,button,spacer);


        // Butona basınca Değerleri üretmeye başlasın
        button.setOnAction(event -> {
            Thread thread=new Thread(new Runnable() {
                @Override
                public void run() {

                    // Counter Rastgele değerleri istediğimiz kadar üretmek için yazalım
                    int counter = 0;
                    while (true) {

                        Platform.runLater(new Runnable() {
                            @Override
                            public void run() {
                                grafigiKaydir();
                            }
                        });
                        try {
                            Thread.sleep(200);
                        } catch (InterruptedException e) {
                            e.printStackTrace();
                        }

                        counter++;

                        if(counter>10000){break;}
                    }
                }
            });

            thread.setDaemon(true);
           thread.start();
        });




        // Sahneyi ve Stage yi ayarlayalım
        Scene scene=new Scene(root,800,600);
        scene.getStylesheets().add("styles/style.css");
        primaryStage.setTitle("Javafx & Arduino Grafik Uygulaması");
        primaryStage.setScene(scene);
        primaryStage.show();


    }

    private void grafigiKaydir()   {


        for(int i=0; i<TICK_COUNT-1;i++){

           // Grafigi kaydırmak için en sonuncu haric diğerleri için
           // hep bir sonrakini alıp bir öncekine atayacağız

            XYChart.Data sonraki= series.getData().get(i+1);
            XYChart.Data onceki=series.getData().get(i);
            onceki.setYValue(sonraki.getYValue());

        }
            // son değeri alalım ve ona değer ataması yapalım
            XYChart.Data sonuncu=series.getData().get(TICK_COUNT-1);
            double sonDeger=new Random().nextDouble()*5;
            sonuncu.setYValue(sonDeger);

            // Double olan değer 2.0000000 gibi uzun olacağından böyle formatlayalım
            DecimalFormat decimalFormat=new DecimalFormat("#.##");

            //x Axis in label'ine yazalım
            xAxis.setLabel("Okunan Değer = "+ (decimalFormat.format(Double.parseDouble(sonuncu.getYValue().toString())))+" V");

    }

    public static void main(String[] args) {
        launch(args);
    }
}

 

Buraya kadar işin fonksiyonel boyutları yapıldı. şimdi güzel görüntü için biraz css yazalım..

Stil.css

.chart-series-line {
    -fx-stroke-width: 1px;
    -fx-effect: null;

}

.chart-vertical-grid-lines {
    -fx-stroke: #fff;
    -fx-opacity: 0.2;
}
.chart-horizontal-grid-lines {
    -fx-stroke: #fff;
    -fx-opacity: 0.2;
}


.default-color0.chart-series-line { -fx-stroke: #fff; }
.root{
    -fx-background-color: #000;
}

.chart{

    -fx-background-color: #000;
}
.chart-content{
    -fx-background-color: #000;

}

.axis-label{
    -fx-text-fill: #fff;

}

.chart-title{

   -fx-text-fill: #EEEEEE;
}

.chart-legend{

    -fx-background-color: transparent;

}

.chart-legend-item{

    -fx-text-fill: #fff;
}

.chart-plot-background{
    -fx-background-color: linear-gradient(to bottom, #2979FF, #304FFE);

}

css isimleri gayet açıklayıcı geldi bana detay yazmadım. soran olursa yorum yazabilir.  part-2 de seriporttan verileri alacağız inşallah…..

admin

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir