Action button for snap-to-grid / snap-to-angle

[letsfindaway]

After merging PR #1013, which implemented snap-to-grid and snap-to-angle using the Shift key, a discussion started about how to make this feature available for an interactive whiteboard. In this case, a keyboard and therefore the Shift key is typically not readily available. So other means to enable snapping should be considered.

After some discussion, the preferred UI is a button with some kind of magnet icon, that can enable and disable this feature (see #1013 (comment)). This entry should now serve as a place to discuss this feature further.

Placement of the button

The current idea is to place this button in the stylus palette as the very last button. Here we already have the button for the virtual keyboard, which is also not part of the button group of stylus tools represented by the other buttons.

Icon for the button

Very often some kind of magnet icon is used to represent the snap-to-grid feature. The idea is to develop a graphical representation based on this. We need two appearances of the button: enabled and disabled. Icons should be in SVG format so that they can be lossless scaled for HiRES displays.

@fadikdawoud: Before you put too much effort into a single idea, you can also post rough sketches and ideas here to get feedback.

I am not sure if it is useful to visualize that this button (and the virtual keyboard button next to it) are not part of the stylus tool's button group. An idea would be to draw an additional frame around the grouped buttons or to add a separator between grouped and ungrouped buttons. This would however not be part of the icons, but of the code of the stylus palette.

Behavior of the button

I suggest keeping the function of the Shift key even with the presence of this new button. These two methods should work together as follows:

• There are three stylus tools which are affected by snapping: Selector, Play and Line. Let's call them "snapping tools".
• When a snapping tool is active and the Shift key is pressed, the snap-to-grid action button is activated.
• When a snapping tool is active and the Shift key is released, the snap-to-grid action button is deactivated.
• When the snap-to-grid action button is pressed, it toggles its state, independent of the selected tool.

Activating/deactivating the button by pressing or releasing the Shift key gives immediate visual feedback of the function.

Additionally I suggest to assign a keyboard shortcut to the button, e.g. Ctrl + S. This way you can use the button even when the stylus palette is hidden.

[fadikdawoud]

Before you put too much effort into a single idea, you can also post rough sketches and ideas here to get feedback.

Dear @letsfindaway and @kaamui
Attached below are the draft and sketch versions of two designs to the snap to grid icon. Like @kaamui has mentioned that a magnet icon is more clearer and concise for a snap to grid button, I have sketched both ideas as magnets but with small differences in the design theme.

I would like to hear your feedback regarding the sketches and to know what adjustments could be done to make it fit openboard more.

PS: The designs are not shaded in the sketch but shaded in the stylus palette to fit the design theme. Obviously this is just a draft and once we agree on a concept, the design will be shaded and in svg format

An idea would be to draw an additional frame around the grouped buttons or to add a separator between grouped and ungrouped buttons. This would however not be part of the icons, but of the code of the stylus palette.

This will be the next step since I need to have a sense first of how the icons will look all together and we see how to move forward from there

[letsfindaway]

Thanks for your first sketches! Personally, I like the first more, because it better represents the grid. I have one remark about enabled and disabled state: The graphical differences are minimal and are not immediately noticeable. My idea was to additionally reuse the pattern from the stylus buttons and to have a circular light background when activated. I tried to generate something like this from your sketches:

I know, I took the "disabled" state magnet and put it before the light background. My fault, I wanted to take the other with the blue ends and the flash symbol. But I think you get the point. What do you think?

The light circle as well as the palette background are semi-transparent, so that the appearance changes whether you select a light or dark background on the board. I would recommend to reuse the same piece of SVG as used e.g. in penOn.svg.

BTW: here I noticed that the virtual keyboard button does not resemble the state (keyboard enabled or disabled) as it should, even if both images are available and assigned to this action. I will look into it. It has to be fixed in the code.

[fadikdawoud]

I know, I took the "disabled" state magnet and put it before the light background. My fault, I wanted to take the other with the blue ends and the flash symbol. But I think you get the point. What do you think?

Yes that would be also great, I totally forgot about the white circular background on enabled states that's why i designed and inactive and active one.

I totally agree as well the first is a good option. So this means we all agree on it, and that the next step would be to UI design the first sketch but in the active state (and with the same color palette)

The light circle as well as the palette background are semi-transparent, so that the appearance changes whether you select a light or dark background on the board. I would recommend to reuse the same piece of SVG as used e.g. in penOn.svg.

That's amazing that there is an already made one, I will be sure to use it in the final version, thank you

[letsfindaway]

Changes to the code

I have just pushed a new branch feat-snap-action on my fork of the OpenBoard repository. This branch adds three commits:

• The first one contains the necessary code to add an actionSnap. This action is now the main indicator whether snapping is enabled or disabled. It is linked to a new button in the stylus palette, but it is also influenced by the Shift key with a small extension to the UBApplication::eventFilter.
• The second one just adds a missing resource icon for the enabled state of the onscreen keyboard. The icon was already there, and it was linked in the action, but it was not listed as a resource in the OpenBoard.qrc file. This problem is not related to the snap functionality, but as it affects the overall user experiences when working with the stylus palette, it should also be fixed.
• The third commit adds a placeholder icon for snap-to-grid, which I have just assembled from the sketches of @fadikdawoud. They are meant to be fully replaced later when the final versions are available.

This branch can be used to check-out the behavior and to get a first visual impression of the new snap-to-grid action.

[fadikdawoud]

First of all, hats off and appreciation to the effort that @letsfindaway puts in Openboard, great work as always.

And Second of all I have just finished the Final Versions for the icon and they are in svg format for higher quality.
There are two versions of the icon but the shading is different. One is designed flat and and the other is designed with shading:

Magnet Flat

Magnet Flat_on

Magnet Shaded

Magnet Shaded_on

PS: As you all know I am very new to github, so I am unaware if uploading the svg files makes it downloadable or not. If you need the files sent to you, inform me and I can upload them on Wetransfer.

Best regards

[letsfindaway]

No problem to download the SVG files. I tried them. Here is the result for the shaded version:

My observations:

• The yellow flash symbol is hardly recognizable. I think it can be omitted.
• The grid lines are also quite thin, when scaled down to the 42x42 resolution.

I didn't notice this in the large version. So it seems to be important to also see how it looks at 42x42 resolution. I opened the file in Inkscape and then zoomed out until it has about the size of the stylus palette button. Then these effects are also visible.

Can you try to improve the appearance for the scaled down button?

[fadikdawoud]

My observations:

• The yellow flash symbol is hardly recognizable. I think it can be omitted.
• The grid lines are also quite thin, when scaled down to the 42x42 resolution.

Okay I will see to take your feedback into consideration and work on the edits as soon as possible.

I didn't notice this in the large version. So it seems to be important to also see how it looks at 42x42 resolution.

That's why I want to be able to have the open source version of Openboard work on my pc so that I could test out and see the logos in practice since I am designing blindly at the moment without any user testing

[letsfindaway]

That's why I want to be able to have the open source version of Openboard work on my pc so that I could test out and see the logos in practice since I am designing blindly at the moment without any user testing

Yes, I understand. In the meantime it might be helpful to zoom the icon in your SVG editor until it is about the size on the screen as it will later be in the Stylus Palette. This gives at least a rough impression of the later appearance.

[fadikdawoud]

Dear @kaamui,

I noticed that you were the last one to update the build-from-source guide for Windows on GitHub, and I was hoping to get some clarification on a few issues I've encountered.

Qt Installation: When using the online Qt installer, the guide mentions enabling only three components during the custom installation. Could you advise on whether the other components are necessary, or if I can safely skip them?

qmake Issue: After setting the Qt directory in the environment variables (e.g., "C:\Qt\5.14.2\msvc2019_64\bin"), I encounter errors when running qmake quazip.pro in Git Bash. However, the qmake command works fine in the x86_x64 Cross Tools Command Prompt for VS. Is there a reason for this discrepancy?

OpenBoard Source Files: After downloading the OpenBoard sources through Git Bash, I see two folders: OpenBoard and OpenBoard-Thirdparty. However, when I try to navigate to directories like freetype or xpdf, Git Bash indicates that these folders don't exist. Additionally, when attempting to run qmake quazip.pro, it reports missing files. Could you provide guidance on how to resolve these issues?

I appreciate any help or advice you can offer. Thanks for your time and it would be very helpful to be able to test the Magnet icon that way on my own!

Best regards,
Fadi KD

[letsfindaway]

Please move the questions about building in a new discussion, probably in the "Q & A" category.

And another hint: if you get any error messages it is helpful if you copy/paste them to your question, else we have to guess what your problem actually is.

[fadikdawoud]

These are the new updated svg icons without the lightning bolt and also with a different grid that is better when zoomed out:

Magnet Shaded

Magnet Shaded_on

[letsfindaway]

Thanks, these icons look great! I created pull request #1110 containing these icons. Of course we need agreement from @kaamui.

[kaamui]

Great job guys, I don't answer much but see what you do. Thank you for the help !

[letsfindaway]

@fadikdawoud My pull request including your icons was merged. This means it will be part of the next release 1.7.2.

Thanks again for helping us and providing the icons!

[fadikdawoud]

Thank you so much both of you for your amazing words, and what I did compared to the effort that @letsfindaway has been putting is nothing. And ofcourse thank you @kaamui as well for making this happen.

If you ever need anything regarding designing feel free to contact me.