忍者云台淘宝店QQ群:67793291
开启辅助访问
国际全景协会VR好站大全
搜索
ChinaVR全景摄影网_四方环视旗下全景摄影资讯网站 › 标签 › iPhone

tag 标签: iPhone

相关帖子

 版块 作者 回复/查看 最后发表
本版置顶 交年终作业了－用html5做的全景漫游演示 attach_img 浏览问题 Viewing BH7NLJ 2012-12-6 38 80456 江南一摄 2013-3-10 05:05 PM
pano2vr 导出html5 如何在IPAD演示？ 浏览问题 Viewing 吉米摄影 2012-12-22 20 86289 Time 2014-7-22 01:03 PM
全景图可否在平板电脑播放 浏览问题 Viewing 雪落 2013-3-10 3 11843 hanson 2014-10-16 11:43 AM
新奇小应用让iPhone自动跳跃旋转全景摄像 attach_img 全景业界资讯 Information lightroom 2013-4-22 2 21885 鱼眼龙 2014-3-7 01:22 PM
"Kogeto Dot"让 iPhone4 实现360度全景拍摄 镜头选用 Lens 鱼眼龙 2013-9-4 1 12951 hua198615 2016-11-21 05:03 PM
我用pano2vr 导出html5 放在ipad上播放不了，是什么原因，求解 浏览问题 Viewing 双喜 2013-11-16 6 62724 象尚设计 2015-5-30 03:26 PM
更多...

相关日志

How to Make an HTML5 iPhone App
阎涛 2012-6-29 02:19 PM
from http://sixrevisions.com/web-development/html5-iphone-app/ You’ve been depressed for like a year now, I know. All the hardcore Objective-C developers have been having a hay-day writing apps for the iPhone. You might have even tried reading a tutorial or two about developing for the iPhone, but its C—or a form of it—and it’s really hard to learn. I don’t want to say that you should give up on the objective: you can get it eventually. But in the meantime, there is something else that you can do. You can create a native app that lives with all the other apps, and for the most part, it’s going to be a pitch-perfect imitation. You can do this with the skill set you probably already have: HTML(5), CSS, and JavaScript. I’ll show you how to create an offline HTML5 iPhone application . More specifically, I’ll walk you through the process of building a Tetris game. Offline? What am I talking about when I say "offline"? Well, it means that we have a custom icon, a custom startup screen, a native look-and-feel, and you can use the app even when the phone isn’t connected to the Internet. The app should be as functional as it can when it is offline, just like normal native mobile apps. This is a tutorial specifically for iPhones but most of these techniques apply to all phones that have HTML5-capable browsers. Yeah, I mean it, check out the following image. It has no URL bar and no navigation at the bottom. It looks just like a native mobile application. Prework You are going to need access to a server where you can change the HTTP Headers on your files. This is because we need to take advantage of HTML5′s offline caching (more on this later down the page). Apache does this really well and you can just add something to a .htaccess file and it will just work. Here’s a tutorial on modifying HTTP headers using htaccess . The other thing you need to do is to enable the debug bar in Safari’s web browser on your iPhone unit. Go to the Settings.app Safari Developer on your iPhone, then turn on the debug console. This will help you spot potential JavaScript errors. Once you’ve built your app, you should turn this off so that you will get the full experience when testing your HTML5 iPhone app. About the App Icon and Startup Screen The icon needs to be 57px x 57px. The iPhone will round the corners of your icon, create a dropshadow, and add a shine to whatever icon you use. It should be in PNG or JPG format. Here is what I used for the tetris game. The startup screen needs to be 320px x 460px and should also be in PNG or JPG format. Here is what I used for the startup screen. Some tips before you start Stay small, sparse and simple. Small: This is mobile app development so even though you are caching your stuff, it’s still a smart idea to keep your file sizes lean. Sparse: You should try to keep the amount of files you deal with as low as possible. Simple: Start with a few simple ideas and execute it. By keeping your scope small, you can get things done faster. Application Cache This is a new standard, you can read the spec here . Application caching allows browsers to determine in advance all the files a web page will need for the web page to work. It will cache those files (to a fault, sometimes). The syntax of this file is simple: just list the locations of your files in either absolute (e.g. http://yourwebserver.com/picture.png) or relative to the manifest file (/picture.png). The browser will keep those files offline. You can also list a few URLs that should not be cached, but this isn’t pertinent for our offline app (if you’re interested, read about this in the documentation ). One tricky part to this whole thing is that the manifest (the list of files that need to be cached offline) has to be passed with a filetype Header set to text/manifest. That is why you need access to a web server that can set HTTP headers. Screen Size A quick note when designing your application: When you are in app mode, you have a screen size of 320px x 460px. When you are in web mode, it has a screen size of 320px x 356px. This can affect the user interface of your offline HTML5 app. Here you can see the difference side by side. HTML It’s a real browser so your HTML is exactly the same. The iPhone browser is also in the forefront of HTML5, so dig into the spec. For more in-depth detail, check out the Safari Developer’s corner: Safari HTML Reference Safari CSS Reference Let’s get coding The app starts by defining your markup. here is the markup for my Tetris app. !DOCTYPE html html manifest="tetris.manifest" head meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0"/ meta name="apple-mobile-web-app-capable" content="yes" / meta name="apple-mobile-web-app-status-bar-style" content="black" / link rel="apple-touch-icon" href="iphon_tetris_icon.png"/ link rel="apple-touch-startup-image" href="startup.png" / link rel="stylesheet" href="tetris.css" type="text/css" media="screen, mobile" title="main" charset="utf-8" titleoffline Tetris/title /head body !-- Put your Markup Here -- script type="text/javascript" src="tetris.js"/script /body /html First, notice the Doctype. Isn’t HTML5 awesome? The manifest="cache.manifest" property on the html tag is how the browser knows that we want to cache this web page offline. There’s proprietary Apple markup on our HTML5 page. A brief explanation of each: apple-mobile-web-app-capable: This is another tip-off that we want to be an offline app. apple-mobile-web-app-status-bar-style: This hides the status bar, and nav bar when the app is offline. apple-touch-icon:This is the pointer to the image that want to be the icon. apple-touch-startup-image: This is a url pointing to the startup image. Also note that you should put CSS at the top and JavaScript at the bottom (best practices still apply here). CSS It’s almost the same as a normal web page. There are some specific -webkit CSS rules that you can use that do some really cool things like animation, but this is a quick-and-dirty guide and that’s outside of the scope of this article. The CSS is just Plain Jane. body { overflow:hidden; background: #d7d7d7; margin:0; padding:0; } #tetris { width: 320px; height: 460px; background:#000; } The style is really just to the div element on our web page to make sure it fits in the iPhone’s viewport properly. JavaScript I used a modded version of a JavaScript from Dalton Ridenhour ; I found it on Github . The JS was written originally for a normal web browser. The only modifications I had to make was to support not having a keyboard. In general, JS functions work just fine on the iPhone—there are exceptions though. Think about something like a mouseover, the event exists on the iPhone, but I am not sure how helpful it is when you don’t have a standard pointing device (such as a mouse). Quirksmode posted an article about events on the iPhone that is really helpful. When you have all of that, you can test it out but opening your index.html in an iPhone, and you should be able to see everything work. Then, next step is to server it from an actual webserver that can set the proper settings on the cache.manifest. Then you could be able to add it to the home screen and have all the extras, and see the offline mode. You can see a working version I have set up at: http://tetris.alexkessinger.net Bonus Section: Offline Data Along with the ability to keep files that are needed offline, you can also store user data in an offline database. There are two major APIs for per user and/or per page data. The first is localStorage. localStorage, is an easy to use key-value store with a dead simple API. localStorage.dataToStore = 5; console.log(localStorage.dataToStore); // 5 You can use this for storing the user’s score, for example. The second is actually an offline SQL engine, a webdatabase . The APIs are a little more advanced. Here is a little of you will see. // Try and get a database object var db; try { if (window.openDatabase) { db = openDatabase("NoteTest", "1.0", "HTML5 Database API example", 200000); if (!db) alert("Failed to open the database on disk. This is probably because the version was / bad or there is not enough space left in this domain's quota"); } else alert("Couldn't open the database. Please try with a WebKit nightly with this feature enabled"); } catch(err) { } // Check and see if you need to initalize the DB db.transaction(function(tx) { tx.executeSql("SELECT COUNT(*) FROM WebkitStickyNotes", , function(result) { loadNotes(); }); }); }); // Insert a test Note. var note = { id: "1", text:" This is a test note", timestamp: "112123000", left:10, top:10, zIndex:2 }; db.transaction(function (tx) { tx.executeSql("INSERT INTO WebKitStickyNotes (id, note, timestamp, left, top, zindex) VALUES / (?, ?, ?, ?, ?, ?)", ); }); // Get all the notes out of the database. db.transaction(function(tx) { tx.executeSql("SELECT id, note, timestamp, left, top, zindex / FROM WebKitStickyNotes", ; note.text = row ; note.timestamp = row ; note.left = row ; note.top = row ; note.zIndex = row ; if (row highestId) highestId = row ; if (row highestZ) highestZ = row ; } if (!result.rows.length) newNote(); }, function(tx, error) { alert('Failed to retrieve notes from database - ' + error.message); return; }); }); Wrap Up There is lot that can be done with offline HTML apps. Games, like tetris, are even possible, but you would probably want to consider what you want to do and make sure its right for an offline app. Quake 3 Arena, probably not. A to-do list app, definitely. Let thousands apps bloom! Resources W3C Offline Application Cache docs How to create offline webapps on the iPhone The HTML5 offline cache safari Backchannel: an Offline-Capable Web App for the iPhone iPhone offline webapps – a desk on iPhone apps. A disscussion of offline events by John Resig Getting Started with iPhone Web Apps Related Content 10 Useful Gadgets for Mobile Computing A Quick Look at Mobile Web Designs The Remote Designer: How to Work While on the Road Related categories : Web Development and User Interface About the Author Alex Kessinger works for Yahoo! as a front-end engineer. Elsewhere, he likes to curate great stuff from the web on his blog, alexkessinger.net . He is also a founding member of the Tastestalkr Network , a brand group. When not working, Alex lives in the bay area and enjoys really good food.
4207 次阅读|0 个评论
攝影器材DIY－iPhone變紅外線相機遙控器(Nikon/Canon/Sony)
阎涛 2012-1-24 07:36 PM
http://www.minwt.com/?p=3631 攝影器材DIY－iPhone變紅外線相機遙控器(Nikon/Canon/Sony) google_protectAndRun("render_ads.js::google_render_ad", google_handleError, google_render_ad); 　　iPhone可真是愈來愈多元化，應用程式也愈來愈千奇百怪，什麼都有什麼都不奇怪，最近梅干在AppleStore中，發現到一個相當有趣的應用程式DSLR.Bot，如此一來就可將iPhone變身為相機的紅外線無線快門，並支援Nikon、Canon、Sony、Pentax…等各大相機品牌，令梅干感到神奇的是，DSLR.Bot則是將音源訊號轉換成紅外線訊號，藉此來觸發相機的快門，而除了可觸發快門外，還可長時間曝光、錄影、 HDR包圍曝光以及GPS地圖記錄…等，功能相當的完整，但該應用程式需要一個音源轉紅外線的接頭，所以接下來梅干就來介紹一下，如何自製這個紅外線的觸發器。 google_protectAndRun("render_ads.js::google_render_ad", google_handleError, google_render_ad); DSLR.Bot小檔案： 軟體名稱： DSLR.Bot 軟體版本： 3.0 軟體語言： 英文 軟體大小： 1.0MB 軟體性質： $4.99 適用裝置： iPhone/iPod touch/iPad 適用平台： iOS4.2 支援相機： Nikon、Canon、Sony、Penta 官方網站： http://www.dslrbot.com/ 軟體下載： http://itunes.apple.com/us/app/dslr-bot/id385242427?mt=8 準備素材： 1.3.5mm音源孔 × 1 2. 940nm IR LED × 2 Step1 分別將二個940nm IR LED接腳，把正極接負極、負極接正極焊起來。 Step2 焊完如下，這時二顆IR LED就黏接在一塊。 Step3 接著把3.5mm音源接腳轉開，外面的鐵片是負極，裡面的是正極。 Step4 再利用小剪刀將剛轉下來的蓋子上方剪開來。 Step5 接著分別把IR LED的二個接腳，分別焊接在音源接頭上，一腳焊在外層，另一腳焊在內層(由於剛剛將二個IR LED正負焊在一塊，這時就無正負極之分，只要焊上去就行了)。 Step6 將塑膠蓋鎖回去。 Step7 最後再用熱熔膠將露出來的接腳黏起來，這樣就大功告成囉。 Step8 這時拿出iPhone，並將剛作好的紅外線發射器，插到iPhone的音源孔中。 Step9 開啟音源，並將音量調到最大。 測試IR是否有成功： Step1 這時拿出一般的小DC，並將剛作好的IR LED對著相機的鏡頭，並進入DSLR.Bot應用程式，點下方的Time Lapse頁籤，並按一下Start鈕，這時回到小相機，如焊接成功，會看到IR LED燈相互的閃爍，可由參考下方的影片。 測試影片： 相機設定(Canon 5DII為例)： Step1 最後只剩下相機的設定啦！依Canon 5DII為例，點一下AF-DRIVE鈕，接著旋轉後方的旋鈕，將設定切到一個紅外線的圖示，這樣就可接收紅外線的觸發。 Step2 設定好後，可直接用iPhone來遙控相機囉！將DSLR.Bot切到Shoot頁籤，這時只要點一下Shoot鈕，就可直接觸發相機的快門，可由看下方的影片。 示範影片： 　　經梅干實測結果，有效距離約2~3公尺左右，對於出外自拍已相當足夠，有了DSLR.Bot一套就包辦所有的相機，真是一勞永逸的好工具，且功能還比市面賣的紅外線發射器強很多，下方的圖表中，是官方測試的結果，綠色為已測試可用的，橘色為尚未測試，而梅干個人測試OK的有Nikon D70s、Canon 550D、Nikon P7000，大部分只要相機有紅外線觸發的，應該都可使用，真的蠻不錯用的，有時間各位不妨也自已製作一下囉！ __spr_config = { pid: '4ee9589d396cef4915000146', title: '攝影器材DIY－iPhone變紅外線相機遙控器(Nikon/Canon/Sony)', ckw: 'DIY,攝影器材,攝影器材diy,相機自拍器,紅外線觸發器', chan: 'diy-dc,dc', no_slide: '', slide_logo: false, pub: '2011-09-15 16:00:54', url: 'http%3A%2F%2Fwww.minwt.com%2F%3Fp%3D3631', header: '熱門文章推薦' }; var content = document.getElementById('simplereach-slide-tag').parentNode, loc; if (content.className){ loc = '.' + content.className; } if (content.id){ loc = '#' + content.id; } __spr_config.loc = loc || content; (function(){ var s = document.createElement('script'); s.async = true; s.type = 'text/javascript'; s.src = document.location.protocol + '//d8rk54i4mohrb.cloudfront.net/js/slide.js'; __spr_config.css = document.location.protocol + '//d8rk54i4mohrb.cloudfront.net/css/p/4ee9589d396cef4915000146.css'; (document.getElementsByTagName('head') || document.getElementsByTagName('body') ).appendChild(s); })();
3159 次阅读|0 个评论
更多...