Suggestion: Making Inky Friendlier As a Word Processor

ladyisidore commented 8 years ago

Since I'm now writing large amounts of prose in Inky, it would be handy to have more quality-of-life features in it; an option to enlarge the font size, to change the typeface (the one being used right now doesn't support things like curly quotes and em-dashes, which vexes me terribly) and, most important of all to me, a wordcounting functionality.

I have no idea how to implement any of these things, because I'm about as good at programming as a clam is at tap-dancing. Still, I thought I'd make the suggestions.

leegrey commented 8 years ago

Hi, moving over from duplicate issue #51...

The basic action of setting the zoom level for the editor is fairly simple. I've added some code to controller.js, just dropping it into an already existing menu event for testing. Something roughly like this:

const webframe = require('web-frame');
var zoomFactor = 1;

// ... then in the event handler:

zoomFactor += zoomAmount;
webframe.setZoomFactor(zoomFactor); // everything gets bigger :)

I am not familiar with Electron. I am trying to connect the events in controller.js to appmenus.js, but have not yet managed to get that working, nor am I quite sure which set of events to add the handler. Perhaps to EditorView? I've added a new menu item to "View"...

{
  label: 'Bigger font',
  accelerator: process.platform === 'darwin' ? 'Command+PLUS' : 'ztrl+PLUS',
  click(item, focusedWindow) {
      callbacks.adjustZoomFactor(0.2);
  }
},

If you have any advice on the best way to get the event from the menu to controller.js, that would help. Am I correct in guessing that controller.js runs in the "browser", while appmenus.js executes in the node runtime? I notice that some logs come through into the console, while others come into the chromium dev tools.

I've committed my attempts into my fork if you would like to take a look. Thanks.

joethephish commented 8 years ago

Hrm, I don't think I'd recommend setting the zoom level on the entire browser window, since that would change the scale of the entire interface (including toolbar), rather than just the scale of the font(s). That doesn't seem right to me.

What would be better is changing the CSS of a few individual properties I think.

There's a bit of a chain of objects that it has to be passed through I'm afraid. Electron apps are split into multiple processes. There's one main process, and then a process for each BrowserWindow (renderer).

We start in the main process: look in appmenus.js. Call a new function on the callbacks object.
Hook into the function in main.js. Pass a message to the individual renderer using focusedWindow.webContents.send("YOUR MESSAGE NAME");
I'd then suggest that you pick up the message directly inside editorView.js. You'll need to require IPC (inter process communication) - see liveCompiler.js for an example.

leegrey commented 8 years ago

OK Great, that sounds like it will give me enough clues to get it all hooked up.

The overall browser zoom is actually quite nice if you just want to reduce eyestrain in general (the bigger UI included), but I agree, it would not be what everyone was looking for, and could break UI layout. I was just happy to find an easy fix to get started. I did read online that it can be a little fiddly to do using available electron apis, but I don't see why I couldn't just use jquery (which I think is included in the project?) to just tweak some css directly. Would that approach seem too hacky for you? In any case I'll look more closely at electron and see what it has to offer.

By the way, if I were to do a more thorough job of it, what kind of options would you be looking for? Separate zoom levels for the code editor and the preview frame? I would personally love to be able to just use ctrl+scrollwheel to zoom either panel in and out individually, as you would in Sublime Text for example.

Thanks for the tips, I'll let you know when I take another crack at it.

joethephish commented 8 years ago

Electron doesn't really provide specific APIs for that kind of thing - it's just a container, and only provides APIs for desktop app things that normal web tech doesn't provide. So actually, yeah, using jquery is the right approach.

From jquery/CSS point of view, I'm not sure what the best way is of changing the font size... it feels wrong to do something like $("p").css(...) since that operation would have to find all the p tags and change them individually, and wouldn't change future ones. I guess you could add classes to the player's container div, named zoom1, zoom2 etc... but that feels hacky too. Can you inject a <style> tag at runtime perhaps? That could be the most elegant method, if it works.

In terms of design - yeah. I think different size options for editor view and player view sounds about right! Perhaps a CTRL + and CTRL - (or CMD on Mac) could zoom whichever view is currently focussed?

leegrey commented 8 years ago

I had thought about modifying the top level container for each frame. For example you can drop this code into the dev console to increase the size of just the code editor:

jQuery('.ace_editor').css({fontSize: 18});

The preview pane should work the same way.

joethephish commented 8 years ago

Ah yeah, I guess so long as nothing overrides the font size of sub-elements, that should be fine...

royda commented 8 years ago

Hi @leegrey in your last comment above, where would I find the "dev console" you reference? I'm struggling with tiny Inky font size on my laptop. :-/ Thanks!

leegrey commented 8 years ago

In the Inky menu: View / Toggle Developer Tools

This opens the Chromium developer tools. Click on the console tab, paste the below code, and press enter:

jQuery('.ace_editor').css({fontSize: 18});

Now the editor font will be 18px.

You can modify the preview font size with this:

jQuery('#player').css({fontSize: 18});

I'm currently trying to focus on writing a story for the IF competition, but after that I hope to return to working on this feature. I hope this workaround keeps you going in the meantime.

royda commented 8 years ago

Thank you @leegrey! I appreciate the help! Also, what IF competition are you referring to?

leegrey commented 8 years ago

This is the competition:

https://ifcomp.org/

Note that they seem to have a problem with their HTTPS certificate... my browser warned me. I don't think it is a legit security threat though.

This is the Wikipedia article about the competition. It has been around for a while. (In fact Jon Ingold from Inkle won it in 2001)

https://en.wikipedia.org/wiki/Interactive_Fiction_Competition

Unfortunately the date to register intent to enter has just passed so you may have missed out this year.

TeddyDief commented 6 years ago

This was a lifesaver @leegrey ! I'll use these Console commands to save my eyes. Did you ever revisit this feature formally?

randoomx8 commented 4 years ago

In the Inky menu: View / Toggle Developer Tools

This opens the Chromium developer tools. Click on the console tab, paste the below code, and press enter:

jQuery('.ace_editor').css({fontSize: 18});

Now the editor font will be 18px.

You can modify the preview font size with this:

jQuery('#player').css({fontSize: 18});

I'm currently trying to focus on writing a story for the IF competition, but after that I hope to return to working on this feature. I hope this workaround keeps you going in the meantime.

Thank you!!

inkle / inky

Suggestion: Making Inky Friendlier As a Word Processor #25