Skip to content

GitLab

Commit 8a7b9a85 authored by Marcel Hauck's avatar Marcel Hauck
Browse files
Options

added subcategories, minor text and style changes

parent 64f9c47d
Hide whitespace changes
Inline Side-by-side
Showing with 258 additions and 115 deletions
css/style.css
View file @ 8a7b9a85
/*
GENERAL
*/
a:link, a:visited, a:hover, a:focus, a:active, a:visited:hover {
color: black;
text-decoration: none;
}
.category-wrapper{
margin-top: 1rem;
margin-bottom: 1rem;
/*
CATEGORIES
*/
.card{
border-color: rgba(0,0,0,.25);
}
.category-header{
.category-header, .subcategory-header{
background: #343a40;
color: #fff;
margin-bottom: 0.5rem;
padding: 5px;
font-weight: 500;
}
.subcategory-header{
background: #fff;
color: #000;
border-top: 1px dashed rgba(0,0,0,.5);
padding-left: 12px;
padding-right: 12px;
}
.counter-text{
font-size: 0.75em;
line-height: 2;
float: right;
font-style: italic;
}
/*
PRODUCTS
*/
.product-wrapper {
width: 79px;
padding: 3px;
padding: 2px;
margin-bottom: 0.5rem;
font-size: 0.6rem;
line-height: 0.8rem;
vertical-align: middle;
background: #fff;
}
.logo{
max-width: 100%;
......@@ -26,11 +51,13 @@ a:link, a:visited, a:hover, a:focus, a:active, a:visited:hover {
margin-bottom: 5px;
display: inline-block;
}
.counter-text{
font-size: 0.75em;
.list-inline{
padding-left: 12px;
padding-right: 12px;
}
.list-inline-item:nth-child(6n){
margin-right: 0;
.list-inline-item{
margin-left: 0 !important;
margin-right: 0 !important;
}
.product-link{
vertical-align: middle;
......@@ -38,6 +65,10 @@ a:link, a:visited, a:hover, a:focus, a:active, a:visited:hover {
.product-name{
display:block;
}
/*
AI Technology Bubbles
*/
.ai-technology, .legend-item-ai-technology-icon{
margin-top: 0.25em;
margin-left: 0.1em;
......
index.html
View file @ 8a7b9a85
......@@ -29,13 +29,13 @@
<div class="container">
<div class="row">
<div class="col-md-12">
<h1>AI Media Technology Landscape <span class="counter-text">(<span id="count-total">0</span> Produkte)</span></h1>
<h1>AI Media Technology Landscape <span class="counter-text"><span id="count-total">0</span> Produkte</span></h1>
</div>
</div>
<div class="row" id="row-products"></div>
<div class="card-columns" id="row-products"></div>
<div class="row-legend">
<h2>Legende</h2>
<div class="legend-description">Was ist der Output des Produktes?</div>
<div class="legend-description">Output des Produktes</div>
<div class="legend-item legend-item-mediatype">
<div class="mediatype-text">Text</div>
</div>
......@@ -55,7 +55,7 @@
<div class="mediatype-other">Sonstiges</div>
</div>
<div class="legend-description">Technology-Readiness-Level</div>
<div class="legend-description">Technology-Readiness</div>
<div class="legend-item legend-item-trl">
<div class="trl-basic-research">Grundlagenforschung </div>
</div>
......@@ -69,7 +69,7 @@
<div class="trl-mass-production">Massenproduktion </div>
</div>
<div class="legend-description">Genutzte KI-Technologien</div>
<div class="legend-description">Genannte KI-Technologie(n)</div>
<div class="legend-item legend-item-ai-technology">
<div class="legend-item-ai-technology-icon">CNN</div> = Convolutional Neural Network
</div>
......
js/scripts.js
View file @ 8a7b9a85
$( document ).ready(function() {
// switches for displaying various information
var showProductCount = true;
var showLegend = true;
var showTitle = true;
var showLegend = false;
var showTitle = false;
var showNavbar = false;
// configuration files
var requestCategories = $.getJSON( "json/categories.json" );
......@@ -12,7 +12,7 @@ $( document ).ready(function() {
.done(function(dataCategories, dataProducts) {
// count all products
$("#count-total").html(dataProducts[0].length);
// Executed when both requests complete successfully
// Both results are available here
......@@ -20,15 +20,39 @@ $( document ).ready(function() {
$.each( dataCategories[0], function() {
currentCategoryShort = this.nameShort;
currentCategoryLong = this.nameLong;
currentSubcategories = this.subcategories;
currentProductNameCount = 0;
html = `
<div class="category-wrapper col-md-6" id="${currentCategoryShort}">
<div class="category-header">
${currentCategoryLong} <span class="counter-text">(<span class="count-product">0</span> Produkte)</item>
<div class="card">
<div class="category-wrapper" id="${currentCategoryShort}">
<div class="category-header clearfix">
${currentCategoryLong} <span class="counter-text"><span class="count-product">0</span> Produkte</span>
</div>
<ul class="list-inline" id="list-${currentCategoryShort}">
</ul>`;
// sort subcategories by long name
if (currentSubcategories !== undefined){
currentSubcategories.sort(function (a, b) {
return a.nameLong.localeCompare( b.nameLong );
});
}
$.each(currentSubcategories, function (index, currentSubcategory){
currentSubcategoryShort = currentSubcategory.nameShort;
currentSubcategoryLong = currentSubcategory.nameLong;
html += `
<div class="subcategory-header card-subtitle mb-2 text-muted">
${currentSubcategoryLong}
</div>
<ul class="list-inline" id="sublist-${currentSubcategoryShort}">
</ul>`;
});
html += `
</div>
</div>
<ul class="list-inline" id="list-${currentCategoryShort}">
</ul>
`;
$("#row-products").append(html);
});
......@@ -48,7 +72,7 @@ $( document ).ready(function() {
currentDescription = this.description;
currentCategories = this.categories;
currentAiTechnologiesUsed = this.aiTechnologiesUsed;
// add appropriate css classes for technology readiness level and mediatype
if(this.technologyReadinessLevel == ""){
currentTechnologyReadinessLevel = "trl-unknown";
......@@ -62,36 +86,64 @@ $( document ).ready(function() {
};
// go through each category of the item and add the product to the correspondig section
$.each( currentCategories, function(key, currentCategory) {
$.each( currentCategories, function(key, currentCategoryWithSubcategory) {
currentCategoryWithSubcategory = currentCategoryWithSubcategory.split("_");
currentCategory = currentCategoryWithSubcategory[0];
currentSubcategory = currentCategoryWithSubcategory[1];
// only show manufacturer if it isn't the same as the product name
if(currentManufacturer != currentName){
currentProductName = currentManufacturer + " <b>" + currentName + "</b>";
} else{
currentProductName = "<b>" + currentName + "</b>";
}
html = `
<li class="product-wrapper text-center list-inline-item ${currentMediatype} ${currentTechnologyReadinessLevel}">
<a href="${currentLink}" title="${currentDescription}" target="_blank" class="product-link">
<img class="logo" src="img/${currentLogo}">
<span class="product-name">${currentProductName}</span>`;
<a href="${currentLink}" title="${currentDescription}" target="_blank" class="product-link">
<img class="logo" src="img/${currentLogo}">
<span class="product-name">${currentProductName}</span>`;
$.each(currentAiTechnologiesUsed, function (index, value){
if(value != ""){
html += `<div class="ai-technology">${value}</div>`;
}
});
html += `
</a>
</a>
</li>
`;
$("#list-" + currentCategory).append(html);
try{
// if the current product has no subcategory append it to the superior category
if(currentSubcategory === undefined){
// subcategory is NOT existing
// add to superior category
if($("#list-" + currentCategory).length){
$("#list-" + currentCategory).append(html);
} else{
// given category is not available!
throw new Error("The given category '"+ currentCategory + "' for '" + currentName + "' does not exist!");
}
}
else{
// subcategory is existing
if($("#sublist-" + currentSubcategory).length){
$("#sublist-" + currentSubcategory).append(html);
} else{
// given category is not available!
throw new Error("The given subcategory '"+ currentSubcategory + "' for '" + currentName + "' does not exist!");
}
}
}
catch (error) {
console.log(error);
}
// increase count of products in current category
$("#" + currentCategory + " span.count-product").html(parseInt($("#" + currentCategory + " span.count-product").html(), 10)+1);
});
});
// show or hide various information
if (showProductCount){
$(".counter-text").show();
......
json/categories.json
View file @ 8a7b9a85
[
{
"nameShort": "BeschaffungInhalte",
"nameLong": "Beschaffung von Informationen und Inhalten"
"nameLong": "Beschaffung von Informationen und Inhalten",
"subcategories": [
{
"nameShort": "PredictiveAnalytics",
"nameLong": "Predictive Analytics"
},
{
"nameShort": "MetadataGeneration",
"nameLong": "Metadaten-Generierung"
},
{
"nameShort": "TextToSpeechToText",
"nameLong": "TextToSpeech oder SpeechToText"
},
{
"nameShort": "Visualisation",
"nameLong": "Visualisierung"
}
]
},
{
"nameShort": "AkquisitionWerbung",
"nameLong": "Akquisition von Werbung"
"nameLong": "Akquisition von Werbung",
"subcategories": [
{
"nameShort": "ProgrammaticTV",
"nameLong": "Programmatic TV"
}
]
},
{
"nameShort": "ProduktionContent",
"nameLong": "Produktion und Aggregation von Content"
"nameLong": "Produktion und Aggregation von Content",
"subcategories": [
{
"nameShort": "AudioGeneration",
"nameLong": "Audio-Generierung"
},
{
"nameShort": "QualityImprovement",
"nameLong": "Qualitätskontrolle oder -verbesserung"
}
]
},
{
"nameShort": "PlazierungWerbung",
"nameLong": "Plazierung von Werbung"
"nameShort": "PlatzierungWerbung",
"nameLong": "Platzierung von Werbung"
},
{
"nameShort": "Packaging",
"nameLong": "Packaging der Produkte"
"nameLong": "Packaging der Produkte",
"subcategories": [
{
"nameShort": "RecommenderSystem",
"nameLong": "Empfehlungssystem"
}
]
},
{
"nameShort": "TechnischeProduktion",
"nameLong": "Technische Produktion"
"nameLong": "Technische Produktion",
"subcategories": [
{
"nameShort": "Coding",
"nameLong": "Kodierung oder Rekodierung"
}
]
},
{
"nameShort": "Distribution",
......
json/products.json
View file @ 8a7b9a85
......@@ -13,7 +13,7 @@
""
],
"categories": [
"BeschaffungInhalte",
"BeschaffungInhalte_PredictiveAnalytics",
"Packaging"
]
},
......@@ -31,7 +31,7 @@
"NN"
],
"categories": [
"BeschaffungInhalte"
"BeschaffungInhalte_PredictiveAnalytics"
]
},
{
......@@ -48,7 +48,7 @@
"NN"
],
"categories": [
"BeschaffungInhalte"
"BeschaffungInhalte_Visualisation"
]
},
{
......@@ -65,7 +65,7 @@
"NN"
],
"categories": [
"BeschaffungInhalte"
"BeschaffungInhalte_Visualisation"
]
},
{
......@@ -100,7 +100,7 @@
""
],
"categories": [
"ProduktionContent"
"ProduktionContent_AudioGeneration"
]
},
{
......@@ -117,7 +117,7 @@
""
],
"categories": [
"ProduktionContent"
"ProduktionContent_QualityImprovement"
]
},
{
......@@ -134,7 +134,7 @@
""
],
"categories": [
"ProduktionContent"
"ProduktionContent_AudioGeneration"
]
},
{
......@@ -151,7 +151,7 @@
""
],
"categories": [
"ProduktionContent",
"ProduktionContent_QualityImprovement",
"Distribution"
]
},
......@@ -169,7 +169,7 @@
""
],
"categories": [
"ProduktionContent"
"ProduktionContent_QualityImprovement"
]
},
{
......@@ -186,7 +186,7 @@
""
],
"categories": [
"ProduktionContent"
"ProduktionContent_AudioGeneration"
]
},
{
......@@ -203,7 +203,7 @@
"NN"
],
"categories": [
"ProduktionContent"
"ProduktionContent_QualityImprovement"
]
},
{
......@@ -237,7 +237,7 @@
""
],
"categories": [
"AkquisitionWerbung",
"AkquisitionWerbung_ProgrammaticTV",
"Packaging"
]
},
......@@ -256,7 +256,7 @@
"NN"
],
"categories": [
"BeschaffungInhalte",
"BeschaffungInhalte_PredictiveAnalytics",
"ProduktionContent"
]
},
......@@ -274,7 +274,7 @@
""
],
"categories": [
"BeschaffungInhalte"
"BeschaffungInhalte_PredictiveAnalytics"
]
},
{
......@@ -365,7 +365,7 @@
],
"categories": [
"ProduktionContent",
"PlazierungWerbung"
"PlatzierungWerbung"
]
},
{
......@@ -382,7 +382,7 @@
"NN"
],
"categories": [
"ProduktionContent"
"ProduktionContent_QualityImprovement"
]
},
{
......@@ -399,7 +399,7 @@
""
],
"categories": [
"ProduktionContent"
"ProduktionContent_QualityImprovement"
]
},
{
......@@ -410,14 +410,13 @@
"mediatype": [
"other"
],
"description": "Objekterkennung und -beschreibung; Generierung von Metadaten",
"description": "Objekterkennung und -beschreibung; Video-Annotierung",
"technologyReadinessLevel": "mass-production",
"aiTechnologiesUsed": [
""
],
"categories": [
"BeschaffungInhalte",
"ProduktionContent"
"BeschaffungInhalte_MetadataGeneration"
]
},
{
......@@ -434,7 +433,7 @@
""
],
"categories": [
"ProduktionContent"
"ProduktionContent_QualityImprovement"
]
},
{
......@@ -445,14 +444,14 @@
"mediatype": [
"video"
],
"description": "Empfehlungssystem",
"description": "Empfehlung von Filmen anhand von Filmtiteln oder Keywords",
"technologyReadinessLevel": "applied-research",
"aiTechnologiesUsed": [
"NN",
"LSTM"
],
"categories": [
"Packaging"
"Packaging_RecommenderSystem"
]
},
{
......@@ -465,14 +464,14 @@
"text",
"other"
],
"description": "Empfehlungssystem",
"description": "Empfehlungen für Textbeiträge oder Videos",
"technologyReadinessLevel": "mass-production",
"aiTechnologiesUsed": [
"CNN",
"NN"
],
"categories": [
"Packaging"
"Packaging_RecommenderSystem"
]
},
{
......@@ -491,7 +490,7 @@
],
"categories": [
"Packaging",
"TechnischeProduktion",
"TechnischeProduktion_Coding",
"Distribution"
]
},
......@@ -504,12 +503,12 @@
"video"
],
"description": "Bandbreiten- und Qualitätsoptimierung; Codierung",
"technologyReadinessLevel": "mass-product",
"technologyReadinessLevel": "mass-production",
"aiTechnologiesUsed": [
""
],
"categories": [
"TechnischeProduktion"
"TechnischeProduktion_Coding"
]
},
{
......@@ -520,13 +519,13 @@
"mediatype": [
"other"
],
"description": "Metadaten-Generierung",
"description": "Objekterkennung und -beschreibung; Kategorisierung; Tagging",
"technologyReadinessLevel": "applied-research",
"aiTechnologiesUsed": [
""
],
"categories": [
"BeschaffungInhalte"
"BeschaffungInhalte_MetadataGeneration"
]
},
{
......@@ -543,7 +542,7 @@
""
],
"categories": [
"PlazierungWerbung"
"PlatzierungWerbung"
]
},
{
......@@ -571,13 +570,13 @@
"mediatype": [
"other"
],
"description": "Metadaten-Generierung; Media-Asset-Management",
"description": "Text2Speech; Media-Asset-Management",
"technologyReadinessLevel": "mass-production",
"aiTechnologiesUsed": [
""
],
"categories": [
"BeschaffungInhalte",
"BeschaffungInhalte_TextToSpeechToText",
"Packaging"
]
},
......@@ -608,13 +607,13 @@
"video",
"other"
],
"description": "Erkennung unangemessener Videoszenen; Metadaten-Generierung",
"description": "Objekterkennung und -beschreibung; Erkennung unangemessener Videoszenen",
"technologyReadinessLevel": "mass-production",
"aiTechnologiesUsed": [
""
],
"categories": [
"BeschaffungInhalte"
"BeschaffungInhalte_MetadataGeneration"
]
},
{
......@@ -631,7 +630,7 @@
""
],
"categories": [
"PlazierungWerbung"
"PlatzierungWerbung"
]
},
{
......@@ -648,7 +647,7 @@
"NN"
],
"categories": [
"BeschaffungInhalte"
"BeschaffungInhalte_MetadataGeneration"
]
},
{
......@@ -665,7 +664,7 @@
""
],