Saturday, June 2, 2018

Had some down time...

Almost two months later, I'm starting to get back to my project. I discovered browser compatibility problems, and I was seriously feeling the time crunch. My boss agreed that I could do a more conventional project for the title upgrade and raise, so I knocked that out in two days. (Haven't heard anything about the title/raise yet, or even whether my project was acceptable; will ask soon.)

With that out of the way, I can relax a little and take time to learn what I need to learn to create interactive apps for our online courses.

This doesn't come naturally to me. I'm an artist--or I was, before I burned out or whatever it was that happened. Anyway, that was a right-brain gig, and coding really isn't, or at any rate, it's a very different type of creativity. I can do it, though--it's just going to take me time to get a handle on programming, and a bit more effort than might be required of your average regulation computer nerd.

There was a further interruption in April, of course--on the 19th, my mother died. She had been in misery with a bastardly infection called Clostridium difficile, or c.diff, for months. I forget how many weeks she spent in hospitals or a rehab center, in and out, home for a bit, then back to the hospital when the damn infection got a foothold again. It was awful for her. She spent her last week in at-home hospice, telling two of my sisters what all she wanted done and who got what and so forth. I'm glad she had that much control of the situation. Her mind was sharp to the end, thank goodness. She was 92 years old.

Arlene Fern Smith
January 24, 1926 - April 19, 2018

So I took some time to rest, did that quick ID project, then started looking around for more help learning Javascript. Found a more thorough course on Udemy and started that yesterday. Also did some more research on Adobe Animate and found out how to incorporate Javascript libraries into the file so I can still use KonvaJS, if that turns out to be the best solution.

And on we go.

Friday, April 6, 2018

We have text inputs and button controls

Unfortunately, they interfere with the polygon mouseover/click events in the layer below the text layer. So far, I've found a way to disable listening in individual text nodes, but the invisible textarea on the textlayer still blocks access to the polygons. This is a big problem for tiny country/polygons like Luxembourg (on my map of Europe). I've put in another question on Stack Overflow and Gitter, hoping for help.

I also need to figure out how to better position the textareas. The x/y values in KonvaJS don't correspond to the map in Animate CC at all, so that's no help. I still want to be able to position the textareas relative to the polygons, so I'll experiment with that while letting the other problem percolate for a while.

Sunday, April 1, 2018

Before I go on with text inputs...

I need to add the COLOR and LABEL buttons. Clicking btnColor should make the color selector active and labels inactive. Clicking btnLabel will do the opposite. I need the buttons before continuing with text input because the text area has to be created on clicking a polygon. So let's get clicky.

I did get the example textInput code working in my map test file and got two inputs positioned (roughly), so I'll save that to my http://leslieasmith.coffeecup.com/ examples.

Friday, March 30, 2018

Next phase

I decided to separate the control panel stuff, after all, so that's now in the HTML DOM below the map. Layers are working, polygons are working, so it's time for the next round of tests:

  1. Get first user text input positioned & formatted in new DOM layer over canvas.
  2. The example I have is double-click; the old map app uses a single click onload or after the Label button is clicked, so create Label button and tie input functionality to it (add eventListener).
  3. Create Color button and make color selector (a) active after Color button is clicked and (b) inactive after Label button is clicked.
  4. Make Label button and textInputs (a) inactive after Color button is clicked and (b) active again after Label button is clicked.
  5. Create Export button (probably export as PNG screen capture).
  6. Start working the drawing app in with the rest of this malarky.

Tuesday, March 27, 2018

Oh, holy hell...

Bad coding on my part, now fixed, thank the gods, and thanks to wonderful, top-shelf nerds on StackOverflow.com and Gitter.im.

For the record (and for anyone who might benefit), here's what I was trying to do: I needed to get a background image (png, map of Europe) to display behind a bunch of polygons (countries) for which I have mouseover/mouseout/mousedown events. I put the background pic in a separate layer and added the layers in the proper order (with help from lavrton on Stack Overflow). Here's that code after his fix:

        var stage = new Konva.Stage({
            container: 'container',
            width: width,
            height: height
        });
  
        var background = new Konva.Layer();
        stage.add(background);
        
        var layer = new Konva.Layer();
        stage.add(layer);
        
        background.setZIndex(0);
        layer.setZIndex(10); 
        
        console.log(background.getZIndex());
        console.log(layer.getZIndex());
        
        // add background image
        var imageObj = new Image();
            imageObj.onload = function() {
                var map = new Konva.Image({
                x: 0,
                y: 0,
                image: imageObj,
                width: width,
                height: height
            });
            // add image to layer
            background.add(map);
            // add layer to stage
            stage.add(background);
         };
         imageObj.src = 'pix/ushist1a_v3_Ls6_map_background.png';
     };

As you can see, I assigned zIndex values to each layer, but the background layer was still displaying *over* the polygon layer. I put up my revised code on SO and on Gitter, and two people on Gitter (Miloš Lapiš and benny daon) spotted the problem: I was adding the background layer twice. Instead of "stage.add(background);" in the Image Object, it should be "stage.draw();". So, the whole thing again:

        var stage = new Konva.Stage({
            container: 'container',
            width: width,
            height: height
        });
  
        var background = new Konva.Layer();
        stage.add(background);
        
        var layer = new Konva.Layer();
        stage.add(layer);
        
        background.setZIndex(0);
        layer.setZIndex(10); 
        
        console.log(background.getZIndex());
        console.log(layer.getZIndex());
        
        // add background image
        var imageObj = new Image();
            imageObj.onload = function() {
                var map = new Konva.Image({
                x: 0,
                y: 0,
                image: imageObj,
                width: width,
                height: height
            });
            // add image to layer
            background.add(map);
            // draw image on stage
            stage.draw();
         };
         imageObj.src = 'pix/ushist1a_v3_Ls6_map_background.png';
     };

Works like a charm and I can stop tearing my hair out. So that checks off one thing from the last list--actually, two things:
  1. Use map as background of canvas.
  2. Position two current polygons (already there in the SVG code).
  3. Position the color selector in its correct location on the map.
Re: that last thing: I don't really like the control panel as I have it (on the right, where it was in the previous programmer's app)--the text isn't very clear, plus I don't think I can float the color selector up over the canvas. So I'm going to move all that below the map. It necessitates some scrolling in order to see all the directions, so I may make the map a little smaller and crop some off the bottom.

Saturday, March 24, 2018

Well, fudge...

It looks like using variables to populate a KonvaJS Line class doesn't work, at least for the points property. Haven't gotten as far as finding out if using a for loop to populate the whole Line class works yet--I have a question in on Gitter--but unless I can put points in a variable, the for loop won't work, anyway.

So I guess I'll have to input each flippin' polygon Line class separately, which means I'll have to do each flippin' mouseover, mouseout, and mousedown separately. That's 40 different complex polygons worth of code. Holy crap....

OK, new plan: scrap the array idea for now--time's a-wastin'--and move on to the next bits:
  1. Use map as background of canvas.
  2. Position two current polygons and the color selector in their correct locations on the map.
The color selector is a separate bit of jQuery; maybe I can float it into position over the canvas layer? If not, I'll have to rethink the map controls.

Several hours later: How the hell can it be so hard to add one background image? to put it in a new layer?? to give both layers different zIndexes so the goddamn background image shows up in the BACK???

Thursday, March 22, 2018

Revised plan

Revised ID Project step list with checkmarks as things are accomplished:

  1. Find CreateJS/EaselJS tutorial and property lists. (Udemy.com and numerous CreateJSEaselJS pages online.) Since the polys published from Animate files are in CreateJS, I have to use that because of the coordinate chaining. 
  2. Get ONE polygon to show up in an HTML5 Canvas. 
  3. Get mouseover color change to work in first polygon. 
  4. Add 2nd polygon to canvas. 
  5. Get mouseover color change to work in both polygons. 
  6. Add "newFill" color on mousedown. 
  7. Stop mouseover & mouseout colors activating if polygon has "newFill" color. 
  8. Add Bootstrap color picker from https://www.jqueryscript.net/demo/Lightweight-jQuery-Color-Picker-Plugin-For-Bootstrap-Colorselector/
  9. Remove all code that isn't related to the colorselector. 
  10. On clicking tile in colorselector, copy its fill color to "newFill". 
  11. On clicking the polygon, change its fill color to the "newFill" value. 
  12. Create multidimensional array to hold properties of ONE polygon. 
  13. Create multidimensional array to hold name & coordinates of BOTH polygons, thereby giving me a shorthand way to access both properties (e.g., "poly[0][0]").
  14. Get mouseover color change to work on BOTH polygons using the polygon array.
  15. Get colorselector to work on BOTH polygons using the polygon array.
  16. Use map as background of canvas.
  17. Position polygons and colorselector in their correct locations on the map.