Home Explore Help
Sign In
TC
/
arozos-mirror
mirror of https://github.com/tobychui/arozos
1
0
Fork 0
Files Issues 0 Wiki
Browse Source

Added quick start documentation

Toby Chui 5 years ago
parent
378f7a772e
commit
a910f4d340
21 changed files with 175 additions and 5 deletions
Unified View Show Diff Stats
  1. BIN
      docs/img/1/1.png
  2. BIN
      docs/img/1/10.png
  3. BIN
      docs/img/1/11.png
  4. BIN
      docs/img/1/12.png
  5. BIN
      docs/img/1/13.png
  6. BIN
      docs/img/1/14.png
  7. BIN
      docs/img/1/15.png
  8. BIN
      docs/img/1/2.png
  9. BIN
      docs/img/1/3.png
  10. BIN
      docs/img/1/4.png
  11. BIN
      docs/img/1/5.png
  12. BIN
      docs/img/1/6.png
  13. BIN
      docs/img/1/6.psd
  14. BIN
      docs/img/1/7.png
  15. BIN
      docs/img/1/7.psd
  16. BIN
      docs/img/1/8.png
  17. BIN
      docs/img/1/9.png
  18. BIN
      docs/img/quickstart.png
  19. BIN
      docs/img/quickstart.psd
  20. 88 1
      docs/lang/zh-HK/1.md
  21. 87 4
      docs/reader.html

BIN
docs/img/1/1.png
View File


BIN
docs/img/1/10.png
View File


BIN
docs/img/1/11.png
View File


BIN
docs/img/1/12.png
View File


BIN
docs/img/1/13.png
View File


BIN
docs/img/1/14.png
View File


BIN
docs/img/1/15.png
View File


BIN
docs/img/1/2.png
View File


BIN
docs/img/1/3.png
View File


BIN
docs/img/1/4.png
View File


BIN
docs/img/1/5.png
View File


BIN
docs/img/1/6.png
View File


BIN
docs/img/1/6.psd
View File


BIN
docs/img/1/7.png
View File


BIN
docs/img/1/7.psd
View File


BIN
docs/img/1/8.png
View File


BIN
docs/img/1/9.png
View File


BIN
docs/img/quickstart.png
View File


BIN
docs/img/quickstart.psd
View File


+ 88 - 1
docs/lang/zh-HK/1.md
View File 

@@ -1,2 +1,89 @@
 
 ["快速入門"]
 
 ["快速入門"]
 
-# Work In Progress
 
+<img class="ts fluid image" src="img/quickstart.png">
 
+# 快速入門
 
+此入門說明書是已假設你已經擁有使用電腦的基本知識。此教學是基於 Windows 作業系統設計。
 
+你需要以下硬件以架設一個 ArOZ 系統雲端
 
+- Raspberry Pi (建議 3B+ 或 4B)
 
+- WiFi USB 手指 或 能連接區域網絡的網絡線及接頭
 
+- 16GB 或以上的 Micro SD 卡 
+- 電源供應 （Raspberry Pi 用）
 
+- 客戶端裝置（手機、平板或電腦，需要有 WiFi 連接功能 / 跟 Raspberry Pi 位於同一區域網內）
 
+
 
+
 
+## 寫入映像檔到 SD 卡
 
+
 
+首先，你需要下載 Win32 Disk Imager 及 ArOZ 在線系統 Raspberry Pi 用映像檔。下載後請按屏幕上的步驟進行安裝。
 
+[Win32 Disk Imager 傳送門](https://sourceforge.net/projects/win32diskimager/)
 
+[ArOZ Online System 映像檔傳送門](https://hkwtc.org/aroz_online/dist/)
 
+
 
+安裝完成後桌面應該會多出這樣一個圖示。雙擊圖示以打開 Win32 Disk Imager。
 
+![](img/1/1.png)
 
+
 
+打開後，選擇「打開映像檔」
 
+![](img/1/2.png)
 
+
 
+點選你剛下載的映像檔。以下使用 aCloud 1.0 版本的映像檔作示範。
 
+![](img/1/3.png)
 
+
 
+把你的 Micro SD 卡插入電腦。如果你的電腦上連接著多於一個外置儲存裝置，在右方可以選擇映像檔安裝的裝置。此處為 F:\ 路徑。
 
+![](img/1/4.png)
 
+
 
+最後點選「寫入資料到裝置」選項並等待寫入工作完成即可。
 
+![](img/1/5.png)
 
+
 
+## 準備硬件
 
+
 
+作為首次啟動 ArOZ 在線系統，你可以選擇以 WiFi 或 Ethernet 作為登錄媒介。
 
+
 
+首先，把完成寫入映像檔的 Micro SD 卡插入到 Raspberry Pi 的 SD 卡插槽內。
 
+<img class="ts fluid image" src="img/1/6.png">
 
+
 
+然後連接 USB WiFi 模組至 Raspberry Pi 上的 USB 插槽。你亦可以使用 Ethernet 連接，並把網絡線插到 Raspberry Pi 上面的網絡接口上。
 
+<img class="ts fluid image" src="img/1/7.png">
 
+
 
+### 使用 WiFi AP 連接
 
+如果你是使用 WiFi AP 設定，請打開電腦或手機之 WiFi 掃描器，並連接至以下 SSID
 
+
 
+SSID: 
+<code> ArOZ Portable </code>
 
+密碼：
 
+<code>arozportablesystem</code>
 
+
 
+打開瀏覽器並進入 <code>http://192.168.4.1</code>。你即可看到 ArOZ 系統啟動器的界面。
 
+
 
+### 使用區域網連接
 
+
 
+如果你並不是使用直連方式而是使用區網方式連接，你需要找到在區域網絡上的 Raspberry Pi 之 IP 地址，你可以使用以下方法：
 
+- 打開路由器後台界面，在 DHCP > Client 下面找到 raspberrypi 裝置的 IP 地址
 
+- 使用 IP 掃描器 如 Angry IP Scanner 
+- 使用 imuslab 的[網頁掃描器](http://lanips.imuslab.com/)
 
+- 其他第三方網頁掃描器如 [ alanyeung.co Finder](http://alanyeung.co/AOBRedirect/scan.html)
 
+以下教學將會使用 imuslab 的網頁掃描器。
 
+
 
+使用 Firefox 或 Chrome 打開掃描器的網頁，並確保網址開頭的部分是 <code> http:// </code> 而非 <code> https:// </code>， 
+你應該會看到類似以下掃描結果
 
+
 
+![image](img/1/8.png)
 
+
 
+如果掃描器並沒有回傳任何結果（如下圖），你可以試試重新啟動 Raspberry Pi 然後等待綠色閃燈停止閃動再試一次。
 
+![image](img/1/9.png)
 
+
 
+## 創建起始用戶帳號
 
+
 
+點選 New User
 
+![image](img/1/10.png)
 
+
 
+輸入新帳戶名稱及密碼
 
+![image](img/1/11.png)
 
+
 
+點選添加用戶
 
+![image](img/1/12.png)
 
+
 
+使用剛剛創建的帳戶登入
 
+![image](img/1/13.png)
 
+
 
+完成後你可以選擇回到主頁或再創建多幾個帳戶。之後你亦可以在系統設定 > 使用者 > 添加及移除用戶裡面找到此設定界面。
 
+![image](img/1/14.png)
 
+
 
+如果你看到下圖的主頁界面，即代表你的設定已經成功完成。
 
+![image](img/1/15.png)

+ 87 - 4
docs/reader.html
View File 

@@ -5,8 +5,9 @@
 
 <!-- Tocas UI：CSS 與元件 -->
 
 <!-- Tocas UI：CSS 與元件 -->
 
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tocas-ui/2.3.3/tocas.css">
 
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tocas-ui/2.3.3/tocas.css">
 
 <!-- Tocas JS：模塊與 JavaScript 函式 -->
 
 <!-- Tocas JS：模塊與 JavaScript 函式 -->
 
-<script src="https://cdnjs.cloudflare.com/ajax/libs/tocas-ui/2.3.3/tocas.js"></script>
 
 <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
 
 <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
 
+<script src="https://cdnjs.cloudflare.com/ajax/libs/tocas-ui/2.3.3/tocas.js"></script>
 
+
 
 <script src="showdown.min.js"></script>
 
 <script src="showdown.min.js"></script>
 
 <style>
 
 <style>
 
 .specialpadding{
 
 .specialpadding{
 
@@ -18,16 +19,43 @@
 
 	right:10px;
 
 	right:10px;
 
 	width:55px;
 
 	width:55px;
 
 }
 
 }
 
+img{
 
+	max-width:100%;
 
+}
 
+.selectable{
 
+	cursor:pointer;
 
+	padding:5px;
 
+	padding-left:10px !important;
 
+	margin:0px !important;
 
+}
 
+.selectable:hover{
 
+	background-color:#f2f2f2;
 
+}
 
 </style>
 
 </style>
 
 </head>
 
 </head>
 
 <body>
 
 <body>
 
+<div class="ts demo left sidebar" style="width:400px !important;">
 
+    <div class="ts header">
 
+        ArOZ Online System Documentation
 
+        <a class="sub header" href="index.html"><i class="reply icon"></i>Exit Reader</a>
 
+    </div>
 
+    <div class="ts top attached tabbed menu">
 
+    <a id="doclist" class="active item" onClick="toggleMode('doclist');"><i class="bookmark icon"></i></a>
 
+	<a id="starlist" class="item" onClick="toggleMode('stars');"><i class="star icon"></i></a>
 
+	</div>
 
+	<div id="pageContent" class="ts active bottom attached tab segment">
 
+		
+	</div>
 
+</div>
 
+<div class="pusher">
 
 <br><br>
 
 <br><br>
 
 <div class="ts container">
 
 <div class="ts container">
 
 <div class="ts segment">
 
 <div class="ts segment">
 
 <div class="ts icon buttons" style="width:100% !important;">
 
 <div class="ts icon buttons" style="width:100% !important;">
 
     <button id="backbtn" class="ts button" onClick="lastPage();"><i class="arrow left icon"></i></button>
 
     <button id="backbtn" class="ts button" onClick="lastPage();"><i class="arrow left icon"></i></button>
 
+	<button id="nextbtn" class="ts button" onClick="reloadAllDocs();"><i class="refresh icon"></i></button>
 
     <button id="nextbtn" class="ts button" onClick="nextPage();"><i class="arrow right icon"></i></button>
 
     <button id="nextbtn" class="ts button" onClick="nextPage();"><i class="arrow right icon"></i></button>
 
-	<button id="nextbtn" class="ts button" onClick="showList();"><i class="content icon"></i></button>
 
+	<button id="nextbtn" class="ts button" onClick="toggleList();"><i class="content icon"></i></button>
 
 	<div class="ts specialpadding header"><i class="bookmark icon"></i><span id="readerTitle">Welcome to ArOZ Online Documentation Reader</span></div>
 
 	<div class="ts specialpadding header"><i class="bookmark icon"></i><span id="readerTitle">Welcome to ArOZ Online Documentation Reader</span></div>
 
 </div>
 
 </div>
 
 <button class="ts rightPadded button" onClick="starThispage();"><i class="empty star icon"></i></button>
 
 <button class="ts rightPadded button" onClick="starThispage();"><i class="empty star icon"></i></button>
 
@@ -37,16 +65,62 @@
 
 <div class="ts segment">
 
 <div class="ts segment">
 
 ArOZ Documentation Reader v1.0
 
 ArOZ Documentation Reader v1.0
 
 </div>
 
 </div>
 
-</div>
 
 <br><br><br><br>
 
 <br><br><br><br>
 
+</div>
 
+</div>
 
 <script>
 
 <script>
 
 var currentRenderPage = 0;
 
 var currentRenderPage = 0;
 
 var searchingPage = 0; 
 var searchingPage = 0; 
 var lang = window.location.hash.replace("#",""); //get lang id
 
 var lang = window.location.hash.replace("#",""); //get lang id
 
 var docs = []; //All documents will be loaded into memory as the reader loads, but not rendered yet
 
 var docs = []; //All documents will be loaded into memory as the reader loads, but not rendered yet
 
+var docsTitles = [];
 
 var baseFolder = "lang/" + lang + "/";
 
 var baseFolder = "lang/" + lang + "/";
 
+var sidebarMode = "index"; //Either index or stars
 
 initLoad();
 
 initLoad();
 
 
 
+function toggleMode(mode){
 
+	if (mode == "stars"){
 
+		$("#doclist").removeClass("active");
 
+		$("#starlist").addClass("active");
 
+		renderStarList();
 
+	}else{
 
+		$("#starlist").removeClass("active");
 
+		$("#doclist").addClass("active");
 
+		renderDocsList();
 
+	}
 
+}
 
+
 
+function renderStarList(){
 
+	$("#pageContent").html("");
 
+}
 
+
 
+function toggleList(){
 
+	ts('.left.sidebar:not(.inverted)').sidebar({
 
+		dimPage: true,
 
+		scrollLock: true
 
+	}).sidebar('toggle');
 
+}
 
+
 
+function redirectDoc(indexID){
 
+	currentRenderPage = indexID;
 
+	readDoc();
 
+	toggleList();
 
+}
 
+
 
+function renderDocsList(){
 
+	$("#pageContent").html("");
 
+	for (var i =0; i < docsTitles.length; i++){
 
+		$("#pageContent").append('<p class="selectable" onClick="redirectDoc(' + i + ');"><i class="book icon"></i> ' + docsTitles[i] + '</p>');
 
+	}
 
+}
 
+
 
+function reloadAllDocs(){
 
+	docs = [];
 
+	searchingPage = 0;
 
+	initLoad();
 
+	docsTitles=[];
 
+}
 
+
 
 function loadAllDocs(){
 
 function loadAllDocs(){
 
 	$.ajax({
 
 	$.ajax({
 
 		type: 'get',
 
 		type: 'get',
 
@@ -63,6 +137,8 @@ function loadAllDocs(){
 
 			//End of documentation
 
 			//End of documentation
 
 			//console.log(docs);
 
 			//console.log(docs);
 
 			readDoc(); //Start rendering
 
 			readDoc(); //Start rendering
 
+			parseDocList(); //Update the doc list
 
+			renderDocsList(); //Render the documentation list
 
 		}
 
 		}
 
 	});
 
 	});
 
 }
 
 }
 
@@ -97,7 +173,14 @@ function readDoc(){
 
 	for (var i =0; i < pageInfo.length; i++){
 
 	for (var i =0; i < pageInfo.length; i++){
 
 		$("#docLoader").append(md2html(pageInfo[i]));
 
 		$("#docLoader").append(md2html(pageInfo[i]));
 
 	}
 
 	}
 
-	
+}
 
+
 
+function parseDocList(){
 
+	for (var i =0; i < docs.length; i++){
 
+		let pageInfo = Array.from(docs[i]);
 
+		var metaTag = JSON.parse(pageInfo.shift());
 
+		docsTitles.push(metaTag[0]);
 
+	}
 
 }
 
 }
 
 
 
 function md2html(input){
 
 function md2html(input){