viewport - Page 21 - Developer IT

Phonegap (Cordova) iOS button click

- by JNM

I am trying to create a very simple phone gap application for iOS. I am using query mobile. the problem is, that i can't get javascript event to fire on button click. Code i have now: <!DOCTYPE html> <html> <head> <title>Title</title> <meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1"> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="js/jquery.mobile-1.2.0.css" /> <script type="text/javascript" charset="utf-8" src="cordova-1.8.1.js"></script> <script type="text/javascript" charset="utf-8" src="js/jquery-1.8.2.min.js"></script> <script type="text/javascript" charset="utf-8" src="js/jquery.mobile-1.2.0.min.js"></script> <script type="text/javascript"> document.addEventListener("deviceready", onDeviceReady, false); function onDeviceReady() { } function showAlert() { navigator.notification.alert("Cordova is working"); } </script> </head> <body> <div data-role="page" id="options" data-add-back-btn="true" data-back-btn-text="Atgal"> <div data-role="header" data-position="fixed"> <h1>Title</h1> </div> <div data-role="content"> <h1>Alert</h1> <p><a href="#" onclick="showAlert(); return false;" data-role="button">Show alert</a></p> </div> </div> </body> </html> I tried multiple solutions to fix my problem, but none of them works. When have button with # in href, it doesn't event change the color on click. When i add url, it changes color. But it never call javascript function. Another problem is, that document.addEventListener("deviceready", onDeviceReady, false); works only in the index page. If i press button in initial page which redirects to another page, OnDeviceReady function is never called. Anybody has any ideas?

Read the article

IE8 ignores absolute positioning and margin:auto

- by tuff

I have a lightbox-style div with scrolling content that I am trying to restrict to a reasonable size within the viewport. I also want this div to be horizontally centered. This is all easy in Fx/Chrome/IE9. My problem is that IE8 ignores the absolute positioning which I use to size the content, and the rule margin: 0 auto which I use to horizontally center the lightbox. 1) Why? 2) What are my options for workarounds? EDIT: The centering issue is fixed by setting text-align:center on the parent element, but I have no idea why that works since the element I want to center is not inline. Still stuck on the absolute positioning stuff. HTML: <div class="bg"> <div class="a"> <div class="aa">titlebar</div> <div class="b">  </div> </div> </div> CSS: body { overflow: hidden; height: 100%; margin: 0; padding: 0; } /* IE8 needs ruleset above */ .bg { background: #333; position: fixed; top: 0; right: 0; bottom: 0; left: 0; height: 100%; /* needed in IE8 or the bg will only be as tall as the lightbox */ } .a { background: #eee; border: 3px solid #000; height: 80%; max-height: 800px; min-height: 200px; margin: 0 auto; position: relative; width: 80%; min-width: 200px; max-width: 800px; } .aa { background: lightblue; height: 28px; line-height: 28px; text-align: center; } .b { background: coral; overflow: auto; padding: 20px; position: absolute; top: 30px; right: 0; bottom: 0; left: 0; } Here's a demo of the problem: http://jsbin.com/urikoj/1/edit

Read the article

Can I avoid a threaded UDP socket in Pyton dropping data?

- by 666craig

First off, I'm new to Python and learning on the job, so be gentle! I'm trying to write a threaded Python app for Windows that reads data from a UDP socket (thread-1), writes it to file (thread-2), and displays the live data (thread-3) to a widget (gtk.Image using a gtk.gdk.pixbuf). I'm using queues for communicating data between threads. My problem is that if I start only threads 1 and 3 (so skip the file writing for now), it seems that I lose some data after the first few samples. After this drop it looks fine. Even by letting thread 1 complete before running thread 3, this apparent drop is still there. Apologies for the length of code snippet (I've removed the thread that writes to file), but I felt removing code would just prompt questions. Hope someone can shed some light :-) import socket import threading import Queue import numpy import gtk gtk.gdk.threads_init() import gtk.glade import pygtk class readFromUDPSocket(threading.Thread): def __init__(self, socketUDP, readDataQueue, packetSize, numScans): threading.Thread.__init__(self) self.socketUDP = socketUDP self.readDataQueue = readDataQueue self.packetSize = packetSize self.numScans = numScans def run(self): for scan in range(1, self.numScans + 1): buffer = self.socketUDP.recv(self.packetSize) self.readDataQueue.put(buffer) self.socketUDP.close() print 'myServer finished!' class displayWithGTK(threading.Thread): def __init__(self, displayDataQueue, image, viewArea): threading.Thread.__init__(self) self.displayDataQueue = displayDataQueue self.image = image self.viewWidth = viewArea[0] self.viewHeight = viewArea[1] self.displayData = numpy.zeros((self.viewHeight, self.viewWidth, 3), dtype=numpy.uint16) def run(self): scan = 0 try: while True: if not scan % self.viewWidth: scan = 0 buffer = self.displayDataQueue.get(timeout=0.1) self.displayData[:, scan, 0] = numpy.fromstring(buffer, dtype=numpy.uint16) self.displayData[:, scan, 1] = numpy.fromstring(buffer, dtype=numpy.uint16) self.displayData[:, scan, 2] = numpy.fromstring(buffer, dtype=numpy.uint16) gtk.gdk.threads_enter() self.myPixbuf = gtk.gdk.pixbuf_new_from_data(self.displayData.tostring(), gtk.gdk.COLORSPACE_RGB, False, 8, self.viewWidth, self.viewHeight, self.viewWidth * 3) self.image.set_from_pixbuf(self.myPixbuf) self.image.show() gtk.gdk.threads_leave() scan += 1 except Queue.Empty: print 'myDisplay finished!' pass def quitGUI(obj): print 'Currently active threads: %s' % threading.enumerate() gtk.main_quit() if __name__ == '__main__': # Create socket (IPv4 protocol, datagram (UDP)) and bind to address socketUDP = socket.socket(socket.AF_INET, socket.SOCK_DGRAM) host = '192.168.1.5' port = 1024 socketUDP.bind((host, port)) # Data parameters samplesPerScan = 256 packetsPerSecond = 1200 packetSize = 512 duration = 1 # For now, set a fixed duration to log data numScans = int(packetsPerSecond * duration) # Create array to store data data = numpy.zeros((samplesPerScan, numScans), dtype=numpy.uint16) # Create queue for displaying from readDataQueue = Queue.Queue(numScans) # Build GUI from Glade XML file builder = gtk.Builder() builder.add_from_file('GroundVue.glade') window = builder.get_object('mainwindow') window.connect('destroy', quitGUI) view = builder.get_object('viewport') image = gtk.Image() view.add(image) viewArea = (1200, samplesPerScan) # Instantiate & start threads myServer = readFromUDPSocket(socketUDP, readDataQueue, packetSize, numScans) myDisplay = displayWithGTK(readDataQueue, image, viewArea) myServer.start() myDisplay.start() gtk.gdk.threads_enter() gtk.main() gtk.gdk.threads_leave() print 'gtk.main finished!'

Read the article

Blank black screen with cursor after login -- RHEL5

- by Sean O.

I have a RHEL 5 machine here which is a Dell Precision T3500. I'm an Ubuntu guy, but I'm having a heck of a time with this machine. After processing its first security update, we cannot log in via the gdm greeter. A new kernel was installed; then I installed the nVidia drivers for our Quadro NVS 295. I know the X configuration is valid because the gdm greeter does display; however, upon login all we can get is a blank, black screen with a cursor. I thought perhaps our python installation was corrupted but a reinstall via yum has not helped. I have searched & googled extensively for a potential fix for this and can find nothing. Below are outputs from uname, a tail of an error in /var/log/messages, and the Xorg.conf. Can anyone suggest a course of action? [sean@cheetah ~]$ uname -a Linux cheetah.*.* 2.6.18-308.8.1.el5 #1 SMP Fri May 4 16:43:02 EDT 2012 x86_64 x86_64 x86_64 GNU/Linux [sean@cheetah ~]$ sudo tail /var/log/messages Jun 5 15:03:04 cheetah gconfd (sean-4592): Resolved address "xml:readonly:/etc/gconf/gconf.xml.defaults" to a read-only configuration source at position 2 Jun 5 15:03:05 cheetah hcid[3855]: Default passkey agent (:1.8, /org/bluez/applet) registered Jun 5 15:03:05 cheetah pcscd: winscard.c:304:SCardConnect() Reader E-Gate 0 0 Not Found Jun 5 15:03:05 cheetah last message repeated 2 times Jun 5 15:03:06 cheetah gconfd (sean-4592): Resolved address "xml:readwrite:/home/sean/.gconf" to a writable configuration source at position 0 Jun 5 15:03:06 cheetah setroubleshoot: [program.ERROR] exception ImportError: /usr/lib/libatk-1.0.so.0: undefined symbol: g_assertion_message_expr Traceback (most recent call last): File "/usr/bin/sealert", line 952, in ? from setroubleshoot.gui_utils import * File "/usr/lib/python2.4/site-packages/setroubleshoot/gui_utils.py", line 26, in ? import gtk File "/usr/lib64/python2.4/site-packages/gtk-2.0/gtk/__init__.py", line 48, in ? from gtk import _gtk ImportError: /usr/lib/libatk-1.0.so.0: undefined symbol: g_assertion_message_expr Jun 5 15:03:07 cheetah setroubleshoot: [program.ERROR] exception ImportError: /usr/lib/libatk-1.0.so.0: undefined symbol: g_assertion_message_expr Traceback (most recent call last): File "/usr/bin/sealert", line 952, in ? from setroubleshoot.gui_utils import * File "/usr/lib/python2.4/site-packages/setroubleshoot/gui_utils.py", line 26, in ? import gtk File "/usr/lib64/python2.4/site-packages/gtk-2.0/gtk/__init__.py", line 48, in ? from gtk import _gtk ImportError: /usr/lib/libatk-1.0.so.0: undefined symbol: g_assertion_message_expr Jun 5 15:03:08 cheetah pcscd: winscard.c:304:SCardConnect() Reader E-Gate 0 0 Not Found Jun 5 15:07:01 cheetah ntpd[4114]: synchronized to 64.16.211.38, stratum 3 Jun 5 15:07:01 cheetah ntpd[4114]: kernel time sync enabled 0001 [sean@cheetah ~]$ cat /etc/X11/xorg.conf # nvidia-xconfig: X configuration file generated by nvidia-xconfig # nvidia-xconfig: version 295.53 ([email protected]) Sat May 12 00:34:20 PDT 2012 # Xorg configuration created by system-config-display Section "ServerLayout" Identifier "single head configuration" Screen 0 "Screen0" 0 0 InputDevice "Mouse0" "CorePointer" InputDevice "Keyboard0" "CoreKeyboard" EndSection Section "InputDevice" # generated from default Identifier "Mouse0" Driver "mouse" Option "Protocol" "auto" Option "Device" "/dev/input/mice" Option "Emulate3Buttons" "no" Option "ZAxisMapping" "4 5" EndSection Section "InputDevice" Identifier "Keyboard0" Driver "kbd" Option "XkbModel" "pc105" Option "XkbLayout" "us" EndSection Section "Monitor" ### Comment all HorizSync and VertSync values to use DDC: ### Comment all HorizSync and VertSync values to use DDC: Identifier "Monitor0" ModelName "LCD Panel 1600x1200" HorizSync 31.5 - 74.7 VertRefresh 56.0 - 65.0 Option "dpms" EndSection Section "Device" Identifier "Videocard0" Driver "nvidia" EndSection Section "Screen" Identifier "Screen0" Device "Videocard0" Monitor "Monitor0" DefaultDepth 24 SubSection "Display" Viewport 0 0 Depth 24 EndSubSection EndSection

Read the article

Adaptive ADF/WebCenter template for the iPad

- by Maiko Rocha

One of my WebCenter Portal customers was asking about adaptive design with ADF/WebCenter Portal and how they could go about creating an adaptive iPad template for their WebCenter Portal application. They were looking not only for the out-of-the-box support for mobile Safari which is certified against PS5+ (11.1.1.6) for ADF/WebCenter - but also to create a specific template to streamline their workflow on the iPad. Seems like they wanted something in the lines of Yahoo! Mail provides for the iPad - so the example I will use is shamelessly inspired by Y! Mail's iPad UI. But first, let's quickly understand how can we bake in some adaptive goodness into ADF Faces. First thing we need to understand is, yes, there are a couple of constraints that we will need to work around, namely, the use or layout managers and skins. Please also keep in mind that I'm not and I don't pretend to be a web designer, much less an UX specialist, so feel free to leave your thoughts on the matter in the comments section. Now, back to the limitations. Layout Managers ADF Faces layout managers create an abstraction on top of the generated HTML code for a page so a developer doesn't need to be worried about how to size and dimension the UI layout (eg, af:panelStretchLayout). Although layout managers are very helpful, in this specific situation we will need to know a little bit more of how the final HTML is being rendered so we can apply the CSS class accordingly and create transition containers where the media queries will be applied - now, if you're using 11gR2 (11.1.2.2.3) there's the new component af:panelGridLayout (here and here) that will greatly improve creating responsive templates and pages because it is based on the grid/fluid systems and will generate straight out to DIVs on your final page. For now, I'm limited to PS5 and the af:panelStretchLayout component as a starting point because that's the release my customer is on. Skins You won't be able to use media queries, or use anything with "@" notation on the skin CSS file - the skin pre-processor will remove all extraneous "@" from the CSS file. The solution is to split your CSS in two separate files: a skin CSS file and plain CSS where you will add the media queries. The issue here is that you won't be able to use media queries for any faces components. We can, though, still apply the media queries for the components like af:panelGroupLayout and af:panelBorderLayout through their styleClass property to enable these components to be responsive to to the iPad orientation, by changing its dimensions, font sizes, hide/show areas, etc. Difference between responsive and adaptive design The best definition of adaptive vs responsive web design I could find is this: “Responsive web design,” as coined by Ethan Marcotte, means “fluid grids, fluid images/media & media queries.” “Adaptive web design,” as I use it, is about creating interfaces that adapt to the user’s capabilities (in terms of both form and function). To me, “adaptive web design” is just another term for “progressive enhancement” of which responsive web design can (an often should) be an integral part, but is a more holistic approach to web design in that it also takes into account varying levels of markup, CSS, JavaScript and assistive technology support. Responsive/adapative web design is much more than slapping an HTML template with CSS around your content or application. The content and application themselves are part of your web design - in other words, a responsive template is just an afterthought if it is not originating from a responsive design the involves the whole web application/s. Tips on responsive / adapative design with ADF/WebCenter Some of the tips listed below were already mentioned in multiple blog posts about ADF layout and skinning, but it is still worth remembering: a simple guideline for ADF/WebCenter apps would be to first create a high-level group of devices, for example: smartphones, tablets, and desktop. For each of these large groups, create the basic structure to provide responsiveness: a page template, a skin, and an external CSS: pagetemplate_smartphone.jspx, smartphone_skin.css, smartphone-responsive.css pagetemplate_tablet.jspx, tablet_skin.css, tablet-responsive.css pagetemplate_desktop.jspx, desktop_skin.css, desktop-responsive.css These three assets can be changed on the fly through an user-agent check on the server side, delivering the right UI to the right device. Within each of the assets, you can make fine adjustments for each subgroup of devices with media queries - for example, smart phones with different screen dimensions and pixel density. Having these three groups and the corresponding assets per group seem to be a good compromise between trying to put everything on a single set of assets - specially considering the constraints above - and going to the other side of the spectrum to create assets per discrete device (iPhone4, iPhone5, Nexus, S3, etc.). Keep in mind that these are my rules and are not in any shape or form a best practice - this is how it fits best for the scenarios I've been working with. If you need to use HTML tags on your page, surround them with af:group to protect the DOM structure For stretchable/fluid layouts: Use non-stretching containers: panelGroupLayout, panelBorderLayout, … panelBorderLayout can be used to approximate HTML table component To avoid multiple scroll bars, do not nest scrolling PanelGroupLayout components. Consider layout="vertical" For stretchable/fluid layouts: Most stretchable ADF components also work in flowing context with dimensionsFrom="auto" To stretch a component horizontally, use styleClass="AFStretchWidth" instead of "width:100%" Skinning Don't use CSS3 @media, @import, animations, etc. on skin css files. They will be removed. CSS3 properties within a class (box-shadow, transition, etc.) work just fine. Consider resetting some skin classes to better control their rendering: body {color: inherit;font: inherit;} af|document {-tr-inhibit: all;} af|commandLink {-tr-inhibit: all;} af|goLink {-tr-inhibit: all;} af|inputText::content {font: inherit;} Specific meta tags and CSS properties: Use <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0"/> to avoid zooming (if you want) Use -webkit-overflow-scrolling: touch to enable native momentum scrolling within overflown areas (here) Use text-rendering: optmizeLegibility to improve readability. (here) User text-overflow: ellipsis to gracefully crop overflown text. (here) The meta-tags are included in each and every page in the metaContainer facet of af:document tag. You can also use a javascript to inject the meta-tags from the template. For the purpose of the example, I wanted to use as few workarounds as possible. The iPad template and sample application This sample application has been built as a WebCenter Portal application, but you will also be able to reuse the template and techniques on your vanilla ADF application. Keep in mind that I'm neither a designer nor a CSS specialist, so please don't bash me too much on the messy CSS file you'll find on the application. I've extended the provided PreferencesBean class that comes with WebCenter Portal and added code to dinamically change the template and skin on the fly. This is the sample application in landscape orientation: This is the sample application in portrait orientation - the left side menu hides automatically based on a CSS media query: Another screenshot with a skinned popup opened: This is a sample application for you to play with - ideally you shouldn't use it as a starting point. On the left side bar you will find links rendered from a WebCenter Portal navigation model - the link triggers a full request through an af:goLink, while the light blue PPR button triggers a PPR navigation. The dark blue toolbar buttons at the top don't have any function,while the Approve and Reject buttons show a skinned popup. The search box of course doesn't have any behavior attahed to it either. There's a known issue right now with some PPR calls that are randomly generating a 403 error redirecting to the login page - I didn't have time to investigate if this is iOS6 specific or not - if you have any insights please let me know your findings. You can download the sample here.

Read the article

Deferred rendering with VSM - Scaling light depth loses moments

- by user1423893

I'm calculating my shadow term using a VSM method. This works correctly when using forward rendered lights but fails with deferred lights. // Shadow term (1 = no shadow) float shadow = 1; // [Light Space -> Shadow Map Space] // Transform the surface into light space and project // NB: Could be done in the vertex shader, but doing it here keeps the // "light shader" abstraction and doesn't limit the number of shadowed lights float4x4 LightViewProjection = mul(LightView, LightProjection); float4 surf_tex = mul(position, LightViewProjection); // Re-homogenize // 'w' component is not used in later calculations so no need to homogenize (it will equal '1' if homogenized) surf_tex.xyz /= surf_tex.w; // Rescale viewport to be [0,1] (texture coordinate system) float2 shadow_tex; shadow_tex.x = surf_tex.x * 0.5f + 0.5f; shadow_tex.y = -surf_tex.y * 0.5f + 0.5f; // Half texel offset //shadow_tex += (0.5 / 512); // Scaled distance to light (instead of 'surf_tex.z') float rescaled_dist_to_light = dist_to_light / LightAttenuation.y; //float rescaled_dist_to_light = surf_tex.z; // [Variance Shadow Map Depth Calculation] // No filtering float2 moments = tex2D(ShadowSampler, shadow_tex).xy; // Flip the moments values to bring them back to their original values moments.x = 1.0 - moments.x; moments.y = 1.0 - moments.y; // Compute variance float E_x2 = moments.y; float Ex_2 = moments.x * moments.x; float variance = E_x2 - Ex_2; variance = max(variance, Bias.y); // Surface is fully lit if the current pixel is before the light occluder (lit_factor == 1) // One-tailed inequality valid if float lit_factor = (rescaled_dist_to_light <= moments.x - Bias.x); // Compute probabilistic upper bound (mean distance) float m_d = moments.x - rescaled_dist_to_light; // Chebychev's inequality float p = variance / (variance + m_d * m_d); p = ReduceLightBleeding(p, Bias.z); // Adjust the light color based on the shadow attenuation shadow *= max(lit_factor, p); This is what I know for certain so far: The lighting is correct if I do not try and calculate the shadow term. (No shadows) The shadow term is correct when calculated using forward rendered lighting. (VSM works with forward rendered lights) With the current rescaled light distance (lightAttenuation.y is the far plane value): float rescaled_dist_to_light = dist_to_light / LightAttenuation.y; The light is correct and the shadow appears to be zoomed in and misses the blurring: When I do not rescale the light and use the homogenized 'surf_tex': float rescaled_dist_to_light = surf_tex.z; the shadows are blurred correctly but the lighting is incorrect and the cube model is no longer lit Why is scaling by the far plane value (LightAttenuation.y) zooming in too far? The only other factor involved is my world pixel position, which is calculated as follows: // [Position] float4 position; // [Screen Position] position.xy = input.PositionClone.xy; // Use 'x' and 'y' components already homogenized for uv coordinates above position.z = tex2D(DepthSampler, texCoord).r; // No need to homogenize 'z' component position.z = 1.0 - position.z; position.w = 1.0; // 1.0 = position.w / position.w // [World Position] position = mul(position, CameraViewProjectionInverse); // Re-homogenize position (xyz AND w, otherwise shadows will bend when camera is close) position.xyz /= position.w; position.w = 1.0; Using the inverse matrix of the camera's view x projection matrix does work for lighting but maybe it is incorrect for shadow calculation? EDIT: Light calculations for shadow including 'dist_to_light' // Work out the light position and direction in world space float3 light_position = float3(LightViewInverse._41, LightViewInverse._42, LightViewInverse._43); // Direction might need to be negated float3 light_direction = float3(-LightViewInverse._31, -LightViewInverse._32, -LightViewInverse._33); // Unnormalized light vector float3 dir_to_light = light_position - position; // Direction from vertex float dist_to_light = length(dir_to_light); // Normalise 'toLight' vector for lighting calculations dir_to_light = normalize(dir_to_light); EDIT2: These are the calculations for the moments (depth) //============================================= //---[Vertex Shaders]-------------------------- //============================================= DepthVSOutput depth_VS( float4 Position : POSITION, uniform float4x4 shadow_view, uniform float4x4 shadow_view_projection) { DepthVSOutput output = (DepthVSOutput)0; // First transform position into world space float4 position_world = mul(Position, World); output.position_screen = mul(position_world, shadow_view_projection); output.light_vec = mul(position_world, shadow_view).xyz; return output; } //============================================= //---[Pixel Shaders]--------------------------- //============================================= DepthPSOutput depth_PS(DepthVSOutput input) { DepthPSOutput output = (DepthPSOutput)0; // Work out the depth of this fragment from the light, normalized to [0, 1] float2 depth; depth.x = length(input.light_vec) / FarPlane; depth.y = depth.x * depth.x; // Flip depth values to avoid floating point inaccuracies depth.x = 1.0f - depth.x; depth.y = 1.0f - depth.y; output.depth = depth.xyxy; return output; } EDIT 3: I have tried the folloiwng: float4 pp; pp.xy = input.PositionClone.xy; // Use 'x' and 'y' components already homogenized for uv coordinates above pp.z = tex2D(DepthSampler, texCoord).r; // No need to homogenize 'z' component pp.z = 1.0 - pp.z; pp.w = 1.0; // 1.0 = position.w / position.w // Determine the depth of the pixel with respect to the light float4x4 LightViewProjection = mul(LightView, LightProjection); float4x4 matViewToLightViewProj = mul(CameraViewProjectionInverse, LightViewProjection); float4 vPositionLightCS = mul(pp, matViewToLightViewProj); float fLightDepth = vPositionLightCS.z / vPositionLightCS.w; // Transform from light space to shadow map texture space. float2 vShadowTexCoord = 0.5 * vPositionLightCS.xy / vPositionLightCS.w + float2(0.5f, 0.5f); vShadowTexCoord.y = 1.0f - vShadowTexCoord.y; // Offset the coordinate by half a texel so we sample it correctly vShadowTexCoord += (0.5f / 512); //g_vShadowMapSize This suffers the same problem as the second picture. I have tried storing the depth based on the view x projection matrix: output.position_screen = mul(position_world, shadow_view_projection); //output.light_vec = mul(position_world, shadow_view); output.light_vec = output.position_screen; depth.x = input.light_vec.z / input.light_vec.w; This gives a shadow that has lots surface acne due to horrible floating point precision errors. Everything is lit correctly though. EDIT 4: Found an OpenGL based tutorial here I have followed it to the letter and it would seem that the uv coordinates for looking up the shadow map are incorrect. The source uses a scaled matrix to get the uv coordinates for the shadow map sampler /// <summary> /// The scale matrix is used to push the projected vertex into the 0.0 - 1.0 region. /// Similar in role to a * 0.5 + 0.5, where -1.0 < a < 1.0. /// <summary> const float4x4 ScaleMatrix = float4x4 ( 0.5, 0.0, 0.0, 0.0, 0.0, -0.5, 0.0, 0.0, 0.0, 0.0, 0.5, 0.0, 0.5, 0.5, 0.5, 1.0 ); I had to negate the 0.5 for the y scaling (M22) in order for it to work but the shadowing is still not correct. Is this really the correct way to scale? float2 shadow_tex; shadow_tex.x = surf_tex.x * 0.5f + 0.5f; shadow_tex.y = surf_tex.y * -0.5f + 0.5f; The depth calculations are exactly the same as the source code yet they still do not work, which makes me believe something about the uv calculation above is incorrect.

Read the article

Responsive Inline Elements with Twitter Bootstrap

- by MightyZot

Originally posted on: http://geekswithblogs.net/MightyZot/archive/2013/11/12/responsive-inline-elements-with-twitter-bootstrap.aspxTwitter Boostrap is a responsive css platform created by some dudes affiliated with Twitter and since supported and maintained by an open source following. I absolutely love the new version of this css toolkit. They rebuilt it with a mobile first strategy and it’s very easy to layout pages once you get the hang of it. Using a css / javascript framework like bootstrap is certainly much easier than coding your layout by hand. And, you get a “leg up” when it comes to adding responsive features to your site. Bootstrap includes column layout classes that let you specify size and placement based upon the viewport width. In addition, there are a handful of responsive helpers to hide and show content based upon the user’s device size. Most notably, the visible-xs, visible-sm, visible-md, and visible-lg classes let you show content for devices corresponding to those sizes (they are listed in the bootstrap docs.) hidden-xs, hidden-sm, hidden-md, and hidden-lg let you hide content for devices with those respective sizes. These helpers work great for showing and hiding block elements. Unfortunately, there isn’t a provision yet in Twitter Bootstrap (as of the time of this writing) for inline elements. We are using the navbar classes to create a navigation bar at the top of our website, www.crowdit.com. When you shrink the width of the screen to tablet or phone size, the tools in the navbar are turned into a drop down menu, and a button appears on the right side of the navbar. This is great! But, we wanted different content to display based upon whether the items were on the navbar versus when they were in the dropdown menu. The visible-?? and hidden-?? classes make this easy for images and block elements. In our case, we wanted our anchors to show different text depending upon whether they’re in the navbar, or in the dropdown. span is inherently inline and it can be a block element. My first approach was to create two anchors for each options, one set visible when the navbar is on a desktop or laptop with a wide display and another set visible when the elements converted to a dropdown menu. That works fine with the visible-?? and hidden-?? classes, but it just doesn’t seem that clean to me. I put up with that for about a week…last night I created the following classes to augment the block-based classes provided by bootstrap. .cdt-hidden-xs, .cdt-hidden-sm, .cdt-hidden-md, .cdt-hidden-lg { display: inline !important; } @media (max-width:767px) { .cdt-hidden-xs, .cdt-hidden-sm.cdt-hidden-xs, .cdt-hidden-md.cdt-hidden-xs, .cdt-hidden-lg.cdt-hidden-xs { display: none !important; } } @media (min-width:768px) and (max-width:991px) { .cdt-hidden-xs.cdt-hidden-sm, .cdt-hidden-sm, .cdt-hidden-md.cdt-hidden-sm, .cdt-hidden-lg.cdt-hidden-sm { display: none !important; } } @media (min-width:992px) and (max-width:1199px) { .cdt-hidden-xs.cdt-hidden-md, .cdt-hidden-sm.cdt-hidden-md, .cdt-hidden-md, .cdt-hidden-lg.cdt-hidden-md { display: none !important; } } @media (min-width:1200px) { .cdt-hidden-xs.cdt-hidden-lg, .cdt-hidden-sm.cdt-hidden-lg, .cdt-hidden-md.cdt-hidden-lg, .cdt-hidden-lg { display: none !important; } } .cdt-visible-xs, .cdt-visible-sm, .cdt-visible-md, .cdt-visible-lg { display: none !important; } @media (max-width:767px) { .cdt-visible-xs, .cdt-visible-sm.cdt-visible-xs, .cdt-visible-md.cdt-visible-xs, .cdt-visible-lg.cdt-visible-xs { display: inline !important; } } @media (min-width:768px) and (max-width:991px) { .cdt-visible-xs.cdt-visible-sm, .cdt-visible-sm, .cdt-visible-md.cdt-visible-sm, .cdt-visible-lg.cdt-visible-sm { display: inline !important; } } @media (min-width:992px) and (max-width:1199px) { .cdt-visible-xs.cdt-visible-md, .cdt-visible-sm.cdt-visible-md, .cdt-visible-md, .cdt-visible-lg.cdt-visible-md { display: inline !important; } } @media (min-width:1200px) { .cdt-visible-xs.cdt-visible-lg, .cdt-visible-sm.cdt-visible-lg, .cdt-visible-md.cdt-visible-lg, .cdt-visible-lg { display: inline !important; } } I created these by looking at the example provided by bootstrap and consolidating the styles. “cdt” is just a prefix that I’m using to distinguish these classes from the block-based classes in bootstrap. You are welcome to change the prefix to whatever feels right for you. These classes can be applied to spans in textual content to hide and show text based upon the browser width. Applying the styles is simple… <span class=”cdt-visible-xs”>This text is visible in extra small</span> <span class=”cdt-visible-sm”>This text is visible in small</span> Why would you want to do this? Here are a couple of examples, shown in screen shots. This is the CrowdIt navbar on larger displays. Notice how the text is two line and certain words are capitalized? Now, check this out! Here is a screen shot showing the dropdown menu that’s displayed when the browser window is tablet or phone sized. The markup to make this happen is quite simple…take a look. <li> <a href="@Url.Action("what-is-crowdit","home")" title="Learn about what CrowdIt can do for your Small Business"> <span class="cdt-hidden-xs">WHAT<br /><small>is CrowdIt?</small></span> <span class="cdt-visible-xs">What is CrowdIt?</span> </a> </li> There is a single anchor tag in this example and only the spans change visibility based on browser width. I left them separate for readability and because I wanted to use the small tag; however, you could just as easily hide the “WHAT” and the br tag on small displays and replace them with “What “, consolidating this even further to text containing a single span. <span class=”cdt-hidden-xs”>WHAT<br /></span><span class=”cdt-visible-xs”>What </span>is CrowdIt? You might be a master of css and have a better method of handling this problem. If so, I’d love to hear about your solution…leave me some feedback! You’ll be entered into a drawing for a chance to win an autographed picture of ME! Yay!

Read the article

Displaylink USB show "Logo / Loading" on monitor

- by Ken Le

I tried with this problem for 2 years already. LOL, today, I install Ubuntu for I have to resolve it or I will back to stupid Windows 7. First, I have 3 monitors. My graphic card is support dual ( ATI Radeon ), so I have no problem on extend those multi monitor on VGA and DVI. The 3rd monitor is Displaylink USB. After installed everything required, when I reboot, the displaylink monitor show "Ubuntu ...." like logo / loading screen. I go to System Display , Detect monitor, it only show my 1st and 2nd, NO 3RD Displaylink. I can move my mouse between those 1st & 2nd, but the 3rd is only show the Ubuntu Screen. I press Ctrl+Alt+1, then screen switch to Displaylink USB 3RD monitor, but its "Terminal" not a desktop. Then I press Ctrl+Alt+7 , the screen switch back to my 1st, 2nd, and the displaylink 3rd is witch back to Logo / Ubuntu again. This is my /etc/X11/xorg.conf : Section "ServerLayout" Identifier "X.org Configured" Screen 0 "aticonfig-Screen[0]-0" 0 0 Screen 1 "DisplayLinkScreen" Leftof "aticonfig-Screen[0]-0" InputDevice "Mouse0" "CorePointer" InputDevice "Keyboard0" "CoreKeyboard" EndSection Section "Files" ModulePath "/usr/lib/xorg/modules" FontPath "/usr/share/fonts/X11/misc" FontPath "/usr/share/fonts/X11/cyrillic" FontPath "/usr/share/fonts/X11/100dpi/:unscaled" FontPath "/usr/share/fonts/X11/75dpi/:unscaled" FontPath "/usr/share/fonts/X11/Type1" FontPath "/usr/share/fonts/X11/100dpi" FontPath "/usr/share/fonts/X11/75dpi" FontPath "/var/lib/defoma/x-ttcidfont-conf.d/dirs/TrueType" FontPath "built-ins" EndSection Section "Module" Load "glx" Load "dri2" Load "dbe" Load "dri" Load "record" Load "extmod" EndSection Section "InputDevice" Identifier "Keyboard0" Driver "kbd" EndSection Section "InputDevice" Identifier "Mouse0" Driver "mouse" Option "Protocol" "auto" Option "Device" "/dev/input/mice" Option "ZAxisMapping" "4 5 6 7" EndSection Section "Monitor" Identifier "aticonfig-Monitor[0]-0" Option "VendorName" "ATI Proprietary Driver" Option "ModelName" "Generic Autodetecting Monitor" Option "DPMS" "true" EndSection Section "Monitor" Identifier "DisplayLinkMonitor" EndSection Section "Monitor" Identifier "0-DFP1" Option "VendorName" "ATI Proprietary Driver" Option "ModelName" "Generic Autodetecting Monitor" Option "DPMS" "true" Option "PreferredMode" "1680x1050" Option "TargetRefresh" "60" Option "Position" "0 0" Option "Rotate" "normal" Option "Disable" "false" EndSection Section "Monitor" Identifier "0-CRT2" Option "VendorName" "ATI Proprietary Driver" Option "ModelName" "Generic Autodetecting Monitor" Option "DPMS" "true" Option "PreferredMode" "1920x1080" Option "TargetRefresh" "60" Option "Position" "1680 0" Option "Rotate" "normal" Option "Disable" "false" EndSection Section "Device" ### Available Driver options are:- ### Values: <i>: integer, <f>: float, <bool>: "True"/"False", ### <string>: "String", <freq>: "<f> Hz/kHz/MHz", ### <percent>: "<f>%" ### [arg]: arg optional #Option "NoAccel" # [<bool>] #Option "SWcursor" # [<bool>] #Option "Dac6Bit" # [<bool>] #Option "Dac8Bit" # [<bool>] #Option "BusType" # [<str>] #Option "CPPIOMode" # [<bool>] #Option "CPusecTimeout" # <i> #Option "AGPMode" # <i> #Option "AGPFastWrite" # [<bool>] #Option "AGPSize" # <i> #Option "GARTSize" # <i> #Option "RingSize" # <i> #Option "BufferSize" # <i> #Option "EnableDepthMoves" # [<bool>] #Option "EnablePageFlip" # [<bool>] #Option "NoBackBuffer" # [<bool>] #Option "DMAForXv" # [<bool>] #Option "FBTexPercent" # <i> #Option "DepthBits" # <i> #Option "PCIAPERSize" # <i> #Option "AccelDFS" # [<bool>] #Option "IgnoreEDID" # [<bool>] #Option "CustomEDID" # [<str>] #Option "DisplayPriority" # [<str>] #Option "PanelSize" # [<str>] #Option "ForceMinDotClock" # <freq> #Option "ColorTiling" # [<bool>] #Option "VideoKey" # <i> #Option "RageTheatreCrystal" # <i> #Option "RageTheatreTunerPort" # <i> #Option "RageTheatreCompositePort" # <i> #Option "RageTheatreSVideoPort" # <i> #Option "TunerType" # <i> #Option "RageTheatreMicrocPath" # <str> #Option "RageTheatreMicrocType" # <str> #Option "ScalerWidth" # <i> #Option "RenderAccel" # [<bool>] #Option "SubPixelOrder" # [<str>] #Option "ClockGating" # [<bool>] #Option "VGAAccess" # [<bool>] #Option "ReverseDDC" # [<bool>] #Option "LVDSProbePLL" # [<bool>] #Option "AccelMethod" # <str> #Option "DRI" # [<bool>] #Option "ConnectorTable" # <str> #Option "DefaultConnectorTable" # [<bool>] #Option "DefaultTMDSPLL" # [<bool>] #Option "TVDACLoadDetect" # [<bool>] #Option "ForceTVOut" # [<bool>] #Option "TVStandard" # <str> #Option "IgnoreLidStatus" # [<bool>] #Option "DefaultTVDACAdj" # [<bool>] #Option "Int10" # [<bool>] #Option "EXAVSync" # [<bool>] #Option "ATOMTVOut" # [<bool>] #Option "R4xxATOM" # [<bool>] #Option "ForceLowPowerMode" # [<bool>] #Option "DynamicPM" # [<bool>] #Option "NewPLL" # [<bool>] #Option "ZaphodHeads" # <str> Identifier "Card0" Driver "radeon" BusID "PCI:5:0:0" EndSection Section "Device" ### Available Driver options are:- ### Values: <i>: integer, <f>: float, <bool>: "True"/"False", ### <string>: "String", <freq>: "<f> Hz/kHz/MHz", ### <percent>: "<f>%" ### [arg]: arg optional #Option "ShadowFB" # [<bool>] #Option "Rotate" # <str> #Option "fbdev" # <str> #Option "debug" # [<bool>] Identifier "Card1" Driver "fbdev" BusID "PCI:5:0:0" EndSection Section "Device" ### Available Driver options are:- ### Values: <i>: integer, <f>: float, <bool>: "True"/"False", ### <string>: "String", <freq>: "<f> Hz/kHz/MHz", ### <percent>: "<f>%" ### [arg]: arg optional #Option "ShadowFB" # [<bool>] #Option "DefaultRefresh" # [<bool>] #Option "ModeSetClearScreen" # [<bool>] Identifier "Card2" Driver "vesa" BusID "PCI:5:0:0" EndSection Section "Device" Identifier "aticonfig-Device[0]-0" Driver "fglrx" Option "Monitor-DFP1" "0-DFP1" Option "Monitor-CRT2" "0-CRT2" BusID "PCI:5:0:0" EndSection Section "Device" Identifier "DisplayLinkDevice" Driver "displaylink" Option "fbdev" "/dev/fb1" Option "ShadowFB" "off" EndSection Section "Screen" Identifier "aticonfig-Screen[0]-0" Device "aticonfig-Device[0]-0" DefaultDepth 24 SubSection "Display" Viewport 0 0 Virtual 3600 1920 Depth 24 EndSubSection EndSection Section "Screen" Identifier "DisplayLinkScreen" Device "DisplayLinkDevice" Monitor "DisplayLinkMonitor" DefaultDepth 24 SubSection "Display" Depth 24 Modes "1920x1080" EndSubSection EndSection

Read the article

MVC Razor Engine For Beginners Part 1

- by Humprey Cogay, C|EH, E|CSA

I. What is MVC? a. http://www.asp.net/mvc/tutorials/older-versions/overview/asp-net-mvc-overview II. Software Requirements for this tutorial a. Visual Studio 2010/2012. You can get your free copy here Microsoft Visual Studio 2012 b. MVC Framework Option 1 - Install using a standalone installer http://www.microsoft.com/en-us/download/details.aspx?id=30683 Option 2 - Install using Web Platform Installer http://www.microsoft.com/web/handlers/webpi.ashx?command=getinstallerredirect&appid=MVC4VS2010_Loc III. Creating your first MVC4 Application a. On the Visual Studio click file new solution link b. Click Other Project Type>Visual Studio Solutions and on the templates window select blank solution and let us name our solution MVCPrimer. c. Now Click File>New and select Project d. Select Visual C#>Web> and select ASP.NET MVC 4 Web Application and Enter MyWebSite as Name e. Select Empty, Razor as view engine and uncheck Create a Unit test project f. You can now view a basic MVC 4 Application Structure on your solution explorer g. Now we will add our first controller by right clicking on the controllers folder on your solution explorer and select Add>Controller h. Change the name of the controller to HomeController and under the scaffolding options select Empty MVC Controller. i. You will now see a basic controller with an Index method that returns an ActionResult j. We will now add a new View Folder for our Home Controller. Right click on the views folder on your solution explorer and select Add> New Folder> and name this folder Home k. Add a new View by right clicking on Views>Home Folder and select Add View. l. Name the view Index, and select Razor(CSHTML) as View Engine, All checkbox should be unchecked for now and click add. m. Relationship between our HomeController and Home Views Sub Folder n. Add new HTML Contents to our newly created Index View o. Press F5 to run our MVC Application p. We will create our new model, Right click on the models folder of our solution explorer and select Add> Class. q. Let us name our class Customer r. Edit the Customer class with the following code s. Open the HomeController by double clickin HomeController of our Controllers folder and edit the HomeControllerusing System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; namespace MyWebSite.Controllers { public class HomeController : Controller { // // GET: /Home/ public ActionResult Index() { return View(); } public ActionResult ListCustomers() { List<Models.Customer> customers = new List<Models.Customer>(); //Add First Customer to Our Collection customers.Add(new Models.Customer() { Id = 1, CompanyName = "Volvo", ContactNo = "123-0123-0001", ContactPerson = "Gustav Larson", Description = "Volvo Car Corporation, or Volvo Personvagnar AB, is a Scandinavian automobile manufacturer founded in 1927" }); //Add Second Customer to Our Collection customers.Add(new Models.Customer() { Id = 2, CompanyName = "BMW", ContactNo = "999-9876-9898", ContactPerson = "Franz Josef Popp", Description = "Bayerische Motoren Werke AG, (BMW; English: Bavarian Motor Works) is a " + "German automobile, motorcycle and engine manufacturing company founded in 1917. " }); //Add Third Customer to Our Collection customers.Add(new Models.Customer() { Id = 3, CompanyName = "Audi", ContactNo = "983-2222-1212", ContactPerson = "Karl Benz", Description = " is a multinational division of the German manufacturer Daimler AG," }); return View(customers); } } } t. Let us now create a view for this Class, But before continuing Press Ctrl + Shift + B to rebuild the solution, this will make the previously created model on the Model class drop down of the Add View Menu. Right click on the views>Home folder and select Add>View u. Let us name our View as ListCustomers, Select Razor(CSHTML) as View Engine, Put a check mark on Create a strongly-typed view, and select Customer (MyWebSite.Models) as model class. Slect List on the Scaffold Template and Click OK. v. Run the MVC Application by pressing F5, and on the address bar insert Home/ListCustomers, We should now see a web page similar below. x. You can edit ListCustomers.CSHTML to remove and add HTML codes @model IEnumerable<MyWebSite.Models.Customer> @{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>ListCustomers</title> </head> <body> <h2>List of Customers</h2> <table border="1"> <tr> <th> @Html.DisplayNameFor(model => model.CompanyName) </th> <th> @Html.DisplayNameFor(model => model.Description) </th> <th> @Html.DisplayNameFor(model => model.ContactPerson) </th> <th> @Html.DisplayNameFor(model => model.ContactNo) </th> </tr> @foreach (var item in Model) { <tr> <td> @Html.DisplayFor(modelItem => item.CompanyName) </td> <td> @Html.DisplayFor(modelItem => item.Description) </td> <td> @Html.DisplayFor(modelItem => item.ContactPerson) </td> <td> @Html.DisplayFor(modelItem => item.ContactNo) </td> </tr> } </table> </body> </html> y. Press F5 to run the MVC Application z. You will notice some @HTML.DisplayFor codes. These are called HTML Helpers you can read more about HTML Helpers on this site http://www.w3schools.com/aspnet/mvc_htmlhelpers.asp That’s all. You now have your first MVC4 Razor Engine Web Application . . .

Read the article

September 2012 Release of the Ajax Control Toolkit

- by Stephen.Walther

I’m excited to announce the September 2012 release of the Ajax Control Toolkit! This is the first release of the Ajax Control Toolkit which supports the .NET 4.5 framework. We also continue to support ASP.NET 3.5 and ASP.NET 4.0. With this release, we’ve made several important bug fixes. The Superexpert team focused on fixing the highest voted issues associated with the CascadingDropDown control. I’ve created a list of these bug fixes later in this blog post. You can download the latest release of the Ajax Control Toolkit by visiting the following page at CodePlex: http://AjaxControlToolkit.CodePlex.com Alternatively, you can install the latest version of the Ajax Control Toolkit using NuGet by firing off the following command from the Package Manager Console: Install-Package AjaxControlToolkit Using the Ajax Control Toolkit with ASP.NET 4.5 Let me walk through the steps for using the Ajax Control Toolkit with ASP.NET 4.5. First, I’ll create a new ASP.NET 4.5 website with Visual Studio 2012. I’ll create the new website with the ASP.NET Web Forms Application template: When you create a new ASP.NET 4.5 site with the ASP.NET Web Forms Application template, you get a starter website. If you run the site, then you get a page with default content: Let me show you how you can add the Ajax Control Toolkit Calendar control to the homepage of this starter site. The first step is to use NuGet to install the Ajax Control Toolkit. Right-click the References folder in the Solution Explorer window and select the menu option Manage NuGet Packages. In the Manage NuGet Packages dialog, use the search box to search for the Ajax Control Toolkit (enter “AjaxControlToolkit”). After you find it, click the Install button to add the Ajax Control Toolkit to your project. That’s all you have to do to install the Ajax Control Toolkit! Now we are ready to start using the Ajax Control Toolkit controls. Open the default.aspx page so we can modify the contents of the page. Erase everything contained in the Content control with the ID of BodyContent. After erasing the content, declare the following two controls: <asp:TextBox ID="vacationDate" runat="server" /> <ajaxToolkit:CalendarExtender TargetControlID="vacationDate" runat="server" /> The first control is a standard ASP.NET TextBox control and the second control is an Ajax Control Toolkit Calendar control. You should get intellisense as you type out the Ajax Control Toolkit Calendar control. If you don’t, then close and re-open the Default.aspx page. Now, let’s run our app. Hit the F5 button or select Debug, Start Debugging from the Visual Studio menu. You will get the error message “MsAjaxBundle is not a valid script name”. Don’t despair! We need to update the Master Page so it uses the ToolkitScriptManager instead of the default ScriptManager. Open the Site.Master file and find where the ScriptManager is declared. The ScriptManager should look like this: <asp:ScriptManager runat="server"> <Scripts> <%--Framework Scripts--%> <asp:ScriptReference Name="MsAjaxBundle" /> <asp:ScriptReference Name="jquery" /> <asp:ScriptReference Name="jquery.ui.combined" /> <asp:ScriptReference Name="WebForms.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebForms.js" /> <asp:ScriptReference Name="WebUIValidation.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebUIValidation.js" /> <asp:ScriptReference Name="MenuStandards.js" Assembly="System.Web" Path="~/Scripts/WebForms/MenuStandards.js" /> <asp:ScriptReference Name="GridView.js" Assembly="System.Web" Path="~/Scripts/WebForms/GridView.js" /> <asp:ScriptReference Name="DetailsView.js" Assembly="System.Web" Path="~/Scripts/WebForms/DetailsView.js" /> <asp:ScriptReference Name="TreeView.js" Assembly="System.Web" Path="~/Scripts/WebForms/TreeView.js" /> <asp:ScriptReference Name="WebParts.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebParts.js" /> <asp:ScriptReference Name="Focus.js" Assembly="System.Web" Path="~/Scripts/WebForms/Focus.js" /> <asp:ScriptReference Name="WebFormsBundle" /> <%--Site Scripts--%> </Scripts> </asp:ScriptManager> We need to make three changes to the ScriptManager: 1) We need to replace the asp:ScriptManager with the ajaxToolkit:ToolkitScriptManager 2) We need to remove the MsAjaxBundle bundle from the ScriptReferences 3) We need to remove the Assembly=”System.Web” attributes from the ScriptReferences After you make these three changes, the ToolkitScriptManager should looks like this: <ajaxToolkit:ToolkitScriptManager runat="server"> <Scripts> <%--Framework Scripts--%> <asp:ScriptReference Name="jquery" /> <asp:ScriptReference Name="jquery.ui.combined" /> <asp:ScriptReference Name="WebForms.js" Path="~/Scripts/WebForms/WebForms.js" /> <asp:ScriptReference Name="WebUIValidation.js" Path="~/Scripts/WebForms/WebUIValidation.js" /> <asp:ScriptReference Name="MenuStandards.js" Path="~/Scripts/WebForms/MenuStandards.js" /> <asp:ScriptReference Name="GridView.js" Path="~/Scripts/WebForms/GridView.js" /> <asp:ScriptReference Name="DetailsView.js" Path="~/Scripts/WebForms/DetailsView.js" /> <asp:ScriptReference Name="TreeView.js" Path="~/Scripts/WebForms/TreeView.js" /> <asp:ScriptReference Name="WebParts.js" Path="~/Scripts/WebForms/WebParts.js" /> <asp:ScriptReference Name="Focus.js" Path="~/Scripts/WebForms/Focus.js" /> <asp:ScriptReference Name="WebFormsBundle" /> <%--Site Scripts--%> </Scripts> </ajaxToolkit:ToolkitScriptManager> After we make these changes, the app should run successfully. You’ll get a page which contains a text field. When you click inside the text field, a popup calendar is displayed. Ajax Control Toolkit and jQuery You might have noticed that the ScriptManager includes a reference to jQuery by default. We did not remove that reference when we converted the ScriptManager to a ToolkitScriptManager. You can use the Ajax Control Toolkit and jQuery side-by-side. Here’s how you can modify the Default.aspx page so that it contains two popup calendars. The first popup calendar is created with the Ajax Control Toolkit and the second popup calendar is created with jQuery: <asp:TextBox ID="vacationDate" runat="server" /> <ajaxToolkit:CalendarExtender TargetControlID="vacationDate" runat="server" /> <input id="birthDate" /> <script> $("#birthDate").datepicker(); </script> Before you can start using jQuery UI plugins, you need to complete one more step. You need to add the jQuery UI themes bundle to the HEAD of the Site.Master page like this: <head runat="server"> <meta charset="utf-8" /> <title><%: Page.Title %> - My ASP.NET Application</title> <asp:PlaceHolder runat="server"> <%: Scripts.Render("~/bundles/modernizr") %> </asp:PlaceHolder> <webopt:BundleReference runat="server" Path="~/Content/css" /> <webopt:BundleReference runat="server" Path="~/Content/themes/base/css" /> <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" /> <meta name="viewport" content="width=device-width" /> <asp:ContentPlaceHolder runat="server" ID="HeadContent" /> </head> The markup above includes a reference to the jQuery UI themes bundle: <webopt:BundleReference runat="server" Path="~/Content/themes/base/css" /> Now that we have made these changes, we can use the Ajax Control Toolkit and jQuery at the same time. When you run your app, you get two popup calendars. When you click in the first text field, the Ajax Control Toolkit calendar appears. When you click in the second text field, the jQuery UI popup calendar appears: Bug Fixes in this Release We made several important bug fixes with this release of the Ajax Control Toolkit and integrated several Pull Requests contributed by the community. Our primary focus during this sprint was fixing issues with the CascadingDropDown control. We fixed the following issues associated with the CascadingDropDown: · 9490 – Don’t disable dropdowns in CascadingDropDown · 14223 – CascadingDropDown Reset or Setting SelectedValue from WebMethod · 12189 – CascadingDropDown not obeying disabled state of DropDownList · 22942 – CascadingDropDown infinite loop (with solution) · 8671 – CascadingDropdown options is null or undefined · 14407 – CascadingDropDown: populated client event happens too often · 17148 – CascadingDropDown – Add “UseHttpGet” property · 10221 – No NotNull check in CascadingDropDown · 12228 – Provide property for case-insensitive DefaultValue lookup in CascadingDropdown We also fixed the following two issues which are not directly related to the CascadingDropDown control: · 27108 – CalendarExtender: Bug when selecting December shifts to January. · 27041 – Input controls with HTML5 types do not post back in Firefox, Chrome, Safari Finally, we integrated several Pull Requests submitted by the community (Thank you community!): · Added French localized resources for the AjaxFileUpload · Resolved an issue which prevented the AjaxFileUpload control from working with pages that require query string variables. · Extended the AjaxFileUploadEventArgs class to include the current file index in the queue and the total number of files in the queue. · Fixed an issue with TabContainer and TabPanel which caused the OnActiveTabChanged event to fire too often. Summary I’m happy to see the Ajax Control Toolkit move forward into the brave new world of ASP.NET 4.5! In this latest release, we focused on ensuring that the Ajax Control Toolkit works smoothly with ASP.NET 4.5 applications. We also fixed the highest voted bugs associated with the CascadingDropDown control and integrated several Pull Request submitted by the community. Once again, I want to thank the Superexpert team for their hard work on this release!

Read the article

Ubuntu 12.04 OpenCL with Intel and Radeon?

- by Steve

I want to setup my Ubuntu 12.04 with OpenCL(Open Computing Language) support for i7 2600k and Radeon HD5870. My Monitor is connected to the integrated Graphics of the i7. Intel OpenCL SDK is installed and working. Iteration of avaliable OpenCL devices shows 2 entries for Intel. As recommended I installed AMD APP SDK 2.6 first and then the fglrx driver. I installed fglrx from Ubuntu repositories. This works fine till here. When I run aticonfig --inital -f and restart the system I get into trouble. Xorg starts only in low-graphics mode. cat /var/log/Xorg.0.log [ 21.201] X.Org X Server 1.12.2 Release Date: 2012-05-29 [ 21.201] X Protocol Version 11, Revision 0 [ 21.201] Build Operating System: Linux 2.6.24-29-xen x86_64 Ubuntu [ 21.201] Current Operating System: Linux chimera 3.2.0-24-generic #39-Ubuntu SMP Mon May 21 16:52:17 UTC 2012 x86_ [ 21.201] Kernel command line: BOOT_IMAGE=/boot/vmlinuz-3.2.0-24-generic root=UUID=c137757b-486b-4514-9dfe-00c97662 [ 21.201] Build Date: 05 June 2012 08:35:55AM [ 21.201] xorg-server 2:1.12.2+git20120605+server-1.12-branch.aaf48906-0ubuntu0ricotz~precise (For technical suppor [ 21.201] Current version of pixman: 0.26.0 [ 21.201] Before reporting problems, check http://wiki.x.org to make sure that you have the latest version. [ 21.201] Markers: (--) probed, (**) from config file, (==) default setting, (++) from command line, (!!) notice, (II) informational, (WW) warning, (EE) error, (NI) not implemented, (??) unknown. [ 21.201] (==) Log file: "/var/log/Xorg.0.log", Time: Fri Jun 8 14:22:36 2012 [ 21.247] (==) Using config file: "/etc/X11/xorg.conf" [ 21.247] (==) Using system config directory "/usr/share/X11/xorg.conf.d" [ 21.450] (==) ServerLayout "aticonfig Layout" [ 21.450] (**) |-->Screen "aticonfig-Screen[0]-0" (0) [ 21.450] (**) | |-->Monitor "aticonfig-Monitor[0]-0" [ 21.451] (**) | |-->Device "aticonfig-Device[0]-0" [ 21.451] (==) Automatically adding devices [ 21.451] (==) Automatically enabling devices [ 21.466] (WW) The directory "/usr/share/fonts/X11/cyrillic" does not exist. [ 21.466] Entry deleted from font path. [ 21.466] (WW) The directory "/usr/share/fonts/X11/100dpi/" does not exist. [ 21.466] Entry deleted from font path. [ 21.466] (WW) The directory "/usr/share/fonts/X11/75dpi/" does not exist. [ 21.466] Entry deleted from font path. [ 21.473] (WW) The directory "/usr/share/fonts/X11/100dpi" does not exist. [ 21.473] Entry deleted from font path. [ 21.473] (WW) The directory "/usr/share/fonts/X11/75dpi" does not exist. [ 21.473] Entry deleted from font path. [ 21.473] (WW) The directory "/var/lib/defoma/x-ttcidfont-conf.d/dirs/TrueType" does not exist. [ 21.473] Entry deleted from font path. [ 21.473] (==) FontPath set to: /usr/share/fonts/X11/misc, /usr/share/fonts/X11/Type1, built-ins [ 21.473] (==) ModulePath set to "/usr/lib/x86_64-linux-gnu/xorg/extra-modules,/usr/lib/xorg/extra-modules,/usr/lib [ 21.473] (II) The server relies on udev to provide the list of input devices. If no devices become available, reconfigure udev or disable AutoAddDevices. [ 21.473] (II) Loader magic: 0x7f0ad3b9ab00 [ 21.473] (II) Module ABI versions: [ 21.473] X.Org ANSI C Emulation: 0.4 [ 21.473] X.Org Video Driver: 12.0 [ 21.473] X.Org XInput driver : 16.0 [ 21.473] X.Org Server Extension : 6.0 [ 21.473] (--) PCI:*(0:0:2:0) 8086:0122:1458:d000 rev 9, Mem @ 0xfb800000/4194304, 0xe0000000/268435456, I/O @ 0x00 [ 21.473] (--) PCI: (0:1:0:0) 1002:6898:1787:2289 rev 0, Mem @ 0xd0000000/268435456, 0xfbdc0000/131072, I/O @ 0x000 [ 21.473] (II) Open ACPI successful (/var/run/acpid.socket) [ 21.473] (II) "extmod" will be loaded by default. [ 21.473] (II) "dbe" will be loaded by default. [ 21.473] (II) "glx" will be loaded. This was enabled by default and also specified in the config file. [ 21.473] (II) "record" will be loaded by default. [ 21.473] (II) "dri" will be loaded by default. [ 21.473] (II) "dri2" will be loaded by default. [ 21.473] (II) LoadModule: "glx" [ 21.732] (II) Loading /usr/lib/x86_64-linux-gnu/xorg/extra-modules/extra-modules.dpkg-tmp/modules/extensions/libgl [ 21.934] (II) Module glx: vendor="Advanced Micro Devices, Inc." [ 21.934] compiled for 6.9.0, module version = 1.0.0 [ 21.934] (II) Loading extension GLX [ 21.934] (II) LoadModule: "extmod" [ 22.028] (II) Loading /usr/lib/xorg/modules/extensions/libextmod.so [ 22.041] (II) Module extmod: vendor="X.Org Foundation" [ 22.041] compiled for 1.12.2, module version = 1.0.0 [ 22.041] Module class: X.Org Server Extension [ 22.041] ABI class: X.Org Server Extension, version 6.0 [ 22.041] (II) Loading extension MIT-SCREEN-SAVER [ 22.041] (II) Loading extension XFree86-VidModeExtension [ 22.041] (II) Loading extension XFree86-DGA [ 22.041] (II) Loading extension DPMS [ 22.041] (II) Loading extension XVideo [ 22.041] (II) Loading extension XVideo-MotionCompensation [ 22.041] (II) Loading extension X-Resource [ 22.041] (II) LoadModule: "dbe" [ 22.041] (II) Loading /usr/lib/xorg/modules/extensions/libdbe.so [ 22.066] (II) Module dbe: vendor="X.Org Foundation" [ 22.066] compiled for 1.12.2, module version = 1.0.0 [ 22.066] Module class: X.Org Server Extension [ 22.066] ABI class: X.Org Server Extension, version 6.0 [ 22.066] (II) Loading extension DOUBLE-BUFFER [ 22.066] (II) LoadModule: "record" [ 22.066] (II) Loading /usr/lib/xorg/modules/extensions/librecord.so [ 22.077] (II) Module record: vendor="X.Org Foundation" [ 22.077] compiled for 1.12.2, module version = 1.13.0 [ 22.077] Module class: X.Org Server Extension [ 22.077] ABI class: X.Org Server Extension, version 6.0 [ 22.077] (II) Loading extension RECORD [ 22.077] (II) LoadModule: "dri" [ 22.077] (II) Loading /usr/lib/xorg/modules/extensions/libdri.so [ 22.082] (II) Module dri: vendor="X.Org Foundation" [ 22.082] compiled for 1.12.2, module version = 1.0.0 [ 22.082] ABI class: X.Org Server Extension, version 6.0 [ 22.082] (II) Loading extension XFree86-DRI [ 22.082] (II) LoadModule: "dri2" [ 22.082] (II) Loading /usr/lib/xorg/modules/extensions/libdri2.so [ 22.083] (II) Module dri2: vendor="X.Org Foundation" [ 22.083] compiled for 1.12.2, module version = 1.2.0 [ 22.083] ABI class: X.Org Server Extension, version 6.0 [ 22.083] (II) Loading extension DRI2 [ 22.083] (II) LoadModule: "fglrx" [ 22.083] (II) Loading /usr/lib/x86_64-linux-gnu/xorg/extra-modules/extra-modules.dpkg-tmp/modules/drivers/fglrx_dr [ 22.399] (II) Module fglrx: vendor="FireGL - ATI Technologies Inc." [ 22.399] compiled for 1.4.99.906, module version = 8.96.4 [ 22.399] Module class: X.Org Video Driver [ 22.399] (II) Loading sub module "fglrxdrm" [ 22.399] (II) LoadModule: "fglrxdrm" [ 22.399] (II) Loading /usr/lib/x86_64-linux-gnu/xorg/extra-modules/extra-modules.dpkg-tmp/modules/linux/libfglrxdr [ 22.445] (II) Module fglrxdrm: vendor="FireGL - ATI Technologies Inc." [ 22.445] compiled for 1.4.99.906, module version = 8.96.4 [ 22.445] (II) ATI Proprietary Linux Driver Version Identifier:8.96.4 [ 22.445] (II) ATI Proprietary Linux Driver Release Identifier: 8.96.7 [ 22.445] (II) ATI Proprietary Linux Driver Build Date: Mar 12 2012 13:06:50 [ 22.445] (++) using VT number 7 [ 22.445] (WW) Falling back to old probe method for fglrx [ 23.043] (II) Loading PCS database from /etc/ati/amdpcsdb [ 23.082] (--) Chipset Supported AMD Graphics Processor (0x6898) found [ 23.107] (WW) fglrx: No matching Device section for instance (BusID PCI:0@1:0:1) found [ 23.107] (II) fglrx: intel VGA device detected, load intel driver. [ 23.107] (II) LoadModule: "intel" [ 23.211] (II) Loading /usr/lib/xorg/modules/drivers/intel_drv.so [ 23.475] (II) Module intel: vendor="X.Org Foundation" [ 23.475] compiled for 1.12.2, module version = 2.19.0 [ 23.475] Module class: X.Org Video Driver [ 23.475] ABI class: X.Org Video Driver, version 12.0 [ 23.476] ukiDynamicMajor: found major device number 249 [ 23.476] ukiDynamicMajor: found major device number 249 [ 23.476] ukiOpenByBusid: Searching for BusID PCI:1:0:0 [ 23.476] ukiOpenDevice: node name is /dev/ati/card0 [ 23.476] ukiOpenDevice: open result is 8, (OK) [ 23.476] ukiOpenByBusid: ukiOpenMinor returns 8 [ 23.476] ukiOpenByBusid: ukiGetBusid reports PCI:1:0:0 [ 23.540] (WW) PowerXpress feature is not supported [ 23.540] (EE) No devices detected. [ 23.540] (==) Matched intel as autoconfigured driver 0 [ 23.540] (==) Matched vesa as autoconfigured driver 1 [ 23.540] (==) Matched fbdev as autoconfigured driver 2 [ 23.540] (==) Assigned the driver to the xf86ConfigLayout [ 23.540] (II) LoadModule: "intel" [ 23.540] (II) Loading /usr/lib/xorg/modules/drivers/intel_drv.so [ 23.540] (II) Module intel: vendor="X.Org Foundation" [ 23.540] compiled for 1.12.2, module version = 2.19.0 [ 23.540] Module class: X.Org Video Driver [ 23.540] ABI class: X.Org Video Driver, version 12.0 [ 23.540] (II) UnloadModule: "intel" [ 23.540] (II) Unloading intel [ 23.540] (II) Failed to load module "intel" (already loaded, 32522) [ 23.540] (II) LoadModule: "vesa" [ 23.583] (II) Loading /usr/lib/xorg/modules/drivers/vesa_drv.so [ 23.620] (II) Module vesa: vendor="X.Org Foundation" [ 23.620] compiled for 1.12.2, module version = 2.3.1 [ 23.620] Module class: X.Org Video Driver [ 23.620] ABI class: X.Org Video Driver, version 12.0 [ 23.620] (II) LoadModule: "fbdev" [ 23.620] (II) Loading /usr/lib/xorg/modules/drivers/fbdev_drv.so [ 23.661] (II) Module fbdev: vendor="X.Org Foundation" [ 23.661] compiled for 1.12.2, module version = 0.4.2 [ 23.661] Module class: X.Org Video Driver [ 23.661] ABI class: X.Org Video Driver, version 12.0 [ 23.661] (II) ATI Proprietary Linux Driver Version Identifier:8.96.4 [ 23.661] (II) ATI Proprietary Linux Driver Release Identifier: 8.96.7 [ 23.661] (II) ATI Proprietary Linux Driver Build Date: Mar 12 2012 13:06:50 [ 23.661] (II) intel: Driver for Intel Integrated Graphics Chipsets: i810, i810-dc100, i810e, i815, i830M, 845G, 854, 852GM/855GM, 865G, 915G, E7221 (i915), 915GM, 945G, 945GM, 945GME, Pineview GM, Pineview G, 965G, G35, 965Q, 946GZ, 965GM, 965GME/GLE, G33, Q35, Q33, GM45, 4 Series, G45/G43, Q45/Q43, G41, B43, B43, Clarkdale, Arrandale, Sandybridge Desktop (GT1), Sandybridge Desktop (GT2), Sandybridge Desktop (GT2+), Sandybridge Mobile (GT1), Sandybridge Mobile (GT2), Sandybridge Mobile (GT2+), Sandybridge Server, Ivybridge Mobile (GT1), Ivybridge Mobile (GT2), Ivybridge Desktop (GT1), Ivybridge Desktop (GT2), Ivybridge Server, Ivybridge Server (GT2) [ 23.661] (II) VESA: driver for VESA chipsets: vesa [ 23.661] (II) FBDEV: driver for framebuffer: fbdev [ 23.661] (++) using VT number 7 [ 23.661] (WW) xf86OpenConsole: setpgid failed: Operation not permitted [ 23.661] (WW) xf86OpenConsole: setsid failed: Operation not permitted [ 23.661] (WW) Falling back to old probe method for fglrx [ 23.661] (II) Loading PCS database from /etc/ati/amdpcsdb [ 23.661] (WW) Falling back to old probe method for vesa [ 23.661] (WW) Falling back to old probe method for fbdev [ 23.661] (EE) No devices detected. [ 23.661] Fatal server error: [ 23.661] no screens found [ 23.661] Please consult the The X.Org Foundation support at http://wiki.x.org for help. [ 23.661] Please also check the log file at "/var/log/Xorg.0.log" for additional information. [ 23.661] xorg.conf: cat /etc/X11/xorg.conf Section "ServerLayout" Identifier "aticonfig Layout" Screen 0 "aticonfig-Screen[0]-0" 0 0 EndSection Section "Module" Load "glx" EndSection Section "Monitor" Identifier "aticonfig-Monitor[0]-0" Option "VendorName" "ATI Proprietary Driver" Option "ModelName" "Generic Autodetecting Monitor" Option "DPMS" "true" EndSection Section "Device" Identifier "aticonfig-Device[0]-0" Driver "fglrx" BusID "PCI:1:0:0" EndSection Section "Screen" Identifier "aticonfig-Screen[0]-0" Device "aticonfig-Device[0]-0" Monitor "aticonfig-Monitor[0]-0" DefaultDepth 24 SubSection "Display" Viewport 0 0 Depth 24 EndSubSection EndSection Is there a way to get the Radeon to work in a hybrid configuration or to use the Radeon as an OpenCL only device?

Read the article

How does this main domain have a CNAME record?

- by TRiG

I was under the impression that only subdomains could have CNAME records: main domains need to define all their own records. However, apt-get.com seems to have only a CNAME record. How can this work? $ dig apt-get.com ; <<>> DiG 9.8.1-P1 <<>> apt-get.com ;; global options: +cmd ;; Got answer: ;; ->>HEADER<<- opcode: QUERY, status: NOERROR, id: 45743 ;; flags: qr rd ra; QUERY: 1, ANSWER: 9, AUTHORITY: 0, ADDITIONAL: 0 ;; QUESTION SECTION: ;apt-get.com. IN A ;; ANSWER SECTION: apt-get.com. 86336 IN CNAME thie5ku9.dsgeneration.com. thie5ku9.dsgeneration.com. 60 IN A 208.73.211.242 thie5ku9.dsgeneration.com. 60 IN A 208.73.211.246 thie5ku9.dsgeneration.com. 60 IN A 208.73.211.166 thie5ku9.dsgeneration.com. 60 IN A 208.73.211.232 thie5ku9.dsgeneration.com. 60 IN A 208.73.211.161 thie5ku9.dsgeneration.com. 60 IN A 208.73.210.233 thie5ku9.dsgeneration.com. 60 IN A 208.73.211.186 thie5ku9.dsgeneration.com. 60 IN A 208.73.211.188 ;; Query time: 59 msec ;; SERVER: 127.0.0.1#53(127.0.0.1) ;; WHEN: Tue Jun 10 15:05:48 2014 ;; MSG SIZE rcvd: 193 $ dig apt-get.com ns ; <<>> DiG 9.8.1-P1 <<>> apt-get.com ns ;; global options: +cmd ;; Got answer: ;; ->>HEADER<<- opcode: QUERY, status: SERVFAIL, id: 43831 ;; flags: qr rd ra; QUERY: 1, ANSWER: 0, AUTHORITY: 0, ADDITIONAL: 0 ;; QUESTION SECTION: ;apt-get.com. IN NS ;; Query time: 26 msec ;; SERVER: 127.0.0.1#53(127.0.0.1) ;; WHEN: Tue Jun 10 15:12:37 2014 ;; MSG SIZE rcvd: 29 $ dig apt-get.com ns @b.gtld-servers.net ; <<>> DiG 9.8.1-P1 <<>> apt-get.com ns @b.gtld-servers.net ;; global options: +cmd ;; Got answer: ;; ->>HEADER<<- opcode: QUERY, status: NOERROR, id: 38228 ;; flags: qr rd; QUERY: 1, ANSWER: 0, AUTHORITY: 2, ADDITIONAL: 2 ;; WARNING: recursion requested but not available ;; QUESTION SECTION: ;apt-get.com. IN NS ;; AUTHORITY SECTION: apt-get.com. 172800 IN NS ns1.domainrecover.com. apt-get.com. 172800 IN NS ns2.domainrecover.com. ;; ADDITIONAL SECTION: ns1.domainrecover.com. 172800 IN A 66.45.232.66 ns2.domainrecover.com. 172800 IN A 65.23.159.179 ;; Query time: 70 msec ;; SERVER: 192.33.14.30#53(192.33.14.30) ;; WHEN: Tue Jun 10 15:07:05 2014 ;; MSG SIZE rcvd: 111 The domain does resolve. I get the following headers: GET / HTTP/1.1 User-Agent: Testing_Sniffer/4.15 Host: apt-get.com Accept: */* HTTP/1.0 200 (OK) Cache-Control: private, no-cache, must-revalidate Connection: Keep-Alive Pragma: no-cache Server: Oversee Turing v1.0.0 Content-Length: 1347 Content-Type: text/html Expires: Mon, 26 Jul 1997 05:00:00 GMT Keep-Alive: timeout=3, max=96 P3P: policyref="http://www.dsparking.com/w3c/p3p.xml", CP="NOI DSP COR ADMa OUR NOR STA" Set-Cookie: parkinglot=1; domain=.apt-get.com; path=/; expires=Wed, 11-Jun-2014 14:10:37 GMT <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">  <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>apt-get.com</title> <meta name="keywords" content="apt-get.com" /> <meta name="description" content="apt-get.com" /> <meta name="robots" content="index, follow" /> <meta name="revisit-after" content="10" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <script type="text/javascript"> document.cookie = "jsc=1"; </script> </head> <frameset rows="100%,*" frameborder="no" border="0" framespacing="0"> <frame src="http://apt-get.com?epl=5PfLSSqWrYDAt-gbwMDK_rA3b1UJCYVTJHfxTzr9FTDQV84b6vAgVhU3FTeCRQNiuRNv79Ni0V3mkEVNRhpqo2gpMjp5iOIR1w2_EISPENaqzoXohVXl2QI3ryXlRCB4FaIIaxynnWXWY6QBgBgNiIZ6agD1NBoNGg0ajXpUCXUAIJDer78AAOB_AwAAQIDbCwAAe_NWlVlTJllBMTZoWkKPAAAA8A" name="apt-get.com"> </frameset> <noframes> <body><a href="http://apt-get.com?epl=5PfLSSqWrYDAt-gbwMDK_rA3b1UJCYVTJHfxTzr9FTDQV84b6vAgVhU3FTeCRQNiuRNv79Ni0V3mkEVNRhpqo2gpMjp5iOIR1w2_EISPENaqzoXohVXl2QI3ryXlRCB4FaIIaxynnWXWY6QBgBgNiIZ6agD1NBoNGg0ajXpUCXUAIJDer78AAOB_AwAAQIDbCwAAe_NWlVlTJllBMTZoWkKPAAAA8A">Click here to go to apt-get.com</a>.</body> </noframes> </html>

Read the article

How to make a player stay within bounds of world with 2D Camera

- by Craig

Im creating a simple top down survival game. At the moment, i have the sprite which is a ship and moves by rotating left or right then going forward in that direction. I have implemented a 2D camera, its always centered on the player. However, when i move towards the bounds of the world that the sprite is in it just keeps on going :( How to i sort it that it stops at the edge of the world and cant go beyond it? Cheers :) Below is the main game class using System; using System.Collections.Generic; using System.Linq; using Microsoft.Xna.Framework; using Microsoft.Xna.Framework.Audio; using Microsoft.Xna.Framework.Content; using Microsoft.Xna.Framework.GamerServices; using Microsoft.Xna.Framework.Graphics; using Microsoft.Xna.Framework.Input; using Microsoft.Xna.Framework.Media; namespace GamesCoursework_1 { /// <summary> /// This is the main type for your game /// </summary> public class Game1 : Microsoft.Xna.Framework.Game { GraphicsDeviceManager graphics; SpriteBatch spriteBatch; // player variables Texture2D Ship; Vector2 Ship_Position; float Ship_Rotation = 0.0f; Vector2 Ship_Origin; Vector2 Ship_Velocity; const float tangentialVelocity = 4f; float friction = 0.05f; static Point CameraViewport = new Point(800, 800); Camera2d cam = new Camera2d((int)CameraViewport.X, (int)CameraViewport.Y); //Size of world static Point worldSize = new Point(1600, 1600); // Screen variables static Point worldCenter = new Point(worldSize.X / 2, worldSize.Y / 2); Rectangle playerBounds = new Rectangle(CameraViewport.X / 2, CameraViewport.Y / 2, worldSize.X - CameraViewport.X, worldSize.Y - CameraViewport.Y); Rectangle worldBounds = new Rectangle(0, 0, worldSize.X, worldSize.Y); Texture2D background; public Game1() { graphics = new GraphicsDeviceManager(this); graphics.PreferredBackBufferWidth = CameraViewport.X; graphics.PreferredBackBufferHeight = CameraViewport.Y; Content.RootDirectory = "Content"; } /// <summary> /// Allows the game to perform any initialization it needs to before starting to run. /// This is where it can query for any required services and load any non-graphic /// related content. Calling base.Initialize will enumerate through any components /// and initialize them as well. /// </summary> protected override void Initialize() { // TODO: Add your initialization logic here base.Initialize(); } /// <summary> /// LoadContent will be called once per game and is the place to load /// all of your content. /// </summary> protected override void LoadContent() { // Create a new SpriteBatch, which can be used to draw textures. spriteBatch = new SpriteBatch(GraphicsDevice); // TODO: use this.Content to load your game content here Ship = Content.Load<Texture2D>("Ship"); Ship_Origin.X = Ship.Width / 2; Ship_Origin.Y = Ship.Height / 2; background = Content.Load<Texture2D>("aus"); Ship_Position = new Vector2(worldCenter.X, worldCenter.Y); cam.Pos = Ship_Position; cam.Zoom = 1f; } /// <summary> /// UnloadContent will be called once per game and is the place to unload /// all content. /// </summary> protected override void UnloadContent() { // TODO: Unload any non ContentManager content here } /// <summary> /// Allows the game to run logic such as updating the world, /// checking for collisions, gathering input, and playing audio. /// </summary> /// <param name="gameTime">Provides a snapshot of timing values.</param> protected override void Update(GameTime gameTime) { // Allows the game to exit if (GamePad.GetState(PlayerIndex.One).Buttons.Back == ButtonState.Pressed) this.Exit(); // TODO: Add your update logic here Ship_Position = Ship_Velocity + Ship_Position; keyPressed(); base.Update(gameTime); } /// <summary> /// This is called when the game should draw itself. /// </summary> /// <param name="gameTime">Provides a snapshot of timing values.</param> protected override void Draw(GameTime gameTime) { GraphicsDevice.Clear(Color.CornflowerBlue); // TODO: Add your drawing code here spriteBatch.Begin(SpriteSortMode.Deferred, BlendState.AlphaBlend, null, null, null,null, cam.get_transformation(GraphicsDevice)); spriteBatch.Draw(background, Vector2.Zero, Color.White); spriteBatch.Draw(Ship, Ship_Position, Ship.Bounds, Color.White, Ship_Rotation, Ship_Origin, 1.0f, SpriteEffects.None, 0f); spriteBatch.End(); base.Draw(gameTime); } private void Ship_Move(Vector2 move) { Ship_Position += move; } private void keyPressed() { KeyboardState keyState; // Move right keyState = Keyboard.GetState(); if (keyState.IsKeyDown(Keys.Right)) { Ship_Rotation = Ship_Rotation + 0.1f; } if (keyState.IsKeyDown(Keys.Left)) { Ship_Rotation = Ship_Rotation - 0.1f; } if (keyState.IsKeyDown(Keys.Up)) { Ship_Velocity.X = (float)Math.Cos(Ship_Rotation) * tangentialVelocity; Ship_Velocity.Y = (float)Math.Sin(Ship_Rotation) * tangentialVelocity; if ((int)Ship_Position.Y < playerBounds.Bottom && (int)Ship_Position.Y > playerBounds.Top) cam._pos.Y = Ship_Position.Y; if ((int)Ship_Position.X > playerBounds.Left && (int)Ship_Position.X < playerBounds.Right) cam._pos.X = Ship_Position.X; //tried world bounds here if (!worldBounds.Contains(new Point((int)Ship_Position.X, (int)Ship_Position.Y))) Ship_Position -= new Vector2(0.0f, -tangentialVelocity * 2); if (!worldBounds.Contains(new Point((int)Ship_Position.X, (int)Ship_Position.Y))) Ship_Position -= new Vector2(0.0f, 2 * tangentialVelocity); } else if(Ship_Velocity != Vector2.Zero) { float i = Ship_Velocity.X; float j = Ship_Velocity.Y; Ship_Velocity.X = i -= friction * i; Ship_Velocity.Y = j -= friction * j; if ((int)Ship_Position.Y < playerBounds.Bottom && (int)Ship_Position.Y > playerBounds.Top) cam._pos.Y = Ship_Position.Y; if ((int)Ship_Position.X > playerBounds.Left && (int)Ship_Position.X < playerBounds.Right) cam._pos.X = Ship_Position.X; } if (keyState.IsKeyDown(Keys.Q)) { if (cam.Zoom < 2f) cam.Zoom += 0.05f; } if (keyState.IsKeyDown(Keys.A)) { if (cam.Zoom > 0.3f) cam.Zoom -= 0.05f; } } } } my 2d camera class using System; using System.Collections.Generic; using System.Linq; using System.Text; using Microsoft.Xna.Framework; using Microsoft.Xna.Framework.Graphics; namespace GamesCoursework_1 { public class Camera2d { protected float _zoom; // Camera Zoom public Matrix _transform; // Matrix Transform public Vector2 _pos; // Camera Position protected float _rotation; // Camera Rotation public int _viewportWidth, _viewportHeight; // viewport size public Camera2d(int ViewportWidth, int ViewportHeight) { _zoom = 1.0f; _rotation = 0.0f; _pos = Vector2.Zero; _viewportWidth = ViewportWidth; _viewportHeight = ViewportHeight; } // Sets and gets zoom public float Zoom { get { return _zoom; } set { _zoom = value; if (_zoom < 0.1f) _zoom = 0.1f; } // Negative zoom will flip image } public float Rotation { get { return _rotation; } set { _rotation = value; } } // Auxiliary function to move the camera public void Move(Vector2 amount) { _pos += amount; } // Get set position public Vector2 Pos { get { return _pos; } set { _pos = value; } } public Matrix get_transformation(GraphicsDevice graphicsDevice) { _transform = // Thanks to o KB o for this solution Matrix.CreateTranslation(new Vector3(-_pos.X, -_pos.Y, 0)) * Matrix.CreateRotationZ(Rotation) * Matrix.CreateScale(new Vector3(Zoom, Zoom, 1)) * Matrix.CreateTranslation(new Vector3(_viewportWidth * 0.5f, _viewportHeight * 0.5f, 0)); return _transform; } } }

Read the article

Show certain InfoWindow in Google Map API V3

- by pash

Hello. I wrote the following code to display markers. There are 2 buttons which show Next or Previous Infowindow for markers. But problem is that InfoWindows are not shown using google.maps.event.trigger Can someone help me with this problem. Thank you. Here is code: <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> <title>Google Maps JavaScript API v3 Example: Common Loader</title> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> <script type="text/javascript"> var infowindow; var map; var bounds; var markers = []; var markerIndex=0; function initialize() { var myLatlng = new google.maps.LatLng(41.051407, 28.991134); var myOptions = { zoom: 5, center: myLatlng, mapTypeId: google.maps.MapTypeId.ROADMAP } map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); markers = document.getElementsByTagName("marker"); for (var i = 0; i < markers.length; i++) { var latlng = new google.maps.LatLng(parseFloat(markers[i].getAttribute("lat")), parseFloat(markers[i].getAttribute("lng"))); var marker = createMarker(markers[i].getAttribute("name"), latlng, markers[i].getAttribute("phone"), markers[i].getAttribute("distance")); } rebound(map); } function createMarker(name, latlng, phone, distance) { var marker = new google.maps.Marker({position: latlng, map: map}); var myHtml = "<table style='width:100%;'><tr><td><b>" + name + "</b></td></tr><tr><td>" + phone + "</td></tr><tr><td align='right'>" + distance + "</td></tr></table>"; google.maps.event.addListener(marker, "click", function() { if (infowindow) infowindow.close(); infowindow = new google.maps.InfoWindow({content: myHtml}); infowindow.open(map, marker); }); return marker; } function rebound(mymap){ bounds = new google.maps.LatLngBounds(); for (var i = 0; i < markers.length; i++) { bounds.extend(new google.maps.LatLng(parseFloat(markers[i].getAttribute("lat")),parseFloat(markers[i].getAttribute("lng")))); } mymap.fitBounds(bounds); } function showNextInfo() { if(markerIndex<markers.length-1) markerIndex++; else markerIndex = 0 ; alert(markers[markerIndex].getAttribute('name')); google.maps.event.trigger(markers[markerIndex],"click"); } function showPrevInfo() { if(markerIndex>0) markerIndex--; else markerIndex = markers.length-1 ; google.maps.event.trigger(markers[markerIndex],'click'); } </script> </head> <body onload="initialize()"> <div id="map_canvas" style="width:400px; height:300px"></div> <markers> <marker name='Name1' lat='41.051407' lng='28.991134' phone='+902121234561' distance=''/> <marker name='Name2' lat='40.858746' lng='29.121666' phone='+902121234562' distance=''/> <marker name='Name3' lat='41.014604' lng='28.972256' phone='+902121234562' distance=''/> <marker name='Name4' lat='41.012386' lng='26.978350' phone='+902121234562' distance=''/> </markers> <input type="button" onclick="showPrevInfo()" value="prev"> <input type="button" onclick="showNextInfo()" value="next"> </body> </html>

Read the article

touchend event doesn't work on Android

- by Protos

Hi, I've just started looking at doing some basic mobile web development on the android and an writing a test script to investigate the touch events. I've run the following code in the android emulator, and the touchend event never gets fired. Can anyone tell me why ? I've tried in three versions of the emulator (1.6, 2.1 and 2.2) and all three behave in the same way. Thanks in advance for any help you can give me. Cheers, Colm EDIT - I've also tried this using the XUI framework and have the same problem so I'm guessing I have a fundamental misunderstanding of how this stuff works ...... Map Test <meta name="description" content="" /> <meta name="keywords" content="" /> <meta name="language" content="english" /> <meta name="viewport" content="minimum-scale=1.0, width=device-width, height=device-height, user-scalable=no"> <script type="text/javascript"> window.onload = function(){ document.body.appendChild( document.createTextNode("w: " + screen.width + " x " + "h : " +screen.height) ); attachTouchEvents(); } function attachTouchEvents() { console = document.getElementById("console"); var map = document.getElementById("map"); map.addEventListener ('touchstart', function (event) { event.preventDefault(); var touch = event.touches[0]; document.getElementById("touchCoord").innerHTML = "S : " + touch.pageX + " " + touch.pageY; document.getElementById("touchEvent").innerHTML = "Touch Start"; }, false); map.addEventListener ('touchmove', function (event) { event.preventDefault(); var touch = event.touches[0]; document.getElementById("touchCoord").innerHTML = "M : " + touch.pageX + " " + touch.pageY; document.getElementById("touchEvent").innerHTML = "Touch Move"; }, false); map.addEventListener ('touchend', function (event) { var touch = event.touches[0]; document.getElementById("touchCoord").innerHTML = "E : " + touch.pageX + " " + touch.pageY; document.getElementById("touchEvent").innerHTML = "Touch End"; event.preventDefault(); }, false); console.innerHTML = "event attached"; } </script> <style type="text/css"> html, body { height:100%; width:100%; margin: 0; background-color:red; } #map { height: 300px; width: 300px; background-color:yellow; } </style> </head> <body> <div id="map"></div> <div id="touchCoord">Touch Coords</div> <div id="touchEvent">Touch Evnt</div> <div id="console">Console</div> </body>

Read the article

iPhone UIWebView local resources using Javascript and handling onorientationChange

- by Dougnukem

I'm trying to server HTML Javascript and CSS content from an iPhone application's local resources, and I'm having trouble handling onOrientationChange events and including external Javascript. I seem to be able to link in CSS properly but not javascript. I'm trying to use the following example of handling onOrientationChange (How to build an iPhone website) but I'm serving the webpage from my app's NSBundle mainBundle. I tried attaching a javascript function to body.onorientationchange and to window.onorientationchange but neither work when served from UIWebView locally (or remotely), but it works if I'm using the iPhone Safari. <!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>How to build an iPhone website</title> <meta name="author" content="will" /> <meta name="copyright" content="copyright 2008 www.engageinteractive.co.uk" /> <meta name="description" content="Welcome to engege interactive on the iPhone!" /> <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;"> <link rel="apple-touch-icon" href="images/template/engage.png"/> <style type="text/css"> @import url("iphone.css"); </style>  <script type="text/javascript"> function updateOrientation(){ try { var contentType = "show_normal"; switch(window.orientation){ case 0: contentType = "show_normal"; break; case -90: contentType = "show_right"; break; case 90: contentType = "show_left"; break; case 180: contentType = "show_flipped"; break; } document.getElementById("page_wrapper").setAttribute("class", contentType); //alert('ORIENTATION: ' + contentType); } catch(e) { alert('ERROR:' + e.message); } } window.onload = function initialLoad(){ try { loaded(); updateOrientation(); } catch(e) { alert('ERROR:' + e.message); } } function loaded() { document.getElementById("page_wrapper").style.visibility = "visible"; } </script> </head> <body onorientationchange="updateOrientation();"> <div id="page_wrapper"> <h1>Engage Interactive</h1> <div id="content_left"> <p>You are now holding your phone to the left</p> </div> <div id="content_right"> <p>You are now holding your phone to the right</p> </div> <div id="content_normal"> <p>You are now holding your phone upright</p> </div> <div id="content_flipped"> <p>This doesn't work yet, but there is a chance apple will enable it at some point, so I've put it in anyway. You would be holding your phone upside down if it did work.</p> </div> </div> </body> </html>

Read the article

Dynamic Scoped Resources in WPF/XAML?

- by firoso

I have 2 Xaml files, one containing a DataTemplate which has a resource definition for an Image brush, and the other containing a content control which presents this DataTemplate. The data template is bound to a view model class. Everything seems to work EXCEPT the ImageBrush resource, which just shows up white... Any ideas? File 1: DataTemplate for ViewModel <ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:vm="clr-namespace:SEL.MfgTestDev.ESS.ViewModel" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d"> <DataTemplate DataType="{x:Type vm:PresenterViewModel}"> <DataTemplate.Resources> <ImageBrush x:Key="PresenterTitleBarFillBrush" TileMode="Tile" Viewbox="{Binding Path=FillBrushDimensions, Mode=Default}" ViewboxUnits="Absolute" Viewport="{Binding Path=FillBrushPatternSize, Mode=Default}" ViewportUnits="Absolute" ImageSource="{Binding Path=FillImage, Mode=Default}"/> </DataTemplate.Resources> <Grid d:DesignWidth="1440" d:DesignHeight="900"> <Grid.ColumnDefinitions> <ColumnDefinition Width="*"/> <ColumnDefinition Width="192"/> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition Height="120"/> <RowDefinition Height="*"/> </Grid.RowDefinitions> <DockPanel HorizontalAlignment="Stretch" Width="Auto" LastChildFill="True" Background="{x:Null}" Grid.ColumnSpan="2"> <Image Source="{Binding Path=ImageSource, Mode=Default}"/> <Rectangle Fill="{DynamicResource PresenterTitleBarFillBrush}"/> </DockPanel> </Grid> </DataTemplate> </ResourceDictionary> File 2: Main Window Class which instanciates the DataTemplate Via it's view model. <Window x:Class="SEL.MfgTestDev.ESS.ESSMainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:vm="clr-namespace:SEL.MfgTestDev.ESS.ViewModel" Title="ESS Control Window" Height="900" Width="1440" WindowState="Maximized" WindowStyle="None" ResizeMode="NoResize" DataContext="{Binding}"> <Window.Resources> <ResourceDictionary Source="PresenterViewModel.xaml" /> </Window.Resources> <ContentControl> <ContentControl.Content> <vm:PresenterViewModel ImageSource="XAMLResources\SEL25YearsTitleBar.bmp" FillImage="XAMLResources\SEL25YearsFillPattern.bmp" FillBrushDimensions="0,0,5,110" FillBrushPatternSize="0,0,5,120"/> </ContentControl.Content> </ContentControl> </Window> And for the sake of completeness! The CodeBehind for the View Model using System; using System.Collections.Generic; 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.Shapes; namespace SEL.MfgTestDev.ESS.ViewModel { public class PresenterViewModel : ViewModelBase { public PresenterViewModel() { } //DataBindings private ImageSource _imageSource; public ImageSource ImageSource { get { return _imageSource; } set { if (_imageSource != value) { _imageSource = value; OnPropertyChanged("ImageSource"); } } } private Rect _fillBrushPatternSize; public Rect FillBrushPatternSize { get { return _fillBrushPatternSize; } set { if (_fillBrushPatternSize != value) { _fillBrushPatternSize = value; OnPropertyChanged("FillBrushPatternSize"); } } } private Rect _fillBrushDimensions; public Rect FillBrushDimensions { get { return _fillBrushDimensions; } set { if (_fillBrushDimensions != value) { _fillBrushDimensions = value; OnPropertyChanged("FillBrushDimensions"); } } } private ImageSource _fillImage; public ImageSource FillImage { get { return _fillImage; } set { if (_fillImage != value) { _fillImage = value; OnPropertyChanged("FillImage"); } } } } }

Read the article

Custom ProgressBarBrushConverter Not Filling In ProgressBar

- by Wonko the Sane

Hello All, I am attempting to create a custom ProgressBarBrushConverter, based on information from here and here. However, when it runs, the progress is not being shown. If I use the code found in the links, it appears to work correctly. Here is the converter in question: public object Convert(object[] values, Type targetType, object parameter, CultureInfo culture) { ProgressBar progressBar = null; foreach (object value in values) { if (value is ProgressBar) { progressBar = value as ProgressBar; break; } } if (progressBar == null) return DependencyProperty.UnsetValue; FrameworkElement indicator = progressBar.Template.FindName("PART_Indicator", progressBar) as FrameworkElement; DrawingBrush drawingBrush = new DrawingBrush(); drawingBrush.Viewport = drawingBrush.Viewbox = new Rect(0.0, 0.0, indicator.ActualWidth, indicator.ActualHeight); drawingBrush.ViewportUnits = BrushMappingMode.Absolute; drawingBrush.TileMode = TileMode.None; drawingBrush.Stretch = Stretch.None; DrawingGroup group = new DrawingGroup(); DrawingContext context = group.Open(); context.DrawRectangle(progressBar.Foreground, null, new Rect(0.0, 0.0, indicator.ActualWidth, indicator.ActualHeight)); context.Close(); drawingBrush.Drawing = group; return drawingBrush; } Here is the ControlTemplate (the MultiBinding is to make sure that the converter is called whenever the Value or IsIndeterminate properties are changed): <ControlTemplate x:Key="customProgressBarTemplate" TargetType="{x:Type ProgressBar}"> <Grid> <Path x:Name="PART_Track" HorizontalAlignment="Left" VerticalAlignment="Top" Stretch="Fill" StrokeLineJoin="Round" Stroke="#DDCBCBCB" StrokeThickness="4" Data="M 20,100 L 80,10 C 100,120 160,140 190,180 S 160,220 130,180 T 120,150 20,100 Z "> <Path.Fill> <MultiBinding> <MultiBinding.Converter> <local:ProgressBarBrushConverter /> </MultiBinding.Converter> <Binding RelativeSource="{RelativeSource FindAncestor, AncestorType={x:Type ProgressBar}}" /> <Binding Path="IsIndeterminate" RelativeSource="{RelativeSource TemplatedParent}"/> <Binding Path="Value" RelativeSource="{RelativeSource TemplatedParent}"/> </MultiBinding> </Path.Fill>  </Path> <Rectangle x:Name="PART_Indicator" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="1" /> </Grid> </ControlTemplate> Finally, the Window code (fairly straightforward - it just animates progress from 0 to 100 and back again): <ProgressBar x:Name="progress" Template="{StaticResource customProgressBarTemplate}" Foreground="Red"> <ProgressBar.Triggers> <EventTrigger RoutedEvent="ProgressBar.Loaded"> <BeginStoryboard x:Name="storyAnimate"> <Storyboard> <DoubleAnimationUsingKeyFrames Duration="0:0:12" AutoReverse="True" FillBehavior="Stop" RepeatBehavior="Forever" Storyboard.TargetName="progress" Storyboard.TargetProperty="(ProgressBar.Value)"> <LinearDoubleKeyFrame Value="0" KeyTime="0:0:0" /> <LinearDoubleKeyFrame Value="100" KeyTime="0:0:5" /> <LinearDoubleKeyFrame Value="100" KeyTime="0:0:6" /> <LinearDoubleKeyFrame Value="0" KeyTime="0:0:11" /> <LinearDoubleKeyFrame Value="0" KeyTime="0:0:12" /> </DoubleAnimationUsingKeyFrames> </Storyboard> </BeginStoryboard> </EventTrigger> </ProgressBar.Triggers> </ProgressBar> I am thinking that the problem is in the DrawRectangle call in the Convert method, but setting a TracePoint on it shows what appear to be valid values for the Rect. What am I missing here? Thanks, wTs

Read the article

Toggle KML Layers, Infowindow isnt working

- by user1653126

I have this code, i am trying to toggle some kml layers. The problem is that when i click the marker it isn't showing the infowindow. Maybe someone can show me my error. Thanks. Here is the CODE <!DOCTYPE html> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <style type="text/css"> html { height: 100% } body { height: 100%; margin: 0; padding: 0 } #map_canvas { height: 100% } </style> <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=IzaSyAvj6XNNPO8YPFbkVR8KcTl5LK1ByRHG1E&sensor=false"> </script> <script type="text/javascript"> var map; // lets define some vars to make things easier later var kml = { a: { name: "Productores", url: "https://maps.google.hn/maps/ms?authuser=0&vps=2&hl=es&ie=UTF8&msa=0&output=kml&msid=200984447026903306654.0004c934a224eca7c3ad4" } // keep adding more if you like }; // initialize our goo function initializeMap() { var options = { center: new google.maps.LatLng(13.324182,-87.080071), zoom: 8, mapTypeId: google.maps.MapTypeId.TERRAIN } map = new google.maps.Map(document.getElementById("map_canvas"), options); createTogglers(); }; google.maps.event.addDomListener(window, 'load', initializeMap); // the important function... kml[id].xxxxx refers back to the top function toggleKML(checked, id) { if (checked) { var layer = new google.maps.KmlLayer(kml[id].url, { preserveViewport: true, suppressInfoWindows: true }); // store kml as obj kml[id].obj = layer; kml[id].obj.setMap(map); } else { kml[id].obj.setMap(null); delete kml[id].obj; } }; // create the controls dynamically because it's easier, really function createTogglers() { var html = "<form><ul>"; for (var prop in kml) { html += "<li id=\"selector-" + prop + "\"><input type='checkbox' id='" + prop + "'" + " onclick='highlight(this,\"selector-" + prop + "\"); toggleKML(this.checked, this.id)' \/>" + kml[prop].name + "<\/li>"; } html += "<li class='control'><a href='#' onclick='removeAll();return false;'>" + "Remove all layers<\/a><\/li>" + "<\/ul><\/form>"; document.getElementById("toggle_box").innerHTML = html; }; function removeAll() { for (var prop in kml) { if (kml[prop].obj) { kml[prop].obj.setMap(null); delete kml[prop].obj; } } }; // Append Class on Select function highlight(box, listitem) { var selected = 'selected'; var normal = 'normal'; document.getElementById(listitem).className = (box.checked ? selected: normal); }; </script> <style type="text/css"> .selected { font-weight: bold; } </style> </head> <body> <div id="map_canvas" style="width: 50%; height: 200px;"></div> <div id="toggle_box" style="position: absolute; top: 200px; right: 1000px; padding: 20px; background: #fff; z-index: 5; "></div> </body> </html>

Read the article

Internet Explorer percent based layout issue

- by Tom

Heya, My goal is to make a layout that is 200% width and height, with four containers of equal height and width (100% each), using no javascript as the bear minimum (or preferably no hacks). Right now I am using HTML5, and CSS display:table. It works fine in Safari 4, Firefox 3.5, and Chrome 5. I haven't tested it yet on older versions. Nonetheless, in IE7 and IE8 this layout fails completely. (I do use the Javascript HTML5 enabling script /cc../, so it should not be the use of new HTML5 tags) Here is what I have: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta charset="UTF-8" /> <title>IE issue with layout</title> <style type="text/css" media="all"> /* styles */ @import url("reset.css"); /* Generall CSS */ .table { display:table; } .row { display:table-row; } .cell { display:table-cell; } /* Specific CSS */ html, body { //overflow:hidden; I later intend to limit the viewport } section#body { position:absolute; width:200%; height:200%; overflow:hidden; } section#body .row { width:200%; height:50%; overflow:hidden; } section#body .row .cell { width:50%; overflow:hidden; } section#body .row .cell section { display:block; width:100%; height:100%; overflow:hidden; } section#body #stage0 section header { text-align:center; height:20%; display:block; } section#body #stage0 section footer { display:block; height:80%; } </style> </head> <body> <section id="body" class="table"> <section class="row"> <section id="stage0" class="cell"> <section> <header> <form> <input type="text" name="q" /> <input type="submit" value="Search" /> </form> </header> <footer> <table id="scrollers"> </table> </footer> </section> </section> <section id="stage1" class="cell"> <section> content </section> </section> </section> <section class="row"> <section id="stage2" class="cell"> <section> content </section> </section> <section id="stage3" class="cell"> <section> content </section> </section> </section> </section> </body> </html> You can see it live here: http://www.tombarrasso.com/ie-issue/

Read the article

how to make google-maps info window editable ..

- by zjm1126

i want to do this : the info window can be editable when i click the info window. this is my code: <!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="viewport" content="width=device-width,minimum-scale=0.3,maximum-scale=5.0,user-scalable=yes"> </head> <body onload="initialize()" onunload="GUnload()"> <style type="text/css"> *{ margin:0; padding:0; } </style>  <div id="map_canvas" style="width: 500px; height: 300px;"></div> <div class=b style="width: 20px; height: 20px;background:red;position:absolute;left:700px;top:200px;"></div> <div class=b style="width: 20px; height: 20px;background:red;position:absolute;left:700px;top:200px;"></div> <script src="jquery-1.4.2.js" type="text/javascript"></script> <script src="jquery-ui-1.8rc3.custom.min.js" type="text/javascript"></script> <script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAA-7cuV3vqp7w6zUNiN_F4uBRi_j0U6kJrkFvY4-OX2XYmEAa76BSNz0ifabgugotzJgrxyodPDmheRA&sensor=false"type="text/javascript"></script> <script type="text/javascript"> var aFn; //********** function initialize() { if (GBrowserIsCompatible()) { var map = new GMap2(document.getElementById("map_canvas")); var center=new GLatLng(39.9493, 116.3975); map.setCenter(center, 13); aFn=function(x,y){ var point =new GPoint(x,y) point = map.fromContainerPixelToLatLng(point); //console.log(point.x+" "+point.y) var marker = new GMarker(point,{draggable:true}); GEvent.addListener(marker, "click", function() { marker.openInfoWindowHtml("<b>wwww</b>"); }); map.addOverlay(marker); /********** var marker = new GMarker(point, {draggable: true}); GEvent.addListener(marker, "dragstart", function() { map.closeInfoWindow(); }); GEvent.addListener(marker, "dragend", function() { marker.openInfoWindowHtml("????..."); }); map.addOverlay(marker); //*/ } $(".b").draggable({ revert: true, revertDuration: 0 }); $("#map_canvas").droppable({ drop: function(event,ui) { //console.log(ui.offset.left+' '+ui.offset.top) aFn(event.pageX-$("#map_canvas").offset().left,event.pageY-$("#map_canvas").offset().top); } }); } } </script> </body> </html>

Read the article

Scrolling a canvas as a shape you're moving approaches its edges

- by Steven Sproat

Hi, I develop a Python-based drawing program, Whyteboard. I have tools that the user can create new shapes on the canvas, such as text/images/rectangles/circles/polygons. I also have a Select tool that allows the users to modify these shapes - for example, moving a shape's position, resizing, or editing polygon's points' positions. I'm adding in a new feature where moving or resizing a point near the canvas edge will automatically scroll the canvas. I think it's a good idea in terms of program usability, and annoys me when other program's don't have this feature. I've made some good progress on coding this; below is some Python code to demonstrate what I'm doing. These functions demonstrate how some shapes calculate their "edges": def find_edges(self): """A line.""" self.edges = {EDGE_TOP: min(self.y, self.y2), EDGE_RIGHT: max(self.x, self.x2), EDGE_BOTTOM: max(self.y, self.y2), EDGE_LEFT: min(self. x, self.x2)} def find_edges(self): """An image""" self.edges = {EDGE_TOP: self.y, EDGE_RIGHT: self.x + self.image.GetWidth(), EDGE_BOTTOM: self.y + self.image.GetWidth(), EDGE_LEFT: self.x} def find_edges(self): """Get the bounding rectangle for the polygon""" xmin = min(x for x, y in self.points) ymin = min(y for x, y in self.points) xmax = max(x for x, y in self.points) ymax = max(y for x, y in self.points) self.edges = {EDGE_TOP: ymin, EDGE_RIGHT: xmax, EDGE_BOTTOM: ymax, EDGE_LEFT: xmin} And here's the code I have so far to implement the scrolling when a shape nears the edge: def check_canvas_scroll(self, x, y, moving=False): """ We check that the x/y coords are within 50px from the edge of the canvas and scroll the canvas accordingly. If the shape is being moved, we need to check specific edges of the shape (e.g. left/right side of rectangle) """ size = self.board.GetClientSizeTuple() # visible area of the canvas if not self.board.area > size: # canvas is too small to need to scroll return start = self.board.GetViewStart() # user's starting "viewport" scroll = (-1, -1) # -1 means no change if moving: if self.shape.edges[EDGE_RIGHT] > start[0] + size[0] - 50: scroll = (start[0] + 5, -1) if self.shape.edges[EDGE_BOTTOM] > start[1] + size[1] - 50: scroll = (-1, start[1] + 5) # snip others else: if x > start[0] + size[0] - 50: scroll = (start[0] + 5, -1) if y > start[1] + size[1] - 50: scroll = (-1, start[1] + 5) # snip others self.board.Scroll(*scroll) This code actually works pretty well. If we're moving a shape, then we need to know its edges to calculate when they're coming close to the canvas edge. If we're resizing just a single point, then we just use the x/y coords of that point to see if it's close to the edge. The problem I'm having is a little tricky to describe - basically, if you move a shape to the left, and stop moving it, if you positioned the shape within the 50px from the canvas, then the next time you go to move the shape, the code that says "ok, is this shape close to the end?" gets triggered, and the canvas scrolls to the left, even if you're moving the shape to the right. Can anyone think on how to stop this? I created a youtube video to demonstrate the issue. At about 0:54, I move a polygon to the left of the canvas and position it there. The next time I move it, the canvas scrolls to the left even though I'm moving it right Another thing I'd like to add, but I'm stuck on is the scroll gaining momentum the longer a shape is scrolling? So, with a large canvas, you're not moving a shape for ages, moving 5px at a time, when you need to cover a 2000px distance. Any suggestions there? Thanks all - sorry for the super long question!

Read the article

How do I search using the Google Maps API?

- by Thomas

Hello all, I'm trying to figure out how to search for nearby businesses in an iPhone app using the Google Maps API. I'm completely new to Javascript, and have waded through some of Google's sample code easily enough. I found how to grab the user's current location. Now I want to search for "restaurants" near that location. I'm just building on the sample code from here. I'll post it below with my changes anyway, just in case. <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> <title>Google Maps JavaScript API v3 Example: Map Geolocation</title> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script> <script type="text/javascript" src="http://code.google.com/apis/gears/gears_init.js"></script> <script type="text/javascript"> var currentLocation; var detroit = new google.maps.LatLng(42.328784, -83.040877); var browserSupportFlag = new Boolean(); var map; var infowindow = new google.maps.InfoWindow(); function initialize() { var myOptions = { zoom: 6, mapTypeId: google.maps.MapTypeId.ROADMAP }; map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); map.enableGoogleBar(); // Try W3C Geolocation method (Preferred) if(navigator.geolocation) { browserSupportFlag = true; navigator.geolocation.getCurrentPosition(function(position) { // TRP - Save current location in a variable (currentLocation) currentLocation = new google.maps.LatLng(position.coords.latitude,position.coords.longitude); // TRP - Center the map around current location map.setCenter(currentLocation); }, function() { handleNoGeolocation(browserSupportFlag); }); } else { // Browser doesn't support Geolocation browserSupportFlag = false; handleNoGeolocation(browserSupportFlag); } } function handleNoGeolocation(errorFlag) { if (errorFlag == true) { // TRP - Default location is Detroit, MI currentLocation = detroit; contentString = "Error: The Geolocation service failed."; } else { // TRP - This should never run. It's embedded in a UIWebView, running on iPhone contentString = "Error: Your browser doesn't support geolocation."; } // TRP - Set the map to the default location and display the error message map.setCenter(currentLocation); infowindow.setContent(contentString); infowindow.setPosition(currentLocation); infowindow.open(map); } </script> </head> <body style="margin:0px; padding:0px;" onload="initialize()"> <div id="map_canvas" style="width:100%; height:100%"></div> </body> </html>

Read the article

Craziest JavaScript behavior I've ever seen

- by Dan Ray

And that's saying something. This is based on the Google Maps sample for Directions in the Maps API v3. <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/> <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> <title>Google Directions</title> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> <script type="text/javascript"> var directionDisplay; var directionsService = new google.maps.DirectionsService(); var map; function initialize() { directionsDisplay = new google.maps.DirectionsRenderer(); var myOptions = { zoom:7, mapTypeId: google.maps.MapTypeId.ROADMAP } map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); directionsDisplay.setMap(map); directionsDisplay.setPanel(document.getElementById("directionsPanel")); } function render() { var start; if(navigator.geolocation) { navigator.geolocation.getCurrentPosition(function(position) { start = new google.maps.LatLng(position.coords.latitude,position.coords.longitude); }, function() { handleNoGeolocation(browserSupportFlag); }); } else { // Browser doesn't support Geolocation handleNoGeolocation(); } alert("booga booga"); var end = '<?= $_REQUEST['destination'] ?>'; var request = { origin:start, destination:end, travelMode: google.maps.DirectionsTravelMode.DRIVING }; directionsService.route(request, function(response, status) { if (status == google.maps.DirectionsStatus.OK) { directionsDisplay.setDirections(response); } }); } </script> </head> <body style="margin:0px; padding:0px;" onload="initialize()"> <div><div id="map_canvas" style="float:left;width:70%; height:100%"></div> <div id="directionsPanel" style="float:right;width:30%;height 100%"></div> <script type="text/javascript">render();</script> </body> </html> See that "alert('booga booga')" in there? With that in place, this all works fantastic. Comment that out, and var start is undefined when we hit the line to define var request. I discovered this when I removed the alert I put in there to show me the value of var start, and it quit working. If I DO ask it to alert me the value of var start, it tells me it's undefined, BUT it has a valid (and accurate!) value when we define var request a few lines later. I'm suspecting it's a timing issue--like an asynchronous something is having time to complete in the background in the moment it takes me to dismiss the alert. Any thoughts on work-arounds?

Read the article

background image disappears when position relative used in firefox

- by toomanyairmiles

So I'm trying to add a badge to the top right corner of a site I'm doing some work on. z-index works to float the object above the page content but each time i try to use position relative the background image disappears only position absolute shows the image. I don't really want to use absolute as the image needs to be positioned on the right hand side of the sites menu bar not the right hand side of the viewport. Any thoughts or advice appreciated <div class="badge-box"> <a href="http://www.google.com" class="badge">Book Now!</a> </div> <div id="header"> <a href="index.php"><img src="images/pixel.gif" width="378" height="31" alt="Welcome to Gwynfryn Farm Cottages" /></a> </div> <div id="main-menu"> <div> <a href="/">Home</a> <a href="/cottages.php">Our Cottages</a> <a href="/gwynfryn.php">Bed & Breakfast</a> <a href="/rates.php">Price Guide</a> <a href="/llanbedr.php">Location & Local Attractions</a> <a href="/news.php">News & Special Offers</a> <a href="/contact.php">Contact Us</a> </div> </div> .badge-box { width: 1030px; margin-left: auto; margin-right: auto; border: 0px solid red; } .badge { background: url(../images/badge.png) 0px 0px no-repeat; width: 148px; height: 148px; text-indent: -10000px; position: relative; z-index: 999; } #header { width: 960px; height: 40px; margin-left:auto; margin-right:auto; margin-top:20px; padding: 20px 0px 0px 20px; background: #58564f url(../images/header-top-background.png); } #main-menu { width: 980px; margin-left: auto; margin-right: auto; height: 35px; /*background: red;*/ background: #58564f url(../images/header-bottom-background.png); font-family: Georgia, "Times New Roman", Times, serif; } #main-menu div { width: 776px; height: 35px; margin-left: auto; margin-right: auto; background: blue; } #main-menu div a { display: block; float: left; padding: 5px 10px 0px 10px; height: 30px; color: #FFFFFF; font-size: 1.2em; text-align: center; background: green; } #main-menu div a:hover { background-color: #333333; }

Search Results

Search found 555 results on 23 pages for 'viewport'.

Page 21/23 | < Previous Page | 17 18 19 20 21 22 23 | Next Page >

- by JNM

- by tuff

- by 666craig

- by Sean O.

- by Maiko Rocha

- by user1423893

- by MightyZot

- by Ken Le

- by Humprey Cogay, C|EH, E|CSA

- by Stephen.Walther

- by Steve

- by TRiG

- by Craig

- by pash

- by Protos

- by Dougnukem

- by firoso

- by Wonko the Sane

- by user1653126

- by Tom

- by zjm1126

- by Steven Sproat

- by Thomas

- by Dan Ray

- by toomanyairmiles

< Previous Page | 17 18 19 20 21 22 23 | Next Page >