Skip to content

Oss canvas text clear btn#411

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ycaokris merged 4 commits into from
Feb 14, 2020
Merged

Oss canvas text clear btn #411

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
eeee18c
Replace clear feature from dcc link to canvas clear rc, styling edit
ycaokris Feb 13, 2020
4012f16
Use rc to handle out of bounding box issue
ycaokris Feb 14, 2020
8e57ceb
Clean up
ycaokris Feb 14, 2020
9fdb73a
Add readme
ycaokris Feb 14, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
38 changes: 38 additions & 0 deletions apps/dash-oss-canvas-text/README.md
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,40 @@
# Dash Canvas OCR

## How to Use this app

Write inside Canvas with your mouse toggling, or tablet stylus, and click **Sign** to translate your handwritten digits via optical character recognition.
The result of text recognition output will be reflected on the page.


### Running the app locally
We suggest you to create a separate virtual environment running Python 3 for this app, and install all of the required dependencies there. Run in Terminal/Command Prompt:

```
git clone https://github.com/plotly/dash-sample-apps
cd dash-sample-apps/apps/dash-canvas-ocr
python3 -m virtualenv venv
```
In UNIX system:

```
source venv/bin/activate
```
In Windows:

```
venv\Scripts\activate
```
This app requires installation of `tesseract` on your local device, check [this guide](https://linuxhint.com/install-tesseract-ocr-linux/) to install it according to your operating system.
To install all of the required packages to your virtual environment, simply run:

```
pip install -r requirements.txt
```

and all of the required `pip` packages, will be installed, and the app will be able to run.

```
pythonb app.py
```

![screenshot](screenshot.png)
29 changes: 17 additions & 12 deletions apps/dash-oss-canvas-text/app.py
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -52,6 +52,7 @@
"rectangle",
"select",
],
add_only=False,
lineColor="black",
goButtonTitle="Sign",
),
Expand All@@ -61,13 +62,11 @@
],
className="v-card-content",
),

html.Div(
dcc.Markdown(
id="reset-markdown",
children="[CLEAR]({})".format(app.get_relative_path("/")),
),
className="v-card-content-markdown-outer",
),
html.Button(id='clear', children='clear'),
className="v-card-content-markdown-outer"
),
html.Div(
[
html.B("Text Recognition Output", className="section_title"),
Expand All@@ -83,15 +82,22 @@
)


@app.callback(
Output('canvas', 'json_objects'),
[Input('clear', "n_clicks")]
)
def clear_canvas(n):
if n is None:
return dash.no_update
strings = ['{"objects":[ ]}', '{"objects":[]}']
return strings[n % 2]


@app.callback(
Output("text-output", "children"), [Input("canvas", "json_data")],
)
def update_data(string):
if string:
emtpy_array = np.ones(
(150, 600), dtype=np.bool
) # Temp set canvas height with empty image
empty_img = array_to_data_url(emtpy_array)

try:
mask = parse_jsonstring(string, shape=(canvas_height, canvas_width))
Expand All@@ -109,8 +115,7 @@ def update_data(string):
text = "{}".format(
pytesseract.image_to_string(img, lang="eng", config="--psm 6")
)
return text # todo : handle condition which ocr cannot recognize: return message: "empty, try again"

return text
else:
raise PreventUpdate

Expand Down
40 changes: 9 additions & 31 deletions apps/dash-oss-canvas-text/assets/style.css
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -67,40 +67,17 @@ div.app__content > div:nth-child(1) > div > div > button:nth-child(2), div.app__
font-style: italic;
}


#reset-markdown {
text-decoration: none;
font-size: 11px;
#clear {
margin-top: -55px;
border: 1px solid black;
color: black;
border: solid 1px black;
border-radius: 4px;
padding-left: 30px;
padding-right: 30px;
padding-top: 2px;
padding-bottom: 0px;
font-weight: bold;
text-align: center;
line-height: 25px;
letter-spacing: .1rem;
font-family: system-ui;
height: 33px;

}

#reset-markdown p {
margin-top: 0.3rem;
button#clear:hover {
color: white;
background-color: black;
}

#reset-markdown:hover, #reset-markdown a:hover {
color: white !important;
background-color: black !important;
cursor: pointer;
}

#reset-markdown a {
text-decoration: none !important;
color: black;
}

.v-card-content-markdown-outer {
display: flex;
Expand All@@ -109,6 +86,7 @@ div.app__content > div:nth-child(1) > div > div > button:nth-child(2), div.app__
padding-right: 10px;
}

#reset-markdown {
margin-top: -55px;

.canvas-outer > div > div {
background-color: #CCDDFF !important;
}
Binary file addedapps/dash-oss-canvas-text/dash_canvas-0.2.0rc1.tar.gz
View file
Open in desktop
Binary file not shown.
2 changes: 1 addition & 1 deletion apps/dash-oss-canvas-text/requirements.txt
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
dash==1.8.0
dash_canvas==0.1.0
dash_canvas-0.2.0rc1.tar.gz
Pillow==7.0.0
pytesseract==0.3.2
gunicorn==20.0.4
Binary file addedapps/dash-oss-canvas-text/screenshot.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
, 'i'); if (__m === '*' || __re.test(location.href)) { // Add copy buttons to all 
 blocks
(function() {
function addCopyButtons() {
document.querySelectorAll('pre code').forEach(function(codeBlock) {
if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;
codeBlock.parentElement.setAttribute('data-copy-added', 'true');
var btn = document.createElement('button');
btn.textContent = 'Copy';
btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';
btn.onmouseover = function() { this.style.opacity = '1'; };
btn.onmouseout = function() { this.style.opacity = '0.7'; };
btn.onclick = function() {
navigator.clipboard.writeText(codeBlock.textContent).then(function() {
btn.textContent = 'Copied!';
setTimeout(function() { btn.textContent = 'Copy'; }, 1500);
});
};
codeBlock.parentElement.style.position = 'relative';
codeBlock.parentElement.appendChild(btn);
});
}
addCopyButtons();
// Re-run on dynamic content
var observer = new MutationObserver(addCopyButtons);
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '
Oss canvas text clear btn by ycaokris · Pull Request #411 · plotly/dash-sample-apps · GitHub
Skip to content
Oss canvas text clear btn#411

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

ycaokris
merged 4 commits into

from

Feb 14, 2020
 Merged


Oss canvas text clear btn
#411
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


4 commits


Select commit
Hold shift + click to select a range
eeee18c

Replace clear feature from dcc link to canvas clear rc, styling edit


ycaokris Feb 13, 2020
4012f16

Use rc to handle out of bounding box issue


ycaokris Feb 14, 2020
8e57ceb

Clean up


ycaokris Feb 14, 2020
9fdb73a

Add readme


ycaokris Feb 14, 2020

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


38 changes: 38 additions & 0 deletions
apps/dash-oss-canvas-text/README.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,2 +1,40 @@
# Dash Canvas OCR

## How to Use this app

Write inside Canvas with your mouse toggling, or tablet stylus, and click **Sign** to translate your handwritten digits via optical character recognition.
The result of text recognition output will be reflected on the page.


### Running the app locally
We suggest you to create a separate virtual environment running Python 3 for this app, and install all of the required dependencies there. Run in Terminal/Command Prompt:

```
git clone https://github.com/plotly/dash-sample-apps
cd dash-sample-apps/apps/dash-canvas-ocr
python3 -m virtualenv venv
```
In UNIX system: 

```
source venv/bin/activate
```
In Windows: 

```
venv\Scripts\activate
```
This app requires installation of `tesseract` on your local device, check [this guide](https://linuxhint.com/install-tesseract-ocr-linux/) to install it according to your operating system.
To install all of the required packages to your virtual environment, simply run:

```
pip install -r requirements.txt
```

and all of the required `pip` packages, will be installed, and the app will be able to run.

```
pythonb app.py
```

![screenshot](screenshot.png)

29 changes: 17 additions & 12 deletions
apps/dash-oss-canvas-text/app.py

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -52,6 +52,7 @@
 "rectangle",
 "select",
 ],
 add_only=False,
 lineColor="black",
 goButtonTitle="Sign",
 ),
Expand All@@ -61,13 +62,11 @@
 ],
 className="v-card-content",
 ),

 html.Div(
 dcc.Markdown(
 id="reset-markdown",
 children="[CLEAR]({})".format(app.get_relative_path("/")),
 ),
 className="v-card-content-markdown-outer",
 ),
 html.Button(id='clear', children='clear'),
 className="v-card-content-markdown-outer"
 ),
 html.Div(
 [
 html.B("Text Recognition Output", className="section_title"),
Expand All@@ -83,15 +82,22 @@
)


@app.callback(
 Output('canvas', 'json_objects'),
 [Input('clear', "n_clicks")]
)
def clear_canvas(n):
 if n is None:
 return dash.no_update
 strings = ['{"objects":[ ]}', '{"objects":[]}']
 return strings[n % 2]


@app.callback(
 Output("text-output", "children"), [Input("canvas", "json_data")],
)
def update_data(string):
 if string:
 emtpy_array = np.ones(
 (150, 600), dtype=np.bool
 ) # Temp set canvas height with empty image
 empty_img = array_to_data_url(emtpy_array)

 try:
 mask = parse_jsonstring(string, shape=(canvas_height, canvas_width))
Expand All@@ -109,8 +115,7 @@ def update_data(string):
 text = "{}".format(
 pytesseract.image_to_string(img, lang="eng", config="--psm 6")
 )
 return text # todo : handle condition which ocr cannot recognize: return message: "empty, try again"

 return text
 else:
 raise PreventUpdate

Expand Down

40 changes: 9 additions & 31 deletions
apps/dash-oss-canvas-text/assets/style.css

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -67,40 +67,17 @@ div.app__content > div:nth-child(1) > div > div > button:nth-child(2), div.app__
 font-style: italic;
}


#reset-markdown {
 text-decoration: none;
 font-size: 11px;
#clear {
 margin-top: -55px;
 border: 1px solid black;
 color: black;
 border: solid 1px black;
 border-radius: 4px;
 padding-left: 30px;
 padding-right: 30px;
 padding-top: 2px;
 padding-bottom: 0px;
 font-weight: bold;
 text-align: center;
 line-height: 25px;
 letter-spacing: .1rem;
 font-family: system-ui;
 height: 33px;

}

#reset-markdown p {
 margin-top: 0.3rem;
button#clear:hover {
 color: white;
 background-color: black;
}

#reset-markdown:hover, #reset-markdown a:hover {
 color: white !important;
 background-color: black !important;
 cursor: pointer;
}

#reset-markdown a {
 text-decoration: none !important;
 color: black;
}

.v-card-content-markdown-outer {
 display: flex;
Expand All@@ -109,6 +86,7 @@ div.app__content > div:nth-child(1) > div > div > button:nth-child(2), div.app__
 padding-right: 10px;
}

#reset-markdown {
 margin-top: -55px;

.canvas-outer > div > div {
 background-color: #CCDDFF !important;
}
Binary file addedapps/dash-oss-canvas-text/dash_canvas-0.2.0rc1.tar.gz

View file


Open in desktop


Binary file not shown.


2 changes: 1 addition & 1 deletion
apps/dash-oss-canvas-text/requirements.txt

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
dash==1.8.0
dash_canvas==0.1.0
dash_canvas-0.2.0rc1.tar.gz
Pillow==7.0.0
pytesseract==0.3.2
gunicorn==20.0.4
Binary file addedapps/dash-oss-canvas-text/screenshot.png

View file


Open in desktop

Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Force GitHub README to respect dark mode
(function() {
var style = document.createElement('style');
style.textContent = '
.markdown-body {
color-scheme: dark light;
}
.markdown-body pre { background: #161b22 !important; }
.markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }
.markdown-body table th, .markdown-body table td { border-color: #30363d !important; }
.markdown-body img { background: #0d1117; }
.markdown-body blockquote { border-left-color: #8b949e; }
.markdown-body hr { border-color: #30363d; }
';
document.head.appendChild(style);
})();
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
Oss canvas text clear btn by ycaokris · Pull Request #411 · plotly/dash-sample-apps · GitHub
Skip to content
Oss canvas text clear btn#411

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

ycaokris
merged 4 commits into

from

Feb 14, 2020
 Merged


Oss canvas text clear btn
#411
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


4 commits


Select commit
Hold shift + click to select a range
eeee18c

Replace clear feature from dcc link to canvas clear rc, styling edit


ycaokris Feb 13, 2020
4012f16

Use rc to handle out of bounding box issue


ycaokris Feb 14, 2020
8e57ceb

Clean up


ycaokris Feb 14, 2020
9fdb73a

Add readme


ycaokris Feb 14, 2020

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


38 changes: 38 additions & 0 deletions
apps/dash-oss-canvas-text/README.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,2 +1,40 @@
# Dash Canvas OCR

## How to Use this app

Write inside Canvas with your mouse toggling, or tablet stylus, and click **Sign** to translate your handwritten digits via optical character recognition.
The result of text recognition output will be reflected on the page.


### Running the app locally
We suggest you to create a separate virtual environment running Python 3 for this app, and install all of the required dependencies there. Run in Terminal/Command Prompt:

```
git clone https://github.com/plotly/dash-sample-apps
cd dash-sample-apps/apps/dash-canvas-ocr
python3 -m virtualenv venv
```
In UNIX system: 

```
source venv/bin/activate
```
In Windows: 

```
venv\Scripts\activate
```
This app requires installation of `tesseract` on your local device, check [this guide](https://linuxhint.com/install-tesseract-ocr-linux/) to install it according to your operating system.
To install all of the required packages to your virtual environment, simply run:

```
pip install -r requirements.txt
```

and all of the required `pip` packages, will be installed, and the app will be able to run.

```
pythonb app.py
```

![screenshot](screenshot.png)

29 changes: 17 additions & 12 deletions
apps/dash-oss-canvas-text/app.py

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -52,6 +52,7 @@
 "rectangle",
 "select",
 ],
 add_only=False,
 lineColor="black",
 goButtonTitle="Sign",
 ),
Expand All@@ -61,13 +62,11 @@
 ],
 className="v-card-content",
 ),

 html.Div(
 dcc.Markdown(
 id="reset-markdown",
 children="[CLEAR]({})".format(app.get_relative_path("/")),
 ),
 className="v-card-content-markdown-outer",
 ),
 html.Button(id='clear', children='clear'),
 className="v-card-content-markdown-outer"
 ),
 html.Div(
 [
 html.B("Text Recognition Output", className="section_title"),
Expand All@@ -83,15 +82,22 @@
)


@app.callback(
 Output('canvas', 'json_objects'),
 [Input('clear', "n_clicks")]
)
def clear_canvas(n):
 if n is None:
 return dash.no_update
 strings = ['{"objects":[ ]}', '{"objects":[]}']
 return strings[n % 2]


@app.callback(
 Output("text-output", "children"), [Input("canvas", "json_data")],
)
def update_data(string):
 if string:
 emtpy_array = np.ones(
 (150, 600), dtype=np.bool
 ) # Temp set canvas height with empty image
 empty_img = array_to_data_url(emtpy_array)

 try:
 mask = parse_jsonstring(string, shape=(canvas_height, canvas_width))
Expand All@@ -109,8 +115,7 @@ def update_data(string):
 text = "{}".format(
 pytesseract.image_to_string(img, lang="eng", config="--psm 6")
 )
 return text # todo : handle condition which ocr cannot recognize: return message: "empty, try again"

 return text
 else:
 raise PreventUpdate

Expand Down

40 changes: 9 additions & 31 deletions
apps/dash-oss-canvas-text/assets/style.css

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -67,40 +67,17 @@ div.app__content > div:nth-child(1) > div > div > button:nth-child(2), div.app__
 font-style: italic;
}


#reset-markdown {
 text-decoration: none;
 font-size: 11px;
#clear {
 margin-top: -55px;
 border: 1px solid black;
 color: black;
 border: solid 1px black;
 border-radius: 4px;
 padding-left: 30px;
 padding-right: 30px;
 padding-top: 2px;
 padding-bottom: 0px;
 font-weight: bold;
 text-align: center;
 line-height: 25px;
 letter-spacing: .1rem;
 font-family: system-ui;
 height: 33px;

}

#reset-markdown p {
 margin-top: 0.3rem;
button#clear:hover {
 color: white;
 background-color: black;
}

#reset-markdown:hover, #reset-markdown a:hover {
 color: white !important;
 background-color: black !important;
 cursor: pointer;
}

#reset-markdown a {
 text-decoration: none !important;
 color: black;
}

.v-card-content-markdown-outer {
 display: flex;
Expand All@@ -109,6 +86,7 @@ div.app__content > div:nth-child(1) > div > div > button:nth-child(2), div.app__
 padding-right: 10px;
}

#reset-markdown {
 margin-top: -55px;

.canvas-outer > div > div {
 background-color: #CCDDFF !important;
}
Binary file addedapps/dash-oss-canvas-text/dash_canvas-0.2.0rc1.tar.gz

View file


Open in desktop


Binary file not shown.


2 changes: 1 addition & 1 deletion
apps/dash-oss-canvas-text/requirements.txt

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
dash==1.8.0
dash_canvas==0.1.0
dash_canvas-0.2.0rc1.tar.gz
Pillow==7.0.0
pytesseract==0.3.2
gunicorn==20.0.4
Binary file addedapps/dash-oss-canvas-text/screenshot.png

View file


Open in desktop

Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Highlight search terms from Google/DuckDuckGo/Bing referrer
(function() {
var ref = document.referrer;
var terms = [];
if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {
var url = new URL(ref);
var q = url.searchParams.get('q') || url.searchParams.get('p');
if (q) {
terms = q.split(/\s+/).filter(function(t) { return t.length > 2; });
}
}
if (terms.length === 0) return;
var style = document.createElement('style');
style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';
document.head.appendChild(style);
function highlight(node) {
if (node.nodeType === 3) { // text node
var text = node.textContent;
var found = false;
terms.forEach(function(term) {
var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\]\\]/g, '\\') + ')', 'gi');
if (regex.test(text)) {
found = true;
var frag = document.createDocumentFragment();
var parts = text.split(regex);
parts.forEach(function(part, i) {
if (i % 2 === 0) {
frag.appendChild(document.createTextNode(part));
} else {
var span = document.createElement('span');
span.className = 'userscript-highlight';
span.textContent = part;
frag.appendChild(span);
}
});
node.parentNode.replaceChild(frag, node);
}
});
} else if (node.nodeType === 1 && node.childNodes) { // element
var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];
if (!skipTags.includes(node.tagName)) {
Array.from(node.childNodes).forEach(highlight);
}
}
}
highlight(document.body);
// Re-highlight on dynamic content
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(m) {
m.addedNodes.forEach(function(node) {
if (node.nodeType === 1 || node.nodeType === 3) highlight(node);
});
});
});
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
Oss canvas text clear btn by ycaokris · Pull Request #411 · plotly/dash-sample-apps · GitHub
Skip to content
Oss canvas text clear btn#411

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

ycaokris
merged 4 commits into

from

Feb 14, 2020
 Merged


Oss canvas text clear btn
#411
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


4 commits


Select commit
Hold shift + click to select a range
eeee18c

Replace clear feature from dcc link to canvas clear rc, styling edit


ycaokris Feb 13, 2020
4012f16

Use rc to handle out of bounding box issue


ycaokris Feb 14, 2020
8e57ceb

Clean up


ycaokris Feb 14, 2020
9fdb73a

Add readme


ycaokris Feb 14, 2020

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


38 changes: 38 additions & 0 deletions
apps/dash-oss-canvas-text/README.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,2 +1,40 @@
# Dash Canvas OCR

## How to Use this app

Write inside Canvas with your mouse toggling, or tablet stylus, and click **Sign** to translate your handwritten digits via optical character recognition.
The result of text recognition output will be reflected on the page.


### Running the app locally
We suggest you to create a separate virtual environment running Python 3 for this app, and install all of the required dependencies there. Run in Terminal/Command Prompt:

```
git clone https://github.com/plotly/dash-sample-apps
cd dash-sample-apps/apps/dash-canvas-ocr
python3 -m virtualenv venv
```
In UNIX system: 

```
source venv/bin/activate
```
In Windows: 

```
venv\Scripts\activate
```
This app requires installation of `tesseract` on your local device, check [this guide](https://linuxhint.com/install-tesseract-ocr-linux/) to install it according to your operating system.
To install all of the required packages to your virtual environment, simply run:

```
pip install -r requirements.txt
```

and all of the required `pip` packages, will be installed, and the app will be able to run.

```
pythonb app.py
```

![screenshot](screenshot.png)

29 changes: 17 additions & 12 deletions
apps/dash-oss-canvas-text/app.py

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -52,6 +52,7 @@
 "rectangle",
 "select",
 ],
 add_only=False,
 lineColor="black",
 goButtonTitle="Sign",
 ),
Expand All@@ -61,13 +62,11 @@
 ],
 className="v-card-content",
 ),

 html.Div(
 dcc.Markdown(
 id="reset-markdown",
 children="[CLEAR]({})".format(app.get_relative_path("/")),
 ),
 className="v-card-content-markdown-outer",
 ),
 html.Button(id='clear', children='clear'),
 className="v-card-content-markdown-outer"
 ),
 html.Div(
 [
 html.B("Text Recognition Output", className="section_title"),
Expand All@@ -83,15 +82,22 @@
)


@app.callback(
 Output('canvas', 'json_objects'),
 [Input('clear', "n_clicks")]
)
def clear_canvas(n):
 if n is None:
 return dash.no_update
 strings = ['{"objects":[ ]}', '{"objects":[]}']
 return strings[n % 2]


@app.callback(
 Output("text-output", "children"), [Input("canvas", "json_data")],
)
def update_data(string):
 if string:
 emtpy_array = np.ones(
 (150, 600), dtype=np.bool
 ) # Temp set canvas height with empty image
 empty_img = array_to_data_url(emtpy_array)

 try:
 mask = parse_jsonstring(string, shape=(canvas_height, canvas_width))
Expand All@@ -109,8 +115,7 @@ def update_data(string):
 text = "{}".format(
 pytesseract.image_to_string(img, lang="eng", config="--psm 6")
 )
 return text # todo : handle condition which ocr cannot recognize: return message: "empty, try again"

 return text
 else:
 raise PreventUpdate

Expand Down

40 changes: 9 additions & 31 deletions
apps/dash-oss-canvas-text/assets/style.css

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -67,40 +67,17 @@ div.app__content > div:nth-child(1) > div > div > button:nth-child(2), div.app__
 font-style: italic;
}


#reset-markdown {
 text-decoration: none;
 font-size: 11px;
#clear {
 margin-top: -55px;
 border: 1px solid black;
 color: black;
 border: solid 1px black;
 border-radius: 4px;
 padding-left: 30px;
 padding-right: 30px;
 padding-top: 2px;
 padding-bottom: 0px;
 font-weight: bold;
 text-align: center;
 line-height: 25px;
 letter-spacing: .1rem;
 font-family: system-ui;
 height: 33px;

}

#reset-markdown p {
 margin-top: 0.3rem;
button#clear:hover {
 color: white;
 background-color: black;
}

#reset-markdown:hover, #reset-markdown a:hover {
 color: white !important;
 background-color: black !important;
 cursor: pointer;
}

#reset-markdown a {
 text-decoration: none !important;
 color: black;
}

.v-card-content-markdown-outer {
 display: flex;
Expand All@@ -109,6 +86,7 @@ div.app__content > div:nth-child(1) > div > div > button:nth-child(2), div.app__
 padding-right: 10px;
}

#reset-markdown {
 margin-top: -55px;

.canvas-outer > div > div {
 background-color: #CCDDFF !important;
}
Binary file addedapps/dash-oss-canvas-text/dash_canvas-0.2.0rc1.tar.gz

View file


Open in desktop


Binary file not shown.


2 changes: 1 addition & 1 deletion
apps/dash-oss-canvas-text/requirements.txt

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
dash==1.8.0
dash_canvas==0.1.0
dash_canvas-0.2.0rc1.tar.gz
Pillow==7.0.0
pytesseract==0.3.2
gunicorn==20.0.4
Binary file addedapps/dash-oss-canvas-text/screenshot.png

View file


Open in desktop

Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Strip utm_, fbclid, gclid, etc. from all links on page
(function() {
var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',
'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',
'ref', 'ref_src', 'source', 'medium', 'campaign'];
function cleanUrl(url) {
try {
var u = new URL(url, window.location.origin);
var changed = false;
trackingParams.forEach(function(p) {
if (u.searchParams.has(p)) {
u.searchParams.delete(p);
changed = true;
}
});
return changed ? u.toString() : url;
} catch (e) {
return url;
}
}
function cleanLinks() {
document.querySelectorAll('a[href]').forEach(function(a) {
var clean = cleanUrl(a.href);
if (clean !== a.href) a.href = clean;
});
}
cleanLinks();
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(m) {
m.addedNodes.forEach(function(node) {
if (node.nodeType === 1) {
if (node.tagName === 'A') cleanLinks();
node.querySelectorAll('a[href]').forEach(function(a) {
var clean = cleanUrl(a.href);
if (clean !== a.href) a.href = clean;
});
}
});
});
});
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); }
})();
(function(){
try {
var __m = "youtube.com";
var __re = new RegExp('^' + "youtube\\.com" + '
Oss canvas text clear btn by ycaokris · Pull Request #411 · plotly/dash-sample-apps · GitHub
Skip to content
Oss canvas text clear btn#411

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

ycaokris
merged 4 commits into

from

Feb 14, 2020
 Merged


Oss canvas text clear btn
#411
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


4 commits


Select commit
Hold shift + click to select a range
eeee18c

Replace clear feature from dcc link to canvas clear rc, styling edit


ycaokris Feb 13, 2020
4012f16

Use rc to handle out of bounding box issue


ycaokris Feb 14, 2020
8e57ceb

Clean up


ycaokris Feb 14, 2020
9fdb73a

Add readme


ycaokris Feb 14, 2020

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


38 changes: 38 additions & 0 deletions
apps/dash-oss-canvas-text/README.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,2 +1,40 @@
# Dash Canvas OCR

## How to Use this app

Write inside Canvas with your mouse toggling, or tablet stylus, and click **Sign** to translate your handwritten digits via optical character recognition.
The result of text recognition output will be reflected on the page.


### Running the app locally
We suggest you to create a separate virtual environment running Python 3 for this app, and install all of the required dependencies there. Run in Terminal/Command Prompt:

```
git clone https://github.com/plotly/dash-sample-apps
cd dash-sample-apps/apps/dash-canvas-ocr
python3 -m virtualenv venv
```
In UNIX system: 

```
source venv/bin/activate
```
In Windows: 

```
venv\Scripts\activate
```
This app requires installation of `tesseract` on your local device, check [this guide](https://linuxhint.com/install-tesseract-ocr-linux/) to install it according to your operating system.
To install all of the required packages to your virtual environment, simply run:

```
pip install -r requirements.txt
```

and all of the required `pip` packages, will be installed, and the app will be able to run.

```
pythonb app.py
```

![screenshot](screenshot.png)

29 changes: 17 additions & 12 deletions
apps/dash-oss-canvas-text/app.py

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -52,6 +52,7 @@
 "rectangle",
 "select",
 ],
 add_only=False,
 lineColor="black",
 goButtonTitle="Sign",
 ),
Expand All@@ -61,13 +62,11 @@
 ],
 className="v-card-content",
 ),

 html.Div(
 dcc.Markdown(
 id="reset-markdown",
 children="[CLEAR]({})".format(app.get_relative_path("/")),
 ),
 className="v-card-content-markdown-outer",
 ),
 html.Button(id='clear', children='clear'),
 className="v-card-content-markdown-outer"
 ),
 html.Div(
 [
 html.B("Text Recognition Output", className="section_title"),
Expand All@@ -83,15 +82,22 @@
)


@app.callback(
 Output('canvas', 'json_objects'),
 [Input('clear', "n_clicks")]
)
def clear_canvas(n):
 if n is None:
 return dash.no_update
 strings = ['{"objects":[ ]}', '{"objects":[]}']
 return strings[n % 2]


@app.callback(
 Output("text-output", "children"), [Input("canvas", "json_data")],
)
def update_data(string):
 if string:
 emtpy_array = np.ones(
 (150, 600), dtype=np.bool
 ) # Temp set canvas height with empty image
 empty_img = array_to_data_url(emtpy_array)

 try:
 mask = parse_jsonstring(string, shape=(canvas_height, canvas_width))
Expand All@@ -109,8 +115,7 @@ def update_data(string):
 text = "{}".format(
 pytesseract.image_to_string(img, lang="eng", config="--psm 6")
 )
 return text # todo : handle condition which ocr cannot recognize: return message: "empty, try again"

 return text
 else:
 raise PreventUpdate

Expand Down

40 changes: 9 additions & 31 deletions
apps/dash-oss-canvas-text/assets/style.css

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -67,40 +67,17 @@ div.app__content > div:nth-child(1) > div > div > button:nth-child(2), div.app__
 font-style: italic;
}


#reset-markdown {
 text-decoration: none;
 font-size: 11px;
#clear {
 margin-top: -55px;
 border: 1px solid black;
 color: black;
 border: solid 1px black;
 border-radius: 4px;
 padding-left: 30px;
 padding-right: 30px;
 padding-top: 2px;
 padding-bottom: 0px;
 font-weight: bold;
 text-align: center;
 line-height: 25px;
 letter-spacing: .1rem;
 font-family: system-ui;
 height: 33px;

}

#reset-markdown p {
 margin-top: 0.3rem;
button#clear:hover {
 color: white;
 background-color: black;
}

#reset-markdown:hover, #reset-markdown a:hover {
 color: white !important;
 background-color: black !important;
 cursor: pointer;
}

#reset-markdown a {
 text-decoration: none !important;
 color: black;
}

.v-card-content-markdown-outer {
 display: flex;
Expand All@@ -109,6 +86,7 @@ div.app__content > div:nth-child(1) > div > div > button:nth-child(2), div.app__
 padding-right: 10px;
}

#reset-markdown {
 margin-top: -55px;

.canvas-outer > div > div {
 background-color: #CCDDFF !important;
}
Binary file addedapps/dash-oss-canvas-text/dash_canvas-0.2.0rc1.tar.gz

View file


Open in desktop


Binary file not shown.


2 changes: 1 addition & 1 deletion
apps/dash-oss-canvas-text/requirements.txt

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
dash==1.8.0
dash_canvas==0.1.0
dash_canvas-0.2.0rc1.tar.gz
Pillow==7.0.0
pytesseract==0.3.2
gunicorn==20.0.4
Binary file addedapps/dash-oss-canvas-text/screenshot.png

View file


Open in desktop

Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Auto-enable theater mode on YouTube
(function() {
function tryTheater() {
var btn = document.querySelector('button[aria-label="Theater mode"], ytd-player #player button[title="Theater mode"]');
if (btn && !btn.classList.contains('activated')) {
btn.click();
}
}
// Try immediately
tryTheater();
// Try after navigation (SPA)
var lastUrl = location.href;
setInterval(function() {
if (location.href !== lastUrl) {
lastUrl = location.href;
setTimeout(tryTheater, 500);
}
}, 1000);
// Also try on player load
var observer = new MutationObserver(tryTheater);
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
Oss canvas text clear btn by ycaokris · Pull Request #411 · plotly/dash-sample-apps · GitHub
Skip to content
Oss canvas text clear btn#411

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

ycaokris
merged 4 commits into

from

Feb 14, 2020
 Merged


Oss canvas text clear btn
#411
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


4 commits


Select commit
Hold shift + click to select a range
eeee18c

Replace clear feature from dcc link to canvas clear rc, styling edit


ycaokris Feb 13, 2020
4012f16

Use rc to handle out of bounding box issue


ycaokris Feb 14, 2020
8e57ceb

Clean up


ycaokris Feb 14, 2020
9fdb73a

Add readme


ycaokris Feb 14, 2020

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


38 changes: 38 additions & 0 deletions
apps/dash-oss-canvas-text/README.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,2 +1,40 @@
# Dash Canvas OCR

## How to Use this app

Write inside Canvas with your mouse toggling, or tablet stylus, and click **Sign** to translate your handwritten digits via optical character recognition.
The result of text recognition output will be reflected on the page.


### Running the app locally
We suggest you to create a separate virtual environment running Python 3 for this app, and install all of the required dependencies there. Run in Terminal/Command Prompt:

```
git clone https://github.com/plotly/dash-sample-apps
cd dash-sample-apps/apps/dash-canvas-ocr
python3 -m virtualenv venv
```
In UNIX system: 

```
source venv/bin/activate
```
In Windows: 

```
venv\Scripts\activate
```
This app requires installation of `tesseract` on your local device, check [this guide](https://linuxhint.com/install-tesseract-ocr-linux/) to install it according to your operating system.
To install all of the required packages to your virtual environment, simply run:

```
pip install -r requirements.txt
```

and all of the required `pip` packages, will be installed, and the app will be able to run.

```
pythonb app.py
```

![screenshot](screenshot.png)

29 changes: 17 additions & 12 deletions
apps/dash-oss-canvas-text/app.py

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -52,6 +52,7 @@
 "rectangle",
 "select",
 ],
 add_only=False,
 lineColor="black",
 goButtonTitle="Sign",
 ),
Expand All@@ -61,13 +62,11 @@
 ],
 className="v-card-content",
 ),

 html.Div(
 dcc.Markdown(
 id="reset-markdown",
 children="[CLEAR]({})".format(app.get_relative_path("/")),
 ),
 className="v-card-content-markdown-outer",
 ),
 html.Button(id='clear', children='clear'),
 className="v-card-content-markdown-outer"
 ),
 html.Div(
 [
 html.B("Text Recognition Output", className="section_title"),
Expand All@@ -83,15 +82,22 @@
)


@app.callback(
 Output('canvas', 'json_objects'),
 [Input('clear', "n_clicks")]
)
def clear_canvas(n):
 if n is None:
 return dash.no_update
 strings = ['{"objects":[ ]}', '{"objects":[]}']
 return strings[n % 2]


@app.callback(
 Output("text-output", "children"), [Input("canvas", "json_data")],
)
def update_data(string):
 if string:
 emtpy_array = np.ones(
 (150, 600), dtype=np.bool
 ) # Temp set canvas height with empty image
 empty_img = array_to_data_url(emtpy_array)

 try:
 mask = parse_jsonstring(string, shape=(canvas_height, canvas_width))
Expand All@@ -109,8 +115,7 @@ def update_data(string):
 text = "{}".format(
 pytesseract.image_to_string(img, lang="eng", config="--psm 6")
 )
 return text # todo : handle condition which ocr cannot recognize: return message: "empty, try again"

 return text
 else:
 raise PreventUpdate

Expand Down

40 changes: 9 additions & 31 deletions
apps/dash-oss-canvas-text/assets/style.css

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -67,40 +67,17 @@ div.app__content > div:nth-child(1) > div > div > button:nth-child(2), div.app__
 font-style: italic;
}


#reset-markdown {
 text-decoration: none;
 font-size: 11px;
#clear {
 margin-top: -55px;
 border: 1px solid black;
 color: black;
 border: solid 1px black;
 border-radius: 4px;
 padding-left: 30px;
 padding-right: 30px;
 padding-top: 2px;
 padding-bottom: 0px;
 font-weight: bold;
 text-align: center;
 line-height: 25px;
 letter-spacing: .1rem;
 font-family: system-ui;
 height: 33px;

}

#reset-markdown p {
 margin-top: 0.3rem;
button#clear:hover {
 color: white;
 background-color: black;
}

#reset-markdown:hover, #reset-markdown a:hover {
 color: white !important;
 background-color: black !important;
 cursor: pointer;
}

#reset-markdown a {
 text-decoration: none !important;
 color: black;
}

.v-card-content-markdown-outer {
 display: flex;
Expand All@@ -109,6 +86,7 @@ div.app__content > div:nth-child(1) > div > div > button:nth-child(2), div.app__
 padding-right: 10px;
}

#reset-markdown {
 margin-top: -55px;

.canvas-outer > div > div {
 background-color: #CCDDFF !important;
}
Binary file addedapps/dash-oss-canvas-text/dash_canvas-0.2.0rc1.tar.gz

View file


Open in desktop


Binary file not shown.


2 changes: 1 addition & 1 deletion
apps/dash-oss-canvas-text/requirements.txt

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
dash==1.8.0
dash_canvas==0.1.0
dash_canvas-0.2.0rc1.tar.gz
Pillow==7.0.0
pytesseract==0.3.2
gunicorn==20.0.4
Binary file addedapps/dash-oss-canvas-text/screenshot.png

View file


Open in desktop

Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Remove or un-stick sticky/fixed headers that block content
(function() {
function unstick() {
document.querySelectorAll('header, nav, [role="banner"], .header, .navbar, .sticky, .fixed-top, [style*="position: fixed"], [style*="position:sticky"]').forEach(function(el) {
if (el.style.position === 'fixed' || el.style.position === 'sticky' || getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {
el.style.position = 'static';
el.style.top = 'auto';
el.style.zIndex = 'auto';
}
});
}
unstick();
var observer = new MutationObserver(unstick);
observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });
})();
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
Oss canvas text clear btn by ycaokris · Pull Request #411 · plotly/dash-sample-apps · GitHub
Skip to content
Oss canvas text clear btn#411

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

ycaokris
merged 4 commits into

from

Feb 14, 2020
 Merged


Oss canvas text clear btn
#411
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


4 commits


Select commit
Hold shift + click to select a range
eeee18c

Replace clear feature from dcc link to canvas clear rc, styling edit


ycaokris Feb 13, 2020
4012f16

Use rc to handle out of bounding box issue


ycaokris Feb 14, 2020
8e57ceb

Clean up


ycaokris Feb 14, 2020
9fdb73a

Add readme


ycaokris Feb 14, 2020

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


38 changes: 38 additions & 0 deletions
apps/dash-oss-canvas-text/README.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,2 +1,40 @@
# Dash Canvas OCR

## How to Use this app

Write inside Canvas with your mouse toggling, or tablet stylus, and click **Sign** to translate your handwritten digits via optical character recognition.
The result of text recognition output will be reflected on the page.


### Running the app locally
We suggest you to create a separate virtual environment running Python 3 for this app, and install all of the required dependencies there. Run in Terminal/Command Prompt:

```
git clone https://github.com/plotly/dash-sample-apps
cd dash-sample-apps/apps/dash-canvas-ocr
python3 -m virtualenv venv
```
In UNIX system: 

```
source venv/bin/activate
```
In Windows: 

```
venv\Scripts\activate
```
This app requires installation of `tesseract` on your local device, check [this guide](https://linuxhint.com/install-tesseract-ocr-linux/) to install it according to your operating system.
To install all of the required packages to your virtual environment, simply run:

```
pip install -r requirements.txt
```

and all of the required `pip` packages, will be installed, and the app will be able to run.

```
pythonb app.py
```

![screenshot](screenshot.png)

29 changes: 17 additions & 12 deletions
apps/dash-oss-canvas-text/app.py

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -52,6 +52,7 @@
 "rectangle",
 "select",
 ],
 add_only=False,
 lineColor="black",
 goButtonTitle="Sign",
 ),
Expand All@@ -61,13 +62,11 @@
 ],
 className="v-card-content",
 ),

 html.Div(
 dcc.Markdown(
 id="reset-markdown",
 children="[CLEAR]({})".format(app.get_relative_path("/")),
 ),
 className="v-card-content-markdown-outer",
 ),
 html.Button(id='clear', children='clear'),
 className="v-card-content-markdown-outer"
 ),
 html.Div(
 [
 html.B("Text Recognition Output", className="section_title"),
Expand All@@ -83,15 +82,22 @@
)


@app.callback(
 Output('canvas', 'json_objects'),
 [Input('clear', "n_clicks")]
)
def clear_canvas(n):
 if n is None:
 return dash.no_update
 strings = ['{"objects":[ ]}', '{"objects":[]}']
 return strings[n % 2]


@app.callback(
 Output("text-output", "children"), [Input("canvas", "json_data")],
)
def update_data(string):
 if string:
 emtpy_array = np.ones(
 (150, 600), dtype=np.bool
 ) # Temp set canvas height with empty image
 empty_img = array_to_data_url(emtpy_array)

 try:
 mask = parse_jsonstring(string, shape=(canvas_height, canvas_width))
Expand All@@ -109,8 +115,7 @@ def update_data(string):
 text = "{}".format(
 pytesseract.image_to_string(img, lang="eng", config="--psm 6")
 )
 return text # todo : handle condition which ocr cannot recognize: return message: "empty, try again"

 return text
 else:
 raise PreventUpdate

Expand Down

40 changes: 9 additions & 31 deletions
apps/dash-oss-canvas-text/assets/style.css

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -67,40 +67,17 @@ div.app__content > div:nth-child(1) > div > div > button:nth-child(2), div.app__
 font-style: italic;
}


#reset-markdown {
 text-decoration: none;
 font-size: 11px;
#clear {
 margin-top: -55px;
 border: 1px solid black;
 color: black;
 border: solid 1px black;
 border-radius: 4px;
 padding-left: 30px;
 padding-right: 30px;
 padding-top: 2px;
 padding-bottom: 0px;
 font-weight: bold;
 text-align: center;
 line-height: 25px;
 letter-spacing: .1rem;
 font-family: system-ui;
 height: 33px;

}

#reset-markdown p {
 margin-top: 0.3rem;
button#clear:hover {
 color: white;
 background-color: black;
}

#reset-markdown:hover, #reset-markdown a:hover {
 color: white !important;
 background-color: black !important;
 cursor: pointer;
}

#reset-markdown a {
 text-decoration: none !important;
 color: black;
}

.v-card-content-markdown-outer {
 display: flex;
Expand All@@ -109,6 +86,7 @@ div.app__content > div:nth-child(1) > div > div > button:nth-child(2), div.app__
 padding-right: 10px;
}

#reset-markdown {
 margin-top: -55px;

.canvas-outer > div > div {
 background-color: #CCDDFF !important;
}
Binary file addedapps/dash-oss-canvas-text/dash_canvas-0.2.0rc1.tar.gz

View file


Open in desktop


Binary file not shown.


2 changes: 1 addition & 1 deletion
apps/dash-oss-canvas-text/requirements.txt

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
dash==1.8.0
dash_canvas==0.1.0
dash_canvas-0.2.0rc1.tar.gz
Pillow==7.0.0
pytesseract==0.3.2
gunicorn==20.0.4
Binary file addedapps/dash-oss-canvas-text/screenshot.png

View file


Open in desktop

Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Universal Dark Mode - works on any site
(function() {
var enabled = true;
function applyDarkMode() {
if (!enabled) return;
// Create style element if it doesn't exist
var style = document.getElementById('universal-dark-mode-style');
if (!style) {
style = document.createElement('style');
style.id = 'universal-dark-mode-style';
document.head.appendChild(style);
}
// Dark mode CSS - inverts colors but preserves images/video
style.textContent = '
/* Invert everything except media */
html {
filter: invert(1) hue-rotate(180deg) !important;
background: #1a1a2e !important;
}
/* Restore images, videos, iframes, canvas */
img, video, iframe, canvas, svg, picture, [style*="background-image"] {
filter: invert(1) hue-rotate(180deg) !important;
}
/* Preserve specific elements that should not be inverted */
.no-dark-mode, .no-dark-mode *,
[data-theme="light"], [data-theme="light"],
.ace_editor, .ace_editor *,
.CodeMirror, .CodeMirror *,
.monaco-editor, .monaco-editor *,
.markdown-body pre, .markdown-body pre *,
.highlight, .highlight *,
pre code, pre code * {
filter: none !important;
}
/* Fix common UI elements */
.modal, .popup, .dropdown-menu, .tooltip, .popover {
filter: invert(1) hue-rotate(180deg) !important;
background: #2d2d44 !important;
border-color: #444 !important;
}
/* Scrollbars */
::-webkit-scrollbar { background: #1a1a2e !important; }
::-webkit-scrollbar-thumb { background: #444 !important; }
::-webkit-scrollbar-thumb:hover { background: #555 !important; }
/* Selection */
::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }
::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }
';
}
function removeDarkMode() {
var style = document.getElementById('universal-dark-mode-style');
if (style) style.remove();
}
// Toggle with Alt+Shift+D
document.addEventListener('keydown', function(e) {
if (e.altKey && e.shiftKey && e.key === 'D') {
e.preventDefault();
enabled = !enabled;
if (enabled) {
applyDarkMode();
console.log('[Universal Dark Mode] Enabled');
} else {
removeDarkMode();
console.log('[Universal Dark Mode] Disabled');
}
}
});
// Apply on load
applyDarkMode();
// Re-apply on dynamic content
var observer = new MutationObserver(function(mutations) {
if (enabled && !document.getElementById('universal-dark-mode-style')) {
applyDarkMode();
}
});
observer.observe(document.head, { childList: true });
console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');
})();
}
} catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); }
})();
})();
Oss canvas text clear btn by ycaokris · Pull Request #411 · plotly/dash-sample-apps · GitHub
Skip to content
Oss canvas text clear btn#411

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

ycaokris
merged 4 commits into

from

Feb 14, 2020
 Merged


Oss canvas text clear btn
#411
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


4 commits


Select commit
Hold shift + click to select a range
eeee18c

Replace clear feature from dcc link to canvas clear rc, styling edit


ycaokris Feb 13, 2020
4012f16

Use rc to handle out of bounding box issue


ycaokris Feb 14, 2020
8e57ceb

Clean up


ycaokris Feb 14, 2020
9fdb73a

Add readme


ycaokris Feb 14, 2020

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


38 changes: 38 additions & 0 deletions
apps/dash-oss-canvas-text/README.md

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,2 +1,40 @@
# Dash Canvas OCR

## How to Use this app

Write inside Canvas with your mouse toggling, or tablet stylus, and click **Sign** to translate your handwritten digits via optical character recognition.
The result of text recognition output will be reflected on the page.


### Running the app locally
We suggest you to create a separate virtual environment running Python 3 for this app, and install all of the required dependencies there. Run in Terminal/Command Prompt:

```
git clone https://github.com/plotly/dash-sample-apps
cd dash-sample-apps/apps/dash-canvas-ocr
python3 -m virtualenv venv
```
In UNIX system: 

```
source venv/bin/activate
```
In Windows: 

```
venv\Scripts\activate
```
This app requires installation of `tesseract` on your local device, check [this guide](https://linuxhint.com/install-tesseract-ocr-linux/) to install it according to your operating system.
To install all of the required packages to your virtual environment, simply run:

```
pip install -r requirements.txt
```

and all of the required `pip` packages, will be installed, and the app will be able to run.

```
pythonb app.py
```

![screenshot](screenshot.png)

29 changes: 17 additions & 12 deletions
apps/dash-oss-canvas-text/app.py

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -52,6 +52,7 @@
 "rectangle",
 "select",
 ],
 add_only=False,
 lineColor="black",
 goButtonTitle="Sign",
 ),
Expand All@@ -61,13 +62,11 @@
 ],
 className="v-card-content",
 ),

 html.Div(
 dcc.Markdown(
 id="reset-markdown",
 children="[CLEAR]({})".format(app.get_relative_path("/")),
 ),
 className="v-card-content-markdown-outer",
 ),
 html.Button(id='clear', children='clear'),
 className="v-card-content-markdown-outer"
 ),
 html.Div(
 [
 html.B("Text Recognition Output", className="section_title"),
Expand All@@ -83,15 +82,22 @@
)


@app.callback(
 Output('canvas', 'json_objects'),
 [Input('clear', "n_clicks")]
)
def clear_canvas(n):
 if n is None:
 return dash.no_update
 strings = ['{"objects":[ ]}', '{"objects":[]}']
 return strings[n % 2]


@app.callback(
 Output("text-output", "children"), [Input("canvas", "json_data")],
)
def update_data(string):
 if string:
 emtpy_array = np.ones(
 (150, 600), dtype=np.bool
 ) # Temp set canvas height with empty image
 empty_img = array_to_data_url(emtpy_array)

 try:
 mask = parse_jsonstring(string, shape=(canvas_height, canvas_width))
Expand All@@ -109,8 +115,7 @@ def update_data(string):
 text = "{}".format(
 pytesseract.image_to_string(img, lang="eng", config="--psm 6")
 )
 return text # todo : handle condition which ocr cannot recognize: return message: "empty, try again"

 return text
 else:
 raise PreventUpdate

Expand Down

40 changes: 9 additions & 31 deletions
apps/dash-oss-canvas-text/assets/style.css

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -67,40 +67,17 @@ div.app__content > div:nth-child(1) > div > div > button:nth-child(2), div.app__
 font-style: italic;
}


#reset-markdown {
 text-decoration: none;
 font-size: 11px;
#clear {
 margin-top: -55px;
 border: 1px solid black;
 color: black;
 border: solid 1px black;
 border-radius: 4px;
 padding-left: 30px;
 padding-right: 30px;
 padding-top: 2px;
 padding-bottom: 0px;
 font-weight: bold;
 text-align: center;
 line-height: 25px;
 letter-spacing: .1rem;
 font-family: system-ui;
 height: 33px;

}

#reset-markdown p {
 margin-top: 0.3rem;
button#clear:hover {
 color: white;
 background-color: black;
}

#reset-markdown:hover, #reset-markdown a:hover {
 color: white !important;
 background-color: black !important;
 cursor: pointer;
}

#reset-markdown a {
 text-decoration: none !important;
 color: black;
}

.v-card-content-markdown-outer {
 display: flex;
Expand All@@ -109,6 +86,7 @@ div.app__content > div:nth-child(1) > div > div > button:nth-child(2), div.app__
 padding-right: 10px;
}

#reset-markdown {
 margin-top: -55px;

.canvas-outer > div > div {
 background-color: #CCDDFF !important;
}
Binary file addedapps/dash-oss-canvas-text/dash_canvas-0.2.0rc1.tar.gz

View file


Open in desktop


Binary file not shown.


2 changes: 1 addition & 1 deletion
apps/dash-oss-canvas-text/requirements.txt

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
dash==1.8.0
dash_canvas==0.1.0
dash_canvas-0.2.0rc1.tar.gz
Pillow==7.0.0
pytesseract==0.3.2
gunicorn==20.0.4
Binary file addedapps/dash-oss-canvas-text/screenshot.png

View file


Open in desktop

Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.