I made an application on processing which requires these information in order to make correct measurements;
horizontalScreenResolution
verticalScreenResolution
screenWidth
screenHight
I would like to use processingjs and include my sketch in web page. I already done that. However, this application gives correct results for particular screen. In order to solve this problem I want to create a form using html and java-script. User will enter its monitor parameters and whenever he clicks on start button sketch will be loaded according to given parameters and program will give correct results for every screen. However, is it possible to set this parameters before processinjs loads sketch to web page? Normally, it is possible to reach projessing parameters from javascript vice versa using processingjs.
I don't know how to do achieve this task.
Regards,
I would use displayWidth and displayHeight instead, these were added in Processing 2.0 (They replaced screen.width and screen.height). These are int values that tell you the size of the screen. So instead of asking every single person what their monitor parameters are. Just use these variables, should make your life much simpler I hope.
You can use
void setup(){
size(desiredWidth, desiredHeight);
}
to change the width and height of the canvas in pixels.
Related
I'm making a dynamic graphic that shows me a variable curve.
I don't want to have the data reloaded. I want then continuously move in the screen.
Of course I can put a very long "reset-timeout" attribute, but sometime it will be reloaded, and I don't want this.
Any help?
Full disclosure, I'm a member of the ZingChart team.
Like you mentioned, just set a really high timeout. What is the graphs purpose and why can't it reset? How reasonable is it for this client side graph to run forever?
You can simply query the chart and save the current data before it resets using our API method getdata.
I am facing a very ilogical and odd problem here.
I have defined the width, height and other properties in a seperate CSS file. Now I wan these values on the run time to manipulate them and make my application dynamic.
But when I fetch this value using jQuery, it subtracts one or two from the value.
For example, the width of an element defined in the CSS is 450px, now when I fetch it in jQuery using
$('.programeSectionBox').width();
It will give me 449px. This thing is also happening with height and margin parameters too.
Can somebody please tell me whats happening here, I am badly struct in this problem .
Thanx for all the replies. I have checked the outerWidth() solution but its not working, giving the same issue.
Actually I am creating an application for Samsung Smart TV, they are offering two resolutions 960x540 and 1280x720. For 960x540 everything is working great, but when it comes to 1280x720, the problem is occuring which I have mentioned.
In my application I am using one javascript file and two different CSS files for the two resolutions, the applications checks that on which TV resolution its working and then loads the respective CSS. I cant hardcode the values in JavaScript file because I want to keep it dynamic, if I will hardcode the values, it will obviously work for one resolution.
So if anybody have any other solution, it will be great.
Thanx
Try using outerWidth and see if that works for you:
jQuery("#myElement").outerWidth();
More on outerWidth:
http://api.jquery.com/outerWidth/
Just use parseInt to the value you get it.
After that you will get integer value then you can perform any operation on it.
console.log(parseInt('445px'));
FIDDLE
Since this is happening with several computed values (not only width/height), I would guess that your browser is zoomed. In your case it is probably zoomed out one step, since you seem to be getting lower values than the ones you set via CSS.
Try this example here: http://jsfiddle.net/zsygt/
When the browser zoom is reset to it’s default value (100%), it should print 448. But when I zoom in one step in Chrome, it prints 449.
Are there any lightweight frameworks out there for this task. I have a collection of divs, that I want to be able to save positions when dragged/resized/pushed etc.
I was going to build one, to my spec, but if there is a lightweight one out there that might save me a lot of time. I've seen some jQuery plugins that push divs around a page fluidly.
I want to be able to save positions, but also snap divs to each other and save all news positions for divs moved or re-sized. I've looked briefly at shindig, but seems a bit heavy... at least I wanted to see if there are any lightweight front end alternatives.
I will be using php for my backend.
Consider midorijs (www.midorijs.com). It is lightweight and contains a simple drag and drop interface complete with a default drop callback function. You can also define your own. You mentioned you wanted a callback for position save, Midori's callback function does pass the x,y coordinates of the object.
Chceck out more drag and drop callback details at the bottom of this page: http://www.midorijs.com/midoriDragDrop.html
Another benefit since you mentioned you are using php is Midori's convertToFields function which converts javascript object to php.
Good luck!
Why not using jQuery ui? You can customize a bundle to fit your needs + when delivering from googlecode you can get sure that a huge amount of users already have that in their cache. And you can easily get the positionings and push them to your server.
http://jqueryui.com/download
I have a website where users are supposed to upload images. I am trying to figure out the best way to set a max width/height of these images, and make the check before they get uploaded.
I know sites like bandcamp have this functionality, and it seems like they are doing this client-side in javascript, but as I read all of the similar questions on the web, it sounds like it is not possible. So here are my questions.
If it is possible to do this in javascript, can someone explain how or show me an open-source example
If it is not, then are either of these two solutions accepted.
a. The image gets uploaded from the browser to the server. Once it is successfully copied to the server, you can use a third-party python lib like PIL (I am using Django) to check the dimensions, and then return a ajax true/false if it was valid
b.Uploaded the image and insert it into the DOM but make it hidden, and then use
document.getElementByID('#image_id").height + width to see the size.
If the size is valid, then display:block or whatever.
both a and b have negatives, so if there is a better solution, let me know
Thanks
Why don't you simple accept all sizes, and check the size with PHP?
f.e. with getimagesize() and reduce the size with imagecopyresampled() like it is shown in the example:
http://www.php.net/manual/en/function.imagecopyresampled.php
If you want to resize on client side you can't do that without a plugin as Mike said.
Btw: A size limit is not smart as much of the visitors aren't able to resize images.
I'm seeing in another forum if the best way to do this is with Javascript or Ajax but I'm wondering if there is an even easier simpler way. I'm trying to create a web service where users can check which countries they have visited from a list of 175 or so and a World map image would then instantly update with a filled color.
There are other similar services, but I'm envisioning mine to be both updating from checks in checkboxes and by clicking on the target country in the displayed image say with an imagemap. Additionally other solutions display all the visited countries in the same color. I would like different colors for different countries or at least for those countries that touch. Eventually I would like to include a feature that enables the choice of which colors to assign countries.
I found a Sourceforge project called pwmfccd. It's simply an open source image of the world and the coordinates on the PNG image for all the countries. You can use mogrify from ImageMagick and floodfill to fill the countries with color. I have done this successfully, locally with batch files.
My ISP has told me where mogrify is located, basically "/usr/bin/mogrify". I now have a horrendously complicated cgi script which if it worked is set to redraw the world map image with each checkbox. It's here. It also redraws the whole web page with each check. The web page starts here. Of course this is not at all efficient, and I think probably the real way to go is Ajax or Javascript, so that maybe just the image gets changed and redrawn, not the whole web page. Sorry I don't even know the difference between Javascript and Ajax and their relative merits at this point.
I suppose you could make just one part of the image update with each check or click on the image instead of even just the image redrawing, but I have never even heard of a hint at being able to do that for irregularly shaped image elements like countries. So I guess an Image map and sister checkbox entries tied to mogrify events redrawing the user's personal copy of the image with an image refresh would be the only way to go.
So how do you do this with something other than Javascript or Ajax or is that definitely the way to go and if so, how would you do it? Or can you after all cut up a web based image into irregular puzzle shaped piece which you can redraw individually at will.
Thanks in advance for reading and considering answering this post.
Well, it looks like maybe my hosting company only supports using PHP with ImageMagick. At least I know better what to try create. I'm completely new to PHP, but I guess that is alright