mirror of
https://github.com/FunKey-Project/FunKey-Project.github.io.git
synced 2025-12-12 10:18:50 +01:00
working iFixIt steps
Signed-off-by: Michel-FK <michel.stempin@funkey-project.com>
This commit is contained in:
Michel-FK
parent
6924caa26b
commit
ddd2e68785
@ -1,117 +1,91 @@
|
||||
/* custom.css */
|
||||
a.boxedThumb {
|
||||
display: block;
|
||||
padding: 4px;
|
||||
line-height: 20px;
|
||||
border: 1px solid #ddd;
|
||||
-webkit-border-radius: 4px;
|
||||
-moz-border-radius: 4px;
|
||||
border-radius: 4px;
|
||||
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.055);
|
||||
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.055);
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.055);
|
||||
-webkit-transition: -webkit-transform .15s ease;
|
||||
-moz-transition: -moz-transform .15s ease;
|
||||
-o-transition: -o-transform .15s ease;
|
||||
-ms-transition: -ms-transform .15s ease;
|
||||
transition: transform .15s ease;
|
||||
}
|
||||
|
||||
a.boxedThumb:hover {
|
||||
-webkit-transform: scale(1.05);
|
||||
-moz-transform: scale(1.05);
|
||||
-o-transform: scale(1.05);
|
||||
-ms-transform: scale(1.05);
|
||||
transform: scale(1.05);
|
||||
z-index: 5;
|
||||
@CHARSET "UTF-8";
|
||||
body {
|
||||
font-family: Helvetica;
|
||||
font-size: 12px;
|
||||
color: #63665F
|
||||
}
|
||||
|
||||
.step {
|
||||
display: -ms-flexbox;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
-ms-flex-direction: column;
|
||||
-webkit-flex-direction: column;
|
||||
flex-direction: column
|
||||
display: grid;
|
||||
grid-template-areas:
|
||||
"step-title step-title"
|
||||
"step-picture step-thumbs"
|
||||
"step-picture step-contents";
|
||||
grid-template-rows: auto auto 1fr;
|
||||
grid-template-columns: 50% 50%;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.step-container {
|
||||
-ms-align-items: flex-start;
|
||||
-webkit-align-items: flex-start;
|
||||
align-items: flex-start;
|
||||
-ms-flex-align: start
|
||||
}
|
||||
|
||||
@media only screen and (max-width:599px) {
|
||||
.step-container {
|
||||
-ms-flex-direction: column;
|
||||
-webkit-flex-direction: column;
|
||||
flex-direction: column
|
||||
/* Stack the layout on small devices/viewports. */
|
||||
@media all and (max-width: 479px) {
|
||||
.step {
|
||||
grid-template-areas:
|
||||
"step-title"
|
||||
"step-picture"
|
||||
"step-thumbs"
|
||||
"step-contents";
|
||||
grid-template-rows: auto 1fr 90px auto;
|
||||
grid-template-columns: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.row {
|
||||
position: relative;
|
||||
display: -ms-flexbox;
|
||||
display: -webkit-flex;
|
||||
display: flex;
|
||||
-ms-flex-direction: row;
|
||||
-webkit-flex-direction: row;
|
||||
flex-direction: row;
|
||||
margin-bottom: 20px
|
||||
.step-title {
|
||||
grid-area: step-title;
|
||||
}
|
||||
|
||||
.thumb {
|
||||
.step-picture {
|
||||
grid-area: step-picture;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
/* Make the picture fill width on small devices/viewports. */
|
||||
@media only screen and (max-width: 479px) {
|
||||
.step-picture {
|
||||
margin-bottom: 10px;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.step-thumbs {
|
||||
grid-area: step-thumbs;
|
||||
}
|
||||
|
||||
.step-contents {
|
||||
grid-area: step-contents;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.step-thumb {
|
||||
border-radius: 3px;
|
||||
box-shadow: 0 0 0 1px rgba(0, 0, 0, .15);
|
||||
color: rgb(99, 102, 95);
|
||||
margin-right: 10px;
|
||||
margin-left: 10px;
|
||||
display: block;
|
||||
max-width: 110px;
|
||||
margin: 10px 10px 0px 10px;
|
||||
display: inline-block;
|
||||
max-width: 27%!important;
|
||||
max-height: 90px;
|
||||
object-fit: cover;
|
||||
opacity: .7;
|
||||
-ms-flex: 0 1 110px;
|
||||
-webkit-flex: 0 1 110px;
|
||||
flex: 0 1 110px;
|
||||
box-shadow: 0 0 0 0 transparent;
|
||||
transition: box-shadow .2s, border-color .2s, opacity .2s;
|
||||
white-space: nowrap
|
||||
}
|
||||
|
||||
.thumb.active,
|
||||
.thumb:hover {
|
||||
/* Make thumbnails on a separate row on small devices/viewports.*/
|
||||
@media only screen and (max-width: 479px) {
|
||||
.step-thumb {
|
||||
width: 30%;
|
||||
max-height: 180px;
|
||||
}
|
||||
}
|
||||
|
||||
.step-thumb.active,
|
||||
.step-thumb:hover {
|
||||
transform: translateY(-4px);
|
||||
opacity: 1;
|
||||
box-shadow: 0 4px 10px rgba(0, 0, 0, .5)
|
||||
}
|
||||
|
||||
@media only screen and (max-width:599px) {
|
||||
.thumb.active,
|
||||
.thumb:hover {
|
||||
/* No translation and smaller shadow on small devices/viewports. */
|
||||
@media all and (max-width: 479px) {
|
||||
.step-thumb.active,
|
||||
.step-thumb:hover {
|
||||
transform: translateY(0);
|
||||
box-shadow: 0 0 2px rgba(0, 0, 0, .75)
|
||||
}
|
||||
}
|
||||
|
||||
.large-image {
|
||||
-ms-flex: 1 2;
|
||||
-webkit-flex: 1 2;
|
||||
flex: 1 2;
|
||||
width: 575px;
|
||||
max-height: 432px;
|
||||
object-fit: cover;
|
||||
display: flex;
|
||||
-ms-justify-content: center;
|
||||
-webkit-justify-content: center;
|
||||
justify-content: center;
|
||||
-ms-flex-pack: center;
|
||||
-ms-align-items: center;
|
||||
-webkit-align-items: center;
|
||||
align-items: center;
|
||||
-ms-flex-align: center;
|
||||
-ms-flex-direction: column;
|
||||
-webkit-flex-direction: column;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
@ -1,45 +1,115 @@
|
||||
$(document).ready(function () {
|
||||
$(".step-container img:first-child").each(function () {
|
||||
|
||||
/* Convert a loose structure of:
|
||||
|
||||
article
|
||||
.step-title
|
||||
.step-thumb
|
||||
.step-thumb
|
||||
<content>
|
||||
.step-title
|
||||
.step-thumb
|
||||
.step-thumb
|
||||
<content>
|
||||
|
||||
into a strict hierarchy of containers:
|
||||
|
||||
article
|
||||
.step
|
||||
.step-title
|
||||
.step-thumbs
|
||||
.step-thumb
|
||||
.step-thumb
|
||||
.step-contents
|
||||
<content>
|
||||
.step
|
||||
.step-title
|
||||
.step-thumbs
|
||||
.step-thumb
|
||||
.step-thumb
|
||||
.step-contents
|
||||
<content>
|
||||
*/
|
||||
|
||||
/* First, wrap all "step-title" article elements and all elements
|
||||
until next such element or end of article into a "step" div */
|
||||
$("article").each(function () {
|
||||
var step = $();
|
||||
var wrap = false;
|
||||
$(this).contents().each(function () {
|
||||
if ($(this).hasClass("step-title")) {
|
||||
if (wrap && step.length > 1) {
|
||||
step.wrapAll('<div class="step" />');
|
||||
}
|
||||
step = $();
|
||||
wrap = true;
|
||||
}
|
||||
step = step.add($(this));
|
||||
});
|
||||
if (wrap && step.length > 1) {
|
||||
step.wrapAll('<div class="step" />');
|
||||
}
|
||||
});
|
||||
|
||||
/* Then wrap all "step step-thumb" elements into a "step-thumbs"
|
||||
div */
|
||||
$(".step p").each(function () {
|
||||
var thumbs = $();
|
||||
$(this).contents().each(function () {
|
||||
if ($(this).hasClass("step-thumb")) {
|
||||
thumbs = thumbs.add($(this));
|
||||
}
|
||||
});
|
||||
if (thumbs.length > 0) {
|
||||
thumbs.unwrap();
|
||||
thumbs.wrapAll('<div class="step-thumbs" />');
|
||||
}
|
||||
});
|
||||
|
||||
/* Then wrap all other except "step step-title" ones into a
|
||||
"step-contents" div */
|
||||
$(".step").each(function () {
|
||||
var contents = $();
|
||||
$(this).contents().each(function () {
|
||||
if (!$(this).hasClass("step-title") &&
|
||||
!$(this).hasClass("step-thumbs") &&
|
||||
!$(this).hasClass("step-thumb")) {
|
||||
contents = contents.add($(this));
|
||||
}
|
||||
});
|
||||
if (contents.length > 0) {
|
||||
contents.wrapAll('<div class="step-contents" />');
|
||||
}
|
||||
});
|
||||
|
||||
/* Create the large "step-picture" from the first thumbnail in a
|
||||
"step-thumbs" */
|
||||
|
||||
/* For each first thumbnail in a "step-thumbs" */
|
||||
$(".step-thumbs img:first-child").each(function () {
|
||||
|
||||
/* Clone first thumbnail, change its class to create the
|
||||
"step-picture" by default and insert it in the parent
|
||||
step */
|
||||
$(this)
|
||||
.clone()
|
||||
.removeClass("thumb")
|
||||
.addClass("large-image")
|
||||
.insertBefore($(this));
|
||||
.removeClass("step-thumb")
|
||||
.addClass("step-picture")
|
||||
.insertBefore($(this).parent());
|
||||
|
||||
/* Make the first thumbnail active by default */
|
||||
$(this).addClass("active");
|
||||
})
|
||||
|
||||
let imageGroups = []
|
||||
$(".lightbox").each(function () {
|
||||
let imageSource = $(this).attr('src')
|
||||
let imageAlt = $(this).attr('alt').replace(/ /g,"")
|
||||
let imageTitle = $(this).attr('alt')
|
||||
if (imageTitle) {
|
||||
imageTitle = 'title="' + imageTitle + '" '
|
||||
}
|
||||
else {
|
||||
imageTitle = ''
|
||||
}
|
||||
$(this).
|
||||
wrap('<a class="boxedThumb ' + imageAlt + '" ' +
|
||||
imageTitle + 'href="' + imageSource + '"></a>')
|
||||
imageGroups.push('.' + imageAlt)
|
||||
})
|
||||
jQuery.unique(imageGroups)
|
||||
imageGroups.forEach(imageGroupsSet)
|
||||
|
||||
function imageGroupsSet (value) {
|
||||
$(value).simpleLightbox()
|
||||
}
|
||||
})
|
||||
|
||||
// Attach a delegate function on mouse over thumbnail
|
||||
$(".thumb").on("mouseover", function() {
|
||||
/* Attach a delegate function on mouse over thumbnail to change the
|
||||
step main picture and radio-toggle the thumbnails */
|
||||
$(".step-thumb").on("mouseover", function() {
|
||||
|
||||
// Set large image source to the thumbnail image source
|
||||
$(this).siblings("img:first")
|
||||
.attr("src", $(this).attr("src"));
|
||||
/* Set picture image source to the thumbnail image source */
|
||||
$(this).closest(".step").find(".step-picture").attr("src", $(this).attr("src"));
|
||||
|
||||
// Activate the corresponding step-thumbnail and deactivate all others
|
||||
/* Activate the corresponding thumbnail and deactivate all others */
|
||||
$(this).addClass("active")
|
||||
.siblings().removeClass("active");
|
||||
});
|
||||
|
||||
@ -1,12 +1,18 @@
|
||||
# Flashing a new micro-SD card
|
||||
|
||||
The following steps describe how to flash a micro-SD card with the latest version of FunKey-OS. This must be done before switching micro-SD cards inside the console.
|
||||
The following steps describe how to flash a micro-SD card with the
|
||||
latest version of FunKey-OS. This must be done before switching
|
||||
micro-SD cards inside the console.
|
||||
|
||||
Note: Everything on the micro-SD card will be lost, be sure to save your data.
|
||||
Note: Everything on the micro-SD card will be lost, be sure to save
|
||||
your data.
|
||||
|
||||
## Download the latest FunKey-OS image file
|
||||
|
||||
Get the latest "***FunKey-rootfs-x.y.z.img***" SD card image file directly from [here](https://github.com/FunKey-Project/FunKey-OS/releases/download/FunKey-OS-2.0.0/FunKey-sdcard-2.0.0.img) or from the bottom of the latest release page in the "assets" section:
|
||||
Get the latest "***FunKey-rootfs-x.y.z.img***" SD card image file
|
||||
directly from
|
||||
[here](https://github.com/FunKey-Project/FunKey-OS/releases/download/FunKey-OS-2.0.0/FunKey-sdcard-2.0.0.img)
|
||||
or from the bottom of the latest release page in the "assets" section:
|
||||
|
||||
<a href="https://github.com/FunKey-Project/FunKey-OS/releases/latest" target="_blank">https://github.com/FunKey-Project/FunKey-OS/releases/latest</a>
|
||||
|
||||
@ -14,15 +20,21 @@ Get the latest "***FunKey-rootfs-x.y.z.img***" SD card image file directly from
|
||||
|
||||
## Flash the micro-SD card with balenaEtcher
|
||||
|
||||
- Download and install balenaEtcher for Windows/Mac OS/Linux from <a href="https://www.balena.io/etcher/" target="_blank">balena.io</a>.
|
||||
- Download and install balenaEtcher for Windows/Mac OS/Linux from <a
|
||||
href="https://www.balena.io/etcher/" target="_blank">balena.io</a>.
|
||||
|
||||
- Run balenaEtcher and click on "Flash from file" to select the FunKey-OS image file
|
||||
- Run balenaEtcher and click on "Flash from file" to select the
|
||||
FunKey-OS image file
|
||||
|
||||
- Insert the micro-SD card in your computer and select the SD card drive (balenaEtcher should automatically detect it for you)
|
||||
- Insert the micro-SD card in your computer and select the SD card
|
||||
drive (balenaEtcher should automatically detect it for you)
|
||||
|
||||
- Finally, click **Flash**
|
||||
|
||||
- You'll see a progress bar. Once complete, **make sure the flashing was successful, otherwise retry to flash the SD card**. The program will automatically unmount the SD card so it's safe to remove it from your computer.
|
||||
- You'll see a progress bar. Once complete, **make sure the flashing
|
||||
was successful, otherwise retry to flash the SD card**. The program
|
||||
will automatically unmount the SD card so it's safe to remove it
|
||||
from your computer.
|
||||
|
||||
{: .lightbox}
|
||||
|
||||
@ -30,19 +42,67 @@ Get the latest "***FunKey-rootfs-x.y.z.img***" SD card image file directly from
|
||||
|
||||
# Switching micro-SD cards
|
||||
|
||||
On the FunKey S, the micro-SD card was voluntarily placed against the casing so that it has no degree of liberty and cannot move by accident during the eventful life of a keychain. Removing/switching the micro-SD card was nevertheless designed to be pretty straightforward and only require a standard **Phillips screwdriver (PH0)**. Please follow the steps below carefully.
|
||||
On the FunKey S, the micro-SD card was voluntarily placed against the
|
||||
casing so that it has no degree of liberty and cannot move by accident
|
||||
during the eventful life of a keychain. Removing/switching the
|
||||
micro-SD card was nevertheless designed to be pretty straightforward
|
||||
and only require a standard **Phillips screwdriver (PH0)**. Please
|
||||
follow the steps below carefully.
|
||||
|
||||
### **STEP 1 - Removing the screws** {: .step-title}
|
||||
{: .step-thumb}
|
||||
{: .step-thumb}
|
||||
{: .step-thumb}
|
||||
|
||||
| **Display** | **Action** |
|
||||
| :----------------------------------------------------------: | :----------------------------------------------------------- |
|
||||
| {: .lightbox width=240}{: .lightbox width=240}{: .lightbox width=240} | **STEP 1 - Removing the screws**<br />Using a standard **PH0 screwdriver**, remove the 2 screws on the back of your FunKey S.<br />Be careful to use the correct screwdriver head size not to damage the screws. |
|
||||
| {: .lightbox width=240}{: .lightbox width=240}{: .lightbox width=240} | **STEP 2 - Opening up the console** <br />Carefully remove:<br />1) The plastic back of the console by pulling from the side of the hinge first.<br />2) The keychain lanyard and axis. <br />3) The L/R plastic buttons by gently pulling them out of their axis. Be careful not to damage the switch on the circuit board. |
|
||||
| {: .lightbox width=240}{: .lightbox width=240} | **STEP 3 - Exposing the circuit board**<br />Pull back the battery (leave it connected) to expose the circuit board. |
|
||||
| {: .lightbox width=240} | **STEP 4 - Accessing the SD card**<br />By grabbing it **by the micro-USB port**, gently pull the circuit board towards you until you have access to the SD card. |
|
||||
| {: .lightbox width=240}{: .lightbox width=240} | **STEP 5 - Switching SD cards**<br />You can now remove the old micro-SD card from its socket and insert the new one (previously flashed as described [in the 1st part of this tutorial](#flashing-a-new-micro-sd-card)). |
|
||||
| {: .lightbox width=240}{: .lightbox width=240} | **STEP 6 - Reassembly**<br />Before putting back down the circuit board in the case, please make sure the speaker on the circuit board is already inserted in the casing. If not, then insert it first like in the pictures.<br /><br />Reassemble the console by following the previous steps backwards.<br /><br />Be careful not to damage the switches on the circuit board when putting back the L/R plastic buttons. |
|
||||
Using a standard **PH0 screwdriver**, remove the 2 screws on the back
|
||||
of your FunKey S.<br />Be careful to use the correct screwdriver head
|
||||
size not to damage the screws.
|
||||
|
||||
### **STEP 2 - Opening up the console** {: .step-title}
|
||||
{: .step-thumb}
|
||||
{: .step-thumb}
|
||||
{: .step-thumb}
|
||||
|
||||
Carefully remove:
|
||||
|
||||
1. The plastic back of the console by pulling from the side of the
|
||||
hinge first.
|
||||
2. The keychain lanyard and axis.
|
||||
3. The L/R plastic buttons by gently pulling them out of their
|
||||
axis. Be careful not to damage the switch on the circuit board.
|
||||
|
||||
### **STEP 3 - Exposing the circuit board** {: .step-title}
|
||||
{: .step-thumb}
|
||||
{: .step-thumb}
|
||||
|
||||
Pull back the battery (leave it connected) to expose the circuit board.
|
||||
|
||||
### **STEP 4 - Accessing the SD card** {: .step-title}
|
||||
{: .step-thumb}
|
||||
|
||||
By grabbing it **by the micro-USB port**, gently pull the circuit
|
||||
board towards you until you have access to the SD card.
|
||||
|
||||
### **STEP 5 - Switching SD cards** {: .step-title}
|
||||
{: .step-thumb}
|
||||
{: .step-thumb}
|
||||
|
||||
You can now remove the old micro-SD card from its socket and insert
|
||||
the new one (previously flashed as described [in the 1st part of this
|
||||
tutorial](#flashing-a-new-micro-sd-card)).
|
||||
|
||||
### **STEP 6 - Reassembly** {: .step-title}
|
||||
{: .step-thumb}
|
||||
{: .step-thumb}
|
||||
|
||||
Before putting back down the circuit board in the case, please make
|
||||
sure the speaker on the circuit board is already inserted in the
|
||||
casing. If not, then insert it first like in the pictures.
|
||||
|
||||
Reassemble the console by following the previous steps backwards.
|
||||
|
||||
Be careful not to damage the switches on the circuit board when
|
||||
putting back the L/R plastic buttons.
|
||||
|
||||
--8<--
|
||||
includes/glossary.md
|
||||
|
||||
@ -1,19 +1,17 @@
|
||||
## Step 1
|
||||
<div class="step">
|
||||
<div class="row step-container">
|
||||
<img class="thumb" src="/assets/images/IMG_8800.jpg" />
|
||||
<img class="thumb" src="/assets/images/IMG_8801.jpg" />
|
||||
<img class="thumb" src="/assets/images/IMG_8802.jpg" />
|
||||
</div>
|
||||
</div>
|
||||
## Step 1 {: .step-title}
|
||||
{: .step-thumb}
|
||||
{: .step-thumb}
|
||||
{: .step-thumb}
|
||||
|
||||
## Step 2
|
||||
<div class="step">
|
||||
<div class="row step-container">
|
||||
<img class="thumb" src="/assets/images/IMG_8803.jpg" />
|
||||
<img class="thumb" src="/assets/images/IMG_8804.jpg" />
|
||||
</div>
|
||||
</div>
|
||||
- You will need a Philips PH0 screwdriver
|
||||
- Insert the screwdriver in the hole
|
||||
- Turn the screwdriver counter-clockwise
|
||||
|
||||
## Step 2 {: .step-title}
|
||||
{: .step-thumb}
|
||||
{: .step-thumb}
|
||||
|
||||
Now all the _screws_ are removed!
|
||||
|
||||
--8<--
|
||||
includes/glossary.md
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user