I write some code layout for bixby, As you know there has primary and secondary property.
In image-card object format like this.
image-card {
size (L)
title-area {
hAlign (Start)
slot1 {
text {
value("#{value(data)}")
style(Title_M)
}
}
slot2 {
single-line {
text {
value("#{value(data)}")
style(Detail_L)
}
}
}
}
image-url ("https://SOME_DOMAIN.com/SOME_IMAGE.png")
}
But in cell-area format like this.
cell-area {
slot1 {
image {
url ("https://SOME_DOMAIN.com/SOME_IMAGE.png")
shape (Square)
}
}
slot2 {
content {
primary ("#{value(data)}")
secondary ("#{value(data)}")
}
}
}
It looks like cell-area have no property like style, is it right? or it can be modified like image-card, style?
Update:(5/24/2021)
This was a while ago. I'm not working on Bixby now. Bixby is a very dynamic and fast evolving Voice Platform.
There may be a better way to do this in latest Bixby Platform.
Please refer to the documentation and reach out to the technical support team.
Original Answer
Based on the documentation, looks like Image Card is clickable and is meant for using images as background (vs Cell Card) where as Cell Area is not clickable and meant for creating a cell in a container (Parent Layout).
I guess to show this intrinsic difference to user intuitively (& may be automatically), Cell Area inherits Parent's style and blends in but using Image Card, developer can choose to "trigger" clicking intuition by customizing the appearance using style element.
I hope this helps!
PS. Download this capsule where you can see the various layouts in action: https://github.com/bixbydevelopers/common-layouts
Related
If I have a lottie animation in the form of a json file, is there a way to recolor it in code or even within the json itself?
(To be clear, I hope there's a way to do it without involving After Effects. For instance if I decide to change my app's primary color, the whole app will change except the animation unless there's a way to do that.)
I figured it out. For this example, let's say I want to recolor a specific layer to Color.RED.
You'll need your LottieAnimationView, a KeyPath, and a LottieValueCallback
private LottieAnimationView lottieAnimationVIew;
private KeyPath mKeyPath;
private LottieValueCallback<Integer> mCallback;
Then in your onCreate (or onViewCreated for a fragment) you'll get the animation with findViewById, as well as "addLottieOnCompositionLoadedListener" to the lottieAnimationView, in which you will setup the "mKeyPath" and "mCallback":
lottieAnimationVIew = findViewById(R.id.animationView);
lottieAnimationView.addLottieOnCompositionLoadedListener(new LottieOnCompositionLoadedListener() {
#Override
public void onCompositionLoaded(LottieComposition composition) {
mKeyPath = getKeyPath(); // This is your own method for getting the KeyPath you desire. More on that below.
mCallback = new LottieValueCallback<>();
mCallback.setValue(Color.RED);
checkBox.addValueCallback(mKeyPath, LottieProperty.COLOR, mCallback);
}
});
The argument "LottieProperty.COLOR" specifies which property I am changing.
There's probably a better way to do this, but here's my "getKeyPath" method for finding the specific thing I want to change. It will log every KeyPath so you can see which one you want. Then it returns it once you've supplied the correct index. I saw that the one I want is the 5th in the list, hence the hard-coded index of 4.
private KeyPath getKeyPath() {
List<KeyPath> keyPaths = lottieAnimationView.resolveKeyPath(new KeyPath("Fill", "Ellipse 1", "Fill 1"));
for (int i = 0; i < keyPaths.size(); i++) {
Log.i("KeyPath", keyPaths.get(i).toString());
}
if (keyPaths.size() == 5) {
return keyPaths.get(4);
}
else {
return null;
}
}
Note that the "Fill", "Ellipse 1", "Fill 1" are strings I supplied to narrow the list down to just the ones that have those keys, because I know that the layer I want will be among those. There's likely a better way to do this as well.
There is another thread on this topic with the same approach but a bit simplified:
How to add a color overlay to an animation in Lottie?
Here's directly an example (Kotlin):
yourLottieAnimation.addValueCallback(
KeyPath("whatever_keypath", "**"),
LottieProperty.COLOR_FILTER
) {
PorterDuffColorFilter(
Color.CYAN,
PorterDuff.Mode.SRC_ATOP
)
}
You can find the names of the keypaths also in the Lottie editor.
i try to this code ↓
result-view.view.bxb
conversation-drivers {
if (size(arrayItem) > 0) { //arrayItem : item1, item2, item3
conversation-driver {
template-macro (arrayItemTempl){
param (arrayItem){
expression (arrayItem)
}
}
}
}
}
arrayItemTempl.dialog.bxb
template-macro-def (arrayItemTempl) {
params {
param (arrayItem) {
type (ArrayItem)
min (Optional) max (Many)
}
}
content {
template ("#{value(arrayItem)}")
}
}
result
enter image description here
for each error, list of error... how to loop in conversation-drivers and template-macro-def
I want each item to be separate.
[item1, item2, item3] ---> [item1] [item2] [item3]
Unfortunately this is not possible. You will have to define a conversation-driver manually per item.
conversation-drivers {
conversation-driver {
...
}
conversation-driver {
...
}
conversation-driver {
...
}
}
Remember that the user will need to scroll to see all the conversation drivers if they are too many. Consider not having too many conversation drivers.
It is not possible to display a variable-sized array of conversation drivers and this behavior is intended as per Bixby's Design Principles.
Conversation drivers are meant to show reasonable next steps to a user. In a properly scoped capsule, users should rarely have more that 2-3 next steps to choose between. As a rule of thumb, I would recommend no more than 4 conversation drivers without good reason.
Additionally, large numbers of conversation drivers may result in issues with the capsule approval process which reviews all capsules intended for the Marketplace for their user experience.
I would recommend exploring the Design Guides available in the developer documentation. The Designing Conversations and Designing With Bixby Views guides will be especially useful for your use case.
I'm trying to take the data (concept) from a card a user selects from a results view containing multiple cards and instead of presenting the information from that card in a more detailed view i'm trying to use the properties of the Concept the card displays, ie: Song author, title ... and transform that into a audioPlayer.AudioInfo concept and start playing the audio.
I am familiar with how the audio demo capsule plays audio, where the audioPlayer.AudioInfo is first build, an then passed to the audio player in the same action: https://github.com/bixbydevelopers/capsule-samples-collection/tree/master/audio
action (PlaySessionOfDay) {
type (Search)
collect {
computed-input (sessionToPlay) {
description (Fetch the sessions to be played)
type (audioPlayer.AudioInfo)
min (Required) max (One)
compute {
intent {
goal: BuildSessionOfDayAudioInfo
}
}
hidden
}
computed-input (session) {
description (By passing in the AudioInfo object to the PlayAudio action, we ask the client to play our sound.)
type (audioPlayer.Result)
compute {
intent {
goal: audioPlayer.PlayAudio
value: $expr(sessionToPlay)
}
}
hidden
}
}
output (Result)
}
How an can you use the selected Song card from the list of cards as the input into the PlaySessionOfDay action and then pass it to an action like BuildSessionOfDayAudioInfo, to create an audioPlayer.AudioInfo.
It looks like you can't have compute block
compute {
intent {
goal: BuildSessionOfDayAudioInfo
}
}
unless you are using computed-input (sessionToPlay).
Edit: I think some of the trouble is because by default cards clicked on in a list-of (songs) view invoke a details view. Is there any way to avoid this and use the selected data as the input to an action?
Is there any way to avoid this and use the selected data as the input to an action?
Yes, set has-details (false) in your view model, read more here
You need to add on-click with the intend PlaySessionOfDay
You would also need implement PlaySessionOfDay so it could take an input (I assume you have more than one content to play)
I want to create cells that span horizontally in the Bixby view. Previously, we were able to do this with a .bml file. The Weather Channel app currently does this with a large chart with corresponding data below the points. Below is an example the app UI I want to create.
I tried creating several vbox elements and adding a layout-macro inside, but the vbox won't take that type of element. What should I do? Thanks!
I actually found a workaround with single-line. To create a view like this, use the typical hbox-vbox model, and do this for each vbox:
vbox {
content {
single-line {
text {
value {
template ("#{value(data.hourly[i].hour)}")
}
style (Title_XS)
}
}
single-line {
image {
style (Title_L)
url ("#{value(data.hourly[i].image)}")
}
}
single-line {
spacer
text {
value {
template ("#{value(data.hourly[i].temperature)}")
}
style (Title_S)
}
}
}
}
Result
I am showing few information to the user on card and structure has min(Optional) and I don't want to change that. There is possibility that it might be blank. But how to put it in condition in result-view. I tried like if(this.name) but then yellow line appears on condition and template both.
Using an if statement is the correct way.
For example, here is how a capsule I have written will handle an optional gameTitle property when displaying my Character structure.
if(exists(character.gameTitle)) {
cell-card {
slot2 {
content {
order (PrimarySecondary)
primary ("#{value(character.gameTitle)}")
}
}
}
}