content from old page
This commit is contained in:
parent
6d9d5a9424
commit
635999a6fe
GPG key ID:
728ACCB59341E7E4
22 changed files with 1045 additions and 1 deletions
3
.gitmodules
vendored
Normal file
3
.gitmodules
vendored
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
[submodule "themes/hugo-blog-awesome"]
|
||||
path = themes/hugo-blog-awesome
|
||||
url = https://github.com/hugo-sid/hugo-blog-awesome.git
|
||||
0
.hugo_build.lock
Normal file
0
.hugo_build.lock
Normal file
8
content/about.md
Normal file
8
content/about.md
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
---
|
||||
title: "About"
|
||||
date: 2020-10-01T14:49:09+02:00
|
||||
draft: false
|
||||
cc: ""
|
||||
---
|
||||
|
||||
Mail: hello [at] kekskurse.de
|
||||
81
content/posts/2020-10-01-Edifier-remote.md
Normal file
81
content/posts/2020-10-01-Edifier-remote.md
Normal file
|
|
@ -0,0 +1,81 @@
|
|||
---
|
||||
title: "Edifier R1700BT Remote Control"
|
||||
date: 2020-10-01T14:44:25+02:00
|
||||
draft: false
|
||||
description: "Use a Wemos to create an mqtt-based remote control"
|
||||
tags: ["WeMos", "Arduino", "Blog"]
|
||||
categories: ["Electronics"]
|
||||
startpage: true
|
||||
lang: gb
|
||||
---
|
||||
|
||||
After I got the Edifier R1700BT Speaker I notice that i want to control them like all my other stuff with my moile phone and MQTT. So i got some IR reciver and LEDs to simulate the Edifier Remote with a Wemos who is connected to my MQTT Server.
|
||||
|
||||
{{< tweet 1310694353187344385 >}}
|
||||
|
||||
I figure out the IR-Codes used:
|
||||
|
||||
* 149389439 -> power on/off
|
||||
* 149356799 -> mute
|
||||
* 149369039 -> Volume Up
|
||||
* 149393519 -> Volume Down
|
||||
* 149377199 -> Switch input to Bluetooth
|
||||
* 149399639 -> Switch input to Line In
|
||||
|
||||
## Hardware
|
||||
|
||||
I connected the IR-LED to the D4 Pin of a Wemos. I used [this question](https://antwortenhier.me/q/wie-steuere-ich-die-ir-led-mit-esp8266-pint-bei-3-3-v-und-mosfet-um-einen-62376266277) as basic idea.
|
||||
|
||||
{{< figure src="/img/2020/10/ir-remote/plan.png" >}}
|
||||
|
||||
## Software
|
||||
|
||||
With this Numbers, and the [pubsubclient](https://github.com/knolleary/pubsubclient) and [IRremoteESP8266](https://github.com/crankyoldgit/IRremoteESP8266) i just can subscripe to some topics, and every time a message aravid at one of the topics i could send the code to the speaker:
|
||||
|
||||
```
|
||||
if(String(topic)=="musik/power") {
|
||||
irsend.sendNEC(149389439, 32);
|
||||
Serial.println("EDIFIER: Power");
|
||||
}
|
||||
|
||||
if(String(topic)=="musik/mute") {
|
||||
irsend.sendNEC(149356799, 32);
|
||||
Serial.println("EDIFIER: Mute");
|
||||
}
|
||||
|
||||
if(String(topic)=="musik/down") {
|
||||
irsend.sendNEC(149369039, 32);
|
||||
Serial.println("EDIFIER: Down");
|
||||
}
|
||||
|
||||
if(String(topic)=="musik/up") {
|
||||
irsend.sendNEC(149393519, 32);
|
||||
Serial.println("EDIFIER: UP");
|
||||
}
|
||||
|
||||
if(String(topic)=="musik/bluetooth") {
|
||||
irsend.sendNEC(149377199, 32);
|
||||
Serial.println("EDIFIER: Bluetooth");
|
||||
}
|
||||
|
||||
if(String(topic)=="musik/line") {
|
||||
irsend.sendNEC(149399639, 32);
|
||||
Serial.println("EDIFIER: Line");
|
||||
}
|
||||
```
|
||||
|
||||
## Final Result
|
||||
|
||||
After solder everything to a perforated board I got the following result.
|
||||
|
||||
{{< figure src="/img/2020/10/ir-remote/result.jpg" >}}
|
||||
|
||||
Maybe I will create another smaller version to hide next to the speaker. For now it works.
|
||||
|
||||
## Complete Code
|
||||
|
||||
|
||||
You can got the complete code here: [Complete Code](/code/ir-wemos-mosfet.txt)
|
||||
|
||||
|
||||
{{< load-photoswipe >}}
|
||||
42
content/posts/2020-10-03-spaziergang-grenau.md
Normal file
42
content/posts/2020-10-03-spaziergang-grenau.md
Normal file
|
|
@ -0,0 +1,42 @@
|
|||
---
|
||||
title: "Spaziergang Grünau"
|
||||
date: 2020-10-03T00:00:01+00:00
|
||||
draft: false
|
||||
categories: ["Images"]
|
||||
description: "Spaziergang Grünau"
|
||||
tags: ["Lost Places", "Blog"]
|
||||
startpage: false
|
||||
lang: img
|
||||
gallery: "/img/2020/10/spaziergang-grenau/DSC06680_01.jpg"
|
||||
cc: "by-nc-sa"
|
||||
---
|
||||
Heute lief ich am [ehemalige Funkhaus Grünau](https://de.wikipedia.org/wiki/Funkhaus_Gr%C3%BCnau) vorbei. Das Gebäude kann aktuell scheinbar nicht mehr betreten werden.
|
||||
|
||||
{{< gallery caption-position="bottom" caption-effect="fade" >}}
|
||||
{{< figure src="/img/2020/10/gruenau/DSC06623.jpg" caption="Eingangstür" >}}
|
||||
{{< figure src="/img/2020/10/gruenau/DSC06676.jpg" caption="Seitenansicht Rechts" >}}
|
||||
{{< figure src="/img/2020/10/gruenau/DSC06677.jpg" caption="Seitenansicht Links" >}}
|
||||
{{< figure src="/img/2020/10/gruenau/DSC06673.jpg" caption="Wasser Seite" >}}
|
||||
{{< figure src="/img/2020/10/gruenau/DSC06675.jpg" caption="Grafitti" >}}
|
||||
{{< /gallery >}}
|
||||
|
||||
Hinter dem Funkhaus schließt sich ein schöner Fuß/Rad weg an. Auf diesem kann entlang des Wassers spaziert werden mit vielen Sitzplätzen inc Wasserblick. Außerdem ist sehr leicht an vielen Stellen in die Tram die alle 20 Minuten den selben weg entlangfährt einzusteigen und sich wieder zurück fahren zu lassen.
|
||||
|
||||
{{< gallery caption-position="bottom" caption-effect="fade" >}}
|
||||
{{< figure src="/img/2020/10/gruenau/DSC06633_01.jpg" caption="Pilz" >}}
|
||||
{{< figure src="/img/2020/10/gruenau/DSC06643.jpg" caption="Bauwerk auf Wasser" >}}
|
||||
{{< figure src="/img/2020/10/gruenau/DSC06647.jpg" caption="Steg auf Wasser" >}}
|
||||
{{< figure src="/img/2020/10/gruenau/DSC06661.jpg" caption="Rote Bojen umrandet von Blättern" >}}
|
||||
{{< figure src="/img/2020/10/gruenau/DSC06680_01.jpg" caption="Tram" >}}
|
||||
{{< figure src="/img/2020/10/gruenau/DSC06682_01.jpg" caption="Parkendes Motorad" >}}
|
||||
{{< figure src="/img/2020/10/gruenau/DSC06694_01.jpg" caption="Ins Wasser reichender Baum" >}}
|
||||
{{< figure src="/img/2020/10/gruenau/DSC06711.jpg" caption="Ins Wasser reichender Baum" >}}
|
||||
{{< figure src="/img/2020/10/gruenau/DSC06725.jpg" caption="Sitzgelegenheit am Wasser" >}}
|
||||
{{< figure src="/img/2020/10/gruenau/DSC06730.jpg" caption="Bote" >}}
|
||||
{{< /gallery >}}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
{{< load-photoswipe >}}
|
||||
79
content/posts/2020-10-17-Hugo-Shortcodes.md
Normal file
79
content/posts/2020-10-17-Hugo-Shortcodes.md
Normal file
|
|
@ -0,0 +1,79 @@
|
|||
---
|
||||
title: "Own Hugo Shortcodes"
|
||||
date: 2020-10-17T02:22:53+02:00
|
||||
draft: false
|
||||
description: "How to create your own Shortcodes with Hugo"
|
||||
tags: ["Hugo", "Go", "Blog"]
|
||||
categories: ["Programming"]
|
||||
startpage: true
|
||||
lang: gb
|
||||
---
|
||||
After using [Hugo](https://gohugo.io/) for this Webpage I want to create a [Gallery Page](/gallery/). I already used [hugo-easy-gallery](https://github.com/liwenyip/hugo-easy-gallery) inside Posts so i noticed the "layouts/shortcodes" folder at my projekt. After I created a new Layout for one Page and implement all the used HTML/JS/CSS Stuff i thought it would be a better way to use the "normal" layout and find anouther way to create the Gallery view.
|
||||
|
||||
## Generale Shortcodes
|
||||
|
||||
I created a new html file inside the Folder `layouts/shortcodes`. I called it `test.html` for now. In this file I could insert some basic HTML Code:
|
||||
|
||||
```
|
||||
<b>Foo</b><i>Bar</i> Sample
|
||||
```
|
||||
|
||||
and a new md file for my Gallery with the following content:
|
||||
|
||||
```
|
||||
---
|
||||
title: "Gallery"
|
||||
date: 2020-10-01T14:49:09+02:00
|
||||
draft: true
|
||||
---
|
||||
{{\<test>}}
|
||||
```
|
||||
|
||||
which together create the following Result:
|
||||
|
||||
{{< figure src="/img/2020/10/hugo-shortcodes/test-html.png" >}}
|
||||
|
||||
Based on the [offical documentation](https://gohugo.io/templates/shortcode-templates/) hugo try to find the html File in the `/layouts/shortcodes/<SHORTCODE>.html` or the `/themes/<THEME>/layouts/shortcodes/<SHORTCODE>.html` directory.
|
||||
|
||||
## Create a Gallery with a Shortcode
|
||||
|
||||
The Gallery Page is a overview over multible Posts, so i don't want to show a Publish Date. On my theme I need to create a small hack to achieve that, I added a new Varieable to my Posts call `hideDate`. In my template single.html file i just added an if to check if the Parametet is set:
|
||||
|
||||
```
|
||||
{{ if eq .Params.hideDate nil}}
|
||||
<div class="meta">Posted on {{ dateFormat "Jan 2, 2006" .Date }}{{ if .Draft }} <span class="draft-label">DRAFT</span> {{ end }}</div>
|
||||
{{ end }}
|
||||
```
|
||||
|
||||
I also added a `gallery` Field in the Post-Header of all Content Fiels which should be shown in the Gallery. The `gallery` fieeld contains a link to an image. So I can query for that posts in the hugo langauge.
|
||||
|
||||
```
|
||||
{{ $pages := where (where .Site.RegularPages "Type" "in" .Site.Params.mainSections) ".Params.gallery" "!=" nil }}
|
||||
```
|
||||
|
||||
To create the Galery itselfs i used the JQuery (i know its not the best any more but easy to integrate in hugo) [Justified-Gallery](http://miromannino.github.io/Justified-Gallery/). Also there is no reason to show the Gallery two times at one Page, therefore I don't care about loading the js file multible times. If te same shourcade is used more than one time it may make sens to move the loading of external javascript files to another place.
|
||||
|
||||
After all I have the following shortcode-file:
|
||||
|
||||
```
|
||||
<link rel="stylesheet" href="/css/justifiedGallery.min.css" />
|
||||
<script src="/js/jquery-3.5.1.min.js"></script>
|
||||
<script src="/js/jquery.justifiedGallery.min.js"></script>
|
||||
{{ $pages := where (where .Site.RegularPages "Type" "in" .Site.Params.mainSections) ".Params.gallery" "!=" nil }}
|
||||
<div id="all" >
|
||||
{{ range $pages }}
|
||||
<a style="border-bottom: 5px solid transparent" href="{{ .RelPermalink }}">
|
||||
<img alt="{{ .Title }}" src="{{.Params.gallery}}"/>
|
||||
</a>
|
||||
{{ end }}
|
||||
</div>
|
||||
<div style="clear: both;"></div>
|
||||
|
||||
<script>
|
||||
$("#all").justifiedGallery({
|
||||
rowHeight : 250,
|
||||
margins : 5,
|
||||
lastRow : 'nojustify',
|
||||
});
|
||||
</script>
|
||||
```
|
||||
35
content/posts/2020-10-28-Mqtt-At-Home.md
Normal file
35
content/posts/2020-10-28-Mqtt-At-Home.md
Normal file
|
|
@ -0,0 +1,35 @@
|
|||
---
|
||||
title: "MQTT at Home"
|
||||
date: 2020-11-26T21:32:53+02:00
|
||||
draft: false
|
||||
description: "How I use MQTT at Home to connect stuff."
|
||||
tags: ["MQTT", "IoT", "Blog", "Go"]
|
||||
categories: ["Programming"]
|
||||
startpage: true
|
||||
lang: gb
|
||||
---
|
||||
Ok i live in a small appartment, but at least I have three Window and a little bit stuff to connect with each other. I startes with [Ikea TRÅDFRI](https://www.ikea.com/de/de/cat/ikea-home-smart-beleuchtung-36812/) and some selfe made components based Arudino/Wemos. About one year ago I tried [zigbee2mqtt](https://www.zigbee2mqtt.io/) to connect the ikea bulbs to MQTT without using my own buggy code. I used a MQTT-Broker on a Virtual Server somewhere in the internet and develop some PHP-Application with lumen (some of them running in kubernetes) to connect everything.
|
||||
|
||||
After some issues with my Internet Provider I beginn with a easyer and locale alternative. I already used a Raspberry Pi for zigbee2mqtt so i want to run everything on it. On the other hand I want a secound MQTT Server in the Internet(tm) to connect from other networks. Also I like the idear of smaller "services" managed single features.
|
||||
|
||||
## Basic Setup
|
||||
|
||||
First i setup [supervisord](http://supervisord.org/) on the pi to managed all scripts. I develope the new Services in golang, so first i build a small wrapper arround [paho.mqtt.golang](https://github.com/eclipse/paho.mqtt.golang), so all Services has the same configure also for the Last Will and Testament. It connected without crdentials to a mqtt server running on the same pi (localhost). Than i could start creating single services. One react to all incomming MQTT-Message if a button is pressed and change the light-modus. The light-modus are topics with retained messages. Another services subscribed to this topic and send the mqtt messages to zigbee2mqtt which changed the light bulbs.
|
||||
|
||||
|
||||
## MQTT Bridge
|
||||
|
||||
For all topics contained a state like the light-modus i created a set topic. The light modus for the "main" room could be `light-modus/main`, to change it i published a message to `light-modus/main/set`. I used another service just mirrow the incomming messages at the set topic (not retained) and send it to the original topic (as retained messages).
|
||||
|
||||
The [Mosquito MQTT Broker](https://mosquitto.org/) has a feature to setup a bridge between two MQTT Server. So i setup another instanc of it at a VM in the internet. After that i can configure on the MQTT Broker on my locale pi to connect to the remote mqtt server. I relay messages from status topics (like light-modus), sensor and device informations (from zigbee2mqtt) and subscripe to some */set topics. With this setup everything works fine without internet in my apparment. But as long as the internet connection is avalible I can publish messages to the online mqtt server which would be recived locale.
|
||||
|
||||
## Automation
|
||||
|
||||
All Automation Services are also written in go, and had a feature toggle as retained mqtt topic (with a seperate /set topic). With this I can change the behavior of it. For example i had a service checking if I'm currenlty in im appartment and the value of the lumex sensor falls below a special value. If that happends it will turn on the light. But I dont always want that to happend to I can toggle this feature.
|
||||
|
||||
Also all status information are avalible as retained messages at the MQTT-Broker. So each service can restart without any issues.
|
||||
|
||||
## Interface
|
||||
|
||||
|
||||
I still use [Mqtt Dash](https://play.google.com/store/apps/details?id=net.routix.mqttdash&hl=de&gl=US) at my Android Device do control most things. Some information like the room temperature are already stored in a graphite database to have access via [grafana](https://grafana.com/). In the feature I want to create some status dashboard based on the last will of the service and some zigbee2mqtt messages. Also maybe a webpage connecting to the broker to controll the light with a tablet.
|
||||
44
content/posts/2020-12-22-foto-wokflow.md
Normal file
44
content/posts/2020-12-22-foto-wokflow.md
Normal file
|
|
@ -0,0 +1,44 @@
|
|||
---
|
||||
title: "Workflow zum bearbeiten von Bildern"
|
||||
date: 2020-12-22T21:32:53+02:00
|
||||
draft: false
|
||||
description: "Mein aktueller Workflow um Bilder zu bearbeiten"
|
||||
categories: ["Fotografie"]
|
||||
tags: ["Blog"]
|
||||
startpage: true
|
||||
lang: de
|
||||
---
|
||||
Grundlegend bearbeite ich meine Bilder ab jetzt mit Caputre One auf Windows. Da ich kein lokales Windows System habe, nutzte ich den Cloud-Dienst Shadow. Das bearbeiten funktioniert auf dem Remote-System ziemlich gut. Ledigleich das hochladen auf die Windows VM war bis jetzt immer recht umständlich. Jetzt habe ich angefangen mit einen Workflow auszudenken mit dem das beschleunidgt werden kann.
|
||||
|
||||
Das Ziel ist es das die Bilder mit den richtigen Metatags ausgestattet werden, wenn vorhanden sollen die GPS Daten aus einem gpx File entnommen werden. Außerdem sollen die Datein am ende auf meinem NAS liegen und bei AWS gebackupt werden. Dabei bearbeiteten Bilder können im Capture One Katalog auf der Windows VM bleiben.
|
||||
|
||||
# Bilder von SD Karte auf NAS kopieren
|
||||
Die Bilder gruppiere ich basierend ich auf basis von dem was ich gemacht habe (aktuell gibt es ja eher Touren bei denen Fotos entstehen). Auf dem NAS lege ich einen Ordner mit dem Namen "yyyy-mm-dd *name*" an und kopiere alle Bilder dort hinein. Wenn ich während der aufnahmen ein GPS-Tracker an habe wird die entsprechende gpx Datei mit in dieses Verzeichnis kopiert. Das Kopieren der Datei erfolgt lokale von meinem Linux System.
|
||||
|
||||
# GPS Daten
|
||||
Um die GPS Daten aus dem GPX-File zu laden und den Bildern hinzuzufügen habe ich ein kleines Python Script entwickelt. Aktuell arbeitet dieses noch mit der Zeitzohne Europe/Berlin und einer Zeitkorrektur. Das soll in Zukunft geändert werden und die Kamera Daten dirket im UTC Format aufnehmen.
|
||||
|
||||
Leider werden in den EXIF Daten zur aufnahme des Bildes keine Zeitzohne mit gespeichert. So muss ich das manuel auffangen.
|
||||
|
||||
Der Script prüft in der vorhanden GPX Datei welcher Zeitpunkt am nähesten zu der Aufnahme liegt, das limmit liegt bei 10 minuten abstand zwischen der Aufnahme und dem GPS Track. Danach haben alle Bilder die ungefähren GPS Daten \o/
|
||||
|
||||
[Python Script](https://git.keks.cloud/kekskurse/exif-data/src/branch/master/gps-data.py)
|
||||
|
||||
# Update MetaDaten
|
||||
Bei den EXIF Daten aus der A6400 fehlt die Zeitzohne und es gibt keine weiteren Informationen dazu. Bei meiner ersten Suche im Internet gab es unterschiedliche wege wie dieses hinterlegt werden kann. Da ich weiß wie meine Kamera eingestellt ist will ich die fehlende Metadaten per Script ergänzen und z.B. die Information das die Bilder Aufnahme angaben in UTC erfolgen. Dieses steht aber zum jetzigen Zeitpunkt noch aus.
|
||||
|
||||
# Bilder in Windows bearbeiten
|
||||
Mein Shadow Computer habe ich per Wireguard in mein VPN eingebunden. Auf diese Weise kann ich ein Zugriff auf mein NAS ermöglichen. Caputre One kann von dem NAS wo ich den entsprechendem Projektordner auswähle die Bilder Importieren. Dieses kopieren ist da mein Internet doch nicht unendlich schnell ist sehr langsam. Da ich bis jetzt die Bilder aber auf einen Server und von da wieder runtergeladen habe ist es auf jeden fall einfacher.
|
||||
|
||||
Den Ordner im Capture One kann ich dann nach dem Moto "yyyy-mm-dd *name*" hinterlegen. Nachdem der Import (der gerne auch mal eine halbe Stunde und noch länger dauern kann) sind die Datein aber auf dem Windows System verfügbar und Capture One kann schnell auf die Daten zugreifen.
|
||||
|
||||
# Backup der Daten auf dem NAS
|
||||
Nachdem ich die Bilder auf Capture One bearbeitet habe exportiere ich den Katalog für den entsprechendem Ordner und speichere ihn über das VPN auf meinem NAS im "Projektordner".
|
||||
|
||||
# Backup der Bilder zu ABS
|
||||
Um die Daten im Falle eines Festplatten versagen noch zu haben speichere ich die Daten noch in AWS S3. Im vergleich zu einer weiteren Festplatten die extern gelagert wird ist ein Backup zu S3 Glacier Deep Archive einfach günstiger.
|
||||
|
||||
# Probleme
|
||||
Wenn ich nach dem export des Katalogs oder nach dem Backup zu ABS die Bilder weiter bearbeite gehen diese änderungen möglicherweise verloren wenn der Windows Cloud Rechner weg ist.
|
||||
|
||||
Außerdem ist der Upload von meinem NAS zu dem Windows Rechner recht langsam.
|
||||
24
content/posts/2021-01-19-Lampe.md
Normal file
24
content/posts/2021-01-19-Lampe.md
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
---
|
||||
title: "Lampe"
|
||||
date: 2021-01-19T19:25:53+02:00
|
||||
draft: false
|
||||
description: "Lampe"
|
||||
tags: ["Blog"]
|
||||
categories: ["Electronics"]
|
||||
startpage: true
|
||||
lang: de
|
||||
---
|
||||
|
||||
# Prototyp
|
||||
Nachdem ich im Internet(tm) nach einer Lampe gesucht habe die noch hinter meinem Sofa Platz hat bin ich auf folgendes Model gestoßen [Amazon Link](https://www.amazon.de/Stehleuchte-Fernbedienung-Farbwechsel-Schlafzimmer-Energieklasse/dp/B08L6HPCVX/). Der Preis von über 80 Euro für ein Rohr und einen LED-Stripe war mir jedoch etwas zu viel.
|
||||
|
||||
Also habe ich mich auf die Suche nach teilen gemacht um einen prototypen selber zu bauen. Gefunden habe ich die [Paulmann Delta Profil mit Diffusor](https://www.obi.de/led-streifen/paulmann-delta-profil-mit-diffusor-2-m/p/4512125) die schon eine recht passende form haben um in der ecke meines Zimmers zu stehen. Für den ersten entwurf habe ich die billigsten LED-Strips vom Baumarkt genommen, mit diesen "schönen" Infrarot fernbedienungen... Wenn man bedenkt dass diese Strips keine eigenen Weißen LEDs haben, und auch kein warmweiß können ist das ergebnis ok. Im nächsten schritt wird es das selbe nochmal geben mit warm und kaltweißen LEDs und der Steuerung per Zigbee.
|
||||
|
||||
Ergebnis des Prototyps:
|
||||
{{< gallery caption-position="bottom" caption-effect="fade" >}}
|
||||
{{< figure src="/img/2021/01/lampe/kekskurse_lampe000_382_1200.jpg" caption="Lampe, blau, mit Büchern im vordergrund" >}}
|
||||
{{< figure src="/img/2021/01/lampe/kekskurse_lampe000_383_1200.jpg" caption="Lampe von oben" >}}
|
||||
{{< figure src="/img/2021/01/lampe/kekskurse_lampe000_385_1200.jpg" caption="Lampe, rot, reflektion auf Glastisch" >}}
|
||||
|
||||
{{< /gallery >}}
|
||||
{{< load-photoswipe >}}
|
||||
227
content/posts/2021-03-07-signal-dbus-golang.md
Normal file
227
content/posts/2021-03-07-signal-dbus-golang.md
Normal file
|
|
@ -0,0 +1,227 @@
|
|||
---
|
||||
title: "Using the signal-cli dbus interface in golang"
|
||||
date: 2021-03-07T10:25:53+02:00
|
||||
draft: false
|
||||
description: "Using the signal-cli dbus interface in golang"
|
||||
tags: ["Blog", "Go"]
|
||||
categories: ["Programming"]
|
||||
startpage: true
|
||||
lang: en
|
||||
---
|
||||
|
||||
The [signal-cli](https://github.com/AsamK/signal-cli) tool profieds a dbus interface to get and send messages from other programms. The Documentation for that is avalible in the [signal-cli wiki](https://github.com/AsamK/signal-cli/wiki/DBus-service) but that not so easy to understand if you never work with dbus before.
|
||||
|
||||
# Setup signal-cli
|
||||
To setup signal-cli and pair it as secound device to an existing account you first need to install signal-cli, that steps based on your os. After you install it you can create a new "Pairing-Code" by runnuning `signal-cli link -n "mybot"`. The given code can used on the webpage [goqr.me](http://goqr.me/) to create an qr code, which you can scann with the signal app on your mobile device.
|
||||
|
||||
After that you can start signal-cli as deamon, for example with the following command with also print all incomming events as json on your cli:
|
||||
|
||||
```
|
||||
signal-cli -u +49176XXXXXXX -o json daemon
|
||||
```
|
||||
|
||||
# Getting Messages
|
||||
First we need to connect to the DBus system, thats possible with the [godbus/dbus](https://github.com/godbus/dbus) package. The connection based on the example from the package is really easy:
|
||||
```
|
||||
conn, err := dbus.ConnectSessionBus()
|
||||
if err != nil {
|
||||
fmt.Fprintln(os.Stderr, "Failed to connect to session bus:", err)
|
||||
return err
|
||||
}
|
||||
defer conn.Close()
|
||||
```
|
||||
|
||||
After that we need to told the dbus package which messages we want to recive and create a channel where we can revice all signales. To got the signal messages the follwoing code works for me:
|
||||
|
||||
```
|
||||
if err = conn.AddMatchSignal(
|
||||
dbus.WithMatchInterface("org.asamk.Signal"),
|
||||
); err != nil {
|
||||
return err
|
||||
}
|
||||
c := make(chan *dbus.Signal, 10)
|
||||
conn.Signal(c)
|
||||
```
|
||||
than we can "listen" to the channel and got the messages the signal-cli deamon sends:
|
||||
|
||||
```
|
||||
for v := range c {
|
||||
fmt.Println(v)
|
||||
}
|
||||
```
|
||||
|
||||
That will create mainly two signales im interested in, first getting a message from another conversation partner:
|
||||
|
||||
```
|
||||
&{:1.34 /org/asamk/Signal org.asamk.Signal.MessageReceived [1615064176455 +49176XXXXXXXX [] Durchgefallen []] 11}
|
||||
```
|
||||
|
||||
and secound getting a Sync Message, it will be send if yourself send a message from another device to a conversation partner:
|
||||
|
||||
```
|
||||
&{:1.34 /org/asamk/Signal org.asamk.Signal.SyncMessageReceived [1615064055775 +49176XXXXXXXXX +49176XXXXXXX [] Ich bin ein test []] 8}
|
||||
```
|
||||
|
||||
|
||||
# Parsing Messages
|
||||
If i just focus on 1:1 chats i could parse both kinds of events. Here two examples without error handling. First on the "Incomming Messages" :
|
||||
|
||||
```
|
||||
type IncommingMessage struct {
|
||||
Timestamp int64
|
||||
Source string
|
||||
Message string
|
||||
Attachments []string
|
||||
}
|
||||
|
||||
func parseMessageReceived(v *dbus.Signal) IncommingMessage {
|
||||
msg := IncommingMessage{}
|
||||
msg.Timestamp, _ = v.Body[0].(int64)
|
||||
msg.Source = v.Body[1].(string)
|
||||
msg.Message = v.Body[3].(string)
|
||||
msg.Attachments = v.Body[4].([]string)
|
||||
return msg
|
||||
}
|
||||
```
|
||||
|
||||
and for the Snyc Events:
|
||||
|
||||
```
|
||||
type SyncMessage struct {
|
||||
Timestamp int64
|
||||
Source string
|
||||
Destination string
|
||||
Message string
|
||||
Attachments []string
|
||||
}
|
||||
|
||||
func parseSyncMessageReceived(v *dbus.Signal) SyncMessage {
|
||||
msg := SyncMessage{}
|
||||
msg.Timestamp, _ = v.Body[0].(int64)
|
||||
msg.Source = v.Body[1].(string)
|
||||
msg.Destination = v.Body[2].(string)
|
||||
msg.Message = v.Body[4].(string)
|
||||
msg.Attachments = v.Body[5].([]string)
|
||||
return msg
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
|
||||
That functions will return strucs you can easy use for your application.
|
||||
|
||||
# Sending Messages
|
||||
|
||||
For the sending we also need a dbus connection, but unlike in the receving message part we don't subscribe to the events we produse one which will be consumed by the signal-cli deamon and send as chat messages to the conversation. All other devices (like your mobile phone) will get a SyncMessage event and show that "new" message too.
|
||||
|
||||
First you need to create the connection like before:
|
||||
|
||||
```
|
||||
conn, err := dbus.ConnectSessionBus()
|
||||
if err != nil {
|
||||
fmt.Fprintln(os.Stderr, "Failed to connect to session bus:", err)
|
||||
os.Exit(1)
|
||||
}
|
||||
defer conn.Close()
|
||||
```
|
||||
|
||||
after that just send a call like this:
|
||||
|
||||
```
|
||||
obj := conn.Object("org.asamk.Signal", "/org/asamk/Signal")
|
||||
call := obj.Call("org.asamk.Signal.sendMessage",0, "Your really cool message", []string{}, "+49176XXXXXXX")
|
||||
if call.Err != nil {
|
||||
panic(call.Err)
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
# Example
|
||||
|
||||
Here an "full" example of getting messages (without error handling)
|
||||
|
||||
```
|
||||
func listenToDbus() error {
|
||||
conn, err := dbus.ConnectSessionBus()
|
||||
if err != nil {
|
||||
fmt.Fprintln(os.Stderr, "Failed to connect to session bus:", err)
|
||||
return err
|
||||
}
|
||||
defer conn.Close()
|
||||
|
||||
if err = conn.AddMatchSignal(
|
||||
dbus.WithMatchInterface("org.asamk.Signal"),
|
||||
); err != nil {
|
||||
return err
|
||||
}
|
||||
|
||||
c := make(chan *dbus.Signal, 10)
|
||||
conn.Signal(c)
|
||||
for v := range c {
|
||||
if v.Name == "org.asamk.Signal.SyncMessageReceived" {
|
||||
msg := parseSyncMessageReceived(v)
|
||||
// do something with msg like a callback
|
||||
}
|
||||
if v.Name == "org.asamk.Signal.MessageReceived" {
|
||||
msg := parseMessageReceived(v)
|
||||
// do something with msg like a callback
|
||||
}
|
||||
}
|
||||
|
||||
return nil
|
||||
}
|
||||
|
||||
type SyncMessage struct {
|
||||
Timestamp int64
|
||||
Source string
|
||||
Destination string
|
||||
Message string
|
||||
Attachments []string
|
||||
}
|
||||
|
||||
func parseSyncMessageReceived(v *dbus.Signal) SyncMessage {
|
||||
msg := SyncMessage{}
|
||||
msg.Timestamp, _ = v.Body[0].(int64)
|
||||
msg.Source = v.Body[1].(string)
|
||||
msg.Destination = v.Body[2].(string)
|
||||
msg.Message = v.Body[4].(string)
|
||||
msg.Attachments = v.Body[5].([]string)
|
||||
return msg
|
||||
}
|
||||
|
||||
type IncommingMessage struct {
|
||||
Timestamp int64
|
||||
Source string
|
||||
Message string
|
||||
Attachments []string
|
||||
}
|
||||
|
||||
func parseMessageReceived(v *dbus.Signal) IncommingMessage {
|
||||
msg := IncommingMessage{}
|
||||
msg.Timestamp, _ = v.Body[0].(int64)
|
||||
msg.Source = v.Body[1].(string)
|
||||
msg.Message = v.Body[3].(string)
|
||||
msg.Attachments = v.Body[4].([]string)
|
||||
return msg
|
||||
}
|
||||
```
|
||||
|
||||
and another one to sending messages:
|
||||
|
||||
```
|
||||
func SendMessage(to string, msg string) {
|
||||
conn, err := dbus.ConnectSessionBus()
|
||||
if err != nil {
|
||||
fmt.Fprintln(os.Stderr, "Failed to connect to session bus:", err)
|
||||
os.Exit(1)
|
||||
}
|
||||
defer conn.Close()
|
||||
|
||||
obj := conn.Object("org.asamk.Signal", "/org/asamk/Signal")
|
||||
call := obj.Call("org.asamk.Signal.sendMessage",0, msg, []string{}, to)
|
||||
if call.Err != nil {
|
||||
panic(call.Err)
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
51
content/posts/2021-10-10-schweden.md
Normal file
51
content/posts/2021-10-10-schweden.md
Normal file
|
|
@ -0,0 +1,51 @@
|
|||
---
|
||||
title: "Urlaub Schweden"
|
||||
date: 2021-10-10T00:00:01+00:00
|
||||
draft: true
|
||||
categories: ["Images"]
|
||||
tags: ["Blog", "holiday", "sweden"]
|
||||
description: "Kurzurlaub schweden"
|
||||
startpage: true
|
||||
lang: img
|
||||
gallery: "/img/2021/10/schweden-sonnenuntergang/DSC03460_1.jpg"
|
||||
cc: "by-nc-sa"
|
||||
---
|
||||
|
||||
Eigentlich sollte es nur ein gemeinsammes Abendessen werden. Am ende wurde von irgendwelchen Menschen(tm) ein Ferienwohnung bei [Jönköping](https://de.wikipedia.org/wiki/J%C3%B6nk%C3%B6ping) gebucht und es gab einen kurzen Ausflug nach Schweden \o/
|
||||
|
||||
Das Ferienhaus war das linke der beiden Gebäude auf dem oberen Bild. Los ging es für mich um 8 Uhr morgends wo ich mit dem Elektro Auto abgeholt wurde. Für die etwas über 600km mussten wir zweimal laden, was mit etwa einer Stunde wesentlich länger dauerte als ein kurzer Stopp zum tanken. So wurde die Anreise zwar wesentlich länger allerdings mit ausreichend Pausen und Bewegung auf dem weg.
|
||||
|
||||
Danach gab es 3 Tage schweden, bevor der letzten Tag wieder im Auto verbracht wurde.
|
||||
|
||||
{{<map-zoom lat="57.780556" lon="14.161111" zoom="6">}}
|
||||
|
||||
## Tag 1
|
||||
Nach der Ankunft am vorabend gab es am ersten Tag einen ersten Spaziergang durch die gegend bei der Ferienwohnung, das mit dem Sonnenaufgang hat mit den ganzen Wolken leider nicht geklappt und es bliebt den ganzen Tag so diesig. Glücklicherweise sind beim Fotografieren auf dem Steg nur meine Schuhe und nicht mehr von mir nass geworden.
|
||||
{{< gallery dir="/img/2021/10/schweden-spaziergang" caption-position="none" caption-effect="fade" />}}
|
||||
|
||||
Da wir mit einem Elektro Auto unterwegs waren sind wir am Nachmittag zu einer Ladestation in der nähe von [Jönköping](https://de.wikipedia.org/wiki/J%C3%B6nk%C3%B6ping). Während wir darauf warteten dass das Auto geladen ist machten wir einen ersten Besuch am [Vättern](https://de.wikipedia.org/wiki/V%C3%A4ttern), dem zweitgrößten Sees Schwedens.
|
||||
[Bilder](https://gallery.kekskurse.de/gallery/2021-10-schweden-joengkoeping)
|
||||
|
||||
Zum Nachmittag hin gab es noch einen kleinen Ausflug zum Stalpets Wasserfälle, der mit 19 metern höchste Wasserfall Südschwedens.
|
||||
[Bilder](https://gallery.kekskurse.de/gallery/2021-10-schweden-stalpets-wasserfall)
|
||||
|
||||
Da sich das Wetter über den abend immer weiter aufgeklärt hat, bin ich an den See um einen Sonnenuntergang dort zu fotografieren. Auf dem weg zurück zur Ferienwohnung entwickelte sich Nebel was mit einem zum teil noch roten Himmel wunderbar aussah.
|
||||
[Bilder](https://gallery.kekskurse.de/gallery/2021-10-schweden-sonnenuntergang)
|
||||
|
||||
|
||||
## Tag 2
|
||||
Der nächste haben wir uns ein Ruderbot gemietet und sind damit auf eine kleine Insel gefahrne die wir spontan besetzt haben. Wir ist in dem fall etwas übertrieben, da ich mit einem Ruderbot mich nur sinnlos im kreis drehen kann musste das für mich gemacht werden.
|
||||
|
||||
[Bilder](https://gallery.kekskurse.de/gallery/2021-10-schweden-rudern)]
|
||||
|
||||
Zum abend fuhren wir nach [Jönköping](https://de.wikipedia.org/wiki/J%C3%B6nk%C3%B6ping). Ein kleiner Spaziergang durch die Stadt, ein Essen bei Max Burger und ein gemütlicher abend in einer Kneipe.
|
||||
|
||||
[Bilder](https://gallery.kekskurse.de/gallery/2021-10-schweden-joenkoeping-abends)
|
||||
|
||||
# Tag 3
|
||||
|
||||
Den letzten Tag gab es einen Ausflug nach [Gränna](https://de.wikipedia.org/wiki/Gr%C3%A4nna) wo Menschen(tm) Süßigkeiten kaufen wollten. Dort waren wir wieder am See und ich nutzte die Zeit mich mit einer Katze anzufreunden wärend ich durch die Straßen lief. Die Hauptstraße selber wirkt sehr touristisch.
|
||||
[Bilder](https://gallery.kekskurse.de/gallery/2021-10-schweden-graenna)
|
||||
|
||||
Um noch einen Blick auf Schwedische Elche werfen zu können besuchten wir den [Skullaryd Älgpark](http://skullaryd-algpark.se/de/home.html) wo wir zwar andere deutsche touristen hörten aber auch eine Stunde lang uns Tiere wärend der fütterung anschauen konnten.
|
||||
[Bilder](https://gallery.kekskurse.de/gallery/2021-10-schweden-skullaryd-aelgpark)
|
||||
25
content/posts/2022-03-02-sterne.md
Normal file
25
content/posts/2022-03-02-sterne.md
Normal file
|
|
@ -0,0 +1,25 @@
|
|||
---
|
||||
title: "Sternenhimmel fotografieren"
|
||||
date: 2022-03-02T00:00:01+00:00
|
||||
draft: false
|
||||
categories: ["Images", "Blog"]
|
||||
description: "Sternenhimmel fotografieren"
|
||||
startpage: true
|
||||
lang: img
|
||||
gallery: "https://image.kekskurse.de/v1/image?gallery=2022-03-02-sterne&pixel=800&image=DSC09476.jpg"
|
||||
cc: "by-nc-sa"
|
||||
---
|
||||
Zurzeit habe ich merere Pläne was ich in der Zukunft so machen möchte, wenn dies oder das passiert ist. Da nur planen auf dauer auch nicht glücklich macht habe ich ein etwas "unkomplizierteren" Ausflug gemachat. Die PhotoPills App sagte mir das es ein guter Zeitpunkt sei um Sterne zu fotografieren, die wetter app sagte bis zum frühen Nachmittag noch eine klare Nacht vorraus, das Bahnticket was bezahlbar.
|
||||
|
||||
# Gallery
|
||||
[Bilder](https://gallery.kekskurse.de/gallery/2022-03-sternenhimmel-fotografieren)
|
||||
|
||||
# Ausflug
|
||||
Mit dem Bahn bin ich nach Rathenow gefahren, von da aus mit dem Fahrrad weiter. Auf dem Hinweg hielt ich bei der [Bockwindmühle Prietzen](https://www.rhinow.de/verzeichnis/objekt.php?mandat=54101) zum Fotografieren, hier war dann auch der Ort wo ich beim zusammenbauen vom Stativ eis abkratzen musste.
|
||||
|
||||
Von da aus war es nurnoch etwa 1km zu der Vogelbeobachtungshütte die ich im vorfeld auf Google Maps gefunden hatte und die windgeschützt aussah. Glücklicherweise war sie wirklich recht gemütlich und fast sowas wie warm im gegensat zum windigem draußen.
|
||||
|
||||
|
||||
|
||||
Wärend die Kamera vor sich hin fotografierte konnte ich mein mitgebrachtes Essen essen. Als der warme Tee gegen 5 Uhr leer war habe ich meine Sachen zusammengepackt und bin zurückgefahren. Was mit wiedermal aufgefallen ist das ich viel zu viele Sachen mitgenommen hatte, das sollte ich irgendwann nochmal besser einschätzen.
|
||||
|
||||
6
content/posts/my-first-post.md
Normal file
6
content/posts/my-first-post.md
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
---
|
||||
title: "My First Post"
|
||||
date: 2023-07-19T11:54:06+02:00
|
||||
draft: true
|
||||
---
|
||||
|
||||
38
hugo.toml
38
hugo.toml
|
|
@ -1,3 +1,39 @@
|
|||
baseURL = 'http://example.org/'
|
||||
baseURL = 'https://www.kekskurse.de/'
|
||||
languageCode = 'en-us'
|
||||
title = 'My New Hugo Site'
|
||||
theme = 'hugo-blog-awesome'
|
||||
|
||||
[[params.socialIcons]]
|
||||
name = "github"
|
||||
url = "https://github.com/kekskurse"
|
||||
|
||||
[[params.socialIcons]]
|
||||
name = "twitter"
|
||||
url = "https://twitter.com/kekskurse"
|
||||
|
||||
[[params.socialIcons]]
|
||||
name = "Rss"
|
||||
url = "index.xml"
|
||||
|
||||
|
||||
[menu]
|
||||
[[menu.main]]
|
||||
# The page reference (pageRef) is useful for menu highlighting
|
||||
# When pageRef is set, setting `url` is optional; it will be used as a fallback if the page is not found.
|
||||
pageRef="/"
|
||||
name = 'Home'
|
||||
url = '/'
|
||||
weight = 10
|
||||
[[menu.main]]
|
||||
pageRef="posts"
|
||||
name = 'Posts'
|
||||
url = '/posts/'
|
||||
weight = 20
|
||||
[[menu.main]]
|
||||
pageRef="about"
|
||||
name = 'About'
|
||||
url = '/about/'
|
||||
weight = 30
|
||||
|
||||
[params]
|
||||
goToTop = true
|
||||
29
layouts/shortcodes/figure.html
Normal file
29
layouts/shortcodes/figure.html
Normal file
|
|
@ -0,0 +1,29 @@
|
|||
<!--
|
||||
Put this file in /layouts/shortcodes/figure.html
|
||||
NB this overrides Hugo's built-in "figure" shortcode but is backwards compatible
|
||||
Documentation and licence at https://github.com/liwenyip/hugo-easy-gallery/
|
||||
-->
|
||||
<!-- count how many times we've called this shortcode; load the css if it's the first time -->
|
||||
{{- if not ($.Page.Scratch.Get "figurecount") }}<link rel="stylesheet" href={{ "css/hugo-easy-gallery.css" | relURL }} />{{ end }}
|
||||
{{- $.Page.Scratch.Add "figurecount" 1 -}}
|
||||
<!-- use either src or link-thumb for thumbnail image -->
|
||||
{{- $thumb := .Get "src" | default (printf "%s." (.Get "thumb") | replace (.Get "link") ".") }}
|
||||
<div class="box{{ with .Get "caption-position" }} fancy-figure caption-position-{{.}}{{end}}{{ with .Get "caption-effect" }} caption-effect-{{.}}{{end}}" {{ with .Get "width" }}style="max-width:{{.}}"{{end}}>
|
||||
<figure {{ with .Get "class" }}class="{{.}}"{{ end }} itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
|
||||
<div class="img"{{ if .Parent }} style="background-image: url('{{ $thumb | relURL }}');"{{ end }}{{ with .Get "size" }} data-size="{{.}}"{{ end }}>
|
||||
<img itemprop="thumbnail" src="{{ $thumb | relURL }}" {{ with .Get "alt" | default (.Get "caption") }}alt="{{.}}"{{ end }}/><!-- <img> hidden if in .gallery -->
|
||||
</div>
|
||||
{{ with .Get "link" | default (.Get "src") }}<a href="{{ . | relURL }}" itemprop="contentUrl"></a>{{ end }}
|
||||
{{- if or (or (.Get "title") (.Get "caption")) (.Get "attr")}}
|
||||
<figcaption>
|
||||
{{- with .Get "title" }}<h4>{{.}}</h4>{{ end }}
|
||||
{{- if or (.Get "caption") (.Get "attr")}}
|
||||
<p>
|
||||
{{- .Get "caption" -}}
|
||||
{{- with .Get "attrlink"}}<a href="{{.}}">{{ .Get "attr" }}</a>{{ else }}{{ .Get "attr"}}{{ end -}}
|
||||
</p>
|
||||
{{- end }}
|
||||
</figcaption>
|
||||
{{- end }}
|
||||
</figure>
|
||||
</div>
|
||||
41
layouts/shortcodes/gallery.html
Normal file
41
layouts/shortcodes/gallery.html
Normal file
|
|
@ -0,0 +1,41 @@
|
|||
<!--
|
||||
Put this file in /layouts/shortcodes/gallery.html
|
||||
Documentation and licence at https://github.com/liwenyip/hugo-easy-gallery/
|
||||
-->
|
||||
<!-- count how many times we've called this shortcode; load the css if it's the first time -->
|
||||
{{- if not ($.Page.Scratch.Get "figurecount") }}<link rel="stylesheet" href={{ "css/hugo-easy-gallery.css" | relURL }} />{{ end }}
|
||||
{{- $.Page.Scratch.Add "figurecount" 1 }}
|
||||
{{ $baseURL := .Site.BaseURL }}
|
||||
<div class="gallery caption-position-{{ with .Get "caption-position" | default "bottom" }}{{.}}{{end}} caption-effect-{{ with .Get "caption-effect" | default "slide" }}{{.}}{{end}} hover-effect-{{ with .Get "hover-effect" | default "zoom" }}{{.}}{{end}} {{ if ne (.Get "hover-transition") "none" }}hover-transition{{end}}" itemscope itemtype="http://schema.org/ImageGallery">
|
||||
{{- with (.Get "dir") -}}
|
||||
<!-- If a directory was specified, generate figures for all of the images in the directory -->
|
||||
{{- $files := readDir (print "/static/" .) }}
|
||||
{{- range $files -}}
|
||||
<!-- skip files that aren't images, or that include the thumb suffix in their name -->
|
||||
{{- $thumbext := $.Get "thumb" | default "-thumb" }}
|
||||
{{- $isthumb := .Name | findRE ($thumbext | printf "%s\\.") }}<!-- is the current file a thumbnail image? -->
|
||||
{{- $isimg := lower .Name | findRE "\\.(gif|jpg|jpeg|tiff|png|bmp|webp|avif|jxl)" }}<!-- is the current file an image? -->
|
||||
{{- if and $isimg (not $isthumb) }}
|
||||
{{- $caption := .Name | replaceRE "\\..*" "" | humanize }}<!-- humanized filename without extension -->
|
||||
{{- $linkURL := print $baseURL ($.Get "dir") "/" .Name | absURL }}<!-- absolute URL to hi-res image -->
|
||||
{{- $thumb := .Name | replaceRE "(\\.)" ($thumbext | printf "%s.") }}<!-- filename of thumbnail image -->
|
||||
{{- $thumbexists := where $files "Name" $thumb }}<!-- does a thumbnail image exist? -->
|
||||
{{- $thumbURL := print $baseURL ($.Get "dir") "/" $thumb | absURL }}<!-- absolute URL to thumbnail image -->
|
||||
<div class="box">
|
||||
<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
|
||||
<div class="img" style="background-image: url('{{ if $thumbexists }}{{ $thumbURL }}{{ else }}{{ $linkURL }}{{ end }}');" >
|
||||
<img itemprop="thumbnail" src="{{ if $thumbexists }}{{ $thumbURL }}{{ else }}{{ $linkURL }}{{ end }}" alt="{{ $caption }}" /><!-- <img> hidden if in .gallery -->
|
||||
</div>
|
||||
<figcaption>
|
||||
<p>{{ $caption }}</p>
|
||||
</figcaption>
|
||||
<a href="{{ $linkURL }}" itemprop="contentUrl"></a><!-- put <a> last so it is stacked on top -->
|
||||
</figure>
|
||||
</div>
|
||||
{{- end }}
|
||||
{{- end }}
|
||||
{{- else -}}
|
||||
<!-- If no directory was specified, include any figure shortcodes called within the gallery -->
|
||||
{{ .Inner }}
|
||||
{{- end }}
|
||||
</div>
|
||||
71
layouts/shortcodes/load-photoswipe.html
Normal file
71
layouts/shortcodes/load-photoswipe.html
Normal file
|
|
@ -0,0 +1,71 @@
|
|||
<!--
|
||||
Put this file in /layouts/shortcodes/load-photoswipe.html
|
||||
Documentation and licence at https://github.com/liwenyip/hugo-easy-gallery/
|
||||
-->
|
||||
|
||||
<!-- prevent this shortcode from being loaded more than once per page -->
|
||||
{{ if not ($.Page.Scratch.Get "photoswipeloaded") }}
|
||||
{{ $.Page.Scratch.Set "photoswipeloaded" 1 }}
|
||||
|
||||
<!--
|
||||
*** jQuery must be loaded before load-photoswipe.js ***
|
||||
- If your template already loads jQuery in the header then you don't need to load it again here.
|
||||
- If your template already loads jQuery in the footer, then you could load load-photoswipe.js from the footer instead
|
||||
-->
|
||||
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
|
||||
<script src={{ "js/load-photoswipe.js" | relURL }}></script>
|
||||
|
||||
<!-- Photoswipe css/js libraries -->
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.1/photoswipe.min.css" integrity="sha256-sCl5PUOGMLfFYctzDW3MtRib0ctyUvI9Qsmq2wXOeBY=" crossorigin="anonymous" />
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.1/default-skin/default-skin.min.css" integrity="sha256-BFeI1V+Vh1Rk37wswuOYn5lsTcaU96hGaI7OUVCLjPc=" crossorigin="anonymous" />
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.1/photoswipe.min.js" integrity="sha256-UplRCs9v4KXVJvVY+p+RSo5Q4ilAUXh7kpjyIP5odyc=" crossorigin="anonymous"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.1/photoswipe-ui-default.min.js" integrity="sha256-PWHOlUzc96pMc8ThwRIXPn8yH4NOLu42RQ0b9SpnpFk=" crossorigin="anonymous"></script>
|
||||
|
||||
<!-- Root element of PhotoSwipe. Must have class pswp. -->
|
||||
<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
|
||||
<!-- Background of PhotoSwipe.
|
||||
It's a separate element, as animating opacity is faster than rgba(). -->
|
||||
<div class="pswp__bg"></div>
|
||||
<!-- Slides wrapper with overflow:hidden. -->
|
||||
<div class="pswp__scroll-wrap">
|
||||
<!-- Container that holds slides.
|
||||
PhotoSwipe keeps only 3 of them in DOM to save memory.
|
||||
Don't modify these 3 pswp__item elements, data is added later on. -->
|
||||
<div class="pswp__container">
|
||||
<div class="pswp__item"></div>
|
||||
<div class="pswp__item"></div>
|
||||
<div class="pswp__item"></div>
|
||||
</div>
|
||||
<!-- Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed. -->
|
||||
<div class="pswp__ui pswp__ui--hidden">
|
||||
<div class="pswp__top-bar">
|
||||
<!-- Controls are self-explanatory. Order can be changed. -->
|
||||
<div class="pswp__counter"></div>
|
||||
<button class="pswp__button pswp__button--close" title="Close (Esc)"></button>
|
||||
<button class="pswp__button pswp__button--share" title="Share"></button>
|
||||
<button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>
|
||||
<button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>
|
||||
<!-- Preloader demo http://codepen.io/dimsemenov/pen/yyBWoR -->
|
||||
<!-- element will get class pswp__preloader--active when preloader is running -->
|
||||
<div class="pswp__preloader">
|
||||
<div class="pswp__preloader__icn">
|
||||
<div class="pswp__preloader__cut">
|
||||
<div class="pswp__preloader__donut"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
|
||||
<div class="pswp__share-tooltip"></div>
|
||||
</div>
|
||||
<button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)">
|
||||
</button>
|
||||
<button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)">
|
||||
</button>
|
||||
<div class="pswp__caption">
|
||||
<div class="pswp__caption__center"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1 @@
|
|||
{"Target":"style.min.d16f523c36741e07697791cfe4bcb09b8c92c7034d5cbf85980df65d92a70e97.css","MediaType":"text/css","Data":{"Integrity":"sha256-0W9SPDZ0Hgdpd5HP5Lywm4ySxwNNXL+FmA32XZKnDpc="}}
|
||||
159
static/css/hugo-easy-gallery.css
Normal file
159
static/css/hugo-easy-gallery.css
Normal file
|
|
@ -0,0 +1,159 @@
|
|||
/*
|
||||
Put this file in /static/css/hugo-easy-gallery.css
|
||||
Documentation and licence at https://github.com/liwenyip/hugo-easy-gallery/
|
||||
*/
|
||||
|
||||
|
||||
/*
|
||||
Grid Layout Styles
|
||||
*/
|
||||
.gallery {
|
||||
overflow: hidden;
|
||||
margin: 10px;
|
||||
max-width: 768px;
|
||||
}
|
||||
.gallery .box {
|
||||
float: left;
|
||||
position: relative;
|
||||
/* Default: 1 tile wide */
|
||||
width: 100%;
|
||||
padding-bottom: 100%;
|
||||
}
|
||||
@media only screen and (min-width : 365px) {
|
||||
/* Tablet view: 2 tiles */
|
||||
.gallery .box {
|
||||
width: 50%;
|
||||
padding-bottom: 50%;
|
||||
}
|
||||
}
|
||||
@media only screen and (min-width : 480px) {
|
||||
/* Small desktop / ipad view: 3 tiles */
|
||||
.gallery .box {
|
||||
width: 33.3%;
|
||||
padding-bottom: 33.3%; /* */
|
||||
}
|
||||
}
|
||||
@media only screen and (min-width : 9999px) {
|
||||
/* Medium desktop: 4 tiles */
|
||||
.box {
|
||||
width: 25%;
|
||||
padding-bottom: 25%;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
Transition styles
|
||||
*/
|
||||
.gallery.hover-transition figure,
|
||||
.gallery.hover-effect-zoom .img,
|
||||
.gallery:not(.caption-effect-appear) figcaption,
|
||||
.fancy-figure:not(.caption-effect-appear) figcaption {
|
||||
-webkit-transition: all 0.3s ease-in-out;
|
||||
-moz-transition: all 0.3s ease-in-out;
|
||||
-o-transition: all 0.3s ease-in-out;
|
||||
transition: all 0.3s ease-in-out;
|
||||
}
|
||||
/*
|
||||
figure styles
|
||||
*/
|
||||
figure {
|
||||
position:relative; /* purely to allow absolution positioning of figcaption */
|
||||
overflow: hidden;
|
||||
}
|
||||
.gallery figure {
|
||||
position: absolute;
|
||||
left: 5px;
|
||||
right: 5px;
|
||||
top: 5px;
|
||||
bottom: 5px;
|
||||
}
|
||||
.gallery.hover-effect-grow figure:hover {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
.gallery.hover-effect-shrink figure:hover {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
.gallery.hover-effect-slidedown figure:hover {
|
||||
transform: translateY(5px);
|
||||
}
|
||||
.gallery.hover-effect-slideup figure:hover {
|
||||
transform: translateY(-5px);
|
||||
}
|
||||
|
||||
/*
|
||||
img / a styles
|
||||
*/
|
||||
|
||||
.gallery .img {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
background-size: cover;
|
||||
background-position: 50% 50%;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
.gallery.hover-effect-zoom figure:hover .img {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
.gallery img {
|
||||
display: none; /* only show the img if not inside a gallery */
|
||||
}
|
||||
figure a {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
/*
|
||||
figcaption styles
|
||||
*/
|
||||
.gallery figcaption,
|
||||
.fancy-figure figcaption {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: #000;
|
||||
color: #FFF;
|
||||
text-align: center;
|
||||
font-size: 75%; /* change this if you want bigger text */
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
opacity: 1;
|
||||
cursor: pointer;
|
||||
}
|
||||
.gallery.caption-position-none figcaption,
|
||||
.fancy-figure.caption-position-none figcaption {
|
||||
display: none;
|
||||
}
|
||||
.gallery.caption-position-center figcaption,
|
||||
.fancy-figure.caption-position-center figcaption {
|
||||
top: 0;
|
||||
padding: 40% 5px;
|
||||
}
|
||||
.gallery.caption-position-bottom figcaption,
|
||||
.fancy-figure.caption-position-bottom figcaption {
|
||||
padding: 5px;
|
||||
}
|
||||
.gallery.caption-effect-fade figure:not(:hover) figcaption,
|
||||
.gallery.caption-effect-appear figure:not(:hover) figcaption,
|
||||
.fancy-figure.caption-effect-fade figure:not(:hover) figcaption,
|
||||
.fancy-figure.caption-effect-appear figure:not(:hover) figcaption {
|
||||
background: rgba(0, 0, 0, 0);
|
||||
opacity: 0;
|
||||
}
|
||||
.gallery.caption-effect-slide.caption-position-bottom figure:not(:hover) figcaption,
|
||||
.fancy-figure.caption-effect-slide.caption-position-bottom figure:not(:hover) figcaption {
|
||||
margin-bottom: -100%;
|
||||
}
|
||||
.gallery.caption-effect-slide.caption-position-center figure:not(:hover) figcaption,
|
||||
.fancy-figure.caption-effect-slide.caption-position-center figure:not(:hover) figcaption {
|
||||
top: 100%;
|
||||
}
|
||||
figcaption p {
|
||||
margin: auto; /* override style in theme */
|
||||
}
|
||||
|
||||
80
static/js/load-photoswipe.js
Normal file
80
static/js/load-photoswipe.js
Normal file
|
|
@ -0,0 +1,80 @@
|
|||
/*
|
||||
Put this file in /static/js/load-photoswipe.js
|
||||
Documentation and licence at https://github.com/liwenyip/hugo-easy-gallery/
|
||||
*/
|
||||
|
||||
/* Show an alert if this js file has been loaded twice */
|
||||
if (window.loadphotoswipejs) {
|
||||
window.alert("You've loaded load-photoswipe.js twice. See https://github.com/liwenyip/hugo-easy-gallery/issues/6")
|
||||
}
|
||||
var loadphotoswipejs = 1
|
||||
|
||||
/* TODO: Make the share function work */
|
||||
$( document ).ready(function() {
|
||||
/*
|
||||
Initialise Photoswipe
|
||||
*/
|
||||
var items = []; // array of slide objects that will be passed to PhotoSwipe()
|
||||
// for every figure element on the page:
|
||||
$('figure').each( function() {
|
||||
if ($(this).attr('class') == 'no-photoswipe') return true; // ignore any figures where class="no-photoswipe"
|
||||
// get properties from child a/img/figcaption elements,
|
||||
var $figure = $(this),
|
||||
$a = $figure.find('a'),
|
||||
$img = $figure.find('img'),
|
||||
$src = $a.attr('href'),
|
||||
$title = $img.attr('alt'),
|
||||
$msrc = $img.attr('src');
|
||||
// if data-size on <a> tag is set, read it and create an item
|
||||
if ($a.data('size')) {
|
||||
var $size = $a.data('size').split('x');
|
||||
var item = {
|
||||
src : $src,
|
||||
w : $size[0],
|
||||
h : $size[1],
|
||||
title : $title,
|
||||
msrc : $msrc
|
||||
};
|
||||
console.log("Using pre-defined dimensions for " + $src);
|
||||
// if not, set temp default size then load the image to check actual size
|
||||
} else {
|
||||
var item = {
|
||||
src : $src,
|
||||
w : 800, // temp default size
|
||||
h : 600, // temp default size
|
||||
title : $title,
|
||||
msrc : $msrc
|
||||
};
|
||||
console.log("Using default dimensions for " + $src);
|
||||
// load the image to check its dimensions
|
||||
// update the item as soon as w and h are known (check every 30ms)
|
||||
var img = new Image();
|
||||
img.src = $src;
|
||||
var wait = setInterval(function() {
|
||||
var w = img.naturalWidth,
|
||||
h = img.naturalHeight;
|
||||
if (w && h) {
|
||||
clearInterval(wait);
|
||||
item.w = w;
|
||||
item.h = h;
|
||||
console.log("Got actual dimensions for " + img.src);
|
||||
}
|
||||
}, 30);
|
||||
}
|
||||
// Save the index of this image then add it to the array
|
||||
var index = items.length;
|
||||
items.push(item);
|
||||
// Event handler for click on a figure
|
||||
$figure.on('click', function(event) {
|
||||
event.preventDefault(); // prevent the normal behaviour i.e. load the <a> hyperlink
|
||||
// Get the PSWP element and initialise it with the desired options
|
||||
var $pswp = $('.pswp')[0];
|
||||
var options = {
|
||||
index: index,
|
||||
bgOpacity: 0.8,
|
||||
showHideOpacity: true
|
||||
}
|
||||
new PhotoSwipe($pswp, PhotoSwipeUI_Default, items, options).init();
|
||||
});
|
||||
});
|
||||
});
|
||||
1
themes/hugo-blog-awesome
Submodule
1
themes/hugo-blog-awesome
Submodule
|
|
@ -0,0 +1 @@
|
|||
Subproject commit 68c1599c16493878126b48d61f69744c5b0a6384
|
||||
Reference in a new issue