浏览代码

Reformatting images

Bob Mottram 7 年前
父节点
当前提交
8c7d42d7c8
共有 2 个文件被更改,包括 137 次插入272 次删除
  1. 23
    43
      doc/EN/mesh_usage.org
  2. 114
    229
      website/EN/mesh_usage.html

+ 23
- 43
doc/EN/mesh_usage.org 查看文件

@@ -28,9 +28,9 @@
28 28
 
29 29
 When you first boot from the USB drive the system will create some encryption keys, assign a unique network address to the system and then reboot itself. When that's done you should see a prompt asking for a username. This username just makes it easy for others to initially find you on the mesh and will appear in the list of users.
30 30
 
31
-#+BEGIN_CENTER
31
+#+attr_html: :width 100% :align center
32 32
 [[file:images/mesh_initial_login.jpg]]
33
-#+END_CENTER
33
+
34 34
 
35 35
 After a minute or two if you are within wifi range and there is at least one other user on the network then you should see additional icons appear on the desktop, such as /Other Users/ and /Chat/.
36 36
 
@@ -47,17 +47,14 @@ Unlike with ordinary wifi, on the mesh you don't get a signal strength icon and
47 47
 
48 48
 Select the wifi icon on the desktop and enter the password '/freedombone/'. The network configuration will go into a monitoring mode and in the bottom right side of the window you will be able to see signal strength and other parameters. This can help you to locate systems or adjust antennas to get the best wifi performance.
49 49
 
50
-
51
-#+BEGIN_CENTER
50
+#+attr_html: :width 70% :align center
52 51
 [[file:images/mesh_signal.jpg]]
53
-#+END_CENTER
54 52
 
55 53
 When you are finished close the window and then select the /Network Restart/ desktop icon, which will restart the B.A.T.M.A.N. network. You can also use the restart icon if you are within range of the mesh network but the /Chat/ and /Other Users/ icons do not automatically appear after a few minutes.
56 54
 * Connecting to the internet
57 55
 
58
-#+BEGIN_CENTER
56
+#+attr_html: :width 100% :align center
59 57
 [[file:images/mesh_architecture2.jpg]]
60
-#+END_CENTER
61 58
 
62 59
 If you need to be able to access the internet from the mesh then connect one of the peers to an internet router using an ethernet cable (shown as yellow above), then reboot it. Other peers in the mesh, including any attached mobile devices, will then be able to access the internet using the ethernet attached peer as a gateway. [[https://en.wikipedia.org/wiki/Freifunk][Freifunk]] works in a similar way.
63 60
 
@@ -72,17 +69,15 @@ sudo openvpn myclient.ovpn
72 69
 Where /myclient.ovpn/ comes from your VPN provider and with the password "/freedombone/".
73 70
 * Connecting two meshes over the internet via a VPN tunnel
74 71
 
75
-#+BEGIN_CENTER
72
+#+attr_html: :width 100% :align center
76 73
 [[file:images/mesh_architecture_vpn.jpg]]
77
-#+END_CENTER
78 74
 
79 75
 Maybe the internet exists, but you don't care about getting any content from it and just want to use it as a way to connect mesh networks from different geographical locations together.
80 76
 
81 77
 In your home directory on a system connected via ethernet to an internet router you'll find a file called *vpn.tar.gz*. If you want another mesh to be able to connect to yours then send them this file and get them to uncompress it into their home directory also on an internet gateway machine. If they have an external IP address or domain name for your router then they will be able to VPN connect using the *Connect Meshes* icon. They should also forward port 653 from their internet router to the mesh gateway machine.
82 78
 
83
-#+BEGIN_CENTER
79
+#+attr_html: :width 50% :align center
84 80
 [[file:images/mesh_connect.png]]
85
-#+END_CENTER
86 81
 
87 82
 You should create a new *vpn.tar.gz* file for every other mesh which wants to be able to connect to yours. If you are prompted for a password it is 'freedombone'.
88 83
 
@@ -90,52 +85,45 @@ From a deep packet inspection point of view the traffic going over the internet
90 85
 
91 86
 * Mobile devices (phones, etc)
92 87
 
93
-#+BEGIN_CENTER
88
+#+attr_html: :width 100% :align center
94 89
 [[file:images/mesh_architecture3.jpg]]
95
-#+END_CENTER
96 90
 
97 91
 To allow mobile devices to connect to the mesh you will need a second wifi adapter connected to your laptop/netbook/SBC. Plug in a second wifi adapter then reboot the system. The second adaptor will then create a wifi hotspot (the connection shown in green above) which mobile devices can connect to. The hotspot name also contains its local IP address (eg. "/mesh-192.168.1.83/").
98 92
 
99 93
 On a typical Android device go to *Settings* then *Security* and ensure that *Unknown sources* is enabled. Also within *Wifi* from the *Settings* screen select the mesh hotspot. The password is "/freedombone/". Open a non-Tor browser and navigate to the IP address showing in the hotspot name. You can then download and install mesh apps.
100 94
 
101
-#+BEGIN_CENTER
95
+#+attr_html: :width 30% :align center
102 96
 [[file:images/mesh_mobileapps.jpg]]
103
-#+END_CENTER
104 97
 
105 98
 On some android devices you may need to move the downloaded APK file from the *Downloads* directory to your *home* directory before you can install it.
106 99
 * Chat System
107 100
 
108 101
 Ensure that you're within wifi range of at least one other mesh peer (could be a router or client) and then you should see that the /Chat/ and /Other Users/ icons appear. Select the users icon and you should see a list of users on the mesh.
109 102
 
110
-#+BEGIN_CENTER
103
+#+attr_html: :width 30% :align center
111 104
 [[file:images/mesh_peerslist.png]]
112
-#+END_CENTER
113 105
 
114 106
 Selecting a user followed by the Ok button will copy their Tox ID to the clipboard.
115 107
 
116 108
 Now select the /Chat/ icon and once you are connected you should see the status light turn green. If after a few minutes you don't get the green status light then try closing and re-opening the Tox chat application. Select the plus button to add a friend and then paste in a Tox ID.
117 109
 
118
-#+BEGIN_CENTER
110
+#+attr_html: :width 80% :align center
119 111
 [[file:images/mesh_paste_tox_id.jpg]]
120
-#+END_CENTER
121 112
 
122 113
 The other user can then accept or decline your friend request.
123 114
 
124
-#+BEGIN_CENTER
115
+#+attr_html: :width 80% :align center
125 116
 [[file:images/mesh_friend_request.jpg]]
126
-#+END_CENTER
127 117
 
128 118
 You can also select an avatar by selecting the grey head and shoulders image.
129 119
 
130
-#+BEGIN_CENTER
120
+#+attr_html: :width 100% :align center
131 121
 [[file:images/mesh_choose_avatar.jpg]]
132
-#+END_CENTER
133 122
 
134 123
 And by selecting the user from the list on the left hand side the chat can begin.
135 124
 
136
-#+BEGIN_CENTER
125
+#+attr_html: :width 100% :align center
137 126
 [[file:images/mesh_text_chat.jpg]]
138
-#+END_CENTER
139 127
 
140 128
 One important point is that by default the microphone is turned off. When doing voice chat you can select the microphone volume with the drop down slider in the top right corner of the screen.
141 129
 
@@ -144,15 +132,13 @@ At present video doesn't work reliably, but text and voice chat do work well.
144 132
 * Collaborative document editing
145 133
 The mesh system includes the ability to collaboratively edit various sorts of documents using CryptPad. CryptPad is an almost peer-to-peer system in that it is designed for a client/server environment but that the server aspect of it is very minimal and limited to orchestrating the connected clients. With CryptPad installed on each mesh peer it effectively enables peer-to-peer collaborative editing. Documents are ephemeral and forgotten unless they're exported or copy-pasted to permanent storage.
146 134
 
147
-#+BEGIN_CENTER
135
+#+attr_html: :width 100% :align center
148 136
 [[file:images/mesh_cryptpad1.jpg]]
149
-#+END_CENTER
150 137
 
151 138
 To create a document click on the CryptPad icon. Depending upon the specifications of your system it may take a few seconds to load, so don't be too disturned if the browser contents look blank for a while. Select _Rich Text Pad_ and give yourself a username.
152 139
 
153
-#+BEGIN_CENTER
140
+#+attr_html: :width 100% :align center
154 141
 [[file:images/mesh_cryptpad2.jpg]]
155
-#+END_CENTER
156 142
 
157 143
 If you have the chat system running you can then copy and paste the URL for your pad into the chat, and the other user can then open the link and edit the document with you. You can repeat that for however many other users you wish to be able to edit.
158 144
 
@@ -162,44 +148,38 @@ Patchwork is available as a social networking system for the mesh. Like all soci
162 148
 
163 149
 Double click on the "Social" icon to open the app, then add your nickname and optionally a description. If you want to choose an avatar image some can be found within the directory */usr/share/freedombone/avatars*. On older systems or systems without a hardware random number generator, Patchwork sometimes takes a long time (a few minutes) to open for the first time after clicking the icon. This is most likely due to the initial generation of encryption keys, so be patient.
164 150
 
165
-#+BEGIN_CENTER
151
+#+attr_html: :width 80% :align center
166 152
 [[file:images/patchwork_setup.jpg]]
167
-#+END_CENTER
168 153
 
169 154
 Other Patchwork users on the mesh will appear automatically under the *local* list and you can select and follow them if you wish. It's also possible to select the dark theme from *settings* on the drop down menu if you prefer.
170 155
 
171
-#+BEGIN_CENTER
156
+#+attr_html: :width 50% :align center
172 157
 [[file:images/patchwork_public.jpg]]
173
-#+END_CENTER
174 158
 
175 159
 The Secure Scuttlebutt protocol which Patchwork is based upon is intended to be robust to intermittent network connectivity, so you can write posts when out of range and they will sync once you are back in the network.
176 160
 
177 161
 * Sharing Files
178 162
 You can make files publicly available on the network simply by dragging and dropping them into the /Public/ folder on the desktop. To view the files belonging to another user select the desktop icon called /Visit a site/ and enter the username or Tox ID of the other user.
179 163
 
180
-#+BEGIN_CENTER
164
+#+attr_html: :width 50% :align center
181 165
 [[file:images/mesh_share_files.jpg]]
182
-#+END_CENTER
183 166
 
184 167
 * Blogging
185 168
 To create a blog post select the /Blog/ icon on the desktop and then select *New blog entry* and *Ok*. Edit the title of the entry and add your text. You can also include photos if you wish - just copy them to the *CreateBlog/content/images* directory and then link to them as shown.
186 169
 
187
-#+BEGIN_CENTER
170
+#+attr_html: :width 30% :align center
188 171
 [[file:images/mesh_blog.png]]
189
-#+END_CENTER
190 172
 
191 173
 To finish your blog entry just select /Save/ and then close the editor. On older hardware it may take a while to publish the results, and this depends upon the amount of computation needed by IPFS to create file hashes. If you make no changes to the default text then the new blog entry will not be saved.
192 174
 
193
-#+BEGIN_CENTER
175
+#+attr_html: :width 50% :align center
194 176
 [[file:images/mesh_new_blog2.jpg]]
195
-#+END_CENTER
196 177
 
197
-#+BEGIN_CENTER
178
+
179
+#+attr_html: :width 50% :align center
198 180
 [[file:images/mesh_view_blog.jpg]]
199
-#+END_CENTER
200 181
 
201 182
 You can also visit other blogs, edit or delete your previous entry and change your blog theme.
202 183
 
203
-#+BEGIN_CENTER
184
+#+attr_html: :width 30% :align center
204 185
 [[file:images/mesh_select_blog_theme.png]]
205
-#+END_CENTER

+ 114
- 229
website/EN/mesh_usage.html 查看文件

@@ -3,33 +3,26 @@
3 3
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
4 4
 <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
5 5
 <head>
6
-<!-- 2017-12-09 Sat 17:57 -->
7
-<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
8
-<meta name="viewport" content="width=device-width, initial-scale=1" />
9
-<title>&lrm;</title>
10
-<meta name="generator" content="Org mode" />
11
-<meta name="author" content="Bob Mottram" />
12
-<meta name="description" content="Turn the Beaglebone Black into a personal communications server"
6
+<title></title>
7
+<!-- 2018-04-12 Thu 11:17 -->
8
+<meta  http-equiv="Content-Type" content="text/html;charset=utf-8" />
9
+<meta  name="generator" content="Org-mode" />
10
+<meta  name="author" content="Bob Mottram" />
11
+<meta  name="description" content="Turn the Beaglebone Black into a personal communications server"
13 12
  />
14
-<meta name="keywords" content="freedombox, debian, beaglebone, red matrix, email, web server, home server, internet, censorship, surveillance, social network, irc, jabber" />
13
+<meta  name="keywords" content="freedombox, debian, beaglebone, red matrix, email, web server, home server, internet, censorship, surveillance, social network, irc, jabber" />
15 14
 <style type="text/css">
16 15
  <!--/*--><![CDATA[/*><!--*/
17
-  .title  { text-align: center;
18
-             margin-bottom: .2em; }
19
-  .subtitle { text-align: center;
20
-              font-size: medium;
21
-              font-weight: bold;
22
-              margin-top:0; }
16
+  .title  { text-align: center; }
23 17
   .todo   { font-family: monospace; color: red; }
24
-  .done   { font-family: monospace; color: green; }
25
-  .priority { font-family: monospace; color: orange; }
18
+  .done   { color: green; }
26 19
   .tag    { background-color: #eee; font-family: monospace;
27 20
             padding: 2px; font-size: 80%; font-weight: normal; }
28 21
   .timestamp { color: #bebebe; }
29 22
   .timestamp-kwd { color: #5f9ea0; }
30
-  .org-right  { margin-left: auto; margin-right: 0px;  text-align: right; }
31
-  .org-left   { margin-left: 0px;  margin-right: auto; text-align: left; }
32
-  .org-center { margin-left: auto; margin-right: auto; text-align: center; }
23
+  .right  { margin-left: auto; margin-right: 0px;  text-align: right; }
24
+  .left   { margin-left: 0px;  margin-right: auto; text-align: left; }
25
+  .center { margin-left: auto; margin-right: auto; text-align: center; }
33 26
   .underline { text-decoration: underline; }
34 27
   #postamble p, #preamble p { font-size: 90%; margin: .2em; }
35 28
   p.verse { margin-left: 3%; }
@@ -56,111 +49,27 @@
56 49
     border: 1px solid black;
57 50
   }
58 51
   pre.src:hover:before { display: inline;}
59
-  /* Languages per Org manual */
60
-  pre.src-asymptote:before { content: 'Asymptote'; }
61
-  pre.src-awk:before { content: 'Awk'; }
62
-  pre.src-C:before { content: 'C'; }
63
-  /* pre.src-C++ doesn't work in CSS */
64
-  pre.src-clojure:before { content: 'Clojure'; }
65
-  pre.src-css:before { content: 'CSS'; }
66
-  pre.src-D:before { content: 'D'; }
67
-  pre.src-ditaa:before { content: 'ditaa'; }
68
-  pre.src-dot:before { content: 'Graphviz'; }
69
-  pre.src-calc:before { content: 'Emacs Calc'; }
52
+  pre.src-sh:before    { content: 'sh'; }
53
+  pre.src-bash:before  { content: 'sh'; }
70 54
   pre.src-emacs-lisp:before { content: 'Emacs Lisp'; }
71
-  pre.src-fortran:before { content: 'Fortran'; }
72
-  pre.src-gnuplot:before { content: 'gnuplot'; }
73
-  pre.src-haskell:before { content: 'Haskell'; }
74
-  pre.src-hledger:before { content: 'hledger'; }
75
-  pre.src-java:before { content: 'Java'; }
76
-  pre.src-js:before { content: 'Javascript'; }
77
-  pre.src-latex:before { content: 'LaTeX'; }
78
-  pre.src-ledger:before { content: 'Ledger'; }
79
-  pre.src-lisp:before { content: 'Lisp'; }
80
-  pre.src-lilypond:before { content: 'Lilypond'; }
81
-  pre.src-lua:before { content: 'Lua'; }
82
-  pre.src-matlab:before { content: 'MATLAB'; }
83
-  pre.src-mscgen:before { content: 'Mscgen'; }
84
-  pre.src-ocaml:before { content: 'Objective Caml'; }
85
-  pre.src-octave:before { content: 'Octave'; }
86
-  pre.src-org:before { content: 'Org mode'; }
87
-  pre.src-oz:before { content: 'OZ'; }
88
-  pre.src-plantuml:before { content: 'Plantuml'; }
89
-  pre.src-processing:before { content: 'Processing.js'; }
90
-  pre.src-python:before { content: 'Python'; }
91
-  pre.src-R:before { content: 'R'; }
92
-  pre.src-ruby:before { content: 'Ruby'; }
93
-  pre.src-sass:before { content: 'Sass'; }
94
-  pre.src-scheme:before { content: 'Scheme'; }
95
-  pre.src-screen:before { content: 'Gnu Screen'; }
96
-  pre.src-sed:before { content: 'Sed'; }
97
-  pre.src-sh:before { content: 'shell'; }
98
-  pre.src-sql:before { content: 'SQL'; }
99
-  pre.src-sqlite:before { content: 'SQLite'; }
100
-  /* additional languages in org.el's org-babel-load-languages alist */
101
-  pre.src-forth:before { content: 'Forth'; }
102
-  pre.src-io:before { content: 'IO'; }
103
-  pre.src-J:before { content: 'J'; }
104
-  pre.src-makefile:before { content: 'Makefile'; }
105
-  pre.src-maxima:before { content: 'Maxima'; }
106
-  pre.src-perl:before { content: 'Perl'; }
107
-  pre.src-picolisp:before { content: 'Pico Lisp'; }
108
-  pre.src-scala:before { content: 'Scala'; }
109
-  pre.src-shell:before { content: 'Shell Script'; }
110
-  pre.src-ebnf2ps:before { content: 'ebfn2ps'; }
111
-  /* additional language identifiers per "defun org-babel-execute"
112
-       in ob-*.el */
113
-  pre.src-cpp:before  { content: 'C++'; }
114
-  pre.src-abc:before  { content: 'ABC'; }
115
-  pre.src-coq:before  { content: 'Coq'; }
116
-  pre.src-groovy:before  { content: 'Groovy'; }
117
-  /* additional language identifiers from org-babel-shell-names in
118
-     ob-shell.el: ob-shell is the only babel language using a lambda to put
119
-     the execution function name together. */
120
-  pre.src-bash:before  { content: 'bash'; }
121
-  pre.src-csh:before  { content: 'csh'; }
122
-  pre.src-ash:before  { content: 'ash'; }
123
-  pre.src-dash:before  { content: 'dash'; }
124
-  pre.src-ksh:before  { content: 'ksh'; }
125
-  pre.src-mksh:before  { content: 'mksh'; }
126
-  pre.src-posh:before  { content: 'posh'; }
127
-  /* Additional Emacs modes also supported by the LaTeX listings package */
128
-  pre.src-ada:before { content: 'Ada'; }
129
-  pre.src-asm:before { content: 'Assembler'; }
130
-  pre.src-caml:before { content: 'Caml'; }
131
-  pre.src-delphi:before { content: 'Delphi'; }
132
-  pre.src-html:before { content: 'HTML'; }
133
-  pre.src-idl:before { content: 'IDL'; }
134
-  pre.src-mercury:before { content: 'Mercury'; }
135
-  pre.src-metapost:before { content: 'MetaPost'; }
136
-  pre.src-modula-2:before { content: 'Modula-2'; }
137
-  pre.src-pascal:before { content: 'Pascal'; }
138
-  pre.src-ps:before { content: 'PostScript'; }
139
-  pre.src-prolog:before { content: 'Prolog'; }
140
-  pre.src-simula:before { content: 'Simula'; }
141
-  pre.src-tcl:before { content: 'tcl'; }
142
-  pre.src-tex:before { content: 'TeX'; }
143
-  pre.src-plain-tex:before { content: 'Plain TeX'; }
144
-  pre.src-verilog:before { content: 'Verilog'; }
145
-  pre.src-vhdl:before { content: 'VHDL'; }
146
-  pre.src-xml:before { content: 'XML'; }
147
-  pre.src-nxml:before { content: 'XML'; }
148
-  /* add a generic configuration mode; LaTeX export needs an additional
149
-     (add-to-list 'org-latex-listings-langs '(conf " ")) in .emacs */
150
-  pre.src-conf:before { content: 'Configuration File'; }
55
+  pre.src-R:before     { content: 'R'; }
56
+  pre.src-perl:before  { content: 'Perl'; }
57
+  pre.src-java:before  { content: 'Java'; }
58
+  pre.src-sql:before   { content: 'SQL'; }
151 59
 
152 60
   table { border-collapse:collapse; }
153 61
   caption.t-above { caption-side: top; }
154 62
   caption.t-bottom { caption-side: bottom; }
155 63
   td, th { vertical-align:top;  }
156
-  th.org-right  { text-align: center;  }
157
-  th.org-left   { text-align: center;   }
158
-  th.org-center { text-align: center; }
159
-  td.org-right  { text-align: right;  }
160
-  td.org-left   { text-align: left;   }
161
-  td.org-center { text-align: center; }
64
+  th.right  { text-align: center;  }
65
+  th.left   { text-align: center;   }
66
+  th.center { text-align: center; }
67
+  td.right  { text-align: right;  }
68
+  td.left   { text-align: left;   }
69
+  td.center { text-align: center; }
162 70
   dt { font-weight: bold; }
163
-  .footpara { display: inline; }
71
+  .footpara:nth-child(2) { display: inline; }
72
+  .footpara { display: block; }
164 73
   .footdef  { margin-bottom: 1em; }
165 74
   .figure { padding: 1em; }
166 75
   .figure p { text-align: center; }
@@ -180,7 +89,6 @@
180 89
     { font-size: 10px; font-weight: bold; white-space: nowrap; }
181 90
   .org-info-js_search-highlight
182 91
     { background-color: #ffff00; color: #000000; font-weight: bold; }
183
-  .org-svg { width: 90%; }
184 92
   /*]]>*/-->
185 93
 </style>
186 94
 <link rel="stylesheet" type="text/css" href="freedombone.css" />
@@ -189,7 +97,7 @@
189 97
 @licstart  The following is the entire license notice for the
190 98
 JavaScript code in this tag.
191 99
 
192
-Copyright (C) 2012-2017 Free Software Foundation, Inc.
100
+Copyright (C) 2012-2013 Free Software Foundation, Inc.
193 101
 
194 102
 The JavaScript code in this tag is free software: you can
195 103
 redistribute it and/or modify it under the terms of the GNU
@@ -236,7 +144,8 @@ for the JavaScript code in this tag.
236 144
 <a name="top" id="top"></a>
237 145
 </div>
238 146
 <div id="content">
239
-<div class="org-center">
147
+<h1 class="title"></h1>
148
+<div class="center">
240 149
 
241 150
 <div class="figure">
242 151
 <p><img src="images/logo.png" alt="logo.png" />
@@ -244,41 +153,56 @@ for the JavaScript code in this tag.
244 153
 </div>
245 154
 </div>
246 155
 
247
-<center><h1>Mesh Network: How to use it</h1></center>
156
+<div class="export">
157
+<p>
158
+&lt;center&gt;&lt;h1&gt;Mesh Network: How to use it&lt;/h1&gt;&lt;/center&gt;
159
+</p>
160
+
161
+</div>
248 162
 
249 163
 <ul class="org-ul">
250
-<li><a href="#orgdec778b">Boot trouble</a></li>
251
-<li><a href="#org92b8992">Set the Date</a></li>
252
-<li><a href="#org5854462">Check network status</a></li>
253
-<li><a href="#orga9a6d4b">Connecting to the internet</a></li>
254
-<li><a href="#org5fe4cbd">Connecting two meshes over the internet via a VPN tunnel</a></li>
255
-<li><a href="#org0f9ab05">Mobile devices (phones, etc)</a></li>
256
-<li><a href="#orgf44bf0d">Chat System</a></li>
257
-<li><a href="#org6940994">Collaborative document editing</a></li>
258
-<li><a href="#orgdcb8a5f">Social Network</a></li>
259
-<li><a href="#orga1bfc4a">Sharing Files</a></li>
260
-<li><a href="#orgfbceae4">Blogging</a></li>
164
+<li><a href="#sec-1">Boot trouble</a>
165
+</li>
166
+<li><a href="#sec-2">Set the Date</a>
167
+</li>
168
+<li><a href="#sec-3">Check network status</a>
169
+</li>
170
+<li><a href="#sec-4">Connecting to the internet</a>
171
+</li>
172
+<li><a href="#sec-5">Connecting two meshes over the internet via a VPN tunnel</a>
173
+</li>
174
+<li><a href="#sec-6">Mobile devices (phones, etc)</a>
175
+</li>
176
+<li><a href="#sec-7">Chat System</a>
177
+</li>
178
+<li><a href="#sec-8">Collaborative document editing</a>
179
+</li>
180
+<li><a href="#sec-9">Social Network</a>
181
+</li>
182
+<li><a href="#sec-10">Sharing Files</a>
183
+</li>
184
+<li><a href="#sec-11">Blogging</a>
185
+</li>
261 186
 </ul>
262 187
 
263 188
 <p>
264 189
 When you first boot from the USB drive the system will create some encryption keys, assign a unique network address to the system and then reboot itself. When that's done you should see a prompt asking for a username. This username just makes it easy for others to initially find you on the mesh and will appear in the list of users.
265 190
 </p>
266 191
 
267
-<div class="org-center">
268 192
 
269 193
 <div class="figure">
270
-<p><img src="images/mesh_initial_login.jpg" alt="mesh_initial_login.jpg" />
194
+<p><img src="images/mesh_initial_login.jpg" alt="mesh_initial_login.jpg" width="100%" align="center" />
271 195
 </p>
272 196
 </div>
273
-</div>
197
+
274 198
 
275 199
 <p>
276 200
 After a minute or two if you are within wifi range and there is at least one other user on the network then you should see additional icons appear on the desktop, such as <i>Other Users</i> and <i>Chat</i>.
277 201
 </p>
278 202
 
279
-<div id="outline-container-orgdec778b" class="outline-2">
280
-<h2 id="orgdec778b">Boot trouble</h2>
281
-<div class="outline-text-2" id="text-orgdec778b">
203
+<div id="outline-container-sec-1" class="outline-2">
204
+<h2 id="sec-1">Boot trouble</h2>
205
+<div class="outline-text-2" id="text-1">
282 206
 <p>
283 207
 If the system doesn't boot and reports an error which includes <b>/dev/mapper/loop0p1</b> then reboot with <b>Ctrl-Alt-Del</b> and when you see the grub menu press <b>e</b> and manually change <b>/dev/mapper/loop0p1</b> to <b>/dev/sdb1</b>, then press <b>Ctrl-x</b>. If that doesn't work then reboot and try <b>/dev/sdc1</b> instead.
284 208
 </p>
@@ -288,9 +212,9 @@ After the system has booted successfully the problem should resolve itself on su
288 212
 </p>
289 213
 </div>
290 214
 </div>
291
-<div id="outline-container-org92b8992" class="outline-2">
292
-<h2 id="org92b8992">Set the Date</h2>
293
-<div class="outline-text-2" id="text-org92b8992">
215
+<div id="outline-container-sec-2" class="outline-2">
216
+<h2 id="sec-2">Set the Date</h2>
217
+<div class="outline-text-2" id="text-2">
294 218
 <p>
295 219
 On the ordinary internet the date and time of your system would be set automatically via NTP. But this is not the internet and so you will need to manually ensure that your date and time settings are correct. You might need to periodically do this if your clock drifts. It's not essential that the time on your system be highly accurate, but if it drifts too far or goes back to epoch then things could become a little confusing in regard to the order of blog posts.
296 220
 </p>
@@ -300,9 +224,9 @@ On the ordinary internet the date and time of your system would be set automatic
300 224
 </p>
301 225
 </div>
302 226
 </div>
303
-<div id="outline-container-org5854462" class="outline-2">
304
-<h2 id="org5854462">Check network status</h2>
305
-<div class="outline-text-2" id="text-org5854462">
227
+<div id="outline-container-sec-3" class="outline-2">
228
+<h2 id="sec-3">Check network status</h2>
229
+<div class="outline-text-2" id="text-3">
306 230
 <p>
307 231
 Unlike with ordinary wifi, on the mesh you don't get a signal strength icon and so it's not simple to see if you have a good connection.
308 232
 </p>
@@ -312,29 +236,24 @@ Select the wifi icon on the desktop and enter the password '<i>freedombone</i>'.
312 236
 </p>
313 237
 
314 238
 
315
-<div class="org-center">
316
-
317 239
 <div class="figure">
318
-<p><img src="images/mesh_signal.jpg" alt="mesh_signal.jpg" />
240
+<p><img src="images/mesh_signal.jpg" alt="mesh_signal.jpg" width="70%" align="center" />
319 241
 </p>
320 242
 </div>
321
-</div>
322 243
 
323 244
 <p>
324 245
 When you are finished close the window and then select the <i>Network Restart</i> desktop icon, which will restart the B.A.T.M.A.N. network. You can also use the restart icon if you are within range of the mesh network but the <i>Chat</i> and <i>Other Users</i> icons do not automatically appear after a few minutes.
325 246
 </p>
326 247
 </div>
327 248
 </div>
328
-<div id="outline-container-orga9a6d4b" class="outline-2">
329
-<h2 id="orga9a6d4b">Connecting to the internet</h2>
330
-<div class="outline-text-2" id="text-orga9a6d4b">
331
-<div class="org-center">
249
+<div id="outline-container-sec-4" class="outline-2">
250
+<h2 id="sec-4">Connecting to the internet</h2>
251
+<div class="outline-text-2" id="text-4">
332 252
 
333 253
 <div class="figure">
334
-<p><img src="images/mesh_architecture2.jpg" alt="mesh_architecture2.jpg" />
254
+<p><img src="images/mesh_architecture2.jpg" alt="mesh_architecture2.jpg" width="100%" align="center" />
335 255
 </p>
336 256
 </div>
337
-</div>
338 257
 
339 258
 <p>
340 259
 If you need to be able to access the internet from the mesh then connect one of the peers to an internet router using an ethernet cable (shown as yellow above), then reboot it. Other peers in the mesh, including any attached mobile devices, will then be able to access the internet using the ethernet attached peer as a gateway. <a href="https://en.wikipedia.org/wiki/Freifunk">Freifunk</a> works in a similar way.
@@ -349,6 +268,7 @@ If for legal reasons you need to connect to the internet via a VPN then openvpn
349 268
 </p>
350 269
 
351 270
 <div class="org-src-container">
271
+
352 272
 <pre class="src src-bash">sudo openvpn myclient.ovpn
353 273
 </pre>
354 274
 </div>
@@ -358,16 +278,14 @@ Where <i>myclient.ovpn</i> comes from your VPN provider and with the password "<
358 278
 </p>
359 279
 </div>
360 280
 </div>
361
-<div id="outline-container-org5fe4cbd" class="outline-2">
362
-<h2 id="org5fe4cbd">Connecting two meshes over the internet via a VPN tunnel</h2>
363
-<div class="outline-text-2" id="text-org5fe4cbd">
364
-<div class="org-center">
281
+<div id="outline-container-sec-5" class="outline-2">
282
+<h2 id="sec-5">Connecting two meshes over the internet via a VPN tunnel</h2>
283
+<div class="outline-text-2" id="text-5">
365 284
 
366 285
 <div class="figure">
367
-<p><img src="images/mesh_architecture_vpn.jpg" alt="mesh_architecture_vpn.jpg" />
286
+<p><img src="images/mesh_architecture_vpn.jpg" alt="mesh_architecture_vpn.jpg" width="100%" align="center" />
368 287
 </p>
369 288
 </div>
370
-</div>
371 289
 
372 290
 <p>
373 291
 Maybe the internet exists, but you don't care about getting any content from it and just want to use it as a way to connect mesh networks from different geographical locations together.
@@ -377,13 +295,11 @@ Maybe the internet exists, but you don't care about getting any content from it
377 295
 In your home directory on a system connected via ethernet to an internet router you'll find a file called <b>vpn.tar.gz</b>. If you want another mesh to be able to connect to yours then send them this file and get them to uncompress it into their home directory also on an internet gateway machine. If they have an external IP address or domain name for your router then they will be able to VPN connect using the <b>Connect Meshes</b> icon. They should also forward port 653 from their internet router to the mesh gateway machine.
378 296
 </p>
379 297
 
380
-<div class="org-center">
381 298
 
382 299
 <div class="figure">
383
-<p><img src="images/mesh_connect.png" alt="mesh_connect.png" />
300
+<p><img src="images/mesh_connect.png" alt="mesh_connect.png" width="50%" align="center" />
384 301
 </p>
385 302
 </div>
386
-</div>
387 303
 
388 304
 <p>
389 305
 You should create a new <b>vpn.tar.gz</b> file for every other mesh which wants to be able to connect to yours. If you are prompted for a password it is 'freedombone'.
@@ -395,16 +311,14 @@ From a deep packet inspection point of view the traffic going over the internet
395 311
 </div>
396 312
 </div>
397 313
 
398
-<div id="outline-container-org0f9ab05" class="outline-2">
399
-<h2 id="org0f9ab05">Mobile devices (phones, etc)</h2>
400
-<div class="outline-text-2" id="text-org0f9ab05">
401
-<div class="org-center">
314
+<div id="outline-container-sec-6" class="outline-2">
315
+<h2 id="sec-6">Mobile devices (phones, etc)</h2>
316
+<div class="outline-text-2" id="text-6">
402 317
 
403 318
 <div class="figure">
404
-<p><img src="images/mesh_architecture3.jpg" alt="mesh_architecture3.jpg" />
319
+<p><img src="images/mesh_architecture3.jpg" alt="mesh_architecture3.jpg" width="100%" align="center" />
405 320
 </p>
406 321
 </div>
407
-</div>
408 322
 
409 323
 <p>
410 324
 To allow mobile devices to connect to the mesh you will need a second wifi adapter connected to your laptop/netbook/SBC. Plug in a second wifi adapter then reboot the system. The second adaptor will then create a wifi hotspot (the connection shown in green above) which mobile devices can connect to. The hotspot name also contains its local IP address (eg. "<i>mesh-192.168.1.83</i>").
@@ -414,33 +328,29 @@ To allow mobile devices to connect to the mesh you will need a second wifi adapt
414 328
 On a typical Android device go to <b>Settings</b> then <b>Security</b> and ensure that <b>Unknown sources</b> is enabled. Also within <b>Wifi</b> from the <b>Settings</b> screen select the mesh hotspot. The password is "<i>freedombone</i>". Open a non-Tor browser and navigate to the IP address showing in the hotspot name. You can then download and install mesh apps.
415 329
 </p>
416 330
 
417
-<div class="org-center">
418 331
 
419 332
 <div class="figure">
420
-<p><img src="images/mesh_mobileapps.jpg" alt="mesh_mobileapps.jpg" />
333
+<p><img src="images/mesh_mobileapps.jpg" alt="mesh_mobileapps.jpg" width="30%" align="center" />
421 334
 </p>
422 335
 </div>
423
-</div>
424 336
 
425 337
 <p>
426 338
 On some android devices you may need to move the downloaded APK file from the <b>Downloads</b> directory to your <b>home</b> directory before you can install it.
427 339
 </p>
428 340
 </div>
429 341
 </div>
430
-<div id="outline-container-orgf44bf0d" class="outline-2">
431
-<h2 id="orgf44bf0d">Chat System</h2>
432
-<div class="outline-text-2" id="text-orgf44bf0d">
342
+<div id="outline-container-sec-7" class="outline-2">
343
+<h2 id="sec-7">Chat System</h2>
344
+<div class="outline-text-2" id="text-7">
433 345
 <p>
434 346
 Ensure that you're within wifi range of at least one other mesh peer (could be a router or client) and then you should see that the <i>Chat</i> and <i>Other Users</i> icons appear. Select the users icon and you should see a list of users on the mesh.
435 347
 </p>
436 348
 
437
-<div class="org-center">
438 349
 
439 350
 <div class="figure">
440
-<p><img src="images/mesh_peerslist.png" alt="mesh_peerslist.png" />
351
+<p><img src="images/mesh_peerslist.png" alt="mesh_peerslist.png" width="30%" align="center" />
441 352
 </p>
442 353
 </div>
443
-</div>
444 354
 
445 355
 <p>
446 356
 Selecting a user followed by the Ok button will copy their Tox ID to the clipboard.
@@ -450,49 +360,41 @@ Selecting a user followed by the Ok button will copy their Tox ID to the clipboa
450 360
 Now select the <i>Chat</i> icon and once you are connected you should see the status light turn green. If after a few minutes you don't get the green status light then try closing and re-opening the Tox chat application. Select the plus button to add a friend and then paste in a Tox ID.
451 361
 </p>
452 362
 
453
-<div class="org-center">
454 363
 
455 364
 <div class="figure">
456
-<p><img src="images/mesh_paste_tox_id.jpg" alt="mesh_paste_tox_id.jpg" />
365
+<p><img src="images/mesh_paste_tox_id.jpg" alt="mesh_paste_tox_id.jpg" width="80%" align="center" />
457 366
 </p>
458 367
 </div>
459
-</div>
460 368
 
461 369
 <p>
462 370
 The other user can then accept or decline your friend request.
463 371
 </p>
464 372
 
465
-<div class="org-center">
466 373
 
467 374
 <div class="figure">
468
-<p><img src="images/mesh_friend_request.jpg" alt="mesh_friend_request.jpg" />
375
+<p><img src="images/mesh_friend_request.jpg" alt="mesh_friend_request.jpg" width="80%" align="center" />
469 376
 </p>
470 377
 </div>
471
-</div>
472 378
 
473 379
 <p>
474 380
 You can also select an avatar by selecting the grey head and shoulders image.
475 381
 </p>
476 382
 
477
-<div class="org-center">
478 383
 
479 384
 <div class="figure">
480
-<p><img src="images/mesh_choose_avatar.jpg" alt="mesh_choose_avatar.jpg" />
385
+<p><img src="images/mesh_choose_avatar.jpg" alt="mesh_choose_avatar.jpg" width="100%" align="center" />
481 386
 </p>
482 387
 </div>
483
-</div>
484 388
 
485 389
 <p>
486 390
 And by selecting the user from the list on the left hand side the chat can begin.
487 391
 </p>
488 392
 
489
-<div class="org-center">
490 393
 
491 394
 <div class="figure">
492
-<p><img src="images/mesh_text_chat.jpg" alt="mesh_text_chat.jpg" />
395
+<p><img src="images/mesh_text_chat.jpg" alt="mesh_text_chat.jpg" width="100%" align="center" />
493 396
 </p>
494 397
 </div>
495
-</div>
496 398
 
497 399
 <p>
498 400
 One important point is that by default the microphone is turned off. When doing voice chat you can select the microphone volume with the drop down slider in the top right corner of the screen.
@@ -504,32 +406,28 @@ At present video doesn't work reliably, but text and voice chat do work well.
504 406
 </div>
505 407
 </div>
506 408
 
507
-<div id="outline-container-org6940994" class="outline-2">
508
-<h2 id="org6940994">Collaborative document editing</h2>
509
-<div class="outline-text-2" id="text-org6940994">
409
+<div id="outline-container-sec-8" class="outline-2">
410
+<h2 id="sec-8">Collaborative document editing</h2>
411
+<div class="outline-text-2" id="text-8">
510 412
 <p>
511 413
 The mesh system includes the ability to collaboratively edit various sorts of documents using CryptPad. CryptPad is an almost peer-to-peer system in that it is designed for a client/server environment but that the server aspect of it is very minimal and limited to orchestrating the connected clients. With CryptPad installed on each mesh peer it effectively enables peer-to-peer collaborative editing. Documents are ephemeral and forgotten unless they're exported or copy-pasted to permanent storage.
512 414
 </p>
513 415
 
514
-<div class="org-center">
515 416
 
516 417
 <div class="figure">
517
-<p><img src="images/mesh_cryptpad1.jpg" alt="mesh_cryptpad1.jpg" />
418
+<p><img src="images/mesh_cryptpad1.jpg" alt="mesh_cryptpad1.jpg" width="100%" align="center" />
518 419
 </p>
519 420
 </div>
520
-</div>
521 421
 
522 422
 <p>
523 423
 To create a document click on the CryptPad icon. Depending upon the specifications of your system it may take a few seconds to load, so don't be too disturned if the browser contents look blank for a while. Select <span class="underline">Rich Text Pad</span> and give yourself a username.
524 424
 </p>
525 425
 
526
-<div class="org-center">
527 426
 
528 427
 <div class="figure">
529
-<p><img src="images/mesh_cryptpad2.jpg" alt="mesh_cryptpad2.jpg" />
428
+<p><img src="images/mesh_cryptpad2.jpg" alt="mesh_cryptpad2.jpg" width="100%" align="center" />
530 429
 </p>
531 430
 </div>
532
-</div>
533 431
 
534 432
 <p>
535 433
 If you have the chat system running you can then copy and paste the URL for your pad into the chat, and the other user can then open the link and edit the document with you. You can repeat that for however many other users you wish to be able to edit.
@@ -537,9 +435,9 @@ If you have the chat system running you can then copy and paste the URL for your
537 435
 </div>
538 436
 </div>
539 437
 
540
-<div id="outline-container-orgdcb8a5f" class="outline-2">
541
-<h2 id="orgdcb8a5f">Social Network</h2>
542
-<div class="outline-text-2" id="text-orgdcb8a5f">
438
+<div id="outline-container-sec-9" class="outline-2">
439
+<h2 id="sec-9">Social Network</h2>
440
+<div class="outline-text-2" id="text-9">
543 441
 <p>
544 442
 Patchwork is available as a social networking system for the mesh. Like all social network systems it has a stream of posts and you can follow or unfollow other users. You can also send private messages to other users with end-to-end encryption.
545 443
 </p>
@@ -548,25 +446,21 @@ Patchwork is available as a social networking system for the mesh. Like all soci
548 446
 Double click on the "Social" icon to open the app, then add your nickname and optionally a description. If you want to choose an avatar image some can be found within the directory <b>/usr/share/freedombone/avatars</b>. On older systems or systems without a hardware random number generator, Patchwork sometimes takes a long time (a few minutes) to open for the first time after clicking the icon. This is most likely due to the initial generation of encryption keys, so be patient.
549 447
 </p>
550 448
 
551
-<div class="org-center">
552 449
 
553 450
 <div class="figure">
554
-<p><img src="images/patchwork_setup.jpg" alt="patchwork_setup.jpg" />
451
+<p><img src="images/patchwork_setup.jpg" alt="patchwork_setup.jpg" width="80%" align="center" />
555 452
 </p>
556 453
 </div>
557
-</div>
558 454
 
559 455
 <p>
560 456
 Other Patchwork users on the mesh will appear automatically under the <b>local</b> list and you can select and follow them if you wish. It's also possible to select the dark theme from <b>settings</b> on the drop down menu if you prefer.
561 457
 </p>
562 458
 
563
-<div class="org-center">
564 459
 
565 460
 <div class="figure">
566
-<p><img src="images/patchwork_public.jpg" alt="patchwork_public.jpg" />
461
+<p><img src="images/patchwork_public.jpg" alt="patchwork_public.jpg" width="50%" align="center" />
567 462
 </p>
568 463
 </div>
569
-</div>
570 464
 
571 465
 <p>
572 466
 The Secure Scuttlebutt protocol which Patchwork is based upon is intended to be robust to intermittent network connectivity, so you can write posts when out of range and they will sync once you are back in the network.
@@ -574,72 +468,63 @@ The Secure Scuttlebutt protocol which Patchwork is based upon is intended to be
574 468
 </div>
575 469
 </div>
576 470
 
577
-<div id="outline-container-orga1bfc4a" class="outline-2">
578
-<h2 id="orga1bfc4a">Sharing Files</h2>
579
-<div class="outline-text-2" id="text-orga1bfc4a">
471
+<div id="outline-container-sec-10" class="outline-2">
472
+<h2 id="sec-10">Sharing Files</h2>
473
+<div class="outline-text-2" id="text-10">
580 474
 <p>
581 475
 You can make files publicly available on the network simply by dragging and dropping them into the <i>Public</i> folder on the desktop. To view the files belonging to another user select the desktop icon called <i>Visit a site</i> and enter the username or Tox ID of the other user.
582 476
 </p>
583 477
 
584
-<div class="org-center">
585 478
 
586 479
 <div class="figure">
587
-<p><img src="images/mesh_share_files.jpg" alt="mesh_share_files.jpg" />
480
+<p><img src="images/mesh_share_files.jpg" alt="mesh_share_files.jpg" width="50%" align="center" />
588 481
 </p>
589 482
 </div>
590 483
 </div>
591 484
 </div>
592
-</div>
593 485
 
594
-<div id="outline-container-orgfbceae4" class="outline-2">
595
-<h2 id="orgfbceae4">Blogging</h2>
596
-<div class="outline-text-2" id="text-orgfbceae4">
486
+<div id="outline-container-sec-11" class="outline-2">
487
+<h2 id="sec-11">Blogging</h2>
488
+<div class="outline-text-2" id="text-11">
597 489
 <p>
598 490
 To create a blog post select the <i>Blog</i> icon on the desktop and then select <b>New blog entry</b> and <b>Ok</b>. Edit the title of the entry and add your text. You can also include photos if you wish - just copy them to the <b>CreateBlog/content/images</b> directory and then link to them as shown.
599 491
 </p>
600 492
 
601
-<div class="org-center">
602 493
 
603 494
 <div class="figure">
604
-<p><img src="images/mesh_blog.png" alt="mesh_blog.png" />
495
+<p><img src="images/mesh_blog.png" alt="mesh_blog.png" width="30%" align="center" />
605 496
 </p>
606 497
 </div>
607
-</div>
608 498
 
609 499
 <p>
610 500
 To finish your blog entry just select <i>Save</i> and then close the editor. On older hardware it may take a while to publish the results, and this depends upon the amount of computation needed by IPFS to create file hashes. If you make no changes to the default text then the new blog entry will not be saved.
611 501
 </p>
612 502
 
613
-<div class="org-center">
614 503
 
615 504
 <div class="figure">
616
-<p><img src="images/mesh_new_blog2.jpg" alt="mesh_new_blog2.jpg" />
505
+<p><img src="images/mesh_new_blog2.jpg" alt="mesh_new_blog2.jpg" width="50%" align="center" />
617 506
 </p>
618 507
 </div>
619
-</div>
620 508
 
621
-<div class="org-center">
509
+
622 510
 
623 511
 <div class="figure">
624
-<p><img src="images/mesh_view_blog.jpg" alt="mesh_view_blog.jpg" />
512
+<p><img src="images/mesh_view_blog.jpg" alt="mesh_view_blog.jpg" width="50%" align="center" />
625 513
 </p>
626 514
 </div>
627
-</div>
628 515
 
629 516
 <p>
630 517
 You can also visit other blogs, edit or delete your previous entry and change your blog theme.
631 518
 </p>
632 519
 
633
-<div class="org-center">
634 520
 
635 521
 <div class="figure">
636
-<p><img src="images/mesh_select_blog_theme.png" alt="mesh_select_blog_theme.png" />
522
+<p><img src="images/mesh_select_blog_theme.png" alt="mesh_select_blog_theme.png" width="30%" align="center" />
637 523
 </p>
638 524
 </div>
639 525
 </div>
640 526
 </div>
641 527
 </div>
642
-</div>
643 528
 <div id="postamble" class="status">
644 529
 
645 530
 <style type="text/css">