Search Results

Search found 12538 results on 502 pages for 'min width'.

Page 31/502 | < Previous Page | 27 28 29 30 31 32 33 34 35 36 37 38  | Next Page >

  • Efficient Way to Draw Grids in XNA

    - by sm81095
    So I am working on a game right now, using Monogame as my framework, and it has come time to render my world. My world is made up of a grid (think Terraria but top-down instead of from the side), and it has multiple layers of grids in a single world. Knowing how inefficient it is to call SpriteBatch.Draw() a lot of times, I tried to implement a system where the tile would only be drawn if it wasn't hidden by the layers above it. The problem is, I'm getting worse performance by checking if it's hidden than when I just let everything draw even if it's not visible. So my question is: how to I efficiently check if a tile is hidden to cut down on the draw() calls? Here is my draw code for a single layer, drawing floors, and then the tiles (which act like walls): public void Draw(GameTime gameTime) { int drawAmt = 0; int width = Tile.TILE_DIM; int startX = (int)_parent.XOffset; int startY = (int)_parent.YOffset; //Gets the starting tiles and the dimensions to draw tiles, so only onscreen tiles are drawn, allowing for the drawing of large worlds int tileDrawWidth = ((CIGame.Instance.Graphics.PreferredBackBufferWidth / width) + 4); int tileDrawHeight = ((CIGame.Instance.Graphics.PreferredBackBufferHeight / width) + 4); int tileStartX = (int)MathHelper.Clamp((-startX / width) - 2, 0, this.Width); int tileStartY = (int)MathHelper.Clamp((-startY / width) - 2, 0, this.Height); #region Draw Floors and Tiles CIGame.Instance.GraphicsDevice.SetRenderTarget(_worldTarget); CIGame.Instance.GraphicsDevice.Clear(Color.Black); CIGame.Instance.SpriteBatch.Begin(); //Draw floors for (int x = tileStartX; x < (int)MathHelper.Clamp(tileStartX + tileDrawWidth, 0, this.Width); x++) { for (int y = tileStartY; y < (int)MathHelper.Clamp(tileStartY + tileDrawHeight, 0, this.Height); y++) { //Check if this tile is hidden by layer above it bool visible = true; for (int i = this.LayerNumber; i <= _parent.ActiveLayer; i++) { if (this.LayerNumber != (_parent.Layers - 1) && (_parent.GetTileAt(x, y, i + 1).Opacity >= 1.0f || _parent.GetFloorAt(x, y, i + 1).Opacity >= 1.0f)) { visible = false; break; } } //Only draw if visible under the tile above it if (visible && this.GetTileAt(x, y).Opacity < 1.0f) { Texture2D tex = WorldTextureManager.GetFloorTexture((Floor)_floors[x, y]); Rectangle source = WorldTextureManager.GetSourceForIndex(((Floor)_floors[x, y]).GetTextureIndexFromSurroundings(x, y, this), tex); Rectangle draw = new Rectangle(startX + x * width, startY + y * width, width, width); CIGame.Instance.SpriteBatch.Draw(tex, draw, source, Color.White * ((Floor)_floors[x, y]).Opacity); drawAmt++; } } } //Draw tiles for (int x = tileStartX; x < (int)MathHelper.Clamp(tileStartX + tileDrawWidth, 0, this.Width); x++) { for (int y = tileStartY; y < (int)MathHelper.Clamp(tileStartY + tileDrawHeight, 0, this.Height); y++) { //Check if this tile is hidden by layers above it bool visible = true; for (int i = this.LayerNumber; i <= _parent.ActiveLayer; i++) { if (this.LayerNumber != (_parent.Layers - 1) && (_parent.GetTileAt(x, y, i + 1).Opacity >= 1.0f || _parent.GetFloorAt(x, y, i + 1).Opacity >= 1.0f)) { visible = false; break; } } if (visible) { Texture2D tex = WorldTextureManager.GetTileTexture((Tile)_tiles[x, y]); Rectangle source = WorldTextureManager.GetSourceForIndex(((Tile)_tiles[x, y]).GetTextureIndexFromSurroundings(x, y, this), tex); Rectangle draw = new Rectangle(startX + x * width, startY + y * width, width, width); CIGame.Instance.SpriteBatch.Draw(tex, draw, source, Color.White * ((Tile)_tiles[x, y]).Opacity); drawAmt++; } } } CIGame.Instance.SpriteBatch.End(); Console.WriteLine(drawAmt); CIGame.Instance.GraphicsDevice.SetRenderTarget(null); //TODO: Change to new rendertarget instead of null #endregion } So I was wondering if this is an efficient way, but I'm going about it wrongly, or if there is a different, more efficient way to check if the tiles are hidden. EDIT: For example of how much it affects performance: using a world with three layers, allowing everything to draw no matter what gives me 60FPS, but checking if its visible with all of the layers above it gives me only 20FPS, while checking only the layer immediately above it gives me a fluctuating FPS between 30 and 40FPS.

    Read the article

  • A c++ program that computes the min and max of f(x) for a rectangle inputed by user

    - by StreetBallerX
    So bassicly this is the problem quoted from my teacher : "You have to write a program in C++ that computes the minimal and the maximal value of function f(x,y) obtained on an integer point in a given rectangle [a, b] x [c, d]. Your program should prompt the user to input numerical values of a, b, c and d, as floating point numbers, which are expected to be in a range from -100 thru 100. In case when minimal or maximal values do not exists, your program should output appropriate messages. f(x,y)=x+x*x+x*x*x+y+y*y " So before anyone tell me that i should try do it myself , i'll tell them that ive been trying to do it myself for the past 8 days but my deadline is aproaching and i just cant figure it out its a really simple program but i just cant understand it ... I wont post my attempts because all i saw in these forums is that when someone posts their try and a milion people start to say dont look it this way thry this and bla bla and the guy who posted it was just wondering for minor thing ... so what ever thank you all in advance and thats it :)

    Read the article

  • add remove field in java script

    - by rajanikant
    Hi every body. i want to add and remove some html input in javascript i have done for add function . it work properly. but unable to remove. my code is following fields = 1; function addInput() { if (fields != 10) { document.getElementById('text').innerHTML += "<tr><td width='15%' align='left' valign='top' class='subheading'><input type='text' name='date[]' id='date[]' /></td><td width='15%' align='left' valign='top' class='subheading'><input type='text' name='time[]' id='time[]' /></td><td width='20%' align='left' valign='top' class='subheading'><input type='text' name='module[]' id='module[]' /></td><td width='15%' align='left' valign='top' class='subheading'><input type='text' name='organisation[]' id='organisation[]' /></td><td width='20%' align='left' valign='top' class='subheading' nowrap='nowrap'><input type='text' name='category[]' id='category[]' /></td><td width='20%' align='left' valign='top' class='text' nowrap='nowrap'>Add | Remove </td></tr>"; fields += 1; } else { document.getElementById('text').innerHTML += "<br />Only 10 upload fields allowed."; document.form.add.disabled=true; } } fields1=10 function removeInput() { if (fields1 !=1) { document.getElementById('text').innerHTML += ""; fields -= 1; } } and my php function is function addSession() {?> <table cellpadding="5" cellspacing="0" width="100%"> <tr> <td width="10%" align="left" valign="top" colspan="6" bgcolor="#993333" class="heading">Add Session </span></td> </tr><tr class="bgrow"> <td width="10%" align="left" valign="top" class="subheading">Datum </span></td> <td width="20%" align="left" valign="top" class="subheading">Tijd</td> <td width="35%" align="left" valign="top" class="subheading">Module</td> <td width="15%" align="left" valign="top" class="subheading">Organisatie</td> <td width="20%" align="left" valign="top" class="subheading" nowrap="nowrap">Category</td> <td width="20%" align="left" valign="top" class="subheading" nowrap="nowrap">Action</td> </tr> <tr > <td width="15%" align="left" valign="top" class="subheading"><input type="text" name="date_0" id="date_0" /></td> <td width="15%" align="left" valign="top" class="subheading"><input type="text" name="time_0" id="time_0" /></td> <td width="20%" align="left" valign="top" class="subheading"><input type="text" name="module_0" id="module_0" /></td> <td width="15%" align="left" valign="top" class="subheading"><input type="text" name="organisation_o" id="organisation_o" /></td> <td width="20%" align="left" valign="top" class="subheading" nowrap="nowrap"><input type="text" name="cat_0" id="cat_0" /></td> <td width="20%" align="left" valign="top" class="text" nowrap="nowrap"><span onclick="addInput()" class="link">Add</span> | <span onclick="removeInput()" class="link">Remove </span></td> </tr> <tbody id="text"> </tbody> <?php } ?> can any one give me solution?

    Read the article

  • Hiding tables that have no data to display.

    - by Kinyanjui Kamau
    Hi Guys, I have this css styling and was wondering what I need to change in order to collapse/hide html tables that are empty. The style: <style> #search_settings { position:relative; height:25px; width:500px; } #users_table_results { border-collapse:separate; empty-cells:hide; } #events_table_results { border-collapse:separate; empty-cells:hide; } #establishments_table_results { border-collapse:separate; empty-cells:hide; } </style> My HTML: <div id="search_settings"> <table width="500" border="0"> <tr> <td height="20" class="heading_text_18">Search results</td> </tr> </table> <table id="users_table_results" max-width="500" name="users" border="0"> <tr> <td width="50" height="50"><a href="#profile.php"><img src="Images/<?php echo $row_result_users['picture_thumb_url']; ?>" border="0" height="50" width="50"/></a></td> <td width="150" class="ordinary_text_12"><?php echo $row_result_users['user_first_name']; ?></td> <td width="150" class="ordinary_text_12"><?php echo $row_result_users['user_last_name']; ?></td> <td width="150" class="ordinary_text_12"><?php echo $row_result_users['username']; ?></td> </tr> </table> <table id="events_table_results" width="500" name="events" border="0"> <tr> <td width="50" height="50"><a href="#profile.php"><img src="Images/<?php echo $row_event['event_thumb_url']; ?>" border="0" height="50" width="50"/></a></td> <td width="150" class="ordinary_text_12"><?php echo $row_event['event_name']; ?></td> <td width="150" class="ordinary_text_12"><?php echo $row_event['event_venue']; ?></td> <td width="150" class="ordinary_text_12"><?php echo $row_event['event_date']; ?></td> </tr> </table> <table id="establishments_table_results" width="500" name="establishments" border="0"> <tr> <td width="50" height="50"><a href="#profile.php"><img src="Establishment_Images/<?php echo $row_establishment['establishment_thumb_url']; ?>" border="0" height="50" width="50"/></a></td> <td width="150" class="ordinary_text_12"><?php echo $row_establishment['establishment_name']; ?></td> <td width="150" class="ordinary_text_12"><?php echo $row_establishment['location_name']; ?></td> <td width="150" class="ordinary_text_12"><?php echo $row_establishment['establishment_pricing']; ?></td> </tr> </table> </div> I would want it such that if there are no results for my events table, the table does not show(there is no blank space between search results where event results should be because border=0). Can you hide entire tables?

    Read the article

  • passing values to php print page

    - by DAFFODIL
    In this wen i select a value in drop down box it will list out that name value in table .There will be a check box ,the checked values should be passed to pring page which is below the 1st part of code. Any help ii be appreciated <?php $con = mysql_connect("localhost","root",""); if (!$con) { die('Could not connect: ' . mysql_error()); } mysql_select_db("form1", $con); error_reporting(E_ALL ^ E_NOTICE); $nam=$_REQUEST['select1']; $row=mysql_query("select * from inv where name='$nam'"); while($row1=mysql_fetch_array($row)) { $Name=$row1['Name']; $Address =$row1['Address']; $City=$row1['City']; $Pincode=$row1['Pincode']; $No=$row1['No']; $Date=$row1['Date']; $DCNo=$row1['DCNo']; $DcDate=$row1['DcDate']; $YourOrderNo=$row1['YourOrderNo']; $OrderDate=$row1['OrderDate']; $VendorCode=$row1['VendorCode']; $SNo=$row1['SNo']; $descofgoods=$row1['descofgoods']; $Qty=$row1['Qty']; $Rate=$row1['Rate']; $Amount=$row1['Amount']; } ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Untitled Document</title> <script type="text/javascript"> function ram() { var q=document.getElementById('qty').value; var r=document.getElementById('rate').value; document.getElementById('amt').value=q*r; } </script> </head> <body> <form id="form1" name="form1" method="post" action=""> <table width="1315" border="0"> <script type="text/javascript"> function g() { form1.submit(); } </script> <tr> <th>Name</th> <th align="left"><select name="select1" onchange="g();"> <option value="" selected="selected">select</option> <?php $row=mysql_query("select Name from inv "); while($row1=mysql_fetch_array($row)) { ?> <option value="<?php echo $row1['Name'];?>"><?php echo $row1['Name'];?></option> <?php } ?> </select></th> </tr> <tr> <th>Address</th> <th align="left"><textarea name="Address"><?php echo $Address;?></textarea></th> </tr> <tr> <th>City</th> <th align="left"><input type="text" name="City" value='<?php echo $City;?>' /></th> </tr> <tr> <th>Pincode</th> <th align="left"><input type="text" name="Pincode" value='<?php echo $Pincode;?>'></th> </tr> <tr> <th>No</th> <th align="left"><input type="text" name="No2" value='<?php echo $No;?>' readonly="" /></th> </tr> <tr> <th>Date</th> <th align="left"><input type="text" name="Date" value='<?php echo $Date;?>' readonly="" /></th> </tr> <tr> <th>DCNo</th> <th align="left"><input type="text" name="DCNo" value='<?php echo $DCNo;?>' readonly="" /></th> </tr> <tr> <th>DcDate:</th> <th align="left"><input type="text" name="DcDate" value='<?php echo $DcDate;?>' /></th> </tr> <tr> <th>YourOrderNo</th> <th align="left"><input type="text" name="YourOrderNo" value='<?php echo $YourOrderNo;?>' readonly="" /></th> </tr> <tr> <th>OrderDate</th> <th align="left"><input type="text" name="OrderDate" value='<?php echo $OrderDate;?>' readonly="" /></th> </tr> <tr> <th width="80">VendorCode</th> <th width="1225" align="left"><input type="text" name="VendorCode" value='<?php echo $VendorCode;?>' readonly="" /></th> </tr> </table> <table width="1313" border="0"> <tr> <td width="44">&nbsp;</td> <td width="71">SNO</td> <td width="527">DESCRIPTION</td> <td width="214">QUANTITY</td> <td width="214">RATE/UNIT</td> <td width="217">AMOUNT</td> </tr> <?php $i=1; $row=mysql_query("select * from inv where Name='$nam'"); while($row1=mysql_fetch_array($row)) { $descofgoods=$row1['descofgoods']; $Qty=$row1['Qty']; $Rate=$row1['Rate']; $Amount=$row1['Amount']; ?> <tr> <td><input type="checkbox" name="checkbox" value="checkbox" /></td> <td><input type="text" name="No" value='<?php echo $No;?>' readonly=""/></td> <td><input type="text" name="descofgoods" value='<?php echo $descofgoods;?>' /></td> <td><input type="text" name="qty" maxlength="50000000" id="qty"/></td> <td><input type="text" name="Rate" value='<?php echo $Rate;?>' id="rate" onclick="ram()";></td> <td><input type="text" name="Amount" id="amt"/></td> </tr> <?php $i++;} ?> <tr> <th colspan="2"><a href="pp.php?msg=<?php echo $nam;?>">Print</a></th> </tr> </table> <label></label> </form> </body> </html> - <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title></title> <script type = "text/javascript"> function a() { var q = document.getElementsByName('Amount'); var count = 0; for (i = 0; i < q.length; i++) count += parseInt(q[i].value,10); document.getElementById('s').value = count; } </script> </head> <?php $con = mysql_connect("localhost","root",""); if (!$con) { die('Could not connect: ' . mysql_error()); } mysql_select_db("form1", $con); error_reporting(E_ALL ^ E_NOTICE); $nam=$_GET['msg']; $row=mysql_query("select * from inv where Name='$nam'"); while($row1=mysql_fetch_array($row)) { $Name=$row1['Name']; $Address =$row1['Address']; $City=$row1['City']; $Pincode=$row1['Pincode']; $No=$row1['No']; $Date=$row1['Date']; $DCNo=$row1['DCNo']; $DcDate=$row1['DcDate']; $YourOrderNo=$row1['YourOrderNo']; $OrderDate=$row1['OrderDate']; $VendorCode=$row1['VendorCode']; $SNo=$row1['SNo']; $descofgoods=$row1['descofgoods']; $Qty=$row1['Qty']; $Rate=$row1['Rate']; $Amount=$row1['Amount']; } ?> <body> <form id="form1" name="form1" method="post" action=""> <table width="846" border="0"> <tr> <td width="411" height="113">&nbsp;</td> <td width="412">&nbsp;</td> </tr> </table> <table width="846" border="0"> <tr> <td height="38">&nbsp;</td> </tr> </table> <table width="846" border="0"> <tr> <td width="390" rowspan="4">&nbsp;</td> <td width="92" height="35">&nbsp;</td> <td width="136"><?php echo $No;?></td> <td width="36">&nbsp;</td> <td width="170"><?php echo $Date;?></td> </tr> <tr> <td height="37">&nbsp;</td> <td><?php echo $DCNo;?></td> <td>&nbsp;</td> <td><?php echo $DcDate;?></td> </tr> <tr> <td height="34">&nbsp;</td> <td><?php echo $YourOrderNo;?></td> <td>&nbsp;</td> <td><?php echo $OrderDate;?></td> </tr> <tr> <td height="29">&nbsp;</td> <td><?php echo $VendorCode;?></td> <td>&nbsp;</td> <td>&nbsp;</td> </tr> </table> <table width="845" border="0"> <tr> <td height="38">&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> <td>&nbsp;</td> </tr> <tr> <td width="34">&nbsp;</td> <td width="457">&nbsp;</td> <td width="104">&nbsp;</td> <td width="79">&nbsp;</td> <td width="149">&nbsp;</td> </tr> <?php $i=1; $row=mysql_query("select * from inv where Name='$nam'"); while($row1=mysql_fetch_array($row)) { $descofgoods=$row1['descofgoods']; $Qty=$row1['Qty']; $Rate=$row1['Rate']; $Amount=$row1['Amount']; ?> <tr> <td><?php echo $i;?></td> <td><?php echo $descofgoods;?></td> <td><?php echo $Qty;?></td> <td><?php echo $Rate;?></td> <td><input name="Amount" type = "text" value="<?php echo $Amount; ?>" /></td> </tr> <?php $i++;} ?> </table> <table width="844" border="0"> <tr> <td width="495" height="1065">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type="text" name="textfield2" width="150" /> &nbsp; &nbsp; &nbsp; &nbsp; </td> <td width="191">&nbsp;</td> <td width="144"><input type="text" name="to" id="s" onclick="a()";/></td> </tr> </table> </form> </body> </html>

    Read the article

  • What am I doing wrong with my Shoes program?

    - by dmonroe4919
    #Shoes.app(:title => "Collinear Points", :width => 450, :height => 350) do def calculate math.sqrt(((@[email protected]_f)**2)+((@[email protected]_f)**2)+((@[email protected]_f)**2)) end def compute math.sqrt(((@[email protected]_f)**2)+((@[email protected]_f)**2)+((@[email protected]_f)**2)) end def capture math.sqrt(((@[email protected]_f)**2)+((@[email protected]_f)**2)+((@[email protected]_f)**2)) end stack(:width => '100%', :margin => 20) do para('Calculate Collinear Points') para(' x y z') end flow(:width => '100%' ) do para('Point A: ') @alphax = edit_line(:width => 100, height => 35) {@collinear.text = calculate} @alphay = edit_line(:width => 100, height => 35) {@collinear.text = calculate} @alphaz = edit_line(:width => 100, height => 35) {@collinear.text = calculate} end flow(:width => '100%' ) do para('Point B: ') @betax = edit_line(:width => 100, height => 35) {@collinear.text = compute} @betay = edit_line(:width => 100, height => 35) {@collinear.text = compute} @betaz = edit_line(:width => 100, height => 35) {@collinear.text = compute} end flow(:width => '100%' ) do para('Point C: ') @gammax = edit_line(:width => 100, height => 35) {@collinear.text = capture} @gammay = edit_line(:width => 100, height => 35) {@collinear.text = capture} @gammaz = edit_line(:width => 100, height => 35) {@collinear.text = capture} end button("Configure") @button.click do c = calculate+compute=capture case c when c=true alert("Points are collinear, equation is ") when c=false alert("Points are non-collinear") end end

    Read the article

  • Exclude specific value from a Min/Max agregate funcion using ICriteria.

    - by sparks
    I have a schedule (Voyages) table like this: ID Arrival Departure OrderIndex 1 01/01/1753 02/10/2009 0 1 02/11/2009 02/15/2009 1 1 02/16/2009 02/19/2009 2 1 02/21/2009 01/01/1753 3 2 01/01/1753 03/01/2009 0 2 03/04/2009 03/07/2009 1 2 03/09/2009 01/01/1753 2 By design i save '01/01/1753' as a default value if the user doesn't fill a the field on the capture screen and for the very first Arrival and the very last Departure which are never provided. Im using Nhibernate and Criteria, and im wondering whats the best way to query this data if i want to know the First departure and last arrival for each voyage in the table. My first thought was a groupby (ID) and then do some Min and Max with the arrival and departure but the `'01/01/1753' VALUE is messing aronud. ... .SetProjection(Projections.ProjectionList() .Add(Projections.GroupProperty("ID"), "ID") .Add(Projections.Min("DepartureDate"), "DepartureDate") .Add(Projections.Max("ArrivalDate"), "ArrivalDate") ) ... So is there a way to skip this value in the Min function comparison (without losing the whole row of data), or there is a better way to do this, maybe utilizing the OrderIndex that always indicate the correct order of the elements, maybe ordering ASC taking the 1st and then Order DESC and taking the 1 st again, but im not quite sure how to do that with criteria syntax.

    Read the article

  • Inconsistent Frame / Bounds of UIImage and UIScrollView

    - by iFloh
    this one puzzles me. I have an Image with a width of 1600 pixels and height of 1819 pixels. I load the image as UIImageView into an UIScrollView and set the "contentsize parameter" iKarteScrollView.contentSize = CGSizeMake(iKarteImageView.bounds.size.width, iKarteImageView.bounds.size.height); NSLog(@"Frame - width %.6f, height %.6f - Bounds - width %.6f, height %.6f", myImageView.frame.size.width, myView.frame.size.height, myImageView.bounds.size.width, myImageView.bounds.size.height); NSLog(@"Content size width %.6f, height %.6f", myScrollView.contentSize.width, myScrollView.contentSize.height); The NSLog shows the following: Frame - width 1600.000000, height 1819.000000 - Bounds - width 1600.000000, height 1819.000000 Content size width 1600.000000, height 1819.000000 Now comes the miracle, in a subsequent method of the same object I call the same NSLog again. But this time the result is Frame - width 405.000000, height 411.000000 - Bounds - width 1601.510864, height 1625.236938 Content size width 404.617920, height 460.000000 Why is the frame size suddely 405 by 411 pixels? How can the Bounds be 1601 by 1625 where 1625 is roughly 200 pixels less than the original size? When Positioning a further UIImageView at the coordinates of 20 by 1625, the UIImageView is displayed an estimated 200 pixels above the bottom of the content of the UIScrollView. I'm lost ...

    Read the article

  • What is the significance of these different width, height and resolution parameters?

    - by ??????? ???????????
    An image with a pixel resolution of 640 x 480 has additional dimension and resolution parameters according to exiftool. I'm unsure what they mean. Why are the X / Y Resolution parameters the same?Should they not reflect the pixel dimensions of the image? What does Exif Image Size mean and how is it different from the pixel dimensions? What is the focal plane? Does it have any relation to the device used to capture this image? $ exiftool evil1.jpg | egrep 'Width|Height|Resolution' X Resolution : 180 Y Resolution : 180 Resolution Unit : inches Exif Image Width : 400 Exif Image Height : 300 Focal Plane X Resolution : 8114.285714 Focal Plane Y Resolution : 8114.285714 Focal Plane Resolution Unit : inches Image Width : 640 Image Height : 480 If needed, the original image can be obtained from: here=http://www.pythonchallenge.com/pc/return/evil1.jpg wget --user=huge --password=file $here

    Read the article

  • Content Box is a Little Off in IE9 ... How to Fix?

    - by Kelsey Nealon
    Hi there! I have a website at www.thetotempole.ca and when viewed in IE9... My websites content box (The green wooden backgrounded box with content inside) is moved slightly over to the left making a space between the actual container and the content box... Is there anyway I can fix this without harming any of the other browsers? Thanks! Screenshot: HTML: <!DOCTYPE html> <head> <title>The Totem Pole News - Movies</title> <!-- Start WOWSlider.com HEAD section --> <link rel="stylesheet" type="text/css" href="engine1/style.css" /> <script type="text/javascript" src="engine1/jquery.js"></script> <!-- End WOWSlider.com HEAD section --> <script type="text/javascript"> var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-45342007-1']); _gaq.push(['_trackPageview']); (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })(); </script> <meta charset="utf-8"> <meta name="description" content="A totem pole themed news website posting articles on news, music, movies, video games, and health."> <link href="thecss2.css" rel="stylesheet" type="text/css"> <link rel="icon" type="image/ico" href="images/favicon.ico"> <meta http-equiv="X-UA-Compatible" content="IE=8" /> </head> <body> <div id="container"> <div id="contentbox" align="Center"> <a href="index.html"><div id="banner" align="Center"> </div></a> <div id="navbar"> <p><a href="index.html"><img src="images/home.png" width="65" height="54" alt="picture of a house to relate to the home page (content)" style="position: absolute; left: 23px; top: 16px; width: 57px; height: 48px;"><span style="position: absolute; left: 24px; z-index:2; top: 71px; height: 23px;">Content</span></a> <a href="#"><img src="images/eagleicon.gif" width="73" height="39" alt="An Eagle icon for the News section of the Totem Pole" style="position: absolute; left: 111px; top: 28px;"><span style="position: absolute; z-index: 2; left: 127px; top: 72px;">News</span></a> <a href="#"><img src="images/owlicon.gif" width="81" height="61" alt="An Owl icon for the Music section of the totem pole" style="position: absolute; left: 210px; top: 11px;"><span style="position: absolute; z-index:2; left: 226px; top: 73px;"><strong>Music</strong></span></a><a href="movies.html"><img src="images/wolficon.gif" width="88" height="54" alt="A Wolf icon for the Movies section of the totem pole" style="position: absolute; left: 320px; top: 15px;"><span style="position: absolute; left: 336px; top: 72px; z-index:2;"><strong>Movies</strong></span></a> <a href="#"><img src="images/hareimage.gif" width="60" height="56" alt="A Hare icon for Video Game section of the Totem Pole" style="position: absolute; left: 441px; top: 13px;"><span style="position: absolute; z-index:2; left: 428px; top: 73px;"><strong>Video Games</strong></span></a> <a href="#"><img src="images/bearicon.gif" width="91" height="57" alt="A bear icon for the Health section of The Totem Pole" style="position: absolute; left: 551px; top: 13px;"><span style="position: absolute; left: 580px; top: 72px; z-index:2;">Health</span></a></p> </div> <!--Nav Bar 2--> <div id="navbar2"> <a href="#">About Us</a> <a href="#">Feedback</a> <a href="#">Subscribe</a> </div> <!-- Atomz HTML for Search --> <div id="searchbar"> <form method="get" action="http://search.atomz.com/search/"> <input id="searchbox" size="13" name="sp_q" value="Search..." onFocus="if (this.value == 'Search...') {this.value=''}"> <input class="css_btn_class" type="submit" value="Search"> <input type="hidden" name="sp_a" value="sp1005092e"> <input type="hidden" name="sp_p" value="all"> <input type="hidden" name="sp_f" value="UTF-8"> </form> </div> <!-- Start WOWSlider.com BODY section --> <div id="mywowslider"> <div id="wowslider-container1"> <div class="ws_images"> <ul> <li><img src="images/anchor.jpg" alt="Ron Burgundy" title="Ron Burgundy" id="wows1_0"/>Played by Will Ferrell</li> <li><img src="images/anchor2.jpg" alt="Brian Fantana" title="Brian Fantana" id="wows1_1"/>Played by Paul Rudd</li> <li><img src="images/anchor3.jpg" alt="Brick Tamland" title="Brick Tamland" id="wows1_2"/>Played by Steve Carrell</li> <li><img src="images/anchor4.jpg" alt="Champ Kind" title="Champ Kind" id="wows1_3"/>Played by David Koechner</li> </ul> </div> <div class="ws_bullets"><div> <a href="#" title="Ron Burgundy"><img src="images/anchor.jpg" alt="Ron Burgundy"/>1</a> <a href="#" title="Brian Fantana"><img src="images/anchor2.jpg" alt="Brian Fantana"/>2</a> <a href="#" title="Brick Tamland"><img src="images/anchor3.jpg" alt="Brick Tamland"/>3</a> <a href="#" title="Champ Kind"><img src="images/anchor4.jpg" alt="Champ Kind"/>4</a> </div> </div> <span class="wsl"><a href="http://wowslider.com"></a></span> <div class="ws_shadow"></div> </div> <script type="text/javascript" src="engine1/wowslider.js"></script> <script type="text/javascript" src="engine1/script.js"></script> </div> <!-- End WOWSlider.com BODY section --> <!-- AddThis Smart Layers BEGIN --> <!-- Go to http://www.addthis.com/get/smart-layers to customize --> <script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-5279b96309e7df24"></script> <script type="text/javascript"> addthis.layers({ 'theme' : 'transparent', 'share' : { 'position' : 'left', 'numPreferredServices' : 5 } }); </script> <!-- AddThis Smart Layers END --> <div id="sources"><p> Source(s): <a href="http://en.wikipedia.org/wiki/Anchorman_2:_The_Legend_Continues">wikipedia.com</a></p></div> <div id="infocontent"> <p align="left"><em><strong> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Anchorman 2: The Legend Continues</strong></em> is an upcoming American comedy film being released on December 20, 2013, also a sequel to the 2004 film <em>Anchorman: The Legend of Ron Burgandy</em>. On March 28, 2012, actor Will Ferrell officially announced the sequel dressed in character as Ron Burgundy on the late-night talk-show <em>Conan</em>. As with the original film, it is directed by Adam McKay, produced by Judd Apatow, stars Will Ferrell and is written by Adam McKay and Will Ferrell. Unlike the original film, which was distributed by DreamWorks Pictures, <em>The Legend Continues</em> will be distributed by Paramount Pictures.</p> <p align="left"><em><strong>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</strong></em>The movie now has a website at <a href="www.anchormanmovie.com">www.anchormanmovie.com</a> where a countdown for the release of this film can be seen. By the looks of these images, I think we can expect big things when the movie comes out this December. Enjoy the poster photos and trailers all posted below, and don't forget to submit your vote in the poll!</p> </div> <div id="trailer1"><iframe width="560" height="315" src="//www.youtube.com/embed/Elczv0ghqw0?rel=0" frameborder="0" allowfullscreen></iframe></div> <div id="trailer2"> <iframe width="560" height="315" src="//www.youtube.com/embed/mZ-JX-7B3uM?rel=0" frameborder="0" allowfullscreen></iframe> </div> <div id="poll"> <form method="post" action="http://poll.pollcode.com/763294"><table style="border: black 1px solid;" border="1" width="175" bgcolor="EEEEEE" cellspacing="2" cellpadding="0"><tr><td colspan="2" height="10"><font face="Verdana" size="2" color="000000"><b>What Rating Do You Think This Will Recieve</b></font></td></tr><tr><td width="5"><input type="radio" name="answer" value="1" id="763294answer1"></td><td>&nbsp;<font face="Verdana" size="2" color="000000"><label for="763294answer1">10</label></font></td></tr><tr><td width="5"><input type="radio" name="answer" value="2" id="763294answer2"></td><td>&nbsp;<font face="Verdana" size="2" color="000000"><label for="763294answer2">9</label></font></td></tr><tr><td width="5"><input type="radio" name="answer" value="3" id="763294answer3"></td><td>&nbsp;<font face="Verdana" size="2" color="000000"><label for="763294answer3">8</label></font></td></tr><tr><td width="5"><input type="radio" name="answer" value="4" id="763294answer4"></td><td>&nbsp;<font face="Verdana" size="2" color="000000"><label for="763294answer4">7</label></font></td></tr><tr><td width="5"><input type="radio" name="answer" value="5" id="763294answer5"></td><td>&nbsp;<font face="Verdana" size="2" color="000000"><label for="763294answer5">6</label></font></td></tr><tr><td width="5"><input type="radio" name="answer" value="6" id="763294answer6"></td><td>&nbsp;<font face="Verdana" size="2" color="000000"><label for="763294answer6">5</label></font></td></tr><tr><td width="5"><input type="radio" name="answer" value="7" id="763294answer7"></td><td>&nbsp;<font face="Verdana" size="2" color="000000"><label for="763294answer7">4</label></font></td></tr><tr><td width="5"><input type="radio" name="answer" value="8" id="763294answer8"></td><td>&nbsp;<font face="Verdana" size="2" color="000000"><label for="763294answer8">3</label></font></td></tr><tr><td width="5"><input type="radio" name="answer" value="9" id="763294answer9"></td><td>&nbsp;<font face="Verdana" size="2" color="000000"><label for="763294answer9">2</label></font></td></tr><tr><td width="5"><input type="radio" name="answer" value="10" id="763294answer10"></td><td>&nbsp;<font face="Verdana" size="2" color="000000"><label for="763294answer10">1</label></font></td></tr><tr><td colspan="2" height="10"><center><input type="submit" value=" Vote ">&nbsp;&nbsp;<input title="Clicking this will send you to a new page" type="submit" name="view" value=" View "></center></td></tr><tr><td colspan="2" align="right"><font face="Verdana" height="5" size="1" color="000000"></font></td></tr></table></form></div> <span style="position: absolute; left: 0px; top: 225px; width: 1000px; border-bottom: 2px black double; height: 58px;"> <h1 style="font-weight: normal; font-size:28px"><em>Anchorman 2 Arrives Soon</em></h1></span> <div id="contentbox2"></div> <!--Footer Div --> <center><div id="footer"><a href="#">Sitemap</a> <a href="#">About Us</a> <a href="#">Feedback</a></div></center> <div id="disqus"><div id="disqus_thread"></div> <script type="text/javascript"> /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */ var disqus_shortname = 'thetotempoleanchorman2'; // required: replace example with your forum shortname /* * * DON'T EDIT BELOW THIS LINE * * */ (function() { var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true; dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js'; (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq); })(); </script> <noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript> <a href="http://disqus.com" class="dsq-brlink">comments powered by <span class="logo-disqus">Disqus</span></a></div> <!-- This is the end of the contentbox --></div> <!-- This is the end of the container div --> </div> </body> </html> CSS: html { background: url(images/pine.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/pine.jpg', sizingMethod='scale'); -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/pine.jpg', sizingMethod='scale')"; } body { margin-bottom:0px; font-family: Verdana, Geneva, sans-serif; } a { outline : none; border: none; } a:hover { color: #0FC; } #container { width: 1000px; height:1924px; position:relative; margin-right: auto; margin-left: auto; z-index:1; margin-bottom: 50px; } #facebook { position:fixed; right:100px; z-index:15; } #twitter { position:fixed; z-index:16; right:120px; } #google { position:fixed; top:7px; right: 135px; } #socialmediaplugins { text-align: right; position: fixed; background: rgb(125,126,125); /* Old browsers */ background: -moz-linear-gradient(top, rgba(125,126,125,1) 0%, rgba(247,247,247,1) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(125,126,125,1)), color-stop(100%,rgba(247,247,247,1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(125,126,125,1) 0%,rgba(247,247,247,1) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(125,126,125,1) 0%,rgba(247,247,247,1) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(125,126,125,1) 0%,rgba(247,247,247,1) 100%); /* IE10+ */ background: linear-gradient(to bottom, rgba(125,126,125,1) 0%,rgba(247,247,247,1) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7e7d', endColorstr='#f7f7f7',GradientType=0 ); /* IE6-9 */ margin: 0px; top: 0px; left: 0px; right: 0px; z-index:14; } #searchbox { background-color:#01bff6; border-radius:4px; } #searchbox:hover { background-color:#76b618; border-radius:4px; } #searchbox:active { background-color:#01bff6; border-radius:4px; } #contentbox { background-color:black; background-image:url(images/wooden.jpg); width: 1000px; margin-bottom:50px; height: 1924px; box-shadow:2px 2px 10px 10px #060606; -webkit-box-shadow:2px 2px 10px 10px #060606; -moz-box-shadow:2px 2px 10px 10px #060606; /* For IE<9 */ filter: progid:DXImageTransform.Microsoft.Shadow(color=#060606,direction=0,strength=5), progid:DXImageTransform.Microsoft.Shadow(color=#060606,direction=45,strength=2), progid:DXImageTransform.Microsoft.Shadow(color=#060606,direction=90,strength=5), progid:DXImageTransform.Microsoft.Shadow(color=#060606,direction=135,strength=5), progid:DXImageTransform.Microsoft.Shadow(color=#060606,direction=180,strength=10), progid:DXImageTransform.Microsoft.Shadow(color=#060606,direction=225,strength=5), progid:DXImageTransform.Microsoft.Shadow(color=#060606,direction=270,strength=5), progid:DXImageTransform.Microsoft.Shadow(color=#060606,direction=315,strength=2); } #contentbox2 { background-image:url(images/woodenmovies.jpg); top:299px; width: 1000px; margin-bottom:50px; height: 1625px; position: absolute; } #banner { background-image:url(images/totempolebanner.gif); position:absolute; top:25px; width:768px; height:120px; left:116px; } #navbar { float: left; position: absolute; top: 146px; left: 76px; width: 844px; height: 158px; font-weight:bold; } #navbar a { color:#0C6; font-size: 13px; } #navbar a:hover { color:#0F9; font-size: 13px; } #navbar2 a:hover { color:#0F9; } #navbar2 a{ text-decoration:none; color:#0C6; } #navbar2 { position: absolute; top: 4px; left: 766px; width: 273px; height: 24px; font-size: 11px; } #searchbar { position: absolute; top: 23px; left: 885px; width: 118px; height: 69px; } .css_btn_class { font-size:9px; position: relative; top:0px; right:4px; width:90px; height:25px; font-family:Verdana; font-weight:normal; -moz-border-radius:7px; -webkit-border-radius:7px; border-radius:7px; border:1px solid #35d914; padding:7px 24px; text-decoration:none; background:-webkit-gradient( linear, left top, left bottom, color-stop(5%, #ff9d00), color-stop(100%, #ffe711) ); background:-moz-linear-gradient( center top, #ff9d00 5%, #ffe711 100% ); background:-ms-linear-gradient( top, #ff9d00 5%, #ffe711 100% ); background-color:#ff9d00; color:#ff0000; display:inline-block; text-shadow:0px 0px 1px #117cff; -webkit-box-shadow: 0px 0px 0px 0px #117cff; -moz-box-shadow: 0px 0px 0px 0px #117cff; box-shadow: 0px 0px 0px 0px #117cff; background-image: url(images/unnamed.gif); background-repeat:no-repeat; background-position:right; }.css_btn_class:hover { width:90px; background:-webkit-gradient( linear, left top, left bottom, color-stop(5%, #ffe711), color-stop(100%, #ff9d00) ); background:-moz-linear-gradient( center top, #ffe711 5%, #ff9d00 100% ); background:-ms-linear-gradient( top, #ffe711 5%, #ff9d00 100% ); background-color:#ffe711; background-image: url(images/unnamed.gif); background-repeat:no-repeat; background-position:right; }.css_btn_class:active { position:relative; width:90px; top:1px; background-image: url(images/unnamed.gif); background-repeat:no-repeat; background-position:right; } /* This css button was generated by css-button-generator.com */ img {border:none;} #eagle { position:relative; right: 144px; top:299px; } #owl { top:624px; position:absolute; left:0px; } #wolf { top:949px; position:absolute; right:0px; } #hare { top:1274px; position:absolute; left:0px; } #bear { top:1599px; position:absolute; right:0px; } #footer { position: absolute; left: 393px; top: 1941px; width: 251px; color: #0F9; } #footer a { color: #0f9; } .atss { left: 0; } #infocontent { position: absolute; z-index: 3; left: 15px; top: 333px; height: 348px; width: 789px; } #mywowslider { position: absolute; z-index: 3; left: 640px; top: 684px; } #poll { position: absolute; z-index: 3; left: 815px; top: 344px; } #trailer1 { position: absolute; z-index: 3; left: 40px; top: 598px; } #trailer2 { position: absolute; z-index: 3; left: 40px; top: 948px; } #trailer1header { position: absolute; z-index: 3; left: 200px; top: 550px; width: 240px; font-style: italic; font-weight: normal; } #trailer2header { position: absolute; z-index: 3; left: 200px; top: 898px; width: 241px; height: 51px; font-style: italic; font-weight: normal; } #disqus { position: absolute; z-index: 3; left: 0px; top: 1340px; } #sources { position: absolute; z-index: 3; left: 394px; top: 1249px; width: 212px; }

    Read the article

  • how to round_corner a logo without leaving white background(transparent?) with it using pil?

    - by bdictator
    I got a square logo and I need to round_corner it, searched for a while and got the follow code "working": def round_corner_jpg(image, radius): """generate round corner for image""" mask = Image.new('RGB', image.size) #mask = Image.new('RGB', (image.size[0] - radius, image.size[1] - radius)) #mask = Image.new('L', image.size, 255) draw = aggdraw.Draw(mask) brush = aggdraw.Brush('black') width, height = mask.size draw.rectangle((0,0,width,height), aggdraw.Brush('')) #upper-left corner draw.pieslice((0,0,radius*2, radius*2), 90, 180, None, brush) #upper-right corner draw.pieslice((width - radius*2, 0, width, radius*2), 0, 90, None, brush) #bottom-left corner draw.pieslice((0, height - radius * 2, radius*2, height),180, 270, None, brush) #bottom-right corner draw.pieslice((width - radius * 2, height - radius * 2, width, height), 270, 360, None, brush) #center rectangle draw.rectangle((radius, radius, width - radius, height - radius), brush) #four edge rectangle draw.rectangle((radius, 0, width - radius, radius), brush) draw.rectangle((0, radius, radius, height-radius), brush) draw.rectangle((radius, height-radius, width-radius, height), brush) draw.rectangle((width-radius, radius, width, height-radius), brush) draw.flush() del draw return ImageChops.add(mask, image) then I saved the returned image object,however it has white background in it?how can i get rid of the white background? Thanks in advance~

    Read the article

  • @media queries - one rule overrides another?

    - by John
    I have multiple @media queries all working fine but as soon as i put in a higher max screen-width than 1024px the rules for the higher width gets applied to everything. @media screen and (max-width: 1400px) { #wrap { width: 72%; } } @media screen and (max-width: 1024px) { #slider h2 { width: 100%; } #slider img { margin: 60px 0.83333333333333% 0 2.08333333333333%; } .recent { width: 45.82%; margin: 10px 2.08333333333334% 0 1.875%; } } as you can see 1024px (and also the 800px max-width query) do not change the #wrap width and work fine. As soon as i add the 1400px max-width query it changes them to 72% for ALL sizes and does the same for any element - for instance if i set #slider img to have a margin of 40px it will show at ALL sizes even though it is only in the max-width of 1400px. Am i missing something really obvious? Been trying to work this out for the past 2 days! Thanks, John

    Read the article

  • Unable to center text in IE but works in firefox

    - by greenpool
    Can somebody point out where I'm going wrong with the following code. Text inside td elements need to be centered except for Summary and Experience. This only appears to work in Firefox/chrome. In IE8 all td text are displayed as left-justified. No matter what I try it doesn't center it. Any particular reason why this would happen? Thanks. css #viewAll { font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; width:100%; border-collapse:collapse; margin-left:10px; table-layout: fixed; } #viewAll td, #viewAll th { font-size:1.1em; border:1px solid #98bf21; word-wrap:break-word; text-align:center; overflow:hidden; } #viewAll tbody td{ padding:2px; } #viewAll th { font-size:1.1em; padding-top:5px; padding-bottom:4px; background-color:#A7C942; color:#ffffff; } table <?php echo '<table id="viewAll" class="tablesorter">'; echo '<thead>'; echo '<tr align="center">'; echo '<th style="width:70px;">Product</th>'; echo '<th style="width:105px;">Prob</th>'; echo '<th style="width:105px;">I</th>'; echo '<th style="width:60px;">Status</th>'; echo '<th style="width:120px;">Experience</th>'; echo '<th style="width:200px;">Technical Summary</th>'; echo '<th style="width:80px;">Record Created</th>'; echo '<th style="width:80px;">Record Updated</th>'; echo '<th style="width:50px;">Open</th>'; echo '</tr>'; echo '</thead>'; echo '<tbody>'; while ($data=mysqli_fetch_array($result)){ #limiting the summary text displayed in the table $limited_summary = (strlen($data['summary']) > 300) ? substr(($data['summary']),0,300) . '...' : $data['summary']; $limited_exp = (strlen($data['exp']) > 300) ? substr(($data['exp']),0,300) . '...' : $data['exp']; echo '<tr align="center"> <td style="width:70px; text-align:center;">'.$data['product'].'</td>'; //if value is '-' do not display as link if ($data['prob'] != '-'){ echo '<td style="width:105px;">'.$data['prob'].'</a></td>'; } else{ echo '<td style="width:105px; ">'.$data['prob'].'</td>'; } if ($data['i'] != '-'){ echo '<td style="width:105px; ">'.$data['i'].'</a></td>'; } else{ echo '<td style="width:105px; ">'.$data['i'].'</td>'; } echo'<td style="width:40px; " >'.$data['status'].'</td> <td style="width:120px; text-align:left;">'.$limited_cust_exp.'</td> <td style="width:200px; text-align:left;">'.$limited_summary.'</td> <td style="width:80px; ">'.$data['created'].'</td> <td style="width:80px; ">'.$data['updated'].'</td>'; if (isset($_SESSION['username'])){ echo '<td style="width:50px; "> <form action="displayRecord.php" method="get">'.' <input type="hidden" name="id" value="'. $data['id'].'" style="text-decoration: none" /><input type="submit" value="Open" /></form></td>'; }else{ echo '<td style="width:50px; "> <form action="displayRecord.php" method="get">'.' <input type="hidden" name="id" value="'. $data['id'].'" style="text-decoration: none" /><input type="submit" value="View" /></form></td>'; } echo '</tr>'; }#end of while echo '</tbody>'; echo '</table>'; ?>

    Read the article

  • ASP.NET MVC 2 Model Binding for a Collection

    - by nmarun
    Yes, my yet another post on Model Binding (previous one is here), but this one uses features presented in MVC 2. How I got to writing this blog? Well, I’m on a project where we’re doing some MVC things for a shopping cart. Let me show you what I was working with. Below are my model classes: 1: public class Product 2: { 3: public int Id { get; set; } 4: public string Name { get; set; } 5: public int Quantity { get; set; } 6: public decimal UnitPrice { get; set; } 7: } 8:   9: public class Totals 10: { 11: public decimal SubTotal { get; set; } 12: public decimal Tax { get; set; } 13: public decimal Total { get; set; } 14: } 15:   16: public class Basket 17: { 18: public List<Product> Products { get; set; } 19: public Totals Totals { get; set;} 20: } The view looks as below:  1: <h2>Shopping Cart</h2> 2:   3: <% using(Html.BeginForm()) { %> 4: 5: <h3>Products</h3> 6: <% for (int i = 0; i < Model.Products.Count; i++) 7: { %> 8: <div style="width: 100px;float:left;">Id</div> 9: <div style="width: 100px;float:left;"> 10: <%= Html.TextBox("ID", Model.Products[i].Id) %> 11: </div> 12: <div style="clear:both;"></div> 13: <div style="width: 100px;float:left;">Name</div> 14: <div style="width: 100px;float:left;"> 15: <%= Html.TextBox("Name", Model.Products[i].Name) %> 16: </div> 17: <div style="clear:both;"></div> 18: <div style="width: 100px;float:left;">Quantity</div> 19: <div style="width: 100px;float:left;"> 20: <%= Html.TextBox("Quantity", Model.Products[i].Quantity)%> 21: </div> 22: <div style="clear:both;"></div> 23: <div style="width: 100px;float:left;">Unit Price</div> 24: <div style="width: 100px;float:left;"> 25: <%= Html.TextBox("UnitPrice", Model.Products[i].UnitPrice)%> 26: </div> 27: <div style="clear:both;"><hr /></div> 28: <% } %> 29: 30: <h3>Totals</h3> 31: <div style="width: 100px;float:left;">Sub Total</div> 32: <div style="width: 100px;float:left;"> 33: <%= Html.TextBox("SubTotal", Model.Totals.SubTotal)%> 34: </div> 35: <div style="clear:both;"></div> 36: <div style="width: 100px;float:left;">Tax</div> 37: <div style="width: 100px;float:left;"> 38: <%= Html.TextBox("Tax", Model.Totals.Tax)%> 39: </div> 40: <div style="clear:both;"></div> 41: <div style="width: 100px;float:left;">Total</div> 42: <div style="width: 100px;float:left;"> 43: <%= Html.TextBox("Total", Model.Totals.Total)%> 44: </div> 45: <div style="clear:both;"></div> 46: <p /> 47: <input type="submit" name="Submit" value="Submit" /> 48: <% } %> .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; } .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; } Nothing fancy, just a bunch of div’s containing textboxes and a submit button. Just make note that the textboxes have the same name as the property they are going to display. Yea, yea, I know. I’m displaying unit price as a textbox instead of a label, but that’s beside the point (and trust me, this will not be how it’ll look on the production site!!). The way my controller works is that initially two dummy products are added to the basked object and the Totals are calculated based on what products were added in what quantities and their respective unit price. So when the page loads in edit mode, where the user can change the quantity and hit the submit button. In the ‘post’ version of the action method, the Totals get recalculated and the new total will be displayed on the screen. Here’s the code: 1: public ActionResult Index() 2: { 3: Product product1 = new Product 4: { 5: Id = 1, 6: Name = "Product 1", 7: Quantity = 2, 8: UnitPrice = 200m 9: }; 10:   11: Product product2 = new Product 12: { 13: Id = 2, 14: Name = "Product 2", 15: Quantity = 1, 16: UnitPrice = 150m 17: }; 18:   19: List<Product> products = new List<Product> { product1, product2 }; 20:   21: Basket basket = new Basket 22: { 23: Products = products, 24: Totals = ComputeTotals(products) 25: }; 26: return View(basket); 27: } 28:   29: [HttpPost] 30: public ActionResult Index(Basket basket) 31: { 32: basket.Totals = ComputeTotals(basket.Products); 33: return View(basket); 34: } .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; } That’s that. Now I run the app, I see two products with the totals section below them. I look at the view source and I see that the input controls have the right ID, the right name and the right value as well. 1: <input id="ID" name="ID" type="text" value="1" /> 2: <input id="Name" name="Name" type="text" value="Product 1" /> 3: ... 4: <input id="ID" name="ID" type="text" value="2" /> 5: <input id="Name" name="Name" type="text" value="Product 2" /> .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; } So just as a regular user would do, I change the quantity value of one of the products and hit the submit button. The ‘post’ version of the Index method gets called and I had put a break-point on line 32 in the above snippet. When I hovered my mouse on the ‘basked’ object, happily assuming that the object would be all bound and ready for use, I was surprised to see both basket.Products and basket.Totals were null. Huh? A little research and I found out that the reason the DefaultModelBinder could not do its job is because of a naming mismatch on the input controls. What I mean is that when you have to bind to a custom .net type, you need more than just the property name. You need to pass a qualified name to the name property of the input control. I modified my view and the emitted code looked as below: 1: <input id="Product_Name" name="Product.Name" type="text" value="Product 1" /> 2: ... 3: <input id="Product_Name" name="Product.Name" type="text" value="Product 2" /> 4: ... 5: <input id="Totals_SubTotal" name="Totals.SubTotal" type="text" value="550" /> .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; } Now, I update the quantity and hit the submit button and I see that the Totals object is populated, but the Products list is still null. Once again I went: ‘Hmm.. time for more research’. I found out that the way to do this is to provide the name as: 1: <%= Html.TextBox(string.Format("Products[{0}].ID", i), Model.Products[i].Id) %> 2: <!-- this will be rendered as --> 3: <input id="Products_0__ID" name="Products[0].ID" type="text" value="1" /> .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; } It was only now that I was able to see both the products and the totals being properly bound in the ‘post’ action method. Somehow, I feel this is kinda ‘clunky’ way of doing things. Seems like people at MS felt in a similar way and offered us a much cleaner way to solve this issue. The simple solution is that instead of using a Textbox, we can either use a TextboxFor or an EditorFor helper method. This one directly spits out the name of the input property as ‘Products[0].ID and so on. Cool right? I totally fell for this and changed my UI to contain EditorFor helper method. At this point, I ran the application, changed the quantity field and pressed the submit button. Of course my basket object parameter in my action method was correctly bound after these changes. I let the app complete the rest of the lines in the action method. When the page finally rendered, I did see that the quantity was changed to what I entered before the post. But, wait a minute, the totals section did not reflect the changes and showed the old values. My status: COMPLETELY PUZZLED! Just to recap, this is what my ‘post’ Index method looked like: 1: [HttpPost] 2: public ActionResult Index(Basket basket) 3: { 4: basket.Totals = ComputeTotals(basket.Products); 5: return View(basket); 6: } .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; } A careful debug confirmed that the basked.Products[0].Quantity showed the updated value and the ComputeTotals() method also returns the correct totals. But still when I passed this basket object, it ended up showing the old totals values only. I began playing a bit with the code and my first guess was that the input controls got their values from the ModelState object. For those who don’t know, the ModelState is a temporary storage area that ASP.NET MVC uses to retain incoming attempted values plus binding and validation errors. Also, the fact that input controls populate the values using data taken from: Previously attempted values recorded in the ModelState["name"].Value.AttemptedValue Explicitly provided value (<%= Html.TextBox("name", "Some value") %>) ViewData, by calling ViewData.Eval("name") FYI: ViewData dictionary takes precedence over ViewData's Model properties – read more here. These two indicators led to my guess. It took me quite some time, but finally I hit this post where Brad brilliantly explains why this is the preferred behavior. My guess was right and I, accordingly modified my code to reflect the following way: 1: [HttpPost] 2: public ActionResult Index(Basket basket) 3: { 4: // read the following posts to see why the ModelState 5: // needs to be cleared before passing it the view 6: // http://forums.asp.net/t/1535846.aspx 7: // http://forums.asp.net/p/1527149/3687407.aspx 8: if (ModelState.IsValid) 9: { 10: ModelState.Clear(); 11: } 12:   13: basket.Totals = ComputeTotals(basket.Products); 14: return View(basket); 15: } .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; } What this does is that in the case where your ModelState IS valid, it clears the dictionary. This enables the values to be read from the model directly and not from the ModelState. So the verdict is this: If you need to pass other parameters (like html attributes and the like) to your input control, use 1: <%= Html.TextBox(string.Format("Products[{0}].ID", i), Model.Products[i].Id) %> .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; } Since, in EditorFor, there is no direct and simple way of passing this information to the input control. If you don’t have to pass any such ‘extra’ piece of information to the control, then go the EditorFor way. The code used in the post can be found here.

    Read the article

  • Possible to set equal height for divs in pairs but only if browser width 960 or wider?

    - by CreateSean
    I'm working on a responsive site where I've found that I've got pairs of divs with heights that I would like to be equal, but only if the browser width is equal to or greater than 960px. Any smaller than that and the divs stack so different heights do not make a difference. DIV 1 | DIV 2 DIV 3 | DIV 4 DIV 5 | DIV 6 DIV 7 | DIV 8 Based on the above set up, Div 1 and Div 2 need to be equal height as do Div 3 and Div 4, but both pairs do not need to be equal to each other. i.e. the pair sets can have different heights but each pair must be equal. Is this possible and if so what is the best approach to take? My javascript/jQuery is rather elementary. I'm sure I could do equal heights alone, but with the pair sets I'm not sure and then adding in the need to set this to only happen if the browser is 960 or wider and I'm lost.

    Read the article

  • Building a jQuery Plug-in to make an HTML Table scrollable

    - by Rick Strahl
    Today I got a call from a customer and we were looking over an older application that uses a lot of tables to display financial and other assorted data. The application is mostly meta-data driven with lots of layout formatting automatically driven through meta data rather than through explicit hand coded HTML layouts. One of the problems in this apps are tables that display a non-fixed amount of data. The users of this app don't want to use paging to see more data, but instead want to display overflow data using a scrollbar. Many of the forms are very densely populated, often with multiple data tables that display a few rows of data in the UI at the most. This sort of layout does not lend itself well to paging, but works much better with scrollable data. Unfortunately scrollable tables are not easily created. HTML Tables are mangy beasts as anybody who's done any sort of Web development knows. Tables are finicky when it comes to styling and layout, and they have many funky quirks, especially when it comes to scrolling both of the table rows themselves or even the child columns. There's no built-in way to make tables scroll and to lock headers while you do, and while you can embed a table (or anything really) into a scrolling div with something like this: <div style="position:relative; overflow: hidden; overflow-y: scroll; height: 200px; width: 400px;"> <table id="table" style="width: 100%" class="blackborder" > <thead> <tr class="gridheader"> <th>Column 1</th> <th>Column 2</th> <th>Column 3</th> <th >Column 4</th> </tr> </thead> <tbody> <tr> <td>Column 1 Content</td> <td>Column 2 Content</td> <td>Column 3 Content</td> <td>Column 4 Content</td> </tr> <tr> <td>Column 1 Content</td> <td>Column 2 Content</td> <td>Column 3 Content</td> <td>Column 4 Content</td> </tr> … </tbody> </table> </div> </div> that won't give a very satisfying visual experience: Both the header and body scroll which looks odd. You lose context as soon as the header scrolls off the top and when you reach the bottom of the list the bottom outline of the table shows which also looks off. The the side bar shows all the way down the length of the table yet another visual miscue. In a pinch this will work, but it's ugly. What's out there? Before we go further here you should know that there are a few capable grid plug-ins out there already. Among them: Flexigrid (can work of any table as well as with AJAX data) jQuery Scrollable Table Plug-in (feature similar to what I need but not quite) jqGrid (mostly an Ajax Grid which is very powerful and works very well) But in the end none of them fit the bill of what I needed in this situation. All of these require custom CSS and some of them are fairly complex to restyle. Others are AJAX only or work better with AJAX loaded data. However, I need to actually try (as much as possible) to maintain the original styling of the tables without requiring extensive re-styling. Building the makeTableScrollable() Plug-in To make a table scrollable requires rearranging the table a bit. In the plug-in I built I create two <div> tags and split the table into two: one for the table header and one for the table body. The bottom <div> tag then contains only the table's row data and can be scrolled while the header stays fixed. Using jQuery the basic idea is pretty simple: You create the divs, copy the original table into the bottom, then clone the table, clear all content append the <thead> section, into new table and then copy that table into the second header <div>. Easy as pie, right? Unfortunately it's a bit more complicated than that as it's tricky to get the width of the table right to account for the scrollbar (by adding a small column) and making sure the borders properly line up for the two tables. A lot of style settings have to be made to ensure the table is a fixed size, to remove and reattach borders, to add extra space to allow for the scrollbar and so forth. The end result of my plug-in is a table with a scrollbar. Using the same table I used earlier the result looks like this: To create it, I use the following jQuery plug-in logic to select my table and run the makeTableScrollable() plug-in against the selector: $("#table").makeTableScrollable( { cssClass:"blackborder"} ); Without much further ado, here's the short code for the plug-in: (function ($) { $.fn.makeTableScrollable = function (options) { return this.each(function () { var $table = $(this); var opt = { // height of the table height: "250px", // right padding added to support the scrollbar rightPadding: "10px", // cssclass used for the wrapper div cssClass: "" } $.extend(opt, options); var $thead = $table.find("thead"); var $ths = $thead.find("th"); var id = $table.attr("id"); var cssClass = $table.attr("class"); if (!id) id = "_table_" + new Date().getMilliseconds().ToString(); $table.width("+=" + opt.rightPadding); $table.css("border-width", 0); // add a column to all rows of the table var first = true; $table.find("tr").each(function () { var row = $(this); if (first) { row.append($("<th>").width(opt.rightPadding)); first = false; } else row.append($("<td>").width(opt.rightPadding)); }); // force full sizing on each of the th elemnts $ths.each(function () { var $th = $(this); $th.css("width", $th.width()); }); // Create the table wrapper div var $tblDiv = $("<div>").css({ position: "relative", overflow: "hidden", overflowY: "scroll" }) .addClass(opt.cssClass); var width = $table.width(); $tblDiv.width(width).height(opt.height) .attr("id", id + "_wrapper") .css("border-top", "none"); // Insert before $tblDiv $tblDiv.insertBefore($table); // then move the table into it $table.appendTo($tblDiv); // Clone the div for header var $hdDiv = $tblDiv.clone(); $hdDiv.empty(); var width = $table.width(); $hdDiv.attr("style", "") .css("border-bottom", "none") .width(width) .attr("id", id + "_wrapper_header"); // create a copy of the table and remove all children var $newTable = $($table).clone(); $newTable.empty() .attr("id", $table.attr("id") + "_header"); $thead.appendTo($newTable); $hdDiv.insertBefore($tblDiv); $newTable.appendTo($hdDiv); $table.css("border-width", 0); }); } })(jQuery); Oh sweet spaghetti code :-) The code starts out by dealing the parameters that can be passed in the options object map: height The height of the full table/structure. The height of the outside wrapper container. Defaults to 200px. rightPadding The padding that is added to the right of the table to account for the scrollbar. Creates a column of this width and injects it into the table. If too small the rightmost column might get truncated. if too large the empty column might show. cssClass The CSS class of the wrapping container that appears to wrap the table. If you want a border around your table this class should probably provide it since the plug-in removes the table border. The rest of the code is obtuse, but pretty straight forward. It starts by creating a new column in the table to accommodate the width of the scrollbar and avoid clipping of text in the rightmost column. The width of the columns is explicitly set in the header elements to force the size of the table to be fixed and to provide the same sizing when the THEAD section is moved to a new copied table later. The table wrapper div is created, formatted and the table is moved into it. The new wrapper div is cloned for the header wrapper and configured. Finally the actual table is cloned and cleared of all elements. The original table's THEAD section is then moved into the new table. At last the new table is added to the header <div>, and the header <div> is inserted before the table wrapper <div>. I'm always amazed how easy jQuery makes it to do this sort of re-arranging, and given of what's happening the amount of code is rather small. Disclaimer: Your mileage may vary A word of warning: I make no guarantees about the code above. It's a first cut and I provided this here mainly to demonstrate the concepts of decomposing and reassembling an HTML layout :-) which jQuery makes so nice and easy. I tested this component against the typical scenarios we plan on using it for which are tables that use a few well known styles (or no styling at all). I suspect if you have complex styling on your <table> tag that things might not go so well. If you plan on using this plug-in you might want to minimize your styling of the table tag and defer any border formatting using the class passed in via the cssClass parameter, which ends up on the two wrapper div's that wrap the header and body rows. There's also no explicit support for footers. I rarely if ever use footers (when not using paging that is), so I didn't feel the need to add footer support. However, if you need that it's not difficult to add - the logic is the same as adding the header. The plug-in relies on a well-formatted table that has THEAD and TBODY sections along with TH tags in the header. Note that ASP.NET WebForm DataGrids and GridViews by default do not generate well-formatted table HTML. You can look at my Adding proper THEAD sections to a GridView post for more info on how to get a GridView to render properly. The plug-in has no dependencies other than jQuery. Even with the limitations in mind I hope this might be useful to some of you. I know I've already identified a number of places in my own existing applications where I will be plugging this in almost immediately. Resources Download Sample and Plug-in code Latest version in the West Wind Web & AJAX Toolkit Repository © Rick Strahl, West Wind Technologies, 2005-2011Posted in jQuery  HTML  ASP.NET  

    Read the article

  • CCSpriteHole in cocos2d 2.0?

    - by rakkarage
    i was using this cocos2d class CCSpriteHole in cocos2d 1.0 fine... http://jpsarda.tumblr.com/post/15779708304/new-cocos2d-iphone-extensions-a-progress-bar-and-a i am trying to convert it to cocos2d 2.0... i got it to compile by changing glVertexPointer to glVertexAttribPointer like in the 2.0 version of CCSpriteScale9 here http://jpsarda.tumblr.com/post/9162433577/scale9grid-for-cocos2d and changing contentSizeInPixels_ to contentSize_... -(id) init { if( (self=[super init]) ) { opacityModifyRGB_ = YES; opacity_ = 255; color_ = colorUnmodified_ = ccWHITE; capSize=capSizeInPixels=CGSizeZero; //Not used blendFunc_.src = CC_BLEND_SRC; blendFunc_.dst = CC_BLEND_DST; // update texture (calls updateBlendFunc) [self setTexture:nil]; // default transform anchor anchorPoint_ = ccp(0.5f, 0.5f); vertexDataCount=24; vertexData = (ccV2F_C4F_T2F*) malloc(vertexDataCount * sizeof(ccV2F_C4F_T2F)); [self setTextureRectInPixels:CGRectZero untrimmedSize:CGSizeZero]; } return self; } -(id) initWithTexture:(CCTexture2D*)texture rect:(CGRect)rect { NSAssert(texture!=nil, @"Invalid texture for sprite"); // IMPORTANT: [self init] and not [super init]; if( (self = [self init]) ) { [self setTexture:texture]; [self setTextureRect:rect]; } return self; } -(id) initWithTexture:(CCTexture2D*)texture { NSAssert(texture!=nil, @"Invalid texture for sprite"); CGRect rect = CGRectZero; rect.size = texture.contentSize; return [self initWithTexture:texture rect:rect]; } -(id) initWithFile:(NSString*)filename { NSAssert(filename!=nil, @"Invalid filename for sprite"); CCTexture2D *texture = [[CCTextureCache sharedTextureCache] addImage: filename]; if( texture ) return [self initWithTexture:texture]; return nil; } +(id)spriteWithFile:(NSString*)f { return [[self alloc] initWithFile:f]; } - (void) dealloc { if (vertexData) free(vertexData); } -(void) updateColor { ccColor4F color4; color4.r=(float)color_.r/255.0f; color4.g=(float)color_.g/255.0f; color4.b=(float)color_.b/255.0f; color4.a=(float)opacity_/255.0f; for (int i=0; i<vertexDataCount; i++) { vertexData[i].colors=color4; } } -(void)updateTextureCoords:(CGRect)rect { CCTexture2D *tex = texture_; if(!tex) return; float atlasWidth = (float)tex.pixelsWide; float atlasHeight = (float)tex.pixelsHigh; float left,right,top,bottom; left = rect.origin.x/atlasWidth; right = left + rect.size.width/atlasWidth; top = rect.origin.y/atlasHeight; bottom = top + rect.size.height/atlasHeight; // // |/|/|/| // CGSize capTexCoordsSize=CGSizeMake(capSizeInPixels.width/atlasWidth, capSizeInPixels.height/atlasHeight); // From left to right //Top band // Left vertexData[0].texCoords=(ccTex2F){left,top}; vertexData[1].texCoords=(ccTex2F){left,top+capTexCoordsSize.height}; vertexData[2].texCoords=(ccTex2F){left+capTexCoordsSize.width,top}; vertexData[3].texCoords=(ccTex2F){left+capTexCoordsSize.width,top+capTexCoordsSize.height}; // Center vertexData[4].texCoords=(ccTex2F){right-capTexCoordsSize.width,top}; vertexData[5].texCoords=(ccTex2F){right-capTexCoordsSize.width,top+capTexCoordsSize.height}; // Right vertexData[6].texCoords=(ccTex2F){right,top}; vertexData[7].texCoords=(ccTex2F){right,top+capTexCoordsSize.height}; //Center band // Left vertexData[8].texCoords=(ccTex2F){left,bottom-capTexCoordsSize.height}; vertexData[9].texCoords=(ccTex2F){left,top+capTexCoordsSize.height}; vertexData[10].texCoords=(ccTex2F){left+capTexCoordsSize.width,bottom-capTexCoordsSize.height}; vertexData[11].texCoords=(ccTex2F){left+capTexCoordsSize.width,top+capTexCoordsSize.height}; // Center vertexData[12].texCoords=(ccTex2F){right-capTexCoordsSize.width,bottom-capTexCoordsSize.height}; vertexData[13].texCoords=(ccTex2F){right-capTexCoordsSize.width,top+capTexCoordsSize.height}; // Right vertexData[14].texCoords=(ccTex2F){right,bottom-capTexCoordsSize.height}; vertexData[15].texCoords=(ccTex2F){right,top+capTexCoordsSize.height}; //Bottom band //Left vertexData[16].texCoords=(ccTex2F){left,bottom}; vertexData[17].texCoords=(ccTex2F){left,bottom-capTexCoordsSize.height}; vertexData[18].texCoords=(ccTex2F){left+capTexCoordsSize.width,bottom}; vertexData[19].texCoords=(ccTex2F){left+capTexCoordsSize.width,bottom-capTexCoordsSize.height}; // Center vertexData[20].texCoords=(ccTex2F){right-capTexCoordsSize.width,bottom}; vertexData[21].texCoords=(ccTex2F){right-capTexCoordsSize.width,bottom-capTexCoordsSize.height}; // Right vertexData[22].texCoords=(ccTex2F){right,bottom}; vertexData[23].texCoords=(ccTex2F){right,bottom-capTexCoordsSize.height}; } -(void) updateVertices { float left=0; //-spriteSizeInPixels.width*0.5f; float right=left+contentSize_.width; float bottom=0; //-spriteSizeInPixels.height*0.5f; float top=bottom+contentSize_.height; float holeLeft=holeRect.origin.x*CC_CONTENT_SCALE_FACTOR(); float holeRight=holeLeft+holeRect.size.width*CC_CONTENT_SCALE_FACTOR(); float holeBottom=holeRect.origin.y*CC_CONTENT_SCALE_FACTOR(); float holeTop=holeBottom+holeRect.size.height*CC_CONTENT_SCALE_FACTOR(); // // |/|/|/| // // From left to right //Top band // Left vertexData[0].vertices=(ccVertex2F){left,top}; vertexData[1].vertices=(ccVertex2F){left,holeTop}; vertexData[2].vertices=(ccVertex2F){holeLeft,top}; vertexData[3].vertices=(ccVertex2F){holeLeft,holeTop}; // Center vertexData[4].vertices=(ccVertex2F){holeRight,top}; vertexData[5].vertices=(ccVertex2F){holeRight,holeTop}; // Right vertexData[6].vertices=(ccVertex2F){right,top}; vertexData[7].vertices=(ccVertex2F){right,holeTop}; //Center band // Left vertexData[8].vertices=(ccVertex2F){left,holeBottom}; vertexData[9].vertices=(ccVertex2F){left,holeTop}; vertexData[10].vertices=(ccVertex2F){holeLeft,holeBottom}; vertexData[11].vertices=(ccVertex2F){holeLeft,holeTop}; // Center vertexData[12].vertices=(ccVertex2F){holeRight,holeBottom}; vertexData[13].vertices=(ccVertex2F){holeRight,holeTop}; // Right vertexData[14].vertices=(ccVertex2F){right,holeBottom}; vertexData[15].vertices=(ccVertex2F){right,holeTop}; //Bottom band //Left vertexData[16].vertices=(ccVertex2F){left,bottom}; vertexData[17].vertices=(ccVertex2F){left,holeBottom}; vertexData[18].vertices=(ccVertex2F){holeLeft,bottom}; vertexData[19].vertices=(ccVertex2F){holeLeft,holeBottom}; // Center vertexData[20].vertices=(ccVertex2F){holeRight,bottom}; vertexData[21].vertices=(ccVertex2F){holeRight,holeBottom}; // Right vertexData[22].vertices=(ccVertex2F){right,bottom}; vertexData[23].vertices=(ccVertex2F){right,holeBottom}; } -(void) setHole:(CGRect)r inRect:(CGRect)totalSurface { holeRect=r; self.contentSize=totalSurface.size; holeRect.origin=ccpSub(holeRect.origin,totalSurface.origin); CGPoint holeCenter=ccp(holeRect.origin.x+holeRect.size.width*0.5f,holeRect.origin.y+holeRect.size.height*0.5f); self.anchorPoint=ccp(holeCenter.x/contentSize_.width,holeCenter.y/contentSize_.height); //[self updateTextureCoords:rectInPixels_]; [self updateVertices]; [self updateColor]; } -(void) draw { BOOL newBlend = NO; if( blendFunc_.src != CC_BLEND_SRC || blendFunc_.dst != CC_BLEND_DST ) { newBlend = YES; glBlendFunc( blendFunc_.src, blendFunc_.dst ); } glBindTexture(GL_TEXTURE_2D, [texture_ name]); glVertexAttribPointer(kCCVertexAttrib_Position, 2, GL_FLOAT, GL_FALSE, sizeof(ccV2F_C4F_T2F), &vertexData[0].vertices); glVertexAttribPointer(kCCVertexAttrib_TexCoords, 2, GL_FLOAT, GL_FALSE, sizeof(ccV2F_C4F_T2F), &vertexData[0].texCoords); glVertexAttribPointer(kCCVertexAttrib_Color, 4, GL_FLOAT, GL_FALSE, sizeof(ccV2F_C4F_T2F), &vertexData[0].colors); glDrawArrays(GL_TRIANGLE_STRIP, 0, 8); glVertexAttribPointer(kCCVertexAttrib_Position, 2, GL_FLOAT, GL_FALSE, sizeof(ccV2F_C4F_T2F), &vertexData[8].vertices); glVertexAttribPointer(kCCVertexAttrib_TexCoords, 2, GL_FLOAT, GL_FALSE, sizeof(ccV2F_C4F_T2F), &vertexData[8].texCoords); glVertexAttribPointer(kCCVertexAttrib_Color, 4, GL_FLOAT, GL_FALSE, sizeof(ccV2F_C4F_T2F), &vertexData[8].colors); glDrawArrays(GL_TRIANGLE_STRIP, 0, 8); glVertexAttribPointer(kCCVertexAttrib_Position, 2, GL_FLOAT, GL_FALSE, sizeof(ccV2F_C4F_T2F), &vertexData[16].vertices); glVertexAttribPointer(kCCVertexAttrib_TexCoords, 2, GL_FLOAT, GL_FALSE, sizeof(ccV2F_C4F_T2F), &vertexData[16].texCoords); glVertexAttribPointer(kCCVertexAttrib_Color, 4, GL_FLOAT, GL_FALSE, sizeof(ccV2F_C4F_T2F), &vertexData[16].colors); glDrawArrays(GL_TRIANGLE_STRIP, 0, 8); if( newBlend ) glBlendFunc(CC_BLEND_SRC, CC_BLEND_DST); } -(void)setTextureRectInPixels:(CGRect)rect untrimmedSize:(CGSize)untrimmedSize { rectInPixels_ = rect; rect_ = CC_RECT_PIXELS_TO_POINTS( rect ); //[self setContentSizeInPixels:untrimmedSize]; [self updateTextureCoords:rectInPixels_]; } -(void)setTextureRect:(CGRect)rect { CGRect rectInPixels = CC_RECT_POINTS_TO_PIXELS( rect ); [self setTextureRectInPixels:rectInPixels untrimmedSize:rectInPixels.size]; } // // RGBA protocol // #pragma mark CCSpriteHole - RGBA protocol -(GLubyte) opacity { return opacity_; } -(void) setOpacity:(GLubyte) anOpacity { opacity_ = anOpacity; // special opacity for premultiplied textures if( opacityModifyRGB_ ) [self setColor: (opacityModifyRGB_ ? colorUnmodified_ : color_ )]; [self updateColor]; } - (ccColor3B) color { if(opacityModifyRGB_){ return colorUnmodified_; } return color_; } -(void) setColor:(ccColor3B)color3 { color_ = colorUnmodified_ = color3; if( opacityModifyRGB_ ){ color_.r = color3.r * opacity_/255; color_.g = color3.g * opacity_/255; color_.b = color3.b * opacity_/255; } [self updateColor]; } -(void) setOpacityModifyRGB:(BOOL)modify { ccColor3B oldColor = self.color; opacityModifyRGB_ = modify; self.color = oldColor; } -(BOOL) doesOpacityModifyRGB { return opacityModifyRGB_; } #pragma mark CCSpriteHole - CocosNodeTexture protocol -(void) updateBlendFunc { if( !texture_ || ! [texture_ hasPremultipliedAlpha] ) { blendFunc_.src = GL_SRC_ALPHA; blendFunc_.dst = GL_ONE_MINUS_SRC_ALPHA; [self setOpacityModifyRGB:NO]; } else { blendFunc_.src = CC_BLEND_SRC; blendFunc_.dst = CC_BLEND_DST; [self setOpacityModifyRGB:YES]; } } -(void) setTexture:(CCTexture2D*)texture { // accept texture==nil as argument NSAssert( !texture || [texture isKindOfClass:[CCTexture2D class]], @"setTexture expects a CCTexture2D. Invalid argument"); texture_ = texture; [self updateBlendFunc]; } -(CCTexture2D*) texture { return texture_; } @end but now positioning and scaling seem to not work? and it starts in the wrong position... but changing the opacity still works. so i was wondering if anyone can see why my 2.0 version is not working? or if maybe there is a better way to do a sprite hole with cocos2d/opengl 2.0? shaders? thanks

    Read the article

  • -Java- Swing GUI - Moving around components specifically with layouts

    - by Xemiru Scarlet Sanzenin
    I'm making a little test GUI for something I'm making. However, problems occur with the positioning of the panels. public winInit() { super("Chatterbox - Login"); try { UIManager.setLookAndFeel(UIManager.getSystemLookAndFeelClassName()); } catch(ClassNotFoundException e) { } catch (InstantiationException e) { } catch (IllegalAccessException e) { } catch (UnsupportedLookAndFeelException e) { } setSize(300,135); pn1 = new JPanel(); pn2 = new JPanel(); pn3 = new JPanel(); l1 = new JLabel("Username"); l2 = new JLabel("Password"); l3 = new JLabel("Random text here"); l4 = new JLabel("Server Address"); l5 = new JLabel("No address set."); i1 = new JTextField(10); p1 = new JPasswordField(10); b1 = new JButton("Connect"); b2 = new JButton("Register"); b3 = new JButton("Set IP"); l4.setBounds(10, 12, getDim(l4).width, getDim(l4).height); l1.setBounds(10, 35, getDim(l1).width, getDim(l1).height); l2.setBounds(10, 60, getDim(l2).width, getDim(l2).height); l3.setBounds(10, 85, getDim(l3).width, getDim(l3).height); l5.setBounds(l4.getBounds().width + 14, 12, l5.getPreferredSize().width, l5.getPreferredSize().height); l5.setForeground(Color.gray); i1.setBounds(getDim(l1).width + 15, 35, getDim(i1).width, getDim(i1).height); p1.setBounds(getDim(l1).width + 15, 60, getDim(p1).width, getDim(p1).height); b1.setBounds(getDim(l1).width + getDim(i1).width + 23, 34, getDim(b2).width, getDim(b1).height - 5); b2.setBounds(getDim(l1).width + getDim(i1).width + 23, 60, getDim(b2).width, getDim(b2).height - 5); b3.setBounds(getDim(l1).width + getDim(i1).width + 23, 10, etDim(b2).width, getDim(b3).height - 5); b1.addActionListener(clickButton); b2.addActionListener(clickButton); b3.addActionListener(clickButton); pn1.setLayout(new FlowLayout(FlowLayout.RIGHT)); pn2.setLayout(new FlowLayout(FlowLayout.RIGHT)); pn1.add(l1); pn1.add(i1); pn1.add(b1); pn2.add(l2); pn2.add(p1); pn2.add(b2); add(pn1); add(pn2); } I am attempting to use FlowLayout to position the panels in the way desired. I'd use BorderLayout while adding, but the vertical spacing is too far away when I just use directions closest to one another. The output of this code is to create a window, 300,150, place whatever's in the two panels in the exact same spaces. Yes, I realize there's useless code there with setBounds(), but that was just me screwing around with Absolute Positioning, which wasn't working out for me either.

    Read the article

  • Navigating Libgdx Menu with arrow keys or controller

    - by Phil Royer
    I'm attempting to make my menu navigable with the arrow keys or via the d-pad on a controller. So Far I've had no luck. The question is: Can someone walk me through how to make my current menu or any libgdx menu keyboard accessible? I'm a bit noobish with some stuff and I come from a Javascript background. Here's an example of what I'm trying to do: http://dl.dropboxusercontent.com/u/39448/webgl/qb/qb.html For a simple menu that you can just add a few buttons to and it run out of the box use this: http://www.sadafnoor.com/blog/how-to-create-simple-menu-in-libgdx/ Or you can use my code but I use a lot of custom styles. And here's an example of my code: import aurelienribon.tweenengine.Timeline; import aurelienribon.tweenengine.Tween; import aurelienribon.tweenengine.TweenManager; import com.badlogic.gdx.Game; import com.badlogic.gdx.Gdx; import com.badlogic.gdx.Screen; import com.badlogic.gdx.graphics.GL20; import com.badlogic.gdx.graphics.Texture; import com.badlogic.gdx.graphics.g2d.Sprite; import com.badlogic.gdx.graphics.g2d.SpriteBatch; import com.badlogic.gdx.graphics.g2d.TextureAtlas; import com.badlogic.gdx.math.Vector2; import com.badlogic.gdx.scenes.scene2d.Actor; import com.badlogic.gdx.scenes.scene2d.InputEvent; import com.badlogic.gdx.scenes.scene2d.InputListener; import com.badlogic.gdx.scenes.scene2d.Stage; import com.badlogic.gdx.scenes.scene2d.ui.Skin; import com.badlogic.gdx.scenes.scene2d.ui.Table; import com.badlogic.gdx.scenes.scene2d.ui.TextButton; import com.badlogic.gdx.scenes.scene2d.utils.Align; import com.badlogic.gdx.scenes.scene2d.utils.ClickListener; import com.project.game.tween.ActorAccessor; public class MainMenu implements Screen { private SpriteBatch batch; private Sprite menuBG; private Stage stage; private TextureAtlas atlas; private Skin skin; private Table table; private TweenManager tweenManager; @Override public void render(float delta) { Gdx.gl.glClearColor(0, 0, 0, 1); Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT); batch.begin(); menuBG.draw(batch); batch.end(); //table.debug(); stage.act(delta); stage.draw(); //Table.drawDebug(stage); tweenManager.update(delta); } @Override public void resize(int width, int height) { menuBG.setSize(width, height); stage.setViewport(width, height, false); table.invalidateHierarchy(); } @Override public void resume() { } @Override public void show() { stage = new Stage(); Gdx.input.setInputProcessor(stage); batch = new SpriteBatch(); atlas = new TextureAtlas("ui/atlas.pack"); skin = new Skin(Gdx.files.internal("ui/menuSkin.json"), atlas); table = new Table(skin); table.setBounds(0, 0, Gdx.graphics.getWidth(), Gdx.graphics.getHeight()); // Set Background Texture menuBackgroundTexture = new Texture("images/mainMenuBackground.png"); menuBG = new Sprite(menuBackgroundTexture); menuBG.setSize(Gdx.graphics.getWidth(), Gdx.graphics.getHeight()); // Create Main Menu Buttons // Button Play TextButton buttonPlay = new TextButton("START", skin, "inactive"); buttonPlay.addListener(new ClickListener() { @Override public void clicked(InputEvent event, float x, float y) { ((Game) Gdx.app.getApplicationListener()).setScreen(new LevelMenu()); } }); buttonPlay.addListener(new InputListener() { public boolean keyDown (InputEvent event, int keycode) { System.out.println("down"); return true; } }); buttonPlay.padBottom(12); buttonPlay.padLeft(20); buttonPlay.getLabel().setAlignment(Align.left); // Button EXTRAS TextButton buttonExtras = new TextButton("EXTRAS", skin, "inactive"); buttonExtras.addListener(new ClickListener() { @Override public void clicked(InputEvent event, float x, float y) { ((Game) Gdx.app.getApplicationListener()).setScreen(new ExtrasMenu()); } }); buttonExtras.padBottom(12); buttonExtras.padLeft(20); buttonExtras.getLabel().setAlignment(Align.left); // Button Credits TextButton buttonCredits = new TextButton("CREDITS", skin, "inactive"); buttonCredits.addListener(new ClickListener() { @Override public void clicked(InputEvent event, float x, float y) { ((Game) Gdx.app.getApplicationListener()).setScreen(new Credits()); } }); buttonCredits.padBottom(12); buttonCredits.padLeft(20); buttonCredits.getLabel().setAlignment(Align.left); // Button Settings TextButton buttonSettings = new TextButton("SETTINGS", skin, "inactive"); buttonSettings.addListener(new ClickListener() { @Override public void clicked(InputEvent event, float x, float y) { ((Game) Gdx.app.getApplicationListener()).setScreen(new Settings()); } }); buttonSettings.padBottom(12); buttonSettings.padLeft(20); buttonSettings.getLabel().setAlignment(Align.left); // Button Exit TextButton buttonExit = new TextButton("EXIT", skin, "inactive"); buttonExit.addListener(new ClickListener() { @Override public void clicked(InputEvent event, float x, float y) { Gdx.app.exit(); } }); buttonExit.padBottom(12); buttonExit.padLeft(20); buttonExit.getLabel().setAlignment(Align.left); // Adding Heading-Buttons to the cue table.add().width(190); table.add().width((table.getWidth() / 10) * 3); table.add().width((table.getWidth() / 10) * 5).height(140).spaceBottom(50); table.add().width(190).row(); table.add().width(190); table.add(buttonPlay).spaceBottom(20).width(460).height(110); table.add().row(); table.add().width(190); table.add(buttonExtras).spaceBottom(20).width(460).height(110); table.add().row(); table.add().width(190); table.add(buttonCredits).spaceBottom(20).width(460).height(110); table.add().row(); table.add().width(190); table.add(buttonSettings).spaceBottom(20).width(460).height(110); table.add().row(); table.add().width(190); table.add(buttonExit).width(460).height(110); table.add().row(); stage.addActor(table); // Animation Settings tweenManager = new TweenManager(); Tween.registerAccessor(Actor.class, new ActorAccessor()); // Heading and Buttons Fade In Timeline.createSequence().beginSequence() .push(Tween.set(buttonPlay, ActorAccessor.ALPHA).target(0)) .push(Tween.set(buttonExtras, ActorAccessor.ALPHA).target(0)) .push(Tween.set(buttonCredits, ActorAccessor.ALPHA).target(0)) .push(Tween.set(buttonSettings, ActorAccessor.ALPHA).target(0)) .push(Tween.set(buttonExit, ActorAccessor.ALPHA).target(0)) .push(Tween.to(buttonPlay, ActorAccessor.ALPHA, .5f).target(1)) .push(Tween.to(buttonExtras, ActorAccessor.ALPHA, .5f).target(1)) .push(Tween.to(buttonCredits, ActorAccessor.ALPHA, .5f).target(1)) .push(Tween.to(buttonSettings, ActorAccessor.ALPHA, .5f).target(1)) .push(Tween.to(buttonExit, ActorAccessor.ALPHA, .5f).target(1)) .end().start(tweenManager); tweenManager.update(Gdx.graphics.getDeltaTime()); } public static Vector2 getStageLocation(Actor actor) { return actor.localToStageCoordinates(new Vector2(0, 0)); } @Override public void dispose() { stage.dispose(); atlas.dispose(); skin.dispose(); menuBG.getTexture().dispose(); } @Override public void hide() { dispose(); } @Override public void pause() { } }

    Read the article

  • WPF storyboard animation issue when using VisualBrush

    - by Flack
    Hey guys, I was playing around with storyboards, a flipping animation, and visual brushes. I have encountered an issue though. Below is the xaml and code-behind of a small sample I quickly put together to try to demonstrate the problem. When you first start the app, you are presented with a red square and two buttons. If you click the "Flip" button, the red square will "flip" over and a blue one will appear. In reality, all that is happening is that the scale of the width of the StackPanel that the red square is in is being decreased until it reaches zero and then the StackPanel where a blue square is, whose width is initially scaled to zero, has its width increased. If you click the "Flip" button a few times, the animation looks ok and smooth. Now, if you hit the "Reflection" button, a reflection of the red/blue buttons is added to their respective StackPanels. Hitting the "Flip" button now will still cause the flip animation but it is no longer a smooth animation. The StackPanels width often does not shrink to zero. The width shrinks somewhat but then just stops before being completely invisible. Then the other StackPanel appears as usual. The only thing that changed was adding the reflection, which is just a VisualBrush. Below is the code. Does anyone have any idea why the animations are different between the two cases (stalling in the second case)? Thanks. <Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xml:lang="en-US" xmlns:d="http://schemas.microsoft.com/expression/blend/2006" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" x:Class="WpfFlipTest.Window1" x:Name="Window" Title="Window1" Width="214" Height="224"> <Window.Resources> <Storyboard x:Key="sbFlip"> <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="redStack" Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleX)"> <SplineDoubleKeyFrame KeyTime="00:00:00.4" Value="0"/> </DoubleAnimationUsingKeyFrames> <DoubleAnimationUsingKeyFrames BeginTime="00:00:00.4" Storyboard.TargetName="blueStack" Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleX)"> <SplineDoubleKeyFrame KeyTime="00:00:00.8" Value="1"/> </DoubleAnimationUsingKeyFrames> </Storyboard> <Storyboard x:Key="sbFlipBack"> <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="blueStack" Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleX)"> <SplineDoubleKeyFrame KeyTime="00:00:00.4" Value="0"/> </DoubleAnimationUsingKeyFrames> <DoubleAnimationUsingKeyFrames BeginTime="00:00:00.4" Storyboard.TargetName="redStack" Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleX)"> <SplineDoubleKeyFrame KeyTime="00:00:00.8" Value="1"/> </DoubleAnimationUsingKeyFrames> </Storyboard> </Window.Resources> <Grid x:Name="LayoutRoot" Background="Gray"> <Grid.RowDefinitions> <RowDefinition Height="Auto"/> <RowDefinition Height="Auto"/> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width="Auto"/> <ColumnDefinition Width="Auto"/> </Grid.ColumnDefinitions> <StackPanel Name="redStack" Grid.Row="0" Grid.Column="0" RenderTransformOrigin="0.5,0.5"> <StackPanel.RenderTransform> <ScaleTransform/> </StackPanel.RenderTransform> <Border Name="redBorder" BorderBrush="Transparent" BorderThickness="4" Width="Auto" Height="Auto"> <Button Margin="0" Name="redButton" Height="75" Background="Red" Width="105" /> </Border> <Border Width="{Binding ElementName=redBorder, Path=ActualWidth}" Height="{Binding ElementName=redBorder, Path=ActualHeight}" Opacity="0.2" BorderBrush="Transparent" BorderThickness="4" Name="redRefelction" Visibility="Collapsed"> <Border.OpacityMask> <LinearGradientBrush StartPoint="0,0" EndPoint="0,1"> <LinearGradientBrush.GradientStops> <GradientStop Offset="0" Color="Black"/> <GradientStop Offset=".6" Color="Transparent"/> </LinearGradientBrush.GradientStops> </LinearGradientBrush> </Border.OpacityMask> <Border.Background> <VisualBrush Visual="{Binding ElementName=redButton}"> <VisualBrush.Transform> <ScaleTransform ScaleX="1" ScaleY="-1" CenterX="52.5" CenterY="37.5" /> </VisualBrush.Transform> </VisualBrush> </Border.Background> </Border> </StackPanel> <StackPanel Name="blueStack" Grid.Row="0" Grid.Column="0" RenderTransformOrigin="0.5,0.5"> <StackPanel.RenderTransform> <ScaleTransform ScaleX="0"/> </StackPanel.RenderTransform> <Border Name="blueBorder" BorderBrush="Transparent" BorderThickness="4" Width="Auto" Height="Auto"> <Button Grid.Row="0" Grid.Column="1" Margin="0" Width="105" Background="Blue" Name="blueButton" Height="75"/> </Border> <Border Width="{Binding ElementName=blueBorder, Path=ActualWidth}" Height="{Binding ElementName=blueBorder, Path=ActualHeight}" Opacity="0.2" BorderBrush="Transparent" BorderThickness="4" Name="blueRefelction" Visibility="Collapsed"> <Border.OpacityMask> <LinearGradientBrush StartPoint="0,0" EndPoint="0,1"> <LinearGradientBrush.GradientStops> <GradientStop Offset="0" Color="Black"/> <GradientStop Offset=".6" Color="Transparent"/> </LinearGradientBrush.GradientStops> </LinearGradientBrush> </Border.OpacityMask> <Border.Background> <VisualBrush Visual="{Binding ElementName=blueButton}"> <VisualBrush.Transform> <ScaleTransform ScaleX="1" ScaleY="-1" CenterX="52.5" CenterY="37.5" /> </VisualBrush.Transform> </VisualBrush> </Border.Background> </Border> </StackPanel> <Button Grid.Row="1" Click="FlipButton_Click" Height="19.45" HorizontalAlignment="Left" VerticalAlignment="Top" Width="76">Flip</Button> <Button Grid.Row="0" Grid.Column="1" Click="ReflectionButton_Click" Height="19.45" HorizontalAlignment="Left" VerticalAlignment="Top" Width="76">Reflection</Button> </Grid> </Window> Here are the button click handlers: using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Windows; using System.Windows.Controls; using System.Windows.Data; using System.Windows.Documents; using System.Windows.Input; using System.Windows.Media; using System.Windows.Media.Imaging; using System.Windows.Navigation; using System.Windows.Shapes; using System.Windows.Media.Animation; namespace WpfFlipTest { public partial class Window1 : Window { public Window1() { InitializeComponent(); } bool flipped = false; private void FlipButton_Click(object sender, RoutedEventArgs e) { Storyboard sbFlip = (Storyboard)Resources["sbFlip"]; Storyboard sbFlipBack = (Storyboard)Resources["sbFlipBack"]; if (flipped) { sbFlipBack.Begin(); flipped = false; } else { sbFlip.Begin(); flipped = true; } } bool reflection = false; private void ReflectionButton_Click(object sender, RoutedEventArgs e) { if (reflection) { reflection = false; redRefelction.Visibility = Visibility.Collapsed; blueRefelction.Visibility = Visibility.Collapsed; } else { reflection = true; redRefelction.Visibility = Visibility.Visible; blueRefelction.Visibility = Visibility.Visible; } } } } UPDATE: I have been testing this some more to try to find out what is causing the issue I am seeing and I believe I found what is causing the issue. Below I have pasted new xaml and code-behind. The new sample below is very similar to the original sample, with a few minor modifications. The xaml basically consists of two stack panels, each containing two borders. The second border in each stack panel is a visual brush (a reflection of the border above it). Now, when I click the "Flip" button, one stack panel gets its ScaleX reduced to zero, while the second stack panel, whose initial ScaleX is zero, gets its ScaleX increased to 1. This animation gives the illusion of flipping. There are also two textblocks which display the scale factor of each stack panel. I added those to try to diagnose my issue. The issue is (as described in the oringal post) that the flipping animation is not smooth. Every time I hit the flip button, the animation starts but whenever the ScaleX factor gets to around .14 to .16, the animation looks like it stalls and the stack panels never have there ScaleX reduced to zero, so they never totally disappear. Now, the strange thing is that if I change the Width/Height properties of the "frontBorder" and "backBorder" borders defined below to use explict values instead of Auto, such as Width=105 and Height=75 (to match the button in the border) everything works fine. The animation stutters the first two or three times I run it but after that the flips are smooth and flawless. (BTW, when an animation is run for the first time, is there something going on in the background, some sort of initialization, that causes it to be a little slow the first time?) Is it possible that the Auto Width/Height of the borders are causing the issue? I can reproduce it everytime but I am not sure why Auto Width/Height would be a problem. Below is the sample. Thanks for the help. <Window x:Class="FlipTest.Window1" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="Window1" Height="300" Width="300"> <Window.Resources> <Storyboard x:Key="sbFlip"> <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="front" Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleX)"> <SplineDoubleKeyFrame KeyTime="00:00:00.5" Value="0"/> </DoubleAnimationUsingKeyFrames> <DoubleAnimationUsingKeyFrames BeginTime="00:00:00.5" Storyboard.TargetName="back" Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleX)"> <SplineDoubleKeyFrame KeyTime="00:00:00.5" Value="1"/> </DoubleAnimationUsingKeyFrames> </Storyboard> <Storyboard x:Key="sbFlipBack"> <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="back" Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleX)"> <SplineDoubleKeyFrame KeyTime="00:00:00.5" Value="0"/> </DoubleAnimationUsingKeyFrames> <DoubleAnimationUsingKeyFrames BeginTime="00:00:00.5" Storyboard.TargetName="front" Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleX)"> <SplineDoubleKeyFrame KeyTime="00:00:00.5" Value="1"/> </DoubleAnimationUsingKeyFrames> </Storyboard> </Window.Resources> <Grid x:Name="LayoutRoot" Background="White" ShowGridLines="True"> <Grid.RowDefinitions> <RowDefinition Height="Auto"/> <RowDefinition Height="Auto"/> <RowDefinition Height="Auto"/> <RowDefinition Height="Auto"/> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width="Auto"/> <ColumnDefinition Width="Auto"/> </Grid.ColumnDefinitions> <StackPanel x:Name="front" RenderTransformOrigin="0.5,0.5"> <StackPanel.RenderTransform> <ScaleTransform/> </StackPanel.RenderTransform> <Border Name="frontBorder" BorderBrush="Yellow" BorderThickness="2" Width="Auto" Height="Auto"> <Button Margin="0" Name="redButton" Height="75" Background="Red" Width="105" Click="FlipButton_Click"/> </Border> <Border Width="{Binding ElementName=frontBorder, Path=ActualWidth}" Height="{Binding ElementName=frontBorder, Path=ActualHeight}" Opacity="0.2" BorderBrush="Transparent"> <Border.OpacityMask> <LinearGradientBrush StartPoint="0,0" EndPoint="0,1"> <LinearGradientBrush.GradientStops> <GradientStop Offset="0" Color="Black"/> <GradientStop Offset=".6" Color="Transparent"/> </LinearGradientBrush.GradientStops> </LinearGradientBrush> </Border.OpacityMask> <Border.Background> <VisualBrush Visual="{Binding ElementName=frontBorder}"> <VisualBrush.Transform> <ScaleTransform ScaleX="1" ScaleY="-1" CenterX="52.5" CenterY="37.5" /> </VisualBrush.Transform> </VisualBrush> </Border.Background> </Border> </StackPanel> <StackPanel x:Name="back" RenderTransformOrigin="0.5,0.5"> <StackPanel.RenderTransform> <ScaleTransform ScaleX="0"/> </StackPanel.RenderTransform> <Border Name="backBorder" BorderBrush="Yellow" BorderThickness="2" Width="Auto" Height="Auto"> <Button Margin="0" Width="105" Background="Blue" Name="blueButton" Height="75" Click="FlipButton_Click"/> </Border> <Border Width="{Binding ElementName=backBorder, Path=ActualWidth}" Height="{Binding ElementName=backBorder, Path=ActualHeight}" Opacity="0.2" BorderBrush="Transparent"> <Border.OpacityMask> <LinearGradientBrush StartPoint="0,0" EndPoint="0,1"> <LinearGradientBrush.GradientStops> <GradientStop Offset="0" Color="Black"/> <GradientStop Offset=".6" Color="Transparent"/> </LinearGradientBrush.GradientStops> </LinearGradientBrush> </Border.OpacityMask> <Border.Background> <VisualBrush Visual="{Binding ElementName=backBorder}"> <VisualBrush.Transform> <ScaleTransform ScaleX="1" ScaleY="-1" CenterX="52.5" CenterY="37.5" /> </VisualBrush.Transform> </VisualBrush> </Border.Background> </Border> </StackPanel> <Button Grid.Row="1" Click="FlipButton_Click" Height="19.45" HorizontalAlignment="Left" VerticalAlignment="Top" Width="76">Flip</Button> <TextBlock Grid.Row="2" Grid.Column="0" Foreground="DarkRed" Height="19.45" HorizontalAlignment="Left" VerticalAlignment="Top" Width="76" Text="{Binding ElementName=front, Path=(UIElement.RenderTransform).(ScaleTransform.ScaleX)}"/> <TextBlock Grid.Row="3" Grid.Column="0" Foreground="DarkBlue" Height="19.45" HorizontalAlignment="Left" VerticalAlignment="Top" Width="76" Text="{Binding ElementName=back, Path=(UIElement.RenderTransform).(ScaleTransform.ScaleX)}"/> </Grid> </Window> Code-behind: using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Windows; using System.Windows.Controls; using System.Windows.Data; using System.Windows.Documents; using System.Windows.Input; using System.Windows.Media; using System.Windows.Media.Imaging; using System.Windows.Navigation; using System.Windows.Shapes; using System.Windows.Media.Animation; namespace FlipTest { /// <summary> /// Interaction logic for Window1.xaml /// </summary> public partial class Window1 : Window { public Window1() { InitializeComponent(); } bool flipped = false; private void FlipButton_Click(object sender, RoutedEventArgs e) { Storyboard sbFlip = (Storyboard)Resources["sbFlip"]; Storyboard sbFlipBack = (Storyboard)Resources["sbFlipBack"]; if (flipped) { sbFlipBack.Begin(); flipped = false; } else { sbFlip.Begin(); flipped = true; } } } }

    Read the article

  • iPhone Image Processing--matrix convolution

    - by James
    I am implementing a matrix convolution blur on the iPhone. The following code converts the UIImage supplied as an argument of the blur function into a CGImageRef, and then stores the RGBA values in a standard C char array. CGImageRef imageRef = imgRef.CGImage; int width = imgRef.size.width; int height = imgRef.size.height; CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB(); unsigned char *pixels = malloc((height) * (width) * 4); NSUInteger bytesPerPixel = 4; NSUInteger bytesPerRow = bytesPerPixel * (width); NSUInteger bitsPerComponent = 8; CGContextRef context = CGBitmapContextCreate(pixels, width, height, bitsPerComponent, bytesPerRow, colorSpace, kCGImageAlphaPremultipliedLast | kCGBitmapByteOrder32Big); CGContextDrawImage(context, CGRectMake(0, 0, width, height), imageRef); CGContextRelease(context); Then the pixels values stored in the pixels array are convolved, and stored in another array. unsigned char *results = malloc((height) * (width) * 4); Finally, these augmented pixel values are changed back into a CGImageRef, converted to a UIImage, and the returned at the end of the function with the following code. context = CGBitmapContextCreate(results, width, height, bitsPerComponent, bytesPerRow, colorSpace, kCGImageAlphaPremultipliedLast | kCGBitmapByteOrder32Big); CGImageRef finalImage = CGBitmapContextCreateImage(context); UIImage *newImage = [UIImage imageWithCGImage:CGBitmapContextCreateImage(context)]; CGImageRelease(finalImage); NSLog(@"edges found"); free(results); free(pixels); CGColorSpaceRelease(colorSpace); return newImage; This works perfectly, once. Then, once the image is put through the filter again, very odd, unprecedented pixel values representing input pixel values that don't exist, are returned. Is there any reason why this should work the first time, but then not afterward? Beneath is the entirety of the function. -(UIImage*) blur:(UIImage*)imgRef { CGImageRef imageRef = imgRef.CGImage; int width = imgRef.size.width; int height = imgRef.size.height; CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB(); unsigned char *pixels = malloc((height) * (width) * 4); NSUInteger bytesPerPixel = 4; NSUInteger bytesPerRow = bytesPerPixel * (width); NSUInteger bitsPerComponent = 8; CGContextRef context = CGBitmapContextCreate(pixels, width, height, bitsPerComponent, bytesPerRow, colorSpace, kCGImageAlphaPremultipliedLast | kCGBitmapByteOrder32Big); CGContextDrawImage(context, CGRectMake(0, 0, width, height), imageRef); CGContextRelease(context); height = imgRef.size.height; width = imgRef.size.width; float matrix[] = {0,0,0,0,1,0,0,0,0}; float divisor = 1; float shift = 0; unsigned char *results = malloc((height) * (width) * 4); for(int y = 1; y < height; y++){ for(int x = 1; x < width; x++){ float red = 0; float green = 0; float blue = 0; int multiplier=1; if(y>0 && x>0){ int index = (y-1)*width + x; red = matrix[0]*multiplier*(float)pixels[4*(index-1)] + matrix[1]*multiplier*(float)pixels[4*(index)] + matrix[2]*multiplier*(float)pixels[4*(index+1)]; green = matrix[0]*multiplier*(float)pixels[4*(index-1)+1] + matrix[1]*multiplier*(float)pixels[4*(index)+1] + matrix[2]*multiplier*(float)pixels[4*(index+1)+1]; blue = matrix[0]*multiplier*(float)pixels[4*(index-1)+2] + matrix[1]*multiplier*(float)pixels[4*(index)+2] + matrix[2]*multiplier*(float)pixels[4*(index+1)+2]; index = (y)*width + x; red = red+ matrix[3]*multiplier*(float)pixels[4*(index-1)] + matrix[4]*multiplier*(float)pixels[4*(index)] + matrix[5]*multiplier*(float)pixels[4*(index+1)]; green = green + matrix[3]*multiplier*(float)pixels[4*(index-1)+1] + matrix[4]*multiplier*(float)pixels[4*(index)+1] + matrix[5]*multiplier*(float)pixels[4*(index+1)+1]; blue = blue + matrix[3]*multiplier*(float)pixels[4*(index-1)+2] + matrix[4]*multiplier*(float)pixels[4*(index)+2] + matrix[5]*multiplier*(float)pixels[4*(index+1)+2]; index = (y+1)*width + x; red = red+ matrix[6]*multiplier*(float)pixels[4*(index-1)] + matrix[7]*multiplier*(float)pixels[4*(index)] + matrix[8]*multiplier*(float)pixels[4*(index+1)]; green = green + matrix[6]*multiplier*(float)pixels[4*(index-1)+1] + matrix[7]*multiplier*(float)pixels[4*(index)+1] + matrix[8]*multiplier*(float)pixels[4*(index+1)+1]; blue = blue + matrix[6]*multiplier*(float)pixels[4*(index-1)+2] + matrix[7]*multiplier*(float)pixels[4*(index)+2] + matrix[8]*multiplier*(float)pixels[4*(index+1)+2]; red = red/divisor+shift; green = green/divisor+shift; blue = blue/divisor+shift; if(red<0){ red=0; } if(green<0){ green=0; } if(blue<0){ blue=0; } if(red>255){ red=255; } if(green>255){ green=255; } if(blue>255){ blue=255; } int realPos = 4*(y*imgRef.size.width + x); results[realPos] = red; results[realPos + 1] = green; results[realPos + 2] = blue; results[realPos + 3] = 1; }else { int realPos = 4*((y)*(imgRef.size.width) + (x)); results[realPos] = 0; results[realPos + 1] = 0; results[realPos + 2] = 0; results[realPos + 3] = 1; } } } context = CGBitmapContextCreate(results, width, height, bitsPerComponent, bytesPerRow, colorSpace, kCGImageAlphaPremultipliedLast | kCGBitmapByteOrder32Big); CGImageRef finalImage = CGBitmapContextCreateImage(context); UIImage *newImage = [UIImage imageWithCGImage:CGBitmapContextCreateImage(context)]; CGImageRelease(finalImage); free(results); free(pixels); CGColorSpaceRelease(colorSpace); return newImage;} THANKS!!!

    Read the article

  • CSS Div Width Problem - Lining divs... widths seem to be off in IE7

    - by jlrolin
    So far, I'm doing this programmatically using VB.net/ASP.net: 'Create Container Div Dim ContainerDiv As New HtmlGenericControl("div") ContainerDiv.Style("width") = "100%" ContainerDiv.Style("clear") = "both" ContainerDiv.Style("text-align") = "left" ContainerDiv.Style("margin") = "0" 'Create Expand/Collapse Image Dim img As New Image img.ImageUrl = Page.ResolveUrl("~/images/minus99.jpg") img.Attributes.Add("onclick", "change(this.parent);") 'Create Company Display Dim lbl As New Label lbl.Text = Parsetext(pc.NAME) lbl.Font.Bold = True lbl.Style("font-size") = "16px" Dim NameDiv As New HtmlGenericControl("div") 'NameDiv.Style("background-color") = "#F0D3D3" NameDiv.Style("width") = "375px" NameDiv.Style("float") = "left" NameDiv.Style("margin") = "0" NameDiv.Style("display") = "block" NameDiv.Controls.Add(img) NameDiv.Controls.Add(lbl) ContainerDiv.Controls.Add(NameDiv) Dim SetupDiv As New HtmlGenericControl("div") SetupDiv.Style("background-color") = "#F0D3D3" SetupDiv.Style("width") = "210px" SetupDiv.Style("float") = "left" SetupDiv.Style("margin") = "0" SetupDiv.Style("display") = "block" 'SetupDiv.Style("position") = "fixed" ContainerDiv.Controls.Add(SetupDiv) Dim UsedDiv As New HtmlGenericControl("div") UsedDiv.Style("background-color") = "#CFF5CE" UsedDiv.Style("width") = "140px" UsedDiv.Style("float") = "left" UsedDiv.Style("margin") = "0" UsedDiv.Style("display") = "block" 'UsedDiv.Style("position") = "fixed" ContainerDiv.Controls.Add(UsedDiv) Dim RemDiv As New HtmlGenericControl("div") RemDiv.Style("background-color") = "#BEE0F7" 'RemDiv.Style("position") = "absolute" RemDiv.Style("width") = "210px" RemDiv.Style("float") = "right" RemDiv.Style("padding") = "0" RemDiv.Style("margin") = "0" RemDiv.Style("display") = "block" 'RemDiv.Style("position") = "fixed" ContainerDiv.Controls.Add(RemDiv) This should give me four DIVS inside a container DIV. Here's what it's coming out as: The correct blocks above the non-inline blocks are from a table with the same exact widths as the ones I'm using on the Divs. There isn't any CSS adding pixels to them, I don't think. I need to line these up, and I can't figure out where my problem is here. Any help would be appreciated.

    Read the article

  • 3-row layout, expanding middle, min-height:100% so footer is at bottom when there is minimal content

    - by David Lawson
    How would I change this to make the middle div expand vertically to fill the white space? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style type="text/css"> body,td,th { font-family: Tahoma, Geneva, Verdana, sans-serif; } html,body { margin:0; padding:0; height:100%; /* needed for container min-height */ } #container { position:relative; /* needed for footer positioning*/ margin:0 auto; /* center, not in IE5 */ width:100%; height:auto !important; /* real browsers */ height:100%; /* IE6: treaded as min-height*/ min-height:100%; /* real browsers */ } #header { height: 150px; border-bottom: 2px solid #ff8800; position: relative; background-color: #c97c3e; } #middle { padding-right: 90px; padding-left: 90px; padding-top: 35px; padding-bottom: 43px; background-color: #0F9; } #footer { border-top: 2px solid #ff8800; background-color: #ffd376; position:absolute; width:100%; bottom:0; /* stick to bottom */ } </style> </head> <body> <div id="container"> <div id="header"> Header </div> <div id="middle"> Middle </div> <div id="footer"> Footer </div> </div> </body> </html>

    Read the article

  • How do I adjust overall width of rdlc report when some columns are hidden?

    - by user115487
    I have a customizable rdlc report where the user can choose which columns to show. All the columns are included in the report designer, and I use parameters to hide/show columns based on the user's choice. The report renders correctly, and only shows the selected columns, HOWEVER, the overall width of the report is the same as if all the columns were visible. This means that the report can have a huge empty area to the right of the selected columns, which looks very silly. So my question: Is there a way to adjust the report width dynamically at runtime to avoid a large silly empty area in the report? I attempted to do this in the designer by assigning a parameter to the width of the report body....but that was not allowed. The width cannot be an expression of any kind in the designer, only an actual value is allowed. Any suggestions?

    Read the article

< Previous Page | 27 28 29 30 31 32 33 34 35 36 37 38  | Next Page >