Progress on demo app (#414)

* make text selectable

* add ability to exit back to main activity

* skel up a fake products client and rename home to shop and make compose

* load product list to shop

* demo app tweaks

* create product cards

* cleanup

demo-app/build.gradle.kts

@@ -56,6 +56,7 @@ android {
 }
 
 dependencies {
+    implementation(libs.gson)
     implementation(libs.androidx.appcompat)
     implementation(libs.androidx.constraintlayout)
     implementation(libs.material)

demo-app/gradle/libs.versions.toml

@@ -7,6 +7,7 @@ kotlin = "2.0.0"
 [libraries]
 androidx-appcompat = "androidx.appcompat:appcompat:1.7.0"
 opentelemetry-exporter-otlp = { module = "io.opentelemetry:opentelemetry-exporter-otlp", version.ref = "opentelemetry" }
+gson = "com.google.code.gson:gson:2.11.0"
 
 #Test tools
 androidx-junit = "androidx.test.ext:junit:1.1.5"

demo-app/src/main/assets/products.json

@@ -0,0 +1,124 @@
+{
+  "products": [
+    {
+      "id": "OLJCESPC7Z",
+      "name": "National Park Foundation Explorascope",
+      "description": "The National Park Foundation’s (NPF) Explorascope 60AZ is a manual alt-azimuth, refractor telescope perfect for celestial viewing on the go. The NPF Explorascope 60 can view the planets, moon, star clusters and brighter deep sky objects like the Orion Nebula and Andromeda Galaxy.",
+      "picture": "NationalParkFoundationExplorascope.jpg",
+      "priceUsd": {
+        "currencyCode": "USD",
+        "units": 101,
+        "nanos": 960000000
+      },
+      "categories": ["telescopes"]
+    },
+    {
+      "id": "66VCHSJNUP",
+      "name": "Starsense Explorer Refractor Telescope",
+      "description": "The first telescope that uses your smartphone to analyze the night sky and calculate its position in real time. StarSense Explorer is ideal for beginners thanks to the app’s user-friendly interface and detailed tutorials. It’s like having your own personal tour guide of the night sky",
+      "picture": "StarsenseExplorer.jpg",
+      "priceUsd": {
+        "currencyCode": "USD",
+        "units": 349,
+        "nanos": 950000000
+      },
+      "categories": ["telescopes"]
+    },
+    {
+      "id": "1YMWWN1N4O",
+      "name": "Eclipsmart Travel Refractor Telescope",
+      "description": "Dedicated white-light solar scope for the observer on the go. The 50mm refracting solar scope uses Solar Safe, ISO compliant, full-aperture glass filter material to ensure the safest view of solar events.  The kit comes complete with everything you need, including the dedicated travel solar scope, a Solar Safe finderscope, tripod, a high quality 20mm (18x) Kellner eyepiece and a nylon backpack to carry everything in.  This Travel Solar Scope makes it easy to share the Sun as well as partial and total solar eclipses with the whole family and offers much higher magnifications than you would otherwise get using handheld solar viewers or binoculars.",
+      "picture": "EclipsmartTravelRefractorTelescope.jpg",
+      "priceUsd": {
+        "currencyCode": "USD",
+        "units": 129,
+        "nanos": 950000000
+      },
+      "categories": ["telescopes", "travel"]
+    },
+    {
+      "id": "L9ECAV7KIM",
+      "name": "Lens Cleaning Kit",
+      "description": "Wipe away dust, dirt, fingerprints and other particles on your lenses to see clearly with the Lens Cleaning Kit. This cleaning kit works on all glass and optical surfaces, including telescopes, binoculars, spotting scopes, monoculars, microscopes, and even your camera lenses, computer screens, and mobile devices.  The kit comes complete with a retractable lens brush to remove dust particles and dirt and two options to clean smudges and fingerprints off of your optics, pre-moistened lens wipes and a bottled lens cleaning fluid with soft cloth.",
+      "picture": "LensCleaningKit.jpg",
+      "priceUsd": {
+        "currencyCode": "USD",
+        "units": 21,
+        "nanos": 950000000
+      },
+      "categories": ["accessories"]
+    },
+    {
+      "id": "2ZYFJ3GM2N",
+      "name": "Roof Binoculars",
+      "description": "This versatile, all-around binocular is a great choice for the trail, the stadium, the arena, or just about anywhere you want a close-up view of the action without sacrificing brightness or detail. It’s an especially great companion for nature observation and bird watching, with ED glass that helps you spot the subtlest field markings and a close focus of just 6.5 feet.",
+      "picture": "RoofBinoculars.jpg",
+      "priceUsd": {
+        "currencyCode": "USD",
+        "units": 209,
+        "nanos": 950000000
+      },
+      "categories": ["binoculars"]
+    },
+    {
+      "id": "0PUK6V6EV0",
+      "name": "Solar System Color Imager",
+      "description": "You have your new telescope and have observed Saturn and Jupiter. Now you're ready to take the next step and start imaging them. But where do you begin? The NexImage 10 Solar System Imager is the perfect solution.",
+      "picture": "SolarSystemColorImager.jpg",
+      "priceUsd": {
+        "currencyCode": "USD",
+        "units": 175,
+        "nanos": 0
+      },
+      "categories": ["accessories", "telescopes"]
+    },
+    {
+      "id": "LS4PSXUNUM",
+      "name": "Red Flashlight",
+      "description": "This 3-in-1 device features a 3-mode red flashlight, a hand warmer, and a portable power bank for recharging your personal electronics on the go. Whether you use it to light the way at an astronomy star party, a night walk, or wildlife research, ThermoTorch 3 Astro Red’s rugged, IPX4-rated design will withstand your everyday activities.",
+      "picture": "RedFlashlight.jpg",
+      "priceUsd": {
+        "currencyCode": "USD",
+        "units": 57,
+        "nanos": 80000000
+      },
+      "categories": ["accessories", "flashlights"]
+    },
+    {
+      "id": "9SIQT8TOJO",
+      "name": "Optical Tube Assembly",
+      "description": "Capturing impressive deep-sky astroimages is easier than ever with Rowe-Ackermann Schmidt Astrograph (RASA) V2, the perfect companion to today’s top DSLR or astronomical CCD cameras. This fast, wide-field f/2.2 system allows for shorter exposure times compared to traditional f/10 astroimaging, without sacrificing resolution. Because shorter sub-exposure times are possible, your equatorial mount won’t need to accurately track over extended periods. The short focal length also lessens equatorial tracking demands. In many cases, autoguiding will not be required.",
+      "picture": "OpticalTubeAssembly.jpg",
+      "priceUsd": {
+        "currencyCode": "USD",
+        "units": 3599,
+        "nanos": 0
+      },
+      "categories": ["accessories", "telescopes", "assembly"]
+    },
+    {
+      "id": "6E92ZMYYFZ",
+      "name": "Solar Filter",
+      "description": "Enhance your viewing experience with EclipSmart Solar Filter for 8” telescopes. With two Velcro straps and four self-adhesive Velcro pads for added safety, you can be assured that the solar filter cannot be accidentally knocked off and will provide Solar Safe, ISO compliant viewing.",
+      "picture": "SolarFilter.jpg",
+      "priceUsd": {
+        "currencyCode": "USD",
+        "units": 69,
+        "nanos": 950000000
+      },
+      "categories": ["accessories", "telescopes"]
+    },
+    {
+      "id": "HQTGWGPNH4",
+      "name": "The Comet Book",
+      "description": "A 16th-century treatise on comets, created anonymously in Flanders (now northern France) and now held at the Universitätsbibliothek Kassel. Commonly known as The Comet Book (or Kometenbuch in German), its full title translates as “Comets and their General and Particular Meanings, According to Ptolomeé, Albumasar, Haly, Aliquind and other Astrologers”. The image is from https://publicdomainreview.org/collection/the-comet-book, made available by the Universitätsbibliothek Kassel under a CC-BY SA 4.0 license (https://creativecommons.org/licenses/by-sa/4.0/)",
+      "picture": "TheCometBook.jpg",
+      "priceUsd": {
+        "currencyCode": "USD",
+        "units": 0,
+        "nanos": 990000000
+      },
+      "categories": ["books"]
+    }
+  ]
+}

demo-app/src/main/java/io/opentelemetry/android/demo/AstronomyShopActivity.kt

@@ -5,7 +5,10 @@
 
 package io.opentelemetry.android.demo
 
+import android.content.Intent
 import android.os.Bundle
+import android.util.Log
+import android.view.MenuItem
 import androidx.appcompat.app.AppCompatActivity
 import androidx.navigation.findNavController
 import androidx.navigation.ui.AppBarConfiguration
@@ -39,4 +42,9 @@ class AstronomyShopActivity : AppCompatActivity() {
         setupActionBarWithNavController(navController, appBarConfiguration)
         navView.setupWithNavController(navController)
     }
+
+    fun onExitToMainClicked(item: MenuItem) {
+        Log.d(TAG, "Exiting shop back to main activity")
+        startActivity(Intent(this@AstronomyShopActivity, MainActivity::class.java))
+    }
 }

demo-app/src/main/java/io/opentelemetry/android/demo/CenterText.kt

@@ -6,9 +6,11 @@
 package io.opentelemetry.android.demo
 
 import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.text.selection.SelectionContainer
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.text.AnnotatedString
 import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.text.font.Font
@@ -42,13 +44,22 @@ fun CenterText(
 fun CenterText(
     text: String,
     fontSize: TextUnit = 12.sp,
+    selectable: Boolean = false,
+    color: Color = Color.Unspecified
 ) {
-    Text(
+    val textComposable = Text(
         text,
+        color = color,
         textAlign = TextAlign.Center,
         fontSize = fontSize,
         modifier = Modifier.fillMaxWidth(),
         fontFamily = gothamFont,
         style = TextStyle.Default.copy(textAlign = TextAlign.Center),
     )
+    if (selectable) {
+        return SelectionContainer {
+            textComposable
+        }
+    }
+    return textComposable
 }

demo-app/src/main/java/io/opentelemetry/android/demo/MainActivity.kt

@@ -11,6 +11,7 @@ import android.util.Log
 import androidx.activity.ComponentActivity
 import androidx.activity.compose.setContent
 import androidx.activity.viewModels
+import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row

demo-app/src/main/java/io/opentelemetry/android/demo/SessionId.kt

@@ -13,28 +13,37 @@ import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.text.selection.SelectionContainer
 import androidx.compose.material3.Card
+import androidx.compose.material3.CardColors
+import androidx.compose.material3.CardDefaults
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.collectAsState
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
 import kotlinx.coroutines.flow.StateFlow
 
 @Composable
 fun SessionId(sessionId: StateFlow<String>) {
+    val cardColors = CardColors(
+        containerColor = Color(0xFFD9D9D9), contentColor = Color(0xFFF5A800),
+        disabledContentColor = Color.Black, disabledContainerColor = Color.Black
+    )
     Row {
-        Card(modifier = Modifier.size(width = 295.dp, height = 75.dp)) {
+        Card(modifier = Modifier.size(width = 295.dp, height = 100.dp), colors = cardColors,
+            elevation = CardDefaults.cardElevation(defaultElevation = 10.dp)) {
             Column(
                 modifier =
                 Modifier
                     .fillMaxWidth()
                     .padding(vertical = 25.dp),
                 Arrangement.Center,
             ) {
-                CenterText(text = "session.id", fontSize = 14.sp)
+                CenterText(text = "session.id", fontSize = 18.sp, color = Color.Black)
                 //TODO: Fix me -- this selection doesn't work
-                SelectionContainer {
-                    CenterText(text = sessionId.collectAsState().value, fontSize = 14.sp)
+                SelectionContainer(modifier = Modifier.padding(top = 15.dp)) {
+                    CenterText(text = sessionId.collectAsState().value, fontSize = 14.sp,
+                        selectable = true, color = Color(0xFF425CC7))
                 }
             }
         }

demo-app/src/main/java/io/opentelemetry/android/demo/clients/ImageLoader.kt

@@ -0,0 +1,19 @@
+package io.opentelemetry.android.demo.clients
+
+import android.content.Context
+import android.graphics.Bitmap
+import android.graphics.BitmapFactory
+
+/**
+ * Fake (for now) image loader. Ideally this would fetch images from the
+ * imageloader service.
+ */
+class ImageLoader(private val context: Context) {
+
+    // `http://localhost:8080/${src}?w=${width}&q=${quality || 75}`
+    fun load(name: String): Bitmap {
+        val file = "images/${name}"
+        val input = context.assets.open(file)
+        return BitmapFactory.decodeStream(input)
+    }
+}

demo-app/src/main/java/io/opentelemetry/android/demo/clients/ProductCatalogClient.kt

@@ -0,0 +1,22 @@
+package io.opentelemetry.android.demo.clients
+
+import android.content.Context
+import com.google.gson.Gson
+import com.google.gson.reflect.TypeToken
+import io.opentelemetry.android.demo.model.Product
+import io.opentelemetry.android.demo.model.ProductDeserializationWrapper
+
+const val PRODUCTS_FILE = "products.json"
+
+/** A fake (for now!) client for the ProductCatalog */
+// TODO: breedx-splk add instrumentation!
+// TODO: Allow this to be wired up to the go service from the actual demo
+class ProductCatalogClient(private val context: Context) {
+
+    fun get(): List<Product> {
+        val input = context.assets.open(PRODUCTS_FILE)
+        val jsonStr = input.bufferedReader()
+        val wrapper = Gson().fromJson(jsonStr, ProductDeserializationWrapper::class.java)
+        return wrapper.products
+    }
+}

demo-app/src/main/java/io/opentelemetry/android/demo/model/Product.kt

@@ -0,0 +1,24 @@
+package io.opentelemetry.android.demo.model
+
+data class Product(
+    val id: String,
+    val name: String,
+    val description: String,
+    val picture: String,
+    val priceUsd: PriceUsd,
+    val categories: List<String>) {
+    fun priceValue(): Double {
+        return priceUsd.units.toDouble() + priceUsd.nanos.toDouble()/1_000_000_000f
+    }
+}
+
+// For deserialization
+data class ProductDeserializationWrapper(
+    val products: List<Product>
+)
+
+data class PriceUsd(
+    val currencyCode: String,
+    val units: Long,
+    val nanos: Long
+)