We Keep Coding

return origin color values of a picture

I'm doing an assignment about editing picture in java. The assignment asks to make a code changing an image's colors into 3 different shades and animate it so it'll be like a GIF. I completed the tasks but somehow when it change between the shades the picture get loose of detail and leave out just a blue blank color on the third shade change. I tried add a code return the color value to origin before changing the next one but still this issue happen. Might be I get the code wrong. Can someone help me with this.
/* Assignment 3, Part 1 - Go Psychedelic! */
public class Assignment3Part1
{
//
public static void main(String [] args) throws InterruptedException
{
String filename;
if (args.length > 0) {
// got a filename passed into program as a parameter
// don't change this part of the code needed by TA for grading
filename = args[0];
System.out.println("Filename passed in: " + filename);
} else {
// ask user for a picture
filename = FileChooser.pickAFile();
System.out.println("User picked file: " + filename);
}
Picture pic = new Picture(filename); // Picture to modify
//
pic.show(); // Show the original picture
Thread.sleep(1000); // Pause for 1 second. You can pause for less if you like
// TODO: insert method call to tint your picture
pic.tintRed(50);
pic.repaint(); // Show the tinted picture
Thread.sleep(1000); // Pause for 1 second
// TODO: insert method call to tint your picture
pic.tintRed(-50);
pic.tintGreen(20);
pic.repaint(); // Show the tinted picture
Thread.sleep(1000); // Pause for 1 second
// TODO: insert method call to tint your picture
pic.tintGreen(0);
pic.tintBlue(10);
pic.repaint(); // Show the tinted picture
Thread.sleep(1000); // Pause for 1 second
} // End of main method
} // End of class
Codes for the method
public void tintRed(int percent)
{
Pixel[] pixelArray = this.getPixels();
Pixel pixel = null;
int value = 0;
int i = 0;
//loop through all the pixels in the array
while (i<pixelArray.length)
{
// get the current pixel
pixel = pixelArray[i];
// get the value
value = pixel.getRed();
// set the value to % of what it was
pixel.setRed((int)(value*percent));
// increment the index
i++;
}
}
Same for Blue and Green values

You are saturating the colors to a point where everything is 100% a color (a blank picture). You have to play with your shading algorithm to be more gentle: like 25%, 50%, 75% for instance

Changing Libgdx Button appearance

I need to be able to change the appearance of a Libgdx Button when some of my events are triggered.
Here is the declaration of my button:
Button googleButton = new Button(skin.getDrawable("google_sign_in"));
Here are the things I tried:
googleButton.setBackground(skin.getDrawable("google_sign_out"));
googleButton.invalidate();
googleButton.setChecked(true);
googleButton.invalidate();
googleButton.getStyle().up = skin.getDrawable("google_sign_out");
googleButton.invalidate();
I have done a lot of searches but I can't find the answer. Could somebody show me the right way of doing this?

I think the problem is that you're changing the contents of the skin/style after initializing the Button, but the button object does not reference the style after it has been initialized. I'm also not entirely clear on what you're going for. I assume you want to show a "sign in" button, until the user is signed in, and then you want that button to be a "sign out" button.
The invalidate method just triggers a re-layout (to re-compute the size/location of the Actor).
Maybe try forcing the style with setStyle, like this:
googleButton.getStyle().up = ... whatever;
googleButton.setStyle(googleButton.getStyle());
That said, I think you would be better off having two (?) different Button objects (one for logging in, and one for logging out). Pack them in a Stack, and just make one or the other invisible (see Actor.setVisible)

I managed to get this to work. In my Actor, a dice that have 6 possible images:
public Dice(int options) {
super(new Button.ButtonStyle());
}
And when I want to change the face:
public void setValue(int value) {
this.value = value;
Button.ButtonStyle style = getStyle();
style.up = new TextureRegionDrawable(
Assets.instance.dices.facesUp[value]);
style.down = new TextureRegionDrawable(
Assets.instance.dices.facesDown[value]);
style.checked = new TextureRegionDrawable(
Assets.instance.dices.facesChecked[value]);
setSize(getPrefWidth(), getPrefHeight());
}
I think the trick is at the
setSize(getPrefWidth(), getPrefHeight());
If I omit it, the dice doesn't get displayed. And there's no need for setStyle or invalidate().

Use CheckBox class instead;
1- make a .json file for the skin
{
com.badlogic.gdx.graphics.g2d.BitmapFont: { default-font: { file: fontfile.fnt } },
com.badlogic.gdx.graphics.Color: {
green: { a: 1, b: 0, g: 1, r: 0 },
white: { a: 1, b: 1, g: 1, r: 1 },
red: { a: 1, b: 0, g: 0, r: 1 },
black: { a: 1, b: 0, g: 0, r: 0 }
},
com.badlogic.gdx.scenes.scene2d.ui.CheckBox$CheckBoxStyle: {
google-loggin: { checkboxOn: google_sign_in, checkboxOff: google_sign_out, font: default-font, fontColor: white }
},
}
2- make a skin
skin = new Skin(Gdx.files.internal("your.json-file.json"), new TextureAtlas("textureAtlas-file.pack"));
3- create the button ignoring the first argument:
CheckBox loginButton = new CheckBox("", skin, "google-loging");

Just for anyone searching for this through google. To change the style of the button from a style already added to your skin file, after already initialising:
btn.setStyle(skin.get("YOUR BTN STYLE",TextButton.TextButtonStyle.class));

You must add image to button button_1.addActor(image). This image will cover the button origin skin. And then you can switch off and on this image image.setVisible(false)

Implement graph using jQplot

My need is to implement following graph
I know about stacked chart, but here there are axis points labels (In my need there is no any axes point labels), and this is from Y-axis.
I am confused how can I implement it.
Can you please help me? Any link will also be helpful.
Update :
I am trying a code snippet
<script type="text/javascript" language="javascript">
$(document).ready(function(){
var line1 = [14];
var line2 = [77];
var plot4 = $.jqplot('test2', [line1, line2], {
title: '1 Mobility Test Graph',
animate: !$.jqplot.use_excanvas,
stackSeries: true,
seriesDefaults: {
renderer: $.jqplot.BarRenderer,
rendererOptions:{barPadding : 0, barMargin : 5, barDirection: 'horizontal'},
pointLabels:{location : 'e', edgeTolerance : 0, hideZeros: true, show : true},
shadowAngle : 135,
lineWidth : 0,
showLine: true
},
axesDefaults : {
show : false,
tickOptions : {
show : false
}
},
axes: {
yaxis:{renderer:$.jqplot.CategoryAxisRenderer}
},
grid:{
borderWidth:0,
shadow:false
},
legend: {
renderer: $.jqplot.EnhancedLegendRenderer,
show:true,
rendererOptions:{
numberRows:1,
numberColumns: 3,
disableIEFading: false
},
location: 'n',
placement : 'outsideGrid',
marginTop: '5px',
showSwatch:false
}
});
$(".jqplot-xaxis-tick").hide();
$(".jqplot-yaxis-tick").hide();
});
</script>
But this doesn't give me any output. When I remove barDirection: 'horizontal' its working fine. Please help me, what is wrong...
Here I got jsfiddle , but it works for two graphs..... how can I make for one.

Are you after something like this? You have a single stacked horizontal bar there.
As per examples in doc with horizontal bar chart you must give the chart an array of series where each one has values as two values arrays ([x,y]) where x is value and y is series id.
Or another option would be to give the chart a single array of single value arrays, as shown here.

Processing button events

I'm trying to implement sort of a popup window to display information about authors in given country i managed to do this. I load my interactive map and I do get a popup message when I left click on the country. However soon as I release the button, the popup disappears.
I want to popup that is drawn to stay there until I right click on right click it should disappear.
So I'm having problems implementing it so that popup that is displayed in mouseReleased() method stays drawn.
// Import libaries
import org.gicentre.geomap.io.*;
import org.gicentre.geomap.*;
// Instance new GeoMap
GeoMap geoMap;
PImage bgImage;
void setup()
{
size(1280, 768);
// Load background pattern img and implement AA for shapes
bgImage = loadImage("bg.jpg");
smooth();
// New GeoMap instance
geoMap = new GeoMap(this);
// Load map shape
geoMap.readFile("world");
}
void draw()
{
// Fill ocean with bg image
background(bgImage);
// Change stroke color
stroke(255, 255, 255);
// Fill the continents color and draw the map
fill(26, 117, 181);
geoMap.draw();
// Get country id by mouse location
int countryID = geoMap.getID(mouseX, mouseY);
// Offgrid: -1
if (countryID != -1)
{
// Listen for mouse event and trigger action
mouseReleased(countryID);
// Color the select country
fill(14, 96, 166);
geoMap.draw(countryID);
}
}
void mouseReleased(int countryID)
{
// Act on left clicks
if(mouseButton == LEFT)
{
println(getCountryName(countryID, 3));
noStroke();
fill(255, 192);
rect(0, 0, width, 20);
if (countryID != -1)
{
String name = getCountryName(countryID, 3);
fill(0);
textAlign(LEFT, CENTER);
text(name, 0, 0, width, 20);
}
}
}
// Returns country name by id
String getCountryName(int id, int offset)
{
// Get country name for query
// getString(int id, int offset), int id: country id, int offset:
// Example USA
// offset 0 = Country Code -> 257
// offset 1 = Country Short Tag -> US
// offset 2 = Country Short Name -> USA
// offset 3 = Official Name -> United States
String name = geoMap.getAttributes().getString(id, offset);
return name;
}

The problem is that your draw function repeats continuously, but you are only drawing when the lmb is pressed. As soon as it is released, the next call to draw will draw over your popup.
One way to solve this would be to store a variable (say "shouldDraw") to tell you whether to draw or not. When the lmb is pressed, you would set this to true, and when the rmb is pressed, you would set it to false. Then instead of checking for LEFT, you would check shouldDraw.
I'm not familiar with the framework you're using, but there may be an onClick method or similar, which would be a more appropriate place than draw for changing you shouldDraw variable.
This will make the label change if you click and then move the mouse. If you want the same text to remain, you could instead store a String and set it to null when there is nothing to draw.

There is a built in function called mouseReleased that takes no parameter in Processing. You are overloading it intentionally?
Any way this is a bit confusing. I would do some thing like this:
(pseudocode)
void setup() {
// stuff
}
void draw()
{
if (id != -1)
drawPopup(id);
}
void mouseReleased() //default method called when mouse is released
{
if (mouseButton == LEFT)
id = geoMap.getID(mouseX, mouseY);
}
void drawPopup(int id){
println(getCountryName(countryID, 3));
noStroke();
fill(255, 192);
rect(0, 0, width, 20);
if (countryID != -1)
{
String name = getCountryName(id, 3);
fill(0);
textAlign(LEFT, CENTER);
text(name, 0, 0, width, 20);
}
}
This way there will always be a popup after the first, or you need to reset the id to -1 in proper condition or add the boolean suggested by mdgeorge. But usually it is better not to do draw stuff inside mouse functions. Things get easier to control.
edit: I should have pointed that there is also built in void mousePressed() and void mouseClicked() and some more check the reference.

How to change table background depending on database textareas 'height'?

Is it possible to get the height of a 'text' field from mysql?
Or the number of linebreaks would also work!
I have a table which fetches the 'text' field from my mysql database.
The background image of the table is sort of a container...
I want the background to change to another (taller) background if the text is vertically high!
Possible, if so how?
Thanks
UPDATE: I am not going to use word wrapping...

In your query you can count how many instances of '\n' are found. You can do this in javascript or php as well. This wouldn't be totally accurate though if you're word wrapping.
How to do it with php
Alternatively... to grab the height with javascript:
document.getElementById('mytable').clientHeight;

Very difficult, as you're never going to be able to predict font size with 100% certainty (Users could have enlarged text in their browser, for instance, or be using a different font).
If you want to make 100% sure, you would need to use Javascript to measure the actual size.
Otherwise, for most cases, as #Chris Klepeis says, counting the line breaks should work.

I think this will be help but i used textarea here and i test it will be working fine u just need apply it on table.
<textarea data-adaptheight rows="3" cols="40" placeholder="Your input" style="padding: 16px; line-height: 1.5;"></textarea>
<script>
(function() {
function adjustHeight(textareaElement, minHeight) {
// compute the height difference which is caused by border and outline
var outerHeight = parseInt(window.getComputedStyle(el).height, 10);
var diff = outerHeight - el.clientHeight;
el.style.height = 0;
el.style.height = Math.max(minHeight, el.scrollHeight + diff) + 'px';
}
var textAreas = [].slice.call(document.querySelectorAll('textarea[data-adaptheight]'));
textAreas.forEach(function(el) {
el.style.boxSizing = el.style.mozBoxSizing = 'border-box';
el.style.overflowY = 'hidden';
var minHeight = el.scrollHeight;
el.addEventListener('input', function() {
adjustHeight(el, minHeight);
});
window.addEventListener('resize', function() {
adjustHeight(el, minHeight);
});
adjustHeight(el, minHeight);
});
}());
</script>