Bluetooth sensor mesh

Idea: Create bluetooth mesh from bunch of env. sensors (doors, windows, temperature, humidity, move sensors, buttons) connected to hub.

Bluetooth mesh

Bluetooth buttons

Sensors

BEE280/BME680: Integrated environmental sensors

nRF52 / nRF51 / Bluetooth

Bluetooth 5

#iot#bluetooth#2018

Create tar from all folders

Follow commands create tar archives folder by folder into their own tar - so folder becomes folder.tar

Compressed archive

find . -type d -maxdepth 1 -mindepth 1 -exec tar zcvf {}.tar.gz {} \;

Un-coompressed archive

find . -type d -maxdepth 1 -mindepth 1 -exec tar cvf {}.tar {}  \;

#bash#tar#2018

MariaDB and Docker Compose

This is a short instructions how to run MariaDB Docker with docker compose and have suitable developer env.

Let's have follow docker-compose.yml and two folders ./etc/db and ./data

version: '3.3'

services:

  mariadb:
    image: mariadb:latest
    environment:
      TZ: Europe/Prague
      MYSQL_ROOT_PASSWORD: root
      MYSQL_DATABASE: exampledb
    restart: always
    volumes:
      - ./etc/db:/db # shared DB folder
      - ./data/mysql:/var/lib/mysql # database data
      - ./etc/mysql.ini:/etc/mysql/conf.d/my.ini # config file
      - ./etc/db/init.sh:/docker-entrypoint-initdb.d/init.sh # init
    ports:
      - 3306
# php-fpm:
# nginx:
# ...

Optionally you can define database with config file - here is mine ./etc/mysql.ini:

[mysqld]
character-set-server=utf8
collation-server=utf8_czech_ci

Initializing a fresh instance

Most important is env - with MYSQL_ROOT_PASSWORD and MYSQL_DATABASE variable. When a container is started for the first time it will execute files with extensions .sh, .sql and .sql.gz that are found in /docker-entrypoint-initdb.d. Lets have follow ./etc/db/init.sh script:

#!/bin/bash
if [ -f /db/$MYSQL_DATABASE.sql ]; then
  mysql --protocol=socket -uroot -p -p"$MYSQL_ROOT_PASSWORD" $MYSQL_DATABASE < /db/$MYSQL_DATABASE.sql
fi

This init.sh script execute content of sql file with same name as database. This solution helps you run your project without worrying about init data. You can commit this file to git and share with all coworkers.

Now it's time run docker-compose up

Connect to database prompt

docker-compose exec \
 mariadb bash -c 'mysql -u root -p$MYSQL_ROOT_PASSWORD $MYSQL_DATABASE'

Backup database to SQL file

docker-compose exec \
 mariadb bash -c 'mysqldump -u root --password=$MYSQL_ROOT_PASSWORD  $MYSQL_DATABASE > /db/$MYSQL_DATABASE.sql'

Restore database from SQL file

docker-compose exec \
mariadb bash -c 'mysql -u root -p$MYSQL_ROOT_PASSWORD $MYSQL_DATABASE < /db/$MYSQL_DATABASE.sql'

Execute mysql_upgrade after upgrade

docker-compose exec mariadb bash -c 'mysql_upgrade -uroot -proot'

#2018

iMessage like Chat Bubbles with CSS and SVG

HTML code

<article>
  <p class="from-me last">Hi there! What's up?</p>
  <p class="to-me last">Hi, how is it going?!</p>
  <p class="from-me">It's pretty cool!</p>
  <p class="from-me last">Check out this bubble!</p>
</article>

CSS code

* {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 1rem;
    font-weight: normal;
    line-height: 1.5;
}

article {
  padding:20px;
  justify-self: center;
  align-self: center;
  text-align: left;
  display: flex;
  flex-direction: column;
  width: 450px;
}

article p {
  font-size: 16px;
  line-height: 1.4;
  margin: 1px 0;
  padding: 8px 17px 6px 13px;
  max-width: 380px;
  position: relative;
  border-radius: 18px;
}

article p:after {
  position: absolute;
  content: "";
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: -1;
}

article p.from-me {
  color: white;
  align-self: flex-end;
  background-color: #1084ff;
}

article p.from-me.last:after {
  
  background: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' width='15.515px' height='17.5px' viewBox='32.485 17.5 15.515 17.5' enable-background='new 32.485 17.5 15.515 17.5'><path fill='#1084FF' d='M48,35c-7-4-6-8.75-6-17.5C28,17.5,29,35,48,35z'/></svg>") right bottom no-repeat;
  right: -6px;
}

article p.to-me {
  color: black;
  align-self: flex-start;
  background-color: #E5E5EA;
}

article p.to-me.last:after {
  background: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' width='15.515px' height='17.5px' viewBox='32.484 17.5 15.515 17.5' enable-background='new 32.484 17.5 15.515 17.5'><path fill='#E5E5EA' d='M38.484,17.5c0,8.75,1,13.5-6,17.5C51.484,35,52.484,17.5,38.484,17.5z'/></svg>") left bottom no-repeat;
  left: -6px;
}

#iOS#HTML#CSS#2017

iOS like on/off switch button with CSS and HTML

Out there is multiple solution of iOS like on/off switch button, but:

  • none of them have that simple HTML as mine
  • none of them is pixel perfect (ok some are :-) but)
  • there is usually missing disabled status
  • they look slightly different then switch on iOS
  • they do not have labels on left side

HTML code

<label class="switch">
  <input type="checkbox">
  <span>This is checkbox label</span>
</label>

SCSS code

$size: 20px;

div {
  max-width:320px;
  margin: 60px auto;
  background: #fff;
  padding:30px 30px 10px 30px;
  border:1px solid #ddd;
}

.switch {
  position: relative;
  display: block;
  padding-bottom: 20px;
  text-align:left;

  input {
    display: none;
  }

  span:after, span:before {
    position: absolute;
    cursor: pointer;
    content: '';
  }
  
  span:before {
    background-color: #f5f5f5;
    border: 1px solid rgba(0, 0, 0, .1);
    transition: .4s;
    border-radius: 10 * $size;
    width: 2 * $size;
    height: $size;
    right: 0;
  }

  input:checked + span:before {
    background-color: #89c31a;
  }

  input:disabled + span:before {
    background-color: #b9b9b9;
  }
  
  span:after {
    width: $size;
    height: $size;
    background-color: #fff;
    border-radius: 50%;
    transition: .2s;
    box-shadow: 1px 1px 3px rgba(0, 0, 0, .5);
    top: 1px;
    right: $size;
  }

  input:checked + span:after {
    transform: translateX($size);
  }

  input:disabled + span:after {
    background: rgba(255, 255, 255, .6);
  }
}

#iOS#CSS#HTML#2017

Timelapse image capture

apt-get install fswebcam

Capture cron from camera from 5 AM to 7 PM every day:

crontab -e

add follow line

*  5-19 * * * fswebcam --jpeg 95 -r 1024x768 -S 100 --no-banner /home/images$

you can also share every xxx image via twitter or something

59  5-19 * * * tweet it...

Generate timelapse video from all images:

ffmpeg -framerate 30 -pattern_type glob -i 'images/*.jpeg' -vcodec libx264 video.mp4

#bash#ffmpeg#2017

Git clone all branches and tags at once

Follow script clone all branches and tags at once:

#!/bin/bash
git fetch --all --tags
for branch in `git branch -r --format="%(refname:short)" | sed 's/origin\///'`
  do git branch -f --track "$branch" "origin/$branch"
done

Single line version:

git fetch --all --tags; for branch in `git branch -r --format="%(refname:short)" | sed 's/origin\///'`; do git branch -f --track "$branch" "origin/$branch" ; done ;

Motivation?

This command is super usefull when you need copy repo between remotes:

git remote add alternative git@github.com:....git 

Check if is there another remote:

git remote -v
> origin	git@github.com:.../....git (fetch)
> origin	git@github.com:.../....git (push)
> alternative	git@github.com:.../....git (fetch)
> alternative	git@github.com:.../....git (push)

Push all changes to alternative remote

git push alternative --all # push all braneches
git push alternative --tags # push all tags

#bash#git#2017