How can I make window smaller than 100 pixels - processing

I try to make a status bar on the bottom of my screen, but the window can not be made less than 100 pixels. I'm working on Processing 3.0.1.
I use the following code
void setup() {
surface.setResizable(true);
surface.setSize(300, 20);
surface.setLocation(displayWidth-300, displayHeight-50);
}
void draw() {
background(128);
}
any ideas??
Thank you all in advance
J!

If you remove the surface.setResizable(true); statement, you can see the canvas is 300x20, but the window is not:
Processing 3.0 has a lot of changes including refactoring the windowing code, which previously relied on Java's AWT package.
Going through the current source code, you can see:
static public final int MIN_WINDOW_WIDTH = 128;
static public final int MIN_WINDOW_HEIGHT = 128;
defined in PSurface.java line 34
and used through out PSurfaceAWT.java to ensure these minimum window dimensions.
Trying to access the Surface's canvas (println(surface.getNative());) I can it's listed as processing.awt.PSurfaceAWT$SmoothCanvas and I can see a SmoothCanvas class with a getFrame() method which looks promising, but that doesn't seem to be accessible (even though it's a public method of a public class).
So by default, at this time, I'd say resizing the window to be smaller than 128x128 in Processing 3.x is a no go.
If Processing 3.x and smaller window is a must it might be possible to tweak the source code yourself and recompile the core library, but this may bite you later on when having multiple Processing project with multiple versions of the Processing core library. I wouldn't recommend tinkering with the core library normally.
If you can use Processing 2.x for your project, making the window size smaller than 100 pixels is achievable:
import java.awt.Dimension;
int w = 300;
int h = 20;
int appBarHeight = 23;//this is on OSX, on Windows/Linux this may be different
void setup() {
size(w, h);
frame.setResizable(true);
}
void draw() {
if (frame.getHeight() != h+appBarHeight){//wait for Processing to finish setting up it's window dimensions (including minimum window dimensions)
frame.setSize(w,h+appBarHeight);//set your dimensions
}
background(128);
}

Related

How can put image back of paints which i drew?

The thing what I want to make is similar to paint program.
The problem is when I draw some lines(Not just lines. Whole things I drew are included in this case.), those lines only drawn back of a image I put in before I draw that.
At first, I thought it was just problem of code's order. But it wasn't.
I just want draw some lines on the image like paint program.
Like this:enter image description here
You can paint into a separate "layer" using PGraphics.
Once you initialise an instance you can use the typical drawing methods within beginDraw() / endDraw() (as the reference example suggests).
The only thing left is to save the final image which is simple enough using save()
Here's a modified example of Examples > Basics > Image > LoadDisplay which uses a separate PGraphics instance to draw into as the mouse is dragged and saves the final image when the s key is pressed:
/**
* Based on Examples > Basics > Image > Load and Display
*
* Images can be loaded and displayed to the screen at their actual size
* or any other size.
*/
PImage img; // Declare variable "a" of type PImage
// reference to layer to draw into
PGraphics paintLayer;
void setup() {
size(640, 360);
// The image file must be in the data folder of the current sketch
// to load successfully
img = loadImage("moonwalk.jpg"); // Load the image into the program
// create a separate layer to draw into
paintLayer = createGraphics(width,height);
}
void draw() {
// Displays the image at its actual size at point (0,0)
image(img, 0, 0);
// Displays the paint layer
image(paintLayer,0,0);
}
void mouseDragged(){
// use drawing commands between beginDraw() / endDraw() calls
paintLayer.beginDraw();
paintLayer.line(mouseX,mouseY,pmouseX,pmouseY);
paintLayer.endDraw();
}
void keyPressed(){
if(key == 's'){
saveFrame("annotated-image.png");
}
}

Scrollable drawing in Gtk::Layout

I'd like to use custom drawing within a Gtk::Layout. That is, I'm using the C++ bindings for Gtk3 (GTKmm 3.14.0), and I have embedded widgets placed on the "canvas", on top of my custom drawing. Basically this works just fine.
Now the problem is related to scrolling. Gtk::Layout can be placed into a Gtk::ScrolledWindow, and when the scrollable area is set to something larger than the visible allocation, scrollbars will show up. Unfortunately, those scrollbars influence only the placement of the embedded widgets, while my custom drawing remains at a fixed position within the window.
This means, both the Gtk::Allocation and the cairo context seem to be related to precisely the visible area, not to the extended virtual "canvas". I could work around that problem by accessing the adjustments from the scrollbars and then translate the cairo context accordingly...
My question is:
is this the proper way to handle such a scrollable drawing?
or is there some way to let the framework do this work for me?
Judging from the source code of gtk+3.0-3.14.5 (which is in Debian/Stable), the Gtk::Layout does nothing to adjust the drawing context. It just invokes the inherited draw() function from GtkWidget. On the other hand, Gtk::Layout is a full-blown container (it inherits from Gtk::Container), and it is scrollable, which together means that it handles gtk_layout_size_allocate() by passing a suitable allocation (screen area) to each of the embedded child widgets -- and in this respect it does handle the moving and clipping related to scrolling the virtual canvas (calls gdk_window_move_resize()).
Thus, if we want to combine the embedded child widgets with custom drawing, we need to bridge this discrepancy manually. This is quite easy actually: all we need to do is to look into the Gtk::Adjusments corresponding to the scrollbars. Because the value of these adjusments is precisely the upper left corner of the visible viewport. Now, if we want our custom drawing to use absolute canvas coordinates, we just have to translate() the given Cairo context. Beware: it is important to save() the state and to restore() it to pristine state when done, otherwise those translations will accumulate.
Here is some example code to demonstrate this custom drawing
we derive a custom container class called Canvas from Gtk::Layout
we override the on_draw() handler, because only there all size allocation to embedded child widgets have been processed
Layering: child widgets are always drawn in the order they have been added to the Gtk::Layout container. Any custom drawing done before invoking the inherited on_draw() function will be below those widgets; any drawing done afterwards will happen on top of them.
if necessary, we can use the foreach(callback) mechanism to visit all child widgets to find out their current position and extension
void
Canvas::determineExtension()
{
if (not recalcExtension_) return;
uint extH=20, extV=20;
Gtk::Container::ForeachSlot callback
= [&](Gtk::Widget& chld)
{
auto alloc = chld.get_allocation();
uint x = alloc.get_x();
uint y = alloc.get_y();
x += alloc.get_width();
y += alloc.get_height();
extH = max (extH, x);
extV = max (extV, y);
};
foreach(callback);
recalcExtension_ = false;
set_size (extH, extV); // define extension of the virtual canvas
}
bool
Canvas::on_draw(Cairo::RefPtr<Cairo::Context> const& cox)
{
if (shallDraw_)
{
uint extH, extV;
determineExtension();
get_size (extH, extV);
auto adjH = get_hadjustment();
auto adjV = get_vadjustment();
double offH = adjH->get_value();
double offV = adjV->get_value();
cox->save();
cox->translate(-offH, -offV);
// draw red diagonal line
cox->set_source_rgb(0.8, 0.0, 0.0);
cox->set_line_width (10.0);
cox->move_to(0, 0);
cox->line_to(extH, extV);
cox->stroke();
cox->restore();
// cause child widgets to be redrawn
bool event_is_handled = Gtk::Layout::on_draw(cox);
// any drawing which follows happens on top of child widgets...
cox->save();
cox->translate(-offH, -offV);
cox->set_source_rgb(0.2, 0.4, 0.9);
cox->set_line_width (2.0);
cox->rectangle(0,0, extH, extV);
cox->stroke();
cox->restore();
return event_is_handled;
}
else
return Gtk::Layout::on_draw(cox);
}

In a Processing sketch, can I control the position of the display window?

I hope that this is the correct site for this question, apologies if not.
In a Processing sketch, can I control the initial position of the display window? The size() function that must be called first allows only the width and height to be specified.
This has occurred as a likely problem now I am starting to use the G4P (GUI for Processing) library, where the position of a GWindow() has position parameters, but they do not seem to be relative to the main display window but to the whole monitor screen, and I want the extra windows to appear within the main window. This will especially matter when I want to transfer use of the program from my desktop (monitor 1280 by 1024 pixels) to my laptop (1280 by 800 pixels).
Assuming you're talking about Java mode, then you have access to a variable called frame.
However, the frame variable does not seem to be available until after the setup() function finishes, so you have to access it after that. This works for me:
boolean frameMoved = false;
void setup() {
size(500, 500);
}
void draw() {
if(!frameMoved){
frame.setLocation(100, 100);
frameMoved = true;
}
background(0);
}
There is probably a smarter way to do this, but it works for me.
I had negative function with the frame.setLocation solution in Processing 3.5.1
after using the surface.setsize to size the sketch from a variable.
The code below works without needing a burner boolean.
void setup() {
int myVariableW=600;
surface.setSize(myVariableW,400);
}
void draw() {
background(0);
if(1==frameCount) surface.setLocation(150,100);
ellipse(300,300,200,100);
}

SharpGL Animation Questions

So I am writing a program that parses files with xyz points and makes a bunch of connected lines. What I am trying to do is animate each line being drawn. I have tried to use VBO's and Display Lists in order to increase performance (as I am dealing with large amount of data points i.e. 1,000,000 points) but I could not figure out how to use them in SharpGL. So the code I am using to draw right now is as follows:
private void drawInput(OpenGL gl)
{
gl.Begin(OpenGL.GL_LINE_STRIP);
for (int i = 0; i < parser.dataSet.Count; i++)
{
gl.Color((float) i, 3.0f, 0.0f);
gl.Vertex(parser.dataSet[i].X, parser.dataSet[i].Y, parser.dataSet[i].Z);
gl.Flush();
}
gl.End();
}
I know immediate mode is super noobzore5000 of me, but I can't find any SharpGL examples of VBO's or Display Lists. So know what I want to do is to 'redraw' the picture after each line is drawn. I thought when the flush method is called, it draws everything up to that point. But it still 'batches' it, and displays all the data at once, how can I animate this? I am incredibly desperate, I don't think thoroughly learning OpenGL or DirectX is practical for such a simple task.
After lots of tinkering, I chose to go with OpenTK because I did end up figuring out VBO's for SharpGL and the performance is AWFUL compared to OpenTK. I will give an answer as to how to animate in the way that I wanted.
My solution works with Immediate Mode and using VBO's. The main concept is making a member integer (animationCount) that you increase every time your paint function gets called, and paint up to that number.
Immediate Mode:
private void drawInput(OpenGL gl)
{
gl.Begin(OpenGL.GL_LINE_STRIP);
for (int i = 0; i < animationCount; i++)
{
gl.Color((float) i, 3.0f, 0.0f);
gl.Vertex(parser.dataSet[i].X, parser.dataSet[i].Y, parser.dataSet[i].Z);
}
gl.End();
animationCount++;
}
or
VBO:
private void glControl1_Paint(object sender, System.Windows.Forms.PaintEventArgs e)
{
GL.DrawArrays(PrimitiveType.LineStrip, 0, animationCount);
animationCount++;
}

How to animate data visualization in Processing?

I'm trying to create an animated data visualization and currently only know how to do the following "static" code, which puts a string of dots in a straight line. How do I make them jump up and down? Also, if there is anyone in Dublin, Ireland, who wouldn't mind giving a few tutorial sessions to a couple of college students working on a data visualization project in Processing, we have a small budget to compensate you for your time. Thanks very much!
For now, here's the code I was talking about...
SimpleSpreadsheetManager sm;
String sUrl = "t6mq_WLV5c5uj6mUNSryBIA";
String googleUser = "USERNAME";
String googlePass = "PASSWORD";
void setup() {
//This code happens once, right when our sketch is launched
size(800,800);
background(0);
smooth();
//Ask for the list of numbers
int[] numbers = getNumbers();
fill(255,40);
noStroke();
for (int i = 0; i < numbers.length; i++) {
ellipse(numbers[i] * 8, width/2, 8,8);
};
};
void draw() {
//This code happens once every frame.
};
Essentially the x position you use for drawing the ellipse is a number value you get from external data. You need a variable that changes value. Redrawing the ellipse at the updated value should get things animated.
Take this basic example:
float x,y;//position variables for the ellipse
void setup(){
size(800,800);
smooth();
fill(255,40);
noStroke();
y = 400;
}
void draw(){
//update values
x = mouseX + (sin(frameCount * .05) * 30);//update x to an arbitrary value
//draw
background(0);//clear the screen for the new frame
ellipse(x,y,8,8);//draw the ellipse at the new position
}
the x variable is a bit like numbers[i] - just a value that chances.
Nothing special happens in draw() other than clearing the screen(by calling background()) and drawing. The example above uses an arbitrary value, but with your setup that might be something else, maybe a certain value in a data set that changes in time (like the population of a country, etc.)
Another handy thing to keep in mind is the separation between the data and visuals code wise. If values in the data set are higher than what can be displayed on screen as raw values, you can map() values so they can be viewer, add some sort of navigation controls, etc. The values analysed will not be affected by what's being displayed. In programming terms this separation between the data/model, the visuals/view (how the data is rendered) and the controls/controller is known as the Model-View-Controller pattern.
This might be a bit much for people just starting with code, but just being aware of the separation without worrying to much on the specific implementation can be helpful.
Here's a very basic example having the width of the sketch mapped to the size of the data (numbers)
SimpleSpreadsheetManager sm;
String sUrl = "t6mq_WLV5c5uj6mUNSryBIA";
String googleUser = "USERNAME";
String googlePass = "PASSWORD";
int[] numbers;//data used for visualisation
void setup() {
//sketch setup
size(800,800);
smooth();
fill(255,40);
noStroke();
//retrieve data
numbers = getNumbers();
}
void draw() {
background(0);
int numId = int(map(mouseX,0,width,0,numbers.length));//map mouse x position based on sketch width and data size
ellipse(numbers[numId] * 8, height/2, 8,8);
}
For an animation you need one or more parameters that their values changed in time, currently there is a library for processing which do such things: Ani
For more information see the site and provided examples.

Resources