Explanation of code - Turksat46/FreaksPet GitHub Wiki
So how this wearable-appliation works, is that it is an web-application and the only code, that you will find is basically build as a website (HTML, CSS and Javascript). There is an xml-File that defines the header of the whole application and includes data such as ID, Application-name and version and such important data for your app, but we will have a closer look afterwards! As you might saw already, the face animations are all gifs, because I couldn't find another proper way to program the same face and I use Synfig Studio for the face-animations. Otherwise, it is a very simple-to-understand app and I think that everyone has the ability to understand it and even program an app for himself.
An advice: If you want to start to write code and program apps or games, believe me, start with the programming-language C, because every other programming-language is built of C and if you understand the basics of C, you will learn other languages such as C# and even Java easier! PS: HTML is not a programming-language!! It has no working logic behind it and it is the Javascript-files, that does all the work for it.
So lets start! I will show the codes in order! So index.html with the Javascript app.js are the first files, that the game starts.
But before we start, let me explain, how a basic HTML-file looks like. And remember, that this is built for the OS Tizen, so it has components for Tizen in it, that will not work for a normal website!
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,user-scalable=no">
<title>Basic</title>
<link rel="stylesheet" href="lib/tau/wearable/theme/default/tau.min.css">
<link rel="stylesheet" media="all and (-tizen-geometric-shape: circle)"
href="lib/tau/wearable/theme/default/tau.circle.min.css">
<!-- load theme file for your application -->
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="ui-page ui-page-active" id="main">
<header class="ui-header">
<h2 class="ui-title">TAU Basic</h2>
</header>
<div class="ui-content ui-content-padding">
<p>Hello! </p>
</div>
</div>
<script src="lib/tau/wearable/js/tau.min.js"></script>
<script src="js/app.js"></script>
<script src="js/lowBatteryCheck.js"></script>
<script src="js/circle-helper.js"></script>
</body>
</html>
So as you can see, this is only a basic HTML-file for Tizen and it has already a lot of things in it, but I will explain it step-by-step.
As you can see, the code starts with <!DOCTYPE html>, this is just for programs to understand, that it is a html-file and is standart in every html-file on every website on the world.
Then it continues with <html>, which is just a indicator, that we start with the html-code.
Now we start with the interesting part. As you can see, we are now starting with the <head>, and if you are familiar with HTML, you will know, that this is to use the header of the file, so basically what is on the top of the website. But here, it is used to specify the code, that the HTML-file will need to work properly. So basically, the header is used as a normal file-header to link other files to this HTML-file. So lets skip all of that, because it is not neccessary to explain and it is very complicated to understand. Trust me, when I say that ^-^.
By the way, <!-- load theme file for your application --> is a comment and not a command to load the theme files for your application >~<
Now we are at the <body>-part of the script and here is everything, that this file will show to the user. So let me explain <div class="ui-page ui-page-active" id="main"> a bit more, because it is more complicated, but I will make it as short and easy as possible.
So what it technically means is, that you can put pages in one HTML-file so that every page, that you want to show to the user like the main-game and the menu , can be written in one HTML-file. But I did it the traditional way and I did write a HTML-file as every page. So the main game is a HTML-file and the menu is a seperate HTML-file. So please don't be confused >~<.
So lets continue with <header class="ui-header">. So the funny part is, that this defines the header of the page and this is, what it will show on top of the page. It has a "class" in it, so Tizen can process it correctly and as you might see, it uses the class ui-header. So shocking!
The next line defines, what is in the header or will be on top of the page, so <h2 class="ui-title">TAU Basic</h2> means, that it will show "TAU Basic" to the user! And it uses the class ui-title, which speaks for itself XD. <h2> is a type of header and it goes from <h1> to <h6>. It just changes the font-size, which <h1> is the biggest and <h6> has the smallest font-size.
If you are curios, TAU stands for Tizen Advanced UI and is used to simplify the programming-work. IMPORTANT: If you want to reproduce the application, make sure you choose in Tizen Studio "Basic TAU" as Template!
And thats it with the header! We finish it up and tell the program, that the header-end is here and we just do it so with </header>.
By the way, you can think HTML as a race, so you have a <> which is the start of the race, the code between or in this case the racers and a </> for the finish!
Lets continue with the content of the file.
So obviously it starts with <div class="ui-content ui-content-padding">.
The <div> stands for division and is here to seperate the header with the content or "body" if you want to say it that way.
The classes ui-content ui-content-padding speak for themselves again ^^.
Then we simply write a paragraph or for better understanding a text as the content, which is done with <p>Hello! </p>. I think, that the <p> is self-explaining what it means but just in case, the p stands for paragraph.
And thats basically it for the UI. We close or finish all the divisions we made with </div>. But we are not done with the file yet!
We then just link the javascript-files to the HTML-file, so it has a working logic in the background. So with <script src="js/app.js"></script> we simply link a script-file. But as you might saw, we have more than one script-imports. Thats so the html works on Tizen. We only have to focus on one and that is, if you read the whole page until now, the <script src="js/app.js"></script>. And now we close or finish it up with </body> and </html> and it is done!
So to put it simply and easy, if you want to change or make your own UI, just change the content in the <body> </body> "race" ^-^.