Replies: 7 comments 7 replies
-
|
Yes, I'll be happy to provide a tour of the CSS. It is something of an art for sure. Lots to know. That circle Cue is particularly hairy. I mostly did that one to show it could be done and as I vaguely recall I copied some stuff and then monkeyed with it until I got something that looked OK. Wow conic-gradient? What is that? I am no CSS expert but there are lots of examples online we can copy from. I don't follow your second paragraph. I'll need an example or a video chat to understand. |
Beta Was this translation helpful? Give feedback.
-
|
This is an example of the three cues Dawn Sowers used in her dissertation. The "pointer" is what I guess I was trying to describe, it moves across the screen just the way the cursor does when using the mouse, as opposed to hopping from cell to cell and appearing in the middle.
|
Beta Was this translation helpful? Give feedback.
-
|
Isn't that what the mouse cursor does? How does this differ?
…On Thu, Jun 22, 2023 at 11:34 AM Sofia B-G ***@***.***> wrote:
This is an example of the three cues Dawn Sowers used in her dissertation.
The "pointer" is what I guess I was trying to describe, it moves across the
screen just the way the cursor does when using the mouse, as opposed to
hopping from cell to cell and appearing in the middle.
[image: Screenshot 2023-06-22 at 11 29 28 AM]
<https://user-images.githubusercontent.com/92817124/247981267-83ed8bda-ee3e-4f89-84c6-529f7a827980.png>
—
Reply to this email directly, view it on GitHub
<#203 (reply in thread)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/AABQK7GLOTLSLAVVXIO3UK3XMRQWTANCNFSM6AAAAAAZQFOE2U>
.
You are receiving this because you were mentioned.Message ID:
***@***.***
com>
|
Beta Was this translation helpful? Give feedback.
-
|
Yes it behaves the same as the cursor, but it is a standard feature in current devices for it to be a dot. On the surface pro the only options available seem to be different iterations of a standard cursor in either black or white and slightly different sizes. I am interested in doing some work replicating and extending Dawn's work so it would be nice to be able to emulate the red dot instead of using the cursor's available on the device itself. |
Beta Was this translation helpful? Give feedback.
-
|
Ok, thanks for the clarification. I believe we can easily define our own
mouse cursor. I'll look into it.
…On Thu, Jun 22, 2023, 12:48 Sofia B-G ***@***.***> wrote:
Yes it behaves the same as the cursor, but it is a standard feature in
current devices for it to be a dot. On the surface pro the only options
available seem to be different iterations of a standard cursor in either
black or white and slightly different sizes. I am interested in doing some
work replicating and extending Dawn's work so it would be nice to be able
to emulate the red dot instead of using the cursor's available on the
device itself.
—
Reply to this email directly, view it on GitHub
<#203 (reply in thread)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/AABQK7ACSZNYVFPJKQ263K3XMRZNNANCNFSM6AAAAAAZQFOE2U>
.
You are receiving this because you were mentioned.Message ID:
***@***.***
com>
|
Beta Was this translation helpful? Give feedback.
-
|
Add a Customize component to your design with this content: I'm defining a custom cursor using a 16x16 image. I drew it in the image editor I have installed, and saved it as a .png file. Then I used an online converter to get the data URL for it. Finally I pasted that into the Customize block wrapped like this:
The asterisk means match every element then the next part is the style I want to apply to every element, namely the custom cursor. You could have different cursors over different components if you wanted. I believe SVG images might work as well as PNG. You could even draw something in excalidraw, export and convert it. |
Beta Was this translation helpful? Give feedback.
-
|
Here is a version in SVG which would be nicer to hack on directly. The height and width determine the size on the screen. The viewbox determines the virtual coordinate system of the image. You can adjust the color simply by changing the fill. |
Beta Was this translation helpful? Give feedback.
-
|
awesome - thank you! |
Beta Was this translation helpful? Give feedback.
-
|
You can make it transparent also with |
Beta Was this translation helpful? Give feedback.
-
|
Finally getting back to this, all really helpful! Have the red cursor working on my end and able to change size/color etc! Working on having magnify work as the cursor moves. I have been able to change the cursor so that it looks like a magnifying glass, but all of the CSS code I am finding to magnify the image on the screen isn't working. Any ideas? What I am trying to emulate is having the target cell someone is looking at, and only that cell, grow by 50% and have this happen as the cursor moves across the screen. Will keep working on for a bit longer so will post if I get something working. |
Beta Was this translation helpful? Give feedback.
-
|
is it because the cells aren't considered images and the zoom css codes only work on images rather than the screen generally? This plug in works but optimally would be just the cell and a square shape. |
Beta Was this translation helpful? Give feedback.
-
|
I've done the zoom effect. I'll have to remember how. I *think* I used
https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/scale
I have a meeting now. Will look later.
…On Thu, Nov 2, 2023 at 11:10 AM Sofia B-G ***@***.***> wrote:
@gbishop <https://github.com/gbishop>
Finally getting back to this, all really helpful! Have the red cursor
working on my end and able to change size/color etc!
Working on having magnify work as the cursor moves. I have been able to
change the cursor so that it looks like a magnifying glass, but all of the
CSS code I am finding to magnify the image on the screen isn't working. Any
ideas?
What I am trying to emulate is having the target cell someone is looking
at, and only that cell, grow by 50% and have this happen as the cursor
moves across the screen. Will keep working on for a bit longer so will post
if I get something working.
—
Reply to this email directly, view it on GitHub
<#203 (comment)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/AABQK7CLFE2WQGIP7WTQQBLYCOZV3AVCNFSM6AAAAAAZQFOE2WVHI2DSMVQWIX3LMV43SRDJONRXK43TNFXW4Q3PNVWWK3TUHM3TINJYGAZDI>
.
You are receiving this because you were mentioned.Message ID:
***@***.***
com>
|
Beta Was this translation helpful? Give feedback.
-
|
Check out this video. The CSS is transform: zoom(2); |
Beta Was this translation helpful? Give feedback.
-
|
oh awesome - that is exactly what i was looking for! thank you! |
Beta Was this translation helpful? Give feedback.
-
Moving this conversation out of issues. I am wondering if we could walk through the CSS to make new cues. With the circle trying to figure out what lines of code are making it a circle as I think about other shapes/fill patterns.
Also, is there a way that we could have a shape (dot etc.) that represents where the cursor is moving? With mouse emulation on Microsoft 10 I was able to hide the cursor so does not seem like it would be a problem with seeing the system mouse and a feedback cue we made to track the movement across the screen.
@gbishop @aetkie
Beta Was this translation helpful? Give feedback.
All reactions