I can't figure out how to link to specific image url in a Bixby layout template.
I tried specifying content > section > image > url > value in various expression formats but none worked.
This produces an empty section in the layout log.
section {
content {
image {
url ("#{value(image)}")
}
}
}
}
I want the image specified in the content object to appear.
If I hard code the image as url ("images/Shakespeare.jpg") for example it works, so there is something wrong with the way I am invoking the expression language.
Solved: I needed to specify the URL property of the Image concept.
section {
content {
image {
url ("#{value(image.url)}")
}
}
}
}
Related
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
In my project, I have an image.
On initialization; I load it from a Promise<string>; where string is a URL to the image
Then I use a node package to change and crop the image. It asks for an image, crops it to the requested size and returns an Observable<anObject> where the anObject.base64 is a base64 representation of the cropped image. It's contained in a dialog.
I tried many many things but could not change the image of the <img> tag automatically.
Here is my last setup:
image: Observable<string>;
...
ngOnInit() {
...
prd.images.big.then(img => {
this.image = of(img);
});
// prd.images.big is a Promise<string>
...
}
showImageDialog() {
this.image = this.imageDialog.openDialog().pipe(
map(data => {
return data.base64;
})
);
}
And my template:
....
<a style="cursor: pointer" (click)="showImageDialog();">
<img [src]="(image | async) || 'an url to default image'"/>
</a>
....
Weird thing is, image not change automatically, but when I click on the image again, it changes.
I hope any of you can help to achieve this. Thank you.
You want to avoid re-assigning the observable once you create it. Try something like this:
image: Subject<string>;
...
ngOnInit() {
this.image = new ReplaySubject<string>(1);
prd.images.big.then(img => this.image.next(img));
}
showImageDialog() {
this.imageDialog.openDialog().subscribe(data => {
const dataUrl = `data:image/jpeg;base64,${data.base64}`;
this.image.next(dataUrl);
});
}
FYI a Subject is just a variable that acts as both observer and observable-you can subscribe or pipe operations from it like any observable and you can also manually put values into the subject that will then be observed by all of the subscribers. In the code above I used a special kind of subject that will replay the most recent value to any late subscribers just in case you put a value in before the view has time to subscribe.
You are currently assigning a subscription to this.image. Instead, set this.image to be the data.base64 returned inside your map function. If you want to use base64-encoded image bytes for an image tag, you need to use a data URL
If your image type is jpeg:
<img src="data:image/jpeg;base64,{{image}}"/>
Using the Page Object pattern, I'd like to implement some "at" verifications based on the text of /html/head/title element.
How do I get the text of the title?
I know Geb doesn't support XPath expressions.
#Tim_Yates is right, but you specifically asked about the Page Object model.
You setup the rules for your successful page load, like so:
class GoogleHomePage extends Page {
static url = "http://google.com/"
static at = { title == "Google" } // the bit you asked about
}
Then, your actual test:
Browser.drive {
to GoogleHomePage // goes to GoogleHomePage and verifies by calling at().
}
(if you don't want at() checking, use via() instead of to().)
The documentation shows:
Browser.drive {
go "http://google.com/ncr"
// make sure we actually got to the page
assert title == "Google"
....
The current project I'm on is utilizing tenant sites. With each site, we want the ability to change the logo through out the tenant site by modifying the its settings (on the admin page, settings > general).
I've added two text fields to the site settings by following this well documented tutorial. However, I'd like the user to be able to pick the logos using the media picker instead of typing in the path.
Currently I have a LogoBarSettings part with its record, driver and handler. I'm not sure how to add the media picker to the my LogoBarSettings and even if I did, must I also create another handler, driver, and record for it? I can't imagine I would but I'm pretty stuck at this point.
Can someone provide some direction on this?
Here is my LogoBarSettings
public class LogoBarSettings : ContentPart<LogoBarSettingsPartRecord>
{
public string ImageUrl
{
get { return Record.ImageUrl; }
set { Record.ImageUrl = value; }
}
public string ImageAltText
{
get { return Record.ImageAltText; }
set { Record.ImageAltText = value; }
}
}
The MediaPicker is invoked through Javascript, so you shouldn't need to change any of your model classes. When the MediaPicker is loaded for a page, it sets up a jQuery event handler for all form elements on the page. Triggering the event orchard-admin-pickimage-open will open the MediaPicker. Supply a callback function to capture the picked media.
Here is a quick example that you can run in Firebug or Chrome Developer Tools from a page which has the MediaPicker loaded, such as a Page editor:
$('form').trigger("orchard-admin-pickimage-open", {
callback: function(data) {
console.log(data);
}})
This should print something similar to this:
Object {img: Object}
img: Object
align: ""
alt: ""
class: ""
height: "64"
html: "<img src="/Media/Default/images/test.jpg" alt="" width="64" height="64"/>"
src: "/Media/Default/images/test.jpg"
style: ""
width: "64"
__proto__: Object
__proto__: Object
The BodyPart editor integrates Orchard's MediaPicker with TinyMce, so you can start looking at that module for a more complete example, specifically Modules\TinyMce\Scripts\plugins\mediapicker\editor_plugin_src.js.
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
}
}
}