Grafana is an excellent way to quickly wrap interactive visualizations around a backend.

May 21 2024

Get Grafana in Docker on Raspberry Pi and Share Compelling Visualizations

sanjaybhatikar Blog Docker, Grafana, RaspberryPi, UI

Story-Telling With Grafana Create Dashboards With Interactive Visualizations

Building Machine Learning or AI models is just the beginning. Conveying the insights derived from these models is equally, if not more, important. Interactive visualizations are powerful tools for gaining buy-in and influencing decisions. However, creating effective visualizations can often require as much effort as the modeling itself.

Get Grafana in Docker on Raspberry Pi and Share Compelling Visualizations

Use Grafana in Docker on Raspberry Pi

Grafana offers a low-code or no-code solution for creating dashboards. By connecting queries to your data backend, you can quickly develop visualization templates with live data feeds. Grafana enables you to generate compelling visualizations and craft a narrative that supports your recommended actions. For example, you can use gauges to track monthly spending against a budget and recommend cost-saving measures like eating in instead of dining out.

Installation Setting up Grafana in Docker

ollow these steps to set up Grafana on your Raspberry Pi:

Pull the Docker Image: docker pull grafana/grafana
Create Folders for Persistence: grafana/data and grafana/provisioning;
Grant Access to Grafana User: chown 472:472 /path/to/grafana/data.
Run the Docker Container:

	docker run --name grafana_service \
	--restart always \
	-d -p 3000:3000 \
	-v /path/to/grafana/data:/var/lib/grafana \
	-v /path/to/grafana/provisioning:/etc/grafana/provisioning \
	-e GF_SECURITY_ADMIN_USER=admin \
	-e GF_SECURITY_ADMIN_PASSWORD=topsecretphrase \
	grafana/grafana

his command creates a Docker container named grafana_service with persistent data storage in shared volumes and sets up an admin account.

Launch Grafana: http://localhost:3000

Sharing Generate a Shareable Link

To share your Grafana dashboards:

Generate a Shareable Link: Click on the blue button labeled “SHARE” to obtain a URL for sharing. Recent versions of Grafana also allow you to create a public URL.
Update the URL for Intranet Sharing: The generated URL will contain ‘localhost’. Replace ‘localhost’ with the IP address of the host machine to share the dashboard on your local network. Use a free IP scanner like LanScan (for Mac) to find the IP address of machines on your intranet.

By following these steps, you can effectively share your Grafana dashboards, ensuring that your visualizations reach your intended audience.

Share the Grafana dashboard by generating a shareable link as shown. The localhost will need to be replaced with the host IP address. Use a tool like LanScan (Mac) to find the IP broadcast by machines on the local network.

With Grafana and Docker, setting up and sharing interactive visualizations on your Raspberry Pi has never been easier. Use these tools to create compelling dashboards that effectively communicate your data insights.

Join our FastAI class to master not only the art of building robust AI models but also the essential skills of visualizing results and deploying software seamlessly into the hands of customers. Our course, led by experienced Ph.D. instructors, covers the full spectrum of AI development—from crafting accurate models to creating interactive visualizations with tools like Grafana and managing deployments using Docker on platforms like Raspberry Pi. Gain the comprehensive expertise needed to turn data into actionable insights and deliver real-world applications efficiently.

September 22 2023

A Guide to Enhancing User Experience by Integrating Image Picker Functionality in Your Android App

sanjaybhatikar Android Native, Jetpack Compose Async, Coil, Image Picker, UI, UX

Alice, our intrepid explorer of Android Wonderland, had a grand vision for her Vaxin app. She dreamed of allowing users to personalize their experience by choosing an image from their phone’s gallery. Little did she know the adventures that awaited her.

Part 1: Alice’s Journey in the Android Wonderland

With unwavering determination, Alice declared a state variable named imageURI to hold the URI of the chosen image. She was well-prepared and cleverly used the Elvis operator to provide a default image just in case. She had learned from her previous adventures in Wonderland that it’s wise to be prepared for the unexpected.

	val imageURI = remember {
    mutableStateOf<String>(
        child.imageURI?.toString() ?: "android.resource://${context.packageName}/drawable/child"
    )
}

Suddenly, out of thin air, the enigmatic Cheshire Cat materialized before Alice.

“Would you tell me, please, which way I ought to go from here?” Alice enquired.

“The depends a good deal on which image you want to show,” said the Cat.

“I don’t much care which one –” said Alice.

“Then it doesn’t matter which one you show,” said the Cat.

“– so long as the user picks one,” added Alice as an explanation.

“Then be sure to look in the Coil library,” said the Cat, “for a looking glass into the content that your URI will find as surely as White Rabbit has fur and whiskers.”

With that cryptic message, the Cheshire Cat vanished into thin air once again, leaving Alice to tease out the meaning of his words.

Alice continued her journey in the direction the Cheshire Cat pointed out. She created a magical portal using Coil’s AsyncImage composable to display the selected image. The image was not just displayed; it was crafted into a neat circular shape and cropped to perfection to avoid any distortion. Alice marked it as clickable, adding a “TODO” to remind herself to complete this part of her adventure.

	AsyncImage(
    model = imageURI.value,
    contentDescription = "Generic Child",
    contentScale = ContentScale.Crop,
    modifier = Modifier
        .padding(5.dp)
        .size(75.dp)
        .clip(shape = CircleShape)
        .clickable {
            TODO("Lauch Image Picker")
        }
)

Just then, she noticed the Queen of Hearts was behind her, observing her code. With a stern tone, she questioned Alice’s action.

“Who gave you permission to use the image gallery in your app? Off with her head!“

“Don’t be silly,” said Alice. But she had turned thoughtful, looking for a way to launch the image gallery from within the app and obtain a URI to the selected image.

Part 2: The Enchanted Image Picker

As Alice contemplated her next move, the White Rabbit hurried by, nervously clutching his pocket watch and casting furtive glances at the time ticking by.

“Alice, you must use rememberLauncherForActivityResult. It’s like a magical gate that leads to a world of images. When the user picks an image, the launcher will provide you with the image’s URI.”

He took the pocket watch out of his waistcoat and remarking on how late he was, scurried off.

Alice followed the White Rabbit’s guidance and set up the launcher, ready to open the image picker.

	val singlePhotoPickerLauncher = rememberLauncherForActivityResult(
	contract = ActivityResultContracts.PickVisualMedia(),
	onResult = { uri ->
		Log.d(TAG, "Got content uri: ${uri}")
		uri?.let {
			imageURI.value = it.toString()  // For immediate preview
		}
	}
)

With the URI in her grasp, Alice displayed the image on the screen using AsyncImage, inserting singlePhotoPickerLauncher into the callback of the clickable event, much like hanging a beautiful painting on the wall of her app.

	 AsyncImage(
		model = imageURI.value,
		contentDescription = "Generic Child",
		contentScale = ContentScale.Crop,
		modifier = Modifier
			.padding(5.dp)
			.size(75.dp)
			.clip(shape = CircleShape)
			.clickable {
	 			singlePhotoPickerLauncher.launch(
					PickVisualMediaRequest(
	 					ActivityResultContracts.PickVisualMedia.ImageOnly
					)
				)
			}
	)

As she marveled at her creation, a curious apparition appeared in the air. It puzzled her at first, but she soon recognized it as the grinning Cheshire Cat. Alice was delighted to have someone review her code.

“How are you getting on?” said the Cat as soon as its mouth was big enough to speak.

Alice waited patiently until the eyes appeared and then nodded. “It’s no use speaking to it,” she thought, “until its ears have come, or at least one of them.”

In another minute, the whole head appeared, and Alice put down her keyboard to share her coding adventure. The Cat seemed satisfied with what it had seen and started fading just as miraculously as she had appeared.

But before vanishing completely, the Cheshire Cat left Alice with a valuable piece of advice.

“Beware, Alice, there may be villains who delete images from the gallery. There are 4 types of URI and they are not all the same. The URI from the image picker is a content URI. Always remember to copy the content to your app’s local storage and obtain a file URI that you persist to the app’s database.”

Alice felt a pang of unease. “What if the Queen of Hearts has already deleted the image from the gallery?” she wondered.

Determined to secure her chosen image, Alice wrote a function to read the content from the content URI into a byte array and then write the byte array to a file. This process gave her the precious file URI she sought.

	fun getFileURI(contentUri: Uri, childId: String, context: Context, contentResolver: ContentResolver): Uri {
	/* Read contents at content URI into byte array */
	val imBytes = contentResolver.openInputStream(contentUri)?.use {
		it.readBytes()
	}
	/* Write byte array into a local file with appropriate name */
	val file = File(context.filesDir, "${childId}.jpeg")
	FileOutputStream(file)?.use {
		it.write(imBytes)
	}
	/* Get the file URI to persistently access image */
	return file.toUri()
}

With the URI secured, Alice was ready to ship it to the View Model for persistence in the Room database. She expanded the launcher to do just that, wrapping the URI in data class OnAddChildPhoto of sealed class AddChildEvent for handling all user-originated events from that screen. She used the View Model’s onEvent method for the transfer.

	val singlePhotoPickerLauncher = rememberLauncherForActivityResult(
	contract = ActivityResultContracts.PickVisualMedia(),
	onResult = { uri ->
		Log.d(TAG, "Got content uri: ${uri}")
		uri?.let {
			imageURI.value = it.toString()  // For immediate preview
			val fileURI = getFileURI(it, child.childName, context, contentResolver)
			Log.d(TAG, "Got file URI: ${fileURI}")
			onEvent(AddChildEvent.OnAddChildPhoto(
				imageURI = fileURI,
				child = child
			))
		}
	}
)

At long last, it was time to reveal the image picker feature.

Image Picker

Pick an image from the phone’s image gallery.

Github

Image Added

Selected image is added to the app and displayed on the card.

View My Work

September 10 2023

The Bird Whisperer: A Soundboard App

sanjaybhatikar AppInventor Coding, Event-Handler, Layout, Soundboard, UI

Sonourous Songbirds

Isn’t it fascinating to wake up to the melodious songs of birds? Their cheerful notes have a refreshing effect, like a tonic for the soul. I became intrigued by the feathered friends in my neighborhood, which led me to create an app designed to help me identify birds by their songs.

This type of app is commonly known as a “Soundboard.” It serves as an excellent entry point for those interested in exploring the foundational aspects of app development, including UI layout and event-driven programming. By creating a Soundboard app, you’ll begin thinking like an app developer, meticulously planning the blueprints before diving into the development process.

In our AppInventor course, learners build a Soundboard app on day one. Our methodology allows learners to progressively enhance their skills by creating a series of increasingly sophisticated apps. Along the way, we expose fundamental programming concepts that have stood the test of time, forming the bedrock of modern programming. Join us on this educational adventure!