lundi 27 juin 2016

Extracting data from JSON array and store them on a two-dimension array

SMS messages on Android mobiles, are stored in databases, so I extracted, and stored them in a JSON array.

I want to group the SMS by the address (mobile number).

The structure I want to create is a two-dimension array that on each first index of the second dimendsion (value 0, matrix[index][0]) is stored the number and on the other values are the sms of that number.

The error is that after storing 2 numbers, the other numbers are not getting stored and the sms received by them are stored on the second number array.

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
var sms = {
    '0' : {
        'address' : '+1',
        'body' : 'SMS1'
    },
    '1' : {
        'address' : '+2',
        'body' : 'SMS2'
    },
    '2' : {
        'address' : '+1',
        'body' : 'SMS3'
    },
    '3' : {
        'address' : '+2',
        'body' : 'SMS4'
    },
    '4' : {
        'address' : '+3',
        'body' : 'SMS5'
    },
    '5' : {
        'address' : '+4',
        'body' : 'SMS5'
    }
};

var matrix = [];
var html = "";
var actualBODY = "";
var actualADDRESS ="";
var matrixDOneSize =0;
var matrixDTwoSize =0;
var indexOfValue =0;
var pinpoint =-10;
for(i in sms) {
   if (sms.hasOwnProperty(i)) {

 actualBODY = sms[i]['body'];
 actualADDRESS = sms[i]['address'];
 if(i==0){
  
  matrix[0]=[];
  matrix[0][0]=actualADDRESS;
  matrix[0][1]=actualBODY;
 }
 
 else {
  matrixDOneSize = matrix.length;
  
  for(var j=0;j<matrixDOneSize;j++){
   
      indexOfValue = matrix[j][0].indexOf(actualADDRESS);
       if(indexOfValue>-1){
          pinpoint = j;
          
         }
        
        }
        
        if(pinpoint>-10) {
  matrixDTwoSize = matrix[pinpoint].length;
  matrix[pinpoint][matrixDTwoSize]=actualBODY;
  }
  else {
   matrix[matrixDOneSize]=[];
   matrix[matrixDOneSize][0]=actualADDRESS;
   matrix[matrixDOneSize][1]=actualBODY;
   
  }
  
 }
 
 
 }
 
}
var nexti = matrix.length;
html+="Total numbers ="+nexti;
for(var i=0;i<nexti;i++){
html+= "<ul>Mobile Number = "+ matrix[i][0];

var nextj = matrix[i].length;
var nrsms = nextj-1;
html+= "<li>Nr of SMS= "+nrsms+"</li>";

for(var j=1;j<nextj;j++){

html+= "<li>SMS = "+ matrix[i][j]+"</li>";
}
html+="</ul>";
}
document.getElementById("demo").innerHTML = html;
</script>

</body>
</html>

How to remove mentioned characters from network stream string

I am doing telnet from a web page using TcpClient

server = new TcpClient(ConfigurationManager.AppSettings["DynamicIP"], Convert.ToInt32(ConfigurationManager.AppSettings["DynamicPort"]));
            ns = server.GetStream();

While reading response of a stream with below method.

if (ns.CanRead)
        {
            byte[] readBuffer = new byte[1024];
            int numBytesRead = 0;
            do
            {
                numBytesRead = ns.Read(readBuffer, 0, readBuffer.Length);
                // ss= Encoding.GetEncoding(1252).GetString(readBuffer.ToArray());
                //sb.Append(readBuffer[0].ToString);
                sb.AppendFormat("{0}", Encoding.ASCII.GetString(readBuffer, 0, numBytesRead));
                sb.Replace(Convert.ToChar(24), ' ');
                sb.Replace(Convert.ToChar(255), ' ');
                sb.Replace('?', ' ');
                //sb.Replace(Environment.NewLine, "<br />").ToString();
            }
            while (ns.DataAvailable);
        }
        // var s = Regex.Replace(sb.ToString(), @"[^u0000-u007F]", string.Empty);
        //var s = "<br/>" + sb.ToString();
        //s = s.Normalize(NormalizationForm.FormD);
        //var chars = s.Where(c => CharUnicodeInfo.GetUnicodeCategory(c) != UnicodeCategory.NonSpacingMark).ToArray();
        //return new string(chars).Normalize(NormalizationForm.FormC);
        ////return "<br/>" + s.ToString();
        var dd = "<br/>" + sb.ToString();
        return dd;

but string contains the below characters in it. How to remove or replace in order to show the telnet response in readable format in web form? I have tried so many things, but in vain.

I would like to show the response in webpage just like Putty reads the response.

Thanks in advance.

;40f;9f;40f;9f;40f;2f;40f;9f[4;34f;9f[4;37f;2f[4;34f;9f[4;34f;11f;40f;9f;40f;9f;40f;11f[4;39f;9f[4;34f;11f[4;37f;9f[4;34f;9f[4;37f;40f[4;34f;40f;9f;40f;11f;40f;11f;40f;9f[4;37f;9f[4;37f;9f[4;37f;11f[4;34f;9f[4;34f;40f[4;34f;40f;11f;40f;11f;40f;11f;40f;9f[4;39f;2f[4;34f;9f[4;37f;9f[4;34f;40f[4;37f;40f;9f;40f;9f;40f;9f;40f;11f[4;37f;9f[4;37f;11f[4;37f;9f[4;34f;40f[4;37f;40f[4;37f;40f;9f;40f;2f;40f;9f[4;37f;9f[4;37f;11f[4;37f;11f[4;39f;9f[4;37f;40f;9f;40f;9f;40f;11f;40f;9f;40f;9f[4;34f;2f[4;34f;9f[4;37f;11f[4;34f;40f[4;37f;40f[4;34f;40f"

Single form button incorrectly triggering two event listeners and alert boxes

Originally I had multiple buttons set up as follows:

<button id="plus" type="button" onclick=assignVarAddition()>+</button>
<button id="minus"  type="button" onclick=assignVarSubtraction()>-</button>

These buttons linked to individual javascript functions where the variables firstNumb and secondNumb are generated from form inputs. With each button linked to it's own function the alert() would only be called once with the result of the sum. Functions as below

function assignVarAddition() {
var firstNumb = +document.getElementById("Numb1").value;
var secondNumb = +document.getElementById("Numb2").value;
var total = firstNumb + secondNumb;
alert("You added " + firstNumb + " and " + secondNumb +  ". The total of these two numbers is " + total);
}

function assignVarSubtraction() {
var firstNumb = +document.getElementById("Numb1").value;
var secondNumb = +document.getElementById("Numb2").value;
var total = firstNumb - secondNumb;
alert("You subtracted " + secondNumb + " from " +  firstNumb + " and got " + total);
}

I'm trying to clean and shorten the js into one functio so now I am trying to use event listeners within one function where a separate event event listener with a separate alert() is set up for the click of each button. But when I click one, both alerts are triggered, addition then subtraction, with the totals displaying in separate alert boxes, one after the other. Now the buttons and functions are set up as:

<button id="plus" type="button" onclick=assignVarAddition()>+</button>
<button id="minus"  type="button" onclick=assignVarSubtraction()>-</button>

function assignVarCalc() {
var firstNumb = +document.getElementById("Numb1").value;
var secondNumb = +document.getElementById("Numb2").value;
document.getElementById("plus").addEventListener("click", alert(firstNumb+secondNumb));
document.getElementById("minus").addEventListener("click", alert(firstNumb-secondNumb));
}

What do I need to do to stop both alerts being called simultaneously - so that when the '+' button is pressed, only the addition of Numb1 and Numb2 are displayed in the alert box? Not the addition value, then the subtraction in it's own alert.

Please note I have separate files for set for the html and javascript and have tags set up in the html file.

CSS: scroll doesn't work and height is set

Good evening, I have this simple problem with my code: I have a div (whose position is relative) and I have added the propriety "scroll" on my CSS but it doesn't work! Here it is my code:

HTML

<div class="wrapper">
    <div id ="wrapper" class="container">
        <div class="left">
        <div class="top">
            <input id="receiver" type="text" / placeholder= "To:">
            <span class = "error" id ="receiver_check"> </span>
        </div>
        <ul class="people" id="people">

        </ul>
    </div>
    <div id="right" class="right">
        <div class="write">
            <input id="message" class="message" type="text" />
            <input type="button" id="send-button" class="write-link send">
        </div>
    </div>

</div>

CSS

.container .right {
position: relative;
float: left;
width: 62.4%;
height: 100%;
overflow-y: scroll !important;
}

.container .right .chat {
position: relative;
display: none;
padding: 0 35px 92px;
border-width: 1px 1px 1px 0;
border-style: solid;
border-color: #e6e6e6;
height: -moz-calc(100% - 48px);
height: -webkit-calc(100% - 48px);
height: -o-calc(100% - 48px);
height: calc(100% - 48px);
-webkit-justify-content: flex-end;
justify-content: flex-end;
-webkit-flex-direction: column;
flex-direction: column;
overflow-y: scroll !important;
}
.container .right .chat.active-chat {
display: block;
display: -webkit-flex;
display: flex;
overflow-y: scroll !important;
}

I use this div for showing a chat, so the content is shown inside the div when I add the class "active"

Inside the container I always have :

.container .right .write {
  position: absolute;
  bottom: 20px;
  left: 30px;
  height: 42px;
  padding-left: 8px;
  border: 1px solid #e6e6e6;
  background-color: #eceff1;
  width: -moz-calc(100% - 58px);
  width: -webkit-calc(100% - 58px);
  width: -o-calc(100% - 58px);
  width: calc(100% - 58px);
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
 border-radius: 5px;
 }
.container .right .write input#receiver {
font-size: 16px;
float: left;
width: 347px;
height: 40px;
padding: 0 5px;
color: #1a1a1a;
border: 0;
outline: none;
background-color: #eceff1;
font-family: 'Source Sans Pro', sans-serif;
font-weight: 400;
}

.container .right .write #send-button {
 display: inline-block;
 float: left;
 width: 20px;
 height: 42px;
 margin-left: 11px;
 content: '';
 background-image: url("http://s30.postimg.org/nz9dho0pp/send.png");
 background-repeat: no-repeat;
 background-position: center;
 }

thank you very much for your help ele

How do I externalise my Data

I am new to d3.js and Javascript and currently trying to build a graph using d3. My data is placed in a dataArray var currently but I want to externalise it. Every time I try use either another file or different data format it does not work. Here is my code:

<!DOCTYPE html>
<html>

<head>
  <meta>
  <meta http-equiv="refresh" content="">
  <meta name="description" content="Drawing Shapes w/ D3 - " />
  <meta charset="utf-8">
  <title>Resources per Project</title>
  <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>

  <style type="text/css">
    h1 {
      font-size: 35px;
      color: darkgrey;
      font-family: Helvetica;
      border-bottom-width: 3px;
      border-bottom-style: dashed;
      border-bottom-color: black;
    }
    h2 {
      font-size: 20px;
      color: black;
      font-family: Helvetica;
      text-decoration: underline;
      margin-left: 290px;
      margin-top: 0px;
    }
  </style>
</head>

<body>
  <h1>Resources used per Project</h1>
  <script type="text/javascript">
    var width = 600
    var height = 500
    var emptyVar = 0
    var dataArray = [0.35, 1.66, 3.04, 1.54, 3.45, 2.56, 2.29, 1.37];
    var emptyData = [];
    var widthScale = d3.scale.linear()
      .domain([0, 5])
      .range([0, width]);

    var color = d3.scale.linear()
      .domain([0, 5])
      .range(["#000066", "#22abff"])

    var axis = d3.svg.axis()
      .ticks("10")
      .scale(widthScale);

    var canvas = d3.select("body")
      .append("svg")
      .attr("width", width)
      .attr("height", height)
      .append("g")
      .attr("transform", "translate(30, 0)");

    var bars = canvas.selectAll("rect")
      .data(dataArray)
      .enter()
      .append("rect")
      .attr("width", emptyVar)
      .attr("height", 50)
      .attr("fill", function(d) {
        return color(d)
      })
      .attr("y", function(d, i) {
        return i * 55
      })

     canvas.append("g")
      .attr("transform", "translate(0, 430)")
      .attr("font-family", "Helvetica")
      .attr("font-size", "15px")
      .call(axis);

    bars.transition()
      .duration(1500)
      .delay(200)
      .attr("width", function(d) {
        return widthScale(d);
      })
  </script>
  <h2>Resources</h2>
</body>

</html>

Attached are 2 files (one JSON and one CSV) which have the data I am trying to use. The data under "resources" is the current data in the dataArray. How do I externalise this data?

background video in div with fixed background images attached to sections below - very buggy

http://jsfiddle.net/qhdt473q/4/

I have a background video in one section. In the sections below they have fixed background images attached to them, which aren't showing up. If the video is removed from the HTML the background images behave as expected. Why is this happening? How do I fix this? Thanks!

Code:

video {
        position: absolute;
        right: 0;
        bottom: 0;
        min-width: 100%;
        height: auto;
        z-index: -100;
        background: url(http://media.w3.org/2010/05/sintel/poster.png) no-repeat;
        background-size: cover;
    }
    
    html, body, .site-container, .content, section {
        height: 100%;
        margin: 0;
        padding: 0;
    }
    
    .content {
        z-index: 66;
    }

    #section2 {
        background: url(http://www.psdgraphics.com/file/colorful-triangles-background.jpg) no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        height: 100%;
        width: 100%;
        padding: 0;
        margin: 0;
    }
    
    #section3 {
        background: url(http://www.hdwallpapers.in/walls/abstract_color_background_picture_8016-wide.jpg) no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        height: 100%;
        width: 100%;
        padding: 0;
        margin: 0;
    }
    
    #section4 {
        background: url(http://www.hdwallpapersn.com/wp-content/uploads/2015/04/background_image_9.jpg) no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        height: 100%;
        width: 100%;
        padding: 0;
        margin: 0;
    }
    
    #section5 {
        background: url(http://hdw.datawallpaper.com/abstract/christmas-background-desktop-background-542647.jpg) no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        height: 100%;
        width: 100%;
        padding: 0;
        margin: 0;
    }
    
    #section6 {
        background-color: #0039a6;
        height: 100%;
        color: #fff;
    }
<div class="site-container">
    <video id="video" preload="none" poster="http://media.w3.org/2010/05/sintel/poster.png" autoplay loop muted>
        <source id="mp4" src="http://media.w3.org/2010/05/sintel/trailer.mp4" type="video/mp4">
            <source id="webm" src="http://media.w3.org/2010/05/sintel/trailer.webm" type="video/webm">
                <source id="ogv" src="http://media.w3.org/2010/05/sintel/trailer.ogv" type="video/ogg">
                    <p>Your user agent does not support the HTML5 Video element.</p>
    </video>
    <div class="content">
        <section id="section2"></section>
        <section id="section3"></section>
        <section id="section4"></section>
        <section id="section5"></section>
        <section id="section6"></section>
    </div>
</div>

Responsive Layout with DIVS + Image Positioning

This is the layout I am trying to acheive: Desired Layout

Here is my current HTML + CSS (I'm just learning so sorry if it's repetitive and off :))

<div class="collection clearfix">
    <div class="image-left1"> </div>
    <div class="icon-left1">
        <img src="images/mainLP-chair-icon.png" alt="Chair Collection">
        <p>Chair Collection</p>
    </div>
</div>

<div class="collection clearfix">
    <div class="icon-right1">
        <img src="images/mainLP-lamp-icon.png" height="48" width="34" alt="Lamp Collection">
        <p>Lamp Collection</p>
    </div>
    <div class="image-right1"> </div>
</div>

... it alternates for a total of 5 divs stacked.

and CSS is

 

    /* =================== Main Section =================== */

    .collection {
        padding-top: 25px;
    }

    /*=================== CHAIRS ===================*/

    .image-left1 {
        background: url(../images/mainLP-chairs.jpg) center;
        height: 570px;
        width: 70%;
        display: inline-block;
    }

    .icon-left1 {
        float: right;
        width: 30%;
        background-color: #c7db9c;
        padding: 10px;
        border-left: 25px solid white;
        height: 570px;
    }


    .icon-left1 p {
        text-transform: uppercase;
        font-family: 'Roboto Slab', serif;
        color: #fff;
        font-weight: 400;
        font-size: 14px;
        position: relative;
        top: 220px;
        left: 36px;

    }

    .icon-left1 img {
        border: 0;
        position: relative;
        top: 222px;
        left: 76px;
    }

    /*=================== LAMPS ===================*/

    .image-right1 {
        background: url(../images/mainLP-lamps.jpg) center;
        height: 570px;
        width: 70%;
        display: inline-block;
    }


    .icon-right1 {
        float: left;
        width: 30%;
        background-color: #f4dc86;
        padding: 10px;
        border-right: 25px solid white;
        height: 570px;
    }


    .icon-right1 p {
        text-transform: uppercase;
        font-family: 'Roboto Slab', serif;
        color: #fff;
        font-weight: 400;
        font-size: 14px;
        position: relative;
        top: 220px;
        left: 36px;

    }

    .icon-right1 img {
        border: 0;
        position: relative;
        top: 222px;
        left: 93px;
    }


    .wrapper {
        width: 70%;
        margin: 0 auto;
    }  (This is around everything)


I'm not concerned yet about responsive but I should be down the road. A few issues I'm seeing.

The background image for each of the containers isn't sizing properly - it's getting cut off. How would I fix that?

There must be a better way to float the icon and text in the div beside the image../ right now it's wonky and positioned relative which I don't think is correct. OR if it is correct I think I have coded it wrong.