I’ve made a pull request. I could merge it myself, but I rather let the rest see what I’ve made. I’ve structured everything in a new directory. The folder naming could be updated, but for now it works all right. I’ve added the Gulp task manager. It now concats, strips, compiles, adds vendor prefixes when needed, and includes a two-step variable for using a consistent style. The css comitted with it, is compiled by Gulp.
I hope you guys like it.
I haven’t changed the original public folder to not interfere with your current developments.
To start Gulp, run the npm install command in the public-2/build directory.
After that, use your IDE and run a SSH command line tool:
“npm” with arguments “run watch” in folder /public-2/build/
Btw; what’s quite ironic. I’m enjoying music while devving on Volumio. However…the UI seems to fail on me, and can only control via MPod :’(
next todo:
-> remove compiled css partials
-> add css source maps
-> move javascript to the public-2 folder and implement compiling
-> add js & css cache busting
-> add current layout to the style guide
I’ve yet to write a more elaborate use on the wiki. So far, it can be used. Coming week, I’ll be in the UK. During that time, I want to keep myself from using the computer too much. In januari I have a load of time to work on Volumio. In the mean time, I’ll start to correct things and implement the right stuff
New update: I was trying to implement bootstrap, but it’s such a hassle and really annoying integration. So I’ve came up with another system… since bootstrap doesn’t support sartwatches yet… and you know what? smartwatchers are AWESOME for remote control audio players.
So, i’ve made breakpoints with a name… does XXS or SM tells you something about the size? not really. Ok, it’s not free of device thinking, but at leas there’s a human readable reference.
I also implemented a way easier grid, that correspondents with the media queries. It works slightly different, namely, it has 16 columns +, up to whatever we want. We start with 4 columns for smart watch, 8 on mobile, etc.
This might sound big, but the better the precision is what we can work with. It doesn’t support grid in a grid, so its just styling on percentages if you want that (like 2/3) for 3 columns within a grid column.
Also, I’ve added a development mode where we can drop some styling in to help us develop the UI. It’s standard set to Off in the repository.
Last thing, I’ve also added a simple Node server, that works with a specific package. I won’t commit that yet, since it’s a bit dirty how it is now. The rest will suffice for now.
@michaelangelo: Do you have a SVG / illustrator / or vector version of the Volumio logo? I think this will make it look more crisp
Dear Gitaawerk,
we already implemented bootstrap with angular… However can’t comment on sass integration.
I am quite comfortable with twitter bootstrap, so it was my first choice here. However I do say that I love 16 columns grid, much more flexible (which can also be a drawback…)
I am trying to understand how to use all of that, without proper docs is quite hard to get into this (please add it when you can).
Which server are you referring to?
I do have a svg logo, I’ll update there.
As for smartwatches, I do love them as well, but I suggest to focus more on phones, tablet and pcs and later on look at them. As always, we start taclking the big stuff and then details
I was having a really hard time getting the bootstrap grid in there :’( It’s also very bloated in CSS size. Like, twice the size of what’s really needed. If you say what you want, I will implement it according the structure . The drawbacks so far is that you can do a grid inside a grid. It sounds handy, but will make it really complicated. And in the end, I don’t think it’s needed. In the end, you’re the lead here, of course
I can write some more documentation with examples. The problem is without any templating, it’s hard to make good examples. I also need to dive into the current code already written to see if I can make it more obvious how things work.
Haven’t gotten the time for it yet, perhaps when I’m in the UK coming week.
So far, the grid should work really simple:
(wrapper)
(row)
(cols per breakpoint)
The breakpoints refer to the ones implemented. The bootstrap one again are very bloated and are all over the place. I guess with mindless implementation, it works really well. Looking at the Less / Sass code, it’s very weird. It has deprecated code inside which doesn’t make a lot of sense to me. Again, I’m always for using the bootstrap code when you guys prefer it. I must say, have a look at it when I make some more examples and see if you like it . It’s like a third of the size minimum, and perhaps even more.
The server is just a small JS file that starts a webserver. You can add the html file with the path to it, and it runs. But it’s not really show-worthy. I really hope in Januari to make a more solid contribution than just a framework that doesn’t make sense yet
About the smart watch; well, it’s an easy thing to implement. Basically, I think only the “currently playing” with transport control is sufficient. Since the best way is to work mobile first, this is a thing to be taken into consideration. And as you are saying the main focus is on Phones and up, I promise! =)
What I want to do in the coming times is the following; Make a simple design sketch and implement it into an example html + sass & some docs (including some background info why I build it the way I did so the rest can comment and see if there are any flaws / thinking mistakes to comment on ) So far, It shouldn’t interfere with the rest of the code base.
Looking forward to making the next commit + writing the documentation.
Hey if you’re in the UK, guess the best thing you can do is enjoy the fantastic weather over there and just forget about us… Really… Enjoy the trip.
Anyway, we’re in a phase we’re still discussing what’s best for the project, so I’m really open to see your implementation. So, no order to use bootstrap. Just what’s best.
We already have a server on the current code (right now it shows the index.ejs file in the view folder). So we can use that, you can take a look here for reference on how our html are built embeddedjs.com/
Then, we can wait to see a bit of implementation of your ideas, must admit I’m concentrated on the OS right now, so we can wait until you set up something and start from here. I do agree that bootstrap has tons of stuff we don’t need. I’m more the guy that reduces stuff starting from big chunks, you do the reverse (which is probably better)…
So, to sum. I’m really eager to see a little example of your idea and then jump in!
Hahaha, I would definately do . I must say, it’s cozy, so once every x time. I love the country, but the weather is indeed worse than the Netherlands . Well, I have enough spare time. It’s visiting family for xmas. So ill take my tablet with me to play some games and work a tiny bit.
Cool! I will take a look at it. Last time I tried to start the server with the commands on the git page, it didn’t work. Perhaps I can use this to start. Would be a great help.
I’m very cruious what you’re gonna do with the OS. Really not so much my thing… so happy I can focus on this instead Reducing is a good way, but with bootstrap was hard to get a proper reduce out of it, and then I thought it was better to write the code myself. Looking forward to your comments!
Indeed. If we decide to use angular, theres most likely no need. Jquery is great for some backwards compatibility.
But in the end, with ie9+ support, we can use queryselector. I’m always up for use native. Fast and low bandwith. If we dont use angular, i’ve got a set of good pubsub systems, or can try reactive extensions for it.
I think its not yet the focus, but good to brainstorm about it.
no news yet. I’m in the transition of moving places for a short amount of time.
After that, I’m getting back at working on the GUI again. Starting with the documentation.
Maybe its nice to brainstorm about what we need in our GUI.
Not only because this will make building the GUI a bit easier, but also so we know what we have to aim for in our back-end system.
I’m not going into details about how I think the GUI should look, but here’s a list of things I think we definately need in our GUI:
Playback buttons (not sure if we can ditch the “stop” yet, but I think in the end its better to have pause/play only)
Album Art (playback as well as in library)
Add current song to x playlist
Library with “saved” music/playlists
Albums/Artists results
Panel with search results (not sure wether to split service-results, but at least give some indication of loading)
Add song from results/library to Play Queue/Playlist
Play Queue
Create webradio (input name + web-url and save into .pls in the backend)
Create new (empty) playlist
Settings menu, not entirely sure what we will need here
optional
Favorites panel? List with most frequently visited/played songs
This is what I can come up with right now (I’m in a hurry). Theres probably a lot more that you guys think we should have.
We need at least one of those for browsing playlists/local songs. I like how Spotify does this.
Library tab is not really needed in my opinion since we can just return full Albums and Artists in the search results
EDIT:
This is what I meant, not really sure if it’s the same in the desktop application, since I listen through the WebPlayer only
Yes, however, searching is one of those things are actually really hard. A simple interface for a library can be easier. They can as well be a combination together. Think of the library with filter options. I really like the way Microsoft’s Modern UI (formally known as Metro) has a great way of using it. Just a search bar and apply filters. Ok, its not really windows UI…
I’ll make a quick sketch, ill upload it later.
I like spotify’s intreface. Aside from some clutter here and there… queing and searching is not really great I think, but I think most of all, we need to start really really simple. With the main play interface.
We don’t have to create everything new right away. I would say let’s stick to the transport control first and see what it does. I like spotify’s interface, because it’s really simple. No fancier than it has to be, and it’s most of all very usable.
Having the round volume & progress bar looks cooler than it is handy.
btw; unfortunately, I will not have internet from next week for about 3 weeks. In the meantime, I can still create something and upload it here at work. But it will be harder.
On another note; Joda2 told me that when you pressed stop, only then harddrives stopped spinning. This might be a core function that need to react differently to make sure we can have a cleaner user interface. I’m not sure if that’s possible. I hope Michaelangelo or someone else might be able to comment on?
Absolutely . The library browser is I think a key to get a manageable device. I will work on that too, however, first the first screen. Tomorrow, I’m getting internet at last! I will try to get a web server up and running just for the UI version. I’ve got a lot of stuff working locally again. My internet took way longer than expected :’(.
and just forget about us… Really… Enjoy the trip.
