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. 265
      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

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

@ -5,26 +5,105 @@
<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>
</head>
<body>
</body>
<script type="text/javascript">
var API_KEY = '2217022-41b455b44dccd972675602446';
/*
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++
// Number of results per page
var limit = 10;
// Maximum number of pages to display
var maxPages = 10;
var category = "image";
var thumbnails = true;
// Minimum size of pictures to search for
var minHeight = 150;
var minWidth = 150;
// Image type to retrieve. Can be "photo", "illustration", "vector" or "all".
var imageType = "all"
// Language code to search in
var searchLanguage = "en"
// ---------------------
// Globals
var currentIndex = 0;
var currentTerm = "";
var limit = 10;
var filtersDisplayed = false; //display or hide filters
// ---------------------
$(document).ready(loadPage)
function loadPage() {
//variables
var mode = false; //search or view mode
var hide = false; //hide or no main panel
//basic containers and elements
var search = $("<div id='search' class='search'>").appendTo("body");
var subSearchInput = $("<div id='subSearchInput' class='subSearch'>").appendTo(search);
var subSearchFilter = $("<div id='subSearchFilter' class='subSearch'>").appendTo(search);
var searchInput = $("<input id='searchInput' class='searchInput' type='text'/>").appendTo(subSearchInput);
var searchButton = $("<div id='searchButton' class='searchButton'>").appendTo(subSearchInput);
var searchResult = $("<div id='searchResult'>").appendTo("body");
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);
searchButton.click(function(){
if(!hide){
runSearch(searchInput.val(), 0);
}
});
searchInput.keydown(function(event){
if(!hide){
if((event.keyCode == 0xA)||(event.keyCode == 0xD)){
runSearch(searchInput.val(), 0);
}
}
});
(
$(".imgContainer").live("click",function(){
sankore.sendFileMetadata(createMetaData($(this)));
}));
}
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";
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,
@ -35,49 +114,56 @@
function searchComplete(json) {
// Grab our content div, clear it.
var totalResults = json.totalResults;
var totalResults = json.totalHits;
var contentDiv = $('#searchResult').empty();
// Loop through our results, printing them to the page.
var results = json.hits;
//TODO: display a message on page when there are zero results. Would require locales, ideally
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'/>");
/*
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');
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));
// 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);
//iTitle.attr("value",result.title);
console.log(result.previewURL);
iThumbnailUrl.attr("value", result.previewURL);
//imgContainer.append($(title));
iTitle.attr("value", getImageTitle(result));
imgContainer.append(iUrl);
imgContainer.append(iContent);
imgContainer.append(iHeight);
imgContainer.append(iWidth);
imgContainer.append(iThumbnailUrl);
imgContainer.append(iTitle);
// Put our title + image in the content
// Add the image to the page
imgContainer.appendTo(contentDiv);
}
@ -88,17 +174,18 @@
function addPaginationLinks(totalResults) {
var curPage = currentIndex; // check what page the app is on
var curPage = currentIndex;
var pagesDiv = $("<div id='resultFooter' class='resultFooter'>");
for (var i = 0; i < 8; i++) {
if (i * limit < totalResults) {
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) {
if (curPage == i)
link.addClass('active');
}
}
}
$("#disc_nav_cont #resultFooter").remove();
pagesDiv.insertBefore($('#disclaimer'));
@ -126,7 +213,6 @@
function imageDragging(e){
e.dataTransfer.setData("text/plain",$(this).find("input:hidden").eq(0).val());
// alert($(this).find("input:hidden").eq(0).val());
}
function imageDragleave(e){
@ -141,107 +227,10 @@
return false;
}
$(document).ready(function(){
//variables
var mode = false; //search or view mode
var hide = false; //hide or no main panel
//basic containers and elements
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 togglePages = $("<div id='togglePages' class='togglePages'>").appendTo(search);
var toggleIcon = $("<div id='toggleIcon' class='toggleIcon'>").appendTo(togglePages);
var subSearchInput = $("<div id='subSearchInput' class='subSearch'>").appendTo(search);
var subSearchFilter = $("<div id='subSearchFilter' class='subSearch'>").appendTo(search);
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);
//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)));
}));
/*$(window).resize(function(){
disclaimer.width($("body").width()-20);
search.width($("body").width()-20);
toggleIcon.css("margin-left",(togglePages.width()/2 - 7));
})*/
});
function gotoPage(i) {
runSearch(currentTerm, i);
}
function createMetaData(parent){
var meta = "";
//alert($(this).find("input:hidden").eq(0).val());
@ -255,13 +244,21 @@
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>
</head>
<body style="font-family: Arial;border: 0 none;">
<div id="searchResult"></div>
</body>
</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