I have images of various sizes in Contentful i.e. widths of 200px, 600px, 800px, 1000px etc.
If I use responsiveresolution per the gatsby.js docs, it will up-res my small images:
allContentfulProduct {
edges {
node {
id
productName
image {
responsiveResolution(width: 600) {
width
height
src
srcSet
}
}
}
}
}
}
How can I get the natural resolution for images from Contentful? responsiveresolution in gatsby.js could use better documentation!
You can get the natural resolution by running this query.
allContentfulProduct {
edges {
node {
id
productName
image {
file{
url
}
}
}
}
}
}
responsiveResolution is just a helper, and you can totally query the image without it as you would any other entry.
Related
var navbody: some View {
NavigationView {
ZStack {
somedarkcolorhere
List(searchModel.suggestions ?? [], rowContent: { text in
NavigationLink(destination: MediaSearchResultsView(searchText: text)) {
Text(text)
}
})
.overlay(SearchMediaHintsResultsScreen(searchModel: searchModel))
.searchable(text: $searchModel.searchText
// https://stackoverflow.com/questions/69668266/searchable-modifier-not-displaying-search-bar-below-navigation-bar-title
/* uncomment for search field to be shown initially and ever.
On iPad running 16.1 search field does show initially.
On iphone running 15.6.1 navigationTitle shows and search field
initially does not
*/
// , placement: .navigationBarDrawer(displayMode: .always)
)
.navigationTitle("v1_what_are_we_searching_for".localized)
}
.onChange(of: searchModel.searchText) { _ in
searchModel.processChangeOfSearchText()
}
.preference(key: ErrorPreferenceKey.self, value: observableError)
.sheet(isPresented: $observableError.showingError) {
ErrorView(error: observableError)
}
}
}
How to show .overlay with search results full width of the window?
currently it has gaps on the left and right
It is hard to see from just the code you have shown.
The List has default styling that includes some padding round the edges. You could try using a ForEach, or change the list style with a listStyle(.plain) modifier.
Does your overlay view also have a frame set to occupy the available space, such as .frame(maxWidth: .infinity)?
It may be due to the List default ListStyle of .insetGrouped. Try using .plain
Or try adding another view to the top layer of the ZStack that is only there when you want to show the overlay, so that it doesn't block List tap gestures, but can use the full View bounds to show the overlay.
i.e.
ZStack {
somedarkcolorhere
List { }
if showOverlay { Overlay }
}
This is a situation where sectioning is absolutely necessary.
I want to remove the margin between sections.
how do i do?
testview.view.bxb ↓
layout{
section{
content{
compound-card{
content{
paragraph{
value("testtesttesttesttesttesttesttesttest")
}
paragraph{
value("testtesttesttesttesttesttesttesttest")
}
}
}
}
}
section{
content{
compound-card{
content{
paragraph{
value("testtesttesttesttesttesttesttesttest")
}
paragraph{
value("testtesttesttesttesttesttesttesttest")
}
}
}
}
}
}
image ↓
[Problem]
testtesttesttesttesttesttesttesttest
testtesttesttesttesttesttesttesttest
testtesttesttesttesttesttesttesttest
testtesttesttesttesttesttesttesttest
[i want]
testtesttesttesttesttesttesttesttest
testtesttesttesttesttesttesttesttest
testtesttesttesttesttesttesttesttest
testtesttesttesttesttesttesttesttest
help would be appreciated.
The additional space between two sections is not removable. It is there by design to split two different sections.
However, in your code, there is no need to do different section, as I would demo later
use new line "\n" in the paragraph value
use different paragraph in the same section
I would also recommend watch this tutorial to learn more about different component in Bixby result-view.
result-view {
match: StructB (this)
message: template ("Sample view")
render {
// assume always single item, demo purpose only
layout {
section {
content {
paragraph {
value: template ("#{value(this.aaa)}\n#{value(this.bbb)}\n#{value(this.ccc)}\n#{value(this.ddd)}")
}
paragraph {
value: template ("I can do more here")
}
}
}
}
}
}
There is no need for compound card as well, here is the result. Please take note the additional space between two paragraphs.
Here is the content of StructB for your reference
I want to implement a capsule that does a calculation if the user provides the full input necessary for the calculation or asks the user for the necessary input if the user doesn't provide the full input with the very first request. Everything works if the user provides the full request. If the user doesn't provide the full request but Bixby needs more information, I run into some strange behavior where the Calculation is being called more than once and Bixby takes the necessary information for the Calculation from a result of another Calculation, it looks like in the debug graph.
To easier demonstrate my problem I've extended the dice sample capsule capsule-sample-dice and added numSides and numDice to the RollResultConcept, so that I can access the number of dice and sides in the result.
RollResult.model.bxb now looks like this:
structure (RollResultConcept) {
description (The result object produced by the RollDice action.)
property (sum) {
type (SumConcept)
min (Required)
max (One)
}
property (roll) {
description (The list of results for each dice roll.)
type (RollConcept)
min (Required)
max (Many)
}
// The two properties below have been added
property (numSides) {
description (The number of sides that the dice of this roll have.)
type (NumSidesConcept)
min (Required)
max (One)
}
property (numDice) {
description (The number of dice in this roll.)
type (NumDiceConcept)
min (Required)
max (One)
}
}
I've also added single-lines in RollResult.view.bxb so that the number of sides and dice are being shown to the user after a roll.
RollResult.view.bxb:
result-view {
match {
RollResultConcept (rollResult)
}
render {
layout {
section {
content {
single-line {
text {
style (Detail_M)
value ("Sum: #{value(rollResult.sum)}")
}
}
single-line {
text {
style (Detail_M)
value ("Rolls: #{value(rollResult.roll)}")
}
}
// The two single-line below have been added
single-line {
text {
style (Detail_M)
value ("Dice: #{value(rollResult.numDice)}")
}
}
single-line {
text {
style (Detail_M)
value ("Sides: #{value(rollResult.numSides)}")
}
}
}
}
}
}
}
Edit: I forgot to add the code that I changed in RollDice.js, see below:
RollDice.js
// RollDice
// Rolls a dice given a number of sides and a number of dice
// Main entry point
module.exports.function = function rollDice(numDice, numSides) {
var sum = 0;
var result = [];
for (var i = 0; i < numDice; i++) {
var roll = Math.ceil(Math.random() * numSides);
result.push(roll);
sum += roll;
}
// RollResult
return {
sum: sum, // required Sum
roll: result, // required list Roll
numSides: numSides, // required for numSides
numDice: numDice // required for numDice
}
}
End Edit
In the Simulator I now run the following query
intent {
goal: RollDice
value: NumDiceConcept(2)
}
which is missing the required NumSidesConcept.
Debug view shows the following graph, with NumSidesConcept missing (as expected).
I now run the following query in the simulator
intent {
goal: RollDice
value: NumDiceConcept(2)
value: NumSidesConcept(6)
}
which results in the following Graph in Debug view:
and it looks like to me that the Calculation is being done twice in order to get to the Result. I've already tried giving the feature { transient } to the models, but that didn't change anything. Can anybody tell me what's happening here? Am I not allowed to use the same primitive models in an output because they will be used by Bixby when trying to execute an action?
I tried modifying the code as you have but was unable to run the intent (successfully).
BEGIN EDIT
I added the additional lines in RollDice.js and was able to see the plan that you are seeing.
The reason for the double execution is that you ran the intents consecutively and Bixby derived the value of the NumSidesConcept that you did NOT specify in the first intent, from the second intent, and executed the first intent.
You can verify the above by providing a different set of values to NumSidesConcept and NumDiceConcept in each of the intents.
If you had given enough time between these two intents, then the result would be different. In your scenario, the first intent was waiting on a NumSidesConcept to be available, and as soon as the Planner found it (from the result of the second intent), the execution went through.
How can you avoid this? Make sure that you have an input-view for each of the inputs so Bixby can prompt the user for any values that did not come through the NL (or Aligned NL).
END EDIT
Here is another approach that will NOT require changing the RollResultConcept AND will work according to your expectations (of accessing the number of dice and sides in the result-view)
result-view {
match: RollResultConcept (rollResult) {
from-output: RollDice(action)
}
render {
layout {
section {
content {
single-line {
text {
style (Detail_M)
value ("Sum: #{value(rollResult.sum)}")
}
}
single-line {
text {
style (Detail_M)
value ("Rolls: #{value(rollResult.roll)}")
}
}
// The two single-line below have been added
single-line {
text {
style (Detail_M)
value ("Dice: #{value(action.numDice)}")
}
}
single-line {
text {
style (Detail_M)
value ("Sides: #{value(action.numSides)}")
}
}
}
}
}
}
}
Give it a shot and let us know if it works!
I need to be able to set the fontFamily for an entire IText object even if it has character specific styling (code example and jsfiddle below). Note, when changing the fontFamily the character-specific styles don't change. Is there a way for me to access and clear those styles and then apply the style to the entire set of characters?
http://jsfiddle.net/xmfw65qg/48/
var iTextSample = new fabric.IText('hello\nworld', {
styles: {
0: {
0: { textDecoration: 'underline', fontSize: 80 },
1: { textBackgroundColor: 'red' }
},
1: {
0: { textBackgroundColor: 'rgba(0,255,0,0.5)' },
4: { fontSize: 20 }
}
}
});
2020 May Edit
In later revisions of fabricJS, the method removeStyle(props) has been added.
That means you can do:
myTextObject.removeStyle('fontFamily');
to clean it up.
You also have:
myTextObject.cleanStyle('fontFamily');
That will instead remove all the fontaFamily properties that are duplicated of the main object. So that the style object is reduced in complexity if possible.
Original answer
http://jsfiddle.net/asturur/xmfw65qg/50/
you have to manually iterate the style object and clear the fontFamily property.
function setFont(name, value) {
var object = canvas.item(0);
if (!object) return;
if (object.styles) {
var styles = object.styles;
for (var row in styles) {
for (var char in styles[row]) {
if ('fontFamily' in styles[row][char]) {
delete styles[row][char]['fontFamily'];
}
}
}
}
object.set(name, value).setCoords();
canvas.renderAll();
}
why this is necessary is another matter.
I would open an issue on the github repository for that.
Edit:
As fabricjs released 1.6.2 a small bug that was causing the original style object to be changed during rendering, has been fixed.
Is it possible to animate the images filter in Fabric.js? Such as a "pixelate" filter.
I solved it in the same way like the demo.
Unfortunately filters aren't able to be animated - they need too much processing time.
Here's my Code:
image = ... //Image, where the filter should be applied
var filter = new fabric.Image.filters.RemoveWhite({
threshold: 0,
distance: 140
});
image.filters.push(filter);
image.applyFilters(canvas.renderAll.bind(canvas));
animate(image,1, 400); //Start the Animation
function animate(image,value, stop){
value += ((stop-value)*0.02); //Change the threshold-value
if (image.filters[0]) {
image.filters[0]['threshold'] = value;
console.log(value);
image.applyFilters(canvas.renderAll.bind(canvas)); //Start creating the new image
if(value<stop-100){
setTimeout(function(){act(image,value,stop);},1);
}
}
}
I know the code isn't the most efficient one, but it works. And you can see that Animating filters consumes too much time.
(I tested it with a 1920x1080px image, maybe you can use it with smaller images)
Here is a updated version for the brightness filter
var brightnessValue = 0.9;
var brightnessFilter = new fabric.Image.filters.Brightness({
brightness: brightnessValue
});
fabricImage.filters.push(brightnessFilter);
fabric.util.requestAnimFrame(function brightnessFilterAnimation() {
brightnessValue = brightnessValue - 0.04;
brightnessFilter.brightness = brightnessValue;
fabricImage.applyFilters();
if (brightnessValue > 0) {
fabric.util.requestAnimFrame(brightnessFilterAnimation);
}
});