Graph paper navigation



  • I'm making a graph paper thing. The plan is to have two modes:

    • drawing, where clicking and dragging inserts points and lines into the image
    • moving, where clicking and dragging pans the view of the (infinitely large) image

    Scrolling in either mode will zoom in/out.

    However, I remember a certain proof of concept being posted on TDWTF's Google+ feed. Is there a better way to do the controls?

    Also, in order to have mobile devices zoom the application view instead of zooming into a blurry canvas, I have disabled mobile zooming on my page. Is there a better way to force zooming to 100% when the editor pane is open?


  • 🚽 Regular

    @ben_lubar said:

    The plan is to have two modes:

    drawing, where clicking and dragging inserts points and lines into the image
    moving, where clicking and dragging pans the view of the (infinitely large) image

    I'd suggest the image editor approach: there are no modes, left-dragging always draws and middle-dragging always pans. For mice without middle button (hahaha!! 😝 ) you can hold the spacebar while left-dragging to pan.

    Under mobile, you could require two-finger scrolling... urk 😝 ... but being modeful is probably better honestly. You can still have modes on a desktop device if you want to be consistent and toggle between them in response to the kind of mouse button held.

    As an aside, a scroll-only mode is something I'd appreciate even in a normal web page under mobile, as something that terribly annoys me is when I'm trying to scroll a little bit without seeing what's behind my thumb and it considers it a click instead.

    Argh! Is it just me or has the text editing in the compose panel become really slow?





  • I wasn't able to get it to load, because:

    You need to authorize Graph Paper before it can create files in your Google Drive.

    How about you let me try it first and worry about that if I actually want to save or open something on Drive?



  • @anotherusername said:

    How about you let me try it first and worry about that if I actually want to save or open something on Drive?

    I presume they use drive for scratch storage too. Most things attached to drive continuously saves.



  • @swayde said:

    I presume they use drive for scratch storage too. Most things attached to drive continuously saves.

    There is no "they" here. The acceptable pronouns are "it", "he", or "@ben_lubar".



  • My computer should have plenty of RAM. Saving to Drive for scratch storage shouldn't be necessary unless you're worried about me closing the window and losing my work... in which case, just warn me that my work isn't being saved and let me proceed with it.



  • Except that the data is put directly into the Google Drive Realtime API and my code doesn't store an extra copy. So you have to be logged in for it to work. It's all clientside JavaScript, so feel free to look through it.



  • I was logged in, I just didn't authorise it to use Drive for storage.



  • Here's what you just said in logic form:

    x∧¬x



  • No because first it said I had to log in to my Google Drive (or connect? I forget and I can't get it to reappear). I did that and then it said I needed to authorise it.



  • No, "You need to authorize Graph Paper before it can create files in your Google Drive." is what it says when you're not logged in. There is no state between that and being able to use the program.



  • Calling me a liar isn't going to change what I saw. Unfortunately I didn't take a screenshot and now I can't get that to reappear but the very first time I loaded it, it asked me to connect my Drive account. I clicked that button, it opened a popup window saying that it wanted to access my Drive account. I said yeah okay and it closed the popup window and proceeded with initialising and then it said that I needed to authorise Drive for storage.



  • Here are all of the messages Graph Paper can display:

    <aside id="status">
    <div id="status-init">Initializing...</div>
    <noscript>You need JavaScript enabled to use Graph Paper.</noscript>
    <div id="status-need-auth">You need to authorize Graph Paper before it can create files in your Google Drive.</div>
    <div id="status-connecting">Connecting...</div>
    <div id="status-loading-file-list">Loading file list...</div>
    <div id="status-retrieving-file-metadata">Retrieving file metadata...</div>
    <div id="status-downloading-file-data">Downloading file data...</div>
    </aside>
    


  • The message I saw was from the Google integration and appeared before the page even began loading.

    I'll try it on a fresh browser tomorrow and see if I can get a screenshot.


Log in to reply