• Система автоматизации с открытым исходным кодом на базе esp8266/esp32 микроконтроллеров и приложения IoT Manager. Наша группа в Telegram

Нужна помощь ESPAsyncWebServer бинарное содержимое

N

nikolz

Well-known member
можно прочитать такой файл еще проще.
надо загрузить его в HexEditor, который покажет его в текстовом формате.
и это называется
отобразить формат HEX в формате ASCIIZ.
 
C

CRM

New member
radikovevgen написал(а):
Да именно так и делал а потом что с этим .dat файлом делать дальше чтоб исходный код получился?...Просто есть несколько файлов проекта в такой форме..в каком то из них шаблон веб страницы сервера....хочу изменить кое что...подправить..и обратно запаковать..мне понравился этот проект...а как этим форматом работать не знаю...дошел до вот этого файла .dat. а дальше что с ним дел ааа ть х з...тут наткнулся на ваш диалог по такой же теме..вот и интересуюсь как действовать..кстати на скрине выше это весь файл или часть?
Нажмите для раскрытия...
Веб интерфейс в том проекте формируется в самом скетче, если не ошибаюсь, это первая версия JeeUI
 
Алексей.

Алексей.

Active member
radikovevgen написал(а):
Да именно так и делал а потом что с этим .dat файлом делать дальше чтоб исходный код получился?
Нажмите для раскрытия...
Почти также как посмотреть обычный текстовой файл командной строкой, только не cat-ом а zcat-ом
Код: 
user@my-pc:~/Downloads zcat myfile.dat
</html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
  <meta name="theme-color" content="#007bff">
  <title>Jee UI Framework</title>
  <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
  <link href="css/bootstrap.min.css" rel="stylesheet">
  <script src="js/bubbly_bg.js"></script>
</head>
<body onload="onload(); ">
  <script async src="http://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
  <script>
    (adsbygoogle = window.adsbygoogle || []).push({
      google_ad_client: "ca-pub-1967157221324951",
      enable_page_level_ads: true
    });
  </script>
  <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
    <a class="navbar-brand" href="/">
      <img src="images/logo.svg" width="30" height="30" class="d-inline-block align-top" alt="">
      JeeUI
    </a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
      aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse show" id="menu">
    </div>
  </nav>
  <nav aria-label="breadcrumb">
    <ol class="breadcrumb">
      <li class="breadcrumb-item active" aria-current="page" id="breadcrumb">Главная</li>
    </ol>
  </nav>
  <div class="container">
    <form action="" method="post" id="formMain" name="formMain">
      <div id="blank">
      </div>
    </form>
  </div>
  <hr>
  <footer class="text-center">
    <div class="container">
      <div class="row">
        <div class="col-12">
          <p>2019 © <a href="https://github.com/jeecrypt" target="_blank" style="color: #000" class="alert-link">Marsel
              Akhkamov</a></p>
        </div>
      </div>
    </div>
    <div class="alert alert-primary" role="alert">
      <a href="https://donatepay.ru/don/jeegit" class="alert-link" target="_blank">Donate</a>
    </div>
  </footer>
  <script src="js/bootstrap.min.js"></script>
  <canvas id="1" width="1" height="1"></canvas>
  <script>bubbly({
      colorStart: "#007bff",
      colorStop: "#ffffff",
      blur: 1,
      compose: "source-over",
      velocityFunc: () => 0.9 + Math.random() * 0.5,
    });
  </script>
  <script>
    function onload() {
      page_update(0);
      menu_update(0);
      title_update(0);
    };
    function update(page) {
      page_update(page);
      menu_update(page);
      title_update(page);
    };
    function page_update(page) {
      var x = new XMLHttpRequest();
      x.open("GET", "/echo?p=" + page, true);
      x.onload = function () {
        get("#blank").innerHTML = x.responseText;
      }
      x.send(null);
    };
    function menu_update(page) {
      var x = new XMLHttpRequest();
      x.open("GET", "/menu?p=" + page, true);
      x.onload = function () {
        get("#menu").innerHTML = x.responseText;
      }
      x.send(null);
    };
    function title_update(page) {
        var x = new XMLHttpRequest();
        x.open("GET", "/title?p=" + page, true);
        x.onload = function () {
          get("#breadcrumb").innerHTML = x.responseText;
        }
        x.send(null);
     };
    function reboot() {
      document.getElementById("messegeResult").innerHTML = "<div class=\"alert alert-danger\" role=\"alert\">Внимание! Устройство перезагружается, пожалуйста подожите 10 секунд!</div>";
      var x = new XMLHttpRequest();
      x.open("GET", "/reboot", true);
      x.send(null);
      setTimeout(clear, 10000);
    };
    function clear() {
      document.getElementById("messegeResult").innerHTML = "";
      update(0)
    };
    function get(selector) {
      if (typeof selector == 'object') { return selector; }
      else { return document.querySelector(selector); }
    };
    function selssid(value) {
      document.getElementById("ssid").value = value;
    };
    function updateTextInput(id, val) {
      get('#' + id).innerHTML = val;
    };
    function AjaxFormRequest(formMain, url) {
      jQuery.ajax({
        url: url,
        type: "POST",
        dataType: "html",
        data: jQuery("#" + formMain).serialize(),
        success: function (response) {
          var alert = "<div class=\"alert alert-success\" role=\"alert\">" + response + "</div>";
          document.getElementById("messegeResult").innerHTML = alert;
        },
        error: function (response) {
          document.getElementById("messegeResult").innerHTML = "<div class=\"alert alert-danger\" role=\"alert\">Ошибка сохранения! Поробуйте повторить!</div>";
        }
      });
      setTimeout(clear, 2000);
      function clear() {
        document.getElementById("messegeResult").innerHTML = "";
      };
    }
   function sendForm(formMain, url) {
       var http = new XMLHttpRequest();
       http.open("POST", url, true);
       var formData = new FormData(document.forms.formMain);
       http.send(formData);
       http.onload = function() {
       var response = http.responseText;
           document.getElementById("messegeResult").innerHTML = "<div class=\"alert alert-success\" role=\"alert\">" + response + "</div>";
       }
       setTimeout(clear, 2000);
       function clear() {
           document.getElementById("messegeResult").innerHTML = "";
       };
    };
  </script>
  <script>
  let collapseElements = document.querySelectorAll('[data-toggle="collapse"]');
const CLASS_SHOW = 'show';
const CLASS_COLLAPSE = 'collapse';
const CLASS_COLLAPSING = 'collapsing';
const CLASS_COLLAPSED = 'collapsed';
const ANIMATION_TIME = 350; // 0.35s

function handleCollapseElementClick(e) {
    let el = e.currentTarget;
    let collapseTargetId = el.dataset.target || el.href || null;
    if (collapseTargetId) {
        let targetEl = document.querySelector(collapseTargetId);
        let isShown = targetEl.classList.contains(CLASS_SHOW) || targetEl.classList.contains(CLASS_COLLAPSING);
        if(!isShown) {
            targetEl.classList.remove(CLASS_COLLAPSE);
            targetEl.classList.add(CLASS_COLLAPSING);
            targetEl.style.height = 0
            targetEl.classList.remove(CLASS_COLLAPSED);
            setTimeout(() => {
                targetEl.classList.remove(CLASS_COLLAPSING);
                targetEl.classList.add(CLASS_COLLAPSE, CLASS_SHOW);
                targetEl.style.height = '';
            }, ANIMATION_TIME)
            targetEl.style.height = targetEl.scrollHeight + 'px';
        } else {
            targetEl.style.height = `${targetEl.getBoundingClientRect().height}px`
            targetEl.offsetHeight;
            targetEl.classList.add(CLASS_COLLAPSING);
            targetEl.classList.remove(CLASS_COLLAPSE, CLASS_SHOW);
            targetEl.style.height = '';
            setTimeout(() => {
                targetEl.classList.remove(CLASS_COLLAPSING);
                targetEl.classList.add(CLASS_COLLAPSE);
            }, ANIMATION_TIME)
        }
    }
}
collapseElements.forEach((el) => {
    el.addEventListener('click', handleCollapseElementClick)
})
</script>
</body>
</html>
 
R

radikovevgen

New member
Алексей. написал(а):
Почти также как посмотреть обычный текстовой файл командной строкой, только не cat-ом а zcat-ом
Код: 
user@my-pc:~/Downloads zcat myfile.dat
</html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
  <meta name="theme-color" content="#007bff">
  <title>Jee UI Framework</title>
  <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
  <link href="css/bootstrap.min.css" rel="stylesheet">
  <script src="js/bubbly_bg.js"></script>
</head>
<body onload="onload(); ">
  <script async src="http://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
  <script>
    (adsbygoogle = window.adsbygoogle || []).push({
      google_ad_client: "ca-pub-1967157221324951",
      enable_page_level_ads: true
    });
  </script>
  <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
    <a class="navbar-brand" href="/">
      <img src="images/logo.svg" width="30" height="30" class="d-inline-block align-top" alt="">
      JeeUI
    </a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
      aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse show" id="menu">
    </div>
  </nav>
  <nav aria-label="breadcrumb">
    <ol class="breadcrumb">
      <li class="breadcrumb-item active" aria-current="page" id="breadcrumb">Главная</li>
    </ol>
  </nav>
  <div class="container">
    <form action="" method="post" id="formMain" name="formMain">
      <div id="blank">
      </div>
    </form>
  </div>
  <hr>
  <footer class="text-center">
    <div class="container">
      <div class="row">
        <div class="col-12">
          <p>2019 © <a href="https://github.com/jeecrypt" target="_blank" style="color: #000" class="alert-link">Marsel
              Akhkamov</a></p>
        </div>
      </div>
    </div>
    <div class="alert alert-primary" role="alert">
      <a href="https://donatepay.ru/don/jeegit" class="alert-link" target="_blank">Donate</a>
    </div>
  </footer>
  <script src="js/bootstrap.min.js"></script>
  <canvas id="1" width="1" height="1"></canvas>
  <script>bubbly({
      colorStart: "#007bff",
      colorStop: "#ffffff",
      blur: 1,
      compose: "source-over",
      velocityFunc: () => 0.9 + Math.random() * 0.5,
    });
  </script>
  <script>
    function onload() {
      page_update(0);
      menu_update(0);
      title_update(0);
    };
    function update(page) {
      page_update(page);
      menu_update(page);
      title_update(page);
    };
    function page_update(page) {
      var x = new XMLHttpRequest();
      x.open("GET", "/echo?p=" + page, true);
      x.onload = function () {
        get("#blank").innerHTML = x.responseText;
      }
      x.send(null);
    };
    function menu_update(page) {
      var x = new XMLHttpRequest();
      x.open("GET", "/menu?p=" + page, true);
      x.onload = function () {
        get("#menu").innerHTML = x.responseText;
      }
      x.send(null);
    };
    function title_update(page) {
        var x = new XMLHttpRequest();
        x.open("GET", "/title?p=" + page, true);
        x.onload = function () {
          get("#breadcrumb").innerHTML = x.responseText;
        }
        x.send(null);
     };
    function reboot() {
      document.getElementById("messegeResult").innerHTML = "<div class=\"alert alert-danger\" role=\"alert\">Внимание! Устройство перезагружается, пожалуйста подожите 10 секунд!</div>";
      var x = new XMLHttpRequest();
      x.open("GET", "/reboot", true);
      x.send(null);
      setTimeout(clear, 10000);
    };
    function clear() {
      document.getElementById("messegeResult").innerHTML = "";
      update(0)
    };
    function get(selector) {
      if (typeof selector == 'object') { return selector; }
      else { return document.querySelector(selector); }
    };
    function selssid(value) {
      document.getElementById("ssid").value = value;
    };
    function updateTextInput(id, val) {
      get('#' + id).innerHTML = val;
    };
    function AjaxFormRequest(formMain, url) {
      jQuery.ajax({
        url: url,
        type: "POST",
        dataType: "html",
        data: jQuery("#" + formMain).serialize(),
        success: function (response) {
          var alert = "<div class=\"alert alert-success\" role=\"alert\">" + response + "</div>";
          document.getElementById("messegeResult").innerHTML = alert;
        },
        error: function (response) {
          document.getElementById("messegeResult").innerHTML = "<div class=\"alert alert-danger\" role=\"alert\">Ошибка сохранения! Поробуйте повторить!</div>";
        }
      });
      setTimeout(clear, 2000);
      function clear() {
        document.getElementById("messegeResult").innerHTML = "";
      };
    }
   function sendForm(formMain, url) {
       var http = new XMLHttpRequest();
       http.open("POST", url, true);
       var formData = new FormData(document.forms.formMain);
       http.send(formData);
       http.onload = function() {
       var response = http.responseText;
           document.getElementById("messegeResult").innerHTML = "<div class=\"alert alert-success\" role=\"alert\">" + response + "</div>";
       }
       setTimeout(clear, 2000);
       function clear() {
           document.getElementById("messegeResult").innerHTML = "";
       };
    };
  </script>
  <script>
  let collapseElements = document.querySelectorAll('[data-toggle="collapse"]');
const CLASS_SHOW = 'show';
const CLASS_COLLAPSE = 'collapse';
const CLASS_COLLAPSING = 'collapsing';
const CLASS_COLLAPSED = 'collapsed';
const ANIMATION_TIME = 350; // 0.35s

function handleCollapseElementClick(e) {
    let el = e.currentTarget;
    let collapseTargetId = el.dataset.target || el.href || null;
    if (collapseTargetId) {
        let targetEl = document.querySelector(collapseTargetId);
        let isShown = targetEl.classList.contains(CLASS_SHOW) || targetEl.classList.contains(CLASS_COLLAPSING);
        if(!isShown) {
            targetEl.classList.remove(CLASS_COLLAPSE);
            targetEl.classList.add(CLASS_COLLAPSING);
            targetEl.style.height = 0
            targetEl.classList.remove(CLASS_COLLAPSED);
            setTimeout(() => {
                targetEl.classList.remove(CLASS_COLLAPSING);
                targetEl.classList.add(CLASS_COLLAPSE, CLASS_SHOW);
                targetEl.style.height = '';
            }, ANIMATION_TIME)
            targetEl.style.height = targetEl.scrollHeight + 'px';
        } else {
            targetEl.style.height = `${targetEl.getBoundingClientRect().height}px`
            targetEl.offsetHeight;
            targetEl.classList.add(CLASS_COLLAPSING);
            targetEl.classList.remove(CLASS_COLLAPSE, CLASS_SHOW);
            targetEl.style.height = '';
            setTimeout(() => {
                targetEl.classList.remove(CLASS_COLLAPSING);
                targetEl.classList.add(CLASS_COLLAPSE);
            }, ANIMATION_TIME)
        }
    }
}
collapseElements.forEach((el) => {
    el.addEventListener('click', handleCollapseElementClick)
})
</script>
</body>
</html>
Нажмите для раскрытия...
 
R

radikovevgen

New member
CRM написал(а):
Веб интерфейс в том проекте формируется в самом скетче, если не ошибаюсь, это первая версия JeeUI
Нажмите для раскрытия...
да это JeeUI ....в нем элементы вебинтерфейса генерируются в скетче путем их добавления в файл html.h..а сам шаблон веб формы зашифрован в этом формате..А вытоже им занимаетесь?
 
Алексей.

Алексей.

Active member
radikovevgen написал(а):
а поподробне можно...простите за назойливость я просто новичек в этой теме?!
Нажмите для раскрытия...
Куда подробнее?
Я привел командную строку и её вывод.
Хотите получить файл для редактирования, так направьте вывод в файл. zcat myfile.dat >Template_default.html
Что вы хотите? Как командной строкой пользоваться думаю вы знаете.
 
C

CRM

New member
radikovevgen написал(а):
да это JeeUI ....в нем элементы вебинтерфейса генерируются в скетче путем их добавления в файл html.h..а сам шаблон веб формы зашифрован в этом формате..А вытоже им занимаетесь?
Нажмите для раскрытия...
Уже есть 2я версия. Не то что бы занимаюсь, сделал форк под себя.
Файл из Облака Mail.ru
 
R

radikovevgen

New member
Алексей. написал(а):
Куда подробнее?
Я привел командную строку и её вывод.
Хотите получить файл для редактирования, так направьте вывод в файл. zcat myfile.dat >Template_default.html
Что вы хотите? Как командной строкой пользоваться думаю вы знаете.
Нажмите для раскрытия...
я пользуюсь виндой... я так понял нужно просто в командной строке ввести путь до папки (в которой файл) потом команда zcad и далее имя файла с расширением( в моем случае myfile.dat)? но вылетает ошибка что нет такой команды??
 
R

radikovevgen

New member
CRM написал(а):
Уже есть 2я версия. Не то что бы занимаюсь, сделал форк под себя.
Нажмите для раскрытия...
JeeUI2 показал?... я знаю про вторую версию пробовал но там есть некоторые проблемы...поэтому разбираюсь с 1-ой ...давайте по почте перепишимся на эту тему...?
 
Алексей.

Алексей.

Active member
radikovevgen написал(а):
я пользуюсь виндой...
Нажмите для раскрытия...
Не простой выбор :(
Для этой ОС можно использовать gzip, ключ для распаковки -d, кроме этого gzip требует расширения файла .gz поэтому скопируйте оригинальный в файл с расширением .gz
Код: 
D:\>copy myfile.dat Template_default.html.gz
Скопировано файлов:         1.

D:\>gzip -d Template_default.html.gz

D:\>type Template_default.html
</html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
  <meta name="theme-color" content="#007bff">
  <title>Jee UI Framework</title>
  <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
  <link href="css/bootstrap.min.css" rel="stylesheet">
  <script src="js/bubbly_bg.js"></script>
</head>
<body onload="onload(); ">
  <script async src="http://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
  <script>
    (adsbygoogle = window.adsbygoogle || []).push({
      google_ad_client: "ca-pub-1967157221324951",
      enable_page_level_ads: true
    });
  </script>
  <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
    <a class="navbar-brand" href="/">
      <img src="images/logo.svg" width="30" height="30" class="d-inline-block align-top" alt="">
      JeeUI
    </a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
      aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse show" id="menu">
    </div>
  </nav>
  <nav aria-label="breadcrumb">
    <ol class="breadcrumb">
      <li class="breadcrumb-item active" aria-current="page" id="breadcrumb">╨У╨╗╨░╨▓╨╜╨░╤П</li>
    </ol>
  </nav>
  <div class="container">
    <form action="" method="post" id="formMain" name="formMain">
      <div id="blank">
      </div>
    </form>
  </div>
  <hr>
  <footer class="text-center">
    <div class="container">
      <div class="row">
        <div class="col-12">
          <p>2019 ┬й <a href="https://github.com/jeecrypt" target="_blank" style="color: #000" class="alert-link">Marsel
              Akhkamov</a></p>
        </div>
      </div>
    </div>
    <div class="alert alert-primary" role="alert">
      <a href="https://donatepay.ru/don/jeegit" class="alert-link" target="_blank">Donate</a>
    </div>
  </footer>
  <script src="js/bootstrap.min.js"></script>
  <canvas id="1" width="1" height="1"></canvas>
  <script>bubbly({
      colorStart: "#007bff",
      colorStop: "#ffffff",
      blur: 1,
      compose: "source-over",
      velocityFunc: () => 0.9 + Math.random() * 0.5,
    });
  </script>
  <script>
    function onload() {
      page_update(0);
      menu_update(0);
      title_update(0);
    };
    function update(page) {
      page_update(page);
      menu_update(page);
      title_update(page);
    };
    function page_update(page) {
      var x = new XMLHttpRequest();
      x.open("GET", "/echo?p=" + page, true);
      x.onload = function () {
        get("#blank").innerHTML = x.responseText;
      }
      x.send(null);
    };
    function menu_update(page) {
      var x = new XMLHttpRequest();
      x.open("GET", "/menu?p=" + page, true);
      x.onload = function () {
        get("#menu").innerHTML = x.responseText;
      }
      x.send(null);
    };
    function title_update(page) {
        var x = new XMLHttpRequest();
        x.open("GET", "/title?p=" + page, true);
        x.onload = function () {
          get("#breadcrumb").innerHTML = x.responseText;
        }
        x.send(null);
     };
    function reboot() {
      document.getElementById("messegeResult").innerHTML = "<div class=\"alert alert-danger\" role=\"alert\">╨Т╨╜╨╕╨╝╨░╨╜╨╕╨╡! ╨г╤Б╤В╤А╨╛╨╣╤Б╤В╨▓╨╛ ╨┐╨╡╤А╨╡╨╖╨░╨│╤А╤Г╨╢╨░╨╡╤В╤Б╤П, ╨┐╨╛╨╢╨░╨╗╤Г╨╣╤Б╤В╨░ ╨┐╨╛╨┤╨╛╨╢╨╕╤В╨╡ 10 ╤Б╨╡╨║╤Г╨╜╨┤!</div>";
      var x = new XMLHttpRequest();
      x.open("GET", "/reboot", true);
      x.send(null);
      setTimeout(clear, 10000);
    };
    function clear() {
      document.getElementById("messegeResult").innerHTML = "";
      update(0)
    };
    function get(selector) {
      if (typeof selector == 'object') { return selector; }
      else { return document.querySelector(selector); }
    };
    function selssid(value) {
      document.getElementById("ssid").value = value;
    };
    function updateTextInput(id, val) {
      get('#' + id).innerHTML = val;
    };
    function AjaxFormRequest(formMain, url) {
      jQuery.ajax({
        url: url,
        type: "POST",
        dataType: "html",
        data: jQuery("#" + formMain).serialize(),
        success: function (response) {
          var alert = "<div class=\"alert alert-success\" role=\"alert\">" + response + "</div>";
          document.getElementById("messegeResult").innerHTML = alert;
        },
        error: function (response) {
          document.getElementById("messegeResult").innerHTML = "<div class=\"alert alert-danger\" role=\"alert\">╨Ю╤И╨╕╨▒╨║╨░ ╤Б╨╛╤Е╤А╨░╨╜╨╡╨╜╨╕╤П! ╨Я╨╛╤А╨╛╨▒╤Г╨╣╤В╨╡ ╨┐╨╛╨▓╤В╨╛╤А╨╕╤В╤М!</div>";
        }
      });
      setTimeout(clear, 2000);
      function clear() {
        document.getElementById("messegeResult").innerHTML = "";
      };
    }
        function sendForm(formMain, url) {
                var http = new XMLHttpRequest();
                http.open("POST", url, true);
                var formData = new FormData(document.forms.formMain);
                http.send(formData);
                http.onload = function() {
                var response = http.responseText;
                        document.getElementById("messegeResult").innerHTML = "<div class=\"alert alert-success\" role=\"alert\">" + response + "</div>";
                }
                setTimeout(clear, 2000);
                function clear() {
                        document.getElementById("messegeResult").innerHTML = "";
                };
    };
  </script>
  <script>
  let collapseElements = document.querySelectorAll('[data-toggle="collapse"]');
const CLASS_SHOW = 'show';
const CLASS_COLLAPSE = 'collapse';
const CLASS_COLLAPSING = 'collapsing';
const CLASS_COLLAPSED = 'collapsed';
const ANIMATION_TIME = 350; // 0.35s

function handleCollapseElementClick(e) {
    let el = e.currentTarget;
    let collapseTargetId = el.dataset.target || el.href || null;
    if (collapseTargetId) {
        let targetEl = document.querySelector(collapseTargetId);
        let isShown = targetEl.classList.contains(CLASS_SHOW) || targetEl.classList.contains(CLASS_COLLAPSING);
        if(!isShown) {
            targetEl.classList.remove(CLASS_COLLAPSE);
            targetEl.classList.add(CLASS_COLLAPSING);
            targetEl.style.height = 0
            targetEl.classList.remove(CLASS_COLLAPSED);
            setTimeout(() => {
                targetEl.classList.remove(CLASS_COLLAPSING);
                targetEl.classList.add(CLASS_COLLAPSE, CLASS_SHOW);
                targetEl.style.height = '';
            }, ANIMATION_TIME)
            targetEl.style.height = targetEl.scrollHeight + 'px';
        } else {
            targetEl.style.height = `${targetEl.getBoundingClientRect().height}px`
            targetEl.offsetHeight;
            targetEl.classList.add(CLASS_COLLAPSING);
            targetEl.classList.remove(CLASS_COLLAPSE, CLASS_SHOW);
            targetEl.style.height = '';
            setTimeout(() => {
                targetEl.classList.remove(CLASS_COLLAPSING);
                targetEl.classList.add(CLASS_COLLAPSE);
            }, ANIMATION_TIME)
        }
    }
}
collapseElements.forEach((el) => {
    el.addEventListener('click', handleCollapseElementClick)
})
</script>
</body>
</html>
 
R

radikovevgen

New member
Алексей. написал(а):
Для этой ОС можно использовать gzip,
Нажмите для раскрытия...
Для этой ОС
"gzip" не является внутренней или внешней
командой, исполняемой программой или пакетным файлом....но все получилось немного иначе ..ОГРОМНОЕ СПАСИБО ..а после редактирования как бы опять запаковать обратно?
 
Алексей.

Алексей.

Active member
Если нет возможности добыть gzip для виндовс, то можно воспользоваться теми средствами, что есть в ОС, например powershell-ом
Сделать простой скрипт.
Код: 
Function GUnZip-File{

    $input = New-Object System.IO.FileStream $inFile, ([IO.FileMode]::Open), ([IO.FileAccess]::Read), ([IO.FileShare]::Read)
    $output = New-Object System.IO.FileStream $outFile, ([IO.FileMode]::Create), ([IO.FileAccess]::Write), ([IO.FileShare]::None)
    $gzipStream = New-Object System.IO.Compression.GzipStream $input, ([IO.Compression.CompressionMode]::Decompress)

    $buffer = New-Object byte[](1024)
    while($true){
        $read = $gzipstream.Read($buffer, 0, 1024)
        if ($read -le 0){break}
           $output.Write($buffer, 0, $read)
        }

    $gzipStream.Close()
    $output.Close()
    $input.Close()
}

$inFile=$args[0]
$outFile=$args[1]

GUnZip-File $inFile $outFile
И выполнить
Код: 
powershell.exe -file gz-unzip.ps1 D:\Template_default.html.gz D:\Template_default.html
 
Алексей.

Алексей.

Active member
Пережимаем и генерим заголовочный файл
Код: 
$inFile=$args[0]
$outFile=$args[1]

# Строка - возврат каретки & перевод строки
[string]$crlf = "`r`n"

# Определяем переменную для хранения контента
[string]$content

# Функция сжатия данных gzip
function GZip-Data {
  [cmdletBinding()]
  param(
    [parameter(Mandatory = $true, ValueFromPipeline = $false)]
    [byte[]]$Data
  )
  Process {
    $output = [System.IO.MemoryStream]::new()
    $gzipStream = New-Object System.IO.Compression.GzipStream $output, ([IO.Compression.CompressionMode]::Compress)
    $gzipStream.Write($Data, 0, $Data.Length)
    $gzipStream.Close()
    return $output.ToArray()
  }
}

# Удаляем прежний файл, если он есть
if([System.IO.File]::Exists($outFile)) {
  Remove-Item $outFile
}

# Загружаем файл
[byte[]]$bytes = [System.IO.File]::ReadAllBytes($inFile)

# Пережимаем байты
$bytes = GZip-Data -Data $bytes

# Сохраняем дату генерации файла
$content = '// File generated date: ' + $(Get-Date).ToString('ddd, dd MMM yyyy HH:mm:ss') + $crlf

# Сохраняем декларацию массива байтов
$content += '//############ ' + $inFile + ' ############' + $crlf
$content += 'static char _' + ($inFile -replace '[\W]', '_') +' [] PROGMEM = {' + $crlf

# Сохраняем шестнадцатиричное представление массива байтов
$hexBuilder = [System.Text.StringBuilder]::new(16 * 6)
for($i=0; $i -lt $bytes.Length; ) {
  if (($i + 1) -lt $bytes.Length) {
    $hexBuilder.AppendFormat("0x{0:x2},", $bytes[$i]) | Out-Null
  } else {
    $hexBuilder.AppendFormat("0x{0:x2}", $bytes[$i]) | Out-Null
  }
  $i++
  if (($i % 16) -eq 0) {
    $content += $hexBuilder.ToString() + $crlf
    $hexBuilder = [System.Text.StringBuilder]::new(16 * 6)
  }
}
$content += $hexBuilder.ToString() + '};' + $crlf

# Сохраняем файл
Set-Content -Path $outFile -Value $content
Выполним и посмотрим что получилось
Код: 
D:\>powershell.exe -file gz-zip.ps1 D:\Template_default.html D:\Template_default.html.h


D:\>chcp 1251
Текущая кодовая страница: 1251

D:\>type D:\Template_default.html.h
// File generated date: Чт, 24 окт 2019 18:30:38
//############ D:\Template_default.html ############
static char _D__Template_default_html [] PROGMEM = {
0x1f,0x8b,0x08,0x00,0x00,0x00,0x00,0x00,0x04,0x00,0xcd,0x59,0x5b,0x6f,0x1b,0xc7,
0x15,0x7e,0xa6,0x01,0xff,0x87,0xf1,0xba,0x00,0x57,0x0d,0x77,0x29,0xca,0x75,0x5d,
............
0xfe,0x3d,0xa6,0xff,0x2f,0xc3,0x3f,0x3a,0xff,0x03,0x37,0xa1,0x6e,0x0c,0xf0,0x1c,
0x00,0x00};

objects in mirror are closer than they appear
порой простое и очевидное решение где-то рядом, но к сожалению не всегда об этом помнишь
 
Войдите или зарегистрируйтесь для ответа.
Сверху Снизу