Announcement

Collapse
No announcement yet.

What you need to know to create a skin

Collapse
X
  • Filter
  • Time
  • Show
Clear All
new posts

  • What you need to know to create a skin

    Here's some information someone might find useful. Hopefully it's written in a natural enough way that non-coders can understand and work with this. Tidder was giving me a hard time about being too technical in my writings

    There are a couple rather important things that should be taken into mind when designing and creating a skin. The first is that everything is CASE SENSITIVE!. I know this is a new concept to windows users, but being as this is cross platform I'm keeping everything standardized. Also there must be a Menu1.xml. This skin file does not have to be a menu per se, but it has to be something as it will be the first window shown when RevFE loads. Reference the Rev skin for an example of how to create a non-menu based skin.

    There are a bare set of common controls required for RevFE to function as a media player. You can reference the included AudioPlayer.xml in the default skin set for most of these.

    Listboxes:
    There are two primary listboxes that RevFE is set up to use to provide media functionality. The first is playlistListBox. This is a single column listbox that will be populated on load with a list of the currently loaded playlists. You send a playlist to the MediaLibrary with this command:
    Code:
    MediaLibrary:playlist set !%LISTBOX-playlistListBox-ITEMTEXT%!
    this will send the currently selected text to MediaLibrary and it will take care of loading that playlist into memory and getting it prepared to play.


    This brings into play the second listbox required, which is currentPlaylistBox. This listbox is populated with a list of songs in the current playlist. Unlike the list of playlists, music is played by index, not text. Hence the command required to start a selected song playing is:
    Code:
    MediaEngine:media play !%LISTBOX-currentPlaylistBox-ITEMINDEX%!
    Please note the ITEMINDEX as opposed to ITEMTEXT. These commands are usable on any listbox. This can either be a standalone button, or the cmd="" on the listbox itself. If it is a standalone button and you have nothing selected, nothing will happen!

    There are a couple of variables which come into play at this point, which display information about the song currently being played. Below are two example labels (text display boxes). The first one displays current and total track time. The second one displays artist and title information. All these values are for the currently playing track.


    Code:
    <label>
    	<properties name="trackTime2" text="%TT-CURRENTTIME%/%TT-TOTALTIME%" font="Microsoft Sans Serif" fontsize="18" fontcolor="255:255:255" textvalignment="" texthalignment="" />
    	<geometry x="410" y="445" width="250" height="35" />
    	<function cmd="" textvalues="%TT-CURRENTTIME%,%TT-TOTALTIME%" />
    </label>
    <label>
    	<properties name="currentSongLabel2" text="%ID3-CURRENTARTIST% - %ID3-CURRENTTITLE%" font="Microsoft Sans Serif" fontsize="18" fontcolor="255:255:255" textvalignment="" texthalignment="" />
    	<geometry x="10" y="410" width="500" height="35" />
    	<function cmd="" textvalues="%ID3-CURRENTARTIST%,%ID3-CURRENTTITLE%" />
    </label>
    The text field denotes how the text will be displayed, and the textvalues field is a comma delimited list of variables used. if you have a variable in the text field, but not in textvalues, it will not be updated.

    Once you have a playlist loaded, a song started, and you are watching the numbers tick down as the song plays you probably are going to want to be able to control this song, play/pause/stop, and move around the playlist. This is achieved through some MediaEngine commands:
    Code:
    MediaEngine:media pause
    This will pause or unpause (as a toggle) the song.
    Code:
    MediaEngine:media stop
    This will stop the current song from playing, and reset it to the beginning
    Code:
    MediaEngine:media prev
    This will move back one song in the playlist
    Code:
    MediaEngine:media next
    This will move forward one song in the playlist

    If you assign these commands to buttons as such:
    Code:
    <button>
    	<properties name="pauseButton" text="" font="Microsoft Sans Serif" fontsize="18" fontcolor="255:255:255" textvalignment="" texthalignment="" />
    	<geometry x="200" y="500" width="100" height="100" />
    	<function cmd="MediaEngine:media pause" textvalues="" />
    </button>
    You can now easily control the flow of a song.


    Let's assume you loaded a playlist slightly larger than your screen. You are going to need a way to scroll around this playlist (Or list of playlists in the case of the playlistmanagerwindow.xml). You can set up a button with the command
    Code:
    WindowName:window scroll-up !listboxname!
    Let's assume your window is called AudioPlayer.xml as it is in the default skin, and your listbox is currentPlaylistBox. The following command would scroll the box up:
    Code:
    AudioPlayer:window scroll-up !currentPlaylistBox!
    You also have scroll-down, page-up, and page-down which follow the same format:
    Code:
    AudioPlayer:window scroll-down !currentPlaylistBox!
    AudioPlayer:window page-up !currentPlaylistBox!
    AudioPlayer:window page-down !currentPlaylistBox!

    That's enough about media, let's talk about window control. There are a couple of things you can do with windows. When RevFE first loads, you only have one window showing. To display other windows you must show them. Let's say you have a button on your menu to show the AudioPlayer. The command would be:
    Code:
    AudioPlayer:window show
    Likewise, if you have a button on the audio player to hide itself (to go back to the main menu) it would be:
    Code:
    AudioPlayer:window hide
    There is also a "back" feature, which will take you to the last-shown window:
    Code:
    WindowManager:window showlast
    This is useful if your skin does not follow a linear layout, eg it does not have a main menu, but rather windows link to each other.

    I will be working on, and soon will post some in depth documentation on commands and events for each included plugin.
    "stop with the REINSTALLS, what do you think we got some lame-o installer!!!" - mitchjs
    RevFE
    My Shop

  • #2
    can I just make you the images and you do my coding? I'm so lazy its not funny. I did have a number of psds of complete graphics for skins that I never did anything with but I lost them due to a crash. (small cardboard box carrying a number of parts fell off the truck at 85mph)
    Originally posted by menudude
    thank you all for your help minus the useless post by sjlucky...

    Comment


    • #3
      Lets see what you can do. If it looks good enough, I'll help with the coding part.
      Tidder

      Try RevFE
      The best resurrected frontend I've ever used, period.


      I Wish I could ban people

      Comment


      • #4
        SjLucky, YES! I'm a horrible graphics artist, as you can probably tell from the default skin but I'd be more than happy to take your images and turn them into a skin.
        "stop with the REINSTALLS, what do you think we got some lame-o installer!!!" - mitchjs
        RevFE
        My Shop

        Comment


        • #5
          working...........
          Originally posted by menudude
          thank you all for your help minus the useless post by sjlucky...

          Comment


          • #6
            Yay!
            Tidder

            Try RevFE
            The best resurrected frontend I've ever used, period.


            I Wish I could ban people

            Comment


            • #7
              Sjlucky: I'm working on a more comprehensive list of what windows are required for each feature of Rev.
              "stop with the REINSTALLS, what do you think we got some lame-o installer!!!" - mitchjs
              RevFE
              My Shop

              Comment


              • #8
                Originally posted by malcom2073 View Post
                Sjlucky: I'm working on a more comprehensive list of what windows are required for each feature of Rev.
                malcom: I'm working on a more comprehensive set of graphics that is required for your features of Rev.


                Aight I'm my house. I better have something finished by tonight. If not Im getting old.
                Originally posted by menudude
                thank you all for your help minus the useless post by sjlucky...

                Comment


                • #9
                  Got most of it done but I might trash it and start over. Dont know about the direction it took. Could use the list so Im not making crap that isnt needed.

                  You guys like PSD? I like it cause I can keep everything in order and easy to follow.
                  Originally posted by menudude
                  thank you all for your help minus the useless post by sjlucky...

                  Comment


                  • #10
                    SjLucky,

                    I know how you feel. I had a skin 3/4 done, but didn't like the way it was turning out. Since then I haven't had enough time to get back to it. .PSD is probably the preferred format.

                    At least there is more documentation to work with now.
                    Never let the truth get in the way of a good story

                    Comment


                    • #11
                      Im so tempted to steal the honeycomb design from UnusuallyGenius... Its a neat concept and you can really use the real estate of the screen. Then I was thinking about a LCARS one just for the s&gs of it. LCARS shouldnt be too hard to pull off, I just don't know of anyone running around in a galaxy class star ship that would want it...

                      hmm just had a thought... I should get a 92 civic glass up some warp nacelle mount them to back... **** that.. Where's that dude with the Lebaron that doesnt even have a computer in it? Rename his water cannon to Phazers... hahahaha

                      BACK TO TOPIC: I guess my problem is I'm over thinking it. Like I want to make it where you dont loose basic functions like volume and playback control when you change windows. Thats one thing that gets under my skin with DF4. In the GPS window there isnt any volume controls. Sure you could hit the play button and pause it but what if I just want to turn it down? then I have to hit menu then turn it down then hit gps again... thats two screen touches too many. Like right now Im working on a bottom bar and a top bar. Bottom will be basic controls prev/play/pause/stop/forw/etc/etc. The top I was going to have the info bar with all that jazz up their. Thats up to tidder and malcome as to what goes up there. Those two bars I would like to keep through out the skin if possible or at least a facsimile or that.

                      The gps screen is another one that I've been going over and over about. That screen is the main reason why I quit using Void3. It worked, like crap. Dont misunderstand me, LS did a beautiful skin, and I loved it, just got fed up with it. Is there anyway I could make a button set for lets say the LEFT SIDE, that stays off screen until called upon by lets say taping the top left corner of the screen?transparent png? Anyway to do that all the way around the screen? Like one for bottom right and top? One of the biggest complaints I get from my installs (I dont charge for parts or software, just labor) is the gps screen. Its either the maps are too small/crowded by the interface or just plain didnt like it.

                      Too many people coming in here at work. I'll finish my rant later...


                      BTW..
                      wwckd? Who Would Capt. Kirk Do? Borg queen or the palmpre chik?
                      Originally posted by menudude
                      thank you all for your help minus the useless post by sjlucky...

                      Comment


                      • #12
                        I know what you mean about the DFX4 skin. Plus it is way complicated if you want to do anything out of the norm with the skin. (Mal and I have already talked about this)

                        As for sliding panels, I asked for this ages ago and I am not sure if it is 100% implemented yet (well at least the way I want to have it)

                        I look forward to see what you come up with. Unfortunately my graphics skills aren't as good as what I would like, but that won't stop me making a skin when I get some time.

                        .... beam me up scotty.
                        Never let the truth get in the way of a good story

                        Comment


                        • #13
                          I'm still working on a list, I swear!

                          Yes, sliding panels have been in there since before you (meddler) requested them. Look at the Rev skin included with RevFE0.41 for an example.
                          "stop with the REINSTALLS, what do you think we got some lame-o installer!!!" - mitchjs
                          RevFE
                          My Shop

                          Comment


                          • #14
                            Please keep in mind, buttons don't HAVE to have text on them. RevFE can put text on buttons programatically, so the images can be re-used for multiple things. Such as having three menus where each menu image is the same, just the button labels are different.

                            Things each window of a skin could potentially have:

                            Main Menu
                            this screen is actually optional, as long as each window has a way to get to the next, you don't need a menu. I suggest actually having a menu (or two or three) for the time being, until I create a skin to demonstrate the menuless functionality. It's hard to explain.


                            AudioPlayer
                            Current Playlist
                            Up/Down/Page-up/Page-down buttons for list
                            Select button if you don't want "clicked" songs to auto-play
                            Play/pause/stop/next/prev buttons
                            Button to get to main menu, or playlist selector
                            Some kind of space to show the current song, and current time/total time

                            PlaylistManager
                            List for all playlists
                            Playlist editor button to show playlist editor window
                            Up/Down/Page-up/Page-down buttons for list
                            Select/Cancel buttons if needed.
                            You can either have the window select the "clicked" playlist, and hide, or have a "select" button that does this.

                            Playlist editor:
                            Button to add songs
                            Up/Down/Page-up/Page-down buttons for list
                            Button to delete song
                            MOve-up and Move-down buttons
                            Save button
                            Close-window button


                            File Browser (Used to add files to the playlist
                            List to show files
                            Up/Down/Page-up/Page-down buttons for list
                            Add and close window buttons


                            GPSwindow
                            Zoom in/out, Menu, and GPS info buttons
                            Space for the GPS window to be. In the default skin I believe this is 800x500, but can be any size


                            OSK.
                            Both numeric, Letters, and Date/Time OSK. Look at the default skin/fuel counter for examples of these

                            Fuel Counter
                            Again, look at the default skin for this.

                            Confirmation Box
                            Yes, No, and Cancel buttons, as well as space for user-settable text. This window can be smaller than the normal window (it will appear on top in the center)


                            HD Radio Window:
                            Look at the default skin for ideas for this one. Presets can either be buttons, or a list. If a list, you're gonna need add and remove buttons.

                            Generic Embedding window:
                            A window for embedding programs. It should have a button to open the program, close it, and hide the window.

                            This is all I can think of for now. If I edit it later to add stuff, I'll append the date down here.
                            "stop with the REINSTALLS, what do you think we got some lame-o installer!!!" - mitchjs
                            RevFE
                            My Shop

                            Comment


                            • #15
                              awesome, on it like a fat kid on cake
                              Originally posted by menudude
                              thank you all for your help minus the useless post by sjlucky...

                              Comment

                              Working...
                              X