frames

@@ -27,7 +27,7 @@ require 'typhoeus'
 # https://centurio.work/customers/evva/flow/?monitor=https://centurio.work/flow-test/engine/729/
 
 class Get < Riddl::Implementation
-  def response    
+  def response
     if @r[0] == 'test'
       Riddl::Parameter::Complex.new('ui','text/html',File.open(File.join(__dir__,'template','test.html')))
     elsif @r[0] == 'menu'
@@ -43,18 +43,16 @@ end
 class InitFrame < Riddl::Implementation
   def response
     Dir.mkdir(File.join('data',@r.last)) rescue nil
-    
+
     if @p[0].value.to_s.strip.empty?
-      File.write(File.join('data',@r.last,'style.url'), "../css/frames.css")
-    else
       File.write(File.join('data',@r.last,'style.url'),@p[0].value)
     end
-    
+
     File.write(File.join('data',@r.last,'frames.json'),JSON.dump(JSON.parse('{"data":[]}')))
-    
+
     #for handler
     File.write(File.join('data',@r.last,'dataelements.json'),JSON.dump(JSON.parse('{"data":[]}')))
-    
+
     File.write(File.join('data',@r.last,'info.json'),JSON.dump(JSON.parse('{"x_amount":' + @p[2].value + ', "y_amount":' + @p[3].value + ', "lang":"' + @p[4].value  + '", "langs":["' + @p[4].value +  '"]}')))
 
     File.write(File.join('data',@r.last,'callback'),@h['CPEE_CALLBACK'])
@@ -64,13 +62,12 @@ class InitFrame < Riddl::Implementation
     nil
   end
 
-  
+
   #def headers
   #  Riddl::Header.new('CPEE-CALLBACK', 'true')
   #end
 end
 
-
 #https://coderwall.com/p/atyfyq/ruby-string-to-boolean
 #showbutton
 class String
@@ -81,27 +78,33 @@ class String
   end
 end
 
-
 class NewFrameSet < Riddl::Implementation
-  def response    
-  
-    
+  def response
+
+
     path = File.join('data',@r.last,'frames.json')
     file = File.read(path)
     data_hash = JSON::parse(file)
-    
+
     #check if new frame overlaps others if it does, delete overlapped frames
     data_hash["data"].each do | c |
       if doOverlap(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
-    
-    urls = JSON::parse(@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, showbutton: @p[5].value, default: JSON::parse(@p[7].value), callback: @h['CPEE_CALLBACK']};
+
+    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']};
+    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']};
+    end
+
     data_hash["data"].push(hash)
     File.write(path, JSON.dump(data_hash))
-    
+
     #only send active url to client
     infofile = File.join('data',@r.last,'info.json')
     infojson = JSON::parse(File.read(infofile))
@@ -109,36 +112,32 @@ class NewFrameSet < Riddl::Implementation
 
     @a[0].send(JSON.dump(hash))
     nil
- 
+
   end
 end
 
-
-
 class NewFrameWait < Riddl::Implementation
-  def response    
+  def response
     path = File.join('data',@r.last,'frames.json')
     file = File.read(path)
     data_hash = JSON::parse(file)
-    
+
     #check if new frame overlaps others if it does, delete overlapped frames
     data_hash["data"].each do | c |
       if doOverlap(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
-    
-    urls = JSON::parse(@p[6].value);
-    if @p[7].value == ""
-      puts "AAA";
-      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, default: "{}", callback: @h['CPEE_CALLBACK']};
+
+    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']};
     else
-      puts "BBB";
-      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, default: JSON::parse(@p[7].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, showbutton: @p[5].value, style: @p[6].value, default: JSON::parse(@p[8].value), callback: @h['CPEE_CALLBACK']};
     end
     data_hash["data"].push(hash)
     File.write(path, JSON.dump(data_hash))
-    
+
     #only send active url to client
     infofile = File.join('data',@r.last,'info.json')
     infojson = JSON::parse(File.read(infofile))
@@ -152,38 +151,32 @@ class NewFrameWait < Riddl::Implementation
   end
 end
 
-
 class DeleteFrame < Riddl::Implementation
-  def response    
+  def response
     path = File.join('data',@r.last,'frames.json')
     file = File.read(path)
     data_hash = JSON::parse(file)
-    
+
     data_hash["data"].each do | c |
       if doOverlap(c['lx'], c['ly'], c['rx'], c['ry'], @p[0].value.to_i, @p[1].value.to_i, (@p[0].value.to_i + 1), (@p[1].value.to_i + 1))
         data_hash["data"].delete(c)
       end
     end
-    
+
     File.write(path, JSON.dump(data_hash))
   end
 end
 
-
-def doOverlap(l1x, l1y, r1x, r1y, l2x, l2y, r2x, r2y) 
+def doOverlap(l1x, l1y, r1x, r1y, l2x, l2y, r2x, r2y)
   if l1x > r2x || l2x > r1x
       return false;
   end
   if l1y > r2y || l2y > r1y
       return false;
   end
-  return true; 
+  return true;
 end
 
-
-
-
-
 class Delete < Riddl::Implementation
   def response
     if cbu = File.read(File.join('data',@r.last,'callback'))
@@ -208,22 +201,21 @@ class Delete < Riddl::Implementation
   end
 end
 
-
 class GetFrames < Riddl::Implementation #{{{
   def response
     fname = File.join('data',@r[-2],'frames.json')
     if File.exists? fname
-    
+
       infofile = File.join('data',@r[-2],'info.json')
       infojson = JSON::parse(File.read(infofile))
-      
+
       #remove not used languages
       file = JSON::parse(File.read(fname))
-      
+
       file["data"].each do |child|
         child["url"] = child["url"].find{ |h| h['lang'] == infojson["lang"]}['url']
       end
-      
+
       Riddl::Parameter::Complex.new('value','application/json',JSON.dump(file))
     else
       @status = 404
@@ -231,23 +223,22 @@ class GetFrames < Riddl::Implementation #{{{
   end
 end #}}}
 
-
 class SetDataElements < Riddl::Implementation #{{{
-  def response    
+  def response
     savejson = @p.map { |o| Hash[o.name, o.value] }.to_json
     path = File.join('data',@r[0],'dataelements.json')
     File.write(path, savejson)
-    
+
     #puts xyz
-    
+
     #puts JSON.pretty_generate(@p.to_json)
-    
-    
-    
+
+
+
     #puts @p.length()
     #puts @p[0].name
     #puts @p[0].value
-    
+
     #fname = File.join('data',@r[-2],'dataelements.json')
     #if File.exists? fname
     #  Riddl::Parameter::Complex.new('value','application/json',File.read(fname))
@@ -268,7 +259,6 @@ class GetDataElements < Riddl::Implementation #{{{
   end
 end #}}}
 
-
 class GetInfo < Riddl::Implementation #{{{
   def response
     fname = File.join('data',@r[-2],'info.json')
@@ -298,17 +288,17 @@ class SetLang < Riddl::Implementation #{{{
     if File.exists? fname
       infojson = JSON::parse(File.read(fname))
       infojson["lang"] = @p[0].value
-      
-      
+
+
       #add to langs
       if !infojson["langs"].include?(@p[0].value)
         infojson["langs"].push(@p[0].value)
       end
-      
+
       File.write(fname, JSON.dump(infojson))
-      
-      
-      
+
+
+
       @a[0].send('reset')
       nil
     else
@@ -339,56 +329,46 @@ class GetCpeeInstance < Riddl::Implementation #{{{
   end
 end #}}}
 
-
-
 class OutputTest < Riddl::Implementation #{{{
   def response
     puts "Test"
   end
 end #}}}
 
-
-
-
-
 class Handler < Riddl::Implementation
-  def response    
+  def response
     puts "handler"
-  
+
       topic         = @p[1].value
       event_name    = @p[2].value
       notification  = JSON.parse(@p[3].value.read)
-      
-      
+
+
       instancenr = notification['instance']
       content = notification['content']
       activity = content['activity']
       parameters = content['parameters']
       receiving = content['received']
-  
+
       #puts instancenr
       #puts activity
       puts content['values']
-      
-      
+
+
       if content['values']&.any?
         #puts alldata['ausfuehrungen']
         puts "writing file"
         path = File.join('data',@r[0],'dataelements.json')
         File.write(path, JSON.dump(content['values']))
       end
-  
+
       @a[0].send(@r[0])
       nil
-  
+
     nil
   end
 end
 
-
-
-
-
 class SSE < Riddl::SSEImplementation #{{{
   def onopen
     signals = @a[0]
@@ -404,8 +384,6 @@ class SSE < Riddl::SSEImplementation #{{{
   end
 end #}}}
 
-
-
 class SSE2 < Riddl::SSEImplementation #{{{
   def onopen
     signals = @a[0]
@@ -471,27 +449,19 @@ server = Riddl::Server.new(File.join(__dir__,'/frames.xml'), :host => 'localhost
 
       run Get, "test" if get
       run InitFrame, opts[:signals][idx] if post 'input'
-      
+
       run NewFrameSet, opts[:signals][idx] if put 'sframe'
       run NewFrameWait, opts[:signals][idx] if put 'wframe'
-      
+
       run DeleteFrame, opts[:signals][idx] if post 'deleteframe'
-      
-      
-      
-      
-      
-      
-      
+
       on resource 'handler' do
-        run Handler, opts[:signals2]["handler"] if post 
+        run Handler, opts[:signals2]["handler"] if post
         on resource 'sse' do
           run SSE2, opts[:signals2]["handler"] if sse
         end
-      end 
-      
-      
-      
+      end
+
       run Delete, opts[:signals][idx] if delete 'opa'
       run Delete, opts[:signals][idx] if delete 'opb'
       on resource 'sse' do
@@ -516,13 +486,13 @@ server = Riddl::Server.new(File.join(__dir__,'/frames.xml'), :host => 'localhost
       on resource 'test' do
         run OutputTest if put
       end
-      
+
       on resource 'dataelements.json' do
         run SetDataElements if post
         run GetDataElements if get
       end
-      
-      
+
+
     end
   end
-end.loop!
+end.loop!

frames.xml

@@ -31,6 +31,7 @@
     <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>
@@ -41,6 +42,7 @@
     <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>

template/css/frames.css

@@ -1,24 +1,28 @@
-*{
+* {
   box-sizing: border-box;
   padding: 0;
   margin: 0;
 }
 
-
 :root {
   --grid-cols: 1;
   --grid-rows: 1;
 }
 
+body {
+  width: 100vw;
+  height: 100vh;
+}
+
 #container {
   display: grid;
   /*grid-template-rows: repeat(var(--grid-rows), 1fr); not working in Firefox*/
   grid-auto-rows: calc(100vh/var(--grid-rows));
   grid-auto-columns: calc(100vw/var(--grid-cols));
   grid-template-columns: repeat(var(--grid-cols), 1fr);
-  width: 100vw;
-  height: 100vh;
   overflow: hidden;
+  width: 100%;
+  height: 100%;
 }
 
 .grid-item {
@@ -37,8 +41,8 @@
 
 .formbutton{
   position: relative;
-  top: -6em;
-  right: 2em;
+  bottom: 4.8em;
+  right: 0.8em;
   z-index: 9;
   padding: 1em;
   float: right;

template/js/ui.js

@@ -15,7 +15,7 @@ function doOverlap(l1x, l1y, r1x, r1y, l2x, l2y, r2x, r2y) {
 }
 
 
-function makeFrame(lx, ly, rx, ry, content = "", id = "", defaultpara = "", showbutton = "") {
+function makeFrame(lx, ly, rx, ry, content = "", id = "", defaultpara = "", showbutton = "", style = "") {
   //check if rects overlap if they do remove old ones
   for (i = 0; i < window.storage.length; i++) {
     if(doOverlap(window.storage[i].lx, window.storage[i].ly, window.storage[i].rx, window.storage[i].ry, lx, ly, rx, ry)){
@@ -58,9 +58,10 @@ function makeFrame(lx, ly, rx, ry, content = "", id = "", defaultpara = "", show
   
   if(content != null && content != ""){
   
-    var fullurl = content + "?";
+    var fullurl = content;
     //encode default parameter in URL
     if(defaultpara != "{}"){
+      var fullurl = fullurl + "?";
       for (var key in defaultpara) {
         if (defaultpara.hasOwnProperty(key)) {
           fullurl = fullurl + key + "=" +  defaultpara[key] + "&";
@@ -69,16 +70,23 @@ function makeFrame(lx, ly, rx, ry, content = "", id = "", defaultpara = "", show
     }
     
     
-    //defaultpara
-    console.log(defaultpara);
-    
     
+    fullurl = encodeURI(fullurl);
     $(".item" + lx + "-" + ly).html("<iframe width=100% height=100% name='" + id +"' id='" + id +"' src='" + fullurl + "' title='' frameBorder='0' ></iframe>");
             
     if(showbutton){
       $(".item" + lx + "-" + ly).append('<button class="formbutton" type="button" onclick="sendForm(\'' + '.item' + lx + '-' + ly +'\', \'' + encodeURIComponent(id) + '\', \'' + lx  + '\', \'' + ly  + '\')">' + showbutton + '</button>')
     }
     
+    if(style){    
+      $(".item" + lx + "-" + ly).find("iframe").on('load', function(){
+        $(this).contents().find("head").append($("<link/>", 
+          { rel: "stylesheet", href: style, type: "text/css" }
+        ));
+      });      
+    }
+    
+    
     //hideRectangel(lx, ly, rx, ry)
   }
   else{
@@ -179,7 +187,7 @@ function showDocument() {
         url: 'frames.json',
         success: function(ret2) {
           for (i in ret2.data) {
-            makeFrame(ret2.data[i].lx,ret2.data[i].ly,ret2.data[i].rx,ret2.data[i].ry, ret2.data[i].url, ret2.data[i].callback, ret2.data[i].default, ret2.data[i].showbutton);
+            makeFrame(ret2.data[i].lx,ret2.data[i].ly,ret2.data[i].rx,ret2.data[i].ry, ret2.data[i].url, ret2.data[i].callback, ret2.data[i].default, ret2.data[i].showbutton, ret2.data[i].style);
           }
         }
       });
@@ -307,7 +315,7 @@ function init() {
         try {
           //alert(e.data)
           var frd = JSON.parse(e.data)
-          makeFrame(frd.lx,frd.ly,frd.rx,frd.ry, frd.url, frd.callback, frd.default, frd.showbutton);
+          makeFrame(frd.lx,frd.ly,frd.rx,frd.ry, frd.url, frd.callback, frd.default, frd.showbutton, frd.style);
         }
         catch (e) {
         }

template/template.html

@@ -20,7 +20,7 @@
 <html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
   <head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
-    <title>work frame</title>
+    <title>template frame</title>
 
     <!-- libs, do not modify. When local than load local libs. -->
     <script type="text/javascript" src="/js_libs/jquery.min.js"></script>
@@ -39,11 +39,12 @@
     <!-- custom stuff, play arround  -->
     <script type="text/javascript" src="../js/ui.js"></script>
     <script type="text/javascript" src="../js/language.js"></script>
+    <link rel="stylesheet" href="../css/frames.css" type="text/css"/>
     <link class='custom' rel="stylesheet" href="" type="text/css"/>
-    
-    
-    
-    <!-- Forms  
+
+
+
+    <!-- Forms
     <script src='https://centurio.work/out/forms/js/formio.full.min.js'></script>
     -->
     <script>

template/test.html

@@ -20,7 +20,7 @@
 <html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
   <head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
-    <title>work frame</title>
+    <title>test frame</title>
 
     <!-- libs, do not modify. When local than load local libs. -->
     <script type="text/javascript" src="/js_libs/jquery.min.js"></script>