Compare commits

1 Commits

Author SHA1 Message Date
areumwoo
ad5077db69 feat: #72 Read/Write 표시 위치 수정 미적용 2026-03-02 10:27:56 +09:00
14 changed files with 77 additions and 224 deletions

View File

@@ -88,7 +88,4 @@ interface Preference {
suspend fun getPowerSupplySerialListFromPreference(): Flow<List<String>> suspend fun getPowerSupplySerialListFromPreference(): Flow<List<String>>
///// /////
suspend fun saveInfoChartLineStates(states: Map<String, Boolean>)
suspend fun getInfoChartLineStates(): Flow<Map<String, Boolean>>
} }

View File

@@ -68,9 +68,6 @@ class PreferenceRepository(private val context: Context) : Preference {
val PRODUCT_SERIAL = stringPreferencesKey("PRODUCT_SERIAL") val PRODUCT_SERIAL = stringPreferencesKey("PRODUCT_SERIAL")
val LASER_HAND_SERIAL = stringPreferencesKey("LASER_HAND_SERIAL") val LASER_HAND_SERIAL = stringPreferencesKey("LASER_HAND_SERIAL")
val POWER_SUPPLY_SERIAL = stringPreferencesKey("POWER_SUPPLY_SERIAL") val POWER_SUPPLY_SERIAL = stringPreferencesKey("POWER_SUPPLY_SERIAL")
// InfoScreen Chart Checkboxes
val INFO_CHART_LINE_STATES = stringPreferencesKey("INFO_CHART_LINE_STATES")
} }
override suspend fun clearAllPreferences() { override suspend fun clearAllPreferences() {
@@ -562,31 +559,4 @@ class PreferenceRepository(private val context: Context) : Preference {
emit(listOf("B", "U", "O", "C", "L", "D")) emit(listOf("B", "U", "O", "C", "L", "D"))
} }
} }
override suspend fun saveInfoChartLineStates(states: Map<String, Boolean>) {
try {
val stateJson = gson.toJson(states)
context.datastore.edit { preferences ->
preferences[INFO_CHART_LINE_STATES] = stateJson
}
} catch (e: Exception) {
Timber.e(e, "Failed to serialize INFO_CHART_LINE_STATES to JSON.")
}
}
override suspend fun getInfoChartLineStates(): Flow<Map<String, Boolean>> {
return context.datastore.data.map { preferences ->
preferences[INFO_CHART_LINE_STATES]
}.distinctUntilChanged().map { jsonString ->
if (!jsonString.isNullOrBlank()) {
val type = object : TypeToken<Map<String, Boolean>>() {}.type
gson.fromJson<Map<String, Boolean>>(jsonString, type) ?: emptyMap()
} else {
emptyMap()
}
}.catch { e ->
Timber.e(e, "Failed to get or parse INFO_CHART_LINE_STATES. Emitting default.")
emit(emptyMap())
}
}
} }

View File

@@ -439,15 +439,15 @@ fun ConfigScreen(
mainViewModel.saveGuideBeamToPreference() mainViewModel.saveGuideBeamToPreference()
} }
// Guide Beam step mapping (0~10): /*
// 0 -> fixed 0 val value = when(guideBeam.toInt()) {
// 1~10 -> min~max range in 10 steps (10 -> max) 0 -> 0
val step = guideBeam.toInt().coerceIn(0, 10) 1 -> guideBeamMin
val value = if (step == 0) { 10 -> guideBeamMax
0 else -> (guideBeamMin + (guideBeam.toInt() - 1) * ((guideBeamMax - guideBeamMin) / 9))
} else {
guideBeamMin + ((step-1) * (guideBeamMax - guideBeamMin) / 9)
} }
*/
val value = (guideBeamMin + (guideBeam.toInt() - 1) * ((guideBeamMax - guideBeamMin) / 9))
Timber.d("guideBeam: $value, guideBeamMax: $guideBeamMax, guideBeamMin: $guideBeamMin") Timber.d("guideBeam: $value, guideBeamMax: $guideBeamMax, guideBeamMin: $guideBeamMin")
mainViewModel.txPacket(READ_WRITE.WRITE, CMD.GUIDE_BEAM, GuideBeam(value = value)) mainViewModel.txPacket(READ_WRITE.WRITE, CMD.GUIDE_BEAM, GuideBeam(value = value))

View File

@@ -31,7 +31,7 @@ fun HourItemView(
modifier: Modifier = Modifier, modifier: Modifier = Modifier,
hour: Int = 0, hour: Int = 0,
onClick: () -> Unit = {}, onClick: () -> Unit = {},
title: String = "" title:String = ""
) { ) {
Row(modifier = modifier, Row(modifier = modifier,
horizontalArrangement = Arrangement.SpaceBetween, horizontalArrangement = Arrangement.SpaceBetween,

View File

@@ -32,11 +32,11 @@ fun LifeTimeView(
) { ) {
Column(modifier = Modifier Column(modifier = Modifier
//.noRippleClickable(onClick = onClick) //.noRippleClickable(onClick = onClick)
.size(388.px.dp, 258.px.dp) .size(388.px.dp, 276.px.dp)
.clip(RoundedCornerShape(12.px.dp)) .clip(RoundedCornerShape(12.px.dp))
.border(width = 1.px.dp, color = Color(209, 209, 209), shape = RoundedCornerShape(10.px.dp)) .border(width = 1.px.dp, color = Color(209, 209, 209), shape = RoundedCornerShape(10.px.dp))
.background(Color.White) .background(Color.White)
.padding(3.px.dp, 16.px.dp), .padding(16.px.dp),
verticalArrangement = Arrangement.SpaceEvenly, verticalArrangement = Arrangement.SpaceEvenly,
horizontalAlignment = Alignment.CenterHorizontally horizontalAlignment = Alignment.CenterHorizontally
) { ) {
@@ -55,11 +55,11 @@ fun LifeTimeView(
), ),
) )
Spacer(modifier = Modifier.height(2.px.dp)) Spacer(modifier = Modifier.height(10.px.dp))
// Temp 0..7 // Temp 0..7
for (i in 0..lifeTimeTypes.size -1) { for (i in 0..lifeTimeTypes.size -1) {
val value = when (i) { val hour = when (i) {
0 -> lifeTime.lamp 0 -> lifeTime.lamp
1 -> lifeTime.hp5x5 1 -> lifeTime.hp5x5
2 -> lifeTime.hp7x7 2 -> lifeTime.hp7x7
@@ -70,35 +70,22 @@ fun LifeTimeView(
7 -> lifeTime.water 7 -> lifeTime.water
else -> 0 else -> 0
} }
val modifier = Modifier HourItemView(
.fillMaxSize() modifier = Modifier
.weight(1f) .fillMaxSize()
.padding( .weight(1f)
start = 20.px.dp, .padding(
end = 20.px.dp, start = 20.px.dp,
//bottom = 10.px.dp end = 20.px.dp,
) //bottom = 10.px.dp
val title = lifeTimeTypes[i] ),
val onItemClick = { title = lifeTimeTypes[i],
Timber.d("onClick > Temp $i ($title)") hour = hour,
onClick.invoke(i) onClick = {
} Timber.d("onClick > Temp $i (${lifeTimeTypes[i]})")
onClick.invoke(i)
if (i <= 5) { }
CountItemView( )
modifier = modifier,
title = title,
count = value,
onClick = onItemClick
)
} else {
HourItemView(
modifier = modifier,
title = title,
hour = value,
onClick = onItemClick
)
}
if (i < lifeTimeTypes.size -1) { if (i < lifeTimeTypes.size -1) {
HorizontalDivider( HorizontalDivider(

View File

@@ -42,7 +42,7 @@ fun TemperatureView(
.clip(RoundedCornerShape(12.px.dp)) .clip(RoundedCornerShape(12.px.dp))
.border(width = 1.px.dp, color = Color(209, 209, 209), shape = RoundedCornerShape(10.px.dp)) .border(width = 1.px.dp, color = Color(209, 209, 209), shape = RoundedCornerShape(10.px.dp))
.background(Color.White) .background(Color.White)
.padding(3.px.dp, 16.px.dp), .padding(16.px.dp),
verticalArrangement = Arrangement.SpaceEvenly, verticalArrangement = Arrangement.SpaceEvenly,
horizontalAlignment = Alignment.CenterHorizontally horizontalAlignment = Alignment.CenterHorizontally
) { ) {
@@ -61,6 +61,8 @@ fun TemperatureView(
), ),
) )
Spacer(modifier = Modifier.height(10.px.dp))
Row( Row(
modifier = Modifier modifier = Modifier
.fillMaxWidth() .fillMaxWidth()
@@ -87,8 +89,6 @@ fun TemperatureView(
Spacer(modifier = Modifier.weight(1f)) Spacer(modifier = Modifier.weight(1f))
} }
Spacer(modifier = Modifier.height(2.px.dp))
// Tempearture // Tempearture
for (i in 0..temperatureTypes.size -1) { for (i in 0..temperatureTypes.size -1) {
val count1Value = when (i) { val count1Value = when (i) {

View File

@@ -35,7 +35,6 @@ import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp import androidx.compose.ui.unit.dp
import androidx.hilt.lifecycle.viewmodel.compose.hiltViewModel import androidx.hilt.lifecycle.viewmodel.compose.hiltViewModel
import com.laseroptek.raman.const.LaserParameter import com.laseroptek.raman.const.LaserParameter
import com.laseroptek.raman.const.LASER_STATUS
import com.laseroptek.raman.const.LaserStatusType import com.laseroptek.raman.const.LaserStatusType
import com.laseroptek.raman.const.MAX_LASER_COUNT import com.laseroptek.raman.const.MAX_LASER_COUNT
import com.laseroptek.raman.const.PresetButtonType import com.laseroptek.raman.const.PresetButtonType
@@ -93,18 +92,10 @@ fun HomeScreen(
val presetList by mainViewModel.presetList.collectAsState() val presetList by mainViewModel.presetList.collectAsState()
LaunchedEffect(lampCount, lifeTime.lamp, laserStatus.laserStatus) { LaunchedEffect(Unit) {
Timber.d("LaunchedEffect - HomeScreen") Timber.d("LaunchedEffect - HomeScreen")
focusManager.clearFocus(force = true) // Hide the keyboard focusManager.clearFocus(force = true) // Hide the keyboard
// Ensure the system returns to StandBy when lamp thresholds are exceeded
val lampLifetimeLimit = lifeTime.lamp
val reachedLifetimeLimit = lampLifetimeLimit > 0 && lampCount >= lampLifetimeLimit
if (reachedLifetimeLimit && laserStatus.laserStatus != LASER_STATUS.STAND_BY) {
Timber.d("HomeScreen load - forcing StandBy state due to lamp count limit")
mainViewModel.txLaserStatusEntry(LASER_STATUS.STAND_BY)
}
Timber.d("Attempted to hide keyboard on EngineerScreen launch") Timber.d("Attempted to hide keyboard on EngineerScreen launch")
} }
@@ -491,18 +482,6 @@ fun HomeScreen(
return@StandByButton return@StandByButton
} }
val lampLifetimeLimit = lifeTime.lamp
if (lampLifetimeLimit > 0 && lampCount >= lampLifetimeLimit) {
Toast.makeText(
context,
"Lamp lifetime limit reached",
Toast.LENGTH_SHORT
).show()
return@StandByButton
}
val hpCount = mainViewModel.getHPCount() val hpCount = mainViewModel.getHPCount()
if (hpCount < 1) { if (hpCount < 1) {
Toast.makeText( Toast.makeText(

View File

@@ -334,7 +334,7 @@ fun DcdSettingPopup(
modifier = Modifier modifier = Modifier
.fillMaxHeight() .fillMaxHeight()
.size(40.px.dp, 210.px.dp), .size(40.px.dp, 210.px.dp),
chargeRate = gasChargeRate chargeRate = gasChargeRate.toInt()
) )
// Icon // Icon

View File

@@ -28,26 +28,14 @@ import com.laseroptek.raman.ui.screens.main.MainViewModel
import com.laseroptek.raman.utils.DefaultDispatcherProvider import com.laseroptek.raman.utils.DefaultDispatcherProvider
import com.laseroptek.raman.utils.ext.px import com.laseroptek.raman.utils.ext.px
import timber.log.Timber import timber.log.Timber
import kotlin.math.abs
import kotlin.math.ceil
@Composable @Composable
fun GradientSlider( fun GradientSlider(
modifier: Modifier = Modifier, modifier: Modifier = Modifier,
chargeRate: Float = 0f, chargeRate: Int = 0, // Value from (0 .. 100)
) { ) {
val normalizedRate = chargeRate.coerceIn(0f, 100f) val chargeIndex = ((chargeRate.coerceIn(0, 100) + 4) / 5).toInt() // 0..19
val bucket = normalizedRate / 5f
val remainder = normalizedRate % 5f
val isExactMultiple = abs(remainder) < 0.0001f
val chargeIndex = when {
normalizedRate == 0f -> -1
isExactMultiple -> (bucket - 1f).toInt().coerceAtLeast(-1)
else -> (ceil(bucket.toDouble()).toInt() - 1)
}.coerceIn(-1, 19)
Timber.d("chargeRate: $chargeRate, chargeIndex: $chargeIndex") Timber.d("chargeRate: $chargeRate, chargeIndex: $chargeIndex")
Box( Box(
@@ -115,6 +103,6 @@ fun GradientSliderPreview(
//mainViewModel = mainViewModel //mainViewModel = mainViewModel
modifier = Modifier modifier = Modifier
.size(40.px.dp, 210.px.dp), .size(40.px.dp, 210.px.dp),
chargeRate = 20f chargeRate = 20
) )
} }

View File

@@ -108,15 +108,15 @@ fun PresetIconButton(
Image( Image(
painter = painterResource(id = painter = painterResource(id =
if (type == PresetButtonType.SAVE) { if (type == PresetButtonType.SAVE) {
R.drawable.ic_preset_save2 R.drawable.ic_preset_save
} else { } else {
R.drawable.ic_preset_load R.drawable.ic_preset_load
} }
), ),
contentDescription = "", contentDescription = "",
modifier = Modifier modifier = Modifier
.size(30.px.dp), .size(20.px.dp),
contentScale = ContentScale.Fit contentScale = ContentScale.Crop
) )
} }
} }

View File

@@ -552,12 +552,12 @@ fun PresetLoadPopup(
horizontalArrangement = Arrangement.Center, horizontalArrangement = Arrangement.Center,
verticalAlignment = Alignment.CenterVertically verticalAlignment = Alignment.CenterVertically
) { ) {
Spacer(Modifier.weight(1f))
if (isEditMode) { if (isEditMode) {
//////////////////////////////////////////////////// ////////////////////////////////////////////////////
// Edit Mode // Edit Mode
Spacer(modifier = Modifier.width(10.px.dp))
// Preset Delete (Delete confirm popup) // Preset Delete (Delete confirm popup)
Box( Box(
modifier = Modifier modifier = Modifier
@@ -578,7 +578,7 @@ fun PresetLoadPopup(
) )
} }
Spacer(Modifier.weight(1f)) Spacer(Modifier.width(10.px.dp))
// Preset Cancel (Reload selected item from mainViewModel) // Preset Cancel (Reload selected item from mainViewModel)
Box( Box(
@@ -646,7 +646,7 @@ fun PresetLoadPopup(
Timber.d("onClick - Confirm Save") Timber.d("onClick - Confirm Save")
// Check empty names and conflict priority exist in the preset viewmodel's presetList // Check empty names and conflict priority exist in the preset viewmodel's presetList
var listToValidate = presetViewModel.presetList.value val listToValidate = presetViewModel.presetList.value
// Check for any presets with an empty name // Check for any presets with an empty name
val hasEmptyName = val hasEmptyName =
@@ -678,32 +678,18 @@ fun PresetLoadPopup(
} }
// Check for duplicate priorities (ignoring priority 0) // Check for duplicate priorities (ignoring priority 0)
val duplicatePriorityGroups = listToValidate val priorityConflicts = listToValidate
.filter { it.priority > 0 } .filter { it.priority > 0 } // Only consider prioritized items
.groupBy { it.priority } .groupBy { it.priority } // Group them by priority
.filter { it.value.size > 1 } .any { it.value.size > 1 } // Check if any group is larger than 1
if (duplicatePriorityGroups.isNotEmpty()) { if (priorityConflicts) {
val resolvedList = listToValidate.map { it.copy() }.toMutableList() Toast.makeText(
val selectedPreset = resolvedList.getOrNull(selectedPresetIndex) context,
"There are duplicate priorities. Please ensure each priority is unique.",
duplicatePriorityGroups.forEach { (priorityValue, presets) -> Toast.LENGTH_LONG
val keeperId = presets ).show()
.firstOrNull { preset -> return@noRippleClickable // Stop the process
selectedPreset != null && preset.id == selectedPreset.id
}
?.id
?: presets.first().id
resolvedList.forEachIndexed { index, preset ->
if (preset.priority == priorityValue && preset.id != keeperId) {
resolvedList[index] = preset.copy(priority = 0)
}
}
}
presetViewModel.setPresetList(resolvedList)
listToValidate = resolvedList
} }
Timber.d("Validation successful. Saving list to MainViewModel.") Timber.d("Validation successful. Saving list to MainViewModel.")
@@ -743,11 +729,7 @@ fun PresetLoadPopup(
contentScale = ContentScale.Crop contentScale = ContentScale.Crop
) )
} }
Spacer(modifier = Modifier.width(10.px.dp))
} else { } else {
Spacer(Modifier.weight(1f))
//////////////////////////////////////////////////// ////////////////////////////////////////////////////
// Select Mode - hide Keyboard // Select Mode - hide Keyboard
focusManager.clearFocus(force = true) // Hide the keyboard focusManager.clearFocus(force = true) // Hide the keyboard
@@ -808,8 +790,6 @@ fun PresetLoadPopup(
contentScale = ContentScale.Crop contentScale = ContentScale.Crop
) )
} }
Spacer(modifier = Modifier.width(10.px.dp))
} }
} }

View File

@@ -1,14 +1,10 @@
package com.laseroptek.raman.ui.screens.info package com.laseroptek.raman.ui.screens.info
import androidx.lifecycle.ViewModel import androidx.lifecycle.ViewModel
import androidx.lifecycle.viewModelScope
import dagger.hilt.android.lifecycle.HiltViewModel import dagger.hilt.android.lifecycle.HiltViewModel
import com.laseroptek.raman.repository.PreferenceRepository
import kotlinx.coroutines.flow.MutableStateFlow import kotlinx.coroutines.flow.MutableStateFlow
import kotlinx.coroutines.flow.asStateFlow import kotlinx.coroutines.flow.asStateFlow
import kotlinx.coroutines.flow.update import kotlinx.coroutines.flow.update
import kotlinx.coroutines.flow.collectLatest
import kotlinx.coroutines.launch
import timber.log.Timber import timber.log.Timber
import javax.inject.Inject import javax.inject.Inject
@@ -29,13 +25,10 @@ data class ChartUiState(
val chamber2State: Boolean = true, val chamber2State: Boolean = true,
val basePlateState: Boolean = true, val basePlateState: Boolean = true,
val waterState: Boolean = true, val waterState: Boolean = true,
) { )
companion object
}
@HiltViewModel @HiltViewModel
class InfoViewModel @Inject constructor( class InfoViewModel @Inject constructor(
private val preferenceRepository: PreferenceRepository,
) : ViewModel() { ) : ViewModel() {
// This is the single source of truth for the checkbox states. // This is the single source of truth for the checkbox states.
@@ -46,7 +39,7 @@ class InfoViewModel @Inject constructor(
fun toggleLine(line: ChartLine) { fun toggleLine(line: ChartLine) {
// .update is a thread-safe way to update the state. // .update is a thread-safe way to update the state.
_chartUiState.update { currentState -> _chartUiState.update { currentState ->
val updatedState = when (line) { when (line) {
ChartLine.INT_TEMP -> currentState.copy(intTempState = !currentState.intTempState) ChartLine.INT_TEMP -> currentState.copy(intTempState = !currentState.intTempState)
ChartLine.EXT_TEMP -> currentState.copy(extTempState = !currentState.extTempState) ChartLine.EXT_TEMP -> currentState.copy(extTempState = !currentState.extTempState)
ChartLine.INT_HUMIDITY -> currentState.copy(intHumidityState = !currentState.intHumidityState) ChartLine.INT_HUMIDITY -> currentState.copy(intHumidityState = !currentState.intHumidityState)
@@ -57,51 +50,10 @@ class InfoViewModel @Inject constructor(
ChartLine.BASE_PLATE -> currentState.copy(basePlateState = !currentState.basePlateState) ChartLine.BASE_PLATE -> currentState.copy(basePlateState = !currentState.basePlateState)
ChartLine.WATER -> currentState.copy(waterState = !currentState.waterState) ChartLine.WATER -> currentState.copy(waterState = !currentState.waterState)
} }
persistChartUiState(updatedState)
updatedState
} }
} }
init { init {
Timber.d("InfoViewModel init") Timber.d("InfoViewModel init")
viewModelScope.launch {
preferenceRepository.getInfoChartLineStates().collectLatest { savedStates ->
if (savedStates.isEmpty()) return@collectLatest
_chartUiState.update { ChartUiState.fromPreference(savedStates) }
}
}
}
private fun persistChartUiState(state: ChartUiState) {
viewModelScope.launch {
preferenceRepository.saveInfoChartLineStates(state.toPreferenceMap())
}
} }
} }
private fun ChartUiState.toPreferenceMap(): Map<String, Boolean> = mapOf(
ChartLine.INT_TEMP.name to intTempState,
ChartLine.EXT_TEMP.name to extTempState,
ChartLine.INT_HUMIDITY.name to intHumidityState,
ChartLine.EXT_HUMIDITY.name to extHumidityState,
ChartLine.KTP.name to ktpState,
ChartLine.CHAMBER1.name to chamber1State,
ChartLine.CHAMBER2.name to chamber2State,
ChartLine.BASE_PLATE.name to basePlateState,
ChartLine.WATER.name to waterState,
)
private fun ChartUiState.Companion.fromPreference(savedStates: Map<String, Boolean>): ChartUiState {
val defaults = ChartUiState()
return ChartUiState(
intTempState = savedStates[ChartLine.INT_TEMP.name] ?: defaults.intTempState,
extTempState = savedStates[ChartLine.EXT_TEMP.name] ?: defaults.extTempState,
intHumidityState = savedStates[ChartLine.INT_HUMIDITY.name] ?: defaults.intHumidityState,
extHumidityState = savedStates[ChartLine.EXT_HUMIDITY.name] ?: defaults.extHumidityState,
ktpState = savedStates[ChartLine.KTP.name] ?: defaults.ktpState,
chamber1State = savedStates[ChartLine.CHAMBER1.name] ?: defaults.chamber1State,
chamber2State = savedStates[ChartLine.CHAMBER2.name] ?: defaults.chamber2State,
basePlateState = savedStates[ChartLine.BASE_PLATE.name] ?: defaults.basePlateState,
waterState = savedStates[ChartLine.WATER.name] ?: defaults.waterState,
)
}

View File

@@ -583,22 +583,22 @@ class MainViewModel @Inject constructor(
saveGuideBeamMinToPreference() saveGuideBeamMinToPreference()
saveGuideBeamMaxToPreference() saveGuideBeamMaxToPreference()
// Engineer 화면에서는 Min/Max 버튼에 따라 표시된 Min 또는 Max 값을 그대로 송신 // After updating the state, send the packet
val newMin = guideBeamMin.value val newMin = guideBeamMin.value // get the potentially updated value
val newMax = guideBeamMax.value val newMax = guideBeamMax.value // get the potentially updated value
val value = when (state) { val guideBeam = guideBeam.value.toInt()
MinMaxUpDownState.MinDown,
MinMaxUpDownState.MinUp,
MinMaxUpDownState.MinLongDown,
MinMaxUpDownState.MinLongUp -> newMin
MinMaxUpDownState.MaxDown, /*
MinMaxUpDownState.MaxUp, val value = when(guideBeamValue) {
MinMaxUpDownState.MaxLongDown, 0 -> 0
MinMaxUpDownState.MaxLongUp -> newMax 1 -> newMin
10 -> newMax
else -> (newMin + (guideBeamValue - 1) * ((newMax - newMin) / 9))
} }
*/
val value = (newMin + (guideBeam - 1) * ((newMax - newMin) / 9))
Timber.d("Engineer guideBeam tx value: $value, guideBeamMax: $newMax, guideBeamMin: $newMin") Timber.d("guideBeam: $value, guideBeam: $guideBeam, guideBeamMax: $newMax, guideBeamMin: $newMin")
txPacket(READ_WRITE.WRITE, CMD.GUIDE_BEAM, GuideBeam(value = value)) txPacket(READ_WRITE.WRITE, CMD.GUIDE_BEAM, GuideBeam(value = value))
} }

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.5 KiB