Animal note heads app

[larsenwork]

My thoughts are to create an app that does "everything" for the user and simply outputs the folders with svg, pdf and md file - so the user won't need to download anything besides the app to get going.

Tools

My thought is to use https://github.com/atom/electron since we're already using node.js and I'm mostly a web guy.

• https://github.com/arturadib/shelljs
• lilypond command line
• pdf2svg.js
• https://github.com/substack/node-mkdirp

  Features

• [ ] Create a temporary .ly file based on user input
• [ ] Run the command line script to generate the pdf
• [ ] Convert pdf to to svg
  • [ ] Convert text to curves (maybe using inkscape command line)
• [ ] Create the .md file

  Bugs

• [ ] Load jquery via require in main.js

  Branch

I've created a separate app branch for this

[larsenwork]

Does @yroul and/or @elijahverdoorn have any experience creating apps using electron?

[elijahverdoorn]

I've never tried it, but it looks interesting. I'd be willing to give it a try when I get some free time.

[yroul]

Never heard of this before, but looks interesting as @elijahverdoorn said. I would be pleased to help on this one. I hope to get some free time this week to to give a try. @elijahverdoorn @andreaslarsen let me now guys if you start something and if you want us to share the same codebase

[larsenwork]

Sounds fantastic - I don't see any reason not to share the same codebase. We can create branches when we work on a feature and treat app branch as master so it's easy to see what gets developed where.

[larsenwork]

I've given you push access to the repo so you don't have to fork and pr

[yroul]

@andreaslarsen Thank you.

[larsenwork]

@yroul it is I who says: thank you :smile:

[larsenwork]

I haven't been able to add jQuery correctly just yet (see comment in main.js) but I've made the basic form real quick using materialize.css (we can always style it later).

I think the next logical step would try to make the form create the .ly file based on form input.

[larsenwork]

And it looks like this as a standalone app

[yroul]

I fix the jQuery (and then the HammerJS) reference error. It's ugly, but it looks like we don't have the choice. See https://github.com/atom/electron/issues/345 for more information

[larsenwork]

perfect

we could use a different UI that doesn't use jQuery if it's too "ugly" - I just happen to like material design :)

[yroul]

From my point of view, it's ok for now : We have to make it works then we'll do some tuning / refactor. To be honest i hate what i committed. I hope we'll be able to find a best way in the future. :)

[larsenwork]

hehe...my brother sent me this last time I had to do some refactoring...

[yroul]

:laughing: It can be us in a near future if we are not carefull.

[larsenwork]

yeah...its also why I'm already looking for an alternative css kit that doesn't require jQuery - or do you think we'll need jQuery for anything else?

[yroul]

I think jQuery may be a bit overkill for what we want to do. Most of the time, jQuery's users( and i'm the first ) load the entire library just to use $('XXX') as selector.

[larsenwork]

Yep, I do that too... Let's just remove all the skinning for now and then I (or one of you guys) can cook up a css only solution

[larsenwork]

Very bare bones styling

[larsenwork]

I think the next step is to make the app create a .ly file based on the input. It'd be great if you guys had the time to look into it.

I have to make some change to the lilypond script (won't change how the this app shall work) so I don't know when I get the time to look more into this the next couple of days

[yroul]

I'll give a try maybe today or tomorrow :)

[yroul]

I push some code.

I was not able to use the lilypond script in misc/lilypond-command-line folder (I think i did not using the right way.), so i install lilypond package on my machine (Linux / Fedora 20).

It may not works on others plateforms.

You can try it by yourself by filling title, arranger and then music inputs.

I tried with the following lilypond code :

#(set-default-paper-size "letter")

\version "2.10.33"

\include "english.ly"
\layout { indent = 0.0\cm }

\score {
  \relative c' {
    \clef treble
    \time 3/4
    \key c \major
    c d e  f g a  b c d  e f g    
  } 
}

And it works for me.

[larsenwork]

exciting, I'll have a look :+1:

[larsenwork]

https://github.com/atom/electron/blob/master/docs/api/clipboard.md :smile:

[larsenwork]

Did you run it in electron or how did you get it working? I tried this but nothing happens when I push the button

[yroul]

I forgot to tell you some important things :

Generate button create a temporary lilypond file in project_root/.tmp then output the pdf in project_root/output

I think you need to create these two folders yourself. Any output from the dev tools' console ?

[larsenwork]

ah...thought it was system root and only tested real quick :flushed:

[larsenwork]

Console says Uncaught Error: Cannot find module 'shelljs/global'

[yroul]

Do a npm install : i added shelljs as dependency. I think we need to add a section "how to start contributing"/" to write down what we have to do to bootstrap the app :)

[larsenwork]

A guide is always good thing - and lots of comments in the code ;)

I'm no experienced node/js developer so I'm learning things along the way - but can't we use npm to bundle the dependencies within the app like I've done with shelljs in the latest push?

[yroul]

I never used "bundled dependencies" before and usually i do not push node_modules/* to the repo. I think it's better to have node_modules/* ignored and use "npm install" after git pull/rebase to be sure to download the last deps.

It's my opinion and the way i work usually, but if you want the dependencis to be "bundled" and pushed on the repo, i'll do it :)

For the app, the next thing i'll do is to refactor a bit the file generation using Promises(https://github.com/kriskowal/q) to be able to manage async tasks and display some "please wait..." popup during file generation.

[larsenwork]

@yroul great

about the bundled dependencies: you're right :)

[larsenwork]

I think I'll read through a bit on: https://github.com/sindresorhus/awesome-electron to get a better understanding :)

[larsenwork]

This video is great (for a noob like me at least) https://www.youtube.com/watch?v=ojX5yz35v4M

[larsenwork]

I've tried various apps/scripts to get the svg output just right but haven't been able to do so so far...any help/suggestions on that is much welcomed.

The problem is pdf2svg.js embeds the font elements as base64 encoded instead of just outline svg.

[larsenwork]

I can get around the issue by opening the pdf and saving as svg in illustrator but that's not a viable long term solution.

[yroul]

Maybe i can check it myself to see what happen. Are the scripts on the repo ? Can you send them to me if not ?

[larsenwork]

scripts should be there in the lilypond branch - see the readme for instructions on how to create the svg using pdf2svg.js

Edit: The readme in the lilypond branch that is: https://github.com/larsenwork/animalnoteheads/tree/Lilypond

[larsenwork]

@yroul did you ever succeed with the svg output? I have been in contact with a couple of node.js guys that might want to help - can you write somewhere what we've got so far and what they need to get started? EDIT: maybe here (I've been busy with other stuff the last month so haven't spent that much time on AnimalNoteHeads as I wanted but have some time this week so hope to do a major "push" and make a short video about to attract more developers/designers/musicians to contribute to the project :smile:

[yroul]

@larsenwork I did not manage to do it.

I was busy too but i will update the readme this evening (or maybe tomorrow) to explain a bit what is needed to get started.

[larsenwork]

@yroul cheers, no stress - did you look into the async goodness?

@tisimst we will end up using command line calls within this app so we can generate svg directly using lilypond, right?

[tisimst]

@larsenwork That's right. Here's the basic commandline call:

$lilypond -dno-point-and-click -ddelete-intermediate-files -dbackend=svg $filename

Where you supply the terms that start with $ (i.e., the LilyPond executable and the input file name). When using the SVG backend, be aware that this creates a file for each page of the score instead of a single multi-page PDF file.

[larsenwork]

perfect - single page is what I (we) want - sheets are display online using a basic image carousel.

[yroul]

@larsenwork I added a "How to get started" section in the readme (for Linux only yet). I tested it quickly. It should works for many Linux users (I run Fedora, should be ok for Ubuntu).

[larsenwork]

@yroul thank you very much - I'll have a look at it tomorrow :+1:

[larsenwork]

@yroul I still haven't gotten any picture of you to put on the webpage contributors list - send an image if you want to get up there :)