1 Form {
  2   borders {
  3     bevel_raised [ cornerArc="10" ]
  4   }
  5   verticalAlign: full
  6   horizontalAlign: full
  7   bgColor: "defaultBackground+15, defaultBackground+5"
  8   scriptURL: "skin.js"
  9   layout: forms
 10   rows: "4dlu,d,d,14dlu"
 11   columns: "d:g"
 12   widgets {
 13     {
 14       GroupBox {
 15         borders {
 16           line_3d [ cornerArc="6" ]
 17         }
 18         horizontalAlign: center
 19         bgColor: "Sage.controlLtGradient,Sage.controlLtGradient-20,defaultBackground-10,defaultBackground"
 20         bounds {
 21           x: "0"
 22           y: "2"
 23         }
 24         layout: forms
 25         rows: "4dlu,d,4dlu"
 26         columns: "4dlu,d,4dlu,d,4dlu,d,4dlu,d,4dlu,d,4dlu"
 27         widgets {
 28           {
 29             PushButton {
 30               bounds {
 31                 x: "1"
 32                 y: "1"
 33               }
 34               templateName: "headerButton"
 35               value: "Black Pearl"
 36               rolloverEnabled: false
 37               groupName: "skinColor"
 38               selected: true
 39             } [ onAction="changeSkin('dark')" ]
 40           }
 41           {
 42             PushButton {
 43               bounds {
 44                 x: "3"
 45                 y: "1"
 46               }
 47               templateName: "headerButton"
 48               value: "Gray Mist"
 49               rolloverEnabled: false
 50               groupName: "skinColor"
 51             } [ onAction="changeSkin('light')" ]
 52           }
 53           {
 54             PushButton {
 55               bounds {
 56                 x: "5"
 57                 y: "1"
 58               }
 59               templateName: "headerButton"
 60               value: "Red Dragon"
 61               rolloverEnabled: false
 62               groupName: "skinColor"
 63             } [ onAction="changeSkin('red')" ]
 64           }
 65           {
 66             PushButton {
 67               bounds {
 68                 x: "7"
 69                 y: "1"
 70               }
 71               templateName: "headerButton"
 72               value: "Jade"
 73               rolloverEnabled: false
 74               groupName: "skinColor"
 75             } [ onAction="changeSkin('green')" ]
 76           }
 77           {
 78             PushButton {
 79               bounds {
 80                 x: "9"
 81                 y: "1"
 82               }
 83               templateName: "headerButton"
 84               value: "Bayou Blues"
 85               rolloverEnabled: false
 86               groupName: "skinColor"
 87             } [ onAction="changeSkin('blue')" ]
 88           }
 89         }
 90       }
 91     }
 92     {
 93       Form {
 94         bounds {
 95           x: "0"
 96           y: "1"
 97         }
 98         layout: forms
 99         rows: "4dlu,f:d,14dlu,d"
100         columns: "4dlu,d,2dlu,d:g,2dlu,4dlu"
101         widgets {
102           {
103             Form {
104               borders {
105                 line_3d [ cornerArc="8" ]
106               }
107               columnSpan: 1
108               verticalAlign: top
109               horizontalAlign: full
110               bgColor: "defaultBackground+15, defaultBackground" [ magnitude="66" ]
111               bounds {
112                 x: "1"
113                 y: "1"
114               }
115               layout: forms
116               rows: "4dlu,d,4dlu,d,4dlu"
117               columns: "4dlu,d,4dlu"
118               widgets {
119                 {
120                   Form {
121                     borders {
122                       line_3d [ cornerArc="10" ]
123                     }
124                     columnSpan: 1
125                     horizontalAlign: center
126                     bgColor: "white,defaultBackground-10, defaultBackground+20"
127                     bounds {
128                       x: "1"
129                       y: "1"
130                     }
131                     layout: forms
132                     rows: "60dlu"
133                     columns: "4dlu,d,d,d,d,d,d,d,d,d,d,4dlu"
134                     widgets {
135                       {
136                         Slider {
137                           bounds {
138                             x: "1"
139                             y: "0"
140                           }
141                           templateName: "equalizerSlider"
142                           value: 60
143                           horizontal: false
144                           rightLabel: "32"
145                         }
146                       }
147                       {
148                         Slider {
149                           bounds {
150                             x: "2"
151                             y: "0"
152                           }
153                           templateName: "equalizerSlider"
154                           value: 65
155                           horizontal: false
156                           rightLabel: "64"
157                         }
158                       }
159                       {
160                         Slider {
161                           bounds {
162                             x: "3"
163                             y: "0"
164                           }
165                           templateName: "equalizerSlider"
166                           value: 70
167                           horizontal: false
168                           rightLabel: "125"
169                         }
170                       }
171                       {
172                         Slider {
173                           bounds {
174                             x: "4"
175                             y: "0"
176                           }
177                           templateName: "equalizerSlider"
178                           value: 62
179                           horizontal: false
180                           rightLabel: "250"
181                         }
182                       }
183                       {
184                         Slider {
185                           bounds {
186                             x: "5"
187                             y: "0"
188                           }
189                           templateName: "equalizerSlider"
190                           value: 60
191                           horizontal: false
192                           rightLabel: "500"
193                         }
194                       }
195                       {
196                         Slider {
197                           bounds {
198                             x: "6"
199                             y: "0"
200                           }
201                           templateName: "equalizerSlider"
202                           value: 55
203                           horizontal: false
204                           rightLabel: "1K"
205                         }
206                       }
207                       {
208                         Slider {
209                           bounds {
210                             x: "7"
211                             y: "0"
212                           }
213                           templateName: "equalizerSlider"
214                           value: 63
215                           horizontal: false
216                           rightLabel: "2K"
217                         }
218                       }
219                       {
220                         Slider {
221                           bounds {
222                             x: "8"
223                             y: "0"
224                           }
225                           templateName: "equalizerSlider"
226                           value: 70
227                           horizontal: false
228                           rightLabel: "4K"
229                         }
230                       }
231                       {
232                         Slider {
233                           bounds {
234                             x: "9"
235                             y: "0"
236                           }
237                           templateName: "equalizerSlider"
238                           value: 76
239                           horizontal: false
240                           rightLabel: "8K"
241                         }
242                       }
243                       {
244                         Slider {
245                           bounds {
246                             x: "10"
247                             y: "0"
248                           }
249                           templateName: "equalizerSlider"
250                           value: 68
251                           horizontal: false
252                           rightLabel: "16K"
253                         }
254                       }
255                     }
256                   }
257                 }
258                 {
259                   GroupBox {
260                     bounds {
261                       x: "1"
262                       y: "3"
263                     }
264                     layout: forms
265                     rows: "d,d"
266                     columns: "d,d,d:g"
267                     widgets {
268                       {
269                         Label {
270                           horizontalAlign: left
271                           fgColor: "foregroundColor"
272                           bounds {
273                             x: "0"
274                             y: "0"
275                           }
276                           value: "Playlists"
277                         }
278                       }
279                       {
280                         ComboBox {
281                           verticalAlign: full
282                           font {
283                             style: bold
284                           }
285                           fgColor: "brightForeground"
286                           bounds {
287                             x: "0"
288                             y: "1"
289                             width: "-1"
290                           }
291                           focusPainted: false
292                           dataURL:<< 
293                       iTunes DJ{icon: "images/shuffle.png"}
294                       Music Videos{icon: "images/dynamic_playlist.png"}
295                       My Top Rated{icon: "images/dynamic_playlist.png"}
296                       Recently Added{icon: "images/dynamic_playlist.png"}
297                       Recently Played{icon: "images/dynamic_playlist.png"}
298                       Top 25 Most Played{icon: "images/dynamic_playlist.png"}
299                       70's Music{icon: "images/dynamic_playlist.png"}
300                       80's Music{icon: "images/dynamic_playlist.png"}
301                       90's Music{icon: "images/dynamic_playlist.png"}
302                       Car R&B
303                       Car Hip Hop
304                       Car Rocp/Pop
305                       Car Blues
306                       Car Oldies
307                       Car Mello
308                       R&B
309                       Hip Hop
310                       Rock/Pop
311                       Blues
312                       Electric Blues
313                       Oldies
314                       Mello
315                       Latin
316                       Dance
317                       Party-Mix
318                       Folk
319                       Jazz
320                       Christmas
321                       Burn
322                       Trip
323                       Slow Jams
324                       
325 >> [ inline="true" ]
326                           itemDescription {
327                             icon: "images/playlist.png"
328                           }
329                           selectedIndex: 21
330                           popupPainter {
331                             bgColor: "defaultBackground"
332                             borders {
333                               line_3d [ cornerArc="6", flatTop="true",padForArc=false ]
334                             }
335                           }
336                         }
337                       }
338                       {
339                         Slider {
340                           name: "time"
341                           borders {
342                             line [ cornerArc="6" ]
343                           }
344                           bgColor: "white,defaultBackground-10, defaultBackground+20"
345                           bounds {
346                             x: "2"
347                             y: "1"
348                             width: "80dlu"
349                             height: "30"
350                           }
351                           focusPainted: false
352                           minValue: 2
353                           maxValue: 7
354                           majorTickSpacing: 1
355                           showLabels: false
356                           leftLabel: " Short "
357                           rightLabel: " Long "
358                           thumbIcon: "images/slider_thumb.png"
359                           trackPainter {
360                             height: "10"
361                             bgColor: "defaultBackground-10, defaultBackground+20" [ direction="horizontal_left" ]
362                             borders {
363                               line_3d [ cornerArc="6" ]
364                             }
365                           }
366                         } [ onChange="filterTable()" ]
367                       }
368                       {
369                         Label {
370                           horizontalAlign: left
371                           fgColor: "foregroundColor"
372                           bounds {
373                             x: "2"
374                             y: "0"
375                             width: "-1"
376                           }
377                           value: "Time"
378                         }
379                       }
380                     }
381                   }
382                 }
383               }
384             }
385           }
386           {
387             Form {
388               borders{}
389               columnSpan: 4
390               bounds {
391                 x: "1"
392                 y: "3"
393               }
394               layout: forms
395               rows: "d,d:g,4dlu"
396               columns: "250dlu:g"
397               widgets {
398                 {
399                   Table {
400                     name: "songs"
401                     borders {
402                       line_3d [ color="defaultBackground-10,", cornerArc="6", noTop="true" ]
403                     }
404                     bgColor: "defaultBackground"
405                     bounds {
406                       x: "0"
407                       y: "1"
408                     }
409                     dataURL: "songs.txt"
410                     autoResizeMode: none
411                     gridLineColor: "foregroundColor@15"
412                     headerFgColor: "foregroundColor"
413                     headerCell {
414                       bgColor: "defaultBackground+15, defaultBackground" [ magnitude="66" ]
415                       borders {
416                         matte [ color="defaultBackground-5", insets="0, 0, 1, 1" ]
417                         empty [ insets="6, 6, 6, 6" ]
418                       }
419                     }
420                     autoSizeColumnsToFit: true
421                     visibleRowCount: 20
422                     scrollPane {
423                       urCorner {
424                         Label {
425                           borders {
426                             matte [ color="defaultBackground-5", insets="0, 0, 1" ]
427                             empty [ insets="6,0, 6, 0" ]
428                           }
429                           bgColor: "defaultBackground+15, defaultBackground" [ magnitude="66" ]
430                         }
431                       }
432                     }
433                     columns {
434                       {
435                         iconPosition: trailing
436                         horizontalAlign: right
437                         renderType: header_index
438                         width: "5ch!"
439                         gridCell {
440                           bgColor: "defaultBackground-5"
441                         }
442                         icon: "resource:Sage.icon.empty"
443                       }
444                       {
445                         title: "Name"
446                         icon: "resource:icon_checkbox_checked"
447                       }
448                       {
449                         title: "Time"
450                       }
451                       {
452                         title: "Artist"
453                       }
454                       {
455                         title: "Album By Artist"
456                       }
457                       {
458                         title: "Genre"
459                       }
460                       {
461                         title: "Track#"
462                       }
463                       {
464                         title: "Last Played"
465                       }
466                     }
467                   } [ onClick="toggleSongsCheckbox(window.nativeEvent)" ]
468                 }
469                 {
470                   Label {
471                     borders {
472                       line [ color="podHilite-20", cornerArc="10", flatBottom="true" ]
473                     }
474                     bgColor: "podHilite, podHilite-20"
475                     bounds {
476                       x: "0"
477                       y: "0"
478                       height: "12"
479                     }
480                   }
481                 }
482               }
483             }
484           }
485           {
486             GroupBox {
487               borders {
488                 line_3d [ cornerArc="10" ]
489               }
490               verticalAlign: full
491               bgColor: "defaultBackground+15, defaultBackground" [ magnitude="66" ]
492               bounds {
493                 x: "3"
494                 y: "1"
495               }
496               layout: forms
497               rows: "2dlu,f:[50px,d]:g,d"
498               columns: "14dlu,d:g,14dlu"
499               widgets {
500                 {
501                   GroupBox {
502                     horizontalAlign: center
503                     bounds {
504                       x: "1"
505                       y: "2"
506                     }
507                     layout: forms
508                     rows: "d"
509                     columns: "d,4dlu,d,4dlu,d"
510                     widgets {
511                       {
512                         PushButton {
513                           bounds {
514                             x: "0"
515                             y: "0"
516                           }
517                           focusable: false
518                           icon: "images/rewind.png"
519                           rolloverEnabled: false
520                           autoCreatePressedIcon: true
521                           buttonStyle: toolbar
522                         }
523                       }
524                       {
525                         PushButton {
526                           bounds {
527                             x: "2"
528                             y: "0"
529                           }
530                           focusable: false
531                           icon: "images/pause.png"
532                           rolloverEnabled: false
533                           autoCreatePressedIcon: true
534                           buttonStyle: toolbar
535                         } [ onAction="toggleAnimation(widget)" ]
536                       }
537                       {
538                         PushButton {
539                           bounds {
540                             x: "4"
541                             y: "0"
542                           }
543                           focusable: false
544                           icon: "images/fast_forward.png"
545                           rolloverEnabled: false
546                           autoCreatePressedIcon: true
547                           buttonStyle: toolbar
548                         }
549                       }
550                     }
551                   }
552                 }
553                 {
554                   Canvas {
555                     borders {
556                       line [ color="podHilite", cornerArc="8" ]
557                     }
558                     bgColor: "defaultBackground~darker, defaultBackground"
559                     bounds {
560                       x: "1"
561                       y: "1"
562                       width: "230"
563                     }
564                     contentPadding {
565                       top: "4"
566                       right: "4"
567                       bottom: "4"
568                       left: "4"
569                     }
570                   } [ onShown="setupEqualizer()" ]
571                 }
572               }
573             }
574           }
575         }
576       }
577     }
578   }
579 }
580 
581