hundredrabbits / dotgrid

Minimalist Vector Tool

Hundred Rabbits

This repository is the sources for the Hundred Rabbits website. The website is written in C, and requires gcc to build. To rebuild the site, run the build script:

make run

Extras

• Pull Requests are welcome.
• The source code of 100r.co is licensed under MIT and the images, text and assets are licensed under BY-NC-SA 4.0. View individual licenses for details..

dotgrid's Issues

Some kind of mirror effect in middleground / background layers

The black dots are in correct position, but the line segments are drawn way off.

Define size

Would be great to be able to define size of the vector in order to make tray icon for application. Like 16px.

Curves not mirroring properly

When defining a curve, it doesn't mirror horizontally as expected, instead it mirrors the points but the curve isn't mirrored exactly.

Weird things happen after I close a path

(Using Windows 10 64 bit, binaries from itch.io)

1. Place control points in a triangle and press D to form an incomplete triangle
2. Press R to close the path
3. Draw a segment someplace else with control points and D
4. Notice that the segment uses one of the points from the triangle as a control point.

Step 4 does not happen if you do steps 1 and 3 without doing 2.

weird fullscreen bug on macOS 10.13.6

this is fullscreen split with Messages.app

image looks like this when fullscreen not shared with another app

Guide Dots don't override layer

With a version from around October, i was able to fill in the 3rd layer completely black, then go to the first layer and the guiding dots would show up in grey over top of the black layer. With the previous 2 versions, this is not possible, and im not sure if it was intentional or not. If this could be toggleable, or put back into the system, i could use it so much more. I used to use this app for all my Macbook's App Icons, using black square backgrounds. Now i cant create them because i cant see what im doing. (i realize i can create the white outline first, but i dislike doing this because it doesnt give me the idea of what it would look like as a final product.)

Clean the drawing area

Allow the user to clean/reset the drawing area by doing ctrl+n or clicking on a reset UI button.

Possible bug: Symmetry settings persist across reloads

Adjust symmetry setting with e, and then use ctrl-n to reload. Symmetry setting are maintained.

tested on linux, freshly downloaded as of today.

Image size gets greater every time you save

Every time you press the commands to save/export/render a file it gets ~2 times bigger.
If the image is 300x300, it'll be 600x600, then 1200x1200, etc.
The window doesn't grow with it though so you only notice this when the image is saved (or when you try to modify the image size).

There is no need to actually save the file to get this behaviour, only press the keys.

close single path

Hi! Is it possible to close single path? May be close paths by layer?

Resize window on Windows 8 not possible

It's not possible to resize the window size on Windows 8 any more.
Don't know if its related to german keyboard, or what exactly is going wrong.
Maybe it's better if you are on plattform windows, to readd the window borders again?

Great software by the way :-)

Window resizing breaks symmetry

For context I am using i3, a tiling window manager, so my windows tend to change size a lot.
However, it seems that the centerpoint of the canvas is linked to the present size of the window,
so if my window size changes, then my symmetry axis drifts.
Particulary for me, this means that in order to have stable symmetry, I need to fullscreen dotgrid, but that means I cannot have reference images open at the same time.

Unsure if #32 is relevant. It might be a small addition to that or core to fix this issue.

Symmetry and arc_*

Creating a three point arc_c or arc_d, and then enabling symmetry make the mirrored part use the opposite tool. IE, arc_c is mirrored to an arc_d in rotational symmetric mirroring mode. (mirror mode three?)

tested on linux, and web versions, both freshly downloaded as of today.

Potential Bug: Grid Disappears After Theme Change (Chrome - OSX)

I have noticed a strange issue when I change the theme for Dotgrid wrapped (OSX) and unwrapped in chrome.

Every time I change the theme using the .svg files provided in the theme directory. The grid disappears, I don't know if it's something I'm doing wrong but it happens every time.

Implement O to open grid file like noodle

theme.js error when paths is undefined (minor issue)

if (!paths) { console.log('Nothing to load') }

should return in this error case, the following line you index paths[0], even if paths is undefined.

https://github.com/hundredrabbits/Dotgrid/blob/master/desktop/sources/scripts/lib/theme.js#L77

Fix 'TypeError: dotgrid.theme.invert is not a function' error

Feature Request: More than three layers

Hopefully, this isn't too much trouble, but I was wondering if there are only three layers for a reason, or if more could be added.

I really enjoy using this tool, thanks.

Suggestion: Bake Mirror

Crest mode aside, being able to "bake" the mirroring (creating a copy of the geometry with the transform applied) to create new points would be a pretty powerful way to create complex, editable geometry quickly. Bake Mirror to Layer > 1, 2, 3 would also be a nice addendum.

Undo is broken in web version for non OSX platforms.

Rendering only on mouse hover/movement

Connecting ORCΛ to Dotgrid reveals that Dotgrid will only update when the mouse is on the windows (focuesd) and even then only when the mouse is moved. Issue present on Dotgrid V132 downloaded from ITCH client both on a desktop running Arch Linux and a 2015 MacbookPro running the latest MacOS.

Closed path's rendered as transparent

Subject. Svg - ok, png - no.

Problem with Keyboard shortcuts on German Layout on Linux and Windows

The keyboard shortcuts for increasing/decreasing the line width don't seem to work properly on Linux when using the German Keyboard Layout (X11 Layout: de according to localectl status)

"decrease line width" appears to be mapped to the ß key and I haven't found the "increase line width"

A similar Problem occurs on Windows 7, except that here both increase and decrease work but are mapped to ` and ß.

Stops creating strokes after moving and deleting a lonely vertex

Add timestamp in file export

Unable to open saved dot's files

Hi again! i'm unable to open previously created files after upgrade dotgrid to version 49. There is nothing errors or warnings in Inpect. Did you make some break changes with dot's format? Should i recreate existing files?

Export in the web version is broken

ReferenceError: fs is not defined

Remove with right click

Add the ability to remove a specific point from the drawing area by doing a right click on the point.

Add resolution in window.title

Check for updates/update binary in app

re: https://twitter.com/rickycodes/status/974385695501496322

Is the project open to contributions?

Just like the title sais.
I can contribute with ideas for features and maybe code, some automated tests.
What would be the best way to contribute? I left a few comments in Mastodon about my initial ideas.

• I think more than 3 layers would allow more flexibility
• I don't really understand what is actually selected and how deleting shapes works; Maybe there's some room for improvement? Or maybe it's something not documented?
• .grid format might be more flexible if it was JSON5 - not sure if the project allows extra libraries for that?

Can't make new file

Shortcut to make new file doesn't work

Unselecting "move point"

Dear Dotgrid team,
thanks for creating this minimalistic, yet awesome design tool 😍 😌

I'd like to suggest a simple and arguably expected behaviour:
Pressing "Esc" should unfocus/ unselect/ drop the "move point" option.

I have to click around a lot until I get rid of the dragged line and I still don't know the trick 😃 .
There's also no option in the menu as in GIMP to "unselect everything" (including the mentioned issue).
Active tools should preferably be highlighted, but of course this might be not minimalistic enough.

I might be "simple minded", but then again, a lot of people are. I think an easy click of escape would be a balanced solution.
Again, thanks a lot and all the best! 💯

Show preview of controls

Like this:

[bug] Can't select text for exporting when using Beaker

Priority

Critical

Steps to Reproduce

• open site in Beaker
• make a thing
• press (e) to export the thing
• try in vain to select text for export with copy-paste
• lay down & cry 😭 , fall asleep on wet pillow

Expected

Selectable text to copypaste to file

Actual

Can see text but cannot select it for copypaste, must instead visually type in every detail into other file 😞

Versions

Beaker 0.7.7
Dotgrid current (no version # supplied)
xubuntu linux zesty

NOTE: Should this be labeled specifically for Beaker Browser in some manner?

Suggestion: Keyboard focus for menus

If user uses Tab to move focus to menus, it would make sense to move the menu focus with arrow keys

Suggestion: Add Guidance on Usage via Browser, Suggestions, Pitfalls, etc.

Hello!

With the app now being delivered through a single html file (👏), folks who attempt to open the app locally (i.e through the file:///path URI) via a modern, Chromium-based browser will run into a hurdle:

Uncaught DOMException: Failed to read the 'localStorage' property from 'Window': Access is denied for this document.

If the "Block third-party cookies" setting is enabled.

A quick fix is to disable the setting, unblocking third-party cookies for all sites. But I would imagine the privacy-minded folks, myself included, wouldn't be too happy with that. Chromium allows you to add specific URLs or hostnames to an "Allow" list, however adding the specific file URI to the allow list does not work here because localStorage is per domain , and the file:/// URI scheme has an empty hostname by default (an insight gathered from this StackOverflow answer).

A workaround is to add localhost/127.0.0.1 to the "Allow" list, and then visit http://localhost/.../index.html using a local webserver. (adding localhost to the "Allow" list and then specifying the hostname in the file URI, e.g file://localhost/Users/me/dotgrid-main/index.html, does not work for some reason 🤷)

---

Would you consider adding a little section in the docs that describe some basics on opening via a browser, suggestions, pitfalls, etc. ? I know your philosophy is Linux-first and I've seen you recommend browsers like surf and Next. But I think some guidance here would be helpful for those using Chromium-based browsers starting, with the third-party cookie issue described above.

Thanks for all the great work!

How to build this app from source?

Hi - could you give instructions in the Readme on how to build the app from source code? 🙂

Suggestion: Line Style

Would it be possible to provide a line style with alphabet "x", or a square or a dot. It would help in creating many designs like the one in the given link https://depositphotos.com/77562790/stock-illustration-xmas-seamless-nordic-pattern-with.html

[Feature Request] Run dotgrid at 2x/3x scale

I have tried using dotgrid on my laptop that not only has a small-ish screen, but it also runs at high resolution, which ends up with dotgrid window being smaller than a quarter of my screen. This is far from perfect, and makes the grid really hard to see.

It would be really helpful if the app could be run at a larger scale (command option to run the .exe with parameter -2x would be plenty)

Reducing line thickness with left click & control click

UX Suggestion: It looks like line thickness can only be increased with icons. Maybe add a way to decrease them too? (Other than keyboard shortcuts)

UDP control expansion?

The UDP control is relatively limited, some potential improvements include control of:
line thickness,
fill,
color,
and mirroring

Speaking of mirroring, UDP controlled input does not mirror like by-hand input.

Finally, it appears that the clear command over UDP does not respect layers but instead clears everything. I haven't yet tested if the same is true for draw or if layers are respected at all, as I'm unsure if this is simply a misunderstanding of the desired behavior.

"guide" link in readme broken

link points to https://100r.co/pages/dotgrid.html#introduction which displays:

Suggestion: moving selected area

Would be great to be able to select a rectangle area and move all control points in it at once.
Thanks for this awesome thing!

I'm using Linux|BSPWM|webapp

can't save a resulting image

Ubuntu 18.10
I cant save nor in svg nor in png format. the window with directories tree freezes and becomes unresponsive. :(

when launched as electorn package through npm start saw an error g-io-error-quark, 13

saving only works in browser here https://hundredrabbits.github.io/Dotgrid/ but, when I save 'mirrored' image - canvas resizes faster than the actual saving (canvas resize prodused by Chrome, when it show the downloading process at the bottom)

Empty path closing bug

Trying to close an empty path creates a bug

Suggestion: Implement the ability to select multiple dots.

Today I was playing around with Dotgrid and trying to make a spritesheet of minimalist icons. However, I eventually needed a bit more room and needed to move around the sprites to get that room. But the only way I can see from the Dotgrid documentation for moving those sprites is to drag each dot up, individually, until they are all where I want 'em to be.

So I think implementing a way to select multiple dots and manipulate them all at once would be beneficial to users who have lots of dots onscreen and would have to go through the tedious process of moving them all individually if the need arises.