Skip to content
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.

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

Draw line drawing characters with lines or rects #180

Open
MightyPork opened this issue Sep 15, 2017 · 14 comments
Open

Draw line drawing characters with lines or rects #180

MightyPork opened this issue Sep 15, 2017 · 14 comments

Comments

@MightyPork
Copy link
Member

MightyPork commented Sep 15, 2017

maybe it would look nice, idk about the speed and also it'll be a pain cause there are over 100 of them

mind, we don't need all of them for sure (namely I don't care about the halflings and probably dont need bold ones if we have the thin ones that are more common)

        0  1  2  3  4  5  6  7  8  9  A  B  C  D  E  F
0x2500  ─  ━  │  ┃  ┄  ┅  ┆  ┇  ┈  ┉  ┊  ┋  ┌  ┍  ┎  ┏
0x2510  ┐  ┑  ┒  ┓  └  ┕  ┖  ┗  ┘  ┙  ┚  ┛  ├  ┝  ┞  ┟
0x2520  ┠  ┡  ┢  ┣  ┤  ┥  ┦  ┧  ┨  ┩  ┪  ┫  ┬  ┭  ┮  ┯
0x2530  ┰  ┱  ┲  ┳  ┴  ┵  ┶  ┷  ┸  ┹  ┺  ┻  ┼  ┽  ┾  ┿
0x2540  ╀  ╁  ╂  ╃  ╄  ╅  ╆  ╇  ╈  ╉  ╊  ╋  ╌  ╍  ╎  ╏
0x2550  ═  ║  ╒  ╓  ╔  ╕  ╖  ╗  ╘  ╙  ╚  ╛  ╜  ╝  ╞  ╟
0x2560  ╠  ╡  ╢  ╣  ╤  ╥  ╦  ╧  ╨  ╩  ╪  ╫  ╬  ╭  ╮  ╯
0x2570  ╰  ╱  ╲  ╳  ╴  ╵  ╶  ╷  ╸  ╹  ╺  ╻  ╼  ╽  ╾  ╿
@cpsdqs
Copy link
Collaborator

cpsdqs commented Sep 15, 2017

Best case scenario:

  • one function for drawing arms up/left/right/down with a thin stroke, bold stroke or double-struck stroke, and offset from center
  • draw double-struck strokes such that their ends overlap seamlessly with other double-struck arms and join with thin stroke arms
  • for 0x2500–0x250B use ((codePoint - 0x2500) / 2) % 2 to decide direction

@cpsdqs
Copy link
Collaborator

cpsdqs commented Sep 17, 2017

So I tried writing some code for this, and I have to ask: how big can it be? Because the amount of code to render all that is—while it does have a repeating pattern—a lot

@MightyPork
Copy link
Member Author

MightyPork commented Sep 17, 2017

if it's over say 50 kB minified, that wouldn't be ideal, but there is still space left.

I'd write it like

drawLines(top, right, bottom, left) { // <- eg. 0 - none, 1 - single, 2 - thicc, 3-double
  a bunch of horrible ifs
}

and then a switch that calls drawLines for each point ...

@MightyPork
Copy link
Member Author

MightyPork commented Sep 17, 2017

if you gzip the output folder (without the humongous sourcemap, .orig and other junk files), + around 240 kB of code, it should ideally fit in 500 kB

technically there is 1 MB available, but if I ever want to implement OTA update, only half can be used

@cpsdqs
Copy link
Collaborator

cpsdqs commented Sep 17, 2017

Added: espterm/espterm-front-end@a79b08a

However, there's one remaining issue; the characters in the 0x2552–0x256C range are slightly wrong (right is unicode):
comparison screenshot

@cpsdqs
Copy link
Collaborator

cpsdqs commented Sep 17, 2017

...also, term_screen.js is now a whopping 1758 lines

@MightyPork
Copy link
Member Author

it looks like trash in my chrome
screenshot_20170917_184120

@MightyPork
Copy link
Member Author

I'll try to move this onto a branch so I can make a release even if it's not finished

@MightyPork
Copy link
Member Author

there, it's on branch box-drawing.
also I force-pushed to work so pls update your ref

@cpsdqs
Copy link
Collaborator

cpsdqs commented Sep 17, 2017

Oh dear, @‌1x ruins everything

@MightyPork
Copy link
Member Author

maybe adding +0.5 everywhere can fix that

@cpsdqs
Copy link
Collaborator

cpsdqs commented Sep 17, 2017

nope, then it'd just break if your system has a different font

@MightyPork
Copy link
Member Author

i think i'll try to redo this using rects, they worked nicely for the block chars

@cpsdqs
Copy link
Collaborator

cpsdqs commented Sep 19, 2017

hm, maybe? You might want to round the center so that it’s on a whole-pixel value if the DPR is 1 or lower

@MightyPork MightyPork added this to the POOL milestone Oct 1, 2017
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants