phga/phga.de-legacy
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Dynamic info loading works, json parsing instead of pic dir parsing

Browse Source
This commit is contained in:
Toerd@480 2019-10-24 20:11:15 +02:00
parent eaf84e002f
commit 9068c62aeb
6 changed files with 204 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

128
data/dg1.json Normal file
View File

@ -0,0 +1,128 @@
[
{
"Name": "dashboard",
"Author": "Philip Gaber",
"Size": "1920x1080",
"Tools": "GIMP / Adobe XD",
"Date": "2019-09-27",
"Desc": "Light design for the dashboard of a website meant to explain the sport Curling to a broarder audience and give information about the Swedish Curling Team. The website should also include information about the Olympic Winter Games in Beijing.",
"BlogLink": "none"
},
{
"Name": "dashboard_dark",
"Author": "Philip Gaber",
"Size": "1920x1080",
"Tools": "GIMP / Adobe XD",
"Date": "2019-09-27",
"Desc": "Dark concept design for the dashboard of a website meant to explain the sport Curling to a broarder audience and give information about the Swedish Curling Team. The website should also include information about the Olympic Winter Games in Beijing.",
"BlogLink": "none"
},
{
"Name": "dashboard_open",
"Author": "Philip Gaber",
"Size": "1920x1080",
"Tools": "GIMP / Adobe XD",
"Date": "2019-09-27",
"Desc": "A concept for the social links on this website.",
"BlogLink": "none"
},
{
"Name": "gameplay",
"Author": "Philip Gaber",
"Size": "1920x1080",
"Tools": "GIMP / Adobe XD",
"Date": "2019-09-27",
"Desc": "A concept for the page where the sport curling is described in more detail. The individual 'info tiles' can be clicked to get even more information.",
"BlogLink": "none"
},
{
"Name": "gameplay_open",
"Author": "Philip Gaber",
"Size": "1920x1080",
"Tools": "GIMP / Adobe XD",
"Date": "2019-09-27",
"Desc": "A concept for the page where the sport curling is described in more detail. This shows the state after a 'info tile' got clicked.",
"BlogLink": "none"
},
{
"Name": "history",
"Author": "Philip Gaber",
"Size": "1920x1080",
"Tools": "GIMP / Adobe XD",
"Date": "2019-09-27",
"Desc": "Concept for the history page where important events in the history of curling are described.",
"BlogLink": "none"
},
{
"Name": "infographic",
"Author": "Philip Gaber",
"Size": "Double-sided A4 page",
"Tools": "Inkscape",
"Date": "2019-10-11",
"Desc": "This is a concept for an infographic for the company Videum / Videum Science Park. The goal was to summarize and visualize 30+ pages of the annual report in two A4 pages.",
"BlogLink": "none"
},
{
"Name": "olympia_curl",
"Author": "Philip Gaber",
"Size": "Variable SVG",
"Tools": "Inkscape",
"Date": "2019-09-20",
"Desc": "One of 4 logo ideas for the swedish curling team / Olympic Winter Games in Beijing.",
"BlogLink": "none"
},
{
"Name": "olympia_masc_curl",
"Author": "Philip Gaber",
"Size": "Variable SVG",
"Tools": "Inkscape",
"Date": "2019-09-20",
"Desc": "One of 4 logo ideas for the swedish curling team / Olympic Winter Games in Beijing. The idea was to have a separate mascot which is a swedish version of the official mascot for the OWG in Beijing.",
"BlogLink": "none"
},
{
"Name": "swed_curl_future",
"Author": "Philip Gaber",
"Size": "Variable SVG",
"Tools": "Inkscape",
"Date": "2019-09-20",
"Desc": "One of 4 logo ideas for the swedish curling team / Olympic Winter Games in Beijing. This is a more futuristic version of a curling stone.",
"BlogLink": "none"
},
{
"Name": "swed_curl_young",
"Author": "Philip Gaber",
"Size": "Variable SVG",
"Tools": "Inkscape",
"Date": "2019-09-20",
"Desc": "One of 4 logo ideas for the swedish curling team / Olympic Winter Games in Beijing. This is a curling version of the popular X logo (original NYHC) to speak to a younger audience.",
"BlogLink": "none"
},
{
"Name": "team",
"Author": "Philip Gaber",
"Size": "1920x1080",
"Tools": "GIMP / Adobe XD",
"Date": "2019-09-27",
"Desc": "Concept for the team page where the individual players of the swedish team could be highlighted.",
"BlogLink": "none"
},
{
"Name": "team_open",
"Author": "Philip Gaber",
"Size": "1920x1080",
"Tools": "GIMP / Adobe XD",
"Date": "2019-09-27",
"Desc": "Concept for the team page where the individual players of the swedish team could be highlighted. Here is the state after a click on the player card. More information an a video of the best plays could be displayed.",
"BlogLink": "none"
},
{
"Name": "timetable",
"Author": "Philip Gaber",
"Size": "1920x1080",
"Tools": "GIMP / Adobe XD",
"Date": "2019-09-27",
"Desc": "Concept for the timetable page where the upcoming matches could be displayed in a scrollable table.",
"BlogLink": "none"
}
]

61
exhibit.go
View File

@ -1,21 +1,26 @@
package main
import (
"encoding/json"
"fmt"
"html/template"
"io/ioutil"
"log"
"net/http"
"strings"
// "fmt"
"regexp"
)
// var t = template.Must(template.ParseFiles("tmpl/layouts/base.html", "tmpl/index.html", "tmpl/blog.html", "tmpl/about.html", "tmpl/contact.html", ))
var validImg = regexp.MustCompile("^/info/([\\w_\\- ]+)")
var exhibit Exhibition
func main() {
exhibit.Pics = make(map[string]Picture)
http.HandleFunc("/", handleIndex)
http.HandleFunc("/blog", handleBlog)
http.HandleFunc("/about", handleAbout)
http.HandleFunc("/contact", handleContact)
http.HandleFunc("/info/", handleInfo)
http.Handle("/inc/", http.StripPrefix("/inc/", http.FileServer(http.Dir("inc"))))
log.Fatalln(http.ListenAndServe(":8080", nil))
}
@ -26,18 +31,16 @@ type Picture struct {
Size string
Tools string
Date string
Price float32
Desc string
BlogLink string
}
type Exhibition struct {
Pics []Picture
Pics map[string]Picture
}
func handleIndex(w http.ResponseWriter, r *http.Request) {
var exhibit Exhibition
exhibit.parsePictures("./inc/images")
exhibit.parseExhibitions("./data")
t, _ := template.ParseFiles("tmpl/layouts/index.html", "tmpl/gallery.html", "tmpl/header.html")
t.Execute(w, exhibit)
}
@ -57,16 +60,54 @@ func handleContact(w http.ResponseWriter, r *http.Request) {
t.Execute(w, nil)
}
func (ex *Exhibition) parsePictures(dir string) {
func handleInfo(w http.ResponseWriter, r *http.Request) {
imgName := validImg.FindStringSubmatch(r.URL.Path)
if imgName == nil {
http.NotFound(w, r)
return
}
img, ok := exhibit.Pics[imgName[1]]
if !ok {
http.NotFound(w, r)
return
}
info, err := json.Marshal(img)
if err != nil {
http.Error(w, err.Error(), http.StatusInternalServerError)
return
}
w.Header().Set("Content-Type", "application/json")
w.Write(info)
}
// file, _ := json.MarshalIndent(ex.Pics, "", " ")
// err := ioutil.WriteFile(dir+"/dg1.json", file, 0644)
// if err != nil {
// fmt.Println("WRITE", err)
// }
// load the exhibition data into the struct
func (ex *Exhibition) parseExhibitions(dir string) {
files, err := ioutil.ReadDir(dir)
if err != nil {
log.Fatal(err)
fmt.Println("E1", err)
return
}
for _, f := range files {
if !f.IsDir() {
ex.Pics = append(ex.Pics,
Picture{Name: strings.TrimSuffix(f.Name(), ".jpg")})
var pics []Picture
content, err := ioutil.ReadFile(dir + "/" + f.Name())
if err != nil {
fmt.Println("E2", err)
}
err = json.Unmarshal(content, &pics)
if err != nil {
fmt.Println("E3", err)
}
for _, pic := range pics {
ex.Pics[pic.Name] = pic
}
}
}
}

35
inc/js/main.js
View File

@ -3,8 +3,9 @@
* functions to power my portfolio
* Author: phga/teord
* Date: 2019-10-18
* Version: 1.0
* Version: 1.1
*/
"use strict";
document.addEventListener("DOMContentLoaded", run);
// global var to control the animation of the text
var runTextAnimation = true;
@ -64,7 +65,6 @@ function initialize() {
// this scroll is NOT smooth
function doSlide(elem, dist) {
console.log(dist);
let hM = elem.scrollHeight;
let sT = elem.scrollTop;
if (dist < 0)
@ -81,7 +81,6 @@ function handleThumb(overlay, elem) {
// save last eventlistener func to remove it...
var resize;
function showOverlay(overlay, imgName) {
let info = getInfoForImg(imgName);
let magni = document.getElementById("zoom");
let infoTable = document.getElementById("img-description");
let img = document.createElement("img");
@ -104,28 +103,33 @@ function showOverlay(overlay, imgName) {
magni.innerHTML = "";
magni.appendChild(img);
infoTable.innerHTML =
` <tr>
<th>Author:</th><td>${info.author}</td>
getInfoForImg(imgName).then(info => {
let infos = ` <tr>
<th>Author:</th><td>${info.Author}</td>
</tr>
<tr>
<th>Size:</th><td>${info.size}</td>
<th>Size:</th><td>${info.Size}</td>
</tr>
<tr>
<th>Tools:</th><td>${info.tools}</td>
<th>Tools:</th><td>${info.Tools}</td>
</tr>
<tr>
<th>Date:</th><td>${info.date}</td>
<th>Date:</th><td>${info.Date}</td>
</tr>
<tr>
<th colspan="2">Description:</th>
</tr>
<tr>
<td colspan="2">${info.desc}</td>
<td colspan="2">${info.Desc}</td>
</tr>
<tr>
<th colspan="2"><a href="${info.blog}">Read more...</a></th>
`;
if (info.BlogLink != "none") {
infos += `<tr>
<th colspan="2"><a href="${info.Blog}">Read more...</a></th>
</tr>`;
}
infoTable.innerHTML = infos;
});
overlay.classList.remove("hidden");
}
@ -134,9 +138,8 @@ function hideElement(elem) {
}
// Get info from server
function getInfoForImg(imgName) {
let info = {author: "Philip Gaber", size: "1920x1080 @24MP", tools: "Sony a5100", date: "2019-10-10",
desc: "A couple words about the piece of art. I like trees, I am groot, Winter is coming!!!", price: "2999,99 €",
blog: "./blog/some/url"};
async function getInfoForImg(imgName) {
let res = await fetch(`/info/${imgName}`);
let info = await res.json();
return info;
}

1
inc/js/text.js
View File

@ -6,6 +6,7 @@
* Version: 1.0
*/
// set a global var "run" to true before running this function
"use strict";
async function flyingText(canvas) {
// TODO: move to argument, load from backend
let statements = ["Keyboard-Nerd", "🖤", "Emacs",

3
inc/js/zoom.js
View File

@ -6,6 +6,7 @@
* Date: 2019-10-20
* Version: 1.2
*/
"use strict";
function zoom(factor, imgName) {
let winW = Math.max(document.documentElement.clientWidth, window.innerWidth);
let img = document.getElementById(imgName);
@ -40,7 +41,7 @@ function zoom(factor, imgName) {
};
let getOffsetToMiddle = function(cursor) {
let elem, x = y = 0;
let elem, x = 0, y = 0;
cursor = cursor || window.event;
// get elem bounding box

4
tmpl/gallery.html
View File

@ -10,9 +10,9 @@
<img id="avatar" alt="" src="/inc/logo/avatar.svg"/>
</section>
<section id="exhibition">
{{range .Pics}}
{{range $key, $val := .Pics}}
<div class="thumb-box">
<img alt="{{.Name}}" src="/inc/thumbs/t_{{.Name}}.jpg" data-img="{{.Name}}" class="thumb" />
<img alt="{{$val.Name}}" src="/inc/thumbs/t_{{$val.Name}}.jpg" data-img="{{$val.Name}}" class="thumb" />
</div>
{{end}}
</section>