Kotlin based Content Management System and other web apps

I have been spending the last couple of weeks programming a new Content Management System for my website in Kotlin.

Why? What was wrong with the old site?

  1. it used jQuery and was slow loading pages
  2. it was not responsive

I also wanted to learn about REST, Kotlin DSLs and databases.

The new version now has authentication, sessions and only uses JavaScript for loading Feather Icons or on the pages that contain web apps.

Screenshot from 2019-10-06 22-06-13

Due to the fact it doesn’t use JavaScript on the web pages it will be more friendly with search engines and will help to drive traffic to my website.

I am currently porting the old web apps I had on the old website. I have currently only moved Channel Grapher and the DNS Statistics App.

I plan to keep developing this platform and build more websites using it. I currently do not see it as a competitor to any other CMS but mainly as a way for me to learn more about web technologies.

It also allows me to host Kettlebell lifting competitions with my brother!

You can get the source code for the Kettlebell competition app here.

The work-in-progress CMS code is here.

Advertisements

UI updates

I’ve made some minor updates to my ReactJS app Channel Grapher. It is turning out to be one of the hardest parts of the programming process.

I need to get a nice icon for my app and will see if I can get one professionally made when I get a chance.

I plan to use React Native to make this an android app as well.

Solar Powered 18650 IOT ESP8266/ESP8285 Weather Station with UV/Rain and IOT Updates (ThingSpeak)

I have finally finished publishing my completed weather station.

This slideshow requires JavaScript.

The entire design is Open Source and available on the following links:

https://www.thingiverse.com/thing:3601839

https://github.com/wilyarti/weather_station

Have fun and happy hacking!

PS:

The final version has the following features:

  • Improved weather proofing
  • Slanted roof for improved drainage
  • Increased accuracy of Stevenson Screen
  • IOT Updates
  • New ThingSpeak API viewer
  • Rain/UV Index/Pressure/Humidity/Temperature
  • Good battery life
  • Reduced weight and parts

Micro-controller woes

I had two ESP8285 micro-controllers fail on me today (probably due to my carelessness). It is pretty frustrating as I was completing the final version of my weather station.

The new version is more compact, increases the protection to the electronic components from water ingress and now features a slanted solar panel. It also has a USB charge port.

I had to add an incline to the solar panel due to pooling of water causing discoloration to the panel of my currently deployed weather station.

IMG-f395facd3f5fa9ca7da534a8c38348f1-V.jpg

I will now have to wait for more parts from China!

 

Simple IOT Clock

I built a cool little clock using an ESP8266 and a dot matrix display I got for $8. The total cost will probably be under $20.

The clock uses NTP to sync the time, then updates the second ticker on the bottom every 2 seconds. When the minute changes it updates the entire display.

It didn’t take too long as I used code by others (NTP client, WiFi Manager, MD_MAX72xx animations).

Code is here.

IMG_20190329_090701__01.jpg

Improving water proofing in my Weather Station

We had a few severe thunderstorms where I live and I the wind and rain caused damage to my electronics in my outdoor weather station.

IMG_20190316_134804.jpg

The weather station is waterproof if there is just light rain, but strong winds will blow water into the Stevenson Screen damaging the electronics.

I have decided to seal off the electronics as much as possible – hopefully this new construction will be more robust.

Single Page Responsive Web Apps using JavaScript , jQuery and Bootstrap

The ThingSpeak Web Page does not allow you to pull historical data from your channel, plus simple things like converting Absolute Pressure to Mean Sea Level Pressure require running Matlab Scripts.

I decided to create a single page web app that had the features I required. I ended up with the following features:

  • Cross platform/browser
  • Responsive (usable on my 24″ monitor, tablet and phone)
  • Customizable graphs (color, type etc)
  • Ability to select multiple days/weeks
  • Ability to select last minute/hour/day
  • Sea Level Pressure Conversion Built in
  • Auto summation for rain graphs by interval
  • Auto update graphs to get latest data

The web app needs to request data from api.thingspeak.com which is a different domain to the domain where the web app is hosted. To do this I created a route in Ktor which accepts a JSON request and responds with the contents of the request.

post("/getJSON") {
            val thisReq = call.receive()
            val req = khttp.get(thisReq.url)
            println(thisReq.url)
            if (req.statusCode == 200) {
                call.respond(req.jsonObject)
            } else {
                call.respond(json { "success" to "false" })
            }
        }

I understand this could be potentially abused as this is a effectively an anonymous router, but I am not worried just yet.

To access this in JavaScript:

var thingSpeakQuery = `https://api.thingspeak.com/channels/${feedID}/feeds/last.json`;
var getJSONThingSpeak = {
	"url": thingSpeakQuery
};
$.ajax({
	type: "POST",
	url: "/getJSON",
	data: JSON.stringify(getJSONThingSpeak),
	contentType: "application/json; charset=utf-8",
	dataType: "json",
	success: function (element) {
		// code here to handle data
	},
	failure: function (errMsg) {
		alert(errMsg);
	},
	// catch internal server error, this happens when the server can't pass the JSON data,
        // or the ThingSpeak ID is invalid
	statusCode: {
		500: function () {
			console.log("Query returned no data.");
		}
	}
});

Here I am using an AJAX function to get the latest data from the specified ThingSpeakID.

The rest of the web is pretty much standard JavaScript and relies heavily on jQuery to update the web page. The JSON data structures get pretty complicated. In order to debug/test the code while I was writing it I made the returned JSON data a global variable and used Chromium’s Dev Tools to write the code.

For example here where are looping through all the Charts and adding the ThingSpeak data:

thisData.map.feeds.myArrayList.forEach(function (element) {
                // loop over each data field in ThingSpeak data
                for (var k = 0; k < chartList.length; k++) {
                    // store as a tmp string, as not to change with 'k'
                    var tmp = k + 1;
                    weatherCharts[k].data.datasets[0].data.push({
                        x: moment(element.map.created_at),
                        y: parseFloat(element.map["field" + tmp.toString()])
                    });
// snipped

The above would be very difficult to write by hand, or get working by trial and error. Being able to run the code in the browser and make things instantly change was actually a lot of fun.

JavaScript is fast becoming my favorite language, not due to it’s technical merits but due to the fact it allows we to be vendor agnostic. I can run my code on my FreeBSD/Linux/Android/Windows/Mac/iPhone hardware.

The coolest feature, is the auto update feature. It allows me to leave the browser window open on my computer and have a live stream graph of my weather station without having to continuously hit the refresh button!

It’s pretty simple, it just uses a JavaScript interval function:

setInterval(function () {
    // This will be executed every 60 seconds
    getLatestWeatherForWeatherCharts();
    }, 60000);

You can use the web app here.

opens3.net_weatherstats.html