browser_app_base 0.1.2 → 0.1.3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 32eb1959381928c1c8be5a8760701706f771df4207232dd7a9047940a6f359a8
-  data.tar.gz: 38edd65c1cd9cbf4efa10a714bf1a0675fc9043642379b4c5b731e211ce3e0ad
+  metadata.gz: a22a122d81077a56ab0c76ef5faa6bcff0df41828eb333087735243890835f1a
+  data.tar.gz: 8360c3f68edf2eb31783ed4dcef383b3bba6c53ebc2924fb4023cb265bc1775a
 SHA512:
-  metadata.gz: e4aca516b044caa09f15225fb1dc0f3b61c256bb1b36351a1575fc0e6bc4e242e0d9c4f682fbb276250a4d6848e6c30d78490e73b2f78e9df4f82c056d266d37
-  data.tar.gz: 7b5ff83d5c26485836a54d41fbb8e71188147fc65663f4a3bfbd87407d45cf0dd701104c7826cff6116bd0f8f31574c45b412b69555dadcbecc5da3ad19a7977
+  metadata.gz: 7ee58439f8cec945ab9577fe7f2d27770a69ea070ef1ee00ce49d4a106bd114d0a3d0a1eae971b89532c64a3a3c435989cc92a39b03bf3c9f7697106b46d7856
+  data.tar.gz: a477e7007e72552b287078b76e19760896a19360ea31229ee34841d7171397b87b1b80a871a7e55d0e8cf2f07f06171aebad88a0cdf32801179fe941b0349184

data/.gitignore

@@ -10,3 +10,5 @@ Gemfile.lock
 
 # rspec failure tracking
 .rspec_status
+/lib/template/logs
+/history/history.json

data/.vscode/launch.json

@@ -15,6 +15,7 @@
             "type": "Ruby",
             "request": "launch",
             "cwd": "${workspaceRoot}/lib/template",
+            "args": [ "test" ],
             "program": "${workspaceRoot}/lib/template/start.rb"
         }
     ]

data/README.md

@@ -62,6 +62,8 @@ ui application sample
 $ /tmp/test/bin/start_my_app.rb
 ```
 
+![app](img/app.png)
+
 ## browser setting
 
     ${home}/${app_nane}/config/browser.json
@@ -103,6 +105,85 @@ class MyApp < AppMainBase
 end
 ```
 
+## Application Setting 
+
+    ${home}/${app_nane}/config/setting.json
+
+
+```json
+[
+  {
+    "name": "name1",
+    "value": "value1 2 3 4",
+    "type": "input",
+    "select": "",
+    "description": "設定項目1"
+  },
+  {
+    "name": "name2",
+    "value": true,
+    "type": "checkbox",
+    "select": "",
+    "description": "有効にする場合はチェック"
+  },
+  {
+    "name": "name3",
+    "value": "2",
+    "type": "select",
+    "select": [
+      "1",
+      "2",
+      "3",
+      "4",
+      "5"
+    ],
+    "description": "選択項目"
+  },
+  {
+    "name": "name4",
+    "value": "value4",
+    "type": "input",
+    "select": "",
+    "description": "設定項目4"
+  },
+  {
+    "name": "name5",
+    "value": "value5",
+    "type": "input",
+    "select": "",
+    "description": "設定項目5"
+  },
+  {
+    "name": "name6",
+    "value": "value6",
+    "type": "input",
+    "select": "",
+    "description": "設定項目6"
+  }
+]
+```
+```ruby
+class MyApp < AppMainBase
+  def start(argv)
+    # popup message
+    app_send("popup:message string")
+
+    # log message
+    yield "log message"
+    end
+
+    # read setting
+    puts @config["name1"]
+end
+```
+
+Setting menu
+![app](img/setting_menu.png)
+
+
+Setting screen
+![app](img/setting.png)
+
 ## Development
 
 To install this gem onto your local machine, run `bundle exec rake install`. To release a new version, update the version number in `version.rb`, and then run `bundle exec rake release`, which will create a git tag for the version, push git commits and the created tag, and push the `.gem` file to [rubygems.org](https://rubygems.org).

data/lib/browser_app_base/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module BrowserAppBase
-  VERSION = "0.1.2"
+  VERSION = "0.1.3"
 end

data/lib/template/config.ru

@@ -102,6 +102,6 @@ configure do
 
 end
 
-#\ --port 58656
+#\ --port 40173
 
 run Sinatra::Application

data/lib/template/css/index.css

@@ -121,4 +121,58 @@ input[type="search"] {
 
 input[type="search"]::-webkit-search-cancel-button {
     -webkit-appearance: searchfield-cancel-button;
+}
+
+/* menu */
+.menu {
+    display: flex;
+    justify-content: flex-start;
+    list-style-type: none;
+    color: #393737;
+    padding: 0;
+    font-size: 16px;
+    font-weight: bold;
+}
+
+.menu li {
+    position: relative;
+    width: 100px;
+    margin-left: 1px;
+    padding: 5px;
+    background: #d8dada;
+    list-style-type: none;
+}
+
+.menu li a {
+    color: rgb(20, 114, 192);
+}
+
+.menu li a:hover {
+    background: #eba399;
+}
+
+.menuSub {
+    position: absolute;
+    margin-left: -6px;
+    padding: 0;
+    display: none;
+}
+
+/*.openが付与された時、表示の設定*/
+.menuSub.open {
+    display: block;
+}
+
+.menuSub li a {
+    padding: 5px;
+    margin-left: -5px;
+    margin-right: -5px;
+    margin-bottom: -5px;
+    display: block;
+    color: rgb(20, 114, 192);
+    text-decoration: none;
+}
+
+.menuSub li a:hover {
+    background: #eba399;
 }

data/lib/template/html/index.html

@@ -11,8 +11,8 @@
   <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
   <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
 
-  <script src="http://localhost:58656/js/main.js"></script>
-  <link rel="stylesheet" href="http://localhost:58656/css/index.css" type="text/css">
+  <script src="js/main.js"></script>
+  <link rel="stylesheet" href="css/index.css" type="text/css">
 </head>
 
 <body>
@@ -21,22 +21,33 @@
   </div>
   <h4>RubyAppBase</h4>
   <hr>
-  <table>
-    <tr>
-      <td>
-        <input type="button" id="exec" name="exec" value="実行">
-      </td>
-      <td>
-        <input type="button" id="stop" name="stop" value="停止">
-      </td>
-      <td>
-        <div id="setting_dialog" style="display:none;">
-          <dl id="wrap"></dl>
-        </div>
-        <input type="button" id="setting" value="設定" />
-      </td>
-    </tr>
-  </table>
+  <!-- menu -->
+  <div id="setting_dialog" style="display:none;">
+    <dl id="wrap"></dl>
+  </div>
+  <div>
+    <ul class="menu">
+      <Li><a href="#" id="exec" name="exec">実行</a></li>
+      <li><a href="#" id="stop" name="stop">停止</a></li>
+      <li>
+        設定
+        <ul class="menuSub">
+          <li><a href="#" id="setting">設定</a></li>
+          <li><a href="#" id="save_setting">設定保存</a></li>
+          <li><a href="#" id="load_setting">設定読み込み</a></li>
+        </ul>
+      </li>
+      <!--
+      <li>
+        menu3
+        <ul class="menuSub">
+          <li><a href="#">menu3-1</a></li>
+          <li><a href="#">menu3-2</a></li>
+        </ul>
+      </li>
+      -->
+    </ul>
+  </div>
 
   <div id="dialog1" style="display:none;">
     <input class="inarea" type="search" name="search_str" id="search_str">

data/lib/template/js/main.js

@@ -115,7 +115,7 @@ function autocomp(id, file_kind) {
         },
         source: function (req, resp) {
             $.ajax({
-                url: "http://localhost:58656/search?path=" + $("#" + id).val() + "&kind=" + file_kind,
+                url: "search?path=" + $("#" + id).val() + "&kind=" + file_kind,
                 type: "GET",
                 cache: false,
                 dataType: "json",
@@ -148,7 +148,7 @@ function autocomp_history(id, file_name) {
         },
         source: function (req, resp) {
             $.ajax({
-                url: "http://localhost:58656/history/" + file_name,
+                url: "history/" + file_name,
                 type: "POST",
                 cache: false,
                 dataType: "json",
@@ -291,6 +291,7 @@ function setting_dialog(open_id, dialog_id, json_file) {
                                 //console.log("type=" + s[i].type);
                             }
                         }
+                        // Jsonデータをサーバに送信
                         $ws.send("setting:" + JSON.stringify(json_data));
                     });
                     $(this).dialog("close");
@@ -303,6 +304,57 @@ function setting_dialog(open_id, dialog_id, json_file) {
     });
 }
 
+// 設定読み込み
+function load_setting(open_id) {
+    document.getElementById(open_id).onclick = async () => {
+        [fileHandle] = await window.showOpenFilePicker();
+        const file = await fileHandle.getFile();
+        const json_data = await file.text();
+        console.log(json_data);
+        // Jsonデータをサーバに送信
+        $ws.send("setting:" + json_data);
+    };
+}
+
+// 設定保存
+function save_setting(open_id, json_file) {
+    document.getElementById(open_id).onclick = async () => {
+        var json_data = ""
+        $.ajax({
+            // jsonの読み込み
+            type: "GET",
+            url: json_file, // ファイルパス（相対パス）
+            dataType: "json", // ファイル形式
+            async: false // 非同期通信フラグ
+        }).then(
+            function (json) {
+                // 読み込み成功時の処理
+                json_data = JSON.stringify(json, null, 2);
+                console.log("json=" + json_data);
+            },
+            function () {
+                // 読み込み失敗時の処理
+                console.log("読み込みに失敗しました");
+            }
+        );
+        // Jsonを保存
+        const opts = {
+            suggestedName: 'setting.json',
+            types: [{
+                description: 'Text file',
+                accept: { 'text/plain': ['.json'] },
+            }],
+        };
+        // ファイルをどこにどんな名前で保存するか訊くダイアログを表示
+        const saveHandle = await window.showSaveFilePicker(opts)
+        // 保存先ファイルに書き込み準備
+        const writable = await saveHandle.createWritable();
+        // 先程同様に書き込んで終了
+        await writable.write(json_data);
+        await writable.close();
+    };
+}
+
 function get_dirname(path) {
     var result = path.replace(/\\/g, '/').replace(/\/[^\/]*$/, '');
     if (result.match(/^[^\/]*\.[^\/\.]*$/)) {
@@ -324,12 +376,26 @@ function openFile(file) {
 $(document).ready(function () {
 
     // サーバに接続
-    server_connect("ws://localhost:58656/wsserver")
+    server_connect("ws://localhost:40173/wsserver")
     window.onload = function (e) {
         // サーバに接続
-        //server_connect("ws://localhost:58656/wsserver")
+        //server_connect("ws://localhost:40173/wsserver")
     }
 
+    // menu
+    $(function () {
+        $(".menu li").hover(
+            function () {
+                //クラス名「open」を付与する
+                $(this).children(".menuSub").addClass("open");
+                //hoverが外れた場合
+            }, function () {
+                //クラス名「open」を取り除く
+                $(this).children(".menuSub").removeClass("open");
+            }
+        );
+    });
+
     // ウインドウサイズ
     var width = 800;
     var height = 600;
@@ -358,6 +424,15 @@ $(document).ready(function () {
         //console.log("auto_scroll=" + $auto_scroll);
     });
 
+    // 設定ダイアログ
+    setting_dialog("setting", "setting_dialog", "config/setting.json");
+
+    // 設定保存
+    save_setting("save_setting", "config/setting.json");
+
+    // 設定読み込み
+    load_setting("load_setting");
+
     // ハンドラ登録
     $("#stop").click(function () {
         send_message("stop");
@@ -368,12 +443,11 @@ $(document).ready(function () {
         send_message("exec:" + $("#upFile").val());
     });
 
+
     select_file_dialog("search_str", "file", "dialog1", "select_file", "upFile");
 
     select_file_dialog("search_str2", "dir", "dialog2", "select_dir", "upDir");
 
-    setting_dialog("setting", "setting_dialog", "config/setting.json");
-
     autocomp_history("upFile", "history.json")
 
 });

data/lib/template/start.rb

@@ -51,7 +51,13 @@ dir = File.dirname(File.expand_path(__FILE__))
 FileUtils.cd dir
 
 # ディレクトリ作成
-$home_dir = ENV["HOME"] + "/" + dir.split("/")[-1] + "/"
+pp ARGV
+if ARGV[0] == "test"
+  $home_dir = "./"
+  ARGV = []
+else
+  $home_dir = ENV["HOME"] + "/" + dir.split("/")[-1] + "/"
+end
 puts "home_dir=#{$home_dir}"
 FileUtils.mkdir_p("#{$home_dir}/logs")
 FileUtils.mkdir_p("#{$home_dir}/history")

data/lib/template/wsserver.rb

@@ -97,12 +97,17 @@ class WsServer < Sinatra::Base
           end
           if msg =~ /^setting:/
             json_string = msg.gsub(/^setting:/, "")
-            json = JSON.parse(json_string)
-            File.open("#{$home_dir}/config/setting.json", "w") do |w|
-              w.puts JSON.pretty_generate(json)
+            begin
+              json = JSON.parse(json_string)
+              File.open("#{$home_dir}/config/setting.json", "w") do |w|
+                w.puts JSON.pretty_generate(json)
+              end
+              json_config = config_json_hash(json)
+              $app.set_config(json_config)
+            rescue
+              # jsonファイルではない
+              ws_send("app_end:error")
             end
-            json_config = config_json_hash(json)
-            $app.set_config(json_config)
           end
           if msg =~ /^openfile:/
             file = msg.gsub(/^openfile:/, "")

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: browser_app_base
 version: !ruby/object:Gem::Version
-  version: 0.1.2
+  version: 0.1.3
 platform: ruby
 authors:
 - masataka kuwayama
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2022-01-26 00:00:00.000000000 Z
+date: 2022-08-21 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: sinatra
@@ -113,6 +113,9 @@ files:
 - bin/create_browser_app.rb
 - bin/start_sample.rb
 - browser_app_base.gemspec
+- img/app.png
+- img/setting.png
+- img/setting_menu.png
 - lib/browser_app_base.rb
 - lib/browser_app_base/version.rb
 - lib/template/app_load.rb