• Thứ Năm, 02/12/2010 07:20 (GMT+7)

    Lập trình đồng hồ có 3 kim quay

    Câu hỏi :

    Tôi là kỹ sư chuyên ngành cơ điện, thực hiện đề tài "Mô phỏng Bàn điều khiển thiết bị tua bin khí" trên bàn điều khiển có đồng hồ đo các thông số của thiết bị Tua bin khí (kiểu như động cơ máy bay). Đồng hồ này gồm có 3 kim để đo 3 thông số khác nhau, tôi sử dụng 1 Form với thuộc tính BackgroundImage là mặt đồng hồ, Panel 1 cũng có BackgroundImage là kim đồng hồ thứ nhất, PictureBox là kim đồng hồ thứ 2 thì không vấn đề gì nhưng còn kim thứ 3 thì nếu sử dụng tiếp Panel 2 thì khi nạp lên đồng hồ cứ nháy liên tục trông rất xấu, còn sử dụng PictureBox thứ 2 thì PictureBox thứ nhất không nhìn thấy gì mà chỉ thấy Panel 1. Xin hỏi cách lập trình tạo 1 đồng hồ có thể điều khiển cả 3 kim quay cùng một lúc?



    Trả lời :

    Cách dễ dàng nhất để hiển thị 3 kim đồng hồ (3 ảnh bitmap độc lập) chồng lên nhau mà vẫn thấy được cả 3 kim là khai thác thuộc tính trong suốt (transparent) của các đối tượng đồ họa. Cụ thể để giải quyết vấn đề hiển thị 3 kim đồng hồ, bạn cần tiến hành các bước sau:

    1. dùng trình soạn thảo ảnh như PhotoShop, ImageReady… để soạn các file ảnh, mỗi file miêu tả ảnh của kim đồng hồ ở vị trí cần hiển thị. Thí dụ, nếu dùng PhotoShop, bạn chọn menu File.New để hiển thị cửa sổ tạo file ảnh mới. Khi cửa sổ New hiển thị, bạn nhập các thông số về ảnh trong đó có thông số "Background Contents" phải được thiết lập về giá trị "Transparent". Sau khi soạn ảnh xong, bạn phải lưu ảnh theo định dạng *.gif và ở chế độ "Transparency".

    2. dùng môi trường hỗ trợ khả năng hiển thị ảnh trong suốt như môi trường web,... Sau đây là mã nguồn của trang web DHTML chứa 3 kim đồng hồ: giờ, phút, giây nằm cùng vị trí trong trang web nhưng trên 3 lớp (layer) khác nhau. Bản thân trang web sẽ có ảnh nền là mặt đồng hồ. Trang web sẽ tạo 1 timer để đếm thời gian, mỗi lần 1 giây, khi timeout sẽ hiệu chỉnh lại từng kim đồng hồ về vị trí thích hợp:
    <html>
    <head>
    <script LANGUAGE=VBScript>
    'Định nghĩa các biến toàn cục
    dim giay
    dim idtimer

    'Thủ tục xử lý timeout
    Sub StatTrans()
    'Hiệu chỉnh giờ/phút/giây
    'để đơn giản, ở đây chỉ hiệu chỉnh giây từ 0->1->0->1...
    giay = (giay+1) mod 2
    'Hiệu chỉnh kim giờ/phút/giây theo giờ mới
    if giay = 0 then
    document.all.Hour.src = "Hour0.gif"
    document.all.Minute.src = "Minute0.gif"
    document.all.Second.src = "Second0.gif"
    else
    document.all.Hour.src = "Hour1.gif"
    document.all.Minute.src = "Minute1.gif"
    document.all.Second.src = "Second1.gif"
    end if
    end sub

    'Thủ tục khởi tạo timer
    Sub StartTimer()
    giay = 0
    'thiết lập thời gian đếm cho timer là 1000ms = 1s
    idtimer = window.setInterval("StatTrans()",1000)
    end sub
    </script>
    </head>
    <body background="bg.jpg" onload=StartTimer>
    <h3>Trang Web demo việc hiển thị 3 kim đồng hồ theo thời gian</h3>
    <img id=Hour style="position:absolute;top:60; left:10; z-index:1" src="Hour0.gif">
    <img id=Minute style="position:absolute;top:60; left:10; z-index:2" src="Minute0.gif">
    <img id=Second style="position:absolute;top:60; left:10; z-index:3" src="Second0.gif">
    </body>
    </html>

    3. Tạo 1 thư mục (website), chứa nội dung code DHTML ở trên thành file clock.htm. Bạn cũng cất các file ảnh *.gif miêu tả mặt đồng hồ và các kim đồng hồ giờ/phút/giây vào cùng thư mục vừa tạo.

    4. Chạy IE, truy xuất trang web clock.htm để xem kết quả.
    Lưu ý rằng thuật giải hiệu chỉnh giờ/phút/giây và hiển thị các kim đồng hồ mà chúng tôi viết trong đoạn code trên đây chỉ có tính demo cho việc hiển thị chúng ở chế độ "transparent". Bạn phải viết lại thuật giải này theo yêu cầu riêng của mình.

    Chuyên mục: Lập trình