We Keep Coding

Pane Shape Modification

Ok so to make a long story short I'm trying to create a sort of chat/message system and need a small bit of assistance. I'm trying to create an arrow on my container as the one shown in the image below. The image is taken off of ControlsFX and from their PopOver window. I CANNOT use their popover widget because it behaves a little wonky with what I'm using it for.
I went ahead and created my own little chat window popup that positions itself over the parent object that I define but I would really like it to have an arrow pointing to the object. The arrow will also ALWAYS face down and should be in the lower left-hand corner of the popup.
It should also be noted that the popup is NOT a window its a simple VBox that populates with lines of text. I could of course wrap that in a Pane if its needed. Can anyone come up with the proper way to create this arrow? I have my VBox background as a gradient as well so the arrow can't just be like plopped on the bottom through getChildren().add with the "same color" because then the gradient would be off. It has to be (somehow) a part of the container.
===========================================================================
EDIT:
Alright so I spent the greater part of today learning SVG Pathing which isn't too awful complicated but it's slightly tedious. The path I ended up going with is:
"M30 0 h100 a6,6 0 0,1 6,6 v50 a6,6 0 0,1 -6,6 h-88 L38 68 L34 62 h-4 a6,6 0
0,1 -6,-6 v-50 a6,6 0 0,1 6,-6 z"
Now the only problem with this is the arrow tail height grows with the size of the pane. For instance if I have a LOT of text in the box the pane grows in height (of course) and the arrow gets longer too. This behavior isn't a total deal breaker but it's not really what I had intended. I expected the capital Ls in the pathing to make sure that the points of the arrow stay put no matter what but it didn't work. Any thoughts on this?

There are a number of ways to achieve the effect which you wish.
One way is to use a CSS -fx-shape attribute specification on a region. See the JavaFX CSS reference for info on this setting and how to use it.
The sample below uses inline styles, but for a more maintainable and substantial application use an external CSS stylesheet.
import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.effect.DropShadow;
import javafx.scene.layout.StackPane;
import javafx.scene.paint.Color;
import javafx.stage.Stage;
public class Bubble extends Application {
private static final String SQUARE_BUBBLE =
"M24 1h-24v16.981h4v5.019l7-5.019h13z";
// source for svg path string: https://iconmonstr.com/speech-bubble-7/
private static final String ROUND_BUBBLE =
"M12 1c-6.628 0-12 4.573-12 10.213 0 2.39.932 4.591 2.427 6.164l-2.427 5.623 7.563-2.26c9.495 2.598 16.437-3.251 16.437-9.527 0-5.64-5.372-10.213-12-10.213z";
#Override
public void start(Stage stage) {
Label label = new Label("hello, world");
label.setStyle("-fx-font-size: 16px;");
StackPane bubble = new StackPane(label);
bubble.setPadding(new Insets(20));
bubble.setStyle(
"-fx-background-color: lightblue; " +
"-fx-border-color: navy; -fx-border-width: 2px; " +
"-fx-shape: \"" + ROUND_BUBBLE + "\";"
);
bubble.setEffect(new DropShadow(10, 5, 5, Color.MIDNIGHTBLUE));
StackPane layout = new StackPane(bubble);
layout.setPadding(new Insets(20));
stage.setScene(new Scene(layout));
stage.show();
}
public static void main(String[] args) {
launch(args);
}
}
I realize that the bubble shape demoed in this application isn't exactly the shape which you want but I don't understand from your description what the shape you want is. There are numerous bubble shapes already created at iconmonstr.com, you can just use its interface to search for speech bubbles and select the shape you want, or you can define your own svg path for your custom shape if you have the tools (e.g. Inkscape) and skill for that. To extract the svg path from an existing svg file, open up the svg file, hope that it is encoded in a compact path string format, and if it is, just copy and paste the path part from the svg into your JavaFX css file.
Another way to do this would be to programmatically construct a path which you would layer with the content by placing both in a StackPane.

JFreeChart Smudging of lines in Candlestick Chart

This has reference to JFreeChart rendering of candlestick charts. Below is the code fragment that generates a candle stick chart with JFreeChart.
This code has been tested and has been working for a long time. However, the version of JFreeChart was changed from 1.0.17 to 1.0.19 and the candlestick chart generated with 1.0.19 is showing smudging of the candle objects/lines. When I changed the library back to 1.0.17, the candlestick objects/lines once again becomes clear.
The images with both the libraries are provided below.
I have tried to find the cause of this and have been unsuccessful as yet. Now, the question is, since the code is tested and possibly does not have any error (at least what I can figure or am I missing something?), is the issue with the library? Have anyone faced this problem and has an work around
I shall be rather grateful, if someone has found the reason/solution to this and shared the same.
Please use MS Paint to view the images.
try{
chart=ChartFactory.createCandlestickChart("Candlestick Chart", "Date", "EOD Closing Price", (OHLCDataset)dataset, true);
plot=(XYPlot)chart.getPlot();
CandlestickRenderer renderer=new Chart_CandlestickRenderer();//(CandlestickRenderer)plot.getRenderer();
renderer.setSeriesPaint(0, Color.BLACK);
renderer.setUpPaint(Color.WHITE);
renderer.setDownPaint(Color.BLACK);
//HighLowItemLabelGenerator candleTooltipGenerator=new HighLowItemLabelGenerator(new SimpleDateFormat("dd-MMM-yyyy"), new DecimalFormat());
XYToolTipGenerator candleTooltipGenerator=Chart_TooltipProvider.getOHLCTooltipGenerator();
renderer.setBaseToolTipGenerator(candleTooltipGenerator);
plot.setRenderer(0,renderer);
//Organize the data to draw Fibbonacci retracements with highs and lows
DefaultOHLCDataset ohlcDataset=(DefaultOHLCDataset)dataset;
int dataCount=ohlcDataset.getItemCount(0);
data=new double[dataCount*2];//for each data item we shall get 2 values, high and low
for(int i=0;i<dataCount;i++){
//for each i 2 data values need to be put into the array and adjust the index accordingly
data[i*2]=ohlcDataset.getHighValue(0, i);
data[i*2+1]=ohlcDataset.getLowValue(0, i);
}//for closing
//If there is only the candlestick to be drawn, return, as the job has been done, draw the Fibonnaci and return
if(indicators.length==1){
this.drawFibonnaciRetracement(data, plot);
retVal=true;
return retVal;
}//if closing
}catch(Exception e){e.printStackTrace();return retVal;}

Try setting setAntiAlias of the JFreeChart to false.
JFreeChart chart = ChartFactory.createCandlestickChart(...);
chart.setAntiAlias(false);

Set background image the same size as the window/screen in Java app

I would like to set a background image the same size as my window/screen.
I would prefer to do this in my CSS file, but I have NOT FOUND a way to accomplish this.
Must I do this in a javafx class file?
Thanks for every help ;)

You will have to determine the screen size in java code as demonstrated in JavaFX window sizing, there is no way to determine it in CSS.
For an Image, in your java code you can use something as
ImageView imageView = new ImageView(image);
imageView.setFitWidth(Screen.getPrimary().getVisualBounds().getWidth());
imageView.setFitHeight(Screen.getPrimary().getVisualBounds().getHeight());
If you want to set the background image to a scene then:
import javafx.application.Application;
import javafx.geometry.Rectangle2D;
import javafx.scene.Scene;
import javafx.scene.layout.StackPane;
import javafx.stage.*;
public class ScreenSizeImage extends Application {
#Override public void start(final Stage stage) {
// uncomment if you want the stage full screen.
//stage.setFullScreen(true);
Screen screen = Screen.getPrimary();
Rectangle2D bounds = screen.getVisualBounds();
stage.setX(bounds.getMinX());
stage.setY(bounds.getMinY());
stage.setWidth(bounds.getWidth());
stage.setHeight(bounds.getHeight());
StackPane root = new StackPane();
root.setStyle(
"-fx-background-image: url(" +
"'http://icons.iconarchive.com/icons/iconka/meow/256/cat-box-icon.png'" +
"); " +
"-fx-background-size: cover;"
);
stage.setScene(new Scene(root));
stage.show();
}
public static void main(String[] args) { launch(args); }
}
Of course, rather than the inline setStyle call you are best off using a separate CSS stylesheet like below:
.root{
-fx-background-image: url("background_image.jpg");
-fx-background-size: cover;
}

Good question...
Firstly, I think you mean "the size of your app window" in your question. Obviously, you can't have a background image that is larger than your screen if you app window is smaller.
Secondly, here's a snippet from the JavaFX CSS Reference Guide:
http://download.java.net/jdk9/jfxdocs/javafx/scene/doc-files/cssref.html
"...the background and border mechanisms are patterned after the CSS 3 draft backgrounds and borders module. See [4] for a detailed description."
...
[4] CSS Backgrounds and Borders Module Level 3: http://www.w3.org/TR/css3-background/
You can use the JavaFX vendor specific CSS property -fx-background-size with the stretch value as long as your aspect ratio is correct/your dimensions are proportional.
You might also get it to work by trying a combination of auto for one dimension and 100% for another... and some combination of contain... depending on if you can live with a cropped image.
-fx-background-size<bg-size> [ , <bg-size> ]*
<bg-size> = [ <size> | auto ]{1,2} | cover | contain | stretch
A series of values separated by commas. Each bg-size item in the series applies to the corresponding image in the background-image series.
You can get more detail at http://www.w3.org/TR/css3-background/#the-background-image

How to render a 3D alien imported from Blender?

I'm getting mixed results trying to render a basic alien that was done in Blender:
I export in to Ogre 3D and load it in Eclipse:
Then when I load it in my code and try to render it the material won't render:
Could you tell me what I must do to achieve the full alien in my scene? The code I use in Jmonkeyengine is
Spatial model3 = assetManager
.loadModel("objects/creatures/alien/alien.mesh.xml");
model3.scale(0.3f, 0.3f, 0.3f);
model3.setLocalTranslation(-40.0f, 3.5f, -20.0f);
rootNode.attachChild(model3);
Update
I've got material files like these from the export:
dev#dev-OptiPlex-745:~$ ls workspace/DungeonWorld2/assets/objects/creatures/alien/
alien.mesh Material.002.material Material.005.material
alien.mesh.xml Material.003.material
alien.skeleton.xml Material.004.material
dev#dev-OptiPlex-745:~$
This material code actually produces a material in the scene but it's not the one from blender:
model3.setMaterial( new Material(assetManager,
"Common/MatDefs/Misc/Unshaded.j3md") );
Result:
However, loading a 3D model of an alephant without defining the material does work:
Spatial elephant = (Spatial) assetManager.loadModel("Models/Elephant/Elephant.mesh.xml");
float scale = 0.05f;
elephant.scale(scale,scale,scale);
elephant.setLocalTranslation(-50.0f, 3.5f, -20.0f);
control = elephant.getControl(AnimControl.class);
control.addListener(this);
channel = control.createChannel();
for (String anim : control.getAnimationNames())
System.out.println("elephant can:"+anim);
The above code correctly renders the elephant so why can't I export a mesh like that for the alien? I tried to explcitly load the material but it's not working for me:
Spatial model3 = assetManager
.loadModel("objects/creatures/alien/alien.mesh.xml");
model3.scale(0.3f, 0.3f, 0.3f);
model3.setLocalTranslation(-40.0f, 3.5f, -20.0f);
model3.setMaterial( new Material(assetManager,
"objects/creatures/alien/alien.material") );
rootNode.attachChild(model3);
The above generates an exception and I don't really know what material file it is that I'm loading and what do to with the two or three other material files that the export generated:
java.lang.ClassCastException: com.jme3.material.MaterialList cannot be cast to com.jme3.material.MaterialDef
at com.jme3.material.Material.<init>(Material.java:116)
at adventure.Main.simpleInitApp(Main.java:309)
at com.jme3.app.SimpleApplication.initialize(SimpleApplication.java:225)
at com.jme3.system.lwjgl.LwjglAbstractDisplay.initInThread(LwjglAbstractDisplay.java:129)
at com.jme3.system.lwjgl.LwjglAbstractDisplay.run(LwjglAbstractDisplay.java:205)
at java.lang.Thread.run(Thread.java:679)
Update
Loading other models this way is working:
BlenderKey blenderKey = new BlenderKey(
"objects/creatures/troll/troll.mesh.xml");
Spatial troll = (Spatial) assetManager.loadModel(blenderKey);
troll.setLocalTranslation(new Vector3f(-145, 15, -10));
rootNode.attachChild(troll);
BlenderKey blenderKey2 = new BlenderKey(
"objects/creatures/spaceman/man.mesh.xml");
Spatial man = (Spatial) assetManager.loadModel(blenderKey2);
man.setLocalTranslation(new Vector3f(-140, 15, -10));
rootNode.attachChild(man);
I get the models inside my game and they look alreight, both the troll and the spaceman that both originally were .blend files.
Now it's much better when I did it over and it is loading the material. The only problem with the alien left now is the holes in the head that was also answered here.
BlenderKey blenderKey = new BlenderKey(
"objects/creatures/alien/alien.mesh.xml");
Spatial alien = (Spatial) assetManager.loadModel(blenderKey);
alien.setLocalTranslation(new Vector3f(-145, 15, -10));
rootNode.attachChild(alien);

You didn't write anything about your material - did you write one and used it correctly? The problem you get seems to be the lack of material to me.
In general you'll need some *.material file and probably some textures (if you used them in Blender). For the beginning you can use one of the materials that come with Ogre, you'll just need to add:
model3.setMaterialName( "Examples/Rockwall" );
Then look if it changes anything. If you still get the problem you can look into 'Ogre.log' file - it's always worth checking because all the errors goes there.
I also see the second problem here - you render the object as 'one sided' while blender probably render is as two-sided mesh, so you get the holes on the head. You can select in the material to be two sided, but it's better (and faster during rendering) to just create your models without the holes :).

achartengine graph not painting correctly in RelativeLayout

I have an issue with an achartengine graph - as in this screenshot:
It looks like the X axis is given too much bottom padding, and the values are duplicated (one representation of each value is in the graph proper, and reacts properly to panning, while the other is located at the bottom of the graph view, but can't be manipulated in any way).
Here's the code used to create the graph:
protected void onCreate(Bundle savedInstanceState) {
...
gDataset = new XYMultipleSeriesDataset();
gRenderer = new XYMultipleSeriesRenderer();
gRenderer.setApplyBackgroundColor(true);
gRenderer.setPointSize(10);
chart = new TimeBarChart(gDataset, gRenderer);
graphView = new GraphicalView(this, chart);
graphHolder.addView(graphView);
//Mode is just an internal enum
chart.setDateFormat(curMode == Mode.DAY ? "HH:mm dd.MM.yyyy" : "dd.MM.yyyy");
....
}
And to populate it:
...
//some DB stuff goes here, result is the cursor
curSeries = new XYSeries("");
gDataset.addSeries(curSeries);
XYSeriesRenderer renderer = new XYSeriesRenderer();
renderer.setColor(Color.RED);
renderer.setPointStyle(PointStyle.POINT);
gRenderer.addSeriesRenderer(renderer);
while (!result.isAfterLast()) {
.....
curSeries.add(timestamp,value);
....
}
.....
graphView.invalidate();
graphView.repaint();
And here's the graph holder's view definition in the layout XML (main container is RelativeLayout of course) :
<LinearLayout
android:id="#+id/graphHolder"
android:layout_width="fill_parent"
android:layout_height="200dp"
android:layout_alignParentTop="true"
android:minHeight="200dp">
</LinearLayout>
A couple of things:
I'm using the 0.7 version.
The TimeBarChart class is nothing else than a TimeChart with the simple change to extend BarChart instead. The code is copied from the 0.7 revision. Regardless, I was using ChartFactory#getTimeChartView() previously and the result was the same - so this isn't the cause of the problem.
I've tried checking whether the height layout parameter causes the problem, but that wasn't it as well.
graphHolder is injected by RoboGuice.
the problem was encountered in the 2.3 emulator.
Obviously, I'm doing something wrong, but I'm at a loss what. Any help is greatly appreciated.
PS. I've tried to post it on the achartengine group, but it looks like the mods are hibernating for the winter ;).

I finally had time to reinvestigate this, and figured it out.
The gist:
The bars on the bottom are the legend. I had a bug in my code that caused it to create a series for each datapoint, hence the multiple "bars", in reality legend graphics. The series had no names, which added to the confusion.
Fixing the bug and adding setShowLegend(false) dealed with the issue.
I've discovered this while evaluating AndroidPlot (BTW, I recommend it as an alternative to achartengine, as graphs can be defined in XML, and can be way more liberally customized graphically than the screenshots suggest).
I somehow failed to notice the legend in the achartengine screenshots, but I recognized them in AndroidPlot. And yes, I do feel quite stupid now :).