python-tkinter-komponent-canvas

demo
原文

1. Canvas

1
2
3
4
5
6
7
8
9
10
canvas = tkinter.Canvas(root, height = 300, width = 300)
canvas.pack()
canvas.create_line(
0,
0,
200,
200,
fill = "red",
dash = (4,4)
)

2. tags of canvas

1
2
3
4
5
6
# the tags
item = canvas.create_line(0, 0, 100, 100, tags="uno")
canvas.itemconfig(item, tags=("one", "two"))
canvas.addtag_withtag("three", "one")
canvas.gettags(item)
canvas.find_withtag("one")

3. other functions

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
# other functions
coords(item, *coords)
create_arc(bbox, **options)
create_bitmap(position, **options)
create_image(position, **options)
create_line(coords, **options)
create_oval(bbox, **options)
create_polygon(coords, **options)
create_rectangle(bbox, **options)
create_text(position, **options)
create_window(position, **options)
dchars(item, from, to=None)
delete(item)
dtag(item, tag=None)
find_above(item)
find_all()
find_below(item)
find_closest(x, y, halo=None, start=None)
find_enclosed(x1, y1, x2, y2)
find_overlapping(x1, y1, x2, y2)
find_withtag(item)
focus(item=None)
gettags(item)
icursor(item, index)
index(item, index)
insert(item, index, text)
itemcget(item, option)
itemconfig(item, **options)
itemconfigure(item, **options)
lift(item, **options)
lower(item, **options)
move(item, dx, dy)
postscript(**options)
scale(self, xscale, yscale, xoffset, yoffset)
scan_dragto(x, y)
scan_mark(x, y)
select_adjust(item, index)
select_clear()
select_from(item, index)
select_item()
select_to(item, index)
tag_bind(item, event=None, callback, add=None)
tag_lower(item)
tag_raise(item)
tag_unbind(self, item, event)
tkraise(item, **options)
xview(how, *args)
xview_moveto(fraction)
xview_scroll(number, what)
yview(how, *args)
yview_moveto(fraction)
yview_scroll(number, what)

python模块tkinter的常用控件2

demo
原文

1. Message

1
2
3
4
5
6
# .config(**options)
message = tkinter.Message(
root,
text = "message is similar to label without image"
)
message.pack()

2. OptionMenu

1
2
3
4
5
var = tkinter.StringVar(root)
optionMenu = tkinter.OptionMenu(root, var, "one", "two", "three")
optionMenu.pack()
# print (optionMenu.keys())
# print (dir(optionMenu))

3. LabelFrame

1
2
3
4
5
6
7
8
9
10
group = tkinter.LabelFrame(
root,
text = "group box",
padx = 10,
pady = 10
).pack()
entry = tkinter.Entry(
root
).pack()
# as a view group

4. Scale

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
s = tkinter.Scale( # a slider
root,
from_ = 10,
to = 20,
orient = "vertical", # horizontal
resolution = 2 # the step ,use -1 to disable rounding.
# digits =
# label =
# repeatinterval = # Default value is 100.
# showvalue =
# sliderlength =
# sliderrelief =
# tickinterval =
# troughcolor =
).pack()
# coords(value=None) # Gets the screen coordinate corresponding to the given scale value.
# get() # Gets the current scale value.
# identify(x, y) # Checks if an active part of the scale is at the given screen location.
# set(value)

5. Scrollbar

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
# The Scrollbar widget is almost always used in conjunction with a Listbox, Canvas, or Text widget. Horizontal scrollbars can also be used with the Entry widget.
# To connect a vertical scrollbar to such a widget, you have to do two things:
# Set the widget’s yscrollcommand callbacks to the set method of the scrollbar.
# Set the scrollbar’s command to the yview method of the widget.
sb = tkinter.Scrollbar(root)
sb.pack(side ="right",fill = "y")
lb = tkinter.Listbox(
root,
yscrollcommand = sb.set
)
sb.config(command = lb.yview)
for x in range(10,300,5):
lb.insert(0,x)
lb.pack(side = 'left',fill = "both")
#
# activate(element)
# elementborderwidth=
# jump =
# orient =
# repeatdelay =
# repeatinterval=
# troughcolor=
# delta(deltax, deltay)
# fraction(x, y)
# get()
# identify(x, y)
# set(lo, hi)

6. Spinbox

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
# Spinbox
sp = tkinter.Spinbox( # numner select
root,
from_ = 10,
to = 100,
# command =
# xscrollcommand = # Used to connect a spinbox field to a horizontal scrollbar. This option should be set to the set method of the corresponding scrollbar
)
sp.pack()
# Spinbox(root, values = (3,6,9))
# delete(first, last=None)
# get()
# icursor(index)
# identify(x, y)
# index(index)
# insert(index, text)
# invoke(element)
# scan_dragto(x)
# scan_mark(x)
# selection_adjust(index)
# selection_clear()
# selection_element(element=None)

7. Toplevel

1
2
3
4
5
6
7
# The Toplevel widget is used to display extra application windows, dialogs, and other “pop-up” windows.
tl = tkinter.Toplevel()
tl.title("top level")
lb = tkinter.Label(tl, text = "this is Toplevel lavel")
lb.pack()
btn = tkinter.Button(tl,text = "destroy",command = tl.destroy)
btn.pack()

8. tkMessageBox

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
# The tkMessageBox module provides an interface to the message dialogs.
# tkMessageBox.function(title, message [, options]).
tkMessageBox.showwarning(
"Open file",
"Cannot open this file\n"
)
# showinfo
# showwarning
# showerror
# askquestion
# askokcancel
# askyesno
# askretrycancel
# Message Box Options
default # ABORT, RETRY, IGNORE, OK, CANCEL, YES, or NO
icon # ERROR, INFO, QUESTION, or WARNING
message (string)
parent (widget)
title (string)
type (constant) # ABORTRETRYIGNORE, OK, OKCANCEL, RETRYCANCEL, YESNO, or YESNOCANCEL.

python模块tkinter的常用控件1

demo
原文

1. Label

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
# .config(**options)
label = tkinter.Label(
root,
text = "this is a label text 测试",
bg = "green", # background
fg = "red", # foreground
font = ("arial",15),
width = 20,
height = 5,
activebackground = 'blue', # with the state option
activeforeground = "purple",
anchor = 'ne', # (center)where in the label the text should be located.
# bitmap =
borderwidth = 10, # bd
compound = 'top', # (center)Controls how to combine text and image in the label
# cursor =
disabledforeground = "red",
highlightbackground = "blue",
highlightcolor = "green",
highlightthickness = 2,
# image =
justify = 'center', # Defines how to align multiple lines of text ,right,left,center
padx = 10,
pady = 10,
relief = 'ridge', # (flat),sunken,raised,groove
state = 'normal', # active,disabled
# takefocus =
# textvariable =
underline = 1, # (-1)
wraplength = 100
)
label.pack(side="left")

2. Frame

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
# .config(**options)
frame = tkinter.Frame(
root,
bg = "red",
width = 400,
height = 600,
# colormap =
# container =
# cursor =
# class =
bd = 2,
# highlightbackground =
# highlightcolor =
# highlightthickness =
relief = 'sunken', # flat,sunken,raised,groove,ridge
# takefocus =
# visual =
padx = 10,
pady = 10
)
frame.pack()

3. Entry

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
# .config(**options)
value = tkinter.StringVar()
entry = tkinter.Entry(
root,
width = 200,
bg = "#222222",
fg = "yellow",
bd = 20,
textvariable = value,
# cursor =
# disabledbackground =
# disabledforeground =
font = ("arial",15),
exportselection = True, #selected text is automatically exported to the clipboard.
# highlightbackground =
# highlightcolor =
# highlightthickness =
insertbackground = "blue", # Color used for the insertion cursor.
insertborderwidth = 10,
insertofftime = 1000, # Together with insertontime, this option controls cursor blinking. Both values are given in milliseconds.
insertontime = 1000,
insertwidth = 20,
justify = "right", # right,left,center
# invalidcommand =
# invcmd =
readonlybackground = "orange", # The background color to use when the state is “readonly”.
relief = "groove", # flat,raised,ridge,sunken
selectbackground = "black",
selectborderwidth = 2,
selectforeground = "white",
show = "", # Controls how to display the contents of the widget.
state = "normal", # disabled,readonly
# takefocus =
validate = "none" # focusin,focusout,focus
# validatecommand =
# vcmd = # same as validatecommand
# xscrollcommand = # Used to connect an entry field to a horizontal scrollbar. This option should be set to the set method of the corresponding scrollbar.
)
value2 = value.get()
value.set("hello python ...")
entry.focus_set()
entry.delete(0,2)
entry.icursor(3) # Moves the insertion cursor to the given index.
index = entry,index(2) # Gets the numerical position corresponding to the given index.
entry.insert(0,"aaaaaa")
# scan_dragto(x), # Sets the scanning anchor for fast horizontal scrolling to the given mouse coordinate.
# scan_mark(x),# Scrolls the widget contents sideways according to the given mouse coordinate. The text is moved 10 times the distance between the scanning anchor and the new position.
#
# select_adjust(index) [#]
# Same as selection_adjust.
#
# select_clear() [#]
# Same as selection_clear.
#
# select_from(index) [#]
# Same as selection_from.
#
# select_present() [#]
# Same as selection_present.
#
# select_range(start, end) [#]
# Same as selection_range.
#
# select_to(index) [#]
# Same as selection_to.
#
# selection_adjust(index)
# Adjusts the selection to include also the given character. If index is already selected, do nothing.
#
# selection_clear()
# Clears the selection.
#
# selection_from(index)
# Starts a new selection. This also sets the ANCHOR index.
#
# selection_present()
# Checks if text is selected.
#
# lection_range(start, end)
# Explicitly sets the selection range. Start must be smaller than end. Use selection_range(0, END) to select all text in the widget.
#
# selection_to(index)
# Selects all text between ANCHOR and the given index.
#
# xview(index)
# Makes sure the given index is visible. The entry view is scrolled if necessary.
#
# xview_moveto(fraction)
# Adjusts the entry view so that the given offset is at the left edge of the canvas. Offset 0.0 is the beginning of the entry string, 1.0 the end.
#
# xview_scroll(number, what)
# Scrolls the entry view horizontally by the given amount.
entry.pack()

4. Text

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
# .config(**options)
# Text
text = tkinter.Text(
# maxundo =
# relief =
# setgrid = #Default value is 0.
# spacing1 = # Default value is 0.
# spacing2 = Default value is 0.
# spacing3 = # Default value is 0.
# state = # Default value is NORMAL.
# tabs = # No default value.
# takefocus= # No default value.
# undo = # Default is 0.
# wrap = #Default value is CHAR.
# xscrollcommand =
# yscrollcommand =
)
# text.tag_config("a", foreground="blue", underline=1)
# text.tag_bind("Enter>", show_hand_cursor)
# text.tag_bind("Leave>", show_arrow_cursor)
# text.tag_bind("Button-1>", click)
# text.config(cursor="arrow")
# text.insert("insert", "click here!", "a")
# text.tag_config("n", background="yellow", foreground="red")
# text.tag_config("a", foreground="blue")
# text.insert("contents", ("n", "a"))
# text.insert("end","aaa") # end,current,insert,sel_first,sel_last
# text.insert(1.0,'0123456789\n') # x.y
# text.insert("1.end",'zzz') # x.end
text.pack()

5. Button

1
2
3
4
5
6
7
8
9
10
11
12
def call():
print("call pressed ...")
button = tkinter.Button(
root,
command = call,
# default = # If set, the button is a default button. Tkinter will indicate this by drawing a platform specific indicator (usually an extra border). The default is DISABLED (no default behavior).
# overrelief = # Alternative relief to use when the mouse is moved over the widget. If empty, always use the relief value.
)
button.flash() # Flash the button. This method redraws the button several times, alternating between active and normal appearance.
button.invoke() # Call the command associated with the button.
button.pack()

6. Checkbutton

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
# config(**options)
val = tkinter.StringVar()
def cbcall():
val.set(val.get()+"...")
print (val.get())
checkButton = tkinter.Checkbutton(
root,
text = "color",
variable = val,
onvalue = "blue",
offvalue ="none",
command = cbcall
)
# deselect() # Deselects the checkbox; that is, sets the value to offvalue.
# flash() # Redraws the button several times, alternating between active and normal appearance.
# invoke() # Calls the command associated with the button.
# select() # Selects the button; that is, sets the value to onvalue.
# toggle() # Toggles the button.
checkButton.pack()

7. Rudiobutton

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
# config(**options)
val = tkinter.StringVar()
def radcall():
print(val.get())
r1 = tkinter.Radiobutton(
root,
text = "one",
variable = val, # the value of the value
# textvariable = # the value of the text
value = "one1",
command = radcall
)
r1.pack()
r2 = tkinter.Radiobutton(
root,
text = "two",
variable = val,
value = "two2",
command = radcall
)
r2.pack()
# deselect() # Deselects the button.
# flash() # Redraws the button a couple of times, alternating between active and normal appearance. This can be useful when debugging, or to indicate when some other user action has activate the button.
# invoke() # Calls the command associated with the button.
# select() # Selects the button.

8. Listbox

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
# config(**options)
listbox = tkinter.Listbox(
root,
selectmode = "extended", # browse
activestyle = "underline",
# exportselection =
# listvariable =
# xscrollcommand =
# yscrollcommand =
)
listbox.pack()
for x in [x*2 for x in range(10)]:
listbox.insert("end",x)
# lb.bind("<Double-Button-1>", self.ok)
# activate(index)
# bbox(self, index)
# curselection()
# delete(first, last=None)
# get(first, last=None)
# index(index)
# insert(index, *elements)
# itemconfig(index, **options)
# selection_anchor(index) # Sets the selection anchor to the given index. The anchor can be refered to using the ANCHOR index.
# selection_clear(first, last=None) # Removes one or more items from the selection.
# selection_includes(index) # Checks if an item is selected.
# selection_set(first, last=None) # Adds one or more items to the selection.
# size()
# xview(column, *extra) # Controls horizontal scrolling.
# yview(*what)
# yview_scroll(number, what)
# xview_scroll(number, what)
# yview_moveto(fraction)
# xview_moveto(fraction)

用python的tkinter模块开发桌面应用

demo
原文

1. 安装python

click here to download
双击安装(我用的是3.5.1版本)

2. 运行脚本

创建 trinker.py
写以下代码
双击运行代码

3. 入门

1
2
3
4
5
6
7
# import the tkinter core package
import tkinter
# create a root window with tkinter
root = tkinter.Tk()
## start the event loop
## (actually i don't know what does it look like in python at this time)
root.mainloop()

4. 窗口参数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
# print (root.keys) # printing the all options
# root['key'] = value
root['bg'] = 'black' # same to background
# relief
# screen
# use
# colormap
# container
root['cursor'] = 'abc.png' # cursor image
root['bd'] = '2' # same to borderwidth
root['height'] = '400' # height
# highlightbackground # 部件具有焦点时的亮点区域的背景颜色.
# highlightcolor # 前景色的亮点区域,部件具有焦点时.
# highlightthickness # 焦点时边框宽度
root['padx'] = '10' # inner padding x
root['pady'] = '10' # inner padding y
# takefocus # 获取焦点的键盘定义
# visual
root['width'] = '400' # width
root['menu'] = myMenu # add myMenu

5. 窗口函数

1
2
3
4
5
6
7
8
9
10
# set the window's title
root.title("this is a window created with tkinter in python")
# set the size of the window(WxH+X+Y)
root.geometry('600x500+10+20');
# set the resizability
root.resizable(width=True,height=False)
# icon of the window
root.iconbitmap('gif/003.ico')
# enter the event loop
root.mainloop()

7. 几何布局之pack

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
elem.pack(**options)
# same ad pack
pack_configure()
# remome , but not destroy , can display again with pack()
pack_forget()
# Returns a dictionary containing the current packer options.
pack_info()
# (Manager method) Controls geometry propagation. If enabled, the manager widget will be resized if not large enough to hold all the child widgets.
pack_propagate(flag)
# (Manager method) Returns a list of all child (“slave”) widgets managed by the packer for this widget.Returns: A list of child widgets.
pack_slaves()
# Where the widget is placed inside the packing box. Default is CENTER.
anchor = center,x,e,nw,ne,se,sw,s,n
# Specifies whether the widgets should be expanded to fill any extra space in the geometry master. If false (default), the widget is not expanded.
expand = True,false
# Specifies whether the widget should occupy all the space provided to it by the master.
fill = none,both,x,y
# Pack this widget inside the given widget.
in =
# inner pading
ipadx = 0
ipady = 0
# outer padding
padx = 0
pady = 0
# Specifies which side to pack the widget against.
side = left,right,top,bottom

7. 几何布局之grid

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
elem.grid(**options)
# Returns a list of the “slave” widgets managed by this widget.
grid_slaves(row = 'none', column = 'none')
# Returns the current grid size for the geometry manager attached to this widget.
grid_size()
# Set options for a row,column of cells.
# padsize=,pad=,weight=
elem.grid_rowconfigure(index, **options)
grid_columnconfigure(index, **options)
# Enables or disables geometry propagation.
girid_propagate(flag) True,False
# Returns the grid cell under (or closest to) a given pixel.
grid_location(x, y)
# Return a dictionary containing the current cell options for the cell used by this widget.
grid_info()
# Remove this widget from the grid manager. The widget is not destroyed, and can be displayed again by grid or any other manager.
grid_forget()
# Same as grid.
grid_configure(**options) [#]
# The grid_bbox method.
grid_bbox(column=None, row=None, col2=None, row2=None)
# column row number
column = 1
row = 2
# If given, indicates that the widget cell should span multiple columns or rows. The default is 1.
columnspan = 2
rowspan = 3
# Place widget inside to the given widget.
in =
in_ = # same as in
# the inner paddings
ipadx =
ipady =
# the outer paddings
padx =
pady =
# Defines how to expand the widget if the resulting cell is larger than the widget itself.
sticky = w,e,n,s,se,we,ne,nw

7. 几何布局之place

1
2
3
4
5
6
7
8
9
10
11
elem.place(**options)
# Same as place.
place_configure(**options)
# The place_forget method.
place_forget()
# The place_info method.
place_info()
# The place_slaves method.
place_slaves()
Same as place_slaves.
slaves()

8. 常用颜色定义

  • bg: 背景颜色

  • fg:前景颜色

  • activebackground: 当widget是活跃widget的背景颜色.

  • activeforeground:小部件时,部件是活跃的前景色.

  • background: widget的背景颜色。这也可以代表ASBG.

  • disabledforeground: 前景色的部件,当部件被禁用.

  • foreground: widget的前景色。这也可以表示为FG.

  • highlightbackground: 部件具有焦点时的亮点区域的背景颜色.

  • highlightcolor: 前景色的亮点区域,部件具有焦点时.

  • selectbackground: widget的所选项目的背景颜色.

  • selectforeground: 前景色为widget的选定项目.

atom编辑器常用插件

demo

1. emmet

html补全

2. active-power-mode

文字泡沫

3. power-mode

随地泡沫

4. atom-miku

miku

5. autocomplete-plus

当输入的时候,提供可能的候选项。

5. atomic-chrome

chrome里面的编辑框直接在atom编辑

6. minimap

源码预览图,提供丰富的自定义选项

7. file-icons || file-icon-supplement

显示文件类型对应的图标。

8. atom-beautify

格式化代码,更统一的代码风格。

9. Color Picker

在编辑器里面挑选颜色。

10. Editor-setting

给每个语言独立设置扩展和功能

11. atom-terminal-panel

atom内置命令行工具

12. Git

git-control git面板
git-controlhub git面板
open-gitub  在atom打开gitub

13. language-JavaScript-jsx

jsx扩展

14. markdown-preview-plus

markdown预览

15. tool-bar

tool-bar-almighty // 我个人喜欢
tool-bar-shortcut //功能丰富
tool-bar-shortcuts //可以自选选项
右侧工具栏 (必须把tool-bar和上面三个任意选一个一起安装,只安装一个没有效果的)

16. atom-html-preview

预览lhtml页面

17. vim-mode

atom添加vin模式

18. pigments

颜色代码着色显示(代码指定的颜色)

19. autocomplete-modules

模块名自动补全

19. php-server

给某个文件夹php服务器启动

20. live-server

自动刷新的服务器

21. React

atom-react-preview  react预览
react 语法支持
atom-react-native-autocomplete RN代码补全

22. tree-view-git-status

文件夹git状态

23. tree-view-background

文件栏背景图

24. glowing-cursor

打字时候光标颜色

25. filecolor

文件名颜色

26. windows-context-menu

给windows添加打开快捷方式

27. open-in-browser

默认程序打开代码

28. sound

keyboard-sound
typewriter-sound
敲代码声音

29. video-player

背景播放视频

30. all-times-you-know

atom全局背景

31. hacker-news-background-titles

黑客新闻标题和打开链接(无文件打开状态下在背景)

32. editor-background

背景图片和视频

33. server-script

同步/运行脚本到服务器

34. custom-title

给atom设置个性化标题

35. status-bar

line-count-status
move-status-items
status-bar-clock
battery-status
git-status
terminal-status
ctags-status //类,函数,作用域

36. menu-manager

顶部菜单管理

37. php-class-tree

php类和方法树状图

38. Nuclide

Facebook的IDE

39. Script

在编辑器里运行代码

40. remote-edit

编辑服务器上的文件

41. remote-sync

同步服务器上的文件

42. remote-ftp

服务器文件的树状结构显示

43. browser-plus

浏览器

44. preview-plus

浏览一切

45. open-in-browser

在浏览器打开

46. language-babel

jsx语法

47. games

atom-2048
snake
tetromino

48. markdown-preview && markdown-scroll-sync

将markdown-preview编辑区和预览区同步滚动

49. markdown-writer

方便管理markdown里的图片和链接

50. markdown-table-format

格式化markdown的表格

51. atom-hexo

atom编辑器里执行hexo命令写博客

52. github-issure

github-issure帮助工具

53. github

github-user-dataip  显示文档里github账号的详细信息
create-github-repo  创建github repository
my-github-profile  显示自己github信息在状态栏
github-notification 通知github消息
gist-it 快速分享代码到gist.github.com(可惜天朝用不了gist)

54. sourcerer

根据遇到的问题查找stackoverflow代码片段

55. ask-stack

在atom快速提问stackoverflow

56. debug

node-debugger
php-debug
python-debugger
swift-debugger
go-debug
...

57. file-header || header-42

给当前编辑文件添加用户时间等头部信息

58 atom-minify || uglify

js 代码混淆

59. sync-settings

备份同步atom的插件和配置

60. atom-music

本地音乐播放器

61. musicBox

atomn内嵌listenvideo.com

62. youtube-pane || playyoutube

atom内嵌youtube

63. themed-settings

美化设置面板

64. markdown-themeable-pdf

markdown转换成pdf,html,png

65. jupyter-notebook || note-book

atom内嵌notebook

66. markdown-scroll-sync

当markdown-preview时编辑框和预览框同步

67. autocomplete-python

python代码自动补全

68. javascript-snippets

输入特殊的字符后自动扩展成对应的 Javascript 代码片段

69. go-to-line

跳转到指定的行,只要 ctrl + g 后输入行号即可

70. atom-ternjs

js,nodejs,es6补全

71. regex-railroad-diagram

正则表达式图形化显示

72. atom-shell-commands

自定义shell命令

73. advanced-open-file

通过 Cmd-Alt-O/Ctrl-Alt-O 快速的打开文件或新建文件,同时支持路径补全

74. seti-ui

带文件图标的黑色主题

75. php-cx-fixer

运行php

76. git-log

图形化git提交记录

77. pretty-json

格式化json数据

78. drag-drop-text

用鼠标复制剪切粘贴文本

79. to-base64 | base64

文件转base64

80. draw-on-image

截屏和编辑图片

81. command-toolbar

个性化atom的各个按钮命令

82. Encourage

atom来鼓励你写代码

83. platformio-ide-terminal

又是一个很棒的terminal

84. auto hide sidebar

自动隐藏树状文件面板

85. slack-chat

slack的atom内置客户端

86. atomic-game-engine

游戏引擎

87. canvas-snippets

html5的canvas代码片段

88. draw-package

文件里画图形

89. open-in-browsers

在安装过的任意浏览器打开代码

90. lunar-particle-ui | seti-ui

最漂亮的两个主题

91. atom-monokai | monokai

最漂亮的两个语法主题

92. SyncedSidebarBg

侧边树状文件结构的背景和主题背景同步

93. api-docs

文档查看

94. goto-definition

AS的Ctrl+鼠标左键还记得吧    

95. template-generator

代码模板生成器

96. project-viewer

项目管理

97. Docblockr

主流语言给函数和类自动生成文档

98. api-docs | api-docs

主流语言的api文档


demo

demo

demo


12个令人惊讶的NodeJS开源项目

demo


在几年的时间里,NodeJS逐渐发展成一个成熟的开发平台,吸引了许多开发者。有许多大型高流量网站都采用NodeJS进行开发,像PayPal,此外,开发人员还可以使用它来开发一些快速移动Web框架。

除了Web应用外,NodeJS也被应用在许多方面,本文盘点了NodeJS在其它方面所开发的十大令人神奇的项目,这些项目涉及到应用程序监控、媒体流、远程控制、桌面和移动应用等等。


1.NodeOS

NodeOS是采用NodeJS开发的一款友好的操作系统,该操作系统是完全建立在Linux内核之上的,并且采用shell和NPM进行包管理,采用NodeJS不仅可以很好地进行包管理,还可以很好的管理脚本、接口等。目前,Docker和Vagrant都是采用NodeOS的首个版本进行构建的。

NodeJS无所不能:细数12个令人惊讶的NodeJS开源项目 - kompasim - kompasim的博客


2.Noduino

许多硬件黑客希望通过Web页面即可控制他们的Arduino,Noduino就是这样的一个项目,一个简单灵活的JavaScript和NodeJS框架,通过使用HTML5、Socket.IO和NodeJS的Web应用来控制Arduino。目前,该项目刚刚启动,支持一些常用功能,比如从Arduino中捕获事件(例如点击按钮)等。

NodeJS无所不能:细数12个令人惊讶的NodeJS开源项目 - kompasim - kompasim的博客


3.Node-WebKit

Node-Webkit是一个基于Chromium与NodeJS的应用程序运行器,允许开发者使用Web技术编写桌面应用。它是NodeJS与WebKit技术的融合,提供一个跨Windows、Linux平台的客户端应用开发的底层框架。

跨平台开发并非易事,其中一种方式便是使用Web技术和Node-Webkit开发桌面应用来代替那些庞大且笨重的开发框架。

NodeJS无所不能:细数12个令人惊讶的NodeJS开源项目 - kompasim - kompasim的博客


4.PDFKit

PDFKit是采用NodeJS开发的一款PDF文档生成库,它使用一个“HTML5 canvas-like API”来创建矢量图形和字体嵌入,并且支持许多标准的PDF功能,如文件的安全性、表的创建、文本换行、项目符号、高亮提示、注释等PDF功能。

注意,PDFKit是一款PDF生成工具,而不是一个文档转换系统。如果你想对现有的PDF文档进行操作,你可以使用另一个NodeJS项目—— Scissors。

NodeJS无所不能:细数12个令人惊讶的NodeJS开源项目 - kompasim - kompasim的博客


5.Log.io

Log.io是一个基于NodeJS开发的实时日志监控项目,在浏览器里访问。需要注意的是,Log.io只监视日志变动并不存储日志,不过这个没关系,只要知道日志存储在哪个机器上。

Log.io使用 Socket.io库发送活动报告的,和其他的监控工具一样,Log.io也采用服务器-客户端的模式。Log.io由两部分组成:server和harveste,server运行在机器 A(服务器)上监视和纪录其他机器发来的日志消息;log harvester 运行在机器 B(客户端)上用来监听和收集机器 B上的日志改动,并将改动发送给机器 A,每个需要纪录日志的机器都需要一个harvester。

NodeJS无所不能:细数12个令人惊讶的NodeJS开源项目 - kompasim - kompasim的博客


6.Nodecast或Leapcast

受谷歌Chromecast技术的启发,开发者使用NodeJS开发出不少Chromecast仿真应用。如Nodecast或Leapcast。在PC上运行Nodecast或Leapcast,启动移动设备,选择一个支持Chromecast的应用程序,然后你就可以把移动广播上的内容映射到电脑上了,把电脑当成一个流媒体使用。

在这两个应用中,Nodecast比较简单些,但相应的功能也比较少,它仅经过了YouTube和Google Music的测试( DEMO)。注意,大家不要把Nodecast与 Nodecast库混淆,后者使用DIAL发现协议提供链接设备(类似Chromecast)。

NodeJS无所不能:细数12个令人惊讶的NodeJS开源项目 - kompasim - kompasim的博客


7.Nexe

Nexe是一款小巧却非常实用的NodeJS工具,它可以为NodeJS应用创建单一可执行的文件,并且无需安装运行时,这样,一些非技术终端的用户就无需变动NodeJS应用的所有依赖程序。如果你想发布一个NodeJS应用程序,并且没有GUI,Nexe则是您的最佳选择。目前该应用程序的一个弊端是不能在Windows平台上工作,只适用于Linux和Mac OS X平台,并且它也不支持本地NodeJS模块。

NodeJS无所不能:细数12个令人惊讶的NodeJS开源项目 - kompasim - kompasim的博客


8.Hyro

Hyro是使用NodeJS开发的一款实时HTML5编辑器,如下图所示,左边显示HTML源码,右边显示内容。语法高亮由 CodeMirror提供。Hyro并不打算成为一款成熟的Web IDE,更像是一款轻量级的HTML或CSS记事本。

NodeJS无所不能:细数12个令人惊讶的NodeJS开源项目 - kompasim - kompasim的博客


9.Haroopad

Haroopad是一款Linux上的markdown编辑器,使用Chromium作为UI,支持Windows、Mac OS X和Linux。主题样式丰富,语法标亮支持54种编程语言。 如下图所示,一边是代码编辑窗口,一边是预览窗口,可以实时更新。其邮件导出功能可以将文档发送到Tumblr和Evernote。

NodeJS无所不能:细数12个令人惊讶的NodeJS开源项目 - kompasim - kompasim的博客


10.TiddlyWiki5

TiddlyWiki是一款交互式的wiki,非常灵活,它也可以在浏览器里作为单一的HTML文件或者是一款功能强大的NodeJS应用程序。

TiddlyWiki5是全新设计的5.0版本,它可以直接集成NodeJS解锁一系列的功能,但在单机模式下是不可用的。目前,TiddlyWiki5仍处于测试阶段。

NodeJS无所不能:细数12个令人惊讶的NodeJS开源项目 - kompasim - kompasim的博客

来自: InfoWorld


11.express

Express 是一个基于 Node.js 平台的极简、灵活的 web 应用开发框架,它提供一系列强大的特性,帮助你创建各种 Web 和移动设备应用。


12.phonegap

phonegap是一个跨平台的移动app开发框架,可以把html css js写的页面打包成跨平台的可以安装的移动app,并且可以调用原生的几乎所有的功能,比如摄像头,联系人,加速度等。

nwjs项目package.json文件详解

demo


1. 必填

  • main
    (string)APP的主入口,指定一个html文件,如:main:”index.htm”。
  • name
    (string)APP的名称,必须具有唯一性。
    例子:
1
2
3
4
{
"name":"nw-demo",
"main":"index.html"
}

2. 特征

  • nodejs
    (boolean)设置是否禁用nodejs。

  • node-main
    (string)指定node.js的脚本文件的路径

  • single-instance
    (boolean)是否只允许启动单个实例,true为只允许一个软件实例运行。

  • js-flags
    (string)指定js引擎,如:
    “js-flags”: “–harmony_proxies –harmony_collections”
    例子:

    1
    2
    3
    4
    {
    "nodejs":true,
    "node-main":"chao.js"
    }

3. window

  • title
    (string)窗口标题(设置index.html里的标签中的文字,如果已经设置就不会生效。)

  • width/height
    (int)设置窗口大小。

  • toolbar
    (boolean)设置工具栏是否显示

  • icon
    (string)设置软件图标。

  • min_width/min_height
    int)设置软件的最小宽度和高度

  • max_width/max_height
    int)设置软件的最大宽度和高度

  • resizable
    (boolean)设置窗口是否可以调整大小

  • always-on-top
    (boolean)设置窗口总是在最上层(置顶)

  • fullscreen
    (boolean) 窗口全屏

  • kiosk
    (boolean)是否使用Kiosk模式。在Kiosk模式下,应用程序将是全屏,并试图阻止用户离开应用程序,所以你应该记得,提供了一种在应用程序离开Kiosk模式。这种模式主要用于演示公共显示器(可用节点的-webkit v0.3.1后)

  • show
    (boolean) 显示和隐藏窗口

  • position
    null:默认
    center :软件启动在中间显示。
    mouse:软件启动在鼠标指标位置显示。

例子:

1
2
3
4
5
6
"window": {
"frame": false,
"toolbar": false,
"width": 800,
"height": 800
}

4. webkit

  • plugin
    (boolean)是否启用外部插件
  • java
    (boolean)是否启用java
  • page-cache
    (boolean)是否启用页面缓存
  • snapshot
    指定要加载的应用程序的快照文件的路径。快照文件包含应用程序的编译代码。
    例子:
    1
    2
    3
    "webkit": {
    "plugin": false
    }

5. 其它

  • version
    版本号,由 3 组数字组成 major.minor.bugfix 。尚在开发阶段时版本号应该加上后缀 -dev,例如 1.1.3-dev。需要手工修改,不支持根据规则自动变化。

  • author
    模块的作者。

  • keywords
    关键字,如:“keywords”:[“a”,”b”]

  • description
    模块的描述。

  • bugs
    bug 问题 的反馈地址信息。javascript对象,可在对象中自定义除email、url等其他地址类型信息,比如电话、QQ等。

  • maintainers
    维护者

    1
    2
    3
    4
    5
    6
    7
    8
    9
    "maintainers":[ {
    "name": "chao",
    "email": "123456789@qq.com",
    "web": "http://www.abcdefg.com",
    }]
  • contributors
    捐赠者

  • repositories
    库、模块

7. 实例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
{
"main": "index.html",
"name": "nw-demo",
"description": "demo app of node-webkit",
"version": "0.1.0",
"keywords": [ "demo", "node-webkit" ],
"window": {
"title": "node-webkit demo",
"icon": "link.png",
"toolbar": true,
"frame": false,
"width": 800,
"height": 500,
"position": "mouse",
"min_width": 400,
"min_height": 200,
"max_width": 800,
"max_height": 600
},
"webkit": {
"plugin": true
}
}

nwjs快速入门

demo


本文介绍了 NW.js(node-webkit) 的基本知识,通过本入门指南的学习,可以让你快速构建一个 NW.js 的桌面应用。


1. 简介

NW.js (原名 node-webkit)是一个基于 Chromium 和 node.js 的应用运行时,通过它可以用 HTML 和 JavaScript 编写原生应用程序。它还允许您从 DOM 调用 Node.js 的模块 ,实现了一个用所有 Web 技术来写原生应用程序的新的开发模式。

这里是 使用 NW.js 的应用和公司列表 ,可以看到 NW.js 实际应用效果。


2. 功能特性

用现代 HTML5,CSS3,JS 和 WebGL 来编写应用程序。
完全支持 Node.js APIs 和所有其 第三方模块 .
良好的性能:Node 和 WebKit 运行在相同的线程:函数调用是更简洁;对象在同一堆可以互相引用;
容易打包和分发应用程序。
支持 Linux、Mac OS X 和 Windows


3. 下载

地址: http://dl.nwjs.io/


4. 快速入门

我们新建一个目录 quick-start ,来代表项目名称。


5. 客户端代码

在 quick-start 目录下,创建 index.html :

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>NW.js 快速入门|www.waylau.com</title>
</head>
<body>
<h1>NW.js 快速入门</h1>
We are using node.js <script>document.write(process.version)</script>.
<br/>
More demos,see <a href="http://www.waylau.com" title="更多示例">www.waylau.com</a>
</body>
</html>

在 quick-start 目录下,创建 package.json :

1
2
3
4
5
{
"name": "nw-quick-start-demo",
"version": "0.0.1",
"main": "index.html"
}


6. 运行

运行:

bash $ /path/to/nw .(假设当前目录包含 ‘package.json’)
注意: 在 Windows 系统, 拖动包含 package.json 文件夹 quick-start ,到 nw.exe 来打开它。

注意:在 OSX 系统,可执行编译文件是在隐藏目录的 .app 文件内。为了在 OSX 运行 node-webkit , 输入:

/path/to/nwjs.app/Contents/MacOS/nwjs . (假设当前目录包含 ‘package.json’)


7. 更多设置

将 quick-start 复制为另外要给项目 quick-start-window 。

修改 package.json 来设置程序。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
{
"name": "nw-quick-start-window-demo",
"version": "0.0.1",
"main": "index.html",
"window": {
"title": "nw-quick-start-window-demo",
"toolbar": false,
"frame": true,
"show_in_taskbar":true,
"width": 800,
"height": 500,
"position": "mouse",
"min_width": 400,
"min_height": 200,
"max_width": 800,
"max_height": 600
}
}

窗口外观常用属性包括:

1
2
3
4
5
6
7
8
9
10
11
12
title : 字符串,设置默认 title。
width/height : 主窗口的大小。
toolbar : bool 值。是否显示导航栏。
icon : 窗口的 icon。
position :字符串。窗口打开时的位置,可以设置为“null”、“center”或者“mouse”。
min_width/min_height : 窗口的最小值。
max_width/max_height : 窗口显示的最大值。
resizable : bool 值。是否允许调整窗口大小。
always-on-top : bool 值。窗口置顶。
fullscreen : bool 值。是否全屏显示。
show_in_taskbar : 是否在任务栏显示图标。
frame : bool 值。如果设置为 false,程序将无边框显示。

8. 发布

本节以 Windows 环境下为例。

  • 新建发布包

将下载的 NW.js 文件解压,复制一份作为项目的发布包模板,本例名称为 nwjs-v0.12.3-win-x64

  • 压缩

将 quick-start 内的文件压缩成 .zip 文件 quick-start.zip ,修改文件后缀为 quick-start.nw (这个是管方的说法,其实不该后缀 直接是 quick-start.zip 可以是可以)

  • 合成

将 quick-start.nw 放入发布包 nwjs-v0.12.3-win-x64 ,

在命令下,切换到 nwjs-v0.12.3-win-x64 目录,并执行

copy /b nw.exe+quick-start.nw quick-start.exe

此时,生成了可执行文件 quick-start.exe ,双击即可运行程序

  • 删除冗余

最终的发布包,未减少体积,可以删除项目用不到的冗余文件,由于 nw.exe 、 quick-start.nw 文件已经合成为了 quick-start.exe ,故删之。又因为该项目简单,没有用到媒体库,可以删除 nwjc.exe 、 ffmpegsumo.dll 等

  • 源码

见: https://github.com/waylau/nwjs-demos 中的 quick-start 和 quick-start-window 。

cordova快速入门

demo


1. 下载和安装Cordova框架

现在cordova是利用nodeJS进行管理,所以需要先下载nodeJS。其中,就包含了npm管理器。下载地址:
https://nodejs.org/
在命令行窗口确认安装完成,输入命令,查看nodejs版本

npm –version


2.在windows上安装Cordova

在命令行窗口输入:

npm install -g cordova

安装完后输入命令检查是否安装成功

cordova -v


3.安装android开发环境要求的jdk

自己到sun.com 下载java的开发环境,现在是最新版1.8,很简单,双击exe安装


4. 安装ADT

要编译android应用,需要adt sdk编译器,这个是google的,可能需要翻墙
下载ADT,地址:

http://developer.android.com/sdk/

安装完后 启动Android SDK Manager,下载android sdk和工具

上面主要的难点和问题是android sdk的安装,因为被墙的原因,安装可能需要耗点时间和精力。安装完后就可以使用cordova了。


5.创建第一个phonegap/cordova 项目

创建cordova项目,第一个demo是目录,第二个是应用包名,第三个参数是应用名称

cordova create demo com.baidu.demo demo


6.添加android支持

Cordova platform add android

第一次创建项目需要联网下载模板,可能需要点时间,等待完成后输入编译命令

Cordova run android

如果android手机连接到了电脑,应用会被安装到手机,可以在手机上查看效果了,如果手机未连接到电脑或者未正常驱动,则可以单独编译然后手动安装

Cordova build android

Build后apk会产生,放在项目的platform/android/builds/下面


expressjs框架的安装和使用

demo


1. 安装

先说下如果需要用express 3.x版本,直接使用nmp 中的@字符确定版本,指令如下:

npm install -g express@3.5

如果需要使用4.0,这里有个需要注意的问题在4.x版本express 已经把命令行工具分离出来 (链接https://github.com/expressjs/generator)

我们现在全局安装只需要安装这个命令行工具就可以,指令如下:

npm install -g express-generator


2. 创建项目

$ express blog &&cd blog

blog是安装的文件夹名

$ npm install

安装express及依赖

$ npm start

这里需要注意 express 4.x 无法以 node app.js 为启动方式,而是用指令 npm start 作为启动

访问 http://localhost:3000/ 出现熟悉的Welcome to Express,证明安装成功。

这时我们就可以尝试4.0的新功能了。


3. 目录结构

  • bin, 存放启动项目的脚本文件
  • node_modules, 存放所有的项目依赖库。
  • public,静态文件(css,js,img)
  • routes,路由文件(MVC中的C,controller)
  • views,页面文件(Ejs模板)
  • package.json,项目依赖配置及开发者信息
  • app.js,应用核心配置文件

4. package.json项目配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
{
"name": "express4-demo",
"version": "0.0.0",
"private": true,
"scripts": {
"start": "node ./bin/www"
},
"dependencies": {
"body-parser": "~1.10.2",
"cookie-parser": "~1.3.3",
"debug": "~2.1.1",
"ejs": "~2.2.3",
"express": "~4.11.1",
"morgan": "~1.5.1",
"serve-favicon": "~2.2.0"
}
}

5. app.js核心文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
// 加载依赖库,原来这个类库都封装在connect中,现在需地注单独加载
var express = require('express');
var path = require('path');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');
// 加载路由控制
var routes = require('./routes/index');
//var users = require('./routes/users');
// 创建项目实例
var app = express();
// 定义EJS模板引擎和模板文件位置,也可以使用jade或其他模型引擎
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');
// 定义icon图标
app.use(favicon(__dirname + '/public/favicon.ico'));
// 定义日志和输出级别
app.use(logger('dev'));
// 定义数据解析器
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
// 定义cookie解析器
app.use(cookieParser());
// 定义静态文件目录
app.use(express.static(path.join(__dirname, 'public')));
// 匹配路径和路由
app.use('/', routes);
//app.use('/users', users);
// 404错误处理
app.use(function(req, res, next) {
var err = new Error('Not Found');
err.status = 404;
next(err);
});
// 开发环境,500错误处理和错误堆栈跟踪
if (app.get('env') === 'development') {
app.use(function(err, req, res, next) {
res.status(err.status || 500);
res.render('error', {
message: err.message,
error: err
});
});
}
// 生产环境,500错误处理
app.use(function(err, req, res, next) {
res.status(err.status || 500);
res.render('error', {
message: err.message,
error: {}
});
});
// 输出模型app
module.exports = app;

6. 路由功能

app.route方法会返回一个Route实例,它可以继续使用所有的HTTP方法,包括get,post,all,put,delete,head等。

1
2
3
app.route('/users')
.get(function(req, res, next) {})
.post(function(req, res, next) {})

express.Router类,则可以帮助我们更好的组织代码结构。在app.js文件中,定义了app.use(‘/’, routes); routes是指向了routes目录下的index.js文件,./routes/index.js文件中,express.Router被定义使用,路径/*处理都会由routes/index.js文件里的Router来处理。如果我们要管理不同的路径,那么可以直接配置为多个不同的Router。

1
2
3
app.use('/user', require('./routes/user').user);
app.use('/admin', require('./routes/admin').admin);
app.use('/', require('./routes'));


7. 程序代码

1
2
3
4
5
~ git clone git@github.com:bsspirit/nodejs-demo.git # 下载github项目
~ cd nodejs-demo # 进入下载目录
~ git checkout express4 # 切换到express4的分支
~ npm install # 下载依赖库
~ npm start # 启动服务器

,