Skip to content

Commit 504fb19

Browse files
neroistneroist
committed
add text-editor example
1 parent 73e0233 commit 504fb19

29 files changed

+9944
-0
lines changed

‎examples/text-editor/main.py‎

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
from tkinter import filedialog
2+
from webui import webui
3+
4+
import tkinter as tk
5+
import base64 as b64
6+
7+
file_path = ""
8+
9+
def encodeStr(string: str) -> str:
10+
string_bytes = string.encode("ascii")
11+
b64_bytes = b64.b64encode(string_bytes)
12+
b64_string = b64_bytes.decode("ascii")
13+
14+
return b64_string
15+
16+
def close(e: webui.event):
17+
print("Exit.")
18+
19+
# Close all opened windows
20+
webui.exit()
21+
22+
def openFile(e: webui.event):
23+
global file_path
24+
25+
print("Open.")
26+
27+
# Initialize tkinker
28+
root = tk.Tk()
29+
root.withdraw()
30+
31+
# Open file dialog
32+
file_path = filedialog.askopenfilename()
33+
34+
# If no file was chosen, return
35+
if len(file_path) == 0:
36+
return
37+
38+
with open(file_path) as file:
39+
file_content = file.read() # read file contents into variable
40+
41+
# Send data back to Javascript
42+
e.window.run(f"addText('{encodeStr(file_content)}')")
43+
e.window.run(f"SetFile('{encodeStr(file_path)}')")
44+
45+
def save(e: webui.event):
46+
print("Save.")
47+
48+
with open(file_path, "w") as file:
49+
file.write(e.data) # Write data received from the UI
50+
51+
def main():
52+
# Create new window
53+
window = webui.window()
54+
55+
# Bind HTML element IDs with Python functions
56+
window.bind("Open", openFile)
57+
window.bind("Save", save)
58+
window.bind("Close", close)
59+
60+
# Show the window
61+
window.show("ui/MainWindow.html")
62+
63+
# Wait until all windows get closed
64+
webui.wait()
65+
66+
if __name__ == "__main__":
67+
main()

‎examples/text-editor/ui/MainWindow.html‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<link rel="icon" type="image/png" href="img/icon.png" />
6+
<title>Text Editor in Python using WebUI</title>
7+
<link rel="stylesheet" href="css/style.css">
8+
<link rel="stylesheet" href="css/lucario.css">
9+
<link rel="stylesheet" href="css/codemirror.min.css">
10+
<link rel="stylesheet" href="css/all.min.css">
11+
12+
<script src="js/codemirror.min.js"></script>
13+
<script src="js/xml.min.js"></script>
14+
<script src="js/css.min.js"></script>
15+
<script src="js/javascript.min.js"></script>
16+
<script src="js/clike.min.js"></script>
17+
<script src="js/python.min.js"></script>
18+
</head>
19+
<body>
20+
<div class="topbar"></div>
21+
<nav>
22+
<ul>
23+
<li>
24+
<a id="Open"><i class="fas fa-folder-open"></i></a>
25+
</li>
26+
<li id="SaveLi" style="pointer-events: none; color: #7ca0df;">
27+
<a onclick="SaveFile();"><i class="fa fa-floppy-disk"></i></a>
28+
</li>
29+
<li>
30+
<a id="Close"><i class="fas fa-circle-xmark"></i></a>
31+
</li>
32+
<li>
33+
<a id="About"><i class="fas fa-question-circle"></i></a>
34+
</li>
35+
</ul>
36+
</nav>
37+
<div class="main" id="main">
38+
<textarea id="editor"></textarea>
39+
</div>
40+
<div id="about-box" class="about-box">
41+
<div class="about-box-content">
42+
<h1>WebUI Text Editor</h1>
43+
v1.1
44+
<p>Example of a text editor software in Python using WebUI library.</p>
45+
<p><a href="https://webui.me" target="_blank">webui.me</a> | (C)2023 Hassan Draga</p>
46+
</div>
47+
</div>
48+
<script src="/webui.js"></script>
49+
<script src="js/ui.js"></script>
50+
</body>
51+
</html>

‎examples/text-editor/ui/css/all.min.css‎

Lines changed: 9 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎examples/text-editor/ui/css/codemirror.min.css‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎examples/text-editor/ui/css/lucario.css‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
/*
2+
Name: lucario
3+
Author: Raphael Amorim
4+
Original Lucario color scheme (https://github.com/raphamorim/lucario)
5+
Modified for WebUI Text Editor.
6+
*/
7+
8+
.cm-s-lucario.CodeMirror, .cm-s-lucario .CodeMirror-gutters {
9+
/* background-color: #2b3e50 !important; */
10+
color: #f8f8f2 !important;
11+
border: none;
12+
background: #f8f9fa !important;
13+
background-color: rgba(0, 0, 0, .0) !important;
14+
}
15+
.cm-s-lucario .CodeMirror-gutters { color: #2b3e50; }
16+
.cm-s-lucario .CodeMirror-cursor { border-left: solid thin #E6C845; }
17+
.cm-s-lucario .CodeMirror-linenumber { color: #f8f8f2; background-color: rgba(0, 0, 0, .2) !important; }
18+
.cm-s-lucario .CodeMirror-selected { background: #243443; }
19+
.cm-s-lucario .CodeMirror-line::selection, .cm-s-lucario .CodeMirror-line > span::selection, .cm-s-lucario .CodeMirror-line > span > span::selection { background: #243443; }
20+
.cm-s-lucario .CodeMirror-line::-moz-selection, .cm-s-lucario .CodeMirror-line > span::-moz-selection, .cm-s-lucario .CodeMirror-line > span > span::-moz-selection { background: #243443; }
21+
.cm-s-lucario span.cm-comment { color: #5c98cd; }
22+
.cm-s-lucario span.cm-string, .cm-s-lucario span.cm-string-2 { color: #E6DB74; }
23+
.cm-s-lucario span.cm-number { color: #ca94ff; }
24+
.cm-s-lucario span.cm-variable { color: #f8f8f2; }
25+
.cm-s-lucario span.cm-variable-2 { color: #f8f8f2; }
26+
.cm-s-lucario span.cm-def { color: #72C05D; }
27+
.cm-s-lucario span.cm-operator { color: #66D9EF; }
28+
.cm-s-lucario span.cm-keyword { color: #ff6541; }
29+
.cm-s-lucario span.cm-atom { color: #bd93f9; }
30+
.cm-s-lucario span.cm-meta { color: #f8f8f2; }
31+
.cm-s-lucario span.cm-tag { color: #ff6541; }
32+
.cm-s-lucario span.cm-attribute { color: #66D9EF; }
33+
.cm-s-lucario span.cm-qualifier { color: #72C05D; }
34+
.cm-s-lucario span.cm-property { color: #f8f8f2; }
35+
.cm-s-lucario span.cm-builtin { color: #72C05D; }
36+
.cm-s-lucario span.cm-variable-3, .cm-s-lucario span.cm-type { color: #ffb86c; }
37+
.cm-s-lucario .CodeMirror-activeline-background { background: #243443; }
38+
.cm-s-lucario .CodeMirror-matchingbracket { text-decoration: underline; color: white !important; }
39+
.cm-s-lucario .CodeMirror-scroll { overflow: hidden; }

‎examples/text-editor/ui/css/style.css‎

Lines changed: 110 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,110 @@
1+
body {
2+
margin: 0;
3+
padding: 0;
4+
height: 100vh;
5+
font-family: 'Courier New', Courier, monospace;
6+
background-image: linear-gradient(to right top, #8e44ad 0%, #3498db 100%);
7+
background-repeat: no-repeat;
8+
background-position: center center;
9+
background-size: cover;
10+
background-attachment : fixed;
11+
color: #ddecf9;
12+
}
13+
14+
.topbar {
15+
width: 100%;
16+
height: 4px;
17+
background-image: linear-gradient(to right, #4ed2e7 0%, #db57eb 50%, #f98818 100%);
18+
}
19+
20+
header {
21+
color: #fff;
22+
}
23+
24+
/* Nav */
25+
26+
nav {
27+
margin: 0 auto;
28+
padding: 0px;
29+
text-shadow: 1px 1px 2px #000000;
30+
position: relative;
31+
z-index: 99;
32+
font-family: 'Font Awesome 5 Free';
33+
font-size: 18px;
34+
}
35+
36+
nav ul {
37+
margin-top: 0px;
38+
margin-bottom: 0px;
39+
text-align: center;
40+
background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 25%, rgba(255, 255, 255, 0.2) 75%, rgba(255, 255, 255, 0) 100%);
41+
box-shadow: 0 0 25px rgba(0, 0, 0, 0.1), inset 0 0 1px rgba(255, 255, 255, 0.6);
42+
cursor: pointer;
43+
}
44+
45+
nav ul li {
46+
display: inline-block;
47+
}
48+
49+
nav ul li a {
50+
padding: 18px;
51+
font-family: "Open Sans";
52+
text-transform:uppercase;
53+
text-decoration: none;
54+
display: block;
55+
}
56+
57+
nav ul li a:hover {
58+
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1), inset 0 0 1px rgba(255, 255, 255, 0.6);
59+
background: rgba(255, 255, 255, 0.1);
60+
}
61+
62+
/* Code */
63+
64+
.main {
65+
padding: 0px;
66+
}
67+
68+
/* About */
69+
70+
.about-box {
71+
display: none;
72+
position: fixed;
73+
z-index: 1;
74+
left: 0;
75+
top: 0;
76+
width: 100%;
77+
height: 100%;
78+
background-image: linear-gradient(to right top, #8e44ad 0%, #3498db 100%);
79+
}
80+
81+
.about-box-content {
82+
background-image: linear-gradient(to right top, #8e44ad 0%, #3498db 100%);
83+
position: absolute;
84+
margin: 0;
85+
padding: 10px;
86+
width: 30%;
87+
border-radius: 5px;
88+
top: 50%;
89+
left: 50%;
90+
transform: translate(-50%, -50%);
91+
}
92+
93+
.about-box-content h1 {
94+
text-align: center;
95+
}
96+
97+
.about-box-content a {
98+
color: inherit;
99+
}
100+
101+
.CodeMirror {
102+
height: 100%;
103+
font-family: 'Courier New', Courier, monospace;
104+
font-size: 16px;
105+
text-shadow: 1px 1px 2px #000000;
106+
}
107+
108+
.CodeMirror-scroll {
109+
110+
}

‎examples/text-editor/ui/img/icon.png‎

1.46 KB
Loading

‎examples/text-editor/ui/js/clike.min.js‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎examples/text-editor/ui/js/codemirror.min.js‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎examples/text-editor/ui/js/css.min.js‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)