JavaScript replace all css background images with retinal images

If you are faced with the problem, that dynamically generated CSS background images used, to images on a Web page to represent and this then also for retina display you want to look good, can I use the following script. It additionally checked via an AJAX request, If the images exist / exist.

A prerequisite is, that a naming convention for non-retina used images and retina is such as:

for non-retinal images

and

for retinal images

<!--Retina Fix for dynamic background images-->
        <script type="text/javascript">
            function isRetinaDisplay()
            {
                var dpr = 1;
                if(window.devicePixelRatio !== undefined) dpr = window.devicePixelRatio;
                return dpr >= 2;
            }

            var notRetinaString = "@1x";
            var retinaString = "@2x";

            $(document).ready(function() {
                //if we have a retina display
                if(isRetinaDisplay())
                {
                    //select all elements having background images
                    var $elementsWithBackground = $('*').filter(function() {
                        if (this.currentStyle)
                            return this.currentStyle['backgroundImage'] !== 'none';
                        else if (window.getComputedStyle)
                            return document.defaultView.getComputedStyle(this,null)
                                .getPropertyValue('background-image') !== 'none';
                    });
                    //replace their background-image with retina images
                    $elementsWithBackground.each(function( index ) {
                        $backGroundImage = $(this).css('backgroundImage');
                        /*console.log($backGroundImage);*/
                        //when it is no retina image
                        if($backGroundImage.indexOf(notRetinaString) !== -1)
                        {
                            //replace with retina image
                            $newBackgroundRetinaImage = $backGroundImage.replace(notRetinaString,retinaString);
                            $newBackgroundRetinaImageUrl = $newBackgroundRetinaImage.replace('url("','').replace('")','');
                            //check if retina file exists
                            var $myThis = this;
                            $.ajax({
                                url:$newBackgroundRetinaImageUrl,
                                type:'HEAD',
                                cache: true,
                                success:function() {
                                    console.log($newBackgroundRetinaImage);
                                    $($myThis).css('backgroundImage', $newBackgroundRetinaImage);
                                },
                                error:function() {
                                    console.log("no retina image found for: " + $backGroundImage);
                                }
                            });

                        }
                    });
                }
            });
        </script>

Comparison of Augmented Reality Framework for Android

project nameMixingDroidARAndARvuforiawiktitudeandroid-augment-reality-framework
total ratingBCDA-BF
project urlMixingDroidARAndARvuforiawiktitudeandroid-augment-reality-framework
licenceGNU GPL v3GNU GPL v3GNU GPL v3Anonymous Data collection by Qualcomm,
Attribution License, the logo must be shown ether in loading, splash or credit screen license
not free, 599€ per App PricingApache License 2.0
version0.9.2??1.5.9.?initial version
latest build22.08.2012??22.02.2012?01.12.2011
documentationLinkBlog?Link?Link
tested Devices/Android Versionokno informationgoodvery good?
tested Devices URLLinkLinkAndroid 2.2 and newer, iOS 4 & 5.?
getting startedLinkLinkLinkLink?
Sample VideoLinkhttp://youtu.be/MHkobjWqLA8Link
sample appLinkLinkLinkLink and Link
special featuresespecially for 3D Objects (with commercial licence)for ios and androidruns in webview (like phonegap), easy implementation for android, ios etc but performance issues may occur, very good customizable
conclusionactive community and steady buildsfew documentation and no information about tested devicesprojects is not maintained any morevery good documentation and device support, critical licence and complex intital setupnot free and few informations on the website, might have performance issues but easy to implement with HTML5project is not maintained any more

Conclusion:

I chose Mixing decided, which gecodet well, but less well documented is. Is it very easy to own data or Wikipedia to put data on the camera and simultaneously view the same data as on Google Maps markers.

Vuforia to appear for the development of Android / iPhone solutions of suitable Kanditat be, However, when required under the license, that user data to the Qualcomm server are sent and the user must be informed:

Excerpt from the license of Vuforia

“You must inform end-users of your application that certain types of anonymous usage data is collected by the Vuforia SDK and sent back to Qualcomm servers.”

“(i) the collection by QUALCOMM and/or its affiliates of Statistics from the Software (including but not limited to: (a) information about the end users’ Such devices have device unique identifier, make, model, operating system name and version and kernel version, (b) information about our Software used to create your software or augmented reality end user application such as the SDK version and device profile, and (c) information about your software or augmented reality application and its use such as settings (e.g., camera resolution settings, configuration settings), start and stop dates and times, camera on/off events, target image obtained/lost events, and other general usage information (collectively “Statistics”)).”

Phonegap natives Android Plugin erstellen Tutorial

With PhoneGap native code can trigger out of Javascript with the following code:

//onDeviceReady          

cordova.exec( success, fail, "UploadImage", "nativeAction", ["success"]);    

            function success (result) {    
                alert("SUCCESS: \r\n"+result );
                }
            function fail (error) {    
                alert("ERROR: \r\n"+error );
                }

This code calls the class Upload Image execute the function with parameter action = 'native action’ and one JsonString(!) data = “['success']” on. Data can be used for this data to be passed to Java:

import org.apache.cordova.api.Plugin;
import org.apache.cordova.api.PluginResult;

public class UploadImage extends Plugin {
    public static final String NATIVE_ACTION_STRING="nativeAction";       
    public static final String SUCCESS_PARAMETER="success";
    @Override
    public PluginResult execute(String action, JSONArray data, String callbackId) {
        Log.d("HelloPlugin", "Hello, this is a native function called from PhoneGap/Cordova!");             
        //only perform the action if it is the one that should be invoked              
        if (NATIVE_ACTION_STRING.equals(action)) {                    
            String resultType = null;                    
        try {                          
            resultType = data.getString(0);                    }                    
        catch (Exception ex) {                          
            Log.d("HelloPlugin", ex.toString());                    }                    
        if (resultType.equals(SUCCESS_PARAMETER)) {                          
            return new PluginResult(PluginResult.Status.OK, "Yay, Success!!!");                    
            }                    
        else {                          
            return new PluginResult(PluginResult.Status.ERROR, "Oops, Error :( ");                    
            }              
        }                
        return null;
    }
}

In addition, the plug-in must res/xml/config.xml be entered:

<plugin name="UploadImage" value="de.sv.foo.plugin.UploadImage"/>

 

The output should be:

"SUCCESS: Yay, Success!!!"

 

Huawei Ideos X3 USB Debugging Tutorial


The Huawei Ideos X3 (U8510 Blaze) is the very affordable entry level Android phone for programmers and students (< 100€).

Always begin with the USB driver will be installed. These are stored on the phone. A very good guide can be found here. Alternatively, you can also easily download the driver and install: Download.

To activate the USB debugging when Huwaei Ideos X3, must be chosen following number to get into the hidden menu:

*#*#2846579#*#*

20120430-220205.jpgThen the Project Menu>3. Background setting->2. Log setting

->Log level setting, verbose select.

->Log switch, Log on select

Then the Project Menu>3. Background setting->6. Dump & Log Select

  • Open Dump & Log
  • Changing log switch
  • Open Sleep Log

Your Huawei Ideos X3 is ready debugging information and detailed error messages to their IDE (Eclipse) to send.

To Testing for high-end Android devices: Read: Samsung S2 Galayx Debugging.

Mobile developers Recommendation: Samsung Galaxy Nexus mit Android 4.0

Developers Tablet Recommendation:&nbsp;Samsung Galaxy tab 2 mit Android 4.0

Phonegap Teil3: Basics and the first program

Programming with PhoneGap is the largest Teilin HTML(5) Javascript und CSS(3). There is no native code required wrd, but it can be used by plugin native code.

Testing of mobile applications

iOS: Safari, Develop->User Agent->Mobile Safari (iPhone, iPad)

Android: Firefox Addon: User Agent Switcher and final lists of user agents.

It is recommended that a Webkit browser (Safari or Chrome) to use the normal development, due to the frequent use on the target system.

more…

Phonegap Teil2: Installation for Android in Eclipse Windows 7

The installation for Eclipse for Android is very simple, it can be used, the test project from the Phonegap-Package himself or a project to be created.

It is important, that the tutorial was to jetztigen date are not yet supported on the new name of PhoneGap – Cordova – For example, as the files of. PhoneGap-1.50.js in cordova-1.50.js umbenannt be sind. I recommend to take the test project.

The test project for Android is under lib android and can eclipse: new Project, with existing sources importiert werden. The cordova-1.50.jar needs to be added to the build path (Project Properties/Java Build Path/Libraries/Add JARs) and the test project can be started.

In the demo you can all PhoneGap features like GPS, Accelerometer, Dial numbers, vibrate, Gallery, Contacts, Network status and compass try on the test phone / simulator.

20120322-113921.jpg

back to Phonegap Teil1: Features and possibilities

According to the book:

Phonegap Teil1: Features and possibilities

With PhoneGap, you can Web applications with HTML5, CSS and JavaScript to build a mobile web application, while a native app for the App Store and the Android Market. Phonegap is open source and is supported by the Apache Cooperation and Adobe support. A mixture of native and mobile application as a Web app in the store is possible. The big question is, where the limits of PhoneGap, which is not possible? What features and options PhoneGap provides compared to a native app.

System requirements for the target platform

iOS: MAC OS X ab 10.6

Android and HP WebOS: all 3 (=Windows, Mac, Linux)

Symbian: all 3, But the simulator runs only on Windows

Blackberry: Windows, Mac, But the simulator runs only on Windows

Windows 7 Phone: Mac OS X ab 10.5 :)

more…