全景圖嵌入網頁能力

點擊開啟全景圖 Click for PANORAMA

上圖: Devil's Lake 惡魔湖全景圖

麥大叔從2015年 Google Trusted Photographer 開始學全景攝影的相關技術。
然後今年開始空拍全景攝影, 感覺起來比空拍Video更有臨場感。
我想了想也是時候把網站做個小改版, 可嵌入全景圖的閱讀。

大致試用了幾種, 最終打算採用 Photo-Sphere-Viewer 的精簡版本,
https://github.com/JeremyHeleine/Photo-Sphere-Viewer
語法精簡, 客戶端網頁宣告1-2個變數就可以生成, 而主引擎用 three.js 效能也相對較好。

接著就是再弄個全景圖片的資料庫分頁出來啦~

最後覺得很奇怪的是: 為什麼html5 不支援直接播放全景圖呢?? 難不成要等到 html6嗎?

Private Content

Place.Report development
URL->https://place.report/

1. Website statement:
1. Place.Report is a Google Map API application which helps Sales to identify possible local customers.
2. Place.Report was an idea came out while developing the StreetView.cc website, both websites apply the same algorithm but pick up different target audiences.

--
2. Release Note
First released on 9/27, 2016 v2.0 (from streetview v1.3)
a. Functions:
[Public] Target Area Search, Store Search, Place.Report
[Priviate] MyPlaces, Place.Rank

b. Support Countries:
US, United States
TW, Taiwan

c. Target Audiences:
Sales: door-to-door, telephone
Marketing company
Local store owners

d. Keywords:
Geomarketing, Store Research, Marketing ROI measurement

--
3. Bug Report / Discussion
Please leave a comment below if there was an issue or anything you would like to discuss

IP 全球地理位置資料庫開發日誌

話說從頭, 這是中文式流水帳。
開發的綠起是為了把 streetview.cc 的入口寫的完美一些,
所以在網路上找了些免費的 IP 資料庫來使用,
想利用 IP 來定位 Google Maps 的起始位置。

開始先找到的是 MaxMind 的 GeoLite2 (GeoIP2免費版),
接著就花了點時間把將近三百萬筆資料寫進 MySql 裡,
接著隨機性的測試一下, 還可以哇!!
然後發現怎麼故鄉台灣的IP都只能定位到陳有蘭溪??

稍稍研究之後, 原來似乎還沒有人把台灣的IP區段給補完, (人才都跑那去了?)
也許警政或調查機關有, 不過我沒有找到就是了~~
最接近的就是 IPIP.net 的創辦人高先生在今年初時自己的微博說:
「 嗯，就在刚才，已经把手里的台湾的IP 库地级市和区县库数据都搞定了，貌似这个是全球独一份吧？台湾本地公司都没有。。」

哇, 牛人說牛話了, 於是我花了點時間在 IPIP.net 上撈了一份 17monipdb 做再開發。

只是 17monipdb 可能是免費的關係, 數據上有些許錯誤,
不過對於鑑別中國IP的地理應該還是可以的,
所以我就花了點時間把 17monipdb的結果(中國) 整合到 GeoLite2 之中。

然而, 這並沒有解決陳有蘭溪的問題。

我又把念頭放到再來轉個資料庫看看, 查了查。決定就是你了!!
IP2LOCATION 上吧!! (其實真沒有幾家有開源的)
抓回來一看, 天啊!! 4百多萬筆資料啊!!
不過有了匯入 GeoIP2 的經驗, 不怕不怕。
花了些時間等待匯入資料庫後, 交叉比對目前這兩大開源的資料庫如下:



從上表可知, IP2LOCATION 對於IP表切得較細, 不過對於地理地址定位來說, GeoIP2 的比較齊全,
另外IP2LOCATION是只有一張資料表, 在執行上的效率較差, GeoIP2是兩張表格, 效率較好。
理想的作法應該是採用 GeoIP2 的資料結構, 補上 IP2LOCATION 的有效資料。

雖然這樣能解決陳有蘭溪的問題, 不過我得回頭做別的事了。

目前的作法是把IP2LOCATION列為參考資料, 待有空或是有想法時再將兩個資料庫整合再一起囉。
未來的開發的意向大概就是把兩個資料庫截長補短, 然後整合進一個台灣的IP區段, 為家鄉盡一份心力;
然後再加上 Google Maps 的定位去自動資料庫的校正和補充。就算大功告成啦~

現就以此文將此開發暫告一段落; 我得來繼續寫 streetview.cc 大數據!!

--

IP GeoLocation Service development 中文版

http://ip.ymc2.com/
Website statement:
1. The ip.ymc2.com is a customized website for IP query purpose.
--
V1.3 Released on 9/6, 2016
1. Include a reference DB from ip2location.com, DB11 LITE
2. Optimize MySQL commands to shorten query time
3. Minor texts fixed.

V1.2 Released on 9/4, 2016
1. Include 17monipdb.dat (Open-Source Database of CHINA IP) to better locate location in China
2. Enable to display city name in both Chinese and English (CHINA only)

V1.1 Released on 8/30, 2016
1. Support Country-CountryName. US-> United States
2. Apply Country - Language- GoogleMaps look-up to set default on Google Maps UI

V1.0 Released on 8/29, 2016

Function: Giving an IP address, return its GeoLocation including City, Country and Latitude & Longitude. (and maybe other information as well)

Support: IPV4 format only.

API usage: Provide JSON result, but only for internal usage now.

Database & Tables :
1. GeoIP2
Version: 20160802 open-source
Max Note: 804,007 geo-location data, and 2,180,870 ip-blocks data were imported.
This product includes GeoLite2 data created by MaxMind, available from http://www.maxmind.com

2. IP2LOCATION LITE-DB11
Version: 20160901 open-source
Max Note: 4,016,410 data were imported.
This site or product includes IP2Location LITE data available from http://www.ip2location.com

3. 17monipdb:
Version: FREE 20160601
Max Note: This db is mainly to locate specific IP-address where $country=CN. Total 96,817 data were imported. (225 duplicate values on row startIpNum row; 2 duplicate values on row EndIpNum. Unable to setup primary key.)
The API includes 17monipdb.dat, 作者©高春辉, available from https://www.ipip.net/download.html


4. GoogleMaps Languages Support list: GMap-language.csv, source-> https://developers.Google.com/maps/faq#languagesupport

5. a revised Country codes (ISO 3166) and official language table: country-language.csv, source-> http://download.geonames.org/export/dump/countryInfo.txt

6. a table to look-up locId with city name in Chinese and in English (China IP only) locId-cn_city.csv
Max Note: Please open it with Notepad before importing to your db. It includes Chinese characters.

--
Report Error: Please leave a comment below if there was an error result.

留言服務開發記錄 Comment Service Development

若不意外, 一般網站留言的功能都是寫在自有的資料庫中,
不過若跨站別有太多網店需要處理得情況時, 寫起來會有點白白的啊, 一直 copy+paste 有點搞笑哦!
所以, 這次麥大叔用一個主資料庫處理所有留言。再用 json 在不同站別做資料傳遞。
在應用上只要在其它各站呼叫函式就自動生成留言了, 管理上也比較好管理哦!

目前公開的版本是 v1.0, 主要實現了留言功能 (這不廢話嗎?)
預期待開發/解決的問題如下:

1. 機器人踹開:
現在我還在觀察機器人的運作的方式, 若都是 curl 留言機器人,
就直接 ajax 把 sumbit button 處理欄位就好啦!
爬都爬不到; 除非有大師用 solenium 之類的來寫, 那也沒辦法了。
我是不太想用什麼文字啊影像之類的驗證碼, 大大降低 User Experience 的分數

2. Mobile Friendly 行動裝置最佳化
說實話, 每次寫php網頁, 我最花時間的就是試這些 css 的東西, 比寫code還痛苦!
所以, 這mobile friendly 永遠都是問題, 一直在我心裡隱隱作痛...

3. FB-account Login / Google-account Login
還要加個用FB/Google一鍵登入留言的機制。
這個理論不難, 一個api的轉換而已...

目前大致先降。 有想到其它後補

a comparison of time-consuming for curl() and file_get_contents()

1. Target: Google generated page

2. Programming: Basically string processing, apply preg_match, preg_replace, preg_split after retrieving HTML content.

3. RESULT
--
Result 1
$curl_info[size_download]: 542711

curl get contents timing => 0.5671, 0.5821, 0.7801
file_get_contents timing => 0.8851, 0.8641, 0.9081
--
Result 2
$curl_info[size_download]: 554880

curl get contents timing => 0.7771, 0.5741, 0.6331
file_get_contents timing => 0.9991, 1.2871, 0.9111
--
Result 3
$curl_info[size_download]: 561892

curl get contents timing => 0.7111, 0.7091, 0.6931
file_get_contents timing => 1.0921, 1.3880, 0.9640
--
Conclusion

Curl is 50percent faster than file_get_contents when getting a 550kb file size.

Streetview.cc Development Diary

Kind of a note to memorize something that I may forget in few days after....


Ver 2.1 Released:

Public
StreetView: Display places with Google See-Inside features.
Coverage: Reveal areas which have been scanned by system.
SeeInside: SeeInside a place with the UI combines Google Maps(pegman) and its StreetView image on the same page.

Private
SECRETS

Website Version
2016/10/07 - Ver 2.1 Released. all major function revised.

2016S2S3 - Development https://Place.Report website
2016/4/13 - Revise See-Inside judgement programming (v1.1)
2016/4/12 - Comment_Service implemented
2016/4/01 - Ver 1.3 Released. mysqli implemented
2016/3/25 - Ver 1.2 Released. New function: MapScan, Providing Linear and area two types scanning.
2016/3/22 - Website Automation Test Success!!
2016/3/17 - Improve processing efficiency by using curl instead of file_get_contents
2016/3/15 - Big-Data Place Report trial. (providing Place Ranks)
2016/3/12 - Ver 1.1 Released. New functions: Coverage, PlaceRank, SeeInside
2016/3/12 - Integrated g.ymc2.com, an URL Shorten API. a JSON application
2016/3/10 - Ver 1.0 released to DOMAIN: streetview.cc HOST: netfirms.com
Function: Home, OnePageReport, PlaceSearch, MapProcess
2016/3/01 Defined three modules, placeid, cid and cbk, to figure out if a store has the SEE-INSIDE feature or not.
2016/2/15 Start Coding .........A Google Maps Javascript V3 Journey....
--
Problems/Issues/Improvements Ideas 2.1:
1. CSS Layout for mobile device. TBH, i don't really care about this for sure.
2. Google API limitation. a Major concerns
3. Facebook Graph API

Update Place.DB (Automatic and Manual)
Define a mid-term relationship for Place.DB and Seeing.DB (maybe a Pano.DB)?
Useful Statistic Data
Replace mysql to my_sqli sentence
Rethink the function: judge_seeinside, judgement see-inside...
Implement Google analytic
IP rule for certain function
--
Major Fixed:
1. How to process place results generated by Google Maps API (Async) to db?
-> 1) generate a click button within the async function.
-> 2) generate an auto-run php page.

2. How to curl the place results generated by Google Maps API (async) to a html.element?
-> 1) Curl does not work on async page. (empty element)
-> 2) Include the Google Maps API script on the parent page

3. Improve server efficiency:
-> A test reveals that curl is 50 percent faster than file_get_contents.
-> Replace file_get_contents with curl function.

4. Website automation test solution:
-> Tried Selenium webdriver, but was unable to figure out a way to make it work on wamp server.
-> Tried Selenium IDE, Works, however it had file size limits for processing codes(20KB?), and also there was no flow control (if-else) at the moment for testing purpose.
-> Turned out a solution which is to connect the server with localhost, and write php pages to the server via fopen(ftp), and then automatically run these pages to process results.

5. Encode the imgurl of all pano:
-> Applied JSON to communicate with g.ymc2.com (url shorten service)

6. fopen($ftp_path): failed to open stream at certain time ?
-> It seems like the hosting server issue (connection error or what?)
-> Use curl to do ftp method. (not sure if doing this is right, but it temporally works!)

7. The owner-response-rate (Google Reviews)
-> Find the recent 10 reviews and check to see if response from the owner exists

Google Place Big Data Report

是的, 各位朋友! 麥大叔花了我近兩周的時間, 日夜苦幹, 連遊戲都不打,
終於街景資料庫快要可以上線了!

» Google-Place-Big-Data-Report-QN3Gk2Pm.html'>Read More

最近忙著和Google Maps API奮鬥, 想寫一個跟街景有關的資料庫網站。(好痛苦啊! DOM完全不熟的說!)
不過今天突然心血來潮, 想回顧自己到底寫過幾組完整的PHP+MySQL網站，也一併回顧自己寫程式的來時路。

» Read More

最近開始研究 Google Map 的一些API應用,

首先, 下圖是用 iframe 包圍的一張全景圖
位置接近於
緯度 45.832617
經度 6.8651769
朝向15.44度方向
視角是-5度 (朝下)
視野是100度



而根據以上這些數據, 就可以呼叫 Google Street View Image API 取出影像



呼叫方式 https://maps.Googleapis.com/maps/api/streetview?參數
參數包括:
size: 長x寬 (影像大小)
location:經度,緯度 (影像位置)
fov: 20-120 (視野大小)
heading: 0-360 (方位)
pitch:-90-90 (視線角度)

根據 Google 官方文件 提到, 用 location 這個參數做定位時, 會找到最接近點的全景圖, 所以有不確定性。
建議是採用pano id的方式去做定位。
只不過 pano id要怎麼呼叫我查了老半天還是看不太懂, 先暫時寫到這裡, 後續有發現在補完。

= 2016 02.16 補充 =
pano id 的呼叫方式:
pano: #panoid
sensor: false (可忽略 App Key)

Google 推薦攝影師服務

你想要採用Google街景的服務, 展示你的生意嗎? 試試下面的例子

Jade Mountain Café 玉山咖啡
2611 E Johnson St, Madison, WI 53704

2005年中成立 Snowforest LLC 的挺立與我(麥大叔), 目前皆為Google推薦攝影師, 我們目前正在協助威斯康辛本地的小型企業拓展他們的能見度, 包括了本地的中西式餐館, 禮品店, 婚紗店, 廚具店, 剌青店, 水煙店...等各式小生意作坊。

若你也是威斯康辛當地的華人, 經營一間實體店鋪, 歡迎您與我們連繫, 我們會協助您理解 Google 街景幫助推展店鋪的相關內容。

以下是Google推薦攝影師能為店鋪提供的幫助之重點提示:
» Read More

Google Maps Sticker

最近剛完成了 Google Maps 的 window sticker,

整體設計的概念是藉著使用者經驗, 透過類似的圖像而去連結 Google Maps 的一個概念。

稍稍修改了一個 Pegman 的圖示, 加上 Google Maps 的 有名標示紅Pin; 最後放在三色地圖的底圖上。

文字訊息維持 simple is the best 的原則, 只宣傳需要傳遞的訊息。

然後之前寫的縮網址+QR-Code功能URL Shorten總算派上用場啦, 加上QR-code 在地宣傳 Snowforest。

以上就是這個貼紙的思考。

Here is an instruction which shows you how to embed a Google street view tour on your website.

Step 1. Open the Google Map on your browser, and Key in your business name on the Search tab.
Step 2. Click the See Inside tab, and then guide the Street View screen to your prefer initial view spot (the default screen of your Google Street View).



» Google-Street-View-on-the-webpage-z895mCJs.html'>Read More

Street View Trusted | Trusted Photographer

Do you want to apply the Google Street View technology to show your business to the world? Try below sample:

Jade Mountain Café
2611 E Johnson St, Madison, WI 53704

Ting-Li Lin and Max Chen (myself), who founded Snowforst.co, are helping Wisconsin local business to spread their visibility! Although they are both Google Trusted Photographers, their photography capabilities is way beyond than this.

I am currently marketing Google Street View services in most towns in Sauk county, like: Sauk City, Baraboo, Reedsburg and Wisconsin Dells area. If you see me stop by your business store, don't be surprised. I see your potential and would like to help promote your store. I believe Street View for business is a great marketing tool for local business for the below reasons:

» Read More

This post also posted in Virtual Tour Mobile-Friendly Test

This article is going to compare 5 visual tour services using five common mobile friendly test tools on the internet. These 5 virtual tour services are the most common marketing providers in the North America real estate industry, including: Circlepix, Paradym(VisualTour) ,matterport, My Visual Listing. truplace, TourBuzz. And the 5 mobile friendly test tools will be used are: W3C mobile Checker, MobiReady, Google Developer Tools: Mobile-Friendly Test, PageSpeed Insights and Wave.

Result

After reviewing the result, I would rank these five virtual tour services as: truplace, matterport, tourbuzz, paradym, my visual listings and the last, circlepix.

» Read More

Django Unchained (電影決殺令心得)

今年麥大叔開工看的第一部電影: Django Unchained。

據說台灣3月份才會上檔, 這個翻譯的名字蠻鳥的, 台灣的上片公司能不能想一個新的?

例如: 獎金獵人江果 or 江果殺很大 ...之類的。應該比較符合故事的主軸。

看看這個: 決殺令? 是殺很大沒錯啦, 但是太不直白了!

劇情就先不寫了, 用一句話描寫的話就是上面兩個我幫忙取的譯名。

不過話說回來不寫劇情是要怎麼寫心得啊?

總之先來爆個料之老婆為什麼挑這部片:

因為導演昆汀塔倫提諾Quentin Tarantino是拍 Kill Bill (殺死比爾) 系列...

看過殺死比爾應該對這導演的獵奇風格相當印象深刻吧。科科!

再者是麥大叔從這部電影中認識了密西西比州。

由於這電影中的江果的最終決戰場景也設定在密西西比州, 再從影片裡的非常多面向,

不難發現密州是上世紀美國黑奴及實施種族隔離最嚴重的地方,

我稍稍Google了一下這段密州的歷史, 似乎即使到了這個世紀, 在密州人心中仍是分割不開的情結啊!

最後回到電影本身, 劇情本身並沒有太大的爆點,

不過畫面的處理與不太符合邏輯的角色笑點會是個不錯的欣賞方向。

如果你喜歡爆頭般的殺很大, 江果殺很大 2個半小時保證你看的很爽。

但若是初交往的情侶, 除非你倆同時對電影有獨到的眼光, 還是換一部吧。

Private Content

老早就想寫一個線上的筆記本系統, 不需要精彩內容, 只是很乾脆的筆記。

好比在讀本書的時候, 會在書的空白頁上寫下的隻字片語;

或是在逛街看到心動商品的時候, 匆匆拿出的那本小本子;

也可以是在辦公桌上, 永遠劃不完也沒有終點的待辦事項表;

是低, 就像是我從高中以來一直用的小筆記本一樣。

前陣子看了朋友的網誌,

身為專職漫畫創作家的他, 也就不難理解為什麼他的筆記本是用畫的。

他說當漫畫的梗如山窮水盡一個都沒有的時候, 他就會翻翻他的筆記本...

哇~ 這, 我讀完之後還蠻想試試這種感覺的~

尤其我這過三十的記憶力, 沒比年輕時好了,

» Read More