Bootstrap and tinyMCE examples

Bootstrap и tinyMCE са ми редовна комбинация. И за да не откривам топлата вода всеки път, ще постна малко подсетки с прост мой плъгин за tinyMCE.
Важно е да се промени javascript променливата current_host.
Bootstrap 3 and tinyMCE editor - examples
Demo
Download

Обединяване на хоризонтално и вертикално позиционирано видео с ffmpeg

Понякога правя върховната глупост да снимам видео с телефона, като го държа вертикално. После се усещам и го завъртам както си трябва и правя още едно видео. А накрая ми се иска да ги обединя. Намирането на безплатен софтуер, който да слива подобен тип вертикално и хоризонтално разположени видео файлове ме затрудни. За това се върнах отново към класиката ffmpeg.

Стъпките за обединяване на 2 подобни видео файла са следните:

  • двата файла трябва да са с едни и същи кодеци
  • конвертиране на 2-та файла до TS-формат
  • напасване на двата файла по широчина и височина, като се добавя padding (отстояния) в картината на файла, сниман вертикално
  • обединяване на двата файла

Ще си помогна с един пример:

ffmpeg video join - vertical and horisontal

video1.mp4 – хоризонтално разположено с размери на картината 1920×1080.
video2.mp4 – вертикално разположено с размери на картината 1080×1920.
out_full.mp4 – изходния файл, след обединяването на двата

Използвам по-долните команди за ffmpeg са тествани под Win7, но вероятно ще работят и под Linux.

1
2
3
4
ffmpeg -i video1.mp4 -q 1 -f mpegts out1.ts
ffmpeg -i video2.mp4 -q 1 -vf "scale=iw*min(1920/iw\,1080/ih):ih*min(1920/iw\,1080/ih),pad=1920:1080:(1920-iw)/2:(1080-ih)/2" -f mpegts out2.ts
 
ffmpeg -i "concat:out1.ts|out2.ts"  -c:a aac -b:a 128k -vcodec libx264 -preset slow out_full.mp4

Snowman – Blender 3D

Тъй като тази Коледа няма сняг и на мен и дъщеря ми ужасно ни липсва, решихме да си нарисуваме поне снежен човек.
Весели празници на всички!
Blender 3D - snowman

Сорс файл: Snejen_chovek-blender.zip
Рендер: GPU, Cycles render

Безжично сваляне и качване на файлове от и към телефона – видео урок

Тъй като локалната мрежа в къщи е малко сложно изградена, ще споделя каква техника ползвам, за да запазвам снимки, клипчета и други файлове от телефоните, а и за да си качвам музика, филмчета, карти за GPS и т.н. Мрежата ми е изградена от един кабелен рутер към който са вързани директно PC и Wi-Fi рутер. Ако PC-то ми беше вързано към Wi-Fi рутера, почти нямаше да има смисъл от тази статия, защото можех да обменям файлове директно с IE. В случая се налага да ползвам FTP-сървар, който осигурява достъпа. За пример ще кача на телефона музикална класация top 100 на Billboard за 2017 – свалял съм я от някакъв торент.

Необходими инструменти:

  • Baby FTP Server за Windows. Може да се ползва и друг FTP-сървар, но този е толкова прост и стабилен, че няма да отварям дума за други варианти. Дори не се инсталира, а само се накликва едно exe.
  • ES File Explorer File Manager – файлов експлорер за Android, набъкан яко с всякакви инструменти, включително текстов редактор и простички медиа-плеъри. Но най-вече защото има една каруца варианта за връзка с други устройства, като аз ще ползвам FTP-клиента. Това се вижда и на видеото по-долу.

Стартира се exe-то на Baby FTP Server от компютъра, след това виждате кое ви е локалното IP за вътрешната мрежа – през него излъчва FTP-сървъра и ще е необходимо при настройването на FTP-клиента от телефона. FTP-протокола обикновено слуша на порт 21.
След това се инсталира Es File Explorer на телефона (таблета, телевизора или каквато там пущина ползвате) и си стартирате FTP-клиента. Не забелязах някаква разлика в пасивния и активния режим за ftp, така че може би няма значение. Избира се опцията Anonymous, защото BabyFTP е доволно прост, той просто дава достъп до всякакви анонимници и лентяи в локалната мрежа.

Това е видео урока, за това как безжично да си обменяте файлове между телефона и компютъра:

ПС: Shift + RMB – означава да натиснете SHIFT на клавиатурата и след това десния бутон на мишката, така се вика command prompt на Winblows в текущата директория.

Конвертиране на видео до webm, ogv, mp4, mkv – Ned Video Converter

Ned video converter - ogv, webm, mp4
Беше ми необходима проста програма за конвертиране на видео до webm и ogg video (ogv), която да ми позволява пълен контрол на изходния файл. Тъй като не намерих такава безплатна, освен конзолния ffmpeg, реших да спретна едно GUI за ffmpeg с просто кодиране в AutoIt. Чудих се за името на програмата и реших да не се правя на оригинален, затова е Ned video converter.
Програмата в момента конвертира до webm, avi, ogv, mp4, flv и mkv. Но позволява да се стартира кодиране до всякакъв формат, ако познавате инструментите на ffmpeg. Стартирането на процеса взима стринга от полето Command и така могат ръчно да се променят всички параметри. Например можем да зададем ръчно команда за конвертиране на видео до mp3-файл, като в полето Command въведем следния тринг:

ffmpeg -i <input> -c:a libmp3lame -b:a 256k -vn -f mp3 some_audio_file.mp3

Ned video converter - mp3
Разбира се ръчните настройки са само опционални, спокойно могат да се ползват вградените скромни опции на GUI-то.
Важно е да се отбележи, че при ресайзване на видео по широчина, тогава височината се променя в съотношение, за това зададената височина трябва да е кратна на 2. Това е причината понякога ресайването да не работи. Просто се въвежда нова стойност на широчината, увеличена или намалена с +1 (примерно 600 не работи, тогава се пробва с 601, 602 и т.н.) и се натиска бутона Generate Command.
Ако файловете се получават големи или с недобро качество е добре да се попрочете документацията на ffmpeg. Параметрите за конвертиране могат да се променят и от външния ini-файл, така че да паснат на конкретните нужди.
Прилагам и сорса, който е доволно прост. Отделил съм GUI-частта и фукциите от основния файл, за да има по-добра четимост.
При конжертиране на avi и mkv (matroska) съм задал да се използва параметъра -crf за контрол на качеството. По принцип за запазване на качеството, каквото е във входния файла, параметъра се сетва на -crf 23. За по-малък файл и по-лошо качество може да се остави на -crf 25 или повече. За по-добро качество на картината може да се пробва с -crf 19.
Сорса е абсолютно свободен за ползване, променяне, споделяне.
Изтегляне за 32 и 64bit Windows:
Ned_video_converter-32bit-0.02.zip
Ned_video_converter-64bit-0.02.zip
Ако има проблеми с програмката, моля да ги споделите в коментарите.
По-долу може да се види кратко видео с примерно конвертиране до webm и mp4 формати. Видеото е конвертирано до тези формати, за да мога да го вградя в тази страница. Видеото, което конвертирам е свален от YouTube клип Camila Cabello – Havana ft. Young Thug.

Kodi 17.4 – Гледане на български ТВ канали

Преди време бях постнал статия за гледане на български ТВ-канали с Kodi в комбинация с добавката Free BGTVs, която позволява да се гледа БТВ, Канал 1, Нова ТВ и други популярни български ТВ канали. Но тъй като версиите и хранилищата доста се промениха, реших да публикувам още един по-обновен туториал.
Ще опиша как се прави ръчно добавяне на необходимите добавки (add-ons), защото ми се струва доста по-лесно отколкото да се добавят репозиторита и да се търси добавка в тях.
Изтегля се последната стабилна версия на Kodi от официалния сайт или се инсталира през сторето, което ползва мобилното ви устройство. В моя случай аз изтеглих десктоп версията kodi-17.4-Krypton-x86.exe. След което програмата (или app-а) се инсталира.
Изтеглят се следните две добавки:
repo.bg.plugins-1.0.0.zip
plugin.video.free.bgtvs-2.3.2.zip
Възможно е в момента, когато четете този туториал, да са се появили нови версии на двете добавки, така е добре да направите проверка. Аз изтеглих добавките от този сайт: http://kodi-addons.club/.
След това стартираме Kodi и както сме в Home-скрийна кликаме на бутона за настройките:
Kodi 17.4 Krypton - home screen
Избираме System settings:
Kodi 17.4 Krypton - System settings
Избираме от менюто Add-ons и в ляво включваме опцията Unknown sources:
Kodi 17.4 Krypton - unknown sources ON
Връщаме се на Home-скрийна на Kodi и избираме Add-ons:
Kodi 17.4 Krypton - home-addons
В секцията Add-ons избираме бутона за пакетите горе в ляво:
Kodi 17.4 Krypton - add-ons
Алед като ни се отвори Add-on browser избираме бутона Install from zip file:
Kodi 17.4 Krypton - install from zip file
Селектираме файла repo.bg.plugins-1.0.0.zip, за да го инсталираме:
Kodi 17.4 Krypton - repo.bg.plugins-1.0.0.zip
След като се инсталира, кликаме на файла plugin.video.free.bgtvs-2.3.2.zip, за да инсталираме и него:
Kodi 17.4 Krypton - plugin.video.free.bgtvs-2.3.2.zip
Връщаме се в home-скрийна на Kodi и избораме Add-ons. Ако всичко е минало наред, ще се появи бутон с добавката Free.BGTVs.

На видеото по-долу може да се видя стъпките за инсталиране на добавките:

Bootstrap 3 – custom menu, fixed bottom, header, back to top

В програмирането има едно правило, което перефразирано гласи да не търсиш топлата вода всеки път. За това качвам няколко базови кода за Bootstrap 3, които съм писал или копирал и променял. Помогнал съм си леко с Less за някои стилове.

Custom menu
Нищо ново. Добавено е само малко CSS-кодиране на менюто, което се предлага стандартно с Bootstrap.

Bootstrap 3- custom menu

Bootstrap 3- custom menu

Демо

Header
Напаснал съм отделните слоеве с помощта на Boostrap стиловете col-*-push и col-*-pull, така че да има приличен респонзив.

Bootstrap 3- header

Bootstrap 3- header

Bootstrap 3- header

Демо

Fixed bottom
Фиксиран фуутер за мобилни устройства – особено полезно при писане на мобилно приложение, базирано на HTML.

Bootstrap 3- fixed bottom

Bootstrap 3- fixed bottom

Демо

Back to top бутон
Клиентите често искат подобна опция. Кода е няколко реда и има и малко JavaScript, освен CSS-а.

Bootstrap 3- back to top

Демо

Допълнително в архива съм добавил и Bootstrap 3 – login form.

Изтегляне на кода: header_menu_fixed-bottom_back-to-top_login-form.zip

===============
Добавям и още 2 вертикални менюта

Bootstrap 3 – Drop Down menu – only CSS
Bootstrap 3 - CSS Drop Down menu - CSS_only
Демо
Изтегляне

Bootstrap 3 – Drop Down menu – CSS and JavaScript
Bootstrap 3 - CSS Drop Down menu - CSS and JS
Демо
Изтегляне

===============
Bootstrap 3 – h-background line – CSS only

bs3 - horizontal backgrounnd line
Demo
Download

Benjie S5 – бюджетен HiFi mp3-player

BENJIE S5 8G APE/FLAC/WAV High Sound Quality Entry-level Lossless Music Player
Тази малка джаджка Benjie S5 ми носи много радост вече няколко месеца и с удоволствие ще и отделя няколко реда. Това е китайски бюджетен HiFi mp3 плеър от нисък клас за около $20, който обаче е сериозен конкурент на доста по-скъпи модели. Benjie S5 е копие 1:1 на друг китайски плеър AGptek M20. Не знам каква е идеята на китайците да продават едно устройство под 2 марки, но може би така печелят повече. Убеден съм, че и вътрешностите и функциите ще са еднакви.
Характеристиките на устройството са следните.

Описание

  • Entry-level Lossless
  • Professional sound quality
  • Blind-operation
  • 1mm рамка
  • Вградена 8G памет (TF card: Max 64GB)
  • 1 inch дисплей
  • Метално тяло
  • FM радио
  • Folder Plays
  • HD запис
  • EBook
  • Song Lyrics

Спецификации

  • Модел: BENJIE S5
  • Тяло: метално
  • MP3 bit rates: 8-320Kbps
  • Плейбек: около 58 часа непрекъснат плейбек
  • Bit rate на запис: 5-384Kbps
  • Поддържани формати: MP3 / APE /FLAC/ WAV/ WMA/OGG
  • USB свързване: Efficient 2.0USB
  • Живот на батерията при запис: 30 часа непрекъснат запис
  • Вградена батерия: lithium polymer
  • Формат на записа: MP3, WAV
  • Чип: Action 2127s
  • Изход на слушалки: 16-128??
  • Тип на дисплея: OLED
  • Размер на екрана: 1 inch
  • Размери: 7.5×3.1×0.9cm
  • Микрофон: dual microphone stereo surround
  • Тегло: 51g

Качеството на звука е доста добро. Определено превъзхожда останалите ми mp3 плеъри (Sansa Clip/ Sansa Zip) и телефони (Moto G, Xiaomi Mi 3). FM хваща отлично, дори и със скапани слушалки. Поддържа Folder View и има четец на текст. Размера е прилично малък и се побира в малкото джобе на дънките. Естествено има и недостатъци, които много ме дразнят.

Турбо недостатъци

  • Не поддържа потребителски EQ
  • Не записва радио
  • Липсва клип за закачане на джоба

Моята бройка я закупих от някаква промоция март месец на Gearbest за $19.40. В момента гледам, че е на цена от $23.55 с безплатна доставка. Това също е добра цена за този плеър.
В момента ползвам плеъра със супер ефтини китайски слушалки QianYun Qian25 клонинг на Sennheiser MX500.
BENJIE S5 8G APE/FLAC/WAV High Sound Quality Entry-level Lossless Music Player
Слушалките определено си заслужават парите от $5-$6. До скоро го ползвах с AKG нещо си, но китайчетата победиха в почти равностойна битка. До такава степен ми харесаха, че се колебая да поръчам и следващия модел Qian39 или още по добре Qian69. Вариант е да инвестирам още малко и да си взема TY Hi-Z HP150 за които пишат наистина много хубави неща в ревютата. Просто напоследък европейските и американски производители зарязаха производството на качествени earbuds слушалки. Почти няма избор или цените са отврат, а качеството посредствено. И какво остава на старите олд-скуул типчета, като мен, освен да прегърнат радушно предложенията на братчетата китайци. А те наистина правят уникални копия на AKG и Sennheiser.

За добиване на представа малко снимки на Benjie S5 в комбинация с популярни модели слушалки и усилватели за mp3 плеъри:
BENJIE S5 Entry-level Lossless Music Player

BENJIE S5 Entry-level Lossless Music Player

BENJIE S5 Entry-level Lossless Music Player

BENJIE S5 Entry-level Lossless Music Player

Сравнение с други плеъри:

BENJIE S5 Entry-level Lossless Music Player

Bootstrap 3 – Login form

Bootstrap 3 - Login Form
От известно време се каня да променя логин формата за админ панела на проектите, които правя. Направих една форма, която не знам дали ще ползвам, но ще ми е полезна като отправна точка. За да си помогна за стиловете използвах Less (език за стилови множества или CSS) и GUI-то SimpLESS – портабъл е и работи доста леко за разлика от други подобни.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
// 		MIXINS
//  ==========================================
.rounded-corners (@radius1: 5px, @radius2: 5px, @radius3: 5px, @radius4: 5px) { 
	-webkit-border-radius: @radius1 @radius2 @radius3 @radius4; 
	-moz-border-radius: @radius1 @radius2 @radius3 @radius4; 
	-ms-border-radius: @radius1 @radius2 @radius3 @radius4; 
	-o-border-radius: @radius1 @radius2 @radius3 @radius4; 
	border-radius: @radius1 @radius2 @radius3 @radius4; 
}
 
.drop-shadow (@x: 0, @y: 1px, @blur: 2px, @spread: 0, @alpha: 0.25) {
	-webkit-box-shadow:	@x @y @blur @spread rgba(0, 0, 0, @alpha);
	-moz-box-shadow:	@x @y @blur @spread rgba(0, 0, 0, @alpha);
	box-shadow:		@x @y @blur @spread rgba(0, 0, 0, @alpha);
}
 
.gradient (@startColor: #eee, @endColor: white) {
	background-color: @startColor;
	background: -webkit-gradient(linear, left top, left bottom, from(@startColor), to(@endColor));
	background: -webkit-linear-gradient(top, @startColor, @endColor);
	background: -moz-linear-gradient(top, @startColor, @endColor);
	background: -ms-linear-gradient(top, @startColor, @endColor);
	background: -o-linear-gradient(top, @startColor, @endColor);
}
 
 
 
// 		Colors
//  ==========================================
@silver_light: #edf1f2;
@silver_white: #f7f8fa;
@silver_dark: #eef7fc;
@silver_border: #c3d5d9;
@grey: #8f8f8f;
@blue_dark: #76ccea;
@blue_light: #badff2;
 
 
// 		Styles
//  ==========================================
body {
	background-color: @silver_light;
}
 
.container.lf{
	width: 322px;
	color: @grey;
	a {color: @grey;}
 
		.logf {
			margin-top: 50px;
			.rounded-corners(5px, 5px, 5px, 5px);
			.drop-shadow(0px, 0px, 6px, 2px, 0.05);
		}
 
		.lfhead, .lfbody, .lffooter{
			border: 1px solid @silver_border;
			background-color: @silver_white;
			min-height: 20px;
			// line-height: 15px;
		}
 
		.lfhead {
			border-bottom: 0;
			.rounded-corners(5px, 5px, 0, 0);
		}
 
		.lfbody {
			border-top: 0;
			border-bottom: 0;
 
			.input-group-addon {
				color: @grey;
			}
			 .form-control:focus {
			 	.drop-shadow(0px, 0px, 6px, 2px, 0.05);
			 	border-color: @blue_dark;
			 }
		}
 
		.lffooter {
			background-color: @silver_dark;
			.rounded-corners(0, 0, 5px, 5px);
			padding-top: 16px;
 
			.text-left {
				padding-top: 8px;
			}
 
			label {
				font-weight: normal;
				color: @grey;
			}
 
			input[type='button'], input[type='reset'], input[type='submit'] {
				.rounded-corners(18px, 18px, 18px, 18px);
				border-color: @blue_dark;
				.gradient(@blue_light, @blue_dark);
				font-weight: bold;
				.drop-shadow(0px, 1px, 2px, 1px, 0.10);
				text-shadow: 1px 1px @blue_dark;
 
				&:hover {
					.gradient(@blue_dark, @blue_light);
				}
			}
		}
 
	.lflinks {
		padding-top: 8px;
	}
 
}

HTML кода:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<div class="container lf">
   <div class="row logf text-center">
      <form action="" method="post" >
         <div class="col-xs-12 lfhead">
         </div>
         <div class="col-xs-12 lfbody">
            <div class="form-group">
               <div class="input-group">
                  <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
                  <input id="email" type="email" class="form-control" name="email" value="" tabindex="1" placeholder="Email Address">
               </div>
            </div>
            <div class="form-group">
               <div class="input-group">
                  <span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
                  <input id="password" type="password" class="form-control" name="password" value="" tabindex="2" placeholder="Password">                    
               </div>
            </div>
         </div>
         <div class="col-xs-12 lffooter">
            <div class="col-xs-6">
               <div class="form-group text-left">
                  <input type="checkbox" tabindex="3" class="" name="remember" id="remember">
                  <label for="remember"> Remember Me</label>
               </div>
            </div>
            <div class="col-xs-6">
               <div class="form-group text-right">
                  <input type="submit" name="login-submit" tabindex="4" class="btn btn-primary" value="Login">
               </div>
            </div>
         </div>
      </form>
   </div>
   <div class="row lflinks">
      <div class="col-xs-6 text-left"><a href="">Register</a></div>
      <div class="col-xs-6 text-right"><a href="">Forgot password</a></div>
   </div>
</div>

Останалото форматиране си идва от Bootstrap 3.
Демо на страницата: BS3 Login Form
Download: bs3-login_form.zip

Макро на семенца от глухарче и водни капки

Gallery

This gallery contains 4 photos.

Фото експеримент с макро пръстени – 5cm. Тяло – Samsung NX3000 Обектив – Asahi Pentax M 1:1.7 50mm Бленда – 2.8-4.5 Адаптер за обектива – някакъв китайски PK-NX Постановка – на терасата с камъни и глухарчета, които домъкнахме с дъщеря … Continue reading