Изменение разрешения фотографии для приложения Cordova

👁 153 просмотров
1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (Пока оценок нет)
Загрузка...

Бывает так, что в приложениях, где требуется загрузить фотографию пользователем необходимо уменьшить разрешение фотографии, чтобы интерфейс грузился быстрее, в некоторых случаях это очень необходимо. Для этого есть специальный плагин, который называется cordova-plugin-image-resizer. Ссылка на GitHub проекта.

Для использования необходимо его установить в Cordova через команду:

cordova plugin add https://github.com/protonet/cordova-plugin-image-resizer.git

Далее используем примерно следующим образом:

var userpic = "usrl/to/myimage.jpg";
var options = {
        uri: userpic,
        folderName: "EventApp",
        quality: 90,
        width: 50,
        height: 50,
        base64: true};
try{
  	window.ImageResizer.resize(options,
  	  function(image) {
  	     // success: image is the new resized image
  			userpic = image;
  	  }, function(err) {
  	    // failed: grumpy cat likes this function
  		  console.log(err);
  	  });
}catch(e){
	console.log("Resizer is not work in your browser");
}

 

SplashScreen загрузки для Vue.js

👁 253 просмотров
1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (Пока оценок нет)
Загрузка...

Иногда, требуется осуществить показ анимации загрузки, пока Vue.js занят каким-то процессом обработки. Ниже представлен один из способов это организовать:

 

Стартовый код Cordova и Vue.js

👁 119 просмотров
1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (Пока оценок нет)
Загрузка...

Чтобы программировать для Cordova на современном фреймворке Vue.js необходимо учитывать факторы, которые дают знать коду на Vue.js, что все ресурсы устройства загружены и начался черед исполнения кода на Vue.js. Ниже представлен скелет данного кода. По сути дела, это переделанный код из файла по умолчанию index.js в понятный вид:

var app = {
    initialize: function() {
    	//Делаем инициализацию
        this.bindEvents();
        this.setupVue();
    },
    bindEvents: function() {
        document.addEventListener('deviceready', this.onDeviceReady, false);
    },
    onDeviceReady: function() {
        app.receivedEvent('deviceready');
    },
    receivedEvent: function(id) {
        console.log('Received Event: ' + id);
    },
    setupVue: function() {
    	//Начинаем кодить на фреймворке Vue.js
    	var app = new Vue({
    		el: '#app',
    		data: {
    		  message: 'Hello Vue!'
    		}
    	})
    }
}

//Запускаем приложение
app.initialize();

В плане организации и подключения файлов скриптов важно подумать об оптимизации.

Апгрейд npm до последней версии

👁 79 просмотров
1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (Пока оценок нет)
Загрузка...

Для апгрейда NPM до последней версии выполнить команду:

npm install npm@latest -g

 

Загрузка файла на сервер при помощи AJAX и PHP

👁 612 просмотров
1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (Пока оценок нет)
Загрузка...

 

Примечание. Если нижеприведенный код не работает, то настоятельно рекомендуется проверить права для папок, в которые загружаются файлы на сервер. Они должны иметь права на запись.

Есть возможность реализации этой затеи 2-мя способами:

  1. Чтобы файл загрузился после выбора файла автоматом;
  2. Чтобы файл грузил в последствии нажатии на кнопку загрузки.

Чтобы файл загрузился после выбора файла автоматом

Для этого сначала создадим форму и поле файла:

    <form method="post" enctype="multipart/form-data">
		  <div class="form-group">
		    <label for="file">Загрузка фотографии</label>
		    <input type="file" class="form-control-file" id="file" aria-describedby="fileHelp">
		    <small id="fileHelp" class="form-text text-muted">Загрузите новый баннер или установите из существующего списка.</small>
		  </div>
		  <div class="form-group" id="photo-content">
  
		  </div>
    </form>

Кода AJAX обработки на JS/jQuery:

	$(document).on('change','#file',function(event){
		event.preventDefault();
		
        var property = document.getElementById('file').files[0];
        var image_name = property.name;
        var image_extension = image_name.split('.').pop().toLowerCase();

        if(jQuery.inArray(image_extension,['gif','jpg','jpeg','png']) == -1){
          alert("Неправильный формат");
        }

        var form_data = new FormData();
        form_data.append("file",property);
        console.log(form_data);
        $.ajax({
          url:'upload.php',
          method:'POST',
          data:form_data,
          cache:false,
          processData: false,
          contentType: false,
          beforeSend:function(){
            //$('#msg').html('Loading......');
          },
          success:function(data){
	    	  data = JSON.parse(data);
        	  var photo = `
          	  	<div class="img-item">
  			  		<img src='http://83.220.168.205/upload/upload/reklam/banners/`+data.fileName+`'/>
  		  		</div>
          	  `;
          	  $("#photo-content").append(photo);
          }
        });
      });

Серверная часть на PHP:

<?php

if($_FILES['file']['name'] != ''){
    $test = explode('.', $_FILES['file']['name']);
    $extension = end($test);    
    $name = rand(100,999).'.'.$extension;

    $location = './upload/'.$name;
    move_uploaded_file($_FILES['file']['tmp_name'], $location);

    $data = ["fileName"=>$name];
    echo json_encode($data);
}
?>

Чтобы файл загрузился после выбора и нажатия на кнопку

Клиентская часть на HTML:

    <form method="post" enctype="multipart/form-data">
		  <div class="form-group">
		    <label for="file">Загрузка фото</label>
		    <input type="file" class="form-control-file" id="file" aria-describedby="fileHelp">
		    <br/>
		    <button type="submit" class="btn btn-primary btn-start-upload">Загрузить</button>
		    <small id="fileHelp" class="form-text text-muted">Загрузите новый баннер или установите из существующего списка.</small>
		  </div>
		  <div class="form-group" id="photo-content">
		  
		  </div>
    </form>

Обработка на AJAX:

	$(".btn-start-upload").click(function(e){
		e.preventDefault();
		var formData = new FormData();
		formData.append('file', $('#file').prop("files")[0]);
        console.log(formData);
		$.ajax({
			  url: 'upload.php',
			  type: 'POST',
			  processData: false, // important
			  contentType: false, // important
			  cache:false,
			  dataType : 'text',
			  data: formData,
	          type: 'post',
		      success: function(data){
		    	  data = JSON.parse(data);
	        	  var photo = `
	          	  	<div class="photo-item">
	  			  		<div>
	  			  		<img src='http://mysitename.ru/upload/`+data.fileName+`'/>
	  			  		</div>
	  		  		</div>
	          	  `;
	          	  $("#photo-content").append(photo);
		      }
		});
	});

Серверная часть на PHP:

<?php

if($_FILES['file']['name'] != ''){
    $test = explode('.', $_FILES['file']['name']);
    $extension = end($test);    
    $name = rand(100,999).'.'.$extension;

    $location = './upload/'.$name;
    move_uploaded_file($_FILES['file']['tmp_name'], $location);

    $data = ["fileName"=>$name];
    echo json_encode($data);
}
?>

 

Расширенное поле типа select, tag, search, input в одном флаконе на Vue.js

👁 102 просмотров
1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (Пока оценок нет)
Загрузка...

Данный проект называется Vue Select и доступен по ссылке.  Много примеров его использования по ссылке на CodePen. Ниже представлен простой пример того, как его использовать в базовом предназначении:

Диалоговое окно на Vue.js

👁 179 просмотров
1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (Пока оценок нет)
Загрузка...

В данном посте представлено диалоговое окно на Vue.js. Окно использует сетку bootstrap и реализовано в виде компонента, но ничего не мешает видоизменить без bootstrap и оформить в виде модуля.

Все что нужно — это добавить код компонента на страницу:

Vue.component("viewer-dialog", {
  template: `<div id="dialogViewer">
                    <div class="viewerBox" v-show="activeViewer">
                        <div class="container-fluid">
                            <div class="row">
                                <div class="col-3"></div>
                                <div class="col-6"></div>
                                <div class="col-3 dlg-close" @click="closeViewer">×</div>
                            </div>
                        </div>
                        <div v-html="htmlContent"></div>
                    </div>
                </div>`,
  data: function() {
    return {
      activeViewer: false,
      htmlContent: ""
    };
  },
  //props: ['btnText'],
  methods: {
    sendReview: function() {
      console.log("!+");
    },
    openViewer: function() {
      this.activeViewer = true;
    },
    closeViewer: function() {
      this.activeViewer = false;
    }
  },
  watch: {
    src: function() {
      this.openViewer();
    }
  },
  created() {
    this.$root.$on('clicked', (html) => {
      this.activeViewer = true;
      this.htmlContent = html;
    });
  }
});

Подключить стили:

#dialogViewer {}

.viewerBox {
  padding-top: 20pt;
  position: absolute;
  top: 0pt;
  text-align: center;
  left: 0pt;
  width: 100%;
  height: 100%;
  display: block;
  background-color: white;
  z-index: 99999;
  overflow-y: scroll;
}

.viewerBox img {
  width: 90%;
  height: auto;
}

.viewerBox .dlg-close {
  font-size: 30pt;
  cursor: pointer;
}

Добавить теги в разметку страницы:

<div id="myApp">
  <viewer-dialog></viewer-dialog>
  <br/>
  <center>
    <button @click="showDialog">Открыть</button>
  </center>
</div>

Написать код приложения Vue.js:

var myApp = new Vue({
  el: "#myApp",
  data: {

  },
  methods: {
    showDialog: function() {
      var html = "<div>Инфа</div>";
      this.$emit('clicked', html);
    }
  }
});

И любоваться результатом:

Запуск любого процесса в демон/бакграунд при помощи pm2 и bash — скрипта

👁 155 просмотров
1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (Пока оценок нет)
Загрузка...

Допустим, есть такая задача, чтобы процесс не завершался после закрытия консоли и для этого есть утилита Node.js под названием pm2. Ссылка на проект в GitHub.

 

 Использование

Установка

Делается это очень просто:

npm install pm2 -g

Запуск в демон

Запустим какое-нибудь приложение или процесс в демон:

pm2 start app.js

Вывод списка запущенных процессов, остановка, перезапуск и удаление процесса

Весь список процессов в делегировании:

pm2 list|ls

Остановка:

pm2 stop [options] <id|name|all|json|stdin...>

Перезапуск:

pm2 restart [options] <id|name|all|json|stdin...>

Удаление из списка делегирования:

pm2 delete <name|id|script|all|json|stdin...>

Это не полный перечень команд, но этого достаточно, чтобы быстро начать работу.

 

Реальный пример

Давайте теперь поставим задачу отправить в демон/бакграунд процесс запуска приложения Angular CLI на удаленном или локальном сервере. Для запуска приложения Angular в обычном режиме используется команда:

ng serve --host 0.0.0.0 --port 4200

Нам же нужно, сделать так, чтобы дать этому процессу название и запустить его в процесс делегирования pm2. Для этого создаем файл скрипта оболочки bash с расширением sh. Например, назовем его start.sh и запишем команду запуска процесса:

#!/bin/bash
ng serve --host 0.0.0.0 --port 4200

И теперь, чтобы запустить в делегирование pm2 и дать этому процессу названием выполним команду:

pm2 start start.sh --name serverapp

где serverapp — то название, которое мы дали процессу в списке задач делегирования pm2. Все, процесс запущен в демон/бакграунд режиме и чтобы посмотреть данный процесс в списке задач делегирования pm2 выполним команду:

pm2 list

После чего pm2 выведет в консоль список всех процессов, среди которых и наш serverapp: