天簡單分享一下在Axure RP 8 中如何使用 Font Awesome 圖標庫完成設計。
在做交互設計的時候,作為產品設計師我們常常需要用一些標準的圖標庫,通過導入現成的圖標可以極大地提高我們的設計效率。常用的圖標庫,一般提供SVG,PNG圖片,設計師下載以后可以直接用到交互設計文件中,開發同學將圖片文件放在圖標文件夾中供頁面代碼使用,例如:
但這種古老的方式,對于前端開發人員來說并不方便。所以新一代的圖標庫,他們提供給設計師矢量圖片( SVG格式或字體格式),設計師在設計稿中記錄該圖標的名稱,并告知前端開發人員。在開發過程中,前端同學通過調用圖標庫提供的CSS樣式,并填上對應圖標的名稱,便可以快速在Web上呈現出各種精美的矢量圖標,例如:
今天我們重點講述,如果規范使用Font Awesome圖標庫完成交互設計,并讓前端同學快樂地跟我們合作。
Font Awesome為您提供可縮放的矢量圖標,您可以使用CSS所提供的所有特性對它們進行更改,包括:大小、顏色、陰影或者其它任何支持的效果。官方網頁為: http://fontawesome.io
對于英文不是太好的同學可以訪問由“極風游科技”提供的 中文頁面: http://fontawesome.dashgame.com
選擇頁面頂部的“圖標”按鈕,可以看到所有圖標的分類:
選擇”手勢“,網頁自動跳轉出到所有”手勢“圖標部分,點擊圖標最后的”復制“按鈕,可以復制到該圖標的名稱,如下紅框所示”hand-o-right”,這里非常重要,這個名稱對于設計師之后導入圖標到Axure 或者 前端同學都非常有用。
由于Font Awesome圖標庫是基于字體來使用的,所以我們首先需要在官方主頁的最上面點擊”立即下載”(目前最新版為 V4.7.0), 然后解壓壓縮包,點擊 “TrueType 字體文件”,完成字體的安裝:
網上很多網友推薦加載Font Awesome的元件庫,以此快速完成圖標的使用。但是筆者認為由于Font Awesome經常更新,而對應的Axure 元件庫很難快速更新,所以建議大家自己在官網上通過圖標的分類,快速選擇自己心儀的圖標,獲取名字以后,在圖標庫中搜索定位圖標,然后復制粘貼到Axure中使用即可。
但是由于之前的頁面只允許我們復制圖標的名字,沒法直接復制 圖標,所以我們沒法在Axure中將圖標使用。所以我們需要去到”字體庫的圖標備忘單頁面“ ( http://fontawesome.io/cheatsheet/) ,按名字搜索圖標。例如:我們之前選擇向右的手勢為 “hand-o-right”, 然后我們在CheatSheet頁面搜索(Ctrl+F)到該圖標,如下所示:
然后我們復制紅框中的手勢圖標貼入Axure中,但是我們發現圖標沒有出現,而是一個方框:
原因是字體默認為Arial,我們切換為 Font Awesome,以后圖標正常顯示:
但是需要注意我們一定更要在該圖標的說明里面備注圖標的名字,這樣便于前端同學開發時快速完成代碼的編寫,如下圖所示:
但我們完成設計以后,需要將線框圖發布成HTML文件,這時候如果將文件放到一個沒有安裝過Font Awesome 字體的電腦上,字體圖標可能無法顯示,所以我們需要在發布的時候做一些手腳。
首先我們點擊頁面右上角的 發布-生成HTML文件…
為了確保以后用來查看線框圖的電腦在斷網的情況下同樣可以正常查看,我們需要采用離線字體的方式完成HTML文件的生成。如下圖所示,添加Web字體時,我們選擇@font-face,并在具體參數處填寫:
font-family: FontAwesome;
src:url(‘fontawesome-webfont.ttf’) format(‘truetype’);
然后將TrueType字體庫放入HTML文件所在的文件夾里面,如下圖所示:
然后我們將整個文件夾拷給前端同學他們就可看到了,如下圖所示:
為了確保我們無法訪問Font Awesome官網時也可以快速復制圖標貼入Axure中,我們可以將 Font Awesome 的CheatSheet 備份為PDF文件。在Chrome瀏覽器中,輸入 http://fontawesome.io/cheatsheet/,然后鼠標右鍵選擇 打印,如下圖所示:
注意: 如上圖紅框所示,請將目標打印機選擇為”另存為PDF“,只有這樣生成的PDF文件中的 圖標才是可以復制的。
Font Awesome圖標使用在幾乎任何地方,只需要使用CSS前綴 fa ,再加上圖標名稱(前端同學可以查看設計同學線框圖中的注釋)。 Font Awesome是為使用內聯元素而設計的。我們通常更喜歡使用 <i> ,因為它更簡潔。 但實際上使用 <span> 才能更加語義化。如下所示:
<iclass=”fa fa-hand-o-right”></i>fa-hand-o-right
由于藕不是前端攻城獅,所以不敢班門弄斧了,具體可以去網站上看看用法,如下所示:
好啦,到目前為止,大家應該很清楚Font Awesome應該如何使用了吧,快去試試吧。
本文由 @邏輯畫瘋 原創發布于人人都是產品經理。未經許可,禁止轉載。
歌出了一個開源的、跨平臺的、可定制化的機器學習解決方案工具包,給在線流媒體(當然也可以用于普通的視頻、圖像等)提供了機器學習解決方案。
它提供了手勢、人體姿勢、人臉、物品等識別和追蹤功能,并提供了C++、Python、JavaScript等編程語言的工具包以及iOS、Android平臺的解決方案,今天我們就來看一下如何使用MediaPipe提供的手勢識別來寫一個Python代碼識別手勢中的數字:0-5 。
電腦需要安裝Python3,建議安裝Python3.8.x的版本。除此之外,還需要安裝Opencv-Python、MediaPipe以及numpy幾個工具包,可以使用pip進行安裝:
準備6張圖片,分別是6張手的圖片。
編寫一個handutil.py模塊,這個handutil模塊有一個HandDetector類,提供了檢測手勢、獲取手勢數據的方法。代碼如下,詳細解釋看代碼注釋:
編寫另一個fingercount.py代碼,在這個代碼中,調用handutil.py的HandDetector類提供的方法,獲取手勢數據,每個手勢數據由3個數字組成:id, x, y,分別代表手勢中某個點以及這個點的x\y坐標位置。下圖是手勢識別中每個id對應手的部位說明。
從上圖可知:4, 8, 12, 16, 20分別代表大拇指、食指、中指、無名指和小指的指尖。完整代碼如下:
運行代碼,我們可以看到能夠識別手勢中的數字,并顯示對應的圖片和數字了
————————————————
感謝大家的支持和喜歡,小編會每天分享更多Python學習的干貨知識給大家,所以大家別忘了關注小編哦。
記得關注哦~
更多Python爬蟲、數據分析、辦公自動化、全棧開發、人工智能學習資料@林夕編程關鍵字【資料】領取
版權聲明:本文為CSDN博主「不加班的程序員丶」的原創文章
原文鏈接:https://blog.csdn.net/lh9987/article/details/117573482
文來源:Lemberg Solutions Ltd
作者:Zahra Mahoor、Jack Felag、 Josh Bongard
「雷克世界」編譯:嗯~阿童木呀、KABUDA
現如今,與智能手機進行交互的方式有很多種:觸摸屏、硬件按鈕、指紋傳感器、視頻攝像頭(如人臉識別)、方向鍵(D-PAD)、手持設備控制等等。但是我們該如何使用動作識別功能呢?
我們可以舉一個例子來說明這個問題,比如當你持手機將其快速移動到左側或右側時,可以非常精確地顯示出想要切換到播放列表中下一首或上一首歌曲的意圖;或者,你可以將手機快速向上向下翻轉,從而刷新應用程序內容。引入這樣的交互看起來是非常有發展前景的,并且為用戶體驗增添了一個新的層面。接下來,本文將介紹該如何使用機器學習和Android上的Tensorflow庫實現這一目標。
對于我們的目標,我們可以將其描述為希望手機能夠識別左右的快速動作。
我們希望能夠在一個單獨的Android庫中完成這一實現,以便它能夠容易地集成到任何其他應用程序中。
這些動作可以通過手機上的幾個傳感器進行捕獲:加速度計、陀螺儀、磁力計等等。隨后,這些批量動作可以用于機器學習算法,以便進行訓練和后續識別。
為了捕捉數據,我們將開發一個Android應用程序。預處理和訓練過程將在Jupyter Notebook環境的PC上使用Python和TensorFlow庫執行。手勢識別將在一個Android應用程序演示中執行,并生成訓練數據。最后,我們將開發一個即時可用的Android庫,用于手勢識別,而且可以很容易地集成到其他應用程序中。
下面是有關該實現過程的高級計劃:
1.在手機上收集數據
2.設計和訓練神經網絡
3.將神經網絡導出到手機中
4.開發一個測試Android應用程序
5.開發Android庫
實現
?準備數據
首先,我們來明確一下什么樣的傳感器和什么樣的數據可以用于描述我們的動作手勢。為了準確地描述這些手勢,我們應該使用加速度計和陀螺儀。
加速度計傳感器明顯是用于測量加速度,然后測量運動:
加速度計有一個有趣的細微差別;它不僅測量設備本身的加速度,而且測量地球重力的加速度,大約為9.8m/s2。這意味著放在桌子上的手機加速度向量的大小將等于9.8。這些值不能直接使用,而應從地球重力值中提取。這并不是一件容易的任務,因為它需要磁力計和加速度計傳感器值的融合。不過幸運的是,Android已經有了特定的線性加速度傳感器以執行這樣的計算并返回正確的值。
另一方面,陀螺儀將用于測量旋轉:
我們試著找出將與我們的手勢相關聯的值。顯然,在加速度計(即線性加速度計)中,X和Y值將高度描述手勢,而加速度計的Z值不太可能受到我們手勢的影響。
至于陀螺儀傳感器,似乎只有Z軸會受到手勢的輕微影響。不過,為了簡化實施,我們可以不將該值考慮在內。在這種情況下,我們的手勢檢測器不僅能夠識別手機在手中的移動,而且還能識別出其沿著水平線的移動——例如在桌子上。這大概不是一個太大的問題。
所以,我們需要開發一個能夠記錄加速度計數據的Android應用程序。
我開發了一款這樣的應用程序,下面是記錄的“向右移動”手勢的屏幕截圖:
正如你所看到的那樣,X軸和Y軸對手勢的反應非常強烈。 Z軸也有反應,但正如我們所說的那樣,我們沒有將其考慮在內。
這是“左移”手勢:
請注意,X值與前一手勢的值幾乎相反。
還有一點需要提及的是數據采樣率。這反映了數據采樣的頻率,并且直接影響每個時間間隔的數據量。
另一個要考慮的是手勢持續時間。這個值,就像這里許多其他值一樣,應該根據經驗對其進行選擇。我所建立的那個手勢持續時間不超過1秒,但為了讓事情進行得更為順利,我把它四舍五入到了1.28秒。
我選擇的數據采樣率是每個選定的持續時間內128點,這將產生10毫秒的延遲(1.28 / 128)。這個值應該被傳遞給registerListener(https://developer.android.com/reference/android/hardware/SensorManager.html#registerListener%28android.hardware.SensorEventListener,%20android.hardware.Sensor,%20int%29)方法。
因此,這個想法就是訓練一個神經網絡,用以在加速度傳感器中的實時數據流中識別這些信號。
所以,接下來,我們需要記錄一系列手勢并將其導出到文件。當然,相同類型的手勢(右側或左側)應該使用相同的標簽進行標記。我們很難事先說出需要多少樣本來訓練這個網絡,但這可以通過訓練結果進行確定。
通過點擊數據,樣本持續時間將自動高亮顯示:
現在,“保存”按鈕啟用,點擊它將自動把已選項保存到工作目錄中的文件。文件名將以“{label} _ {timestamp} .log”的形式生成。可以使用應用程序菜單來選擇工作目錄。
另外請注意,保存當前選擇后,將自動選擇下一個手勢。下一個手勢的選擇是使用一個非常簡單的算法實現的:找到其絕對值大于3的第一個X條目,然后返回20個樣本。
這種自動化過程使我們能夠快速保存一系列樣本。對于每個手勢我們記錄了500個樣本。保存的數據應該被復制到一臺PC上以進行進一步處理。 (直接在手機上進行處理和訓練看起來很有發展前景,但是Android的TensorFlow目前不支持訓練)。
在前面提供的截圖中,數據范圍大約為±6。但是,如果你更有力地揮動手機,它可以達到±10。對數據進行正則化操作比較好,從而使得范圍為±1,這更適合神經網絡數據格式。我只是把所有的數據除以一個常數系數,我通常使用的是9。
開始訓練之前可以執行的下一步是過濾數據以消除高頻振蕩。這種振動與我們的手勢無關。
有很多方法可以過濾數據。一種是基于移動平均值(https://en.wikipedia.org/wiki/Moving_average)框進行過濾。
請注意,X數據的最大值現在是原來值的一半。由于我們將在識別過程中對實時數據執行相同的過濾,所以這應該不成問題。
改善訓練的最后一步是數據增強(data augmentation)。該過程通過執行一些操作擴展了原始數據集。在我們的例子中,我簡單地將數據左右移動了幾個點:
?設計一個神經網絡
設計一個神經網絡并不是一個簡單的任務,需要一些經驗和直覺。另一方面,神經網絡在某些任務中是眾所周知的,而且你可以簡單地對現有網絡做些調整。我們的任務與圖像分類任務非常相似,輸入可以被視為高度為1像素的圖像(這是真實的——第一個操作是將二維數據[128列x 2信道]的輸入轉換為三維數據[1行x 128列x 2信道])。
所以,神經網絡輸入是[128,2]。
神經網絡輸出是長度等于標簽數量的向量。在我們的例子中是[2]。數據類型是雙精度浮點數。
這里是神經網絡的示意圖:
這里是通過TensorBoard獲得的詳細原理圖:
該示意圖包含一些僅用于訓練的輔助節點。之后,我將提供一個干凈的、優化后的圖片。
?訓練
訓練將在具有Jupyter Notebook環境的PC上使用Python和TensorFlow庫進行。可以使用以下配置文件在Conda環境中啟動Notebook。以下是一些訓練超參數(hyperparameters):
Optimizer: Adam
Number of training epochs: 3
Learning rate: 0.0001
數據集按照7/3的比例被分為訓練集和驗證集。
訓練質量可以通過訓練和測試精確度值來控制。訓練的精確度應該接近但不能達到1。如果值太低,則表示識別率低且不準確,并且過高的值將導致模型過度擬合,并且可能在識別期間引入一些偽像,如非手勢數據的非零識別評估。良好的測試精度可以證明:一個訓練有素的模型可以識別不可見的早期數據。
訓練日志:
(‘Epoch: ‘, 0, ‘ Training Loss: ‘, 0.054878365, ‘ Training Accuracy: ‘, 0.99829739)
(‘Epoch: ‘, 1, ‘ Training Loss: ‘, 0.0045060506, ‘ Training Accuracy: ‘, 0.99971622)
(‘Epoch: ‘, 2, ‘ Training Loss: ‘, 0.00088313385, ‘ Training Accuracy: ‘, 0.99981081)
(‘Testing Accuracy:’, 0.99954832)
TensorFlow圖和相關數據使用以下方法保存到文件中:
saver = tf.train.Saver()
with tf.Session() as session:
session.run(tf.global_variables_initializer())
# save the graph
tf.train.write_graph(session.graph_def, '.', 'session.pb', False)
for epoch in range(training_epochs):
# train
saver.save(session, './session.ckpt')
完整的notebook代碼可以在這里查看:
https://github.com/ryanchyshyn/motion_gestures_detection/blob/master/Python/training.ipynb
?輸出神經網絡
上一部分展示了如何保存Tensor Flow數據。圖形保存到“session.pb”文件中,訓練數據(權重,偏差等)被保存到一批“session.ckpt”文件中。這些文件可以足夠大:
session.ckpt.data-00000-of-00001 3385232
session.ckpt.index 895
session.ckpt.meta 65920
session.pb 47732
表格和訓練數據可以被凍結,并轉化成適合在移動設備上運行的單個文件。
為了凍結它,需要將tensorflow / python / tools / freeze_graph.py文件復制到notebook目錄中,然后運行以下命令:
python freeze_graph.py --input_graph=session.pb \
--input_binary=True \
--input_checkpoint=session.ckpt \
--output_graph=frozen.pb \
--output_node_names=labels_output
生成的文件比之前的文件要小,但就單個文件而言,仍然足夠大:
frozen.pb 1130835
這是TensorBoard中的模型:
tensorflow / python / tools / import_pb_to_tensorboard.py文件復制到notebook目錄并啟動:
python import_pb_to_tensorboard.py --model_dir=frozen.pb --log_dir=tmp
其中frozen.pb是一個模型文件。
現在,啟動TensorBoard:
tensorboard --logdir=tmp
有幾種方法可以為移動環境優化模型。想要運行所描述的命令,需要從源代碼編譯TensorFlow:
1.刪除未使用的節點和常規優化。執行:
bazel build tensorflow/tools/graph_transforms:transform_graph
bazel-bin/tensorflow/tools/graph_transforms/transform_graph --in_graph=mydata/frozen.pb --out_graph=mydata/frozen_optimized.pb --inputs='x_input' --outputs='labels_output' --transforms='strip_unused_nodes(type=float, shape="128,2") remove_nodes(op=Identity, op=CheckNumerics) round_weights(num_steps=256) fold_constants(ignore_errors=true) fold_batch_norms fold_old_batch_norms'
這是TensorBoard運行結果:
2.執行量化(轉換浮點數據格式信息8位數據格式),執行:
bazel-bin/tensorflow/tools/graph_transforms/transform_graph --in_graph=mydata/frozen_optimized.pb --out_graph=mydata/frozen_optimized_quant.pb --inputs='x_input' --outputs='labels_output' --transforms='quantize_weights strip_unused_nodes'
因此,與3.5 Mb的原始文件相比,輸出文件的大小為287129字節。這個文件可以在Android的TensorFlow中使用。
?演示 Android應用程序
想在Android應用程序中執行信號識別,你需要使用Android的Tensor Flow庫。將庫添加至gradle屬性項:
dependencies {
implementation 'org.tensorflow:tensorflow-android:1.4.0'
}
現在,你可以通過TensorFlowInferenceInterface類訪問TensorFlow API。首先,將“frozen_optimized_quant.pb”文件放入應用程序的“assets”目錄中 (即 “app/src/main/assets” ),并將其加載到代碼中(如:從Activity開始;但是,像往常一樣,最好在后臺線程中執行有關IO的相關操作)
inferenceInterface = new TensorFlowInferenceInterface(getAssets(), “file:///android_asset/frozen_optimized_quant.pb”);
注意如何選定模型文件
最后,看一下如何進行識別:
float[] data = new float[128 * 2];
String[] labels = new String[]{"Right", "Left"};
float[] outputScores = new float[labels.length];
// populate data array with accelerometer data
inferenceInterface.feed("x_input", data, new long[] {1, 128, 2});
inferenceInterface.run(new String[]{“labels_output”});
inferenceInterface.fetch("labels_output", outputScores);
數據是我們“黑盒”的一個輸入,應該有一個加速度計X和Y測量的平面陣列,即數據格式是[x1, y1, x2, y2, x3, y3, …, x128, y128]。
在輸出方面,我們有兩個浮點值,它們根據“左”或“右”的手勢變化,隨不同輸入值在0到1的范圍內取值。需要注意的是,這些值的總和是1。因此,舉一個例子,如果輸入信號與左或右手勢不匹配,那么輸出將接近[0.5,0.5]。為了進一步簡化,最好使用簡單的數學方法將這些值轉化為絕對值在0到1之間的數。
在運行之前,需要對數據進行過濾和正則化操作。
這里是演示應用程序的最終測試屏幕:
其中“紅色”和“綠色”的線條是實時預處理信號,黃線和青線分別屬于“固定”、“左”和“右”概率。“時間”是處理時間,非常短,這使得實時識別成為可能。(2毫秒意味著可以以500Hz的頻率運行處理,同時我們請求加速度計以100Hz的頻率進行更新)。
正如你所看到的,有一些令人驚奇的細微差別。首先,即便是“沉默”信號,也存在一些非零概率。其次,每個手勢在中心都具有長時間的“真實”識別,其值接近于1,并且在邊緣處具備較小的相反識別。
看起來,要執行準確的實際手勢識別,需要進行一些附加的處理。
?Android庫
我在一個單獨的Android庫中對輸出信號進行附加處理,實現了TensorFlow識別。以下是庫和演示應用程序。
如果在你自己的應用程序中使用它,請將庫屬性項添加至模塊gradle文件中:
repositories { maven { url "https://dl.bintray.com/rii/maven/" } }
dependencies {
...
implementation 'uk.co.lemberg:motiondetectionlib:1.0.0'
}
創建一個動作檢測器監聽器(MotionDetector listener):
private final MotionDetector.Listener gestureListener = new MotionDetector.Listener() {
@Override
public void onGestureRecognized(MotionDetector.GestureType gestureType) {
Log.d(TAG, "Gesture detected: " + gestureType);
}
};
啟用動作檢測:
MotionDetector motionDetector = new MotionDetector(context, gestureListener);
motionDetector.start();
我們通過利用TensorFlow庫,在Android應用程序上實現了對動作手勢進行識別的所有步驟:采集和預處理訓練數據、設計和訓練神經網絡、開發測試應用程序以及隨時可用的Android庫。所描述的方法可以用于其他任何識別/分類任務。生成的庫可以集成到其他任何Android應用程序中,并通過動作手勢進行升級。
*請認真填寫需求信息,我們會在24小時內與您取得聯系。