Related
I have a GridPane setup:
GridPane pane = new GridPane();
// 3 columns, which percent widths are 40%, 27% and 33%, respectively
setColumnPercents(pane, 40, 27, 33);
// 4 rows, each percent height is 25%
setRowPercents(pane, 25, 25, 25, 25);
pane.setHgap(10);
pane.setVgap(10);
// getView() returns a StackPane
// The 4 arguments of getView() specifies the stack pane's
// prefWidth, prefHeight, minWidth and minHeight
pane.add(setGridGrow(getView(196, 112, 106, 112)), 0, 0, 1, 4);
pane.add(setGridGrow(getView(131, 104, 57, 104)), 1, 0, 1, 3);
pane.add(setGridGrow(getView(93, 26, 42, 26)), 1, 3);
pane.add(setGridGrow(getView(185, 72, 74, 72)), 2, 0, 1, 2);
pane.add(setGridGrow(getView(140, 76, 55, 76)), 2, 2, 1, 2);
return pane;
In this example, the first column contains 1 node spanning 4 rows, its prefHeight and minHeight both set to 112, the grid height required to contain this node is (112 - (3 * 10)) / 4 = 27.3, the second column contains 2 nodes, the node above spans 3 rows, another grid height can be calculated based on its height: (104 - 2 * 10) / 3 = 28, the node below does not span, so its respective grid height is 26, for the two nodes in the third column, each spans 2 rows, 2 more grid height can be calculated: (72 - 10) / 2 = 31 and (76 - 10) / 2 = 33. Putting these together, a minimal grid height 33 is big enough for the gridpane to contain all its children, so the minimal total height of the pane is 33 * 4 + 3 * 10 = 162.
However, when I run this code, the total height of the gridpane turns up to be 298, way bigger than the expected minimal height.
What's more, if the row span of the first node is changed to 3, the result gridpane height (250) is smaller, which seems unreasonable to me because the size of the node does not change, while it is required to be fit into a smaller portion of the gridpane.
// pane.add(setGridGrow(getView(196, 112, 106, 112)), 0, 0, 1, 4);
pane.add(setGridGrow(getView(196, 112, 106, 112)), 0, 0, 1, 3);
What I expect is that the height of the gridpane does not exceeds the minimal height required for all it's children too much, and if the row span of the first node is changed from 4 to 3, the result gridpane height being bigger or unchanged, not smaller. Otherwise my UI layout would break unpredictably. Is there any way I can achieve these?
The full code is pasted below. I have ran it on JavaFX 8, 11 (JDK=11) and 16 (JDK=11), Windows 10, got consistent results.
package com.example.javafxlayoutdemo;
import javafx.application.Application;
import javafx.beans.binding.Bindings;
import javafx.scene.Node;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.layout.*;
import javafx.stage.Stage;
import java.util.Objects;
public class GridPaneLayoutDemo extends Application {
#Override
public void start(Stage primaryStage) throws Exception {
primaryStage.setScene(new Scene(getRoot()));
primaryStage.show();
}
private GridPane getRoot() {
GridPane pane = new GridPane();
// 3 columns, which percent widths are 40%, 27% and 33%, respectively
setColumnPercents(pane, 40, 27, 33);
// 4 rows, each percent height is 25%
setRowPercents(pane, 25, 25, 25, 25);
pane.setHgap(10);
pane.setVgap(10);
// getView() returns a StackPane
// The 4 arguments of getView() specifies the stack pane's
// prefWidth, prefHeight, minWidth and minHeight
pane.add(setGridGrow(getView(196, 112, 106, 112)), 0, 0, 1, 4);
pane.add(setGridGrow(getView(131, 104, 57, 104)), 1, 0, 1, 3);
pane.add(setGridGrow(getView(93, 26, 42, 26)), 1, 3);
pane.add(setGridGrow(getView(185, 72, 74, 72)), 2, 0, 1, 2);
pane.add(setGridGrow(getView(140, 76, 55, 76)), 2, 2, 1, 2);
return pane;
}
private static Region getView(double prefWidth, double prefHeight, double minWidth, double minHeight) {
Label sizeLabel = new Label();
StackPane view = new StackPane(sizeLabel);
sizeLabel.textProperty().bind(Bindings.createStringBinding(
() -> getDimensionString(view),
view.widthProperty(),
view.heightProperty()
));
setMetrics(view, prefWidth, prefHeight, minWidth, minHeight);
view.setStyle("-fx-background-color: #ddd");
return view;
}
private static String getDimensionString(Region view) {
return String.format("%.1f x %.1f", view.getWidth(), view.getHeight());
}
private static void setMetrics(Region view, double prefWidth, double prefHeight, double minWidth, double minHeight) {
view.setPrefSize(prefWidth, prefHeight);
view.setMinSize(minWidth, minHeight);
}
public static void main(String[] args) {
launch(args);
}
public static Node setGridGrow(Node node) {
Objects.requireNonNull(node);
GridPane.setHgrow(node, Priority.ALWAYS);
GridPane.setVgrow(node, Priority.ALWAYS);
return node;
}
public static RowConstraints getPercentRowConstraints(double percent) {
RowConstraints result = new RowConstraints();
result.setPercentHeight(percent);
return result;
}
public static void setRowPercents(GridPane pane, double... percents) {
pane.getRowConstraints().clear();
for (double percent : percents) {
pane.getRowConstraints().add(getPercentRowConstraints(percent));
}
}
public static ColumnConstraints getPercentColumnConstraints(double percent) {
ColumnConstraints result = new ColumnConstraints();
result.setPercentWidth(percent);
return result;
}
public static void setColumnPercents(GridPane pane, double... percents) {
pane.getColumnConstraints().clear();
for (double percent : percents) {
pane.getColumnConstraints().add(getPercentColumnConstraints(percent));
}
}
}
Update
As a workaround, I wrapped the second column and the third column into separate gridpanes and got what I expected, roughly.
GridPane pane = new GridPane();
setColumnPercents(pane, 40, 27, 33);
pane.setHgap(10);
pane.heightProperty().addListener(observable -> System.out.println(getDimensionString(pane)));
pane.widthProperty().addListener(observable -> System.out.println(getDimensionString(pane)));
pane.add(setGridGrow(getView(196, 112, 106, 112)), 0, 0);
GridPane secondColumn = new GridPane();
secondColumn.setVgap(10);
setRowPercents(secondColumn, 25, 25, 25, 25);
secondColumn.add(setGridGrow(getView(131, 104, 57, 104)), 0, 0, 1, 3);
secondColumn.add(setGridGrow(getView(93, 26, 42, 26)), 0, 3);
pane.add(setGridGrow(secondColumn), 1, 0);
GridPane thirdColumn = new GridPane();
setRowPercents(thirdColumn, 25, 25, 25, 25);
thirdColumn.setVgap(10);
thirdColumn.add(setGridGrow(getView(185, 72, 74, 72)), 0, 0, 1, 2);
thirdColumn.add(setGridGrow(getView(140, 76, 55, 76)), 0, 2, 1, 2);
pane.add(setGridGrow(thirdColumn), 2, 0);
However, this problem is not considered solved with a clean method and a clear mechanism.
I want print px to % how it possible ? i am create margin classes using loop px is working fine but when i set % than not working like margin-#{$side}: #{$space}%; any solution. i want out-put in %. Thanks in adavance
$spaceamounts: (5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 75, 100);
$top: (top);
#each $space in $spaceamounts {
#each $side in $top {
.margin-#{$side}-#{$space} {
margin-#{$side}: #{$space}px;
}
}
}
You can change your code like this to achieve desired result sassmeister
$spaceamounts: (5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 75, 100);
$top: (top);
#each $space in $spaceamounts {
#each $side in $top {
.margin-#{$side}-#{$space} {
margin-#{$side}: #{$space}+'%';
}
}
}
Edit - when using node-sass using gulp use unquote
$spaceamounts: (5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 75, 100);
$top: (top);
#each $space in $spaceamounts {
#each $side in $top {
.margin-#{$side}-#{$space} {
margin-#{$side}: unquote(#{$space})+'%';
}
}
}
I hope below code will be helpful for you
$spaceamounts: (5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 75, 100);
$top: (top);
$percent: ("%");
#each $space in $spaceamounts {
#each $side in $top {
.margin-#{$side}-#{$space} {
margin-#{$side}: #{$space}#{$percent};
}
}
}
OR you can use unquote("%") like
#each $space in $spaceamounts {
#each $side in $top {
.margin-#{$side}-#{$space} {
margin-#{$side}: #{$space}unquote("%");
}
}
}
I am receiving data via UART from an Arduino. I followed the documentation and I get the data as expected most of the time. Sometimes the read does not finish, gets a few zeroes then starts a new read with the rest of the data. This can be seen in the example output, all the data is there but split into 2 reads. I am only sending data once a second so there should be plenty time.
My Code:
private UartDeviceCallback mUartCallback = new UartDeviceCallback() {
#Override
public boolean onUartDeviceDataAvailable(UartDevice uart) {
// Read available data from the UART device
try {
readUartBuffer(uart);
} catch (IOException e) {
Log.w(TAG, "Unable to access UART device", e);
}
// Continue listening for more interrupts
return true;
}
private void readUartBuffer(UartDevice uart) throws IOException {
// Maximum amount of data to read at one time
final int maxCount = 20;
byte[] buffer = new byte[maxCount];
uart.read(buffer, maxCount);
Log.i(TAG, Arrays.toString(buffer));
}
#Override
public void onUartDeviceError(UartDevice uart, int error) {
Log.w(TAG, uart + ": Error event " + error);
}
};
Example output:
[50, 48, 54, 46, 52, 53, 32, 50, 49, 46, 55, 48, 32, 51, 51, 46, 51, 48, 32, 0]
[50, 48, 54, 46, 57, 51, 32, 50, 49, 46, 55, 48, 32, 51, 51, 46, 51, 48, 32, 0]
[50, 48, 54, 46, 48, 52, 32, 50, 49, 46, 55, 48, 32, 51, 51, 46, 51, 48, 32, 0]
[50, 48, 55, 46, 51, 52, 32, 50, 49, 46, 55, 48, 32, 51, 51, 46, 51, 48, 32, 0]
[50, 48, 54, 46, 53, 48, 32, 50, 49, 46, 55, 48, 32, 51, 51, 46, 51, 48, 32, 0]
[50, 48, 55, 46, 51, 54, 32, 50, 49, 46, 55, 48, 32, 51, 51, 46, 51, 48, 32, 0]
[50, 48, 54, 46, 57, 51, 32, 50, 49, 46, 55, 48, 32, 51, 51, 46, 0, 0, 0, 0]
[51, 48, 32, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
[50, 48, 55, 46, 51, 56, 32, 50, 49, 46, 55, 48, 32, 51, 51, 46, 0, 0, 0, 0]
[51, 48, 32, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
[50, 48, 54, 46, 52, 57, 32, 50, 49, 46, 55, 48, 32, 51, 51, 46, 51, 48, 32, 0]
I am quite sure the problem is the R Pi since I am looping back from the Arduino to my PC with no problems. I also found that unless I make maxCount the exact number of bytes I am sending, the problem is more prevalent. Whereby, the data comes in random packages but in the correct order. Am I wasting my time? Should I just use I2C?
"Should I just use I2C?" - no.
There is no problem with R Pi because "all the data is there". They (can be) split (or not, especially if it short) into 2 (or more) reads, because onUartDeviceDataAvailable() can be fired before ALL data available (but only part of it was available), so you should read them in a loop until you receive all of them. And, from your code: maxCount - Maximum amount of data to read at one time is not size for ALL data, it's max. size for one-time read. You code can be something like that (NB! it's just example, not complete solution):
private void readUartBuffer(UartDevice uart) throws IOException {
// Buffer for all data
final int maxSizeOfAllData = 30;
byte[] completaDataBuffer = new byte[maxSizeOfAllData];
// Buffer for one uart.read() call
final int maxCount = 20;
byte[] buffer = new byte[maxCount];
int bytesReadOnce; // number of actually available data
int totalBytesRead = 0;
// read all available data
while ((bytesReadOnce = uart.read(buffer, maxCount))) > 0) {
// add new data to "all data" buffer
for (int i = 0; i < bytesReadOnce; i++) {
completaDataBuffer[totalBytesRead + i] = buffer[i]
if (totalBytesRead + i == maxSizeOfAllData - 1) {
// process complete buffer here
...
totalBytesRead = 0;
break;
}
}
totalBytesRead += bytesReadOnce;
}
}
Also, take a look at NmeaGpsModule.java from Android Things user-space drivers and LoopbackActivity.java from Android Things samples.
I ended up adding an end character (0x36) and using a dataCompleteFlag:
private void readUartBuffer(UartDevice uart) throws IOException {
// Maximum amount of data to read at one time
final int maxCount = 32;
byte[] buffer = new byte[maxCount];
boolean dataCompleteFlag = false;
uart.read(buffer, maxCount);
Log.i(TAG, Arrays.toString(buffer));
if (!dataCompleteFlag) {
for (int i = 0; i < maxCount; i++) {
if (buffer[i] == 36) {
dataCompleteFlag = true;
dataCount = 0;
}
else if(dataCount > maxCount) {
dataCount = 0;
}
else if(buffer[i] != 0) {
finalDataBuffer[dataCount] = buffer[i];
dataCount++;
}
}
}
if (dataCompleteFlag) {
//process data
}
}
#Override
public void onUartDeviceError(UartDevice uart, int error) {
Log.w(TAG, uart + ": Error event " + error);
}
};
I'm working with Fabric to create Radial-gradient like this
It can create very easily by css. Like this
<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
width: 100px;
height: 100px;
border-radius: 50%;
background: radial-gradient(ellipse at center, #1e5799 0%,rgba(255, 255, 255, 0) 100%);
}
</style>
</head>
<body>
<h3>Radial Gradient - Evenly Spaced Color Stops</h3>
<div id="grad1"></div>
<p><strong>Note:</strong> Internet Explorer 9 and earlier versions do not support gradients.</p>
</body>
</html>
But seem fabricJS do not support it. It only support gradient from side to side (?)
Does anyone work with this before. Please give me support.
Thank you
Yes
Some example: http://jsfiddle.net/fabricjs/58y8b/
// initialize fabric canvas and assign to global windows object for debug
var canvas = window._canvas = new fabric.Canvas('c');
// Do some initializing stuff
fabric.Object.prototype.set({
transparentCorners: false,
cornerColor: 'rgba(102,153,255,0.5)',
cornerSize: 12,
padding: 5
});
// Initialze the example
var rect1 = new fabric.Rect({
left: 100,
top: 100,
width: 100,
height: 100,
fill: '#ffda4f'
});
var rect2 = new fabric.Rect({
left: 250,
top: 100,
width: 100,
height: 100,
fill: 'rgb(111,154,211)'
});
var rect3 = new fabric.Rect({
left: 400,
top: 100,
width: 100,
height: 100,
fill: 'rgb(166,111,213)'
});
var rect4 = new fabric.Rect({
left: 100,
top: 400,
width: 100,
height: 100,
fill: '#ffda4f'
});
var rect5 = new fabric.Rect({
left: 250,
top: 400,
width: 100,
height: 100,
fill: 'rgb(111,154,211)'
});
var rect6 = new fabric.Rect({
left: 400,
top: 400,
width: 100,
height: 100,
fill: 'rgb(166,111,213)'
});
canvas.add(rect1, rect2, rect3, rect4, rect5, rect6);
/**
* setGradient linear gradients example
*/
// horizontal linear gradient
rect1.setGradient('fill', {
type: 'linear',
x1: -rect1.width / 2,
y1: 0,
x2: rect1.width / 2,
y2: 0,
colorStops: {
0: '#ffe47b',
1: 'rgb(111,154,211)'
}
});
// vertical linear gradient
rect2.setGradient('fill', {
type: 'linear',
x1: 0,
y1: -rect2.height / 2,
x2: 0,
y2: rect2.height / 2,
colorStops: {
0: '#ff4040',
1: '#e6399b'
}
});
// diagonal linear gradient
rect3.setGradient('fill', {
type: 'linear',
x1: -rect3.width / 2,
y1: -rect3.height / 2,
x2: rect3.width / 2,
y2: rect3.height / 2,
colorStops: {
0: 'rgb(166,111,213)',
0.5: 'rgba(106, 72, 215, 0.5)',
1: '#200772'
}
});
/**
* setGradient radial gradients example
*/
// radial gradient
rect4.setGradient('fill', {
type: 'radial',
r1: rect4.width / 2,
r2: 10,
x1: 0,
y1: 0,
x2: 0,
y2: 0,
colorStops: {
0: '#FF4F4F',
1: 'rgb(255, 239, 64)'
}
});
// radial gradient
rect5.setGradient('fill', {
type: 'radial',
r1: rect5.width / 2,
r2: 10,
x1: 0,
y1: 0,
x2: rect4.width / 4,
y2: rect4.height / 4,
colorStops: {
0: '#ffe47b',
0.5: 'rgb(111,154,211)',
1: 'rgb(166,111,213)'
}
});
// radial gradient
rect6.setGradient('fill', {
type: 'radial',
r1: 50,
r2: 80,
x1: 45,
y1: 45,
x2: 52,
y2: 50,
colorStops: {
0: 'rgb(155, 237, 0)',
1: 'rgba(0, 164, 128,0.4)'
}
});
canvas.renderAll();
You can do it like this:
let cir = new fabric.Circle({
left: 100,
top: 100,
radius: 30,
fill: 'rgba(0, 0, 0, 0)'
})
cir.setGradient('fill', {
type: 'radial',
r1: 30,
r2: 2,
x1: 30,
y1: 30,
x2: 30,
y2: 30,
colorStops: {
1: 'rgb(113,182,203)',
0: 'rgba(0, 0, 0, 0)'
}
});
fabricCanvas.add(cir);
fabricCanvas.renderAll();
http://jsfiddle.net/Kyashar/z6428pta/
I'm just testing the loop in a small dataset. In this case, the loop will be repeated only one time until my condition (both title and url having same lenght) mets.
linhas_title <- c(5, 19, 48, 90, 135, 179, 424, 479, 532)
linhas_url <- c(14, 43, 85, 130, 175, 474, 527, 566)
for(i in 1:(length(linhas_title)-1)){
print(paste("Titulo:",i+1, "e", "Url: ", i))
if(linhas_title[i+1] - linhas_url[i] < 0) {
print(paste("Titulo", i, "excluido"))
linhas_title <- linhas_title[-i]
break
} else print(paste("Titulos e url pareados!"))
}
I did not want to break the loop, but restart it. I tried while and repeat functions but without success.
If I'm reading correctly that you want to restart the entire loop when that if statement leads to break, I think you'll need to create a "wrapper":
linhas_title <- c(5, 19, 48, 90, 135, 179, 424, 479, 532)
linhas_url <- c(14, 43, 85, 130, 175, 474, 527, 566)
runAgain = TRUE
while(runAgain)
{
runAgain = FALSE
for(i in 1:(length(linhas_title)-1))
{
print(paste("Titulo:",i+1, "e", "Url: ", i))
if(linhas_title[i+1] - linhas_url[i] < 0)
{
print(paste("Titulo", i, "excluido"))
linhas_title <- linhas_title[-i]
runAgain = TRUE
break
}
else
print(paste("Titulos e url pareados!"))
}
}