LiveSupport Window description for HTML GUI application
Definition Master versus Content Panel
Individual screens in order of (possible appearance)
1.a. Starting the application: opening the Master Panel
Starting other panels from Master panel
2. Loging in: the login content panel
This screen appears
The window contains
The function of the items
Additional functions
3. Uploading files panel
The window opens when
The window contains
The function of items
Additional functions:
12. Add web stream panel
The window opens when
The window contains
The function of items
Additional functions:
13. Edit file information panel
The window opens when
The window contains
Default status
The function of items
Additional functions:
4. DJ Bag panel
The window contains
The function of items
Additional functions
6. Scheduler window
The window opens when
The window contains
The function of the items
Additional functions
Scheduler popup window to schedule playlist
5. Playlist management window (simple)
The window opens when
The window contains
The function of the items
Additional functions
7. Library / Search
When starting the application
Search form
Search - Advanced mode
How does it work :
Example:
Form field with the Search results
How does it work :
Play list
Browse
HTML1 User preferences
HTML2 Station preferences
HTML3 User management
HTML4 Log viewer
HTML5 Upload download status for central server
Options
HTML6 workflow… for 1.x version
General issues
General link of our design so far :
On-Air Off-air definition
Right mouse sensitive for files and playlists
Information formats (date, names, etc.)
Date format
Station information

LiveSupport Window description for HTML GUI application

(Version: 2005-01-12)

The following document describes the 

•	items (buttons,  information, visuals) and
•	functions (of these items)
•	the interface feedback (e.g. login error, what next?)

for each individual screen of LiveSupport. It does not describe their position. And it raises a number of questions – you will see as you go along.

This document is used by the

•	programmers to implement the functionality on the screen and the
•	designers to design the screen according to the functionality
Definition Master versus Content Panel
Master Panel means the shading of the page including the pulldown menu and the bottom of the page. Content Panel is the center of the page that changes according to functions of the system, chosen by the user.
Individual screens in order of (possible appearance)
1.a. Starting the application: opening the Master Panel
When starting the application it will open the Master Panel which contains the following items:
•	Time at broadcast station (big)  with Javascript ticking away the seconds
•	Time at client (? If remote) with JavaScript clock
•	LiveSupport logo
•	Station information (frequency, station name, station logo,...) (see end of document for details)
•	Playing next (metadata to be specified)
•	Playing now (metadata info to be specified)
•	Login OR Logout / Signover
•	User information (if logged in)
•	Menu for different functions Launching different functions / panels 
•	THE DJ BAG is part of the master panel because this list of items will alwazs be available!!!
Starting other panels from Master panel
•	Available depending on user rights
•	Clicking on a function in the menu will change the content of the Content Panel
•	If change is invoked, if information was altered and not saved, popup Javascript> Do you want to leave this page and lose changes?
2. Loging in: the login content panel
This screen appears
•	User clicked on log out
•	URL is called
•	User clicks on ‘sign over’
The window contains
•	Text: Login
•	Form field (text): login
•	Text: password
•	Form field (text / password): password
•	Text: language
•	Form field (pulldown): available languages
•	Form field (button): OK
•	Form field (button): Cancel
The function of the items
•	OK button: check valid login
o	Valid login
•	Close login window
•	Change Main panel to status logged in / on or off air (see above)
o	Invalid login
•	Change content of popup:
•	Text: Login invalid, please try again
•	Form field: Button OK
•	OK returns to login window
•	Cancel button
o	close popup window
o	return to main panel in previous state
Additional functions
•	When pressing ‘sign over’ or ‘logout’
o	Open popup information window with: “sure you want to logout user ‘username’”
o	Button OK (logs out)
o	Button Cancel (returns to main panel at previous status)
•	When pressing ‘sign over’
o	After confirming to log out user:
•	Open Login window in popup
•	Change status of main panel to logged out (on or off air)
3. Uploading files panel
The window opens when
•	The user selects this from the main panel
The window contains
•	File browser
•	Metadata form
•	Upload button
•	Cancel button
•	Close window button (possibly two: one top right X, the other underneath input form)
•	Information bar to be used for status / error / upload progress
The function of items
•	File browser: standard ‘open explorer style window to find file’ 
•	Metadata form: a mix of text, pulldown, multiple select, radio buttons and check boxes, depending on the metadata specs
•	Upload button: posts data and starts uploading file (to local storage system)
•	Cancel button: interrupts the upload and/or clears the fields in the form
o	If upload started: open popup to check if really interrupt upload
•	Close window:
o	open popup to check if really interrupt upload 
o	if yes:close window
Additional functions:
•	Error checking:
o	Errors when filling in the form will not launch a popup, but display in the status bar (probably at the bottom of the window)
o	One error at a time will be displayed (one line only)
•	Progress bar: when starting the upload, the status bar will be used as the progress bar similar to safari page loading.
•	Metadata language pulldown:
o	There will be the option to select in what language you add the metadata. 
o	This pulldown functions like a filter: if changed, it will display the metadata of this language set
o	If ‘upload’ is pressed, all language sets where there is at least one item filled in, will be saved in the metadata.
•	Uploading file
o	The form will be inactive, displaying the information but making it impossible to change.
•	After upload: success
o	After the successful upload, the form remains inactive
o	The buttons change to display possible options (e.g. upload another, add uploaded to playlist, create new playlist with uploaded, close window)
o	The file will be added to the DJ bag (working title)

12. Add web stream panel
The window opens when
•	The user selects this from the main panel
The window contains
•	Form field for stream URL
•	Metadata form
•	Add button
•	Cancel button
•	Close window button (possibly two: one top right X, the other underneath input form)
•	Information bar to be used for status / error 
The function of items
•	Form field for stream URL used to add full URL of webstream
•	Metadata form: a mix of text, pulldown, multiple select, radio buttons and check boxes, depending on the metadata specs
•	Add button: posts data 
•	Cancel button: clears form after confirmation popup “sure you want to...?”
•	Close window:
o	If information added, open popup to check if really interrupt upload 
o	if no information added, close without popup confirmation
Additional functions:
•	Metadata: adding length of file: the user will ener the length of the file here in 00:00:00 format. For live streams, leave set to zero
•	Error checking:
o	Errors when filling in the form will not launch a popup, but display in the status bar (probably at the bottom of the window)
•	One error at a time will be displayed (one line only)
•	Metadata language pulldown:
o	There will be the option to select in what language you add the metadata. 
o	This pulldown functions like a filter: if changed, it will display the metadata of this language set
o	If ‘upload’ is pressed, all language sets where there is at least one item filled in, will be saved in the metadata.
•	After successful adding
o	the form remains inactive
o	The buttons change to display possible options (e.g. add another stream, add stream to playlist, create new playlist with stream, close window)
o	The file will be added to the DJ bag (working title)

13. Edit file information panel
The window opens when
•	The user selects aq file (from DJ bag or search or otherwise?) and selects ‘edit file’ (right mouse click or button?)
The window contains
•	File browser
•	Metadata form
•	Save changes button
•	Delete file button
•	Cancel button
•	Close window button (possibly two: one top right X, the other underneath input form)
•	Information bar to be used for status / error / upload progress

Default status
Shows information about the file in the form
The function of items
•	File browser: standard ‘open explorer style window to find file’ 
o	Additional information: leave empty to keep file
o	To change file in storage, browse file on hard disk
•	Metadata form: a mix of text, pulldown, multiple select, radio buttons and check boxes, depending on the metadata specs
•	Save changes button: posts data and starts uploading file (no upload if no file selected)
o	Confirm popup before starting process: are you sure you want to change file and/or information? (Yes Cancel -> cancel returns to window with information as changed before, not uploaded)
•	Delete file -> popup confirmation: Are you sure you want to delete the file? (Yes Cancel -> cancel returns to window with information as edited before pressing delete)
•	Reset button: sets the value to default 
o	If upload started: open popup to check if really interrupt upload
o	If upload started but file not fully transferred, reset values to values before starting save changes
•	Close window:
o	open popup to check if really interrupt upload 
o	if yes:close window
Additional functions:
•	Error checking:
o	If delete file: check if used in playlists. If yes, what do we do? Not allo delete or remove from playlist after confirmation???
o	Errors when filling in the form will not launch a popup, but display in the status bar (probably at the bottom of the window)
o	One error at a time will be displayed (one line only)
•	Progress bar: when starting the upload, the status bar will be used as the progress bar similar to safari page loading.
•	Metadata language pulldown:
o	There will be the option to select in what language you add the metadata. 
o	This pulldown functions like a filter: if changed, it will display the metadata of this language set
o	If ‘upload’ is pressed, all language sets where there is at least one item filled in, will be saved in the metadata.
•	Uploading file
o	The form will be inactive, displaying the information but making it impossible to change.
•	After upload: success
o	After the successful upload, the form remains inactive
o	The buttons change to display possible options (e.g. upload another, add uploaded to playlist, create new playlist with uploaded, close window)
o	The file will be added to the DJ bag (working title)

14. View file information panel 1
The window opens when
•	The user selects a file (from DJ bag or search or otherwise?) and selects ‘view information’ (right mouse click or button?)
The window contains
•	Metadata display
•	Cancel button
•	Close window button (possibly two: one top right X, the other underneath input form)
•	Button to publish to network archive

4. DJ Bag panel
•	Part of the master panel set up> alwazs available!!!
•	Contains a list of files and/or playlists added by system or user
•	Single and multi select of items in list (HTML with checkboxes)
•	sensitive to multiple selection (different if only files or playlists from flises AND playlists)
The window contains
•	List of files and or playlists
•	Icons to separate between items and playlists
•	Minimal metadata info
•	Table headers on top with name of metadata category
•	Button: clear list
•	Button clear selected items from list
The function of items
•	List of files and or playlists
o	Icons for files and playlists have no function but to indicate
•	Table headers can be clicked and will order alphanumerlically, toggling ascending and descending
•	Clear list button removes all items from list: Confirmation pop up: are you sure...?
•	Clear selected items from list removes selected items. Confirmation pop up: are you sure...? 
Additional functions
•	New items are inserted at the top of the list
•	DJ Bag behaves different for individual users (length, display period -> version 1.x)
•	List length set in system defaults (V.1.x -> user can alter the preset)
•	Display period set in system defaults (V.1.x -> user can alter the preset)
•	If list is getting too long, bottom items are cleared from list
•	If items are over their display period, they are removed from the list
•	Content of DJ Bag is saved for each user (item id, rank in list, added to list date)
•	Content of DJ Bag is displayed after successfull login

6. Scheduler window
The window opens when
•	Button or pulldown in main panel is selected
•	Right mouse activated from playlist
The window contains
•	Small calendar month
•	Pulldown to select month
•	Previous next button to change month
•	Larger calendar week 
•	Previous next button to change week
•	Large day with times
•	Previous next button to change week
•	Scrollbars to go up and down inside the day
•	Plus and minus to zoom in and out of day view (change scale)
•	Scale bar between plus and minus
•	Button to go to ‘today’
•	Button Add playlist
•	Button remove playlist
•	Button edit selected playlist
•	Button to stop / start scheduler

The function of the items
•	Small calendar month
•	Each day can be clicked and will change the week and day display to contain the selected day
•	The month will be displayed in lines of weeks, starting with Sunday or Monday (system preset)
•	Left to each week in the month overview is the calendar week as a number, this can be clicked and will change the week display to display this calendar week
•	If something is scheduled for the calendar day, the number is bold
•	Days within week one or last week from previous or next month are of a greyer colour but can be clicked and are bold, if scheduled
•	Pulldown to select month will change the calendar view to this month
•	Previous next button to change month will change the month to display previous or next
•	Calendar week 
•	Displays each day of the week starting with Sunday or Monday (system preset later user preset)
•	The display starts from midnight to midnight
•	Playlists are displayed according to their start and stop time
•	Minimal metadata is displayed if there is room in the display
•	If the scheduled playlist is too small to display metadata it will be only a bar
•	Each bar (i.e. scheduled playlist) is mouse over sensitive and displays metadata information of the playlist and the start time, stop time and duration of the playlist. This display is attached to the mouse pointer and disappears when leaving the playlist bar
•	The day names on top of each week are clickable and change the day display to show that day
•	Playlists on the week have a check box in the displaz so thez can be selected. Multiple selects are possible
•	Previous next button to change week
•	Changes the week display to show that week, if the week runs into next or prev month, the month display changes too (only if the full week is in next or prev, not if half of it is still the same month)
•	Large day with times
•	Displays the date at the top
•	Displays the time of day on the left
•	Displays the playlists scheduled as fields
•	The playlist fields act as described for the week in terms of metadata display, mouse over sensitivity and right mouse click
•	Previous next button to change day
•	Changes to next and previous day in the day display
•	If the day is in the prev or next week, the week display changes
•	If the day is in the next or prev month, the month display changes
•	Scrollbars to go up and down inside the day 
•	start with midnight on the top and finish with midnight at the bottom
•	you can not scroll into previous and next days
•	Button to go to ‘today’ Sets month, week and day to today
•	Button Add playlist
•	Opens popup window to add playlist
•	Required fields: date, time and playlist name/id
•	Pulldown in the popup with the playlists which are in the DJ Bag
Pulldown menu with actions for selected plazlists in scheduler
This is similar to the user interface of webmail where zou have a pulldown menu with various possibilities of what you can do with the selected items [selected by checkbox]
The user guidance is:
Select one or more by ckicking the checkbox
Select the action in the pulldown menu
Press button to execute the action
•	Pulldown option: remove playlist
•	Only acitve if playlist selected (one mouse click on playlist in week or day overview)
•	Opens popup for confirmation: sure you want to...?
•	If confirmation is cancelled, return to scheduler window with playlist still selected
•	Pulldown optin: edit selected playlist
•	Only active if playlist is selected (one mouse click on playlist in week or day view)
•	If more than one plazlist is selected, this will trigger a javascript popup at client side to indicate that onlz one playlist can be edited.
•	Button to stop / start scheduler
•	Button toggles: default STOP, then START
•	If scheduler is stopped, main panel shows information: Scheduler is stopped in very alarming and vibrant letters
Additional functions
•	Display of length of playlist always with hours: minutes: seconds 00:00:00
•	If playlist larger than 100 hours(-1 second), display goes to day... 00:00:00:00
•	Gaps between playlists also show data: start, stop, length of gap
•	After last scheduled entry, metadata only displays start time
•	Gap display follows same rules as Playlist display of time (hh:mm:ss or dd:hh:mm:ss)
•	Gaps also have checkboxes to : insert plazlist here
•	Today is marked differently in month, day and week view
•	Currently playing playlist is locked and marked differently in week and day view
Scheduler popup window to schedule playlist
•	The popup window is invoked either by pressing the button ADD PLAZLIST or by chosing the action INSERT PLAYLIST HERE from the pulldown ofter selecting a gap in the calendar
•	Button OK -> assigns values and changes the display containing newly added playlist
•	Button Cancel
o	If nothing selected, close popup
o	If information typed in or selected, confirmation window Are you sure...?
•	Requires date time and playlist
•	If launched from scheduler, playlist can be entered in the following ways:
o	By ID of playlist
o	With additional button: Select Playlist...
•	Pulldown Select Playlist
o	A list from the playlists in the DJ bag
•	Error checking in popup window
o	No playlist selected
o	Overlap (length too big for gap, start time inside scheduled playlist)

5. Playlist management window (simple)
•	Resizable window
•	Contains scrollbars and resize handlers
•	Playlist item are listed vertially with first on top
•	All items have the same size in the list
The window opens when
•	Selected from the main panel
o	When opened from main panel, the playlist editor opens with a new playlist
•	Actived with right mouse click on playlist or file
The window contains
•	List of items in playlist
•	Metadata for items in list
•	Buttons to move items
•	Buttons to change transition between items
•	Button Add item to playlist
•	Button Remove item from playlist
•	Button Save playlist
•	Button Create new playlist
•	Button to Delete playlist
•	Icons for files and playlists in list
The function of the items
•	List of items in playlist displays the Metadata for items in list
•	Similar to the ist in the scheduler, the items on the plazlist have checkboxes next to them so there can be one or more items selected / and then deleted or whatever by selecting this function in the pulldown menu.
•	What is described as BUTTONS in the following is mostlz available in the pulldown of actions at the end. For actions which can also be done to individual or groups of items *like delete( there is an icon next to the item in the playlist which allows direct action *e.g. deleting item from plazlist(. These items invoke a javascript to confirm chosen action.
•	Buttons to move items
o	Inside the item info list, moving up down top and bottom
•	Buttons to change transition between items
o	Clicking here opens a popup window where the user can specify a number of seconds for alinear cross fade
•	Button Add item to playlist
o	This changes the mouse to become the ‘select item’ icon and items can be selected fromn search or DJ bag with single click
o	New items are added to the bottom of the list
•	Button Remove item from playlist
o	Active only if one or more items are selected
o	Popup confirmation “are you sure...?”
•	Button Save playlist
o	If editing existing playlist: 
•	confirm popup Overwrite changes...?
•	display current metadata available for editing
o	If saving new playlist, ask for name and metadata
•	Button Create new playlist
o	If no playlist in playlist editor, create empty playlist
o	If playlist in editor, but not changed, create new playlist
o	If playlist in editor and changed but not saved, popup confirm: “Discard changes to current playlist?”
•	Icons for files and playlists in list show if item is a playlist or a file
•	Icon for each item “set IN and OUT points” opens Cue window to set IN and OUT points
•	Button to delete playlist 
o	Only active if playlist in playlist editor window (not if new playlist was created and nothing added, not if playlist editor contains no playlist)
o	open confirmation popup “do you want to delete this playlist?”
o	Deleted playlists are removed from the DJ bag and search results
o	Delete process checks if playlist is used by other playlists or inside scheduler???
Additional functions
•	Version 1.x expand and close sub playlists
•	If attemtping to add playlist which is locked because played in scheduler, popup: Can not be edited, because this is currently playling

7. Search 
Current proposition of screen appearance: 
http://a.parsons.edu/~livesupport/designs/images/library_search.jpg

Function : basically for searching audio files, 
optionally , (?)  for search,  playlist arrangment of files , subplaylist , mails ..etc .... 

It can be called and started from the other programs or separately 

When starting the application
 it will open the panel which contains the following items:

•	Search part , with the option of choosing the way of searching the entered item 
•	Browse part, with the ability to browse files according to user-specified criteria (see iTunes for reference)
•	Player for preview of music tracks and fast rewind 
•	Field with the results of searching files 
•	Button or commands  for choosing, creating, rewinding playlist 
•	Field with playlist and all its informations 

Details (function) of the items  :
Search form
•	contains the form field  where we enter the wanted item (name, track..) and the confirmation button GO (enter)  
•	Button for starting the additional more precise advanced mode
Search - Advanced mode
Opens up the advanced possibilities for searching the entered item „SEARCH BY“ in the dropdown menu, searching by the name of the artist, song, album, Bpm , energy description , tempo,   and other relevant informations that contains metadata of the file. I hope we will use small selector .

Useful link for that info 
http://www.rcsworks.com/products/selector/radio101.asp
How does it work :
We enter the word or the phrase that we want to find in our library of audio files, into the matching field, then we choose whether it is going to search it by the whole name  or by the word or a phrase that is in the file name.

With the combination of the dropdown menus and by choosing the search options / name of the group / name of the song / energy / bpm / the publishing year of the album / description of the audio material’s content /  we can get the precisely wanted or  approximate results.
 
I personally like when I can see also the percent of sucessfullness next to the list of the results, in some search engines.
Can this be performed in this version  and how would that look like in our program? This  piece of information is not so important for the work , it simply gives us the report about the sucessfullness of our result.

 selection button ,   that contains full name   plus button GO    

-	selection button , where the item is searched for, on the local net, on server, on the internet....
Example:
Just example of screen design and precise tools for search   :
http://www.rcsworks.com/products/selector/tour/slide_02.asp
Form field with the Search results
This field gives us the list of the found audio files, also contains the informations from metadata. It is  desirable to have the option of variable displaying of the search results number (5,15,20) or the possibillity of scrolling. 
This is wide and easy to be surveyed. 

2 buttons with the functions of  where to go with the founded audio file
In list – when we double click on it (because of the more simple operations)
•	add to playlist        or
•	add to cue ( preview ) listening .  
How does it work :
By simple clicking on the audio file in the form field with the search results, file goes either in the playlist automatically on the last place, or right into the play mode where we start with listening. Rewinding back and forward  can be done by clicking on the cursor and by its moving on the line that represents the whole audio file.   
Play list 
Field that shows us the queue of the audio files in the created playlist 

Crucial question :
•	Is it right to set the option „creating the playlist“ as the part of the search library engine (that is not bad) or to  set it separately? 
•	Depending on the connection with the other programes, are they in thet moment on the same screen (playlist and search library), or are they separated?

Contains the functions: „import“ (open, bew), „export“ (save to...) and „send to“ (mail, hard disc, to relevant program...)
Browse
Users will be able to browse files according to criteria they set, according to metadata fields they pull down.

Four columns in the browse section will have pull-down menus above them. The pull-down menus will contain all available metadata fields, as well as ‘All’ and ‘None’ options. When a field is specified, the system lists not only files that are found with the criteria selected, but also the other columns display the categories containing such files.

An example from iTunes is enclosed below:

When a user sets certain criteria, the file browse (search results) window updates its view accordingly:

Users will be able to store their browsing field preferences with a “save this browse” function, which will write the fields into user preferences in Alib.

HTML1 User preferences
HTML form with to be defined fields
HTML2 Station preferences
HTML form with to be defined fileds
HTML3 User management
HTML form with to be defined fields
HTML4 Log viewer
List of items played by scheduler. Just displaying the metadata information.
HTML5 Upload download status for central server
List of files which are either sent to the central storage or retrieved from the storage
Options
•	Cancel upload & download
•	Pause upload or download

HTML6 workflow… for 1.x version
General issues 
General link of our design so far :
http://a.parsons.edu/~livesupport/designs/
7. Library/Search (Robert)
http://a.parsons.edu/~livesupport/designs/images/library_search.jpg
9. Live Mode (Robert)
http://a.parsons.edu/~livesupport/designs/images/livemode.gif
On-Air Off-air definition
The system is on-air when either the server or the client or both soundcards are playing
Right mouse sensitive for files and playlists

Information formats (date, names, etc.)
Date format
 (until system configure individually for all users individually): 2004-12-24 18:56:12
Station information
-	will be added at install procedure
-	station name is a text Unicode string
-	additional information can be added
-	a station logo can be uploaded as JPEG or PNG file