Creating animalnoteheads.com/sheets - the sheet browser + viewer

[larsenwork]

This part of the website should have 2 core functions

1. browse the sheets (with filter options such as difficulty, language etc.)
2. View the sheets

   To-do

   • [x] Figure out which meta tags the sheets should have
   • [x] Figure out if it's possible to use github folders maybe together with the github API somehow

The viewer

• [x] Open directly in full screen better with a toggle
• [x] Control bar in top (or bottom) that can be hidden (or almost hidden) no need
• [x] Have fit to screen and fit 2 pages to screen function not needed because landscape is default format
• [ ] Toggle to show/hide animals.svg
• [x] Work with different number of pages (1-...?)

Cosmetics

• [x] Use inline svg icons for the social icons
• [ ] ...

[larsenwork]

http://rypan.github.io/jekyll-db we can maybe use this somehow

[yroul]

Any idea about the UI for the sheets browser / viewer ? I was thinking it can be done with some nice HTML5 / JS.

[larsenwork]

@yroul thinking the same

• automatically open in full screen
• toggle to hide controls
• use keyboard and touch gestures

I'm thinking more about how to make the database now and thinking we don't need one. Do you have experience using jekyll?

Use categories for languages, each sheets is a blog post.

[yroul]

@andreaslarsen no i never really used Jekyll. I used to play a bit with it when i was thinking to do some blogging but never go beyond some tutorials.

Can't we just maintain a JSON file with a list of all available sheets then put each sheet in its own folder on the web server ?

[larsenwork]

We could.

My concern is to make it as easy as possible for users to submit - but maybe if the JSON could be updated automatically every time a folder gets added to the sheets branch?

[yroul]

If we want the users to add themself some sheets, i think we can't use Jekyll because it's static : each time we want to update / add content, we'll need to build the site.

I was thinking the workflow to add sheets will be through Github and pull requests. If we want the users to add sheets "live" on the website, we need some backend development

[larsenwork]

Are you sure? Github does the jekyll build automatically when you add e.g. a post

[larsenwork]

I just did a quick test on http://andreaslarsen.github.io

[yroul]

Yes because with the github hosting, there is some kind of hook to rebuild automatically your website when you push some changes.

I may be wrong.

I'm a bit confused now : who are the ones you call the "users" ? Are they people on github who will send a pull request to add sheets ? Or are they musicians / transcribers from internet adding sheets through form or webpage ?

[larsenwork]

Users would be musicians / transcribers adding and updating sheets with pull requests. We could make a form where users can send links to zip-files if they are not familiar with github - that form would create an github issue with the label sheet-update

Advantage: Source control for everything, no database and static=fast website Disadvantage: When users add link to zip then a github savy user would have to do the pr but it's just a matter of unzip -> pr (but we would still have to verify peoples subscriptions if we do the json method so I'm not sure if it's that big of a disadvantage)

[larsenwork]

The form could send to animalnoteheadsform@gmail.com -> IFTTT -> github issue

[yroul]

OK so if the submissions are mainly through pull request then yes i think we can develop a jekyll plugin which update a JSON file each time a new post / sheet is added to maintain the sheets list.

Now i have a bettter understanding of the process :)

[larsenwork]

But do you think we need json at all?

I had thought about something link this: http://andreaslarsen.github.io

[larsenwork]

I haven't added the styling (need to move it to gh-pages here) but the tables are sortable.
I put them in _post/Language/ but we could (and probably should make one more level so that each sheet is in it's own folder together with the svg's + .ly file

The .ly is just there so it's easy to make changes to an song

[larsenwork]

I've just updated it so it's now even easier and better organised

Sheets/Language/_posts/Song Title/YYYY-MM-DD-song-title.md

This way the category get's added automatically and the md file just looks like this

---
layout: post
title: Marry Had A Little Lamb
fivepage: true
difficulty: 1
---

fivepage bool can probably be changed to a int instead e.g. pages: 5

[yroul]

Maybe we don't need JSON. I think we can just look through the tables to find the informations we need for the sheet browser (name, difficulty, language..) and using them in a kind of autocomplete input ?

The svg's need to have the same name as the "post" :

Sheets/Language/_posts/Song Title/YYYY-MM-DD-song-title.md Sheets/Language/_posts/Song Title/YYYY-MM-DD-song-title-black.svg Sheets/Language/_posts/Song Title/YYYY-MM-DD-song-title-animals.svg

This way we :

• don't need JSON
• can view the full list of sheets or filter them
• should be able once we are on a sheet/post page to fetch the svg's layer

[elijahverdoorn]

I would try without JSON. How about a database (SQLite?) with fields for filenames so they can be whatever we want, then just write PHP to loop through the database rows and display links?

[larsenwork]

@yroul why would the filenames of the svg have to be the same?

@elijahverdoorn we could do that but if we want the date information then we might as well write it in the title of the .md file and it has to be in the title for jekyll to want: have both of you checked out andreaslarsen.github.io?

[larsenwork]

Plus I think we would need a small app that runs lilypond command line (still waiting on reply from abraham) anyway so that could also automatically get the date.

[larsenwork]

Hmm...jekyll is not so fond of having images inside the posts folder, but this works

+---_posts
|   \---English
|       \---2015-15-05-mary-had-a-little-lamb.md
+---images
|   \---English
|       \---mary-had-a-little-lamb
|           \---1animal.svg
|           \---1black.svg
|           \---2animal.svg
|           \---2black.svg

and then inside post layout call something like this:

{% if page.onepage %}
    <object class="black" data="../../images{{ page.url }}1black.svg" type="image/svg+xml" /></object>
    <object class="animal" data="../../images{{ page.url }}1animal.svg" type="image/svg+xml" /></object>{% endif %}

and the md files look like this

---
layout: post
title: Marry Had A Little Lamb
onepage: true
difficulty: 1
categories: english
---

I've updating andreaslarsen.github.io with most of this - any thoughts?

[yroul]

Looks good but if thinks it's more standard to use tag rather than

[larsenwork]

rather than what? :)

[yroul]

sorry *rather the

[yroul]

"object"

[larsenwork]

ah...that's because jekyll messes with the header file of the svg so have to call it manually

[larsenwork]

I think you need to use object to have type="image/svg+xml"

[yroul]

why would you need that ? Most browser should support tag like nowadays

[larsenwork]

?

[yroul]

<img src="xxx.svg"/>

sorry, i'm not used to markdown

[larsenwork]

no worries, problem is as stated that jekyll seems to mess with the header file I the only way around this I've found is to declare it explicitly. It looks like this when using the standard <img src="">

[larsenwork]

and like this with object method

[yroul]

OK, It's a bit strange.

[larsenwork]

yeah, I've done a quick search without learning too much and since this works I don't think it's worth pursuing just for the sake of looking a bit prettier/compact in the code.

The way I hope we can do this (still waiting on input from abraham) is to

• run a script that creates not just the svg files but also ask user about title, language, difficulty and then outputs:

+--- Dekstop (or wherever they choose)
|   \---2015-15-05-mary-had-a-little-lamb.md
|   \---mary-had-a-little-lamb
|       \---1animal.svg
|       \---1black.svg
|       \---2animal.svg
|       \---2black.svg

• tell the user to put the md file in _posts/"language" and the folder inside images/"language"

[larsenwork]

fixed the svg (was a problem with some part of it being base64-encode)

moved everything to gh-pages so you can see it http://animalnoteheads.com/sheets/ and I've added a test svg to "mary had..."

I've updated the todo at the top so let me know if you'd like to help with some of it :+1:

[larsenwork]

and I'm also gonna need your images for when you start contributing :smile:

[larsenwork]

It looks like we have to make do with pdf at first - I'm thinking about using pdf.js as viewer or what do you guys think?

[larsenwork]

no we don't just found an easy way to convert pdf to svg

[yroul]

I don't know much about pdf.js but should be ok to display the sheets. What's the issue about pdf to svg conversion ? Rendering ?

[larsenwork]

Yep, as written in my second comment I made it easy to convert pdf to svg in command line so no (pdf2svg is build on pdf.js I think) so I'll think we'll just use svg + slick carousel in fullscreen for the viewer.

[larsenwork]

You can see a almost working sample on http://animalnoteheads.com/test - any thoughts?