HTML5 회전 하는 빗자루

Posted at 2010/06/05 15:08// Posted in html5
어제 집에 가서 HTML5 로 이미지 찍는거를 와이프에게 보여줬더니;

헐~
그냥 img src 태그 쓴거 아니삼?

하고 비웃더군요 = =)~;;;
그래서 좀 더 난이도 있는 예제를 만들어 보았습니다.
이름하여 회전하는 빗자루 입니다. ~(-_-)~ 짜잔~

지난번에는 소스를 보여주고 데모를 보여줬더니... 흥미가 없는 것 같아서 이번에는 순서를 바꾸어보았습니다.
( 크롬, 파이어 폭스로 보셔야 나옵니다~ IE8 은 아직 canvas 를 지원 안한다는군요~ )
이올린에 북마크하기(0) 이올린에 추천하기(0)
2010/06/05 15:08 2010/06/05 15:08
import time
from threading import Thread

class WorkThread(Thread):
    def __init__(self, onCurrentPos, onTotalCount):
        Thread.__init__(self)
        self.onCurrentPos = onCurrentPos
        self.onTotalCount = onTotalCount

    def run(self):
        self.onTotalCount(100)

        print "!!"
        for i in range(100):
            self.onCurrentPos(i+1)
            time.sleep(0.3)


import wx

class GagePanel(wx.Panel):
    MAX = 1000
    def __init__(self, parent, title):
        wx.Panel.__init__(self, parent, -1)

        self.title = title
        self.text = wx.StaticText(self, -1, title, (10, 10))

        gage = wx.Gauge(self, -1, self.MAX, (10, 30), (250, 25),
                    wx.GA_HORIZONTAL|wx.GA_SMOOTH)

        self.runButton = wx.Button(self, -1, "RUN", (210, 70))
        self.Bind(wx.EVT_BUTTON, self.OnRun, self.runButton)

        gage.SetBezelFace(5)
        gage.SetShadowWidth(5)
        self.gage = gage
        self.pos = 0
        self.count = 1

        self.workThread = None

    def OnCurrentPos(self, pos):
        self.pos = pos + 1
        self.gage.SetValue(self.MAX * self.pos / self.count)
        self.text.SetLabel("%s (%d/%d)" % (self.title, self.pos, self.count))

    def OnTotalCount(self, count):
        self.count = count

    def OnRun(self, event):
        if self.workThread:
            return

        self.workThread = WorkThread(self.OnCurrentPos, self.OnTotalCount)
        self.workThread.start()

class MainFrame(wx.Frame):
    def __init__(self):
        wx.Frame.__init__(self, None, -1, "Progress",
                pos = (0, 0), size = (320, 240))

        self.CentreOnScreen(wx.BOTH)

        self.panel = GagePanel(self, "progress")
        self.panel.Layout()

class App(wx.App):
    def OnInit(self):
        frame = MainFrame()
        self.SetTopWindow(frame)
        frame.Show()
        return True

App(redirect = False).MainLoop()
이올린에 북마크하기(0) 이올린에 추천하기(0)
2007/05/25 11:38 2007/05/25 11:38
import wx

class TestFrame(wx.Frame):
    def __init__(self, parent, title):
        wx.Frame.__init__(self, parent, -1, title, pos=(0, 0), size=(320, 240))
        self.CentreOnScreen(wx.BOTH)

        # CreateTree
        tree = wx.TreeCtrl(self, -1, wx.DefaultPosition, wx.DefaultSize, wx.TR_HAS_BUTTONS|wx.TR_LINES_AT_ROOT)

        # AddRoot
        root = tree.AddRoot("root")

        # AddChild
        node = tree.AppendItem(root, "node1")
        node = tree.AppendItem(root, "node2")

        # ExpandTree
        tree.Expand(root)

        tree.Bind(wx.EVT_TREE_ITEM_RIGHT_CLICK, self.__OnRightClickItem)

        self.tree = tree
        self.root = root

    def __OnRightClickItem(self, event):
        print "RClickItem"
        self.tree.Delete(event.GetItem())
        pass

class TestApp(wx.App):
    def OnInit(self):
        "OnInit"
        frame = TestFrame(None, "TestApp")
        frame.Show()
        self.SetTopWindow(frame)
        return True

    def OnExit(self):
        "OnExit"
        pass

TestApp(redirect=False).MainLoop()
이올린에 북마크하기(0) 이올린에 추천하기(0)
2007/05/25 11:13 2007/05/25 11:13
import wx

class ReadOnlyTextCtrl(wx.TextCtrl):
    def __init__(self, *args, **kwargs):
        wx.TextCtrl.__init__(self, *args, **kwargs)
        self.SetEditable(False)
        self.SetBackgroundColour(self.GetParent().GetBackgroundColour())

class TestFrame(wx.Frame):
    def __init__(self, parent, title):
        wx.Frame.__init__(self, parent, -1, title, pos=(0, 0), size=(320, 240))
        self.CentreOnScreen(wx.BOTH)

        sizer = wx.FlexGridSizer(3, 3, 5, 10)
        sizer.Add(ReadOnlyTextCtrl(self, -1, "Name:"), 0, wx.ALL, 0)
        sizer.Add(ReadOnlyTextCtrl(self, -1, "Song Young-jin", size = (200, 20)), 0, wx.FIXED_MINSIZE, 0)
        sizer.Add((0, 0), 100, wx.ALL, 0)
        sizer.Add(ReadOnlyTextCtrl(self, -1, "Homepage:"), 0, wx.ALL, 0)
        sizer.Add(ReadOnlyTextCtrl(self, -1, "myevan.net"), 0, wx.ALL, 0)
        sizer.Add((0, 0), 100, wx.ALL, 0)
        sizer.Add(ReadOnlyTextCtrl(self, -1, "Wife Homepage:"), 0, wx.ALL, 0)
        sizer.Add(ReadOnlyTextCtrl(self, -1, "imp17.com"), 0, wx.ALL, 0)
        self.SetSizer(sizer)
        self.SetAutoLayout(True)

class TestApp(wx.App):
    def OnInit(self):
        "OnInit"
        frame = TestFrame(None, "TestApp")
        frame.Show()
        self.SetTopWindow(frame)
        return True

    def OnExit(self):
        "OnExit"
        pass

TestApp(redirect=False).MainLoop()
이올린에 북마크하기(0) 이올린에 추천하기(0)
2007/05/23 20:39 2007/05/23 20:39

wx파이썬 트리 컨트롤

Posted at 2007/05/03 14:45// Posted in wxPython/wxTreeCtrl
import wx

TREEICON_ROOT = 0
TREEICON_NODE = 1

class TestFrame(wx.Frame):
    def __init__(self, parent, title):
        wx.Frame.__init__(self, parent, -1, title, pos=(0, 0), size=(320, 240))
        self.CentreOnScreen(wx.BOTH)

        # CreateTree
        tree = wx.TreeCtrl(self, -1, wx.DefaultPosition, wx.DefaultSize, wx.TR_HAS_BUTTONS|wx.TR_LINES_AT_ROOT)

        # LoadTreeIcons
        treeIcons = self.__LoadTreeIcons("res/treeimg.bmp")
        tree.SetImageList(treeIcons)

        # AddRoot
        root = tree.AddRoot("root")
        tree.SetPyData(root, None)
        tree.SetItemImage(root, TREEICON_ROOT, wx.TreeItemIcon_Normal)
        tree.SetItemImage(root, TREEICON_ROOT, wx.TreeItemIcon_Expanded)

        # AddChild
        node = tree.AppendItem(root, "node1")
        tree.SetPyData(node, None)
        tree.SetItemImage(node, TREEICON_NODE, wx.TreeItemIcon_Normal)
        tree.SetItemImage(node, TREEICON_NODE, wx.TreeItemIcon_Expanded)

        node = tree.AppendItem(root, "node2")
        tree.SetPyData(node, None)
        tree.SetItemImage(node, TREEICON_NODE, wx.TreeItemIcon_Normal)
        tree.SetItemImage(node, TREEICON_NODE, wx.TreeItemIcon_Expanded)

        # ExpandTree
        tree.Expand(root)

        self.treeIcons = treeIcons
        self.tree = tree
        self.root = root

    def __LoadTreeIcons(self, fileName):
        icon_width = 16
        icon_height = 16

        img = wx.Image(fileName)
        img.SetMaskColour(255, 0, 255)
        img.SetMask(True)

        bmp = wx.BitmapFromImage(img)

        self.bmp = bmp

        imgList = wx.ImageList(icon_width, icon_height)

        count = bmp.GetWidth() // icon_width

        x = 0
        for i in xrange(count):
            icon = bmp.GetSubBitmap(wx.Rect(x, 0, icon_width, icon_height))
            x += icon_width

            imgList.Add(icon)

        return imgList

class TestApp(wx.App):
    def OnInit(self):
        "OnInit"
        frame = TestFrame(None, "TestApp")
        frame.Show()
        self.SetTopWindow(frame)
        return True

    def OnExit(self):
        "OnExit"
        pass

TestApp(redirect=False).MainLoop()
이올린에 북마크하기(0) 이올린에 추천하기(0)
2007/05/03 14:45 2007/05/03 14:45
# -*- coding: cp949 -*-
import wx

def BitmapSpliter(bmp, iconSize, step):
    x = 0

    count = bmp.GetWidth() // step

    for i in xrange(count):
        yield bmp.GetSubBitmap(wx.Rect(x, 0, iconSize[0], iconSize[1]))
        x += step

class TestFrame(wx.Frame):
    def __init__(self, parent, title):
        wx.Frame.__init__(self, parent, -1, title, pos=(0, 0), size=(320, 240))
        self.CentreOnScreen(wx.BOTH)

        self.__BuildToolBar()

    def __BuildToolBar(self):
        tb = self.CreateToolBar(wx.TB_HORIZONTAL|wx.NO_BORDER|wx.TB_FLAT|wx.TB_TEXT)

        iconStep = 16
        iconSize = (15, 15)
        tb.SetToolBitmapSize(iconSize)

        # 이미지를 읽어 비트맵으로 만든다
        img = wx.Image("res/toolbar.bmp")

        # 첫번째 픽셀값을 마스크로 사용한다
        r, g, b = (ord(e) for e in img.GetData()[:3])
        img.SetMaskColour(r, g, b)
        img.SetMask(True)

        toolBarBmp = wx.BitmapFromImage(img)

        # 비트맵 이미지를 일정 단위로 나눈다
        toolBarIcons = [icon for icon in BitmapSpliter(toolBarBmp, iconSize, iconStep)]

        # 툴바 아이콘을 추가한다
        tb.AddSimpleTool(101, toolBarIcons[0], "새 파일", "")
        tb.AddSimpleTool(102, toolBarIcons[1], "파일 열기", "")
        tb.AddSimpleTool(103, toolBarIcons[2], "파일 추가", "")
        tb.AddSimpleTool(104, toolBarIcons[3], "파일 제거", "")
        tb.AddSeparator()
        tb.AddSimpleTool(105, toolBarIcons[4], "도움말", "")

        tb.Realize()

        # 특정 툴바 아이콘을 사용 불가능하게 만든다
        tb.EnableTool(104, False)

class TestApp(wx.App):
    def OnInit(self):
        frame = TestFrame(None, "툴바")
        frame.Show()
        self.SetTopWindow(frame)
        return True

    def OnExit(self):
        pass

TestApp(redirect=False).MainLoop()
이올린에 북마크하기(0) 이올린에 추천하기(0)
2007/05/03 14:08 2007/05/03 14:08

wx파이썬 이미지 만들기

Posted at 2007/05/03 13:55// Posted in wxPython/wxImage
import wx
import struct

class TestFrame(wx.Frame):
    def __init__(self, parent, title):
        wx.Frame.__init__(self, parent, -1, title, pos=(0, 0), size=(320, 240))
        self.CentreOnScreen(wx.BOTH)


        img_width = 128
        img_height = 64

        lineList = []
        for i in xrange(img_height):
            p = 255 * i / img_height
            lineList.append(struct.pack("=BBB", p, p, p) * img_width)

        img = wx.ImageFromData(img_width, img_height, "".join(lineList))

        self.bmp = wx.BitmapFromImage(img)
        self.Bind(wx.EVT_PAINT, self.__OnPaint)

    def __OnPaint(self, event):
        dc = wx.PaintDC(self)
        dc.DrawBitmap(self.bmp, 50, 10, True)

class TestApp(wx.App):
    def OnInit(self):
        "OnInit"
        frame = TestFrame(None, "TestApp")
        frame.Show()
        self.SetTopWindow(frame)
        return True

    def OnExit(self):
        "OnExit"
        pass

TestApp(redirect=False).MainLoop()
이올린에 북마크하기(0) 이올린에 추천하기(0)
2007/05/03 13:55 2007/05/03 13:55

wx파이썬 이미지 불러오기

Posted at 2007/05/03 12:32// Posted in wxPython/wxImage
import wx

class TestFrame(wx.Frame):
    def __init__(self, parent, title):
        wx.Frame.__init__(self, parent, -1, title, pos=(0, 0), size=(320, 240))
        self.CentreOnScreen(wx.BOTH)

        self.bmp = wx.BitmapFromImage(wx.Image("test.bmp"))
        self.Bind(wx.EVT_PAINT, self.__OnPaint)

    def __OnPaint(self, event):
        dc = wx.PaintDC(self)
        dc.DrawBitmap(self.bmp, 50, 10, True)

class TestApp(wx.App):
    def OnInit(self):
        "OnInit"
        frame = TestFrame(None, "TestApp")
        frame.Show()
        self.SetTopWindow(frame)
        return True

    def OnExit(self):
        "OnExit"
        pass

TestApp(redirect=False).MainLoop()
이올린에 북마크하기(0) 이올린에 추천하기(0)
2007/05/03 12:32 2007/05/03 12:32

wx파이썬 메시지 상자

Posted at 2007/05/03 12:16// Posted in wxPython/wxApp
# -*- coding:cp949 -*-
import wx

class TestApp(wx.App):
    def OnInit(self):
        parent = None
        dlg = wx.MessageDialog(parent,
                "메시지 내용입니다",
                "메시지 타이틀",
                wx.OK | wx.ICON_INFORMATION)

        dlg.ShowModal()
        dlg.Destroy()

        return True

TestApp(redirect=False).MainLoop()
이올린에 북마크하기(0) 이올린에 추천하기(0)
2007/05/03 12:16 2007/05/03 12:16

wx파이썬 도킹 윈도우(docking window)

Posted at 2007/05/02 20:55// Posted in wxPython/wxFrame
import wx
import wx.aui

class SizeReportCtrl(wx.PyControl):

    def __init__(self, parent, id=wx.ID_ANY, pos=wx.DefaultPosition,
            size=wx.DefaultSize, mgr=None):

        wx.PyControl.__init__(self, parent, id, pos, size, wx.NO_BORDER)

        self._mgr = mgr

        self.Bind(wx.EVT_PAINT, self.OnPaint)
        self.Bind(wx.EVT_SIZE, self.OnSize)
        self.Bind(wx.EVT_ERASE_BACKGROUND, self.OnEraseBackground)


    def OnPaint(self, event):

        dc = wx.PaintDC(self)

        size = self.GetClientSize()
        s = ("Size: %d x %d")%(size.x, size.y)

        dc.SetFont(wx.NORMAL_FONT)
        w, height = dc.GetTextExtent(s)
        height = height + 3
        dc.SetBrush(wx.WHITE_BRUSH)
        dc.SetPen(wx.WHITE_PEN)
        dc.DrawRectangle(0, 0, size.x, size.y)
        dc.SetPen(wx.LIGHT_GREY_PEN)
        dc.DrawLine(0, 0, size.x, size.y)
        dc.DrawLine(0, size.y, size.x, 0)
        dc.DrawText(s, (size.x-w)/2, ((size.y-(height*5))/2))

        if self._mgr:

            pi = self._mgr.GetPane(self)

            s = ("Layer: %d")%pi.dock_layer
            w, h = dc.GetTextExtent(s)
            dc.DrawText(s, (size.x-w)/2, ((size.y-(height*5))/2)+(height*1))

            s = ("Dock: %d Row: %d")%(pi.dock_direction, pi.dock_row)
            w, h = dc.GetTextExtent(s)
            dc.DrawText(s, (size.x-w)/2, ((size.y-(height*5))/2)+(height*2))

            s = ("Position: %d")%pi.dock_pos
            w, h = dc.GetTextExtent(s)
            dc.DrawText(s, (size.x-w)/2, ((size.y-(height*5))/2)+(height*3))

            s = ("Proportion: %d")%pi.dock_proportion
            w, h = dc.GetTextExtent(s)
            dc.DrawText(s, (size.x-w)/2, ((size.y-(height*5))/2)+(height*4))


    def OnEraseBackground(self, event):
        # intentionally empty
        pass


    def OnSize(self, event):

        self.Refresh()
        event.Skip()


class TestFrame(wx.Frame):
    def __init__(self, parent, title):
        wx.Frame.__init__(self, parent, -1, title, pos=(0, 0), size=(640, 480))
        self.CentreOnScreen(wx.BOTH)

        self.SetMinSize(wx.Size(400, 300))

        mgr = wx.aui.AuiManager()
        mgr.SetManagedWindow(self)
        self.mgr = mgr

        self.mgr.AddPane(
                self.CreateSizeReportCtrl(),
                wx.aui.AuiPaneInfo().Name("left").Caption("Left Pane").
                Left().Layer(1).Position(1).CloseButton(True).MaximizeButton(True))
        self.mgr.AddPane(
                self.CreateSizeReportCtrl(),
                wx.aui.AuiPaneInfo().Name("bottom").Caption("Bottom Pane").
                Bottom().Layer(1).Position(1).CloseButton(True).MaximizeButton(True))

        self.mgr.AddPane(
                self.CreateSizeReportCtrl(),
                wx.aui.AuiPaneInfo().Name("main").CenterPane())

        self.mgr.Update()

    def CreateSizeReportCtrl(self, width=80, height=80):
        return SizeReportCtrl(self, -1, wx.DefaultPosition, wx.Size(width, height), self.mgr)


class TestApp(wx.App):
    def OnInit(self):
        "OnInit"
        frame = TestFrame(None, "TestApp")
        frame.Show()
        self.SetTopWindow(frame)
        return True

    def OnExit(self):
        "OnExit"
        pass

TestApp(redirect=False).MainLoop()
이올린에 북마크하기(0) 이올린에 추천하기(0)
2007/05/02 20:55 2007/05/02 20:55