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
Related
While playing audio, is it possible to add in extra view or layout e.g, dialog,text or some picture when you playing audio, and change when navigating audio from one to another. As i see from my simulator(don't have a real device), it's too empty
I am quite blur on how to add thing in between audio as the format is quite restricted in audioPlayer.
Anyway is it possible? Or is the blank is filled when playing audioPlayer from real device?
Thanks.
Yes, you have full control to render a custom display when you're showing a result-view and playing the audio player. You can see an example of this when using the podcast-template that's built into Bixby Studio. In that template, this is the result view (see using match patterns).
result-view {
match {
Result {
from-output {
_ {
from-input {
audioPlayer.AudioInfo (audioInfo) {
min (Required) max (One)
}
}
}
}
}
}
message {
template-macro (podcast-result) {
param (audioInfo) {
expression (audioInfo)
}
}
}
render {
layout {
section {
content {
image {
url ("[#{value(audioInfo.audioItem[audioInfo.startAudioItemIndex].albumArtUrl)}]")
object-fit (Contain)
aspect-ratio (1:1)
lightbox-enabled (false)
}
}
}
}
}
}
I am trying to open google maps using the on-click key from a compound card, but I don't know what to include in the payload-URI key for app-launch. The documentation uses the example which is commented out, but I do not know what to fill in for the application(google-maps).
I am getting two errors both being Unknown key message/app-launch.
This is the code we are trying to use, so that when a compound card is clicked, it opens google maps with app-launch.
// PersonSelectionView.view.bxb
input-view {
match: Spot (this)
// optional selection dialog to overwrite any other default dialog
message (Pick a spot)
render {
// used to iterate over the list of candidates
selection-of (this) {
navigation-mode {
read-none {
list-summary ("There are #{size(this)} #{value(categories)} spots near you")
item-selection-question (Which one would you like?)
}
}
where-each (one) {
// you can use conditional logic to control how candidates are displayed,
// using either a standard layout with a match pattern, or a layout macro
compound-card {
content {
map-card {
title-area {
slot1 {
text {
value("#{value (one.spotName)}")
}
}
slot3 {
single-line {
text {
value("#{value (one.distance)} Miles away")
}
}
}
}
aspect-ratio (1:1)
markers {
marker {
geo ("Location.point")
icon {
template (/images/icons/red-marker.png)
}
width (15)
height (20)
anchor-x (5)
anchor-y (15)
rotation (0)
}
}
}
paragraph {
value {
template ("#{raw(description)}")
}
style (Detail_L)
}
}
on-click {
message ("TESTING THIS MESSAGE")
app-launch {
//payload-uri ("bixby://com.android.systemui/DummySystem/punchOut")
}
}
}
}
}
}
}
An "Unknown Key" error means that the key you are trying to define is not one of the valid child keys of the key you are currently in. The reference section of the Bixby Developer Documentation provides each key with its valid child keys.
Both app-launch and message are not child keys of on-click.
app-launch cannot be defined within an on-click. It must be defined in its own result-view.
message can be defined in multiple keys but not on-click
Your on-click would need to redirect to a separate result-view which would contain the app-launch key with the correct payload-uri defined.
You would need the following to implement the behavior you described:
An Action (and backing Action Javascript) to return the URI
A Concept to hold the URI returned by the Action
A result-view with a match that matches the Concept
Example Action:
action (LaunchDefinedUri) {
description (Launches the defined uri)
type (Commit)
collect {
input (launchUri) {
type (LaunchUri)
min (Required) max (One)
}
}
output (LaunchUri)
}
Example Action Javascript:
module.exports = {
function: LaunchDefinedUri
}
function LaunchDefinedUri(launchUri) {
return launchUri
}
Example Concept:
text (LaunchUri) {
description (Uri to be launched)
}
Example Result View:
result-view {
match: LaunchUri(this)
app-launch {
payload-uri("#{value(this)}")
}
render {
nothing
}
}
As for Google Maps API in particular, the Google Maps documentation seems to provide information on how to define the correct URIs for your specific purpose and behavior.
Please look into this official library provided by the Bixby team, which provides punch-out to Google Maps.
https://bixbydevelopers.com/dev/docs/dev-guide/developers/library.navigation
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
Can someone please guide me on how to create layout elements in Orchard 1.9. I couldn't find any resource online.
In general, creating a new layout element is similar to creating a new part. There is a driver and a few views involved in the process. To the point - you need to implement as follows:
An element class.. Class that inherits from Element, which contains all the element data. A model, so to speak.
A driver. Class that inherits from ElementDriver<TElement>, where TElement is the type you created above. Each element has it's own driver that handles displaying admin editor (and the postback) and frontend display views.
Shapes. All shapes should be placed under /Views/Elements/ folder, by convention.
Display shape. Named after your element, ie. MyElement.cshtml. This one renders your element on frontend.
Design display shape.. Named after your element, with .Design suffix, ie. MyElement.Design.cshtml. This one renders your element inside the layout editor.
Editor shape.. This one should be put in /Views/EditorTemplates/ folder instead. Default naming convention is Elements.MyElement.cshtml. It renders the editor shown when you drop a new element on layout editor canvas.
With all above done, your new element should appear in the list of elements on the right side of the layout editor, ready to use.
If you want to do some more complex elements, please check the existing implementations. Layouts module has a very decent architecture so you should get up to speed pretty quickly. Just keep in mind the necessary steps I wrote above.
To create a custom layout element first create a class that inherits from Element. Element is found in the Orchard.Layouts namespace so you need to add a reference. To follow Orchard standards put this file in a folder called Elements.
public class MyElement : Element
{
public override string Category
{
get { return "Content"; }
}
public string MyCustomProperty
{
get { return this.Retrieve(x => x.MyCustomProperty); }
set { this.Store(x => x.MyCustomProperty, value); }
}
}
Next, create a driver class in a folder called Drivers. This class inherits from ElementDriver<TElement> and likely you will want to override the OnBuildEditor and OnDisplaying methods. OnBuildEditor is used for handling creating our editors shape and updating our database when the editor is saved. OnDisplaying is used when we need to do things when displaying our element. Oftentimes, you will want to add properties to the shape which can be done with context.ElementShape.MyAdditionalProperty = "My Value";
public class MyElementDriver : ElementDriver<MyElement>
{
protected override EditorResult OnBuildEditor(MyElement element, ElementEditorContext context)
{
var viewModel = new MyElementEditorViewModel
{
MyCustomProperty = element.MyCustomProperty
};
var editor = context.ShapeFactory.EditorTemplate(TemplateName: "Elements.MyElement", Model: viewModel);
if (context.Updater != null)
{
context.Updater.TryUpdateModel(viewModel, context.Prefix, null, null);
element.MyCustomProperty = viewModel.MyCustomProperty;
}
return Editor(context, editor);
}
protected override void OnDisplaying(Reddit element, ElementDisplayContext context)
{
context.ElementShape.MyAdditionalProperty = "My Value";
}
}
We then just need our views. Our editor view goes into Views/EditorTemplates. The file name needs to be what we set the template name of the editor shape. In our case the view name will be Elements.MyElement.cshtml.
#model MyNameSpace.ViewModels.MyElementEditorViewModel
<fieldset>
<div>
#Html.LabelFor(m => m.MyCustomProperty, T("My Custom Property"))
#Html.TextBoxFor(m => m.MyCustomProperty, new { #class = "text medium" })
</div>
</fieldset>
Finally, we just need a view for our frontend. This view goes into the following folder Views/Elements. The name of the view file is the same as our element class name. For this example the file would be called MyElement.cshtml.
#using MyNameSpace.Elements
#using MyNameSpace.Models
#{
var element = (MyElement)Model.Element;
}
<h1>#element.MyCustomProperty</h1>
You will then have a new element that you can drag into your layout with the layout editor.
For more details on creating an element from start to finish check out my blog post on creating a Reddit element.
I am trying to build a custom button in newest BlackBerry 10 platform.
The button should change background image when it is clicked and then change it back when it is clicked the second time.
The button logic is fairly simple: once clicked, I check for the type of image currently in the button and change the image source.
I started with a basic QML custom control which looks like this (stripped of labels and other unimportant things):
import bb.cascades 1.0
Container
{
id: root
layout: DockLayout
{
}
function clickMe()
{
var source = myImage.defaultImageSource.toString();
console.log(source);
if (source.endsWith("image.png"))
{
myImage.defaultImageSource = "asset:///images/image_pushed.png";
}
else
{
myImage.defaultImageSource = "asset:///images/image.png";
}
}
ImageButton
{
id: myImage
defaultImageSource: "asset:///images/image.png"
}
onCreationCompleted:
{
myImage.clicked.connect(root.clickMe);
}
}
ImageButton click event is connected to JavaScript function clickMe. The function fires and the URL is logged to console correctly.
The problem is the IF clause, because the image_pushed.png is never set. Why is this the problem and how can I implement this button?
I am looking around for a only QML solution for this problem and I found this information:
the defaultImageSource property is of type QUrl, which does contain
toString() method.
toString() method returns QString, which indeed has function endsWith.
my QML reference: http://qt-project.org/doc/qt-4.8/qstring.html#endsWith
Thanks.
Within QML QString instances appear to be a normal JavaScript strings. This mapping is done automatically. And Javascript strings don't have a endsWith method. You can use the search method with an regular expression to achieve the same.
if (source.search(/image\.png$/ !== -1) { /* ... */ }
I think you can create more simple way by using property
for example:
Control{
id : myControl
property bool state
ImageButton{
defaultImageSource : state ? "firstImageAsset.png" : "secondImageAsset.png"
onClick :{
myControl.state = !myControl.state
}
}
}