Widget:PillIdentifier: Difference between revisions

Jump to navigation Jump to search
VisualWikitext
No edit summary
No edit summary
 
(43 intermediate revisions by the same user not shown)
Line 19: Line 19:
}
}
})();
})();
$("#firstHeading").remove();
$("#searchbox").remove();
$('#submit').click(runQuery);
$('#submit').click(runQuery);
$('.navTool').click(nav);
$('.navTool').click(nav);
        $("#reset").click(resetForm);
$(".pillShapeOption").click(function(){
$(".pillShapeOption").children("img").css("border","");
$(this).children("img:first").css("border","thin solid black");
$(this).children("img:first").css("border-radius","10%");
});
$(".pillColorOption").click(function(){
$(".pillColorOption").children("img").css("border","");
$(this).children("img:first").css("border","thin solid black");
$(this).children("img:first").css("border-radius","10%");
});
$(".pillScoreOption").click(function(){
$(".pillScoreOption").children("img").css("border","");
$(this).children("img:first").css("border","thin solid black");
$(this).children("img:first").css("border-radius","10%");
});
$("#slider").slider({
$("#slider").slider({
min: 0,
min: 0,
Line 63: Line 82:
$('.pillColorOption').click(updateFormClick);
$('.pillColorOption').click(updateFormClick);
$('.pillScoreOption').click(updateFormClick);
$('.pillScoreOption').click(updateFormClick);
$('.pillMiscContainer').change(updateFormText);
$('.pillMiscContainer').change(updateFormText);
};
};
 
function resetForm(){
$('.pillShapeOption').children("img").css("border","");
$('.pillColorOption').children("img").css("border","");
$('.pillScoreOption').children("img").css("border","");
 
$("#selectedShape").val("");
$("#selectedColor").val("");
$("#selectedScoring").val("");
$("#selectedImprint").val("");
$("#selectedNDC").val("");
$("#selectedIngred").val("");
 
$(".propertyContainerActive").attr("class", "propertyContainerInactive");
$("#queryContainer_Shape").attr("class", "propertyContainerActive");
 
$("#back").css("visibility","hidden");
$('#resultsTable-container').html('');
    };
 
function buildQueryParameters(){
function buildQueryParameters(){
var queryShape = "";
var queryShape = "";
Line 118: Line 155:
return queryShape+queryColor+queryScoring+queryImprint+queryMinSize+queryMaxSize+queryNDC+queryIngred;
return queryShape+queryColor+queryScoring+queryImprint+queryMinSize+queryMaxSize+queryNDC+queryIngred;
};
};
function runQuery() {
function runQuery() {
$('#resultsTable-body tr').remove();
$('#resultsTable-container').html('');
var queryParameters = buildQueryParameters();
var queryParameters = buildQueryParameters();
var printoutRequests = "|?Pill%20Imprint|?Pill%20Dosage|?Pill%20Ingred|?Pill%20Color|?Pill%20Shape|?Pill%20Size%20(mm)|?Pill%20Scoring|?NDC|?Pill%20Name";
var printoutRequests = "|?Pill%20Imprint|?Pill%20Dosage|?Pill%20Ingred|?Pill%20Color|?Pill%20Shape|?Pill%20Size%20(mm)|?Pill%20Scoring|?NDC|?Pill%20Name";
var jsonURL = "http://www.wikidoc.org/api.php?action=ask&query="+queryParameters+printoutRequests+"&format=json";
var jsonURL = "http://www.wikidoc.org/api.php?action=ask&query="+queryParameters+printoutRequests+"&format=json";
$.getJSON(jsonURL, function (data) {
$.getJSON(jsonURL, function (data) {
$.each(data.query.results, function(ind, val) {
if(countProperties(data.query.results) > 0){
/////////////////////////////////////////////////////////////////////////
$.each(data.query.results, function(ind, val) {
//////                  Store each returned result                //////
/////////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////////
//////                  Store each returned result                //////
//
/////////////////////////////////////////////////////////////////////////
//If the .getJSON() function is able to successfully receive information
//
//from the WikiDoc API, it will begin to execute the unnamed function we
//If the .getJSON() function is able to successfully receive information
//have provided.  The data that is returned is in JSON format, meaning  
//from the WikiDoc API, it will begin to execute the unnamed function we
//that we will have lots of objects within objects.  Our function says  
//have provided.  The data that is returned is in JSON format, meaning  
//that for EACH property of data.query.results (that is, each returned  
//that we will have lots of objects within objects.  Our function says  
//result from the query) we should perform the following operations.
//that for EACH property of data.query.results (that is, each returned  
//
//result from the query) we should perform the following operations.
//We will first store all the results as local variables. Some of these
//
//results will need to be converted to a string, so don't be alarmed if  
//We will first store all the results as local variables. Some of these
//you see some string() methods. After storing our variables,we
//results will need to be converted to a string, so don't be alarmed if  
//construct a hyperlink and image URL.  Lastly, we add a row to the  
//you see some string() methods. After storing our variables,we
//our results table.
//construct a hyperlink and image URL.  Lastly, we add a row to the  
//
//our results table.
//The EACH loop will run through all of the described steps before
//
//starting with the next returned result.  Doing this will build a table
//The EACH loop will run through all of the described steps before
//of our results, row by row.
//starting with the next returned result.  Doing this will build a table
//of our results, row by row.
drugNameFull = val.fulltext;
drugNameShort = drugNameFull.split("#")[0];
drugNameFull = val.fulltext;
pillImprint = val.printouts["Pill Imprint"];
drugNameShort = drugNameFull.split("#")[0];
pillDosage = val.printouts["Pill Dosage"];
pillImprint = val.printouts["Pill Imprint"];
pillIngred = val.printouts["Pill Ingred"];
pillDosage = val.printouts["Pill Dosage"];
pillColor = val.printouts["Pill Color"];
pillIngred = val.printouts["Pill Ingred"];
pillShape = val.printouts["Pill Shape"];
pillColor = val.printouts["Pill Color"];
pillSize = val.printouts["Pill Size (mm)"];
pillShape = val.printouts["Pill Shape"];
pillScoring = val.printouts["Pill Scoring"];
pillSize = val.printouts["Pill Size (mm)"];
ndc = val.printouts["NDC"];
pillScoring = val.printouts["Pill Scoring"];
pillName = String(val.printouts["Pill Name"][0]).split(' ').join('_');
ndc = val.printouts["NDC"];
/////////////////////////////////////////////////////////////////////////
pillName = String(val.printouts["Pill Name"][0]).split(' ').join('_');
//////                  Generate the URL to the image.            //////
/////////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////////
//////                  Generate the URL to the image.            //////
//
/////////////////////////////////////////////////////////////////////////
//When a picture is uploaded, the server will place the file in a   
//
//directory. This directory is based upon the MD5 hashed name of file. A
//When a picture is uploaded, the server will place the file in a   
//file named "Example.jpg" will have an MD5 hashed name of:
//directory. This directory is based upon the MD5 hashed name of file. A
// "a91fe217e45a700fc2dab0cc476f01c7."   
//file named "Example.jpg" will have an MD5 hashed name of:
//The file would then be located at the following URl:
// "a91fe217e45a700fc2dab0cc476f01c7."   
// "http://static.wikidoc.org/a/a9/Example.jpg"
//The file would then be located at the following URl:
//To generate the URL, we use the MD5 method provided in the CryptoJS lib
// "http://static.wikidoc.org/a/a9/Example.jpg"
//This means http://www.wikidoc.org/includes/raty/md5.js must be loaded
//To generate the URL, we use the MD5 method provided in the CryptoJS lib
//First we create the MD5 hash of the pill name
//This means http://www.wikidoc.org/includes/raty/md5.js must be loaded
md5 = String(CryptoJS.MD5(pillName));
//First we create the MD5 hash of the pill name
//Next we build the directory name using the first two characters  
md5 = String(CryptoJS.MD5(pillName));
imageDirect = 'http://static.wikidoc.org/' + md5.charAt(0) + '/' + md5.substring(0,2) + '/' + pillName
//Next we build the directory name using the first two characters  
imageDirect = 'http://static.wikidoc.org/' + md5.charAt(0) + '/' + md5.substring(0,2) + '/' + pillName;
/////////////////////////////////////////////////////////////////////////
//////                Create the Drug Name Hyperlink              //////
/////////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////////
//////                Create the Drug Name Hyperlink              //////
//Turn the spaces into underscores
/////////////////////////////////////////////////////////////////////////
linkName = String(drugNameShort).split(' ').join('_')
//Turn the spaces into underscores
//String together appropiate text to create the link
linkName = String(drugNameShort).split(' ').join('_');
drugNameLink = 'http://www.wikidoc.org/index.php/'+linkName+'">'+drugNameShort
//String together appropiate text to create the link
drugNameLink = 'http://www.wikidoc.org/index.php/'+linkName;
/////////////////////////////////////////////////////////////////////////
//////  Add each iteration of query  results to the Results Table  //////
/////////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////////
//////  Add each iteration of query  results to the Results Table  //////
//
/////////////////////////////////////////////////////////////////////////
//Adding the results parameters works in the following way.
//
//  The location of a specific table within the document is assigned to
//Adding the results parameters works in the following way.
//  the variable "table"
//  The location of a specific table within the document is assigned to
//  
//  the variable "table"
//  A row is added the to table at the index location (ind being the
//  
//  index of the .each() loop.   
//  A row is added the to table at the index location (ind being the
//
//  index of the .each() loop.   
var pillContainer ='<div class="pillResult">' +
//
            '<a href="'+drugNameLink+'">' +
var pillContainer ='<div class="pillResult">' +
'<img src="'+imageDirect+'" alt"'+drugNameShort+'">' +
'<a href="'+drugNameLink+'">' +
'</a>' +
'<img src="'+imageDirect+'" alt"'+drugNameShort+'">' +
' <div class="pillResult-text">' +
'</a>' +
'<h1><a href="'+drugNameLink+'">'+drugNameShort+'</a></h1>' +
' <div class="pillResult-text">' +
'<h2>'+pillDosage+'</h2>' +
'<h1><a href="'+drugNameLink+'">'+drugNameShort+'</a></h1>' +
'<p>'+pillShape+', '+pillColor+', '+pillSize+' mm, NDC'+ndc+'</p>'+
'<h2>'+pillDosage+' (' + pillImprint + ')</h2>' +
'<p>'+pillIngred+'</p>' +
'<p>'+pillShape+', '+pillColor+', '+pillSize+' mm, Scored ' + pillScoring +', NDC: '+ndc+'</p>'+
'</div>' +
'<p>'+pillIngred+'</p>' +
'</div>';
'</div>' +
'</div>';
//Add Values to the cells:
$("#resultsTable-container").append(pillContainer);
//Add Values to the cells:
});
$("#resultsTable-container").append(pillContainer);
});
} else {
$("#resultsTable-container").append('<div style="margin:auto"><span style="font-size:36px;">No Results Found. Please Check Back Later.</span></div>');
}
});
});
$('#resultsTable-container').css("visibility", "visible");
$('#resultsTable-container').css("visibility", "visible");
};
 
}
function updatePillSizeImages() {
function updatePillSizeImages() {
Line 276: Line 319:
var dirIndex = "";
var dirIndex = "";
var position = $(".propertyContainerActive").data()["order"];
var position = $(".propertyContainerActive").data()["order"];
console.log(direction);
console.log(position);
var positionArr = [
var positionArr = [
["", ""],
["", ""],
Line 296: Line 337:
console.log("Ruh-roh. Something happened in figuring out what direction to navigate");
console.log("Ruh-roh. Something happened in figuring out what direction to navigate");
}
}
console.log(dirIndex);
var newActiveDiv = positionArr[position][dirIndex];
var newActiveDiv = positionArr[position][dirIndex];
console.log(newActiveDiv);
$(".propertyContainerActive").attr("class", "propertyContainerInactive");
$(newActiveDiv).attr("class", "propertyContainerActive");
$(this).removeClass("propertyContainerActive");
$(this).addClass("propertyContainerInactive");
$(newActiveDiv).removeClass("propertyContainerInactive");
$(newActiveDiv).addClass("propertyContainerActive");
var nextPosition = $(newActiveDiv).data()["order"];
var nextPosition = $(newActiveDiv).data()["order"];
console.log(nextPosition);
console.log(positionArr[nextPosition][0]);
console.log(positionArr[nextPosition][1]);
if (positionArr[nextPosition][0] == ""){
if (positionArr[nextPosition][0] == ""){
$("#back").attr("visibility","hidden");
$("#back").css("visibility","hidden");
}
}
else  
else  
{
{
$("#back").attr("visibility","visible");
$("#back").css("visibility","visible");
}
}
if (positionArr[nextPosition][1] !== null){
if (positionArr[nextPosition][1] == ""){
$("#next").attr("visibility","visible");
$("#next").css("visibility","hidden");
}
}
else  
else  
{
{
$("#next").attr("visibility","hidden");
$("#next").css("visibility","visible");
}
}
};
};
function countProperties (obj) {
    var count = 0;
    for (var property in obj) {
        if (Object.prototype.hasOwnProperty.call(obj, property)) {
            count++;
      }
    }
    return count;
}
</script>
</script>
<style type="text/css">
<style type="text/css">
Line 390: Line 433:
width: 100px;
width: 100px;
margin: 50px;
margin: 50px;
cursor:pointer;
}
}
.pillColorOption {
.pillColorOption {
Line 396: Line 440:
width: 100px;
width: 100px;
margin: 50px;
margin: 50px;
cursor:pointer;
}
}
.pillScoreOption {
.pillScoreOption {
Line 402: Line 447:
width: 100px;
width: 100px;
margin: 50px;
margin: 50px;
cursor:pointer;
}
}
Line 472: Line 518:
}
}
#navTool{
#pillIDNav div{
display:inline-block;
display:inline-block;
cursor:pointer;
}
}
 
#formConatiner div{
#formConatiner div{
display:inline-block;
display:inline-block;
padding:5px;
}
}
#formContainer{
#formContainer{
background:#6e6e6e;
background:#6e6e6e;
border:50%;
    width: 60%;
margin:auto;
    margin: auto;
    margin-top: 15px;
    padding: 15px;
    border-radius: 20px;
    color:white;
}
}
.pillResult{
 
display:table-row;
    #formContainer h2{
    margin-top: 0;
    color: white;
    text-shadow: 1px 1px 1px #000;
    }
 
.pillResult{
display:table-row;
}
}
.pillResult img{
.pillResult img{
width:150px;
width:150px;
Line 494: Line 554:
vertical-align: middle;
vertical-align: middle;
border-radius:50%;
border-radius:50%;
margin:10px;
}
}
.pillResult-text{
.pillResult-text{
Line 515: Line 576:
font-size:16px;
font-size:16px;
}
}
</style>
</style>


    <div id="pillIdentifierContainer">
<div id="pillIdentifierContainer">
        <div id="pillIdentiferTitle">
<div id="pillIdentiferTitle">
            <span>Pill Identifier</span>
    <span>Pill Identifier</span>
        </div>
</div>
         <div id="formContainer">
         <div id="formContainer">
            <h2>Selected Properties</h2>
             <form id="selectedProperties" action="" method="get">
             <form id="selectedProperties" action="" method="get">
             <div id="selectedShape-container" class="ui-button">
             <div id="selectedShape-container" class="ui-button">
                 <span>Shape:</span><input readonly type="text" name="selectedShape" id="selectedShape" value="">
                 <span>Shape:</span><input readonly type="text" name="selectedShape" id="selectedShape" size="10" value="">
             </div>
             </div>
             <div id="selectedColor-container" class="ui-button">
             <div id="selectedColor-container" class="ui-button">
                 <span>Color:</span><input readonly type="text" name="selectedColor" id="selectedColor" value="">
                 <span>Color:</span><input readonly type="text" name="selectedColor" id="selectedColor" size="10" value="">
             </div>
             </div>
             <div id="selectedScoring-container" class="ui-button">
             <div id="selectedScoring-container" class="ui-button">
                 <span>Scoring:</span><input readonly type="text" name="selectedScoring" id="selectedScoring" value="">
                 <span>Scoring:</span><input readonly type="text" name="selectedScoring" id="selectedScoring" size="5" value="">
             </div>           
             </div>           
             <div class="ui-button" id="selectedMinSize-container">
             <div class="ui-button" id="selectedMinSize-container">
Line 546: Line 611:
             </form>
             </form>
         </div>
         </div>
        <div id="queryContainer">
    <div id="queryContainer">
            <div id="queryContainer_Shape" class="propertyContainerActive" data-order="1">
        <div id="queryContainer_Shape" class="propertyContainerActive" data-order="1">
                <span class="propertyContainer_Title">SHAPE</span>
        <span class="propertyContainer_Title">SHAPE</span>
                <div id="pillShapeContainer" class="propertyContainer" data-val="Shape">
            <div id="pillShapeContainer" class="propertyContainer" data-val="Shape">
                    <div id="pillShapeContainer_Row1" class="pillContainer_Row">
            <div id="pillShapeContainer_Row1" class="pillContainer_Row">
                        <div id="Shape_Round" class="pillShapeOption" data-val="Round" data-prop="selectedShape"><img src="http://static.wikidoc.org/7/79/Round_Grey_Pill.png" alt="Round Pill"/></div>
                    <div id="Shape_Round" class="pillShapeOption" data-val="Round" data-prop="selectedShape"><img src="http://static.wikidoc.org/7/79/Round_Grey_Pill.png" alt="Round Pill"/></div>
                        <div id="Shape_Oval" class="pillShapeOption" data-val="Oval" data-prop="selectedShape"><img src="http://static.wikidoc.org/3/3d/Oval_Grey_Pill.png" alt="Oval Pill"/></div>
                    <div id="Shape_Oval" class="pillShapeOption" data-val="Oval" data-prop="selectedShape"><img src="http://static.wikidoc.org/3/3d/Oval_Grey_Pill.png" alt="Oval Pill"/></div>
                        <div id="Shape_Square" class="pillShapeOption" data-val="Square" data-prop="selectedShape"><img src="http://static.wikidoc.org/e/e9/Square_Grey_Pill.png" alt="Square Pill"/></div>
                    <div id="Shape_Square" class="pillShapeOption" data-val="Square" data-prop="selectedShape"><img src="http://static.wikidoc.org/e/e9/Square_Grey_Pill.png" alt="Square Pill"/></div>
                        <div id="Shape_Rectangular" class="pillShapeOption" data-val="Rectangular" data-prop="selectedShape"><img src="http://static.wikidoc.org/8/8e/Rectangular_Grey_Pill.png" alt="Rectangular Pill"/></div>
                    <div id="Shape_Rectangular" class="pillShapeOption" data-val="Rectangular" data-prop="selectedShape"><img src="http://static.wikidoc.org/8/8e/Rectangular_Grey_Pill.png" alt="Rectangular Pill"/></div>
                        <div id="Shape_Triangular" class="pillShapeOption" data-val="Triangular" data-prop="selectedShape"><img src="http://static.wikidoc.org/c/cb/Triangular_Grey_Pill.png" alt="Triangular Pill"/></div>
                    <div id="Shape_Triangular" class="pillShapeOption" data-val="Triangular" data-prop="selectedShape"><img src="http://static.wikidoc.org/c/cb/Triangular_Grey_Pill.png" alt="Triangular Pill"/></div>
                        <div id="Shape_Capsule" class="pillShapeOption" data-val="Capsule" data-prop="selectedShape"><img src="http://static.wikidoc.org/b/b8/Capsule_Grey_Pill.png" alt="Capsule"/></div>
                    <div id="Shape_Capsule" class="pillShapeOption" data-val="Capsule" data-prop="selectedShape"><img src="http://static.wikidoc.org/b/b8/Capsule_Grey_Pill.png" alt="Capsule"/></div>
                    </div>
                </div>
                    <div id="pillShapeContainer_Row2" class="pillContainer_Row">
                <div id="pillShapeContainer_Row2" class="pillContainer_Row">
                        <div id="Shape_Diamond" class="pillShapeOption" data-val="Diamond" data-prop="selectedShape"><img src="http://static.wikidoc.org/9/98/Diamond_Grey_Pill.png" alt="Diamond Pill"/></div>
                    <div id="Shape_Diamond" class="pillShapeOption" data-val="Diamond" data-prop="selectedShape"><img src="http://static.wikidoc.org/9/98/Diamond_Grey_Pill.png" alt="Diamond Pill"/></div>
                        <div id="Shape_Pentagon" class="pillShapeOption" data-val="Pentagon" data-prop="selectedShape"><img src="http://static.wikidoc.org/b/be/Pentagon_Grey_Pill.png" alt="Pentagon Pill"/></div>
                    <div id="Shape_Pentagon" class="pillShapeOption" data-val="Pentagon" data-prop="selectedShape"><img src="http://static.wikidoc.org/b/be/Pentagon_Grey_Pill.png" alt="Pentagon Pill"/></div>
                        <div id="Shape_Hexagon" class="pillShapeOption" data-val="Hexagon" data-prop="selectedShape"><img src="http://static.wikidoc.org/2/25/Hexagon_Grey_Pill.png" alt="Hexagon Pill"/></div>
                    <div id="Shape_Hexagon" class="pillShapeOption" data-val="Hexagon" data-prop="selectedShape"><img src="http://static.wikidoc.org/2/25/Hexagon_Grey_Pill.png" alt="Hexagon Pill"/></div>
                        <div id="Shape_Octagon" class="pillShapeOption" data-val="Octagon" data-prop="selectedShape"><img src="http://static.wikidoc.org/f/f7/Octagon_Grey_Pill.png" alt="Octagon Pill"/></div>
                    <div id="Shape_Octagon" class="pillShapeOption" data-val="Octagon" data-prop="selectedShape"><img src="http://static.wikidoc.org/f/f7/Octagon_Grey_Pill.png" alt="Octagon Pill"/></div>
                        <div id="Shape_DoubleCircle" class="pillShapeOption" data-val="DoubleCircle" data-prop="selectedShape"><img src="http://static.wikidoc.org/7/73/Double_Circle_Grey_Pill.png" alt="Double Circle Pill"/></div>
                    <div id="Shape_DoubleCircle" class="pillShapeOption" data-val="DoubleCircle" data-prop="selectedShape"><img src="http://static.wikidoc.org/7/73/Double_Circle_Grey_Pill.png" alt="Double Circle Pill"/></div>
                        <div id="Shape_Clover" class="pillShapeOption" data-val="Clover" data-prop="selectedShape"><img src="http://static.wikidoc.org/a/a3/Clover_Grey_Pill.png" alt="Clover Pill"/></div>
                    <div id="Shape_Clover" class="pillShapeOption" data-val="Clover" data-prop="selectedShape"><img src="http://static.wikidoc.org/a/a3/Clover_Grey_Pill.png" alt="Clover Pill"/></div>
                    </div>
            </div>
                    <div id="pillShapeContainer_Row3" class="pillContainer_Row">
                <div id="pillShapeContainer_Row3" class="pillContainer_Row">
                        <div id="Shape_Gear" class="pillShapeOption" data-val="Gear" data-prop="selectedShape"><img src="http://static.wikidoc.org/5/56/Gear_Grey_Pill.png" alt="Gear Pill"/></div>
                    <div id="Shape_Gear" class="pillShapeOption" data-val="Gear" data-prop="selectedShape"><img src="http://static.wikidoc.org/5/56/Gear_Grey_Pill.png" alt="Gear Pill"/></div>
                        <div id="Shape_Bullet" class="pillShapeOption" data-val="Bullet" data-prop="selectedShape"><img src="http://static.wikidoc.org/8/8c/Bullet_Grey_Pill.png" alt="Bullet Pill"/></div>
                    <div id="Shape_Bullet" class="pillShapeOption" data-val="Bullet" data-prop="selectedShape"><img src="http://static.wikidoc.org/8/8c/Bullet_Grey_Pill.png" alt="Bullet Pill"/></div>
                        <div id="Shape_SemiCircle" class="pillShapeOption" data-val="SemiCircle" data-prop="selectedShape"><img src="http://static.wikidoc.org/8/80/SemiCircle_Grey_Pill.png" alt="Semi-Circle Pill"/></div>
                    <div id="Shape_SemiCircle" class="pillShapeOption" data-val="SemiCircle" data-prop="selectedShape"><img src="http://static.wikidoc.org/8/80/SemiCircle_Grey_Pill.png" alt="Semi-Circle Pill"/></div>
                        <div id="Shape_Trapezoid" class="pillShapeOption" data-val="Trapezoid" data-prop="selectedShape"><img src="http://static.wikidoc.org/7/7a/Trapezoid_Grey_Pill.png" alt="Trapezoid Pill"/></div>
                    <div id="Shape_Trapezoid" class="pillShapeOption" data-val="Trapezoid" data-prop="selectedShape"><img src="http://static.wikidoc.org/7/7a/Trapezoid_Grey_Pill.png" alt="Trapezoid Pill"/></div>
                        <div id="Shape_Tear_Drop" class="pillShapeOption" data-val="TearDrop" data-prop="selectedShape"><img src="http://static.wikidoc.org/9/9a/Tear_Drop_Grey_Pill.png" alt="Tear Drop Pill"/></div>
                    <div id="Shape_Tear_Drop" class="pillShapeOption" data-val="TearDrop" data-prop="selectedShape"><img src="http://static.wikidoc.org/9/9a/Tear_Drop_Grey_Pill.png" alt="Tear Drop Pill"/></div>
                        <div id="Shape_Free_Form" class="pillShapeOption" data-val="FreeForm" data-prop="selectedShape"><img src="http://static.wikidoc.org/f/fa/Free_Form_Grey_Pill.png" alt="Free Form Pill"/></div>
                    <div id="Shape_Free_Form" class="pillShapeOption" data-val="FreeForm" data-prop="selectedShape"><img src="http://static.wikidoc.org/f/fa/Free_Form_Grey_Pill.png" alt="Free Form Pill"/></div>
                    </div>
                 </div>
                 </div>
             </div>
             </div>
            <div id="queryContainer_Color" class="propertyContainerInactive" data-order="2">
        </div>
                <span class="propertyContainer_Title">COLOR</span>
        <div id="queryContainer_Color" class="propertyContainerInactive" data-order="2">
                <div id="pillColorContainer" class="propertyContainer">
        <span class="propertyContainer_Title">COLOR</span>
                    <div id="pillColorContainer_Row1" class="pillContainer_Row">
            <div id="pillColorContainer" class="propertyContainer">
                        <div id="Color_RedBrown" class="pillColorOption" data-val="Brown" data-prop="selectedColor"><img src="http://static.wikidoc.org/8/8a/Pid_redbrown.png" alt="Red/Brown"></div>
                <div id="pillColorContainer_Row1" class="pillContainer_Row">
                        <div id="Color_Orange" class="pillColorOption" data-val="Orange" data-prop="selectedColor"><img src="http://static.wikidoc.org/a/ae/Pid_orange.png" alt="Orange"></div>
                    <div id="Color_RedBrown" class="pillColorOption" data-val="Brown" data-prop="selectedColor"><img src="http://static.wikidoc.org/8/8a/Pid_redbrown.png" alt="Red/Brown"></div>
                        <div id="Color_Yellow" class="pillColorOption" data-val="Yellow" data-prop="selectedColor"><img src="http://static.wikidoc.org/e/e3/Pid_yellow.png" alt="Yellow"></div>
                    <div id="Color_Orange" class="pillColorOption" data-val="Orange" data-prop="selectedColor"><img src="http://static.wikidoc.org/a/ae/Pid_orange.png" alt="Orange"></div>
                        <div id="Color_Green" class="pillColorOption" data-val="Green" data-prop="selectedColor"><img src="http://static.wikidoc.org/c/c0/Pid_green.png" alt="Green"></div>
                    <div id="Color_Yellow" class="pillColorOption" data-val="Yellow" data-prop="selectedColor"><img src="http://static.wikidoc.org/e/e3/Pid_yellow.png" alt="Yellow"></div>
                        <div id="Color_Torqouise" class="pillColorOption" data-val="Torquoise" data-prop="selectedColor"><img src="http://static.wikidoc.org/1/11/Pid_turquoise.png" alt="Torqouise"></div>
                    <div id="Color_Green" class="pillColorOption" data-val="Green" data-prop="selectedColor"><img src="http://static.wikidoc.org/c/c0/Pid_green.png" alt="Green"></div>
                        <div id="Color_Blue" class="pillColorOption" data-val="Blue" data-prop="selectedColor"><img src="http://static.wikidoc.org/7/70/Pid_blue.png" alt="Blue"></div>
                    <div id="Color_Torqouise" class="pillColorOption" data-val="Torquoise" data-prop="selectedColor"><img src="http://static.wikidoc.org/1/11/Pid_turquoise.png" alt="Torqouise"></div>
                    </div>
                    <div id="Color_Blue" class="pillColorOption" data-val="Blue" data-prop="selectedColor"><img src="http://static.wikidoc.org/7/70/Pid_blue.png" alt="Blue"></div>
                    <div id="pillColorContainer_Row2" class="pillContainer_Row">
                </div>
                        <div id="Color_Purple" class="pillColorOption" data-val="Purple" data-prop="selectedColor"><img src="http://static.wikidoc.org/1/19/Pid_purple.png" alt="Purple"></div>
                <div id="pillColorContainer_Row2" class="pillContainer_Row">
                        <div id="Color_Pink" class="pillColorOption" data-val="Pink" data-prop="selectedColor"><img src="http://static.wikidoc.org/9/97/Pid_pink.png" alt="Pink"></div>
                    <div id="Color_Purple" class="pillColorOption" data-val="Purple" data-prop="selectedColor"><img src="http://static.wikidoc.org/1/19/Pid_purple.png" alt="Purple"></div>
                        <div id="Color_Black" class="pillColorOption" data-val="Black" data-prop="selectedColor"><img src="http://static.wikidoc.org/c/cb/Pid_black.png" alt="Black"></div>
                    <div id="Color_Pink" class="pillColorOption" data-val="Pink" data-prop="selectedColor"><img src="http://static.wikidoc.org/9/97/Pid_pink.png" alt="Pink"></div>
                        <div id="Color_Grey" class="pillColorOption" data-val="Grey" data-prop="selectedColor"><img src="http://static.wikidoc.org/f/f5/Pid_grey.png" alt="Grey"></div>
                    <div id="Color_Black" class="pillColorOption" data-val="Black" data-prop="selectedColor"><img src="http://static.wikidoc.org/c/cb/Pid_black.png" alt="Black"></div>
                        <div id="Color_White" class="pillColorOption" data-val="White" data-prop="selectedColor"><img src="http://static.wikidoc.org/d/d2/Pid_white.png" alt="White"></div>
                    <div id="Color_Grey" class="pillColorOption" data-val="Grey" data-prop="selectedColor"><img src="http://static.wikidoc.org/f/f5/Pid_grey.png" alt="Grey"></div>
                    </div>
                    <div id="Color_White" class="pillColorOption" data-val="White" data-prop="selectedColor"><img src="http://static.wikidoc.org/d/d2/Pid_white.png" alt="White"></div>
                 </div>
                 </div>
             </div>
             </div>
            <div id="queryContainer_Scoring" class="propertyContainerInactive" data-order="3">
        </div>
                <span class="propertyContainer_Title">SCORING</span>
        <div id="queryContainer_Scoring" class="propertyContainerInactive" data-order="3">
                <div id="pillScoreContainer" class = "propertyContainer">
        <span class="propertyContainer_Title">SCORING</span>
                    <div id="pillScoreContainer_Row1" class="pillContainer_Row">
            <div id="pillScoreContainer" class = "propertyContainer">
                        <div id="pillScore1" class="pillScoreOption" data-val="1" data-prop="selectedScoring"><img src="http://static.wikidoc.org/f/f2/Score_1_Grey_Pill.jpg" alt="Score 1"></div>
            <div id="pillScoreContainer_Row1" class="pillContainer_Row">
                        <div id="pillScore2" class="pillScoreOption" data-val="2" data-prop="selectedScoring"><img src="http://static.wikidoc.org/9/95/Score_2_Grey_Pill.jpg" alt="Score 2"></div>
            <div id="pillScore1" class="pillScoreOption" data-val="1" data-prop="selectedScoring"><img src="http://static.wikidoc.org/f/f2/Score_1_Grey_Pill.jpg" alt="Score 1"></div>
            <div id="pillScore2" class="pillScoreOption" data-val="2" data-prop="selectedScoring"><img src="http://static.wikidoc.org/9/95/Score_2_Grey_Pill.jpg" alt="Score 2"></div>
            </div>
            <div id="pillScoreContainer_Row2" class="pillContainer_Row">
            <div id="pillScore3" class="pillScoreOption" data-val="3" data-prop="selectedScoring"><img src="http://static.wikidoc.org/d/d9/Score_3_Grey_Pill.jpg" alt="Score 3"></div>
            <div id="pillScore4" class="pillScoreOption" data-val="4" data-prop="selectedScoring"><img src="http://static.wikidoc.org/3/35/Score_4_Grey_Pill.jpg" alt="Score 4"></div>
            </div>
            </div>
        </div>
        <div id="queryContainer_Size" class="propertyContainerInactive" data-order="4">
        <span class="propertyContainer_Title">SIZE</span>
            <div id="pillSizeContainer" class="propertyContainer">
            <span>Search for Pills Between:&nbsp;</span>
 
                <div id="sliderContainer" class="pillContainer_Row" style="m">
                    <div class="pillSizeOption">
                        <img id="DisplaySmallSize" src="http://static.wikidoc.org/f/f2/Pill_Size_5_mm.png"  alt=""/>
                        <span id="pillMinSize">5</span><span>&nbsp;mm</span>
                     </div>
                     </div>
                     <div id="pillScoreContainer_Row2" class="pillContainer_Row">
                     <div class="pillSizeOption">
                         <div id="pillScore3" class="pillScoreOption" data-val="3" data-prop="selectedScoring"><img src="http://static.wikidoc.org/d/d9/Score_3_Grey_Pill.jpg" alt="Score 3"></div>
                         <img id="DisplayDime" src="http://static.wikidoc.org/c/c4/Pill_Size_Dime.png" alt="Reference Dime"/>
                        <div id="pillScore4" class="pillScoreOption" data-val="4" data-prop="selectedScoring"><img src="http://static.wikidoc.org/3/35/Score_4_Grey_Pill.jpg" alt="Score 4"></div>
                    </div>
                    <div class="pillSizeOption">
                        <span id="pillMaxSize">20</span><span>&nbsp;mm</span>
                        <img id="DisplayLargeSize" src="http://static.wikidoc.org/e/e6/Pill_Size_20_mm.png" alt=""/>
                     </div>
                     </div>
                 </div>
                 </div>
                <br>
                <br>
                <div id="slider"></div>
             </div>
             </div>
            <div id="queryContainer_Size" class="propertyContainerInactive" data-order="4">
        </div>
                <span class="propertyContainer_Title">SIZE</span>
<div id = "misc" class="propertyContainerInactive" data-order="5">
                 <div id="pillSizeContainer" class="propertyContainer">
        <form name="selectMisc">
                    <span>Search for Pills Between:&nbsp;</span>
                 <div class="pillMiscContainer" id="queryContainer-Imprint" data-prop="selectedImprint" data-inputName="pillImprint">
   
                    <span class="propertyContainer_Title">IMPRINT</span>
                    <div id="sliderContainer" class="pillContainer_Row" style="m">
                    <div id="PillImprintContainer" class="propertyContainer-Small">
                        <div class="pillSizeOption">
                         <span>Please Enter the Pill Imprint:&nbsp;</span><br>
                            <img id="DisplaySmallSize" src="http://static.wikidoc.org/f/f2/Pill_Size_5_mm.png"  alt=""/>
<input id="pillImprint" name="pillImprint" type="text">
                            <span id="pillMinSize">5</span><span>&nbsp;mm</span>
                        </div>
                        <div class="pillSizeOption">
                            <img id="DisplayDime" src="http://static.wikidoc.org/c/c4/Pill_Size_Dime.png" alt="Reference Dime"/>
                        </div>
                         <div class="pillSizeOption">
                            <span id="pillMaxSize">20</span><span>&nbsp;mm</span>
                            <img id="DisplayLargeSize" src="http://static.wikidoc.org/e/e6/Pill_Size_20_mm.png" alt=""/>
                        </div>
                     </div>
                     </div>
                    <br>
                    <br>
                    <div id="slider"></div>
                 </div>
                 </div>
            </div>
                 <div class="pillMiscContainer" id="queryContainer-NDC" data-prop="selectedNDC" data-inputName="pillNDC">
            <div id = "misc" class="propertyContainerInactive" data-order="5">
                    <span class="propertyContainer_Title">NDC</span>
                 <form name="selectMisc">
                    <div id="pillNDCContainer" class="propertyContainer-Small">
                    <div class="pillMiscContainer" id="queryContainer-Imprint" data-prop="selectedImprint" data-inputName="pillImprint">
                        <span>If available, please enter the NDC:&nbsp;</span><br>
                        <span class="propertyContainer_Title">IMPRINT</span>
                        <input id="pillNDC" name="pillNDC" type="text">
                        <div id="PillImprintContainer" class="propertyContainer-Small">
                            <span>Please Enter the Pill Imprint:&nbsp;</span><br>
                            <input id="pillImprint" name="pillImprint" type="text">
                        </div>
                     </div>
                     </div>
                    <div class="pillMiscContainer" id="queryContainer-NDC" data-prop="selectedNDC" data-inputName="pillNDC">
                </div>  
                        <span class="propertyContainer_Title">NDC</span>
                <div class="pillMiscContainer" id="queryContainer-Ingred" data-prop="selectedIngred" data-inputName="pillIngred">
                        <div id="pillNDCContainer" class="propertyContainer-Small">
                    <span class="propertyContainer_Title">INGREDIENTS</span>
                            <span>If available, please enter the NDC:&nbsp;</span><br>
                    <div id="PillIngredContainer" class="propertyContainer-Small">
                            <input id="pillNDC" name="pillNDC" type="text">
                        <span>If available, please enter the ingredients:&nbsp;</span><br>
                        </div>
<input  id ="pillIngred" name="pillIngred" type="text">
                    </div>
                    <div class="pillMiscContainer" id="queryContainer-Ingred" data-prop="selectedIngred" data-inputName="pillIngred">
                        <span class="propertyContainer_Title">INGREDIENTS</span>
                        <div id="PillIngredContainer" class="propertyContainer-Small">
                            <span>If available, please enter the ingredients:&nbsp;</span><br>
                            <input  id ="pillIngred" name="pillIngred" type="text">
                        </div>
                     </div>
                     </div>
                 </form>
                 </div>
            </div>
</form>
</div>
    </div>
 
    <div id="pillIDNav">
    <div id="reset">
        <img src="http://static.wikidoc.org/a/a9/Pid_resetbutton.png" alt="reset">
    </div>
    <div id="back" class="navTool" data-direction="back" style="visibility:hidden">
        <img src="http://static.wikidoc.org/8/83/Pid_backbutton.png" alt="back">
        </div>
    <div id="next" class="navTool" data-direction="next" style="visibility:visible">
        <img src="http://static.wikidoc.org/8/8a/Pid_nextbutton.png" alt="next">
         </div>
         </div>
         <div id="pillIDNav">
         <div id="submit">
            <div id="back" class="navTool" data-direction="back" style="visibility:hidden">
        <img src="http://static.wikidoc.org/6/6c/Pid_submitbutton.png" alt="Submit">
                <img src="http://static.wikidoc.org/8/83/Pid_backbutton.png" alt="back">
            </div>
            <div id="next" class="navTool" data-direction="next" style="visibility:visible">
                <img src="http://static.wikidoc.org/8/8a/Pid_nextbutton.png" alt="next">
            </div>
            <div id="submit">
                <img src="http://static.wikidoc.org/6/6c/Pid_submitbutton.png" alt="Submit">
            </div>
         </div>
         </div>
     </div>
     </div>
    <div id="resultsTable-container" style="visibility:collapse;">
</div>
<div id="resultsTable-container" style="visibility:collapse;">
</div>


    </div>
</includeonly>
</includeonly>

Latest revision as of 02:37, 3 August 2015

Retrieved from "https://www.wikidoc.org/index.php?title=Widget:PillIdentifier&oldid=1126396"