{"id":1293,"date":"2021-07-01T13:10:04","date_gmt":"2021-07-01T12:10:04","guid":{"rendered":"http:\/\/www.igfasouza.com\/blog\/?p=1293"},"modified":"2021-07-01T13:20:04","modified_gmt":"2021-07-01T12:20:04","slug":"kafka-weather-real-time-dashboard-with-spring-thymeleaf","status":"publish","type":"post","link":"http:\/\/www.igfasouza.com\/blog\/kafka-weather-real-time-dashboard-with-spring-thymeleaf\/","title":{"rendered":"Kafka weather real time dashboard with Spring & Thymeleaf"},"content":{"rendered":"

\"\"<\/p>\n

How goes the battle?<\/b><\/p>\n

This post is another part of my Kafka weather station use case idea<\/a>.<\/p>\n

I want to show how I created an app using Spring Boot and Thymeleaf to show a real-time dashboard with Sense Hat temperature data that I read from a Kafka topic. This is another blog about Java on Raspberry PI.<\/p>\n

\"\"
\nPicture 1: The highlighted part of the diagram that this post is focused on.<\/small><\/p>\n

You can check my Kafka Producer<\/a> blog and Kafka at the edge<\/a> blog, where I explain the Sense Hat producer with Micronaut.<\/p>\n

\"\"
\nPicture 2: end-to-end flow<\/small><\/p>\n

Idea<\/h2>\n

A Spring Boot web application where I use Thymeleaf to display a real-time dashboard to show Temperature values that I read from a Kafka topic. I use a Websocket to update the data on the page and Spring Kafka to read the Kafka data.
\nThe Data came from a Raspberry PI using the Sense Hat.<\/p>\n

\"\"
\nPicture 3: I added a REST interface for and a @PostConstruct method producing a message<\/small><\/p>\n

The program is using Spring-Kafka integration and I add a Kafka producer to get the Sense Hat data and I add a REST interface as well to be able to add some data for testing or if I don\u2019t have the Sense Hat running.<\/p>\n

Code<\/h2>\n

First things first; configuration. There are two ways to configure our Producer and Consumer.
\nOption 1: Using application.properties or application.yml
\nOption 2: Java class with @Configuration<\/p>\n

I\u2019m using option 2 in this example.<\/p>\n

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<\/div><\/td>
@EnableKafka
\n@Configuration
\npublic<\/span> class<\/span> KafkaConsumerConfig {<\/span>
\n
\n    @Value(<\/span>"${kafka.bootstrapserver}"<\/span>)<\/span>
\n    public<\/span> String<\/span><\/a> bootstrapServer;<\/span>
\n
\n    @Bean
\n    public<\/span> Map<<\/span>String<\/span><\/a>,Object><\/span> consumerConfigs(<\/span>)<\/span>{<\/span>
\n        Map<<\/span>String<\/span><\/a>,Object><\/span> props=<\/span>new<\/span> HashMap<<\/span>String<\/span><\/a>,Object><\/span>(<\/span>)<\/span>;<\/span>
\n        props.put<\/span>(<\/span>ConsumerConfig.BOOTSTRAP_SERVERS_CONFIG<\/span>, bootstrapServer)<\/span>;<\/span>
\n        props.put<\/span>(<\/span>ConsumerConfig.KEY_DESERIALIZER_CLASS_CONFIG<\/span>, StringDeserializer.class<\/span>)<\/span>;<\/span>
\n        props.put<\/span>(<\/span>ConsumerConfig.VALUE_DESERIALIZER_CLASS_CONFIG<\/span>, StringDeserializer.class<\/span>)<\/span>;<\/span>
\n        props.put<\/span>(<\/span>ConsumerConfig.GROUP_ID_CONFIG<\/span>, "temp-groupid.group"<\/span>)<\/span>;<\/span>
\n        props.put<\/span>(<\/span>ConsumerConfig.AUTO_OFFSET_RESET_CONFIG<\/span>, "latest"<\/span>)<\/span>;<\/span>
\n
\n        return<\/span> props;<\/span>
\n    }<\/span>
\n
\n    @Bean
\n    public<\/span> ConsumerFactory<<\/span>String<\/span><\/a>, String><\/span> consumerFactory(<\/span>)<\/span>{<\/span>
\n        return<\/span> new<\/span> DefaultKafkaConsumerFactory<><\/span>(<\/span>consumerConfigs(<\/span>)<\/span>)<\/span>;<\/span>
\n    }<\/span>
\n
\n    @Bean
\n    public<\/span> KafkaListenerContainerFactory<<\/span>ConcurrentMessageListenerContainer<<\/span>String<\/span><\/a>,String>><\/span> kafkaListenerContainerFactory(<\/span>)<\/span>{<\/span>
\n        ConcurrentKafkaListenerContainerFactory<<\/span>String<\/span><\/a>, String><\/span> factory=<\/span>new<\/span> ConcurrentKafkaListenerContainerFactory(<\/span>)<\/span>;<\/span>
\n        factory.setConsumerFactory<\/span>(<\/span>consumerFactory(<\/span>)<\/span>)<\/span>;<\/span>
\n        return<\/span> factory;<\/span>
\n
\n    }<\/span>
\n}<\/span><\/div><\/td><\/tr><\/tbody><\/table><\/div>\n

The idea is to use this just to consume, but I added a REST interface for producing a message and a @PostConstruct method in the service to produce Sense Hat data, to be able to test if I don\u2019t have the Sense Hat producer.<\/p>\n

I\u2019m using this Java Wrapper for Raspberry Pi Sense Hat<\/a><\/p>\n

1
2
3
4
5
6
7
<\/div><\/td>
        <<\/span>dependency><\/span>
\n            <<\/span>groupId><\/span>sensehat<\/<\/span>groupId><\/span>
\n            <<\/span>artifactId><\/span>sensehat<\/<\/span>artifactId><\/span>
\n            <<\/span>version><\/span>1.0.0<\/<\/span>version><\/span>
\n            <<\/span>scope><\/span>system<\/<\/span>scope><\/span>
\n            <<\/span>systemPath><\/span>${<\/span>basedir}<\/span>\/<\/span>lib\/<\/span>java-<\/span>executor-<\/span>1.0<\/span>-<\/span>SNAPSHOT.jar<\/span><\/<\/span>systemPath><\/span>
\n        <\/<\/span>dependency><\/span><\/div><\/td><\/tr><\/tbody><\/table><\/div>\n
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<\/div><\/td>
@PostConstruct
\n    public<\/span> void<\/span> init(<\/span>)<\/span> {<\/span>
\n        if<\/span> (<\/span>senseHat.equals<\/span>(<\/span>"true"<\/span>)<\/span>)<\/span> {<\/span>
\n            SenseHat senseHat =<\/span> new<\/span> SenseHat(<\/span>)<\/span>;<\/span>
\n            new<\/span> Thread<\/span><\/a>(<\/span>(<\/span>)<\/span> -><\/span> {<\/span>
\n                while<\/span> (<\/span>true<\/span>)<\/span> {<\/span>
\n                    sendMessage(<\/span>Float<\/span><\/a>.toString<\/span>(<\/span>senseHat.environmentalSensor<\/span>.getTemperature<\/span>(<\/span>)<\/span>)<\/span>)<\/span>;<\/span>
\n                    try<\/span> {<\/span>
\n                        Thread<\/span><\/a>.sleep<\/span>(<\/span>5000<\/span>)<\/span>;<\/span>
\n                    }<\/span> catch<\/span> (<\/span>InterruptedException<\/span><\/a> e)<\/span> {<\/span>
\n                        e.printStackTrace<\/span>(<\/span>)<\/span>;<\/span>
\n                    }<\/span>
\n                }<\/span>
\n            }<\/span>)<\/span>.start<\/span>(<\/span>)<\/span>;<\/span>
\n        }<\/span>
\n    }<\/span><\/div><\/td><\/tr><\/tbody><\/table><\/div>\n

And I have kafka.sensehat=true<\/em> properties to enable or disable the Sense Hat producer<\/p>\n

You can get the full code on my GitHub<\/a>.<\/p>\n

\"\"
\nPicture 4: The end result<\/small><\/p>\n