Recherche avancée

Sur d’autres sites (6998)

• Adding A New System To The Game Music Website

  1er août 2012, par Multimedia Mike — General

  At first, I was planning to just make a little website where users could install a Chrome browser extension and play music from old 8-bit NES games. But, like many software projects, the goal sort of ballooned. I created a website where users can easily play old video game music. It doesn’t cover too many systems yet, but I have had individual requests to add just about every system you can think of.

  The craziest part is that I know it’s possible to represent most of the systems. Eventually, it would be great to reach Chipamp parity (a combination plugin for Winamp that packages together plugins for many of these chiptunes). But there is a process to all of this. I have taken to defining a number of phases that are required to get a new system covered.

  Phase 0 informally involves marveling at the obscurity of some of the console systems for which chiptune collections have evolved. WonderSwan ? Sharp X68000 ? PC-88 ? I may be viewing this through a terribly Ameri-centric lens. I’ve at least heard of the ZX Spectrum and the Amstrad CPC even if I’ve never seen either.

  No matter. The goal is to get all their chiptunes cataloged and playable.

  Phase 1 : Finding A Player
  The first step is to find a bit of open source code that can play a particular format. If it’s a library that can handle many formats, like Game Music Emu or Audio Overload SDK, even better (probably). The specific open source license isn’t a big concern for me. I’m almost certain that some of the libraries that SaltyGME currently mixes are somehow incompatible, license-wise. I’ll worry about it when I encounter someone who A) cares, and B) is in a position to do something about it. Historical preservation comes first, and these software libraries aren’t getting any younger (I’m finding some that haven’t been touched in a decade).

  Phase 2 : Test Program
  The next phase is to create a basic test bench program that sends a music file into the library, generates a buffer of audio, and shoves it out to the speakers via PulseAudio’s simple API (people like to rip on PulseAudio, but its simple API really lives up to its name and requires pages less boilerplate code to play a few samples than ALSA).

  Phase 3 : Plug Into Web Player
  After successfully creating the test bench and understanding exactly which source files need to be built, the next phase is to hook it up to the main SaltyGME program via the ad-hoc plugin API I developed. This API requires that a player backend can, at the very least, initialize itself based on a buffer of bytes and generate audio samples into an array of 16-bit numbers. The API also provides functions for managing files with multiple tracks and toggling individual voices/channels if the library supports such a feature. Having the test bench application written beforehand usually smooths out this step.

  But really, I’m just getting started.

  Phase 4 : Collecting A Song Corpus
  Then there is the matter of staging a collection of songs for a given system. It seems like it would just be a matter of finding a large collection of songs for a given format, downloading them in bulk, and mirroring them. Honestly, that’s the easy part. People who are interested in this stuff have been lovingly curating massive collections of these songs for years (see SNESmusic.org for one of the best examples, and they also host a torrent of all their music for really quick and easy hoarding).
  
  In my drive to make this game music website more useful for normal people, the goal is to extract as much metadata as possible to make searching better, and to package the data so that it’s as convenient as possible for users. Whenever I seek to add a new format to the collection, this is the phase where I invariably find that I have to fundamentally modify some of the assumptions I originally made in the player.

  First, there were the NES Sound Format (NSF) files, the original format I wanted to play. These are files that have any number of songs packed into a single file. Playback libraries expose APIs to jump to individual tracks. So the player was designed around that. Game Boy GBS files also fall into this category but present a different challenge vis-à-vis metadata, addressed in the next phase.

  Then, there were the SPC files. Each SPC file is its own song and multiple SPC files are commonly bundled as RAR files. Not wanting to deal with RAR, or any format where I interacted with a general compression API to pull a few files out, I created a custom resource format (inspired by so many I have studied and documented) and compressed it with a simpler compression API. I also had to modify some of the player’s assumptions to deal with this archive format. Genesis VGMs, bundled either in .zip or .7z, followed the same model as SPC in RAR.

  Then it was suggested that I attempt to bring SaltyGME closer to feature parity with Chipamp, rather than just being a Chrome browser frontend for Game Music Emu. When I studied the Portable Sound Format (PSF), I realized it didn’t fit into the player model I already had. PSF uses a sort of shared library model for code execution and I developed another resource archive format to cope with it. So that covers quite a few formats.

  One more architecture challenge arose when I started to study one of the prevailing metadata formats, explained in the next phase.

  Phase 5 : Metadata
  Finally, for the collections to really be useful, I need to harvest that juicy metadata for search and presentation.

  I have created a series of programs and scripts to scrape metadata out of these music files and store it all in a database that drives the website and search engine. I recognize that it’s no good to have a large corpus of songs with minimal metadata and while importing bulk quantities of music, the scripts harshly reject songs that have too little metadata.

  Again, challenges abound. One of the biggest challenges I’m facing is the peculiar quasi-freeform metadata format that emerged as .m3u that takes a form similar to :

  #################################################################
  #
  # GRADIUS2
  # (c) KONAMI  by Furukawa Motoaki, IKACHAN
  #
  #################################################################
  nemesis2.kss::KSS,62,[Nemesis2] (Opening),2:23,,0
  
  nemesis2.kss::KSS,61,[Nemesis2] (Start),7,,0
  
  nemesis2.kss::KSS,43,[Nemesis2] (Air Battle),34,0-
  
  nemesis2.kss::KSS,44,[Nemesis2] (1st. BGM),51,0-
  
  [...]
  

  A lot of file formats (including Game Boy GBS mentioned earlier) store their metadata separately using this format. I have some ideas about tools I can use to help me process this data but I’m pretty sure each one will require some manual intervention.

  As alluded to in phase 4, .m3u presents another architectural challenge : Notice the second field in the CSV .m3u data. That’s a track number. A player can’t expect every track in a bundled chiptune file to be valid, nor to be in any particular order. Thus, I needed to alter the architecture once more to take this into account. However, instead of modifying the SaltyGME player, I simply extended the metadata database to include a playback order which, by default, is the same as the track order but can also accommodate this new issue. This also has the bonus of providing a facility to exclude playback of certain tracks. This comes in handy for many PSF archives which tend to include files that only provide support for other files and aren’t meant to be played on their own.

  Bright Side
  The reward for all of this effort is that the data lands in a proper database in the end. None of it goes back into the chiptune files themselves. This makes further modification easier as all of the data that is indexed and presented on the site comes from the database. Somewhere down the road, I should probably create an API for accessing this metadata.

• How to create a custom theme in Piwik – Introducing the Piwik Platform

  23 août 2014, par Thomas Steur — Development

  This is the start of a new blog series where we introduce the capabilities of the Piwik platform. You’ll learn how to write custom plugins & themes, how to use our HTTP APIs and more.

  We have been greatly simplifying our APIs over the last year focusing primarily on one design principle :

  The complexity of our API should never exceed the complexity of your use case.

  In other words, if you have a simple use for our API, we want it to be simple for you to accomplish it. If you have a complex, big, hairy, change-the-world idea, then maybe we can’t make it simple for you to accomplish it, but we want it to be possible.

  Over the next weeks and months you will learn what exactly we mean by this and how we accomplished it.

  FYI, don’t worry if you’re currently using our APIs, we keep them backwards compatible and we announce breaking changes in our platform changelog.

  Getting started

  In this series of posts, we assume that you have already set up your development environment. If not, visit the Piwik Developer Zone where you’ll find the tutorial Setting up Piwik.

  To summarize the things you have to do to get setup :

  • Install Piwik (for instance via git).
  • Activate the developer mode : ./console development:enable --full.
  • And if you want, generate some test data : ./console visitorgenerator:generate-visits --idsite=1 --limit-fake-visits=600. This can take a while and requires the VisitorGenerator plugin from the Marketplace.

  Let’s start creating our own theme

  We start by using the Piwik Console to create a blank theme :

  ./console generate:theme

  The command will ask you to enter a name, description and version number for your theme. I will simply use “CustomTheme” as the name of the theme. There should now be a folder plugins/CustomTheme which contains some files to get you started easily.

  Before we modify our theme, we have to activate it by visiting the Settings => Themes admin page in our Piwik installation, or alternatively by running the command ./console core:plugin activate YourCustomTheme. If the theme is not activated, we won’t see any changes.

  Theme Contents

  The most important files in our theme are plugins/CustomTheme/stylesheets/theme.less, plugins/CustomTheme/stylesheets/_colors.less and plugins/CustomTheme/stylesheets/_variables.less :

  • theme.less is the file that will be included when your theme is activated. In this file you would include other stylesheet files and overwrite CSS styles.
  • _colors.less contains many less variables allowing you to easily change the colors Piwik uses.
  • _variables.less contains currently only one variable to change the font family. More variables will be added in the future. Note : This is a new feature and the file will be only there in case you have installed Piwik using Git or at least Piwik 2.6.0.

  Changing the font family

  To change the font family simply overwrite the variable @theme-fontFamily-base: Verdana, sans-serif; in _variables.less. That’s it.

  Changing colors

  To change a color, uncomment the less variables of the colors you want to change in _colors.less. I will shortly explain some of them. Usually changing only these colors will be enough to adjust Piwik’s look to your corporate design or to create a look that pleases you :

  @theme-color-brand:                    #d4291f; // The Piwik red which is for instance used in the menu, it also defines the color of buttons, the little arrows and more
  
  @theme-color-brand-contrast:           #ffffff; // Contrast color to the Piwik red. Usually you need to change it only in case you define a light brand color. For instance to change the text color of buttons
  
  @theme-color-link:                     #1e93d1; // The link color which is usually a light blue
  
  
  
  @theme-color-widget-title-text:        #0d0d0d; // The text and background color of the header of a widget (Dashboard)
  
  @theme-color-widget-title-background:  #f2f2f2;
  
  
  
  @theme-color-menu-contrast-text:       #666666; // The text color of a menu item in the reporting sub menu and the admin menu
  
  @theme-color-menu-contrast-textActive: #0d0d0d; // The text color of an active menu item
  
  @theme-color-menu-contrast-background: #f2f2f2; // The background color of a menu item
  
  
  
  @graph-colors-data-series[1-8]:        #000000; // The different colors used in graphs

  Making the change visible

  To make a color or font change actually visible when you reload a page in Piwik you will have to delete the compiled CSS file after each change like this :

  rm tmp/assets/asset_manager_global_css.css

  Publishing your Theme on the Marketplace

  In case you want to share your theme with other Piwik users you can do this by pushing your theme to GitHub and creating a tag. Easy as that. Read more about how to distribute a theme.

  Advanced features

  Isn’t it easy to create a custom theme ? All we had to do is to change some less variables. We never even created a file ! Of course, based on our API design principle, you can accomplish more if you want. For instance, you can change icons, CSS stylesheets, templates and more.

  For further customising your Piwik, you can even change the logo and favicon in the Settings => General settings page.

  Would you like to know more about theming ? Go to our Theme guide in the Piwik Developer Zone.

  If you have any feedback regarding our APIs or our guides in the Developer Zone feel free to send it to us.

  PS : see also this related FAQ : How do I White Label Piwik ?

• How to create a custom theme in Piwik – Introducing the Piwik Platform

  23 août 2014, par Thomas Steur — Development

  This is the start of a new blog series where we introduce the capabilities of the Piwik platform. You’ll learn how to write custom plugins & themes, how to use our HTTP APIs and more.

  We have been greatly simplifying our APIs over the last year focusing primarily on one design principle :

  The complexity of our API should never exceed the complexity of your use case.

  In other words, if you have a simple use for our API, we want it to be simple for you to accomplish it. If you have a complex, big, hairy, change-the-world idea, then maybe we can’t make it simple for you to accomplish it, but we want it to be possible.

  Over the next weeks and months you will learn what exactly we mean by this and how we accomplished it.

  FYI, don’t worry if you’re currently using our APIs, we keep them backwards compatible and we announce breaking changes in our platform changelog.

  Getting started

  In this series of posts, we assume that you have already set up your development environment. If not, visit the Piwik Developer Zone where you’ll find the tutorial Setting up Piwik.

  To summarize the things you have to do to get setup :

  • Install Piwik (for instance via git).
  • Activate the developer mode : ./console development:enable --full.
  • And if you want, generate some test data : ./console visitorgenerator:generate-visits --idsite=1 --limit-fake-visits=600. This can take a while and requires the VisitorGenerator plugin from the Marketplace.

  Let’s start creating our own theme

  We start by using the Piwik Console to create a blank theme :

  ./console generate:theme

  The command will ask you to enter a name, description and version number for your theme. I will simply use “CustomTheme” as the name of the theme. There should now be a folder plugins/CustomTheme which contains some files to get you started easily.

  Before we modify our theme, we have to activate it by visiting the Settings => Themes admin page in our Piwik installation, or alternatively by running the command ./console core:plugin activate YourCustomTheme. If the theme is not activated, we won’t see any changes.

  Theme Contents

  The most important files in our theme are plugins/CustomTheme/stylesheets/theme.less, plugins/CustomTheme/stylesheets/_colors.less and plugins/CustomTheme/stylesheets/_variables.less :

  • theme.less is the file that will be included when your theme is activated. In this file you would include other stylesheet files and overwrite CSS styles.
  • _colors.less contains many less variables allowing you to easily change the colors Piwik uses.
  • _variables.less contains currently only one variable to change the font family. More variables will be added in the future. Note : This is a new feature and the file will be only there in case you have installed Piwik using Git or at least Piwik 2.6.0.

  Changing the font family

  To change the font family simply overwrite the variable @theme-fontFamily-base: Verdana, sans-serif; in _variables.less. That’s it.

  Changing colors

  To change a color, uncomment the less variables of the colors you want to change in _colors.less. I will shortly explain some of them. Usually changing only these colors will be enough to adjust Piwik’s look to your corporate design or to create a look that pleases you :

  @theme-color-brand:                    #d4291f; // The Piwik red which is for instance used in the menu, it also defines the color of buttons, the little arrows and more
  
  @theme-color-brand-contrast:           #ffffff; // Contrast color to the Piwik red. Usually you need to change it only in case you define a light brand color. For instance to change the text color of buttons
  
  @theme-color-link:                     #1e93d1; // The link color which is usually a light blue
  
  
  
  @theme-color-widget-title-text:        #0d0d0d; // The text and background color of the header of a widget (Dashboard)
  
  @theme-color-widget-title-background:  #f2f2f2;
  
  
  
  @theme-color-menu-contrast-text:       #666666; // The text color of a menu item in the reporting sub menu and the admin menu
  
  @theme-color-menu-contrast-textActive: #0d0d0d; // The text color of an active menu item
  
  @theme-color-menu-contrast-background: #f2f2f2; // The background color of a menu item
  
  
  
  @graph-colors-data-series[1-8]:        #000000; // The different colors used in graphs

  Making the change visible

  To make a color or font change actually visible when you reload a page in Piwik you will have to delete the compiled CSS file after each change like this :

  rm tmp/assets/asset_manager_global_css.css

  Publishing your Theme on the Marketplace

  In case you want to share your theme with other Piwik users you can do this by pushing your theme to GitHub and creating a tag. Easy as that. Read more about how to distribute a theme.

  Advanced features

  Isn’t it easy to create a custom theme ? All we had to do is to change some less variables. We never even created a file ! Of course, based on our API design principle, you can accomplish more if you want. For instance, you can change icons, CSS stylesheets, templates and more.

  For further customising your Piwik, you can even change the logo and favicon in the Settings => General settings page.

  Would you like to know more about theming ? Go to our Theme guide in the Piwik Developer Zone.

  If you have any feedback regarding our APIs or our guides in the Developer Zone feel free to send it to us.

  PS : see also this related FAQ : How do I White Label Piwik ?