Alexander Sergeev's blog

Dec 28, 2011 0

Small investigation

I made a small investigation of iOS device and version usage.

I did not count devices older than iPhone 3G and iOS older than 3.2, but according to http://www.marco.org/2011/08/13/instapaper-ios-device-and-version-stats-update their part is lesser than 2%.

Here are the results:

iPhone devices statistic:
iPhone devices statistic

Only 6% users use iPhone 3G and 2-th generation iPod and the major part (3/4) maiden up by iPhone 4/iPhone 4S.

iOS version statistic:
iOS versions statistic

Almost 3/4 of users switched to iOS 5 as well.

So I think that the conclusion is simple: if you are not Facebook or Google and if you have no enough resources to support older iOS version, drop of the support of old devices and iOS version. Do not waste your time and efforts to support iOS older then 4.0 and to optimize your code to run smoothly on device older than iPhone 3GS. Or read this perfect article by Joel about drums and software optimization.

I picked up and accordion and do not regret.

Share

Dec 5, 2011 0

SVG on iOS

I could not find a good library for SVG for iOS:

  • SVGQuartzRenderer doesn’t compile.
  • SVGKit works good only with shipped samples and crahes on “real world” SVGs.
  • CKSVG looks good, but it doesn’t support iOS out from box as soon as it’s designed for Mac, and opens my files with some errors (anyway better than SVGKit)

The main problem is a lack of free time. I had no time to fix compilers’ error, crashes and port code for Mac to iOS. I needed a ready solution and I need it quick.

I was not alone in my research. Another guy had a same problem (and I made the same reserch as me). But I could not use unstable solution in hope that it will work in my case, so I started a little investigation and I found out, that SVG can handle touches and executes javascript. OMG it can be even animated! So I tried to put it into UIWebView and now, at 1:47 am looks like I succeed.

First, SVG can be loaded with a loadHTMLString: method; I had to use this code instead:

NSData * svg = [NSData dataWithContentsOfFile:[[NSBundle mainBundle] pathForResource:@"africa" ofType:@"svg"]];

[webview loadData:svg MIMEType:@”image/svg+xml” textEncodingName:0 baseURL:[[NSBundle mainBundle] bundleURL]];

And SVG should looks something like that:

...
// var svgDocument; var svgDocument; var xmlns="http://www.w3.org/2000/svg" function startup(evt) { O=evt.target svgDocument=O.ownerDocument } function onclick(evt) { var t = evt.target; t.setAttribute("visibility","hidden"); i=t.getAttribute("id"); var url="map://id"; window.location = url.concat(i); } // ]]&gt;</script></p> <polygon fill-rule="evenodd" clip-rule="evenodd" points=" ... " id="egypt" onclick="onclick(evt)" /><br /> </code></p> <p>Now I can load this SVG into web view and handle an URL map://egypt in my</p> <p><code><br /> -(BOOL) webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType<br /> </code></p> <p>delegate&#8217;s method!<br /> I still had to get rid of nasty black rectangle (link highlighting) when I tapping on map, but anyway, this approach is much better than rasterization my SVG images or dealing with buggy third party code&#8230;</p> <div class="addtoany_share_save_container addtoany_content addtoany_content_bottom"><div class="a2a_kit a2a_kit_size_16 addtoany_list" data-a2a-url="https://alxsrg.com/?p=30" data-a2a-title="SVG on iOS"><a class="a2a_button_facebook_like addtoany_special_service" data-layout="button" data-href="https://alxsrg.com/?p=30"></a><a class="a2a_button_twitter_tweet addtoany_special_service" data-url="https://alxsrg.com/?p=30" data-text="SVG on iOS"></a><a class="a2a_dd addtoany_share_save addtoany_share" href="https://www.addtoany.com/share"><img src="https://static.addtoany.com/buttons/share_save_171_16.png" alt="Share"></a></div></div> </div> </div> <div id="paginateIndex" class="fix"> <p><span class="left"></span> <span class="right"></span></p> </div> </div> <div class="secondaryColumn"> <div id="loginlogout-4" class="widgetContainer widget_loginlogout"> <form name='loginform' id='loginform' action='https://alxsrg.com/wp-login.php' method='post'> <label>User:</label><br /> <input type='text' name='log' id='user_login' class='input' tabindex='20' /><input type='submit' name='wp-submit' id='wp-submit' value='Login' tabindex='23' /><br /> <label>Pass:</label><br /> <input type='password' name='pwd' id='user_pass' class='input' tabindex='21' /> <span id="forgotText"><a href="https://alxsrg.com/wp-login.php?action=lostpassword" rel="nofollow" >Forgot?</a></span><br /> <a href="https://alxsrg.com/wp-login.php?action=register">Register</a> <input type='hidden' name='redirect_to' value='/?tag=iphone' /> </form> <!-- WP-FB AutoConnect Button v4.6.4 --> <span class="fbLoginButton"> <script type="text/javascript"> //<!-- document.write('<fb:login-button scope="" v="2" size="small" onlogin="jfb_js_login_callback();">Login with Facebook</fb:login-button>'); //--> </script> </span></div><div id="pages-3" class="widgetContainer widget_pages"><h3 class="widgetTitle">Pages</h3> <ul> <li class="page_item page-item-2"><a href="https://alxsrg.com/?page_id=2">About me</a></li> <li class="page_item page-item-144"><a href="https://alxsrg.com/?page_id=144">Contacts</a></li> <li class="page_item page-item-187"><a href="https://alxsrg.com/?page_id=187">PGP keys</a></li> </ul> </div><div id="linkcat-29" class="widgetContainer widget_links"><h3 class="widgetTitle">Resumé</h3> <ul class='xoxo blogroll'> <li><a href="http://alxsrg.com/alexander_sergeev_resume.pdf">My resumé in PDF</a></li> </ul> </div> </div> <div class="secondaryColumn"> <div id="text-3" class="widgetContainer widget_text"> <div class="textwidget"><a href="http://www.adfreeblog.org/" target="_blank"> <img src="http://www.adfreeblog.org/adfreebutton.jpg"></a></div> </div></div></div> <div class="navStripWrapper"> <ul class="nav fix"> <li><a href="http://alxsrg.com/" title="Return to the the frontpage">Frontpage<br /><span>Return home</span></a></li> <li><a id="triggerCatID2" href="#" title="Show categories">Browse<br /><span>By topic</span></a></li> <li class="last"><a href="https://alxsrg.com/?feed=rss2" title="Subscribe to the main feed via RSS">Subscribe<br /><span>RSS feed</span></a></li> <li id="searchBar2" class="searchField"> <div> <form method="get" id="searchForm2" action="https://alxsrg.com/"> <span><input type="text" value="Search the archives..." onfocus="if (this.value == 'Search the archives...') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Search the archives...';}" name="s" id="s2" /></span> </form> </div> </li> </ul> <div id="footerStrip" class="toggleCategories fix" style="display: none;"> <ul class="fix"> <li class="cat-item cat-item-1"><a href="https://alxsrg.com/?cat=1">IT</a> </li> </ul> </div> </div> <div id="footer" class="fix"> <p class="left"><a href="http://5thirtyone.com/grid-focus" title="Grid Focus by: Derek Punsalan">Grid Focus</a> by Derek Punsalan <a href="http://5thirtyone.com">5thirtyone.com</a>.</p> <p class="right">Whitespace</p> </div> </div> <!-- WP-FB AutoConnect Init v4.6.4 (NEW API) --> <div id="fb-root"></div> <script type="text/javascript"> //<!-- window.fbAsyncInit = function() { FB.init({ appId: '121357734644477', status: true, cookie: true, xfbml: true, version: 'v3.0' }); }; (function() { var e = document.createElement('script'); e.src = document.location.protocol + '//connect.facebook.net/en_US/sdk.js'; e.async = true; document.getElementById('fb-root').appendChild(e); }()); //--> </script> <!-- WP-FB AutoConnect Callback v4.6.4 --> <form id="wp-fb-ac-fm" name="jfb_js_login_callback_form" method="post" action="https://alxsrg.com/wp-login.php"> <input type="hidden" name="redirectTo" value="/?tag=iphone" /> <input type="hidden" name="access_token" id="jfb_access_token" value="0" /> <input type="hidden" name="fbuid" id="jfb_fbuid" value="0" /> <input type="hidden" id="autoconnect_nonce" name="autoconnect_nonce" value="551b20037f" /><input type="hidden" name="_wp_http_referer" value="/?tag=iphone" /> </form> <script type="text/javascript"> //<!-- function jfb_js_login_callback() { //wpfb_add_to_js: An action to allow the user to inject additional JS to be executed before the login takes place //wpfb_add_to_js: Finished //Make sure the user logged into Facebook (didn't click "cancel" in the login prompt) FB.getLoginStatus(function(response) { if (!response.authResponse) { //Note to self: if this is happening unexpectedly, it could be because third-party browser cookies are disabled. return; } //Set the uid & access token to be sent in to our login script jQuery('#jfb_access_token').val(response.authResponse.accessToken); jQuery("#jfb_fbuid").val(response.authResponse.userID); //Submit the login and close the FB.getLoginStatus call document.jfb_js_login_callback_form.submit(); }) } //--> </script> Facebook login by <a href="https://www.justin-klein.com/projects/wp-fb-autoconnect">WP-FB-AutoConnect</a><script type="text/javascript" src="https://alxsrg.com/wp-content/plugins/social-sharing-toolkit/script_2.1.2.js?ver=6.9.1" id="mr_social_sharing-js"></script> <script id="wp-emoji-settings" type="application/json"> {"baseUrl":"https://s.w.org/images/core/emoji/17.0.2/72x72/","ext":".png","svgUrl":"https://s.w.org/images/core/emoji/17.0.2/svg/","svgExt":".svg","source":{"concatemoji":"https://alxsrg.com/wp-includes/js/wp-emoji-release.min.js?ver=6.9.1"}} </script> <script type="module"> /* <![CDATA[ */ /*! This file is auto-generated */ const a=JSON.parse(document.getElementById("wp-emoji-settings").textContent),o=(window._wpemojiSettings=a,"wpEmojiSettingsSupports"),s=["flag","emoji"];function i(e){try{var t={supportTests:e,timestamp:(new Date).valueOf()};sessionStorage.setItem(o,JSON.stringify(t))}catch(e){}}function c(e,t,n){e.clearRect(0,0,e.canvas.width,e.canvas.height),e.fillText(t,0,0);t=new Uint32Array(e.getImageData(0,0,e.canvas.width,e.canvas.height).data);e.clearRect(0,0,e.canvas.width,e.canvas.height),e.fillText(n,0,0);const a=new Uint32Array(e.getImageData(0,0,e.canvas.width,e.canvas.height).data);return t.every((e,t)=>e===a[t])}function p(e,t){e.clearRect(0,0,e.canvas.width,e.canvas.height),e.fillText(t,0,0);var n=e.getImageData(16,16,1,1);for(let e=0;e<n.data.length;e++)if(0!==n.data[e])return!1;return!0}function u(e,t,n,a){switch(t){case"flag":return n(e,"\ud83c\udff3\ufe0f\u200d\u26a7\ufe0f","\ud83c\udff3\ufe0f\u200b\u26a7\ufe0f")?!1:!n(e,"\ud83c\udde8\ud83c\uddf6","\ud83c\udde8\u200b\ud83c\uddf6")&&!n(e,"\ud83c\udff4\udb40\udc67\udb40\udc62\udb40\udc65\udb40\udc6e\udb40\udc67\udb40\udc7f","\ud83c\udff4\u200b\udb40\udc67\u200b\udb40\udc62\u200b\udb40\udc65\u200b\udb40\udc6e\u200b\udb40\udc67\u200b\udb40\udc7f");case"emoji":return!a(e,"\ud83e\u1fac8")}return!1}function f(e,t,n,a){let r;const o=(r="undefined"!=typeof WorkerGlobalScope&&self instanceof WorkerGlobalScope?new OffscreenCanvas(300,150):document.createElement("canvas")).getContext("2d",{willReadFrequently:!0}),s=(o.textBaseline="top",o.font="600 32px Arial",{});return e.forEach(e=>{s[e]=t(o,e,n,a)}),s}function r(e){var t=document.createElement("script");t.src=e,t.defer=!0,document.head.appendChild(t)}a.supports={everything:!0,everythingExceptFlag:!0},new Promise(t=>{let n=function(){try{var e=JSON.parse(sessionStorage.getItem(o));if("object"==typeof e&&"number"==typeof e.timestamp&&(new Date).valueOf()<e.timestamp+604800&&"object"==typeof e.supportTests)return e.supportTests}catch(e){}return null}();if(!n){if("undefined"!=typeof Worker&&"undefined"!=typeof OffscreenCanvas&&"undefined"!=typeof URL&&URL.createObjectURL&&"undefined"!=typeof Blob)try{var e="postMessage("+f.toString()+"("+[JSON.stringify(s),u.toString(),c.toString(),p.toString()].join(",")+"));",a=new Blob([e],{type:"text/javascript"});const r=new Worker(URL.createObjectURL(a),{name:"wpTestEmojiSupports"});return void(r.onmessage=e=>{i(n=e.data),r.terminate(),t(n)})}catch(e){}i(n=f(s,u,c,p))}t(n)}).then(e=>{for(const n in e)a.supports[n]=e[n],a.supports.everything=a.supports.everything&&a.supports[n],"flag"!==n&&(a.supports.everythingExceptFlag=a.supports.everythingExceptFlag&&a.supports[n]);var t;a.supports.everythingExceptFlag=a.supports.everythingExceptFlag&&!a.supports.flag,a.supports.everything||((t=a.source||{}).concatemoji?r(t.concatemoji):t.wpemoji&&t.twemoji&&(r(t.twemoji),r(t.wpemoji)))}); //# sourceURL=https://alxsrg.com/wp-includes/js/wp-emoji-loader.min.js /* */