App Inventor學習記錄99-電阻色碼計算器,利用標籤背景顏色來顯示電阻色碼

這次的電阻色碼計算器,使用的元件在之前都有介紹過。比較特別的地方,只有用很多個標籤元件,用切換背景顏色的方式,來顯示電阻的色碼。
記錄一下:
App Inventor學習記錄99-電阻色碼計算器,利用標籤背景顏色來顯示電阻色碼


程式的畫面是這樣的:


選擇了每一環的顏色之後,就會在上方顯示出來。


整個程式的畫面編排如下:

框起來的地方,就是這次的重點。
用了很多的標籤,透過調整標籤的寬度、高度和背景顏色,儘量做出一個示意圖。
在用下拉式選單選擇了顏色之後,再來調整對應的標籤顏色。


全部的程式如下:


第 1部份的程式碼說明:

因為這次對應的顏色有點多,所以建了很多的變數。
變數_標籤群組,把用到的標籤元件,建一個清單放在這個變數下。

因為電阻色碼表中,每一個顏色都代表著一個數字,所以接著建立:
變數_第 1環的值、變數_第 2環的值、變數_第 3環的值、
變數_第 4環的值、變數_第 5環的值、變數_第 6環的值。
用來取得該環顏色對應的值。

變數_第 4環的乘值,是用來取電阻值要乘以多少的倍數。
變數_電阻值,就是最終計算出來的結果。


變數_電阻第 1、2、3環顏色名稱,這個清單就是第 1環會出現的顏色。
變數_電阻第 1、2、3環顏色對照數值,這個對應第 1環顏色後,會出現的數值。
變數_電阻第 4環顏色名稱,這個清單就是第 4環會出現的顏色。
變數_電阻第 4環顏色對照數值,這個對應第 4環顏色後,會出現的數值。


變數_電阻第 1、2、3環顏色列表,這個清單就是標籤要使用的背景顏色列表。
變數_電阻第 4環顏色列表,這個清單就是標籤要使用的背景顏色列表。
變數_電阻第 4環乘值,這個是實際要乘的數值。


變數_電阻第 5環顏色名稱,這個清單就是第 5環會出現的顏色。
變數_電阻第 5環顏色對照數值,這個對應第 5環顏色後,會出現的數值。
變數_電阻第 6環顏色名稱,這個清單就是第 5環會出現的顏色。
變數_電阻第 6環顏色對照數值,這個對應第 5環顏色後,會出現的數值。


變數_電阻第 5環顏色列表,這個清單就是標籤要使用的背景顏色列表。
變數_電阻第 6環顏色列表,這個清單就是標籤要使用的背景顏色列表。


第 2部份的程式碼說明:

建立一個叫標籤顏色的小程式,這個程式中會使用的參數如下:
參數_選中值:用下拉式選單選擇後的選擇值,會代入這個這裡。
參數_顏色名稱清單:這裡要放第幾環的顏色名稱。
參數_顏色對應清單:這裡要放第幾環對應的顏色。
參數_顏色對應數值:這裡要放第幾環對應的數值。
參數_第幾環的值:這裡要放第幾環的值。
參數_第一個標籤:這裡要放要改背景顏色的標籤。
參數_第二個標籤:這裡要放要顯示數值的標籤。

由於這次會在下拉式選擇中,用顏色的名稱來選擇顏色,然後我們再用下拉式選單選擇後的選中值,來對應不同的清單,去取得跟顏色名稱對應的顏色及數值。


第 3部份的程式碼說明:

建立一個叫電阻值計算的程式。
在計算之後,先加入一個流程判斷式,判斷第 1環的值、第 2環的值、第 3環的值、第 4環的值、通通不等於空白的話,計算式才會起做用。如果這個有一個值是空白的話,就跳出一個對話框,顯示資料不全的訊息。

接著,再用得出的計算值,加入流程判斷,利用這個值的區間,來決定電阻值要顯示什麼文字,這裡會出現的有 kΩ、MΩ、GΩ這幾個級距。


第 4部份的程式碼說明:

當程式一執行的時候,把每一個下拉式選單的元素都設定一下。
把用來顯示電阻樣子的標籤元件的背景顏色,都設定成同一個值,這裡總共有 15個標籤。
複選盒 1的選中,設定為真。
然後把下拉式選單 5、6的可見性設定為假。
這是為了先顯示 4環的電阻。


第 5部份的程式碼說明:

下拉式選單 1選擇完成的時候,呼叫標籤顏色這個程式,把相對應的參數都放進去。
標籤 3,用來顯示電阻的第 1環的顏色。
標籤 38,用來顯示第 1環的顏色的值。
這裡比較奇怪的是,明明就已經在程式中,設定好第幾環的值,但是不知道為什麼一直看不出效果來。不得以,只好在最後面的地方,再把第幾環的值給設定一下。
之後的幾個下拉式選單也有同樣的問題存在,所以都用了同樣的做法。


第 6部份的程式碼說明:

下拉式選單 2的做法也是相同:
標籤 5,用來顯示電阻的第 2環的顏色。
標籤 40,用來顯示第 2環的顏色的值。


第 7部份的程式碼說明:

下拉式選單 2的做法也是相同,在電阻色碼表中前三環的顏色、數值是相同的,所以在這裡前三環的清單使用的項次都是一樣的,只有標籤元件不同。
標籤 7,用來顯示電阻的第 3環的顏色。
標籤 42,用來顯示第 3環的顏色的值。


第 8部份的程式碼說明:

第 4環要用的顏色不同,所以修改一下要使用的參數。
標籤 7,用來顯示電阻的第 4環的顏色。
標籤 42,用來顯示第 4環的顏色的值。

在第 4環這裡,要多取一個第 4環的乘值的數值。


第 9部份的程式碼說明:

第 5環要用的顏色也不同,所以修改一下。
標籤 11,用來顯示電阻的第 5環的顏色。
標籤 44,用來顯示第 5環的顏色的值。


第 10部份的程式碼說明:

第 6環要用的顏色也不同,所以修改一下。
標籤 13,用來顯示電阻的第 6環的顏色。
標籤 45,用來顯示第 6環的顏色的值。


第 11部份的程式碼說明:

複選盒 1是 4環,所以當這個複選盒被選上的時候,就把其它的複選盒的選中設定為假,也把其它的下拉式選單的可見性設定為假。


第 12部份的程式碼說明:

複選盒 5是 2環,同樣的把相關元件的可見性給設定一下。


第 13部份的程式碼說明:

複選盒 3是 6環,同樣的把相關元件的可見性給設定一下。


第 14部份的程式碼說明:

清除按鈕按下的時候,把每一個下拉式選單的選中項索引,都設定為 1
選中項索引,設定為 1這時候出現的值就會是 “請選擇“這個值。這部份請把畫面往上拉,看到我們一開始設定的清單內容,第一項都是請選擇。而請選擇對應的值都是空白。

然後就會在跳到當下拉式選單選擇完成的步驟。
接著再把幾個變數的值設定成空白。


第 15部份的程式碼說明:

當取值按鈕被按下的時候,呼叫電阻值計算這個程式。
電阻值至少要 4環才可能計算出值。但如果複選盒 5或複選盒 6被選上的話,會加上其它的顯示值。這個部份就用流程判斷的方式來做。


這次卡最久的地方有 2個,一個是一堆標籤的高度、寬度、顏色的配置上。
另一個則是第 5部份中,不管怎麼試都取不出來的變數_第幾環的值。

這次參考的電阻色碼計算是參考下面這兩個網站做的。
貿澤電子 電阻色碼計算器
Digi-Key 電阻色碼計算器

關於畫面,我已經儘可以做的好看一些了……

aia檔的下載連結如下:
點我下載 NO_99_Resistance.aia

之前介紹過的一些 appinventor的使用記錄,都整理在下面這個頁面上了。
APP INVENTOR學習記錄及資源整理頁面

發表迴響