整合營銷服務(wù)商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
說，華麗的HTML5浪潮已經(jīng)打濕了眾多網(wǎng)站設(shè)計師，而且還將繼續(xù)在國內(nèi)刮起龍卷風。
首先，HTML5的出現(xiàn)會使得手機中的原生態(tài)APP減少。因為HTML5能夠產(chǎn)生一種假的APP，使得用戶無需下載安裝APP，而是通過利用手機瀏覽器運行。
第二，HTML5的出現(xiàn)大大節(jié)省了人們的開發(fā)成本。因為它通吃PC、Mac、iPhone、iPad、Android、Windows Phone等跨語言平臺。程序員們再也不必為不同款的手機做不同的APP了。
第三，HTML5的出現(xiàn)使得手機里可以不用再有Flash了。因為HTML5就有這種魔力使得我們觀看多媒體時不必安裝Flash等第三方插件。
第四，由于第三方插件的減少，手機得到了減肥瘦身，那么手機電量自然也會相對持久一些。
第五，HTML5使得手機定位服務(wù)更便捷，因為它實現(xiàn)了基于地理位置的功能，想定位，直接點擊“附近”就能輕松搞定。
第六，HTML5使得設(shè)計師們可以設(shè)計出更加美觀、更加炫酷的網(wǎng)頁，創(chuàng)造出更加有強大視覺效果的界面。
看到這里，你對HTML5動心了嗎？下面為大家介紹一個HTML5的酷炫功能——定位系統(tǒng)！
Geolocation
HTML5 的 geolocation 是一個令人興奮的 API，通過這套 API，Javascript 代碼就能夠訪問到用戶的當前位置。當然，訪問之前必須得到用戶的明確認可，即同意在頁面共享位置。如果頁面嘗試訪問地理位置信息，瀏覽器就會顯示一個對話 框，請求用戶許可共享其地理位置信息，比如這樣：
用戶同意（允許）之后，Geolocation 的 api 就能起作用了。
getCurrentPosition 方法
Geolocation API 在瀏覽器中的實現(xiàn)是 navigator.geolocation 對象，這個對象包含 3 個方法。第一個方法是 getCurrentPosition，調(diào)用這個方法就會觸發(fā)請求用戶共享地理定位信息的對話框。這個方法接收 3 個參數(shù)：成功回調(diào)函數(shù)，可選的失敗回調(diào)函數(shù)和可選的選項對象。
其中，成功回調(diào)函數(shù)會接收到一個 Position 對象參數(shù)，該對象有兩個屬性：coords 和 timestamp。而 coords 對象中將包含下列與位置相關(guān)的信息。
latitude：以十進制度數(shù)表示的維度
longtitude：以十進制度數(shù)表示的經(jīng)度
accuracy：經(jīng)緯度坐標的精度，以米為單位
有些瀏覽器可能會在 coords 對象中提供如下屬性。
altitude：以米為單位的海拔高度，如果沒有相關(guān)數(shù)據(jù)則值為
altitudeAccuracy：海拔高度的精度，以米為單位，數(shù)值越大越不精確
heading：指南針的方向，0°表示正北，值為 NaN 表示沒有檢測到數(shù)據(jù)
speed：速度，即每秒移動多少米，如果沒有相關(guān)數(shù)據(jù)則值為
說了這么多，我們來簡單應(yīng)用下，寫一段代碼獲取當前的經(jīng)緯度，然后輸出：
navigator.geolocation.getCurrentPosition(geo_success, geo_error);
function geo_success(position) {
console.log(position.coords.latitude, position.coords.longitude);
}
function geo_error(msg) {
console.log(msg.code, msg.message);
}
代碼很簡單，如果請求成功了就執(zhí)行 geo_success 函數(shù)，打印經(jīng)緯度，如果失敗了，輸出一些信息（失敗回調(diào)）。
getCurrentPosition 的第二個參數(shù)，即失敗回調(diào)函數(shù)，在被調(diào)用的時候也會接收到一個參數(shù)。這個參數(shù)是一個對象，包含兩個屬性：message 和 code。 其中，message 屬性中保存著給人看的文本消息，解釋為什么會出錯，而 code 屬性中保存著一個數(shù)值，表示錯誤的類型：用戶拒絕共享（1），位置無效（2）或者超時（3）。實際開發(fā)中，大多數(shù) Web 應(yīng)用只會講錯誤消息保存到日志文件中，而不一定會修改用戶界面。
我們在 PC 端的 chrome 瀏覽器中執(zhí)行這段代碼，結(jié)果是令人遺憾的：
掐指一算，估計是被墻了... 事實上，以 Chrome 瀏覽器為例，如果您允許 Chrome 瀏覽器與網(wǎng)站共享您的位置，Chrome 瀏覽器會向 Google 位置服務(wù)（此環(huán)節(jié)被墻）發(fā)送本地網(wǎng)絡(luò)信息，估計您所在的位置。然后，瀏覽器會與請求使用您位置的網(wǎng)站共享您的位置。
接著在 Android 機上測試了下，沒被墻，畢竟谷歌是 Android 的親爹啊。打印出來的信息如下：
31.188199 121.632919
當然只是知道經(jīng)緯度或許不太那么直觀，如果能把位置顯示在地圖上那就直觀多了！這里我用了高德地圖的API（猛戳這里看效果）：
<!doctype html>
<html>
<head>
<meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<title>地圖顯示</title> <link rel="stylesheet" />
<script src="http://webapi.amap.com/maps?v=1.3&key=您申請的key值"></script> </head> <body> <div id="mapContainer"></div>
<script> navigator.geolocation.getCurrentPosition(geo_success, geo_error); function geo_success(position)
{ var map = new AMap.Map('mapContainer',
{ // 設(shè)置中心點 center: [position.coords.longitude, position.coords.latitude], // 設(shè)置縮放級別 zoom: 13 });
var marker = new AMap.Marker
({ //復(fù)雜圖標 icon: new AMap.Icon({ //圖標大小 size: new AMap.Size(28, 37), //大圖地址 image: "http://webapi.amap.com/images/custom_a_j.png",
imageOffset: new AMap.Pixel(-28, 0) }), //在地圖上添加點 position: [position.coords.longitude, position.coords.latitude] }); marker.setMap(map); }
function geo_error(msg) { console.log(msg.code, msg.message); } </script> </body> </html>
在手機上打開后：
我的天哪！實在是太準了！如果我把代碼里的 zoom 參數(shù)再加大點，能精確到小區(qū)了...當然，這并不奇怪，因為這本來就是高德地圖百度地圖定位的一部分嘛。
事實上，getCurrentPosition 還有第三個參數(shù)，該參數(shù)是一個選項對象，用于設(shè)定信息的類型。可以設(shè)置的選項有三個：enableHighAccuracy 是一個布爾值，表示必須盡可能使用最精確的位置信息；timeout 是以毫秒數(shù)表示的等待位置信息的最長時間；maximumAge 表示上一次取得的坐標信息的有效時間，以毫秒表示，如果時間到則重新取得新坐標信息。
除非確實需要非常精確的信息，否則建議保持 enableHighAccuracy 的 false 值（默認值）。將這個選項設(shè)置為 true 需要更長的時候，而且在移動設(shè)備上更耗電。類似的，如果不需要頻繁更新用戶的位置信息，那么可以將 maximumAge 設(shè)置為 Infinity，從而始終都使用上一次的坐標信息。
navigator.geolocation.getCurrentPosition(locationSuccess, locationError, {
// 指示瀏覽器獲取高精度的位置，默認為false
enableHighAcuracy: true,
// 指定獲取地理位置的超時時間，默認不限時，單位為毫秒
timeout: 5000,
// 最長有效期，在重復(fù)獲取地理位置時，此參數(shù)指定多久再次獲取位置。
maximumAge: 3000
});
watchPosition 方法
如果要跟蹤用戶的位置，那么可以使用 watchPosition 方法。這個方法的使用和 getCurrentPosition 完全相同。實際上 watchPosition 與定時調(diào)用 getCurrentPosition 能得到相同效果。在第一次調(diào)用 watchPosition 方法后，會取得當前位置，執(zhí)行成功回調(diào)或者錯誤回調(diào)。然后，watchPosition 就地等待系統(tǒng)發(fā)出位置已改變的信號。
調(diào)用 watchPosition 會返回一個數(shù)值標識符，用于跟蹤監(jiān)控的操作。基于這個返回值可以取消監(jiān)控操作，只要將其傳遞給 clearWatch 方法即可（與使用 setTimeout() 和 clearTimeout() 類似），例如：
var watchId = navigator.geolocation.watchPosition(geo_success, geo_error);
clearWatch(watchId);
Geolocation 定位原理
Geolocation API 的數(shù)據(jù)來源可能是 GPS、IP 地址、RFID、WiFi、藍牙 MAC 地址、GSM/CDMA 卡 ID 等。因為 Geolocation API 是運行在你本地設(shè)備上的。所以，在使用 VPN 或代理的情況下，Geo API 仍能獲得你準確的 IP 地址信息（除非因為某些因素瀏覽器獲取不到這些信息）。
在HTML5的實現(xiàn)中，手機等移動設(shè)備當然優(yōu)先使用GPS定位，而筆記本和部分平板，最準的定位是WIFI，至于網(wǎng)線上網(wǎng)的臺式機，一般就只能使用IP來定位了，這個準確度最低。
應(yīng)式布局是2010年就被提出來的概念，直到今年才開始被中小企業(yè)重視。還是因為市場上的手機屏幕太多，更新?lián)Q代太快，企業(yè)好不容易搞定目前市面上這一波的屏幕適應(yīng)問題，新一批手機又要發(fā)布了，計劃永遠趕不上變化。
這時候，響應(yīng)式布局仿佛打怪適時出現(xiàn)的超人，適應(yīng)任何尺寸的屏幕，幫助企業(yè)解決了所有問題。他們嘗到響應(yīng)網(wǎng)站的甜頭之后，都希望擁有一個自己的響應(yīng)式網(wǎng)頁。
為了能少花錢少花時間，他們在百度輸入了“如何快速開發(fā)HTML5響應(yīng)式網(wǎng)頁”。
這時候就有一些程序大神義憤填膺地輸入一堆代碼，說什么其實很簡單啦，先創(chuàng)建一個空白的HTML5模板，復(fù)制這串代碼，再復(fù)制那串代碼，然后在哪哪加一串標簽代碼，響應(yīng)式網(wǎng)站就做好了！超！簡！單！
在不懂代碼的小編看來，這說的都是什么跟什么，一點都不接地氣。
什么樣的速度才叫快呢？
提問者理想中的快應(yīng)該是這樣的：最好不要超過三天，不用耗費很大工程量，不用花很多錢，最好按兩下鼠標網(wǎng)站就能做好，做出來的效果不要太爛，網(wǎng)站要穩(wěn)定，真正響應(yīng)式。
互聯(lián)網(wǎng)時代，沒什么是不可能的。前幾年要有人提出這種要求，還真的是天馬行空，但現(xiàn)在，要實現(xiàn)起來還真的很輕松！用建站寶盒V9就可以了！
建站寶盒是一款自助建站工具，對企業(yè)來說一點也不陌生，甚至某些企業(yè)對自助建站是有點誤解的，認為自助建站就代表著不靠譜。但寶盒更顯到第九代，如果真的像某些企業(yè)想的那么不堪，早就被市場淘汰了。
用建站寶盒V9怎么快速開發(fā)HTML5響應(yīng)式網(wǎng)頁呢？很簡單，登錄后臺，選擇你們喜歡的模板，一千多套總有一套是你的菜。選好后點擊“安裝”，就能進入網(wǎng)站編輯界面。
之后就是傻瓜式的網(wǎng)站編輯了，雙擊網(wǎng)站模塊就能進行修改、圖片、視頻上傳等操作。V9版本還加入了創(chuàng)新性的自由布局，在這種布局下，用戶可自由添加模塊，設(shè)置H5動畫。
網(wǎng)站編輯好后就能進行預(yù)覽，建站寶盒做的網(wǎng)站是電腦、手機、微信三站合一的，做好一個電腦網(wǎng)站，就相當于擁有三個網(wǎng)站。網(wǎng)頁打開速度更是比傳統(tǒng)網(wǎng)站快7倍，真正的快速+響應(yīng)！至于收錄的問題，H5響應(yīng)式網(wǎng)站因為擁有獨特的標簽，能更快被搜索引擎抓取，根本不用擔心找不到網(wǎng)站。價格也不貴，還有免費版的！
馬上快速開發(fā)H5響應(yīng)式網(wǎng)站：http://www.iisp.com/design/
更多建站&互聯(lián)網(wǎng)行業(yè)資訊，敬請關(guān)注微信公眾號：耐思尼克（iisp-com）
UXA是一款功能強大的基于web的開源組態(tài)軟件，可快速構(gòu)建和部署可擴展的SCADA、HMI、儀表板或IIoT系統(tǒng)。使用FUXA，您可以創(chuàng)建現(xiàn)代化、可視化、形象化的流程，來反映您的機器和實時數(shù)據(jù)的狀態(tài)，為自動化工業(yè)工廠的控制儀表進行個性化設(shè)計。
功能特性：
· 支持Modbus RTU/TCP的設(shè)備、西門子S7協(xié)議、OPC-UA、BACnet IP、MQTT、以太網(wǎng)/IP的連接（Allen Bradley）
· FUXA的SCADA/HMI Web編輯器-完全基于Web的可視化工程和設(shè)計
· 該系統(tǒng)設(shè)計用于在各種操作系統(tǒng)中運行，安裝方便。后端用NodeJs開發(fā)，用戶界面是一個可擴展的HTML5 web前端，使用web技術(shù)（HTML5、CSS、Javascript、Angular、SVG）開發(fā)，并與所有主流瀏覽器兼容。
快速開始
FUXA由NodeJS（后端）和Angular（前端）開發(fā)。
首先需要安裝Node（版本10、12或14）和NPM（版本>=6.11并<7.xx）。
通過git下載最新版本,或者下載zip包進行解壓。
git clone https://github.com/frangoteam/FUXA.git解壓完成后在dos命令下進入根目錄，進入server文件夾
cd server下載依賴包
注意：如果下載遇到超時問題，可將npm下載鏡像換成國內(nèi)淘寶鏡像：npm config set registry https://registry.npm.taobao.org，然后再執(zhí)行以下命令。
npm install啟動服務(wù)端
npm start服務(wù)端默認端口為1811，啟動成功后人如下圖所示。
服務(wù)啟動成功
FUXA由兩個不同的視圖組成：用于編輯項目的FUXA編輯器和用于顯示可視化項目產(chǎn)品的FUXA視圖。
編輯視圖
顯示視圖
開始使用
打開瀏覽器（建議Chrome）輸入http://localhost:1881/editor，進入到編輯頁，如下圖所示。
編輯頁
如上圖所示，點擊“+”按鈕創(chuàng)建GUI，創(chuàng)建成功后是一個空白頁；
點擊設(shè)置小圖標（2處），然后點擊“Connections”，進入硬件信息設(shè)置界面，如下圖所示。
硬件信息設(shè)置
點擊右下角的加號（+）按鈕，添加硬件信息。
我這邊是本地啟動了一個MQTT服務(wù)，所以這里選擇的Type為mqtt，然后添加對應(yīng)的地址，添加完成后如上圖所示，在服務(wù)下顯示有一個創(chuàng)建成功的硬件信息。
添加硬件信息
點擊添加好的硬件信息的超鏈接按鈕，進入屬性設(shè)置界面，如下圖所示。
點擊左上角的加號（+）按鈕，即可進入屬性添加頁面，根據(jù)返回/訂閱的數(shù)據(jù)的格式，來進行添加即可。
硬件屬性信息
2.將數(shù)據(jù)從設(shè)備推送到FUXA服務(wù)
如第一步（1）所示，添加mqtt訂閱完成后，根據(jù)設(shè)置的時間間隔，數(shù)據(jù)會定時傳送到fuxa服務(wù)。
3.構(gòu)建實時GUI SCADA/HMI/儀表板，選中控件，在右邊工具欄處選擇property（屬性）按鈕，綁定在第一步中設(shè)置的屬性信息即可。
創(chuàng)建儀表板并綁定數(shù)據(jù)
4.運行/調(diào)試
點擊頂部工具欄的開始按鈕（右三角），進入調(diào)試界面。
調(diào)試界面
以上就完成了fuxa組態(tài)軟件的簡單使用。
*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
