Bảng điều khiển LED thông qua internet
4.3 CSS CSS chữ viết tắt “Cascading Style Sheet”, kiểu thiết kế sử dụng nhiều lớp định dạng chồng lên CSS tổ chức World Wide Web giới thiệu vào năm 1996 Cách đơn giản để hiểu CSS coi phần mở rộng HTML để giúp đơn giản hoá cải tiến việc thiết kế cho trang web Một tiện ích CSS định nghĩa Style (kiểu dáng, định dạng ….) lần trình duyệt áp dụng Style nhiều lần đoạn văn 4.3.1 Ưu điểm CSS CSS tách riêng phần định dạng khỏi nội dung trang web, thuận tiện thay đổi giao diện trang web CSS sợi xuyên suốt trình thiết kế website cho phép nhà thiết kế kiểm soát toàn giao diện, kiểu cách đặt nhiều trang hay nhiều đối tượng lần định nghĩa Để thay đổi tổng thể hay nhiều đối tượng có style, cần thay đổi style tất thành phần áp dụng Style thay đổi theo Nó giúp tiết kiểm công sức nhiều Do định nghĩa style tách riêng khỏi nội dung trang web, chúng trình duyệt tải lần sử dụng cho nhiều lần, giúp trang web nhẹ chạy nhanh 75 4.3.2 Các đặc tính CSS CSS quy định cách hiển thị thẻ HTML cách quy định thuộc tính thẻ (font chữ, màu sắc) Để thuận tiện đặt toàn thuộc tính thẻ vào file riêng có phần mở rộng “.css” CSS phá vỡ giới hạn thiết kế Web, cần file CSS quản lý định dạng layout nhiều trang web khác Các nhà phát triển Web định nghĩa sẵn thuộc tính số thẻ HTML sau dùng lại nhiều trang khác Có thể khai báo CSS nhiều cách khác Có thể đoạn CSS phía thẻ … tạo file riêng chèn vào tài liệu HTML chèn trực tiếp vào đâu tài liệu HTML 4.3.2.1 Cú pháp CSS Css_selector_1{ Thuộc_tính_1 : giá_trị_của_thuộc_tính_1; Thuộc_tính_2 : giá_trị_của_thuộc_tính_2; ……… Thuộc_tính_n : giá_trị_của_thuộc_tính_n; } Css_selector_2{ Thuộc_tính_1 : giá_trị_của_thuộc_tính_1; Thuộc_tính_2 : giá_trị_của_thuộc_tính_2; ……… Thuộc_tính_n : giá_trị_của_thuộc_tính_n; } Css_selector_3{ Thuộc_tính_1 : giá_trị_của_thuộc_tính_1; Thuộc_tính_2 : giá_trị_của_thuộc_tính_2; ……… Thuộc_tính_n : giá_trị_của_thuộc_tính_n; } 4.3.2.2 Ví dụ minh hoạ mã CSS Body{ Background: #ffffff; /*Nền có màu trắng*/ Color: blue; /*Chữ có màu xanh*/ } 76 4.3.2.3 Thứ tự xếp lớp Tuỳ vào cách đặt khác mà mức độ ưu tiên cho style khác Mức độ ưu tiên tuân theo thứ tự sau: - Style nội tuyến - Style đặt thẻ HTML riêng biệt - Style bên – Style đặt cặp thẻ … - Style bên – style đặt file riêng có đuôi “.css” - Style theo mặc định trình duyệt 4.3.3 CSS có tính kế thừa kết hợp 4.3.3.1 Tính kế thừa Giả sử đầu file styleshet.css khai báo cho body có thuộc tính sau: Body{ Color: #000000; Font-size: 24px; } Nhưng trường hợp muốn khai báo phần tử nhỏ nằm div có id main-content: #main-content{ Color: #ffffff; Background: #000000; } Như div có id main-content không chịu ảnh hưởng thuộc tính body mà mang thuộc tính Chữ màu trắng màu đen 4.3.3.2 Tính kết hợp Có thể định nghĩa nhiều CSS thuộc tính thay phải định nghĩa riêng lẻ Ví dụ: h1,h2,h3{ Color: #c9c9c9; } Thay cho việc định nghĩa riêng tường thuộc tính sau: h1 { Color: #c9c9c9; } 77 h2 { Color: #c9c9c9; } h3{ Color: #c9c9c9; } 4.3.3.3 Tạo bảng html css Trong html để tạo bảng ta dùng Khi thực lệnh ta dẽ có bảng ta dùng thuộc tính border để chỉnh đường viền cho bảng Trong bảng có thẻ dòng bảng dòng cho bảng Ngoài có thẻ cột cho bảng Mỗi cột cho bảng Để gộp cột lại với ta dùng code sau: Câu lệnh colspan="3" nghĩa gộp cột lại thành Còn nghĩa ta gộp dòng lại thành 78 Hình 12: websever 79 Chương 5: Sơ đồ khối mô 5.1 Sơ đồ khối Khối hiển thị LCD 16x2 Thiết bị điều khiển mạch Khối điều khiển VĐK PIC18F4550 Module Ethernet ENC26j80 WEB INTERNE T Khối nguồn Bảng điều khiển trình duyệt thông qua internet Hình 1: Sơ đồ khối giao tiếp mạch 80 81 5.2 Mạch nguyên lý Hình 2: Mạch nguyên lý 82 5.2.1 Khối nguồn Hình 3: Khối nguồn 5.2.2 Khối công suất (RELAY) Hình 4: khối công suất (relay chân 12v DC/ 240v AC) 83 5.2.3 Khối hiển thị (LCD 16x2) Hình 5: khối hiển thị (LCD 16x2) 84 5.2.4 Khối Key điều khiển đèn (Nút nhấn) Hình 6: Khối Nút nhấn 5.2.5 Khối đo nhiệt độ Header giao tiếp với Module Ethernet Hình 7: LM35(nhiết độ) & Header kết nối với Module Ethernet 85 5.2.6 Khối reset, Xung thạch anh, Lọc nguồn a, b, c, Hình 8: a:xung thạch anh b: lọc nguồn c: khối reset 5.2.7 Khối Vi xử lý trung tâm (Pic 18F4550) 86 Hình 9: Khối xử lý dùng vi điều khiển PIC18F4550 5.3 Mô Phỏng Hình 10: Mô KẾT LUẬN Việc thiết kế Module Ethernet vi điều khiển PIC18F4550 nhằm ứng dụng đo lường điều khiển có ý nghĩa lớn, ứng dụng nhiều lĩnh vực đời sống xã hội công nghiệp Ngoài ra, module Ethernet vi điều khiển PIC18F4550 phục vụ cho việc học tập nghiên cứu 87 sinh viên Việc xây dựng module liên quan đến nhiều mảng kiến thức, từ kiến thức lý thuyết kiến thức thực tiễn Những kết thực • Tìm hiểu nguyên lý chung chuẩn truyền thông Ethernet IEÊ 802.3 quy định, tìm hiểu kiến thức họ giao thức TCP/IP • Kết nối thành công mạch demo với máy tính thông qua chuẩn truyền thông Ethernet • Lập trình cho mạch demo phần mềm CCS, sử dụng thư viện TCP/IP Stack cảu hang Microchip để thực điều khiển ứng dụng bật tắt đèn, hiển thị lên LCD đo tham số nhiệt độ hiển thị lên web Trong trình làm nhiều thiếu sót mặt khiến thức lên sản phẩm chưa thực hoàn thiện Trong tương lại sản phẩm phát triển thêm ứng dụng cho nhà thông minh Tài liệu tham khảo: [1] [2] [3] [4] [5] Datasheet PIC18F4550 Datasheet ENC28J60 Datasheet LM35 File Help trình biên dịch PIC C Compiler (CCS) Tài liệu tham khảo từ trang web, diễn đàn Internet: http://www.hocavr.com/index.php/vi/lectures/spi http://www.pic24.ru/doku.php/en/osa/ref/intro http://mcu.banlinhkien.vn/threads/261/ http://codientu.org http://www.dientuvietnam.net/forums/vi-dieu-khien-avr-55/giao- thuc-tcp-ip-va88 web-server-voi-avr-87172/ 89