[Tutorial] Graphic User Interface (GUI)

tuane06 · 6/10/11

chào bác chủ,em vẫn đang theo dõi nhiệt tình topic của bác đây,dạo này có vẻ vắng quá,em hiện đang tập tành làm c sharp nên các bài hướng dẫn của bác rất có ích cho người mới như em,em thấy rằng trong lập trình Gui giao tiếp máy tính thì ngoài các control sẵn có của vs ra thì nên có các component hay ocx gắn vào thì sẽ làm gui pro và đẹp hơn rất nhiều,em hiện kiếm được cái ocx này http://www.mediafire.com/file/uemo36o4h5ea95n/axindicl.zip,nó là một dạng indicator như bardled ấy nhìn đã lắm,trong đó có file reg em đã chạy theo hướng dẫn và add vào trong toolbox của vs20010 được rùi,nhưng ko hiểu sao lúc lấy ra xài lại ko được,bác chủ và bác nào đọc được topic này giúp em nhé,thanks cả nhà

norimo · 13/2/12

bài viết quá hay và bổ ích. Cảm ơn anh chị rất nhiều.

kidpro1412 · 1/4/12

chào tất cả mọi người chào A lee
Trước tiên mình là member mới hi mình đang làm cái đề tài về giao tiếp cổng COM với vi xử lý và vẽ đồ thị
Nói chung mình đã làm được nhưng mình muốn hỏi rằng mình muốn đưa dữ liệu này và dồ thị hiênt thị lên web dùng aspnet
Mọi người cho mình hướng giải quyết được không
demo của mình:

Lee · 1/4/12

Woa !!! Good đó.

Để đưa lên web em thử như thế này (anh chưa làm :d):
Bước 1:
- Tạo 1 project web asp.
- Đưa các phần tử giao diện vào web ( y chang window form --> không khác là mấy )
- Code : Có thể đem code bên window form qua.
- Tìm host free có hổ trợ asp, up cái web vừa làm gửi lên.
Bước 2:
- Làm 1 window form, thu thập dữ liệu từ vi điều khiển qua UART
- Đồng thời có chức năng giao tiếp ethernet, truyền dữ liệu nhận được lên host (HTTP protocol, FTP protocol...)

Như vậy là xong. Nhưng có vẻ là rất phức tạp :d

Có 1 thằng đã làm xong cái web, giao diện đẹp và nó vẫn đang phát triển EMONCMS. Web được viết bằng PHP, cơ sở dữ liệu MySQL. Em có thể lên web của nó tham khảo.
http://openenergymonitor.org/emon/node/90

Cái form nhận UART và truyền lên host này thông qua HTTP thì anh làm rồi. Nhưng giờ ko biết nó nằm ở đâu trong máy tính. :d

Có thời gian thì em thử cả 2 nhé.

kidpro1412 · 1/4/12

Em cảm ơn anh e sẽ nghiên cứu theo hướng đó
Thế cái này mình có cần làm theo kiểu cơ sở dữ liệu không
E chưa hiểu cái đoạn mà winfor lấy dữ liệu từ cổng com rồi đẩy lên web asp
Nó có liên tục được ko anh
vd đưa lên web ở 1 server mới thì có khác ko
e đang rất cần lời chỉ giáo hj e cảm ơn a nhiều

Lee · 2/4/12

Thứ nhất: Vấn đề database

- Khi đưa lên web, có rất nhiều người sẽ truy cập vào web để xem dữ liệu (có thể dạng log hoặc graphic) nên đòi hỏi phải có 1 database trên server, lưu trữ các thông tin mà em up lên. Server sẽ lấy các thông tin này hiện thị cho người xem. --> Database hiện nhiên là phải có.

Thứ hai : Tính liên tục

- Dữ liệu em truyền lên server sẽ là liên tục, database sẽ được cập nhật liên tục. Tuy nhiên khi hiển thị cho người xem, em phải viết code để refresh cái web liên tục (khi down 1 web về thì nó là "tĩnh" rồi). Cái này có thể nghiên cứu, tìm hiểu AJAX hoặc nhưng công nghệ nào đại loại thế.

Thứ ba: uart và ethernet

- Trong window form, em cần phải làm cả 2 cái chuẩn giao tiếp này. Tut về mỗi thằng thì đã có trên forum rồi, em chỉ việc merge code lại thôi. Trong .Net 4.0 nó đã hổ trợ có HTTP rồi (không biết FTP có ko, em coi thử). Nếu giao tiếp với server qua HTTP hay FTP thì có thể dùng các thư viện trong .Net, không cần làm TCP Client.
- Nếu dùng TCP Client, thì trước tiên khởi tạo socket này nọ như trong tut hướng dẫn. Còn Request gửi lên server phải theo HTTP hay FTP. Em xem wiki về 2 protocol này nhé.
- Khi có ngắt uart trên window form, em lấy dữ liệu nhận được này, đưa qua bên ethernet. Ethernet sẽ gọi hàm send(data) chẳng hạn. Hàm này có nhiệm vụ truyền dữ liệu đó lên server.

kidpro1412 · 2/4/12

Cam on anh e da bat dau co y tuong nhug cho e hoi la trong net 3.5 vi e dung vs 2008 co ho tro ftp hay http ko ah
Anh xem y tuong nay cua e duoc ko ah
Truyen nhan rs232 duoc ca gia tri se duoc luu thanh 1 file database
File database nay se duoc day len web va web cap nhat gia tri nhug co 2 van de ah
Thu nhat la du lieu duoc day ra lien tuc nhu the thi file cua e co bi nang qua ko
Thu 2 la cach thuc day len web khoang sau bnhieu fut thi no cap nhat mot lan.va cach thuc de cai web no import cai data moi
Hay la minh truc tiep day gia tri vao data luon
De mai e muon laptop ve se tim hieu ve asp net
E co kien thuc ben php va lap trinh web nhug chac ko ug dug vao day dc

Lee · 2/4/12

Em check thử xem trong 3.5 co Http v ftp chưa, nhưng anh nghĩ là có rồi. Em có thể tra cứu trên http://www.codeproject.com/

Thường thì ngưòi ta truyền dữ liệu lên host, chứ ko truyền cả cái database.

Nếu em biết về PHP rồi thì thử xem cái EMONCMS, web và database, người ta thiết kế hết rồi. Mình chỉ việc download web của nó về và up lại lên host của mình, xài. :d
Web được viết theo mô hình MVC. Cái web nó viết khá tốt, thời gian cập nhật khá tốt. Em chỉ việc gửi dữ liệu từ window form lên server, việc hiển thị và cập nhật dữ liệu, vẽ đồ thị, log... Cái web đó nó viết hết rồi.

Chúc may mắn.

nguyenquoctrung-hhk · 11/4/12

ở bài 8 : Read/ Write data qua cổng com. vậy ở code này là mình chỉ giới hạn ở việc truyền ký tự thôi phải không anh Lee? còn nếu muốn truyền 1 file giữa 2 máy tính thì mình phải xây dựng giao thức cho nó. Vì lý do là em làm thực hành môn truyền số liệu, truyền file giữa 2 máy tính qua cổng COM.
về mặt lý thuyết là em dùng giao thức Kermit cho đơn giản,cách truyền theo từng bước :
+ chia nhỏ file ra thành các frame
+ đóng gói tứng frame lại theo quy định của giao thức Kermit
+đưa tới COM và truyền tuần tự
+bên nhận sẽ phản hổi lại nhận được hay chưa nhận được
+bên nhận, nhận đủ số lượng khung và tiến hành kết nối các khung thành 1 file hoàn chỉnh và lưu dưới dạng text.
mặc dù hiểu lý thuyết nhưng không biết làm thế nào để thi hành lệnh tương ứng trong C#, lên mạng tìm thì kho ứng dụng của C# thì bao la, không biết đâu là cái mình cần tìm. vì thực sự em không rành về C# nên gặp rất khó khăn, thời gian quá ngắn nên không thể nào tìm hiểu cặn kẽ về ngôn ngử, chỉ còn cách học thuật biết những gì mình đang làm, mong được sự giúp đỡ của anh lee cũng như tất cả các bạn.
nếu anh, chị có tài liệu về mảng này có thể gửi cho em học tập, em xin cám ơn

kidpro1412 · 12/4/12

Anh lee ơi e đã download emoncms3 về cài đặt thành công nhưng thực sự e ko hiểu cách thức hoạt dộng của nó
A có rành về cái này ko bảo e ah
E ko hiểu cách thức nó lấy dữ liệu từ cở sở dữ liệu như nào và hiện thị hay vẽ đồ thị
Dữ liệu có phỉa sắp xếp theo 1 kiểu nào không ah

Lee · 13/4/12

nguyenquoctrung-hhk said:
ở bài 8 : Read/ Write data qua cổng com. vậy ở code này là mình chỉ giới hạn ở việc truyền ký tự thôi phải không anh Lee? còn nếu muốn truyền 1 file giữa 2 máy tính thì mình phải xây dựng giao thức cho nó. Vì lý do là em làm thực hành môn truyền số liệu, truyền file giữa 2 máy tính qua cổng COM.
về mặt lý thuyết là em dùng giao thức Kermit cho đơn giản,cách truyền theo từng bước :
+ chia nhỏ file ra thành các frame
+ đóng gói tứng frame lại theo quy định của giao thức Kermit
+đưa tới COM và truyền tuần tự
+bên nhận sẽ phản hổi lại nhận được hay chưa nhận được
+bên nhận, nhận đủ số lượng khung và tiến hành kết nối các khung thành 1 file hoàn chỉnh và lưu dưới dạng text.
mặc dù hiểu lý thuyết nhưng không biết làm thế nào để thi hành lệnh tương ứng trong C#, lên mạng tìm thì kho ứng dụng của C# thì bao la, không biết đâu là cái mình cần tìm. vì thực sự em không rành về C# nên gặp rất khó khăn, thời gian quá ngắn nên không thể nào tìm hiểu cặn kẽ về ngôn ngử, chỉ còn cách học thuật biết những gì mình đang làm, mong được sự giúp đỡ của anh lee cũng như tất cả các bạn.
nếu anh, chị có tài liệu về mảng này có thể gửi cho em học tập, em xin cám ơn

Serial Port trong .net có thể truyền nhận dữ liệu theo : byte, mảng byte, chuỗi ký tự (string).
Đó là các method trong serial port.

Em có thể làm như sau:
- đọc từ dòng của file cần truyền ( sử dụng streamreader --> có thể tham khảo bài xuất nhập ra file) ra 1 biến string
- Dây dựng 1 method đóng gói cái dòng vừa đọc theo Kermit. Vd, public void Encode_Kermit_Protocol(string par_lineOfFile_str);
- Xây dựng 1 method mã hóa ngược lại. Vd, public string Decode_Kermit_Protocol(string par_frame_str);
- Lấy cái string vừa đọc dc, lưu vào file (dùng streamwriter, dùng method append của class này để lưu)

Anh ko học môn truyền số liệu, nên ko rành về kermit, nhưng theo anh nghĩ có thể gửi trực tiếp các string qua COM (có thể bỏ qua encode và decode).

Có 1 cách khác để thể truyền file:
- Sử dụng class Stream ( anh chỉ recommend thôi, cái này anh chưa làm, chỉ nghe nói là hình như làm dc :d, em thử nhé )
- Giao thức FTP (File Transfer Protocol). Code cái này có thể tham khảo trên mạng. ( anh đã từng dùng nó, còn code để tạo ra nó thì chưa bao giờ làm, em thử lun nhé :d)

Nếu có phát hiện gì mới, em có thể post lên forum, hoặc liên hệ anh qua Lee@payitforward.edu.vn (

quảng cáo email clb)

P/S :Hôm nay tốt nghiệp, vừa vui vừa bùn, lên lướt qua forum chơi giải sầu :d

tungbk · 13/4/12

Đã quá! Cố gắng tu hành, phấn đấu năm sau được cái mail

. (Thích quá spam tí)

Lee · 13/4/12

kidpro1412 said:
Anh lee ơi e đã download emoncms3 về cài đặt thành công nhưng thực sự e ko hiểu cách thức hoạt dộng của nó
A có rành về cái này ko bảo e ah
E ko hiểu cách thức nó lấy dữ liệu từ cở sở dữ liệu như nào và hiện thị hay vẽ đồ thị
Dữ liệu có phỉa sắp xếp theo 1 kiểu nào không ah

Code website được viết theo mô hình MVC (model-view-control). Đại khái như vầy:
- View : sẽ chứa code hiển thị giao diện ( trong web thì nó sẽ chứa các dòng code html )
- Model : sẽ chứa các hàm, các hàm này sẽ tác động làm theo đổi view theo 1 hướng nào đó, model cũng có thể là các hàm thao tác với database
- Control : sẽ chứa các dòng lệnh gọi các hàm trong model theo giải thuật của mình, và trả kết quả về là view.

Một control có thể điều khiển các control nhỏ hơn. Như Emoncms, có 1 control lớn nhất nằm ở file index. Em có thể tìm các control ở thư mục control, model ở thư mục model, view ở thư mục view.

Web nào cũng cần phải có 1 core ( cho cả web hoạt động, giống như vi điều khiển vậy đó ).

Để vẽ đồ thị, thì nó sẽ dùng các hàm trong model, thao tác database và đưa giá trị về ( control sẽ điều khiển việc này ), giá trị đó sẽ dc đưa vào view để hiển thị.

Hơi lằng nhằng nhỉ.

Toàn bộ web đó dc viết bằng PHP, em nghiên cứu cú pháp cơ bản của PHP, cộng với hiểu cái mô hình của MVC là hiểu dc code.

Cách truyền dữ liệu lên server phải theo cú pháp của json (tại cái web này nó làm vậy) + api_key (read or write) ( cũng do cái web này nó làm vậy)

Từ từ ngâm cứu nhé, nói chung version 3 của nó cũng hay, có thêm cái dashboard.

Có phát hiện gì mới thì bay vô forum up lên liền, ko là quên đó . :d --> hoặc liên hệ mail Lee@payitforward.edu.vn ( quảng cáo email clb, nếu không gửi vô mail này dc thì em liên hệ admin

)

P/S : hôm nay tốt nghiệp, vui bùn lẫn lộn, lên forum chơi, ai dè có câu hỏi :d

kidpro1412 · 14/4/12

anh ơi tức là em không hiểu cái cách thức hoạt đoongj của vmc đấy
Vd nha dữ liệu từ cổng com e tách ra đc giá tri nhiệt độ
thì làm thế nào để cái web nó hiwwur giá trị cổng com va vẽ
E thấy trong mục emoncms3 chỉ có mấy mục như input feed account và dáhboard
Mình vào đâu để viết code hiển thị vẽ đồ thị
cấu trúc lệnh nữa e ko hiểu
heheh mong a trợ giúp

kidpro1412 · 14/4/12

Khi em cài emoncms3 ra được 1 trang vd giống như này
http://www.toddknapek.com/emoncms3/
vd anh dang nhap với nick
test123
pass:test123
e được như thế nhưng ko biết làm sao nữa
Sau khi em tạo tài khoản vào thì có 1 số mục thôi
E không hiểu cơ ché
Cái này đợc dữ liwwuj từ data hay là có hỗ trợ đọc từ com ko a

Lee · 14/4/12

kidpro1412 said:
anh ơi tức là em không hiểu cái cách thức hoạt đoongj của vmc đấy
Vd nha dữ liệu từ cổng com e tách ra đc giá tri nhiệt độ
thì làm thế nào để cái web nó hiwwur giá trị cổng com va vẽ
E thấy trong mục emoncms3 chỉ có mấy mục như input feed account và dáhboard
Mình vào đâu để viết code hiển thị vẽ đồ thị
cấu trúc lệnh nữa e ko hiểu
heheh mong a trợ giúp

Cái này em phải coi tutorial hướng dẫn upload dữ liệu lên server trên trang emoncms để hiểu rõ hơn.

Sau khi đăng nhập cái web của em, mở tab API, em sẽ thấy dòng này:

http://www.toddknapek.com/emoncms3/api/post?apikey=149e1900494f425b06ed506426b1045d&json={power:252.4,temperature:15.4}

Đây chính là cách để upload dữ liệu lên server, trong đó : apikey được tạo ra ngay trong tab API. Có API keyread và API keywrite, muốn upload thì dùng api keywrite.

Từ khoá json là bắt buộc. Ở giữa { và } là dữ liệu của mình. Ở đây, em gửi 2 dữ liệu là power và temperature với giá trị lần lượt là 252.4 và 15.4

Em chỉ quan tâm cách gửi dữ liệu lên server là dc rồi, các công đoạn còn lại như vẽ, refresh web... đã dc trang web hổ trợ, ko phải lo. Các feature khác của web như log, input... em có thể tham khảo trên trang emoncms, coi nó là cái gì.

Túm lại, ta cần quan tâm cách upload lên server và thực hiện đơn giản theo các bước sau:
- Khởi tạo cổng Com cho truyền nhận dữ liệu ( đóng/mở cổng, ngắt nhận..), khởi tạo 1 TCP CLient kết nối tới host ( IP của host, port là 80)
- Lấy dữ liệu đọc được từ uart đưa vào 1 biến nào đó, vd: power ( kiểu double)
- Dùng tcp client để truyền lên host, theo HTTP protocol.

Rất may là anh vừa tìm ra cái project xưa kia

, để truyền lên host, như sau:

private void sendit_Click(object sender, EventArgs e)
{
string s = "GET /api/post?apikey=044f7d72f32f442b9178a2da650cda2c&json={power:1.23} HTTP/1.1\r\nHost: nckh.byethost6.com\r\n\r\n";
byte[] message= Encoding.ASCII.GetBytes(s);
client.BeginSend(message, 0, message.Length, 0,new AsyncCallback(SendData), client);
}

Cái cú pháp ở biến s, bắt buộc phải là như vậy, em chỉ việc thay apikey wrire, giá trị ở giữa 2 dấu {} , tên host là ok
Anh cũng vừa tìm ra file word chứa thông tin anh tìm hiểu về emoncms, em có thể down tại link đây.
Cái này là emoncms version 2.0

Chúc em thành công.

kidpro1412 · 15/4/12

Anh nhiệt tình quá em cảm ơn anh nhiều e sẽ tìm hiểu có gì lại làm khó anh rồi hj

kidpro1412 · 15/4/12

Cho em hỏi 2 vấn đề ah
1 1 vd có code upload lên như này

private void UploadSingleMeasurement(string inputName, float value)
{
try
{
string url = apiURL_ + "?apikey=" + writeAccessId_ + "&json={" + inputName + ":" + value + "}";
var request = (HttpWebRequest)WebRequest.Create(url);
request.Method = "PUT";
request.ContentType = "text/plain";
request.ContentLength = 0;
HttpWebResponse response = (HttpWebResponse)request.GetResponse();
LogInfo("HTTP Response: " + response.StatusCode.ToString());
response.Close();
}
catch (Exception e)
{
LogError(e.Message);
}
}

Em thấy nó hơi khác ở code anh vì e thấy thế này nó không biết host nào nhỉ hehe
và 1 vấn đề là vd khi mình nhận dc đẩy lên web
Thì ở trên giao diện web làm sao để vẽ đồ thị ah
và nó hiện thị ở dâu vì trang chủ có mỗi chỗ đang ký đăng nhập
Có phải viết lệnh nào để hiện thị vẽ đồ thị ko a

kidpro1412 · 15/4/12

Anh ơi vui quá e chưa thử test từ cổng COm e thử test đọc file thì web đã hiện giá trị nhiệt độ thay đổi

Nhưng làm thế nào để vẽ lên đồ thị đây a
e chỉ test ở localhost chưa thử test ở 1 host trên mạng chắc sẽ khả quan

Lee · 15/4/12

Hj, version3 này có nhiều chổ thay đổi trong giao diện, anh chưa xem qua. Em tìm hiểu thêm trên web của nó nhé.

Code khác vì :
- code của anh là thực hiện TCP Client, và gửi message theo HTTP protocol
- code kia là dùng thẳng HTTP protocol có sẵn trong thư viện

Theo anh được biết, trong web của nó, có 1 thư mục là Vis, nó chứa code để hiện thị đồ thị. Nó sẽ đọc dữ liệu từ database. Em tìm hiểu cách để visible các trang đồ thị đó lên thôi, phần còn lại nó lo rồi.

Túm lại: rất phức tạp vì khoa điện không chuyên về web, database --> ko biết sql, php,html, MVC,... nên rất khó tìm hiểu. Em cố gắng đọc các tài liệu trên web cũng như cái file word anh có gửi trước, xem có thấm chút nào ko.

Cố lên nhé.

[Tutorial] Graphic User Interface (GUI)

Trứng gà

Trứng gà

Trứng gà

Cố Vấn CLB

Trứng gà

Cố Vấn CLB

Trứng gà

Cố Vấn CLB

Thành Viên PIF

Trứng gà

Cố Vấn CLB

Cố Vấn CLB

Cố Vấn CLB

Trứng gà

Trứng gà

Cố Vấn CLB

Trứng gà

Trứng gà

Trứng gà

Cố Vấn CLB