Build instructions

[balthatrix]

Really amazing project! I'd like to use the front end image editing portion of this project for a texture pack editor on my company's site (we help teach kids how to code).

I'm tinkering with the code on my machine, and I can't figure out how to build it. When I run the ./script/build script, I get a bunch of zip files on my desktop, but they don't contain anything, so I assume these are temporary artifacts of some sort.

Can you make some build instructions for this project?

[STRd6]

Hi @balthatrix

The build script is for making standalone executables using node webkit, and as you've found it's a bit out of date...

For your case you may want to do an iframe embed. If you want to make your own modifications you can follow the instructions here: https://github.com/STRd6/pixel-editor#developer-instructions

The pixel editor is built using my web based app editor and currently doesn't have any kind of local development environment.

Let me know if you need any further help and I'll do my best!

[balthatrix]

Thanks for the suggestions and prompt response!

I'm taking this great opportunity to integrate coffee and haml into my skillset. I've been googling around, trying to figure out how I can render something from your project templates/libraries that I can put into a simple index.html file so we can host something to frame into the mother project.

Currently we are imagining compiling the coffee and haml into js and html, using browserfy here-> http://browserify.org/ to bundle all your code, and then including the bundled code in an index file that mirrors one of your templates.

My skepticism comes in though because the haml templates in the project don't seem to make any references to the code elsewhere in the project.

For a newb to the tech involved here, would you tell me if I'm on the right track? Can you define a high level process I can go through to accomplish this? In the meantime I'll be playing around with compiling these shorthand scripts :)

Thanks again!

[balthatrix]

Figured out a solution using an iframe of a clone of the gh-pages

[phoenixbox]

@balthatrix hi! Could you shed some light on how you implemented the gh-pages embed in an iframe?

[balthatrix]

@phoenixbox Hey there, since I don't have coffeescript or haml in my skill sets and had a deadline, here's what I did: I wrote this javascript mod (below) inside the index.html file, which communicates with the framing app. The framing app provides an interface to browse and click images. Basically, when someone clicks an image on my site, it injects the raw Base 64 image data into the pixel editor. Then I overrode the saving functionality in the pixel-editor to instead send that data back to the framing app to save in the DB. I was able to tinker on the wonderfully robust chrome console to know what info was where. Hope this helps you out!

var LtmModule = {
        currentImg:null,
        is_committed:true,
        confirm_message:"",
        init: function(){
          LtmModule.mutateGui()

          $(".main .viewport canvas").mousedown(function(){
            //console.log("Changed canvas!!!!!")
            LtmModule.is_committed = false
          })

          window.addEventListener(
          "message",
          function (event) {
//            console.log("bottom got a message:")
//            console.log(event)
//            console.log("******************")
            if(event.origin !== "http://localhost:3000" &&
               event.origin !== "http://thoughtstem.github.io" &&
               event.origin !== "http://mod.learntomod.com") { throw "security issue in pixel-editor" }
            var packet = event.data
            switch(packet.action) {
              case "loadImg":
                if(LtmModule.is_committed || (!LtmModule.is_committed && confirm("You have un-comitted changes.  Are you sure you want to load a different image?"))) {
                  LtmModule.currentImg = packet.img
                  var imgPath = LtmModule.currentImg.path.split("/")
                  imgPath.shift() //remove first element
                  $("#current_image_name_header").html(imgPath.join("/"))
                  LtmModule.loadImg(LtmModule.currentImg.data)
                  LtmModule.is_committed = true
                }
                break;
              case "confirmClose":
                if(LtmModule.is_committed || (!LtmModule.is_committed && confirm("You have un-comitted changes.  Are you sure you want to close the editor?"))) {
                  LtmModule.is_committed = true
                  window.parent.postMessage({action: "closeEditor", img: LtmModule.currentImg}, "*")
                }
                break;
              case "alert":

                var temp = $("#current_image_name_header").html()
                $("#current_image_name_header").html(packet.message)
                setTimeout(function(){$("#current_image_name_header").html(temp)}, 2500)
                break;
              default:
                    throw "Err in LtmModule.init router: no proper action given in request"
            }
          },
          false);
        },
        loadImg: function(blob) {
          var img = new Image();

          img.src = 'data:image/bmp;base64,'+blob;
          var context = $("canvas")[0].getContext('2d');
          var previewContext = $(".thumbnail").find("canvas")[0].getContext('2d');

          img.onload = function() {
            var newSize = editor.pixelExtent().copy();
            newSize.height =  img.height;
            newSize.width = img.width;
            var actionData = {size: newSize};
            editor.Command.Resize(actionData).execute();

            context.clearRect(0,0,img.width, img.height)
            context.drawImage(img, 0,0);

            previewContext.clearRect(0,0,img.width, img.height)
            previewContext.drawImage(img, 0,0);
          };
        },
        mutateGui: function(){
          var bgImage = $(".action[title='ctrl+s']").css("background-image")
          $(".action[title='ctrl+s']").remove()
          $("<div></div>")
                  .addClass("action")
                  .appendTo($(".actions"))
                  .css("background-image", bgImage)
                  .append($("<div>Commit Change</div>").addClass("text"))
                  .click(function(){
                    LtmModule.currentImg.data = $("canvas")[0].toDataURL().split(",")[1] //get the updated blob
                    LtmModule.is_committed = true
                    window.parent.postMessage({action: "saveImg", img: LtmModule.currentImg}, "*")
                  })
          var node=$("<div></div>")
                      .css("width", "100%")
                      .css("height", "20px")
                      .css("position", "absolute")
                      .css("z-index", "10000")
                      .css("top", "0").css("left", "0")
                      .css("text-align", "center")
                      .attr("id", "current_image_name_header")
          $("body").prepend(node)
          $(".action")
                  .css("width", "55px").css("height", "60px")
        }
      }
      $(document).ready(function(){
        LtmModule.init();
      })

[phoenixbox]

@balthatrix wow thanks so much for the thoughtful response! This is why open source is so great. I will take a good look at this and see how I can implement it. Thank you 👍