cpee-frames 1.0.6 → 2.0.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: '08d58fb0e3ead41a726a13e9c2882566ce9517b33db09d2a598f3d4c309efce3'
-  data.tar.gz: 5a11e363e355246150f36896193d5ca42524af006438470e11770f17336a7647
+  metadata.gz: 307042175036cde47b123d2754cdd44a8348f41a14560f32790d533a7c6ce6f7
+  data.tar.gz: f1e6c989dad86242bab7086e3f9eba0233b3f7883d2ff473dfce439caeb8d379
 SHA512:
-  metadata.gz: ae2f0971be48e1ec132cd40822962d8b0c1845112790fcf02e0378f6d61624869e44890402b9c0072b22c5771e2405761d0cbf268f9520184c500030d6c7ebbc
-  data.tar.gz: 69dc3c99cd8bf566d329354d44663e80b8d4bcc17950d2ef2507945549f223fc962bf2ba17ba53aaa7785740a01747eb346549855a84063edb7b4136533c4b23
+  metadata.gz: 16b54380b6ef43d0b0448c0776afe1ceaa1b8e434135a2b8aae380b55984482f4d1069bbf03f28f550bcb14f5cbabe8ba7a577ffb229db35230cb1d288a2c4e6
+  data.tar.gz: 06c4ffce6e21dbd1327540090badc22a396ef6105ca37ff7d18aebfeb80eb01af53a1e572db1c09b9fed9a52d184eb3e7056e7803178172ec40143866d485c13

data/cpee-frames.gemspec

@@ -1,6 +1,6 @@
 Gem::Specification.new do |s|
   s.name             = "cpee-frames"
-  s.version          = "1.0.6"
+  s.version          = "2.0.0"
   s.platform         = Gem::Platform::RUBY
   s.license          = "GPL-3.0"
   s.summary          = "Dashboard management service with UI and backend for the cpee.org family of workflow management tools"

data/lib/cpee-frames/frames.xml

@@ -31,8 +31,6 @@
     <parameter name="ly" type="nonNegativeInteger"/>
     <parameter name="x_amount" type="nonNegativeInteger"/>
     <parameter name="y_amount" type="nonNegativeInteger"/>
-    <parameter name="button" type="string"/>
-    <parameter name="style" type="string"/>
     <parameter name="urls" type="string"/>
     <parameter name="default" type="string"/>
   </message>
@@ -42,8 +40,6 @@
     <parameter name="ly" type="nonNegativeInteger"/>
     <parameter name="x_amount" type="nonNegativeInteger"/>
     <parameter name="y_amount" type="nonNegativeInteger"/>
-    <parameter name="button" type="string"/>
-    <parameter name="style" type="string"/>
     <parameter name="urls" type="string"/>
     <parameter name="default" type="string"/>
   </message>
@@ -126,10 +122,6 @@
         <post />
       </resource>
 
-      <resource relative="test">
-        <put in="string"/>
-      </resource>
-
       <resource relative='handler'>
         <post />
         <resource relative='sse'>

data/lib/cpee-frames/implementation.rb

@@ -39,7 +39,6 @@ module CPEE
       return true
     end
 
-
     # https://coderwall.com/p/atyfyq/ruby-string-to-boolean
     # showbutton
     refine String do #{{{
@@ -101,7 +100,7 @@ module CPEE
         file = File.read(path)
         data_hash = JSON::parse(file)
 
-        #check if new frame overlaps others if it does, delete overlapped frames
+        # check if new frame overlaps others if it does, delete overlapped frames
         data_hash["data"].each do | c |
           if CPEE::Frames::overlap?(c['lx'], c['ly'], c['rx'], c['ry'], @p[1].value.to_i, @p[2].value.to_i, (@p[1].value.to_i + @p[3].value.to_i - 1), (@p[2].value.to_i + @p[4].value.to_i - 1))
             data_hash["data"].delete(c)
@@ -109,29 +108,27 @@ module CPEE
         end
 
         #check if url is set
-        if @p[7].value != ""
-          urls = JSON::parse(@p[7].value);
+        if @p[5].value != ""
+          urls = JSON::parse(@p[5].value);
 
-          if @p[8].value == ""
-            hash = {lx: @p[1].value.to_i, ly: @p[2].value.to_i, rx: (@p[1].value.to_i + @p[3].value.to_i - 1), ry: (@p[2].value.to_i + @p[4].value.to_i - 1), url: urls, showbutton: @p[5].value, style: @p[6].value, default: "{}", callback: @h['CPEE_CALLBACK']};
+          if @p[6].value == ""
+            hash = {lx: @p[1].value.to_i, ly: @p[2].value.to_i, rx: (@p[1].value.to_i + @p[3].value.to_i - 1), ry: (@p[2].value.to_i + @p[4].value.to_i - 1), url: urls, default: "{}", callback: @h['CPEE_CALLBACK']};
           else
-            hash = {lx: @p[1].value.to_i, ly: @p[2].value.to_i, rx: (@p[1].value.to_i + @p[3].value.to_i - 1), ry: (@p[2].value.to_i + @p[4].value.to_i - 1), url: urls, showbutton: @p[5].value,  style: @p[6].value, default: JSON::parse(@p[8].value), callback: @h['CPEE_CALLBACK']};
+            hash = {lx: @p[1].value.to_i, ly: @p[2].value.to_i, rx: (@p[1].value.to_i + @p[3].value.to_i - 1), ry: (@p[2].value.to_i + @p[4].value.to_i - 1), url: urls, default: JSON::parse(@p[6].value), callback: @h['CPEE_CALLBACK']};
           end
 
-          data_hash["data"].push(hash)
+          data_hash['data'].push(hash)
           File.write(path, JSON.dump(data_hash))
 
-          #only send active url to client
+          # only send active url to client
           infofile = File.join(data_dir,@r.last,'info.json')
           infojson = JSON::parse(File.read(infofile))
           hash["url"] = urls.find{ |h| h['lang'] == infojson["lang"]}['url']
 
-
           @a[0].send(JSON.dump(hash))
         else
           File.write(path, JSON.dump(data_hash))
-          hash = {lx: @p[1].value.to_i, ly: @p[2].value.to_i, rx: (@p[1].value.to_i + @p[3].value.to_i - 1), ry: (@p[2].value.to_i + @p[4].value.to_i - 1), url: "empty", showbutton: @p[5].value, style: @p[6].value, default: "{}", callback: @h['CPEE_CALLBACK']};
-
+          hash = {lx: @p[1].value.to_i, ly: @p[2].value.to_i, rx: (@p[1].value.to_i + @p[3].value.to_i - 1), ry: (@p[2].value.to_i + @p[4].value.to_i - 1), url: "empty", default: "{}", callback: @h['CPEE_CALLBACK']};
 
           @a[0].send(JSON.dump(hash))
         end
@@ -147,37 +144,35 @@ module CPEE
         file = File.read(path)
         data_hash = JSON::parse(file)
 
-        #check if new frame overlaps others if it does, delete overlapped frames
+        # check if new frame overlaps others if it does, delete overlapped frames
         data_hash["data"].each do | c |
           if CPEE::Frames::overlap?(c['lx'], c['ly'], c['rx'], c['ry'], @p[1].value.to_i, @p[2].value.to_i, (@p[1].value.to_i + @p[3].value.to_i - 1), (@p[2].value.to_i + @p[4].value.to_i - 1))
             data_hash["data"].delete(c)
           end
         end
 
-
-        #check if url is set
-        if @p[7].value != ""
-          urls = JSON::parse(@p[7].value);
-          if @p[8].value == ""
-            hash = {lx: @p[1].value.to_i, ly: @p[2].value.to_i, rx: (@p[1].value.to_i + @p[3].value.to_i - 1), ry: (@p[2].value.to_i + @p[4].value.to_i - 1), url: urls, showbutton: @p[5].value, style: @p[6].value, default: "{}", callback: @h['CPEE_CALLBACK']};
+        # check if url is set
+        if @p[5].value != ""
+          urls = JSON::parse(@p[5].value);
+          if @p[6].value == ""
+            hash = {lx: @p[1].value.to_i, ly: @p[2].value.to_i, rx: (@p[1].value.to_i + @p[3].value.to_i - 1), ry: (@p[2].value.to_i + @p[4].value.to_i - 1), url: urls, default: "{}", callback: @h['CPEE_CALLBACK']};
           else
-            hash = {lx: @p[1].value.to_i, ly: @p[2].value.to_i, rx: (@p[1].value.to_i + @p[3].value.to_i - 1), ry: (@p[2].value.to_i + @p[4].value.to_i - 1), url: urls, showbutton: @p[5].value, style: @p[6].value, default: JSON::parse(@p[8].value), callback: @h['CPEE_CALLBACK']};
+            hash = {lx: @p[1].value.to_i, ly: @p[2].value.to_i, rx: (@p[1].value.to_i + @p[3].value.to_i - 1), ry: (@p[2].value.to_i + @p[4].value.to_i - 1), url: urls, default: JSON::parse(@p[6].value), callback: @h['CPEE_CALLBACK']};
           end
-          data_hash["data"].push(hash)
+          data_hash['data'].push(hash)
           File.write(path, JSON.dump(data_hash))
 
-          #only send active url to client
+          # only send active url to client
           infofile = File.join(data_dir,@r.last,'info.json')
           infojson = JSON::parse(File.read(infofile))
           hash["url"] = urls.find{ |h| h['lang'] == infojson["lang"]}['url']
 
           File.write(File.join(data_dir,@r.last,'callback'),@h['CPEE_CALLBACK'])
 
-
           @a[0].send(JSON.dump(hash))
         else
           File.write(path, JSON.dump(data_hash))
-          hash = {lx: @p[1].value.to_i, ly: @p[2].value.to_i, rx: (@p[1].value.to_i + @p[3].value.to_i - 1), ry: (@p[2].value.to_i + @p[4].value.to_i - 1), url: "empty", showbutton: @p[5].value, style: @p[6].value, default: "{}", callback: @h['CPEE_CALLBACK']};
+          hash = {lx: @p[1].value.to_i, ly: @p[2].value.to_i, rx: (@p[1].value.to_i + @p[3].value.to_i - 1), ry: (@p[2].value.to_i + @p[4].value.to_i - 1), url: "empty", default: "{}", callback: @h['CPEE_CALLBACK']};
 
           File.write(File.join(data_dir,@r.last,'callback'),@h['CPEE_CALLBACK'])
 
@@ -216,7 +211,6 @@ module CPEE
         data_dir = @a[1]
         pp "in delete"
         if cbu = File.read(File.join(data_dir,@r.last,'callback'))
-          pp "XYZ"
           send = { 'operation' => @p[0].value }
           case send['operation']
             when 'result'
@@ -227,11 +221,11 @@ module CPEE
           Typhoeus.put(cbu, body: JSON::generate(send), headers: { 'content-type' => 'application/json'})
         end
 
-        #File.unlink(File.join(data_dir,@r.last,'callback')) rescue nil
-        #File.unlink(File.join(data_dir,@r.last,'cpeeinstance.url')) rescue nil
-        #File.unlink(File.join(data_dir,@r.last,'style.url')) rescue nil
-        #File.unlink(File.join(data_dir,@r.last,'document.xml')) rescue nil
-        #File.unlink(File.join(data_dir,@r.last,'info.json')) rescue nil
+        # File.unlink(File.join(data_dir,@r.last,'callback')) rescue nil
+        # File.unlink(File.join(data_dir,@r.last,'cpeeinstance.url')) rescue nil
+        # File.unlink(File.join(data_dir,@r.last,'style.url')) rescue nil
+        # File.unlink(File.join(data_dir,@r.last,'document.xml')) rescue nil
+        # File.unlink(File.join(data_dir,@r.last,'info.json')) rescue nil
 
         @a[0].send('reset')
         nil
@@ -247,7 +241,7 @@ module CPEE
           infofile = File.join(data_dir,@r[-2],'info.json')
           infojson = JSON::parse(File.read(infofile))
 
-          #remove not used languages
+          # remove not used languages
           file = JSON::parse(File.read(fname))
 
           file["data"].each do |child|
@@ -317,7 +311,7 @@ module CPEE
         fname = File.join(data_dir,@r[-2],'info.json')
         if File.exist? fname
           infojson = JSON::parse(File.read(fname))
-          Riddl::Parameter::Complex.new('value','application/json',infojson["langs"])
+          Riddl::Parameter::Complex.new('value','application/json',JSON::generate(infojson["langs"]))
         else
           @status = 404
         end
@@ -374,12 +368,6 @@ module CPEE
       end
     end #}}}
 
-    class OutputTest < Riddl::Implementation #{{{
-      def response
-        puts "Test"
-      end
-    end #}}}
-
     class Handler < Riddl::Implementation #{{{
       def response
         data_dir      = @a[1]
@@ -420,7 +408,7 @@ module CPEE
       end
     end #}}}
 
-    class SSE2 < Riddl::SSEImplementation #{{{
+    class SSE_Handler < Riddl::SSEImplementation #{{{
       def onopen
         signals = @a[0]
         signals.add self
@@ -498,7 +486,7 @@ module CPEE
             on resource 'handler' do
               run Handler, opts[:signals2]["handler"], opts[:data_dir] if post
               on resource 'sse' do
-                run SSE2, opts[:signals2]["handler"] if sse
+                run SSE_Handler, opts[:signals2]["handler"] if sse
               end
             end
 
@@ -512,21 +500,18 @@ module CPEE
               run GetLangs, opts[:data_dir] if get
               run SetLang, opts[:signals][idx], opts[:data_dir] if post 'lang'
             end
-            on resource 'style.url' do
-              run GetStyle, opts[:data_dir] if get
-            end
             on resource 'cpeeinstance.url' do
               run GetCpeeInstance, opts[:data_dir] if get
             end
+            on resource 'style.url' do
+              run GetStyle, opts[:data_dir] if get
+            end
             on resource 'info.json' do
               run GetInfo, opts[:data_dir] if get
             end
             on resource 'frames.json' do
               run GetFrames, opts[:data_dir] if get
             end
-            on resource 'test' do
-              run OutputTest if put
-            end
 
             on resource 'dataelements.json' do
               run SetDataElements, opts[:data_dir] if post

data/lib/cpee-frames/ui/template.html

@@ -49,11 +49,10 @@
     <script>
       if (location.href.match(/\/$/) == null) {
         location.href = location.href + '/';
-        }
+      }
     </script>
   </head>
   <body is="x-ui">
-    <div id="container">
-    </div>
+    <div id="container"></div>
   </body>
 </html>

data/lib/cpee-frames/ui/tutorial.html

@@ -45,126 +45,107 @@
     </script>
   </head>
   <body is="x-ui">
-    <div id="container">
-
       First Steps:<br>
-        <ul>
-
-          <li>define Endpoint: *adapt to your needs*</li>
-          <ul>
-            <li>init: https-post://your.server/frames/</li>
-            <li>frames: https-put://your.server/frames/</li>
-          </ul>
-          <li>define Data Element: (url where your frame will be reached)</li>
-          <ul>
-            <li><a href="getConfigs">check if frame is not already in use </a></li>
-            <li>frameID: YourFrameName</a></li>
-          </ul>
-          <li>Create Init Activity</li>
-          <ul>
-            <li>Create a new "Service Call with Script"</li>
-            <li>Set the Endpoint to "init"</li>
-            <li>Set your arguments e.g. width: 10, height:10, languge: de-at and some title</li>
-            <li>Set the Prepare Code to: "endpoints.init = File.join(endpoints.init,data.frameID)" where data.frameID is the name from the variable we created before</li>
-          </ul>
-          <li>Create Frame Activity</li>
-          <ul>
-            <li>Create a new "Service Call with Script"</li>
-            <li>Set the Endpoint to "frames"</li>
-            <li>Set your argument Type to "Set UI and contion" (default option)
-            <li>Set your other arguments e.g. DisplacementLeft:0, top:0, width:10, Height:10</li>
-            <li>In Section "Form Url" click on the button "New Language"</li>
-            <li>Define the URL that should be displayed</li>
-            <li>Set the Prepare Code to: "endpoints.frames = File.join(endpoints.frames,data.frameID)" where data.frameID is the name from the variable we created before</li>
+      <ul>
 
-          </ul>
-          <li>Execute your Process</li>
-          <li>Open your frame URL (add the defined name (YourFrameName) to the url currently open in this browser Window</li>
+        <li>Define endpoints: *adapt to your needs*. The brackets are necessary</li>
+        <ul>
+          <li>init: https-post://{your.server}/out/frames/{YourFrameName}</li>
+          <li>frames: https-put://{your.server}/out/frames/{YourFrameName}</li>
+          <li><a href="getConfigs">Check if YourFrameName is not already in use</a></li>
+        </ul>
+        <li>Create <strong>Init</strong> activity</li>
+        <ul>
+          <li>Create a new "Service Call with Script"</li>
+          <li>Set the Endpoint to "init"</li>
+          <li>Set your arguments, e.g., width: 10, height:10, languge: de-at and some title</li>
         </ul>
+        <li>Create <strong>Frame</strong> activity</li>
+        <ul>
+          <li>Create a new "Service Call with Script"</li>
+          <li>Set the Endpoint to "frames"</li>
+          <li>Set your argument Type to "Set UI and contion" (default option)
+          <li>Set your other arguments, e.g., displacement left:0, top:0, width:10, height:10</li>
+          <li>In section "Page URL" click on the button "New Page/Language"</li>
+          <li>Define the URL that should be displayed</li>
+          <li>Add parameters, that are sent to the displayed page. You have to include https://cpee.org/out/frames/js/frames.js in the displayed HTML. Then you can access <em>cpee.data</em> and <em>cpee.callback</em></li>
+        </ul>
+        <li>Execute your Process</li>
+        <li>Open your frame URL - add (YourFrameName) to the URL currently open in this browser window</li>
+      </ul>
 
+      Other Steps:<br>
+      <ul>
 
-      Ohter Steps:<br>
+        <li>My new frame site process runs through once and then its done</li>
         <ul>
-
-          <li>My new frame site process runs through once and then its done</li>
-          <ul>
-            <li>Use an endless loop within your proces engine</li>
-            <li>Be aware that in case you do not wait for input at some point your loop will run a gazillion times per second!!!</li>
-          </ul>
-          <li>Ohhh nooo i forgot the process engine instance that drives my frames application</li>
-          <ul>
-            <li>In the case your site is not empty</li>
-            <ul>
-              <li>Inspect the site (ctrl+shift+c)</li>
-              <li>Find one of your iframes</li>
-              <li>Arguments "name" or "id" will give you the instance ID</li>
-            </ul>
-            <li>In the case your site is empty</li>
-            <ul>
-              <li>HAHA</li>
-              <li>Nah its not that bad, look in your process engine; the best thing to do is to use the design service next time</li>
-            </ul>
-          </ul>
+          <li>Use an endless loop within your proces engine</li>
+          <li>Be aware that in case you do not wait for input at some point your loop will run a gazillion times per second!!!</li>
         </ul>
-
-      There are more Ohter Steps?<br>
+        <li>Ohhh nooo i forgot the process engine instance that drives my frames application</li>
         <ul>
-          <li>My Frame needs to Return something to the process engine Step1</li>
-          <ul>
-            <li>Create a new "Service Call with Script"</li>
-            <li>Set the Endpoint to "frames"</li>
-            <li>Set your argument Type to "Set UI and wait for input"
-            <li>Set your other arguments e.g. DisplacementLeft:0, top:0, width:10, Height:10</li>
-            <li>In Section "Form Url" click on the button "New Language"</li>
-            <li>Define the URL that should be displayed</li>
-            <li>Set the Prepare Code to: "endpoints.frames = File.join(endpoints.frames,data.frameID)" where data.frameID is the name from the variable we created before</li>
-            <li>Set the Finalize Code to: "data.yourDataElementName = result</li>
-            <li>How to return data from your Frame? see Step2 (below)</li>
-          </ul>
-          <li>My Frame needs to Return something to the process engine Step2</li>
-          <ul>
-            <li>You have some fancy html site that wants to send oodles of data back to centurio</li>
-            <li>Within your frame call the javascript function parent.sendJson(window.name,yourJsonDataHere)</li>
-            <li>All you need to change is define "yourJsonDataHere"</li>
-          </ul>
-          <li>I want to delete some frames</li>
+          <li>In the case your site is not empty</li>
           <ul>
-            <li>Create a new "Service Call with Script"</li>
-            <li>Set the Endpoint to "frames"</li>
-            <li>Set your argument Type to "Set UI and contion" (default option)
-            <li>Set your other arguments e.g. DisplacementLeft:0, top:0, width:10, Height:10 to match the frames you would like to delete</li>
-            <li>Set the Prepare Code to: "endpoints.frames = File.join(endpoints.frames,data.frameID)" where data.frameID is the name from the variable we created before</li>
-            <li>Thats it</li>
+            <li>Inspect the site (ctrl+shift+c)</li>
+            <li>Find one of your iframes</li>
+            <li>The attribute "id" contains the callback URL, which contains your instance ID</li>
           </ul>
-          <li>Do i need to delete a frame in order to create one at that poisiton?</li>
+          <li>In the case your site is empty</li>
           <ul>
-            <li>Nope, when one frame overlaps one or multiple frames the overlapped ones will be deleted automatically</li>
+            <li>You did something wrong</li>
           </ul>
         </ul>
-
-
-
-    I Would like to use the Forms service:<br>
-      <ul>
-        <li>Will be described soon ;)</li>
       </ul>
 
-    Data Handling:<br>
+      More Helpful Tips:<br>
       <ul>
-        <li>Will be described soon ;)</li>
+        <li>Tip A: My process engine needs to receive something from a frame</li>
+        <ul>
+          <li>Create a new task "Service Call with Scripts"</li>
+          <li>Set the endpoint to "frames"</li>
+          <li>Set your argument type to "Set UI and wait for input"</li>
+          <li>Set your other arguments, e.g., displacement left:0, top:0, width:10, height:10</li>
+          <li>In section "Page URL" click on the button "New Page/Language"</li>
+          <li>Define the URL that should be displayed</li>
+          <li>Set the Finalize to: "data.yourDataElementName = result"</li>
+          <li>How to return data from your frame? See Tip B below</li>
+        </ul>
+        <li>Tip B: My Frame needs to return something to the process engine</li>
+        <ul>
+          <li>You have some fancy HTML site that wants to send oodles of data back to your cpee</li>
+          <li>Include https://cpee.org/out/frames/js/frames.js in your fancy HTML</li>
+          <li>Within your fancy HTML call the javascript function cpee_callback(cpee.callback,yourJsonDataHere)</li>
+          <li>All you need to change is define "yourJsonDataHere"</li>
+        </ul>
+        <li>Tip C: I want to delete some frames</li>
+        <ul>
+          <li>Create a new task "Service Call with Script"</li>
+          <li>Set the endpoint to "frames"</li>
+          <li>Set your argument type to "Set UI and continue" (default option)</li>
+          <li>Set your other arguments, e.g., displacement left:0, top:0, width:10, height:10 to match the frames you would like to delete</li>
+          <li>Execute</li>
+        </ul>
+        <li>Tip D: I want to access the data that i sent to my fancy HTML</li>
+        <ul>
+          <li>You have some fancy HTML site that serves as a template and wants to display oodles of data sent from the cpee</li>
+          <li>Include https://cpee.org/out/frames/js/frames.js in your fancy HTML</li>
+          <li>Access the data with <em>cpee.data</em>. Its JSON</li>
+          <li>Be careful. If you want to access the <em>cpee.data</em> you can only do so after the data is received. For jquery use <em>$(document).on('cpee:message',()=>{...})</em> instead of <em>$(document).ready(()=>{...})</em></li>
+        </ul>
       </ul>
 
-
-    Other questions you could have: (note this is not other steps!)<br>
+      Questions:
       <ul>
-        <li>I want to do a circular iframe</li>
+        <li>Question: Do i need to delete a frame in order to create one at that position?</li>
+        <ul>
+          <li>Nope, when one frame overlaps one or multiple frames, the overlapped ones will be deleted automatically</li>
+        </ul>
+        <li>Question: I want to do a circular iframe. Can I?</li>
         <ul>
           <li>Why?</li>
-          <li>You have to manage this within your html site</li>
+          <li>No!</li>
+          <li>You have to manage this within your fancy HTML</li>
         </ul>
       </ul>
-
-    </div>
-
   </body>
 </html>

data/server/frames

@@ -18,6 +18,8 @@
 
 if File.exist?(File.join(__dir__,'..','lib','cpee-frames','implementation.rb'))
   require_relative File.join(__dir__,'..','lib','cpee-frames','implementation')
+elsif File.exist?(File.join(Dir.home,'Projects','cpee-frames','lib','cpee-frames','implementation.rb'))
+  require_relative File.join(Dir.home, 'Projects','cpee-frames','lib','cpee-frames','implementation')
 else
   require 'cpee-frames/implementation'
 end

data/tools/cpee-frames

@@ -47,14 +47,14 @@ exname = File.basename($0)
 
 ARGV.options { |opt|
   opt.summary_indent = ' ' * 2
-  opt.summary_width = 15
-  opt.banner = "Usage:\n#{opt.summary_indent}#{exname} new [DIR] | newui [DIR]\n"
+  opt.summary_width = 11
+  opt.banner = "Usage:\n#{opt.summary_indent}#{exname} new [DIR] | cpui [DIR]\n"
   opt.on("Options:")
   opt.on("--help", "-h", "This text") { puts opt; exit }
 	opt.on("")
-  opt.on(wrap("new [DIR]         scaffolds a sample logging service. Add a handler to a cpee instance to experience the pleasure.",78,18,0))
+  opt.on(wrap("new [DIR]     scaffolds a sample frames. It has built-in documentation.",78,14,0))
 	opt.on("")
-  opt.on(wrap("newui [DIR]       scaffolds css/js directors that are use by the UI into your webserver dir."))
+  opt.on(wrap("cpui [DIR]    scaffolds css/js directors that are use by the UI into your webserver dir.",78,14,0))
   opt.parse!
 }
 if (ARGV.length != 2)
@@ -72,7 +72,7 @@ if command == 'new'
   else
     puts 'Directory already exists.'
   end
-elsif command == 'newui'
+elsif command == 'cpui'
   if !File.exist?(dir)
     FileUtils.cp_r(File.join(curpath,'..','ui'),dir)
   else

data/ui/examples/button.html

@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
+    <title>Button</title>
+    <script type="text/javascript" src="/js_libs/jquery.min.js"></script>
+    <script type="text/javascript" src="../js/frames.js"></script>
+    <style>
+      :root {
+        --x-ui-outside-color: #000000;
+        --x-ui-border-color: #a1a1a1;
+
+        --x-ui-content-border-color: #ffed00;
+        --x-ui-content-light-background: #f0f0f0;
+        --x-ui-content-hover-background: #99cce660;
+
+        --x-frames-back: #ffffff;
+      }
+
+      body {
+        margin: 0;
+        padding: 0;
+        background-color: var(--x-frames-back);
+        height: 100vh;
+      }
+      div {
+        height: 100%;
+        padding: 1em;
+        box-sizing: border-box;
+      }
+      button {
+        height: 100%;
+        width: 100%;
+        box-sizing: border-box;
+      }
+
+    </style>
+    <script>
+      // you have access to cpee.data and cpee.callback, because frames.js (remote includable) fills it through postMessage
+    </script>
+
+  </head>
+  <body>
+    <div>
+      <button onclick="cpee_callback(cpee.callback,cpee.data)" value="ok">Measure</button>
+    </div>
+  </body>
+</html>

data/ui/examples/questions.css

@@ -0,0 +1,23 @@
+:root {
+  --x-custom-border-color: #a1a1a1;
+  --x-custom-outside-color: #ffffff;
+  --x-custom-background-color: #ffffff;
+  --x-custom-light-text-color: #333;
+  --x-custom-light-back-color: #e8e8e8;
+  --x-custom-link-color: #425d73;
+  --x-custom-content-border-left-color: #eaeaea;
+  --x-custom-content-border-right-color: #777777;
+  --x-custom-content-light-background: #e8e8e8;
+  --x-custom-content-active-background: #c061cb;
+  --x-custom-content-hover-background: #99cce660;
+}
+
+@font-face {
+  font-family: adawaita-sans;
+  src: url(/js_libs/AdwaitaSans-Regular.ttf);
+}
+
+body {
+  font-family: adawaita-sans;
+  margin: 1em;
+}