Another Inlet

_.md

[ Launch: Another Inlet ] 8167229 by enjalot

config.json

{"description":"Another Inlet","endpoint":"","display":"svg","public":true,"require":[],"tab":"edit","display_percent":0.6929824561403506,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"period","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"fileconfigs":{"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"thumbnail":"http://i.imgur.com/GxG0Xxs.png"}

inlet.js

var thermometer = function() {
    var w = 100
        , h = 350
        , x = 150
        , y = 100
        , min_val = 0  //min of the temp scale
        , max_val = 42 //max of temperature scale 
        , data = 0
        , ftemp
        , title = "Thermo"
        , chart
        , suffix = "C"
        , min_set_val = 21
        , max_set_val = 27
        , format = ".3n"
        ;

    chart = function(g) { 
        ftemp = 9 * data / 5 + 32 //convert temp to obscure temperature system
        var temp_scale = d3.scale.linear()
            .domain([min_val, max_val])
            .range([h, 0]);

        var formatter = d3.format(format);

        var color_scale = function(t) {
            if(t < min_set_val) {
                return "#0000ff";
                //return "#ff0000";
            } else if(t > max_set_val) {
                return "#ff0000";
            } else {
                return "#00ff00";
            }
        }
        g.append("rect")
            .attr("width", w)
            .attr("height", h)
            .style("fill", "none")
            .style("stroke", "#000")
            .attr("transform", "translate(" + [x, y] + ")")

 
        g.append("rect")
            .attr("width", w)
            .attr("height", 20)
            .attr("transform", "translate(" + [x, y] + ")")
            .attr("y", temp_scale(data) - 10)
            .style("fill", color_scale(data))
            //.style("stroke", "#000000")
            //.style("stroke-width", 1);

        /*
        g.append("rect")
            .classed("temp", true)
            .attr("transform", "translate(" + [x, y] + ")")
            .attr("width", 100)
            .attr("height", temp_scale(data))
            .style("fill", "#fff")
            ;
        */
                    
        g.append("text")
            .text(title)
            .attr("x", x + 5)
            .attr("y", y - 5)
            ;

        //put the current temperature 

        
        g.append("text")
            //.text(parseInt(data) + suffix)
            .text(formatter(data) + suffix)
            .attr("x", x + 5)
            .attr("y", y + 35)
            .attr("font-size", 30)
            .attr("font-family", "Arial")

        

        g.append("line")
            .attr("x1", x)
            .attr("y1", y + temp_scale(max_set_val))
            .attr("x2", x + w)
            .attr("y2", y + temp_scale(max_set_val))
            .attr("stroke", "#000")

        g.append("line")
            .attr("x1", x)
            .attr("y1", y + temp_scale(min_set_val))
            .attr("x2", x + w)
            .attr("y2", y + temp_scale(min_set_val))
            .attr("stroke", "#000")

        g.append("text")
            .text(max_set_val + suffix + " (max)")
            .attr("x", x + w/2 - 30)
            .attr("y", y - 5 + temp_scale(max_set_val));
        g.append("text")
            .text(min_set_val + suffix + " (min)")
            .attr("x", x + w/2 - 30)
            .attr("y", y + 13 + temp_scale(min_set_val));

    }

    chart.x = function(value) {
        if (!arguments.length) { return x; }
        x = value;
        return chart;
    };

    chart.y = function(value) {
        if (!arguments.length) { return y; }
        y = value;
        return chart;
    };

    chart.width = function(value) {
        if (!arguments.length) { return width; }
        width = value;
        return chart;
    };

    chart.height = function(value) {
        if (!arguments.length) { return height; }
        height = value;
        return chart;
    };

    chart.data = function(value) {
        if (!arguments.length) { return data; }
        data = value;
        return chart;
    };

    chart.title = function(value) {
        if (!arguments.length) { return title; }
        title = value;
        return chart;
    };

    chart.min_set_val = function(value) {
        if (!arguments.length) { return min_set_val; }
        min_set_val = value;
        return chart;
    };
    chart.max_set_val = function(value) {
        if (!arguments.length) { return max_set_val; }
        max_set_val = value;
        return chart;
    };
    chart.min_val = function(value) {
        if (!arguments.length) { return min_val; }
        min_val = value;
        return chart;
    };
    chart.max_val = function(value) {
        if (!arguments.length) { return max_val; }
        max_val = value;
        return chart;
    };

    chart.suffix = function(value) {
        if (!arguments.length) { return suffix; }
        suffix = value;
        return chart;
    };
    chart.format = function(value) {
        if (!arguments.length) { return format; }
        format = value;
        return chart;
    };

    return chart;
}



var svg = d3.select("svg")
//make nutrient thermometer
var nthermo = svg.append("g")
    .classed("nutrient_thermometer", true);
var hthermo = svg.append("g")
    .classed("humidity_thermometer", true);
var hhumid = svg.append("g")
    .classed("humidity_humidity", true);
var ph = svg.append("g")
    .classed("ph", true);
var tds = svg.append("g")
    .classed("tds", true);




d3.json("http://50.19.108.27/arduino/garden/arm", function(err, json) {

    json = json[0];
  console.log(json)

    var garden = svg.append("text")
        .text(json.report.name)
        .attr("x", 10)
        .attr("y", 25)
        .attr("font-size", 30)
        


    var time = json._id.substring(0,8);
    var date = new Date(parseInt(time, 16) * 1000)
    var dt = new Date() - date;
    var time_color;
    if(dt > 5 * 60 * 1000){ 
        time_color = "#ffff00";
    } else if(dt > 15 * 60 * 1000) {
        time_color = "#ff0000";
    } else {
        time_color = "#000000";
    }

    var datetime = svg.append("text")
        .text(date)
        .attr("x", 10)
        .attr("y", 50)
        .style("fill", time_color)
        /*
        .style("stroke", "#000")
        .style("stroke-width", 0.5)
        .style("stroke-opacity", 0.1)
        */
        .style("font-size", 15)
    

var report = json.report;
var temp = report.temperature_sensor.temperature
//nutrient temp from the data
var hc = thermometer()
    .x(20)
    .title("Room Temp (C)")
    .suffix(" c")
    .min_set_val(20)
    .max_set_val(23)
    .data(temp)


var hh = thermometer()
    .x(150)
    .suffix("")
    .title("Humidity (RH)")
    .min_val(0)
    .max_val(100)
    .min_set_val(60)
    .max_set_val(70)
    .suffix("%")
   // .data(json.report.humidity_sensor.humidity)


var nc = thermometer()
    .title("Nutrient Temp")
    .x(277) 
    .suffix(" c")
    .min_set_val(20)
    .max_set_val(27)
   // .data(json.report.nutrient_temperature.temperature)

var phc = thermometer()
    .title("PH")
    .suffix("")
    .x(402) 
    .min_val(0)
    .max_val(14)
    .min_set_val(5.5)
    .max_set_val(6.5)
    .data(json.report.ph.ph)

var tdsc = thermometer()
    .title("TDS (ppm)")
    .suffix("")
    .format(",n")
    .x(524) 
    .min_val(0)
    .max_val(25000)
    .min_set_val(10000)
    .max_set_val(18000)
    .data(json.report.conductivity.tds)


hc(hthermo);
hh(hhumid);
nc(nthermo);
phc(ph);
tdsc(tds);

//d3.json("http://localhost:3009/arduino/gardens", function(jsonresp) {
})