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

👁 56 просмотров

Бывает так, что в приложениях, где требуется загрузить фотографию пользователем необходимо уменьшить разрешение фотографии, чтобы интерфейс грузился быстрее, в некоторых случаях это очень необходимо. Для этого есть специальный плагин, который называется 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

👁 126 просмотров

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

 

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

👁 68 просмотров

Чтобы программировать для 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();

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

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

👁 204 просмотров

 

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

Есть возможность реализации этой затеи 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

👁 67 просмотров

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

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

👁 87 просмотров

В данном посте представлено диалоговое окно на 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 — скрипта

👁 87 просмотров

Допустим, есть такая задача, чтобы процесс не завершался после закрытия консоли и для этого есть утилита 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: