I have used Control-P5 library for drawing the text label
void setup(){
size(1400,800);
cp5 = new ControlP5(this);
myTextlabelB = new Textlabel(cp5,"Hello world",100,100,400,200);
}
void draw(){
myTextlabelB.draw(this);
if(mousePressed){
myTextlabelB.hide();
// I want to hide the label here, but the hide function doesn't work
}
}
There is some bug with hiding Textlable but it is working with Label class so you just need to get the label part and then hide it:
myTextlabelB.get().hide();
Also it is important to redraw your background at the beginning of the draw() function
background(0);
Related
I'm attempting to create something like a minimap with JavaFX, i.e. a (darkened) background image with some circles layered on top of it. Some of these circles need to be able to shed light on the background, revealing a small part of it. The following figure shows what I am aiming at.
I have worked my way forward using this SO solution, but at the moment, I am stuck because it seems that you can only set one instance of javafx.scene.effect.Lighting on the underlying StackPane.
I would really like to keep this as simple as possible and ideally only employ JavaFX. Any help is greatly appreciated :)
I recommend adding together Circles filled with a RadialGradient on a Pane with black background using BlendMode.LIGHTEN and combining this with a ImageView containing the "map" using BlendMode.MULTIPLY:
private Circle circle;
// gradient with yellow in the center and black on the border
private final static RadialGradient GRADIENT = new RadialGradient(0, 0, 0.5, 0.5, 0.5, true, CycleMethod.NO_CYCLE, new Stop(0, Color.YELLOW), new Stop(1, Color.BLACK));
private void newCircle(Pane container) {
circle = new Circle(50, GRADIENT);
circle.setBlendMode(BlendMode.LIGHTEN);
circle.setManaged(false);
container.getChildren().add(circle);
}
private void setCirclePosition(MouseEvent event) {
circle.setCenterX(event.getX());
circle.setCenterY(event.getY());
}
#Override
public void start(Stage primaryStage) {
Image image = new Image(imageURL);
ImageView imageView = new ImageView(image);
Pane mask = new Pane();
mask.setBlendMode(BlendMode.MULTIPLY);
mask.setStyle("-fx-background-color: black;");
mask.setOnMouseMoved(this::setCirclePosition); // move cricle with mouse
newCircle(mask);
// create new circle on mouse click
mask.setOnMouseClicked(evt -> {
newCircle(mask);
setCirclePosition(evt);
});
StackPane root = new StackPane(imageView, mask);
Scene scene = new Scene(root);
primaryStage.setScene(scene);
primaryStage.show();
}
I am using processing 3, and trying to implement an interactive map via gicentre GeoMap library. I have got the U.S. map shown and the hovering feature work i.e. highlight the hovering state. I am wondering is there any way I can zoom into the state in this GeoMap library. Maybe a mouseClick or a mouseMove event to trigger this function. I am not sure how to redraw the map to make it zoom into the selected state. Here is my starting code:
import org.gicentre.geomap.*;
GeoMap geoMap;
int id = -1;
void setup()
{
size(800, 400);
geoMap = new GeoMap(this); // Create the geoMap object.
geoMap.readFile("usContinental"); // Read shapefile.
}
void draw()
{
background(202, 226, 245); // Ocean colour
stroke(0,40); // Boundary colour
fill(206,173,146); // Land colour
//if (id == -1) {
geoMap.draw(); // Draw the entire map.
//} else {
// geoMap.draw(id);
//}
// Find the country at mouse position and draw in different color.
id = geoMap.getID(mouseX, mouseY);
if (id != -1)
{
fill(180, 120, 120); // Highlighted land colour.
geoMap.draw(id);
}
}
Any idea? Thanks!
Questions like these are best answered by looking at the docs for the library. Here are the docs for the giCentre geoMap library.
According to that, this library basically just shows shape files, without any fancy logic for zooming the map. You could implement this yourself using the scale() function or the camera functions. But you might be best off just finding a library that supports changing the zoom out of the box.
I am trying to change the height of a progress bar by using a custom renderer like here
The problem is, when the screen is rotated, the progress bar goes back to normal. Can someone help me?
I am using the same solution:
public override void LayoutSubviews()
{
base.LayoutSubviews();
var X = 1.0f;
var Y = 10.0f;
CGAffineTransform transform = CGAffineTransform.MakeScale(X, Y);
this.Control.Transform = transform;
}
I thnk you need to call the command SetNeedsLayout as discussed here . Of course you can also disable orientation change.
public override void OnConfigurationChanged (Android.Content.Res.Configuration newConfig)
{
base.OnConfigurationChanged (newConfig);
SetNeedsLayout ();
}
It's really basic but for example, I draw a rectangle and press somewhere (x,y), nothing happens but when I press again somewhere else(x2, y2), that rectangle will move to the first place I press(x, y). So wherever I press, the rectangle will move to the last place I press.
I have it so that the rect appears wherever I press but not the previous location.
void setup(){
background(234);
size(400, 400);
}
void draw(){
}
void mousePressed(){
background(234);
rect(mouseX, mouseY, 20, 20);
}
All you need to do is create your own variables, store the previously clicked position in that, and then use that to draw your rectangle.
float targetX;
float targetY;
void setup(){
background(234);
size(400, 400);
}
void draw(){
}
void mousePressed(){
background(234);
rect(targetX, targetY, 20, 20);
targetX = mouseX;
targetY = mouseY;
}
Notice that you'll have to decide what you want them to be the first time you click, since you don't have a previously clicked position yet. The default is 0, 0 in the upper-left corner.
int displayX, displayY;
final int screenX=200, screenY=200; // display size
void setup() {
background(255);
displayX=displayWidth;
displayY=displayHeight;
size(screenX, screenY);
}
void mouseClicked() {
if (width==screenX) {
frame.setSize(displayX, displayY);
setSize(displayX, displayY);
println(width +" "+height);
} else {
frame.setSize(screenX, screenY);
setSize(screenX, screenY);
println(width +" "+height);
}
}
void draw() {
fill(33, 33, 33);
rect(0, 0, screenX, screenY);
fill(77, 77, 77);
rect(0, 0, screenX-20, screenY-20);
}
full code
press b to start beta - left mouse click change the size
I want a small size on startup (screenX).
After a click it grows to the display size.
After another click it gets the small size again.
But after changing the size the sizes aren't correct.
I see that on the border. I've everywhere a border around my "star". But this is only on top and left correct.
I also tested it with a lineal.
Processing 2.2.1
Windows 7
Step one is to check out the Processing reference.
From the size() documentation:
The size() function can only be used once inside a sketch, and it cannot be used for resizing.
So, you can't use the size() function the way you're trying to use it. Instead, you can access the frame variable directly:
frame.setSize(200, 200);
You might toggle the frame's size like this:
boolean big = false;
void setup(){
size(200, 200);
}
void mouseClicked(){
if(big){
frame.setSize(200, 200); //set the window size
big = false;
}
else{
frame.setSize(400, 400); //set the window size
big = true;
}
}
void draw(){
background(0);
ellipse(mouseX, mouseY, 10, 10);
}
However, if you run that program, you might notice something like this:
The window has increased size, but the actual canvas where things get drawn hasn't. So you get a gray area, and mouse events aren't detected correctly. To fix that problem, you have to set the size of the canvas as well, by calling the setSize() function:
boolean big = false;
void setup(){
size(200, 200);
}
void mouseClicked(){
if(big){
frame.setSize(200, 200); //set the window size
setSize(200, 200); //set the canvas size
big = false;
}
else{
frame.setSize(400, 400); //set the window size
setSize(400, 400); //set the canvas size
big = true;
}
}
void draw(){
background(0);
ellipse(mouseX, mouseY, 10, 10);
}