MOS
/
OpenBoard
5
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Functional Pixabay search

Browse Source 
- Fixed display
- Fixed/added support for pages
- Added image title generation, so it can be e.g added to OpenBoard
library
preferencesAboutTextFull
Craig Watson 9 years ago
parent 0eba0b1f31
commit b8928d9f29
7 changed files with 237 additions and 239 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 2
      resources/library/search/Pixabay.wgs/config.xml
  2. 1
      resources/library/search/Pixabay.wgs/css/basic.css
  3. BIN
      resources/library/search/Pixabay.wgs/icon.png
  4. BIN
      resources/library/search/Pixabay.wgs/icon.thumbnail.png
  5. 443
      resources/library/search/Pixabay.wgs/index.html
  6. BIN
      resources/library/search/Pixabay.wgs/logo.png
  7. BIN
      resources/library/search/Pixabay.wgs/logo_square.png

2
resources/library/search/Pixabay.wgs/config.xml
Unescape View File

@ -7,7 +7,7 @@
height="500"
ub:resizable="true">
<name>Choisir</name>
<name>Pixabay search</name>
<author>Craig Watson</author>
<description>Pixabay image search</description>

1
resources/library/search/Pixabay.wgs/css/basic.css
Unescape View File

@ -4,6 +4,7 @@ html, body{
height: auto;
background-color: white;
margin: 0;
font-family: arial;
}
::-webkit-scrollbar {

BIN
resources/library/search/Pixabay.wgs/icon.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.9 KiB

BIN
resources/library/search/Pixabay.wgs/icon.thumbnail.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.9 KiB

443
resources/library/search/Pixabay.wgs/index.html
Unescape View File

@ -5,263 +5,260 @@
<title>Pixabay Image Search</title>
<link rel="stylesheet" type="text/css" href="css/basic.css"/>
<script type="text/javascript" src="scripts/jquery-1.6.2.min.js"></script>
<script type="text/javascript">
var API_KEY = '2217022-41b455b44dccd972675602446';
var category = "image";
var thumbnails = true;
var minHeight = 150;
var minWidth = 150;
var currentIndex = 0;
var currentTerm = "";
var limit = 10;
var filtersDisplayed = false; //display or hide filters
function runSearch(term, index) {
currentTerm = term;
currentIndex = index;
var start = index * limit;
var url = "https://pixabay.com/api/?key="+API_KEY+"&q="+escape(term)+"&per_page="+limit+"&page="+start+"&safesearch=true";
$.ajax({
url: url,
success: searchComplete,
error: searchFail,
dataType: "json"
});
}
</head>
function searchComplete(json) {
// Grab our content div, clear it.
var totalResults = json.totalResults;
var contentDiv = $('#searchResult').empty();
// Loop through our results, printing them to the page.
var results = json.hits;
for (var i = 0; i < results.length; i++) {
// For each result write it's title and image to the screen
var result = results[i];
var imgContainer = $("<div class='imgContainer' draggable='true'>");
//var title = document.createElement('div');
var iUrl = $("<input type='hidden'/>");
var iContent = $("<input type='hidden'/>");
var iHeight = $("<input type='hidden'/>");
var iWidth = $("<input type='hidden'/>");
var iThumbnailUrl = $("<input type='hidden'/>");
var newImg = document.createElement('img');
if (thumbnails) {
newImg.src = result.previewURL;
} else {
newImg.src = "./images/thumbnail_icon.png";
}
var imgWidth = (result.tbWidth > minWidth)?result.tbWidth:minWidth;
var imgHeight = (result.tbHeight > minHeight)?result.tbHeight:minHeight;
imgContainer.width(imgWidth).height(imgHeight);
imgContainer.append($(newImg));
iUrl.attr("value", result.webformatURL);
iContent.attr("value", result.type);
iHeight.attr("value", result.webformatHeight);
iWidth.attr("value", result.webformatWidth);
//iTitle.attr("value",result.title);
console.log(result.previewURL);
iThumbnailUrl.attr("value", result.previewURL);
//imgContainer.append($(title));
imgContainer.append(iUrl);
imgContainer.append(iContent);
imgContainer.append(iHeight);
imgContainer.append(iWidth);
imgContainer.append(iThumbnailUrl);
// Put our title + image in the content
imgContainer.appendTo(contentDiv);
<body>
</body>
}
// Now add links to additional pages of search results.
addPaginationLinks(totalResults);
}
<script type="text/javascript">
/*
This script makes use of the Pixabay image search API, documented here:
https://pixabay.com/api/docs/
*/
var API_KEY = '2217022-41b455b44dccd972675602446'; // TODO: move this to C++
function addPaginationLinks(totalResults) {
var curPage = currentIndex; // check what page the app is on
var pagesDiv = $("<div id='resultFooter' class='resultFooter'>");
for (var i = 0; i < 8; i++) {
if (i * limit < totalResults) {
// Number of results per page
var limit = 10;
var link = $("<a class='pager_button'></a>").attr('href', 'javascript:gotoPage('+i+');').html(i+1).appendTo(pagesDiv);
if (curPage == i) {
link.addClass('active');
}
}
}
// Maximum number of pages to display
var maxPages = 10;
$("#disc_nav_cont #resultFooter").remove();
pagesDiv.insertBefore($('#disclaimer'));
// Minimum size of pictures to search for
var minHeight = 150;
var minWidth = 150;
$(".imgContainer").each(function(){
this.addEventListener("dragstart", imageDragging, false);
})
// Image type to retrieve. Can be "photo", "illustration", "vector" or "all".
var imageType = "all"
$(".imgContainer").each(function(){
this.addEventListener("dragenter", imageDragenter, false);
})
// Language code to search in
var searchLanguage = "en"
$(".imgContainer").each(function(){
this.addEventListener("dragleave", imageDragleave, false);
})
$(".imgContainer").each(function(){
this.addEventListener("dragover", imageDragover, false);
})
}
function searchFail(jqXHR, textStatus, errorThrown) {
alert('Couldn\'t connect to Pixabay: ' + textStatus + ' ' + errorThrown);
}
function imageDragging(e){
e.dataTransfer.setData("text/plain",$(this).find("input:hidden").eq(0).val());
// alert($(this).find("input:hidden").eq(0).val());
}
// ---------------------
// Globals
var currentIndex = 0;
var currentTerm = "";
// ---------------------
function imageDragleave(e){
return false;
}
$(document).ready(loadPage)
function imageDragover(e){
return false;
}
function imageDragenter(e){
return false;
}
function loadPage() {
//variables
var mode = false; //search or view mode
var hide = false; //hide or no main panel
$(document).ready(function(){
//basic containers and elements
//variables
var mode = false; //search or view mode
var hide = false; //hide or no main panel
var search = $("<div id='search' class='search'>").appendTo("body");
//basic containers and elements
var subSearchInput = $("<div id='subSearchInput' class='subSearch'>").appendTo(search);
var subSearchFilter = $("<div id='subSearchFilter' class='subSearch'>").appendTo(search);
var search = $("<div id='search' class='search'>").appendTo("body");
var disc_nav_cont = $("<div id='disc_nav_cont' class='disc_nav_cont'>").appendTo("body");
var disclaimer = $("<div id='disclaimer' class='disclaimer'>Recherche d'images sur Pixabay<div>").appendTo(disc_nav_cont);
var searchInput = $("<input id='searchInput' class='searchInput' type='text'/>").appendTo(subSearchInput);
var searchButton = $("<div id='searchButton' class='searchButton'>").appendTo(subSearchInput);
var togglePages = $("<div id='togglePages' class='togglePages'>").appendTo(search);
var toggleIcon = $("<div id='toggleIcon' class='toggleIcon'>").appendTo(togglePages);
var searchResult = $("<div id='searchResult'>").appendTo("body");
var subSearchInput = $("<div id='subSearchInput' class='subSearch'>").appendTo(search);
var subSearchFilter = $("<div id='subSearchFilter' class='subSearch'>").appendTo(search);
var disc_nav_cont = $("<div id='disc_nav_cont' class='disc_nav_cont'>").appendTo("body");
var disclaimer = $("<div id='disclaimer' class='disclaimer'>Pixabay.com image search<div>").appendTo(disc_nav_cont);
var searchInput = $("<input id='searchInput' class='searchInput' type='text'/>").appendTo(subSearchInput);
var searchButton = $("<div id='searchButton' class='searchButton'>").appendTo(subSearchInput);
// var toggleFilters = $("<div id='toggleFilters' class='toggleFilters'>").appendTo(subSearchInput);
//adding filters to the wgt
/*
var selectFilter = $("<select id='sizeFilter' class='filterSelect'>")
.append($("<option value='0'>Any</option>"))
.append($("<option value='1'>Small</option>"))
.append($("<option value='2'>Medium</option>"))
.append($("<option value='3'>Large</option>"))
.append($("<option value='4'>Extra large</option>"));
$("<div class='filterContainer'>").append("<span>Size:</span>").append(selectFilter).appendTo(subSearchFilter);
*/
//mouse click actions
/*
toggleFilters.click(function(){
if(filtersDisplayed){
subSearchFilter.hide();
toggleFilters.css("background-image","url(images/down.png)");
filtersDisplayed = false;
} else {
subSearchFilter.show();
toggleFilters.css("background-image","url(images/up.png)");
filtersDisplayed = true;
}
});
*/
/*togglePages.click(function(event){
if(mode){
hide = false;
$("#search, #disclaimer").slideDown('slow', function(){
toggleIcon.css("background-image","url(images/trgUp.png)");
togglePages.appendTo("#search").css("top","").css("bottom","-14px");
});
mode = false;
} else {
hide = true;
$("#search, #disclaimer").slideUp('slow', function(){
toggleIcon.css("background-image","url(images/trgDown.png)");
togglePages.appendTo("body").css("top","0");
});
mode = true;
}
});*/
searchButton.click(function(){
if(!hide){
runSearch(searchInput.val(), 0);
}
});
searchButton.click(function(){
if(!hide){
searchInput.keydown(function(event){
if(!hide){
if((event.keyCode == 0xA)||(event.keyCode == 0xD)){
runSearch(searchInput.val(), 0);
//togglePages.trigger("click");
}
});
searchInput.keydown(function(event){
if(!hide){
if((event.keyCode == 0xA)||(event.keyCode == 0xD)){
runSearch(searchInput.val(), 0);
//togglePages.trigger("click");
}
}
});
(
$(".imgContainer").live("click",function(){
sankore.sendFileMetadata(createMetaData($(this)));
}));
}
function runSearch(term, index) {
currentTerm = term;
currentIndex = index;
var page = index+1; // Page numbers start at 1 on Pixabay
var url = "https://pixabay.com/api/?key="+API_KEY
+"&q="+escape(term)
+"&per_page="+limit
+"&page="+page
+"&min_width="+minWidth
+"&minHeight="+minHeight
+"&image_type="+imageType
+"&lang="+searchLanguage
+"&safesearch=true";
//console.log(url);
$.ajax({
url: url,
success: searchComplete,
error: searchFail,
dataType: "json"
});
}
function searchComplete(json) {
// Grab our content div, clear it.
var totalResults = json.totalHits;
var contentDiv = $('#searchResult').empty();
// Loop through our results, printing them to the page.
var results = json.hits;
}
});
(
$(".imgContainer").live("click",function(){
sankore.sendFileMetadata(createMetaData($(this)));
}));
/*$(window).resize(function(){
disclaimer.width($("body").width()-20);
search.width($("body").width()-20);
toggleIcon.css("margin-left",(togglePages.width()/2 - 7));
})*/
//TODO: display a message on page when there are zero results. Would require locales, ideally
});
for (var i = 0; i < results.length; i++) {
var result = results[i];
/*
Images are displayed in an `imgContainer` element. It contains
the image itself (`newImg`) but also some hidden fields containing
metadata that is sent to OpenBoard if the user clicks the image
*/
// Image element
var imgContainer = $("<div class='imgContainer' draggable='true'>");
var newImg = document.createElement('img');
newImg.src = result.previewURL;
var imgWidth = (result.tbWidth > minWidth)?result.tbWidth:minWidth;
var imgHeight = (result.tbHeight > minHeight)?result.tbHeight:minHeight;
imgContainer.width(imgWidth).height(imgHeight);
imgContainer.append($(newImg));
// Metadata to send to OpenBoard
var iUrl = $("<input type='hidden'/>");
var iContent = $("<input type='hidden'/>");
var iHeight = $("<input type='hidden'/>");
var iWidth = $("<input type='hidden'/>");
var iThumbnailUrl = $("<input type='hidden'/>");
var iTitle = $("<input type='hidden'/>");
iUrl.attr("value", result.webformatURL);
iContent.attr("value", result.type);
iHeight.attr("value", result.webformatHeight);
iWidth.attr("value", result.webformatWidth);
iThumbnailUrl.attr("value", result.previewURL);
iTitle.attr("value", getImageTitle(result));
imgContainer.append(iUrl);
imgContainer.append(iContent);
imgContainer.append(iHeight);
imgContainer.append(iWidth);
imgContainer.append(iThumbnailUrl);
imgContainer.append(iTitle);
// Add the image to the page
imgContainer.appendTo(contentDiv);
function gotoPage(i) {
runSearch(currentTerm, i);
}
// Now add links to additional pages of search results.
addPaginationLinks(totalResults);
}
function addPaginationLinks(totalResults) {
var curPage = currentIndex;
var pagesDiv = $("<div id='resultFooter' class='resultFooter'>");
function createMetaData(parent){
var meta = "";
//alert($(this).find("input:hidden").eq(0).val());
meta = "<metadata><data><key>Type</key><value>Image</value></data><data><key>Url</key><value>" +
parent.find("input:hidden").eq(0).val() +
"</value></data><data><key>Content</key><value>" +
parent.find("input:hidden").eq(1).val() +
"</value></data><data><key>Height</key><value>" +
parent.find("input:hidden").eq(2).val() +
"</value></data><data><key>Width</key><value>" +
parent.find("input:hidden").eq(3).val() +
"</value></data><data><key>thumbnailUrl</key><value>" +
parent.find("input:hidden").eq(4).val() +
"</value></data></metadata>";
return meta;
var highestPageNumber = maxPages;
if (totalResults/limit < maxPages)
highestPageNumber = totalResults/limit;
for (var i = 0; i < highestPageNumber; i++) {
var link = $("<a class='pager_button'></a>").attr('href', 'javascript:gotoPage('+i+');').html(i+1).appendTo(pagesDiv);
if (curPage == i)
link.addClass('active');
}
</script>
</head>
<body style="font-family: Arial;border: 0 none;">
<div id="searchResult"></div>
</body>
$("#disc_nav_cont #resultFooter").remove();
pagesDiv.insertBefore($('#disclaimer'));
$(".imgContainer").each(function(){
this.addEventListener("dragstart", imageDragging, false);
})
$(".imgContainer").each(function(){
this.addEventListener("dragenter", imageDragenter, false);
})
$(".imgContainer").each(function(){
this.addEventListener("dragleave", imageDragleave, false);
})
$(".imgContainer").each(function(){
this.addEventListener("dragover", imageDragover, false);
})
}
function searchFail(jqXHR, textStatus, errorThrown) {
alert('Couldn\'t connect to Pixabay: ' + textStatus + ' ' + errorThrown);
}
function imageDragging(e){
e.dataTransfer.setData("text/plain",$(this).find("input:hidden").eq(0).val());
}
function imageDragleave(e){
return false;
}
function imageDragover(e){
return false;
}
function imageDragenter(e){
return false;
}
function gotoPage(i) {
runSearch(currentTerm, i);
}
function createMetaData(parent){
var meta = "";
//alert($(this).find("input:hidden").eq(0).val());
meta = "<metadata><data><key>Type</key><value>Image</value></data><data><key>Url</key><value>" +
parent.find("input:hidden").eq(0).val() +
"</value></data><data><key>Content</key><value>" +
parent.find("input:hidden").eq(1).val() +
"</value></data><data><key>Height</key><value>" +
parent.find("input:hidden").eq(2).val() +
"</value></data><data><key>Width</key><value>" +
parent.find("input:hidden").eq(3).val() +
"</value></data><data><key>thumbnailUrl</key><value>" +
parent.find("input:hidden").eq(4).val() +
"</value></data><data><key>Title</key><value>" +
parent.find("input:hidden").eq(5).val() +
"</value></data></metadata>";
return meta;
}
function getImageTitle(image) {
// Pixabay images don't have a title, but we can fetch the first tag and use that as a title.
var firstTag = image.tags.split(",")[0]
//console.log(firstTag);
return firstTag;
}
</script>
</html>

BIN
resources/library/search/Pixabay.wgs/logo.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.1 KiB

BIN
resources/library/search/Pixabay.wgs/logo_square.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 22 KiB

Write Preview
Loading…
Cancel
Save