View source for Configuration/navigating-the-web-interface

{{DISPLAYTITLE: Navigating The Web Interface}}{{TopicConfiguration|float:right;}}Configuring Snakeoil is done primary through the web browser (You will rarely need to login to the machine itself).

Any browsers supporting HTML5 and JavaScript will work. However we do highly recommend you use one of the following 3 modern browsers.

[[File:Opera.png|frameless|134x134px]][[File:Firefox.png|frameless|202x202px]][[File:Chrome.png|frameless|222x222px]]

All three browsers have been tested to work well Snakeoil OS WebApp. We recommend the Chrome browser as Google is the same company behind Angular.

Click on the following links for their download locations:

*[https://www.google.com/chrome/ Download chrome]
*[https://www.mozilla.org/en-US/firefox/new/ Download Firefox]
*[https://www.google.com/chrome/ Download Opera]

Other modern browsers should work but is untested. If you encounter browsers, stick to these big three and see if the problem goes away.

==Connecting To the Snakeoil Web App==
Loading the Snakeoil WebApp is like browsing a webpage - you enter a [[wikipedia:URL|URL]] that points to your Snakeoil PC. You can use one of the following forms:

*'''Zeroconf''': Use the "''Your Computer's Name"'' you entered during the installation stage ("Who Are You" stage where you are asked to create your Linux login account), and follow it with "''.local''". Example, if your computer name is snakeoil, the zeroconf name would be ''snakeoil.local.''
*'''Hostname''': Like above, just use the computer name, but without the .local string. This computer name may be picked up by some routers (the DHCP server component). e.g. if you call your machine "player", try entering this in the browser "<nowiki>http://player</nowiki>". If this works, you should see the web page above.
*'''IP Address:''' If you still have a computer monitor connected, the IP address is displayed at the login screen. If you see "IP Address: " without any succeeding numbers, hit CTRL-C again and see if the address pops up. If you don't have a monitor connected, the assigned IP address can be found in your router DHCP client list. As an example, enter the IP address in the browser as so, <nowiki>http://192.168.0.1</nowiki>

[[File:Console.png|center|frameless]]
Put in the URL into the address bar, and press the "ENTER" key. This is the first page you'll see if things goes according to plan - the Snakeoil OS Dashboard:
[[File:Tab dashboard.png|center|thumb|800x800px|The Snakeoil Dashboard]]

==Getting Around The WebApp==
In this section, we'll briefly go through the overall "look and feel" of how these pages are organised.

===Menu/Tabs===
Snakeoil Configuration are organised into "logical groups", accessible via the menu system located on the left hand side of the WebApp.
[[File:Snakeoil WebApp Menu system.png|center|thumb|442x442px|Snakeoil WebApp Menu system]]
On the left of you will always see what we call the"''Menu System''". Click on any menu item in that list and the contents on the right will change accordingly. 

This menu system will always be available regardless which page you're in.The selected tab will be highlighted in a different colour so you'll always know where you are. In the example above you are looking at the "''Dashboard''". Every item is logically and consistently organised, the title of the content is always on the top left, with a small clickable question mark popping up a quick tip giving you a synopsis describing the purpose of the page.

===Buttons===
Buttons are actionable tasks. For example, click the reset button to reset a configration; the save button to save your configuration.  
[[File:Buttons.jpg|center|thumb|600x600px|Button array]]

===Text Input===
A input box is for data entry. The following is an example asking you to provide a hostname for your Snakeoil OS. You can hover your mouse cursor over the box to display a tool-tip. This tip will give you a short explanation what the data is used for.
[[File:Text input.jpg|center|thumb|200x200px|Input box for data entry]]
Most data you provide into the Snakeoil WebApp will have it's input verified for correctness. On error the box will be visually hilighted in red, with an error message right below the input box. Here is an example where a required field is left blank:
[[File:Missing field.jpg|center|thumb|286x286px|Required fields cannot be blank]]

===Other Controls===
Two other items of interests are check boxes (square box with a check) and radio buttons (Circle with a centre dot).

A check box have two states:

*on (square box with a tick), or
*off (empty box).

This control acts like a power switch. The following is an example of how check boxes are used.
[[File:Snakeoil-services.png|center|thumb|806x806px|Example of check boxes]]
Radio buttons are usually grouped and you can only select one item from that group.
In the following example, the selected item is "Logitech Media Server + Squeezelite". If you are to select "Music Player Daemon" next, the "Music Player Daemon" item will now have a solid circle, and the originally selected "Logitech Media Server + Squeezelite" item will now be de-selected.
[[File:Player Basic Config.png|center|thumb|800x800px|Example of Radio Buttons]]

==Activated vs Normal==
There are some options that are only available to users with an activation code. The "Setup System Services" is an example of this. Please refer to [[Configuration/snakeoil-activation|Activation]] for more information. Now that you have the basics, let's get started and explore the the Snakeoil OS WebApp!{{ManualNavigation|[[Configuration]]||[[configuration/snakeoil-activation|Snakeoil Activation]]}}
[[Category:Configuration]]