Wilhelm Faber

Entwicklung der Mobile Apps, Webentwicklung, technischer Blog

2. November 2017
von Ferohs
Keine Kommentare

Ikea TRADFRI mit Alexa steuern

Nachdem es technische Probleme bei der Steuerung der mit seitens Ikea gab, ist am 1. November 2017 ein neuer Update für die TRADFRI App erschienen. Dieser erlaubt nun die Steuerung durch Alexa in dem TRADFRI Gateway freizuschalten. Die notwendigen Updates für die Lampen mit den Versionen 1.2.217 wurde bereits vor Monaten ausgespielt und durch das Gateway an die Geräte verteilt worden. Das Gateway sollte die Firmwareversion 1.2.42 bereits erhalten haben.

Sollte dies nicht der Fall sein, kann man es manuell in der TRADFRI App nachholen.

 

 

 

Was sollte man nun machen, damit es mit der Steuerung durch Alexa tatsächlich funktioniert?

Zuerst sollte die Einstellung in der App aktiviert werden und mit dem Amazon Konto verknüpft werden.

1. Dazu unter Einstellungen auf den Punk "Integration" klicken.

Danach TRADFRI Skill in der Alexa App aktivieren und nach Geräte suchen.

1. Inter dem Menüpunkt Skills sollte der benötigte Sill aktiviert werden

17. Oktober 2017
von Ferohs
Keine Kommentare

Vagrant Box mit Ubuntu 16.04, PHP 5.6 und MySql 5.7

Vagrant file

Vagrant

Vagrant.configure("2") do |config|
  
  # base os box - latest ubuntu LTS
  config.vm.box = "https://cloud-images.ubuntu.com/xenial/current/xenial-server-cloudimg-amd64-vagrant.box"

  config.vm.network "public_network", ip: "192.168.100.53"	
  # Setup port forwarding
  # http
  config.vm.network :forwarded_port, guest: 80, host: 1080, auto_correct: true
  config.vm.network :forwarded_port, guest: 1080, host: 1081, auto_correct: true
  # https
  config.vm.network :forwarded_port, guest: 443, host: 1443, auto_correct: true
  # mysql db 
  config.vm.network :forwarded_port, guest: 3306, host: 1306, auto_correct: true

  # Setup synced folder
  config.vm.synced_folder "/your/path/to/dev/folder", "/var/www", create: true, group: "www-data", owner: "www-data"
  config.vm.synced_folder "init-scripts", "/data", create: true, group: "root", owner: "root"

  # VM specific configs
  config.vm.provider "virtualbox" do |v|
      v.name = "name for your virtual box"
      v.customize ["modifyvm", :id,
          "--memory", "1024",
          "--cpus", "2",
          "--hwvirtex", "on",
          "--accelerate3d", "on",
      ]
  end

  config.vm.provision :shell, :inline => "sudo rm /etc/localtime && sudo ln -s /usr/share/zoneinfo/Europe/Berlin /etc/localtime", run: "always"

  # Shell provisioning
  config.vm.provision "shell" do |s|
      s.path = "init-scripts/setup.sh"
  end
end

Init-Script

./init-scripts/setup.sh

#!/bin/bash

echo "Provisioning virtual machine..."

export LANG=en_US.UTF-8

apt update
apt-get install -y software-properties-common
add-apt-repository ppa:ondrej/php
apt-key adv --keyserver keyserver.ubuntu.com --recv-keys 4F4EA0AAE5267A6C
apt update
apt install -y php5.6 php5.6-bcmath php5.6-bz2 php5.6-cgi php5.6-cli php5.6-common php5.6-curl php5.6-dba php5.6-dev php5.6-enchant php5.6-fpm php5.6-gd php5.6-gmp php5.6-imap php5.6-interbase php5.6-intl php5.6-json php5.6-ldap php5.6-mbstring php5.6-mcrypt php5.6-mysql php5.6-odbc php5.6-opcache php5.6-pgsql php5.6-phpdbg php5.6-pspell php5.6-readline php5.6-recode php5.6-snmp php5.6-soap php5.6-sqlite3 php5.6-sybase php5.6-tidy php5.6-xml php5.6-xmlrpc php5.6-xsl php5.6-zip apache2
apt install -y libapache2-mod-php5.6

echo "apache modules"
a2enmod cache dir rewrite ssl status vhost_alias
a2dismod deflate -f
a2dissite default

mv /data/apache-deverver.conf /etc/apache2/sites-available/
a2ensite apache-deverver.conf
service apache2 restart 

# MySQL 
echo "Preparing MySQL"

export mysqlpw=$(pwgen -s 10 -N 1)
echo "user: root" >> /home/ubuntu/mysql-server-password.txt
echo "pass: ${mysqlpw}" >> /home/ubuntu/mysql-server-password.txt
echo 'mysql-server mysql-server/root_password password ${mysqlpw}' | debconf-set-selections
echo 'mysql-server mysql-server/root_password_again password ${mysqlpw}' |  debconf-set-selections  

echo "Installing MySQL"
apt install -y mysql-server

echo "phpmyadmin phpmyadmin/internal/reconfiguring boolean false" | debconf-set-selections
echo "phpmyadmin phpmyadmin/dbconfig-reinstall boolean false" | debconf-set-selections
echo "phpmyadmin phpmyadmin/dbconfig-install boolean false" | debconf-set-selections
echo "phpmyadmin phpmyadmin/internal/skip-preseed boolean true" | debconf-set-selections
echo "phpmyadmin phpmyadmin/reconfigure-webserver multiselect apache2" | debconf-set-selections

apt-get install -y phpmyadmin

echo "Finished provisioning."

Config for Virtual Hosts

./init-scripts/apache-deverver.conf

<VirtualHost *:80>
        ServerAdmin info@sample.de
        ServerName project.localhost
        ServerAlias *.project.localhost project.localhost
        DocumentRoot /var/www/project/htdocs/
        # Possible values include: debug, info, notice, warn, error, crit,
        # alert, emerg.
        LogLevel warn
        CustomLog ${APACHE_LOG_DIR}/project_access.log combined
        ErrorLog ${APACHE_LOG_DIR}/project.log

  <Directory "/var/www/project/htdocs">
        Options Indexes FollowSymlinks
        AllowOverride All
       Require all granted
  </Directory>
</VirtualHost>

1. August 2017
von Ferohs
Keine Kommentare

Deine erste React-Webanwendung, Crashkurs!

1. Verzeichnisstruktur

2. Init und Install

Initialisieren eines Projektes


npm init

Press ^C at any time to quit.
package name: (probe)
version: (1.0.0)
description: first app
entry point: (index.js)
test command:
git repository:
keywords:
author: Wilhelm Faber
license: (ISC)
About to write to /Users/foo/Desktop/Probe/package.json:

{
„name“: „probe“,
„version“: „1.0.0“,
„description“: „first app“,
„main“: „index.js“,
„scripts“: {
„test“: „echo \“Error: no test specified\“ && exit 1″
},
„author“: „Wilhelm Faber“,
„license“: „ISC“
}

Installieren von react und react-dom


npm install --save react react-dom

Installieren von Übersetzern


npm install --save babel-core babel-loader babel-preset-es2015 babel-preset-react

Installieren von webpack


npm install --save webpack@3

3. Erste Komponente

/Probe/app/components/MainComponent.js

1
2
3
4
5
6
7
8
9
10
11
12
13
import React from 'react';
import ReactDOM from 'react-dom';
 
class MainComponent extends React.Component {
    render () {
        return (
          <div>
            <div>Hallo world</div>
          </div>
        ) 
    }
} 
ReactDOM.render(, document.getElementById('app'));
import React from 'react';
import ReactDOM from 'react-dom';

class MainComponent extends React.Component {
    render () {
        return (
          <div>
            <div>Hallo world</div>
          </div>
        ) 
    }
} 
ReactDOM.render(, document.getElementById('app'));

4. Webpack-Konfiguration

/Probe/webpack.config.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
module.exports = {
    entry : './app/components/MainComponent.js',
    output : {
        filename: 'public/bundle.js'
    },
    module: {
        loaders: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel-loader',
                query: {
                    presets: ['es2015', 'react']
                }
            }
        ]
    }
}
module.exports = {
	entry : './app/components/MainComponent.js',
	output : {
		filename: 'public/bundle.js'
	},
	module: {
		loaders: [
			{
				test: /\.js$/,
				exclude: /node_modules/,
				loader: 'babel-loader',
				query: {
					presets: ['es2015', 'react']
				}
			}
		]
	}
}

5. Bindung an die Ausgabe

/Probe/public/index.html

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"></meta>
        <title>React</title>
    </head>
    <body>
        <div id="app"></div>
        <script src="bundle.js"></script>
    </body>
</html>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"></meta>
        <title>React</title>
    </head>
    <body>
        <div id="app"></div>
        <script src="bundle.js"></script>
    </body>
</html>

6. Ausführen


webpack -w

Nun die index.html mit dem Chrome Browser öffnen und das Ergebnis beurteilen 🙂

9. September 2015
von Ferohs
Keine Kommentare

Picasso, Open Source Library für Android

Picasso, Open Source Library im Bezug auf das Laden, Cachen und Anzeigen der Bilder im Hintergrund.

http://square.github.io/picasso/

1
2
3
4
5
6
7
8
Picasso.with(context)
       .load(url)
       .placeholder(R.drawable.placeholder)
       .error(R.drawable.ic_error_fallback)
       .resize(imgWidth, imgHeight)
       .centerCrop()       
       .rotate(90)
       .into(image);
Picasso.with(context)
       .load(url)
       .placeholder(R.drawable.placeholder)
       .error(R.drawable.ic_error_fallback)
       .resize(imgWidth, imgHeight)
       .centerCrop()       
       .rotate(90)
       .into(image);

Siehe auch:

Universal Image Loader
Volley
UrlImageViewHelper

19. Juni 2015
von Ferohs
Keine Kommentare

Vertikale Positionierung eines Divs in einem anderen Div

Gute Beschreibung mit 3 Ansätzen wird hier beschrieben.

Ich bevorzuge folge Lösung, dabei müssen folgende Punkt beachtet werden:

– divs müssen Block-Elemnte sein. Der innere Div inline-block
– line-height des äußeren Divs muss genau groß wie die Höhe sein

1
2
3
4
5
6
7
8
.block {
  height: 120px;
  line-height: 120px;
}
.inner {
  display: inline-block;
  vertical-align: middle;
}
.block {
  height: 120px;
  line-height: 120px;
}
.inner {
  display: inline-block;
  vertical-align: middle;
}

27. März 2014
von Ferohs
Keine Kommentare

Teiltransparente Flächen unter Android

Beispiel <TextView android:background=“#AARRGGBB“>…</TextView>

AA – Alphakanal

Hex Opacity Values:
100% — FF
95% — F2
90% — E6
85% — D9
80% — CC
75% — BF
70% — B3
65% — A6
60% — 99
55% — 8C
50% — 80
45% — 73
40% — 66
35% — 59
30% — 4D
25% — 40
20% — 33
15% — 26
10% — 1A
5% — 0D
0% — 00
—————————-

RR – red

GG – green

BB – blue

bedeutet, dass die weiße Hintergrund mit 60%-tiger Transparenz folgendermassen angegeben wird: #99FFFFFF

1. Februar 2014
von Ferohs
Keine Kommentare

Nettorechner 2014

Nettorechner geht in die nächste Runde und hat ein Update für das Jahr 2014 erfahren. Die App wartet auf die Freigabe und ist hoffentlich bald verfügbar.

7. Januar 2014
von Ferohs
Keine Kommentare

FF-OS möchte Smart-Tv erobern

Laut heise.de möchte FF-OS Smart-Tv erobern. Dazu habe ich einen klaren Statement: „Nein, danke!“. Es reicht ja schon, dass mein Rechner hängt sobald FireFox sich 2Gb Ram wegen schlechten Speicherverwaltung reserviert. Da kann ich auf meinem Tv darauf ruhig verzichten 🙂

19. Dezember 2013
von Ferohs
2 Kommentare

Typo3, width und height Attribute bei den Bildern entfernen.

Bilder aus dem gepflegten Kontent werden vorgerechnet und mit Attributen „width“ und „height“ vorgesehen. Dies stört bei der Erstellung der Responsive-Templates.

Eine Lösung hierzu ist das entfernen der Attribute. Dies ist mit dem folgenden TypoScript möglich:

1
2
3
4
5
6
7
8
9
10
11
12
tt_content.image.20.stdWrap.parseFunc.nonTypoTagStdWrap.HTMLparser.tags.img.fixAttrib {
  width.unset = 1
  height.unset = 1
}
tt_content.textpic.20.stdWrap.parseFunc.nonTypoTagStdWrap.HTMLparser.tags.img.fixAttrib {
  width.unset = 1
  height.unset = 1
}
lib.parseFunc_RTE.nonTypoTagStdWrap.HTMLparser.tags.img.fixAttrib {
  width.unset = 1
  height.unset = 1
}
tt_content.image.20.stdWrap.parseFunc.nonTypoTagStdWrap.HTMLparser.tags.img.fixAttrib {
  width.unset = 1
  height.unset = 1
}
tt_content.textpic.20.stdWrap.parseFunc.nonTypoTagStdWrap.HTMLparser.tags.img.fixAttrib {
  width.unset = 1
  height.unset = 1
}
lib.parseFunc_RTE.nonTypoTagStdWrap.HTMLparser.tags.img.fixAttrib {
  width.unset = 1
  height.unset = 1
}

14. Dezember 2013
von Ferohs
Keine Kommentare

Gingerbread ist wie IE7 und will einfach nicht sterben

Interessante Statistik über die Nutzung der Androidversionen findet man auf der Developersseite.

Dashboards  Android Developers

 

Die 2.3.* Version scheint tatsächlich viel genutzt zu werden und ist einfach nicht tot zu kriegen. Ich vermutte stark, es sind noch die alten Samsunggeräte wie Galaxy S oder Galaxy S Plus.

Ich muss an dieser Stelle zugeben, dass auch ich im Besitzt eines Galaxy S Plus bin. Allerdings läuft da schon längst ein Cyanogenmod. Und wenn es nicht der kleine Ram von 512 Mb wäre, wäre ich mit dem Gerät noch super zufrieden 🙂

Free Google Page Rank

Social Widgets powered by AB-WebLog.com.