opensensemap/blockly-app
1
0
Fork 0
mirror of https://github.com/sensebox/blockly-app synced 2025-07-05 14:00:21 +02:00
Code Issues Releases Wiki Activity

added instruction gifs to the ota wizard

Browse source
This commit is contained in:
Thiemann96 2020-03-11 00:49:39 +01:00
parent 2ac250c837
commit c7c70d30dd
7 changed files with 28 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
src/app/app.scss
View file

@ -58,3 +58,4 @@ code {
background-color: #f9f2f4; background-color: #f9f2f4;
border-radius: 4px; border-radius: 4px;
} }

BIN
src/assets/imgs/ota_modus.gif Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 10 MiB

BIN
src/assets/imgs/wifiselection.gif Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 7.3 MiB

2
src/pages/configuration/configuration.html
View file

@ -23,7 +23,7 @@
</ion-item> </ion-item>
<ion-item> <ion-item>
<ion-label>{{'Password'|translate}}</ion-label> <ion-label>{{'Password'|translate}}</ion-label>
<ion-input [(ngModel)]="pw" ></ion-input> <ion-input type="password" [(ngModel)]="pw" ></ion-input>
</ion-item> </ion-item>
</ion-card-content> </ion-card-content>
</ion-card> </ion-card>

6
src/pages/error/error.html
View file

@ -1,9 +1,3 @@
<!--
Generated template for the ErrorPage page.
See http://ionicframework.com/docs/components/#navigation for more info on
Ionic pages and navigation.
-->
<ion-header> <ion-header>
<ion-navbar> <ion-navbar>

30
src/pages/ota-wizard/ota-wizard.html
View file

@ -42,16 +42,17 @@
<ion-row align-items-center> <ion-row align-items-center>
<ion-col col-12 col-md-6> <ion-col col-12 col-md-6>
<h2 translate>OTAWIZ.OTAMODE.TITLE</h2> <h2 translate>OTAWIZ.OTAMODE.TITLE</h2>
<img class="tutorial_gif" src="../../assets/imgs/ota_modus.gif" />
<p [innerHTML]="'OTAWIZ.OTAMODE.TEXT' | translate"></p> <p [innerHTML]="'OTAWIZ.OTAMODE.TEXT' | translate"></p>
<p translate>OTAWIZ.OTAMODE.STEPS</p>
</ion-col>
<ion-col col-12 col-md-6>
<ol style="text-align: left"> <ol style="text-align: left">
<li [innerHTML]="'OTAWIZ.OTAMODE.STEP1' | translate"></li> <li [innerHTML]="'OTAWIZ.OTAMODE.STEP1' | translate"></li>
<li [innerHTML]="'OTAWIZ.OTAMODE.STEP2' | translate"></li> <li [innerHTML]="'OTAWIZ.OTAMODE.STEP2' | translate"></li>
<li [innerHTML]="'OTAWIZ.OTAMODE.STEP3' | translate"></li> <li [innerHTML]="'OTAWIZ.OTAMODE.STEP3' | translate"></li>
</ol> </ol>
</ion-col>
<ion-col col-12 col-md-6>
<!-- @TODO: diagram! --> <!-- @TODO: diagram! -->
<button ion-button large clear icon-end color="primary" (click)="slides.slideNext()"> <button ion-button large clear icon-end color="primary" (click)="slides.slideNext()">
{{ 'OTAWIZ.BTN_NEXT' | translate }} {{ 'OTAWIZ.BTN_NEXT' | translate }}
@ -93,14 +94,21 @@
<ion-slide id="wifi-slide"> <ion-slide id="wifi-slide">
<ion-grid> <ion-grid>
<div id="wifi-manual" *ngIf="state.wifiSelection == 'manual'"> <div id="wifi-manual" *ngIf="state.wifiSelection == 'manual'">
<h2 translate>OTAWIZ.WIFI.MANUAL.TITLE</h2> <ion-row align-items-center>
<p translate>OTAWIZ.WIFI.MANUAL.TEXT</p> <ion-col col-12 col-md-6>
<button ion-button large clear icon-end color="primary" (click)="slides.slideNext()"> <h2 translate>OTAWIZ.WIFI.MANUAL.TITLE</h2>
{{ 'OTAWIZ.BTN_NEXT' | translate }}
<ion-icon name="arrow-forward"></ion-icon>
</button>
</div>
<img src="../../assets/imgs/wifiselection.gif" class="tutorial_gif"/>
<p translate>OTAWIZ.WIFI.MANUAL.TEXT</p>
</ion-col>
<ion-col col-12 col-md-6>
<button ion-button large clear icon-end color="primary" (click)="slides.slideNext()">
{{ 'OTAWIZ.BTN_NEXT' | translate }}
<ion-icon name="arrow-forward"></ion-icon>
</button>
</ion-col>
</ion-row>
</div>
<ion-row id="wifi-automatic" *ngIf="state.wifiSelection != 'manual'"> <ion-row id="wifi-automatic" *ngIf="state.wifiSelection != 'manual'">
<ion-col col-12 col-md-6> <ion-col col-12 col-md-6>
<ion-icon class="hidden-xs hidden-sm" name="wifi" style="font-size: 160px"></ion-icon> <ion-icon class="hidden-xs hidden-sm" name="wifi" style="font-size: 160px"></ion-icon>

5
src/pages/ota-wizard/ota-wizard.scss
View file

@ -5,6 +5,11 @@ page-ota-wizard {
background: map-get($colors, primary); background: map-get($colors, primary);
} }
.tutorial_gif {
border-radius: 25px;
box-shadow: 10px 10px 8px #888888;
}
ion-slide { ion-slide {
h4 { h4 {
margin-bottom: 40px; margin-bottom: 40px;