CodePen Embed - #Lamp Frame Specification


<!DOCTYPE html>
<html lang="en">
<head>
    <title>Lamp Demo</title>
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">


  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

      
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
  
<script src="https://assets.codepen.io/2527236/compress.js"></script>  


  <script>

    var app;

    $(document).ready(function() {
      app = Lamp();
      app.start()
    });

  </script>
</head>
<body>
  
<div class="flex_container">
 <table style="width:100%">
  <tr>
    <th>Lamp Demo</th>
    <th>UML Documentation</th>
    <th>Log</th>
    <th>Frame Spec <button id="full_spec_btn" class="btn btn-primary" data-toggle="modal" data-target="#full_spec_modal">View Full Spec</button></th>
    <th>JavaScript</th>
  </tr>
  <tr>
        <td width=200px >
      <div class="container_ top-container_">
          <div class="demo-widget-header_">
              
          </div>

          <div class="panel_ panel-default_">
              <div id="content" class="panel-body_">


                  <table>
                      <div id="button_div">                      <button id="toggleBtn">Toggle</button>
                      </div>
                      <div id="image_div">
                        <img id='light_img'  class="elem" src=""  />
                      </div>
                      
                  </table>
              </div>
          </div>
      </div>
    </td>
        <td>
      <img id="uml_target" class="elem" >
    </td>
    <td class="log_col">
      <textarea id='output' cols=30 rows=10>         </textarea>
    </td>
        <td>
      <pre id="frame_code"></pre>
    </td>
    <td>
       <pre id="js_code"></pre>   
    </td>



  </tr>
</table>
 </div>
  
    
  <!-- Modal -->
<div class="modal fade" id="full_spec_modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">The Full Monte</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <pre>
--- try out on http://framepiler.frame-lang.org

#LampSpec

    -interface-

    toggle

    -machine-

    $Off
        |toggle|
            -> $On ^
    $On
        |>|
            turnOn() ^
        |<|
            turnOff() ^
        |toggle|
            -> $Off ^

    -actions-

    turnOn
    turnOff
##
        </pre>
      </div>
    </div>
  </div>
</div>
  
</body>
</html>

.flex_container {
  display: flex;
  height: 400px; /* Or whatever */
}

.elem {
  height:400px;
}

table {
  margin-top: 10px; 
}

table, th, td {
  border: 1px solid lightgrey;
  border-collapse: collapse;
  text-align: center !important;
}

.log_col {
  width: 300px;
}

td {
  padding-top: 10px;
  text-align: center
}

#frame_code, #js_code {
  width: 350px;
  margin: 0 0 0 10px;
  padding: 0px;
  text-align: left
}

#output {
  width: 250px;
}

tbody {
    vertical-align: top
}

.demo-widget-header {
    text-align: center;
    width: 150px;
}


.top-container {
    width: 150px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.panel-default {
    width: 150px;
    margin-left: auto;
    margin-right: auto;
}

/*************************************************************

--- see at https://codepen.io/frame-lang/pen/e96568889939d3bc112b16528900c352
--- try out on http://framepiler.frame-lang.org

#LampSpecWithInit

    -interface-

    start @(|>>|)
    toggle

    -machine-

    $Init
        |>>|
            initLamp()
            -> $Off ^
            
    $Off
        |>|
            turnOff() ^    
        |toggle|
            -> $On ^
            
    $On
        |>|
            turnOn() ^
        |toggle|
            -> $Off ^

    -actions-

    initLamp
    turnOn
    turnOff
##


***************************************************************/

//-------------------------------------------------//
 //                                                 //
 //                 Implementation                  //
 //                                                 //
 //-------------------------------------------------//


 var FrameEvent = function(message, parameters) {

    var that = {};

    that._message = message;
    that._parameters = parameters;
    that._return = null;

    return that;
};

//-------------------------------------------------//
//-------------------------------------------------//

// emitted from framec_v0.3.36
let LampSpecWithInit = function () {
    
    let that = {};
    that.constructor = LampSpecWithInit;
    
    //===================== Interface Block ===================//
    
    that.start = function () {
        let e = FrameEvent(">>",null);
        _state_(e);
    }
    
    that.toggle = function () {
        let e = FrameEvent("toggle",null);
        _state_(e);
    }
    
    //===================== Machine Block ===================//  //  see at https://codepen.io/frame-lang/pen/e96568889939d3bc112b16528900c352
	
    
    let _sInit_ = function (e) {
        if (e._message == ">>") {
            that.initLamp_do();
            _transition_(_sOff_);
            return;
        }
    }
    
    let _sOff_ = function (e) {
        if (e._message == ">") {
            that.turnOff_do();
            return;
        }
        else if (e._message == "toggle") {
            _transition_(_sOn_);
            return;
        }
    }
    
    let _sOn_ = function (e) {
        if (e._message == ">") {
            that.turnOn_do();
            return;
        }
        else if (e._message == "toggle") {
            _transition_(_sOff_);
            return;
        }
    }
    
    //===================== Actions Block ===================//
    
    that.initLamp_do = function () {}
    that.turnOn_do = function () {}
    that.turnOff_do = function () {}
    
    //=============== Machinery and Mechanisms ==============//
    
    let _state_ = _sInit_;
    
    let _transition_ = function(newState) {
        let exitEvent = FrameEvent("<",null);
        _state_(exitEvent);
        _state_ = newState;
        let enterEvent = FrameEvent(">",null);
        _state_(enterEvent);
    }
    
    return that; 
};

/********************
let LampSpecWithInit = function () {
	let that = LampSpecWithInit.call(this);
	that.initLamp_do = function () {}
	that.turnOn_do = function () {}
	that.turnOff_do = function () {}
	return that;
};
********************/






let Lamp = function () {
	let that = LampSpecWithInit.call(this);
  
  that.initLamp_do = function () {
    $("#toggleBtn").on("click", that.toggle);  
  }
  
	that.turnOn_do = function () {
    var currentVal =  $("#output").val()
    $("#light_img").attr("src", "https://assets.codepen.io/2527236/light_on.png");
    $("#output").val("On\n" + currentVal) 
    
        let s = `
@startuml
state Init {
}
state Off {
}
state On #green {
}
[*] --> Init
Init --> Off : &#124;>>&#124;
Off --> On : &#124;toggle&#124;
On --> Off : &#124;toggle&#124;
@enduml
`
   compress(s)
    
    let frame_code = `
$On
    |>|
        turnOn() ^
    |toggle|
        -> $Off ^
    `
    $("#frame_code").text(frame_code)
    let js_code = `
let _sOn_ = function (e) {
    if (e._message == ">") {
        that.turnOn_do();
        return;
    }
    else if (e._message == "toggle") {
        _transition_(_sOff_);
        return;
    }
}
    `
      
    $("#js_code").text(js_code)   
  }
	that.turnOff_do = function () {
    var currentVal =  $("#output").val()
    $("#output").val("Off\n" + currentVal) 
    $("#light_img").attr("src", "https://assets.codepen.io/2527236/light_off.png");

    
        let s = `
@startuml
state Init {
}
state Off #green {
}
state On {
}
[*] --> Init
Init --> Off : &#124;>>&#124;
Off --> On : &#124;toggle&#124;
On --> Off : &#124;toggle&#124;
@enduml
`
   compress(s)
    
    let frame_code = `
$Off
    |>|
        turnOff() ^    
    |toggle|
        -> $On ^
    `
    $("#frame_code").text(frame_code)
    let js_code = `
let _sOff_ = function (e) {
    if (e._message == ">") {
        that.turnOff_do();
        return;
    }
    else if (e._message == "toggle") {
        _transition_(_sOn_);
        return;
    }
}
    `
      
    $("#js_code").text(js_code)   
  }
  
	return that;
};

This Pen is owned by Mark Truluck on CodePen.

See more by @frame-lang on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.