Creations built using RJtextEd

Discuss any editing or program related subjects.
User avatar
yereverluvinuncleber
Posts: 255
Joined: 20 Apr 2018 09:49

Creations built using RJtextEd

Post by yereverluvinuncleber » 01 May 2018 13:43

I have some fairly attractive apps that I am building using RjTextEd, they are visual but have a lot of supporting code that is written in javascript/jscript or vbscript and XML. The work could not be carried out without RjTextEd. I have just completed nine small open source projects using RjTextEd, converting them from Context projects into the RjTextEd project workspace that has inspired me to complete these previously languishing applications. Two have been built entirely using RjTextEd, the others have been rejigged and brought up to date with the new editor.

My question is - Would it be OK to post images of the applications in question when complete?
Noli pati a scelestis opprimi...

You can find me on Deviantart https://www.deviantart.com/yereverluvinuncleber/gallery/

User avatar
Rickard Johansson
Site Admin
Posts: 5867
Joined: 19 Jul 2006 14:29

Re: Creations built using RJtextEd

Post by Rickard Johansson » 02 May 2018 04:11

yereverluvinuncleber wrote:
01 May 2018 13:43
My question is - Would it be OK to post images of the applications in question when complete?
It's OK.

User avatar
yereverluvinuncleber
Posts: 255
Joined: 20 Apr 2018 09:49

Re: Creations built using RJtextEd

Post by yereverluvinuncleber » 02 May 2018 09:21

Right here goes, I am creating a series of desktop gauges using javascript, not quite multi-o/s but the same code for Windows and Mac o/s.

Image

This is a temperature gauge that extracts its information from Open Hardware Monitor and then animates the pointer and lamps, gives a working right click menu and full help. It is more of an app. in that it is a discrete package, probably 1,500 lines of standard ECMA javascript, a few lines of MS Jscript with a little XML.

There are nine of these gauges, all following the same design and each performing some sort of similar system monitoring function. They all run within their own process context and use a runtime engine to allow the javascript to style and access the graphic imagery. They run natively on Mac and Windows. The 'app' runs using minimal CPU <1%. It does consume about 6mb of RAM due to the high-res graphic imagery that needs to look good even when resized to full size (CTRL+mouse scrollwheel up/down).

This is the first chunk of javascript that I have overhauled using RjTextEd. It was used to allow me to get to know RjTextEd.

Not my first of these, I have created many and as I put them through the mill of RjTextEd I'll post and image of each here as long as that's OK.
Noli pati a scelestis opprimi...

You can find me on Deviantart https://www.deviantart.com/yereverluvinuncleber/gallery/

User avatar
yereverluvinuncleber
Posts: 255
Joined: 20 Apr 2018 09:49

Re: Creations built using RJtextEd

Post by yereverluvinuncleber » 02 May 2018 17:38

The next is the Panzer clock gauge, once again built with Javascript, I forget to say on the previous OHM gauge I have a javascript version and a Jscript version, the code more or less is the same, the difference is that each uses a different runtime engine to render the images and provide the APIs to the underlying o/s. For each of these gauges there are two versions and for some there is also a web version. Some gauges don't easily translate to the web as javascript apps cannot access machine specific information through the browser, clocks can work in any medium.

The following are two screen captures as GIFs that I hope will work on this forum showing what the gauge does.

Image

This is the gauge shown in a large form, of course it can be shrunk in size. It is only shown this size for clarity.
The next GIF shows the gauge being manipulated, the clock being resized and the buttons clicked upon.

Image

All the gauges are open source and all my graphics are free to use non-commercially. The gauges can be cracked open (zipfiles) and the resources inside extracted easily. I'm happy with it if anyone else wants to create similar gauges for other platforms.

About 1,000 lines of .js code. All the graphics are created using Adobe Photoshop. The gauge comprises layers of PNGs with transparent backgrounds that are placed together using an XML definition. None of the gauges have a traditional border, no close buttons and no standard controls, all are bespoke.

There is no IDE for desktop javascript (at least none worth having) so I build using Photoshop and convert the design using a javascript converter that takes a PSD file and creates an XML definition from it. The runtime engine then works with that XML to pull the graphics into a whole and the javascript logic is hung from the various objects. The javascript converter creates code for two engines.

I use RjTextEd to edit the XML by hand and of course to craft the javascript logic. Each engine has a debug mode and so I test the logic there, view the results and make changes to the .js dynamically. It is almost a RAD environment as there is no need for compilation, binding &c, it is simply code and run.
Noli pati a scelestis opprimi...

You can find me on Deviantart https://www.deviantart.com/yereverluvinuncleber/gallery/

User avatar
yereverluvinuncleber
Posts: 255
Joined: 20 Apr 2018 09:49

Re: Creations built using RJtextEd

Post by yereverluvinuncleber » 03 May 2018 09:41

Please comment or add your own.
Noli pati a scelestis opprimi...

You can find me on Deviantart https://www.deviantart.com/yereverluvinuncleber/gallery/

User avatar
yereverluvinuncleber
Posts: 255
Joined: 20 Apr 2018 09:49

Re: Creations built using RJtextEd

Post by yereverluvinuncleber » 04 May 2018 09:11

Not much of a description needed for the next gauge, all built using the same technology as the previous. Uses in-built APIs from the engines to extract the information so the number of lines of code is reduced, this gauge is a new build based upon an older gauge that is functionally identical.

As you can see it is a self-contained resizable battery gauge.

Image

Only a few more to go! As I overhaul each I'll post.

PS. I am using Licecap to capture the gauges as GIFs
Noli pati a scelestis opprimi...

You can find me on Deviantart https://www.deviantart.com/yereverluvinuncleber/gallery/

User avatar
yereverluvinuncleber
Posts: 255
Joined: 20 Apr 2018 09:49

Re: Creations built using RJtextEd

Post by yereverluvinuncleber » 05 May 2018 10:08

Panzer Ram gauge. Takes the memory usage from the widget engine's API and uses the same code as in the previous gauges to display current RAM usage in analogue and digital form. These are primarily analogue gauges and they are designed to appeal to the sort of mind where a visual representation of data is more important. They also give the human mind the chance to take in a value at a glance.

A rather useful gauge on Windows, which has been designed with insufficient memory management allowing user processes to consume more memory than the system allows (no working set extents) in turn pushing system processes into heavy virtual memory usage, a situation from which Windows seldom recovers correctly and after which a reboot is almost always required.

Image

Once again a gauge designed for two separate javascript engines.
Noli pati a scelestis opprimi...

You can find me on Deviantart https://www.deviantart.com/yereverluvinuncleber/gallery/

User avatar
yereverluvinuncleber
Posts: 255
Joined: 20 Apr 2018 09:49

Re: Creations built using RJtextEd

Post by yereverluvinuncleber » 06 May 2018 11:34

Now the CPU gauge, yes - I have more of these...

Image

Resizable using the mouse scroll wheel, the interval is configurable and the hand animation uses minimal cpu in itself.

Image

A screen capture using LiceCap. The interval in the image above has been set to zero so that the CPU reading is continuous.
Noli pati a scelestis opprimi...

You can find me on Deviantart https://www.deviantart.com/yereverluvinuncleber/gallery/

User avatar
yereverluvinuncleber
Posts: 255
Joined: 20 Apr 2018 09:49

Re: Creations built using RJtextEd

Post by yereverluvinuncleber » 07 May 2018 12:37

Drive storage gauge showing current space usage, each gauge can show a selected drive and the gauge can be spawned so that you can have one gauge per drive.

Image

Image

Low quality GIFs. Apologies.

There is a short delay on the above pointers after a drive was selected, not present in the final version.
Last edited by yereverluvinuncleber on 09 May 2018 12:32, edited 1 time in total.
Noli pati a scelestis opprimi...

You can find me on Deviantart https://www.deviantart.com/yereverluvinuncleber/gallery/

User avatar
yereverluvinuncleber
Posts: 255
Joined: 20 Apr 2018 09:49

Re: Creations built using RJtextEd

Post by yereverluvinuncleber » 09 May 2018 12:30

My next gauge is incomplete, ie. I am still working on it as it inconsistently extracts data from WMI, sometimes triggering errors on one machine and not in another. The fundamental signal strength is good it is just the bandwidth data that is failing some of the time. Regardless the gauge is complete visually and it does the job. Very useful on a laptop with a router that may not be quite close enough to maintain a good signal..

Image

Image

All my creations are skeumorphic, ie they all look like their counterpart in real life. I see no reason why the human mind has to conform to visual representations that look nothing like the real devices we have come to know and understand. Computers should conform to us not the human conforming to the machine and certainly not to the idea of a theme from a computing corporate monolith like Microsoft. </rant>

Anyhow, that's the idea.
Noli pati a scelestis opprimi...

You can find me on Deviantart https://www.deviantart.com/yereverluvinuncleber/gallery/

User avatar
yereverluvinuncleber
Posts: 255
Joined: 20 Apr 2018 09:49

Re: Creations built using RJtextEd

Post by yereverluvinuncleber » 10 May 2018 09:34

Panzer Weather Gauges - These are the gauges I worked upon last night, creating the images and scripting the creation of the gauge objects. I am creating these from scratch using RjTextEd.

This is just a taster, the barometer face is not yet complete and the gauges are clearly not polling for the weather, formatting the incoming XML data &c. However, the structure has been implemented within which the weather code will be placed. I already have some weather code written a long time ago which will need to be re-written and improved to match my current efforts.

The gauges are placed upon the desktop within the context of one process but they are individual gauges and can be placed/moved/controlled separately on the desktop but resized together. The reason for lumping them together is that it is expensive on resource to have three separate gauges each polling for weather, it would also triple the number of weather requests to the source - that might annoy the provider! So, instead I will have one process that polls the data and three gauges that use the data from that one single poll.

Image
Fig 1. First cut.

It can be a bit of tedious job creating analogue gauges. I have to create a face displaying pressure in millibars, hPa and in/Hg, each of which are still relevant scales of measurement and still used today around the world. The most sensible method would be to use text elements to display the scales and calculate the values using code but if I use text elements on the gauge then the character of the gauges will be lost as Windows fonts are a bit limited meaning I can't use anything exotic. If I place the visually-correct graphic number images on the face in code then that is a fair bit of programming to get just right due to spacing issues &c. It is just a little more simple to create a unique face for each unit of measurement. I have already created the correct temperature face options in Celsius/Fahrenheit (not shown). On the barometer, one face is more or less complete, just two more to go...

Making good progress on the weather gauges:

Image
Fig 2. Interim version of the gauges - code is in place, graphics 50% complete.

Shown with eight of the ten or so other gauges. The weather code is in place and polling the weather feed correctly. Just need to do all those little extras that make a working set of gauges and finish the gauge faces. creating the fahrenheit temperature gauge, then need to modify the centigrade face so that it starts with a minus scale and the two remaining pressure faces.

Making progress with the gauges - slow but sure.

Image
Fig 3. Latest version of the gauges with functionality updates.
Right click and view image will show the gauges in a larger scale.

The digital displays are now operating as are the lamps. The barometer has a rotating slider that indicates previous pressure reading. The temperature gauge now has a low-temperature indicator lamp and the (moveable) clipboard displays the weather for today in an easily-readable text form. The gauges are individually resizable and there is an animated busy timer to indicate when the gauges are polling for data.

Image
Fig 4. Latest version of the gauges with resizing updates.

The three gauges can now be resized separately and the size is now stored/remembered for each restart. The gauge colours are being revised to suit the operation of each gauge and the descriptive icons on each are being improved. Small changes in code to the menus, to allow the textual description of the weather to be copied to the system clipboard so that you can paste the weather into another program, email, text &c.

Next task is to finish off the scales on the faces, -30 to +50 on the centigrade scale, to match on the fahrenheit scales and then the alternative barometer faces.

Day 4.
Added an Anemometer to the gauge set, still all part of the same program.

Image
Fig 5. First cut of the anemometer (wind speed gauge).

It only shows speed in knots and not yet in direction - that is yet to come.

Feedback! Please - you don't have to like them, skeumorphism is not for everyone but feel free to comment.

Day 5.

Improvements to the anemometer to give wind direction, essential on any weather gauge.

Image
Fig. 6 Wind direction added to the anemometer.

The serif font and the sections on the scale give it a more classical look which may not be in keeping with the 30s look and feel of the other gauges so I may change that.

Day 6.

Just so that you know - I'm not spending the majority of my time on this, probably 2-3 hrs per day spent late in the evening when kids have gone to bed, working on graphics and code. Graphics in Photoshop, code in RjTextEd.

Currently adding help screens for each gauge, mostly a graphic task bu there is underlying code to trigger the correct image from the appropriate user interaction.

Image
Fig. 7 Help image for the anemometer.

Image
Fig. 8 Help image for the barometer.

These 'extras' are essential for making an application usable. The gauges themselves are not full programs but just desktop 'apps' that do one or two tasks. That functionality does not quite justify a full help document for each app so a help image will suffice. Callable from the right click menu or from a click on the correct screw/pin.

Day 7.

Created two new help screens for the thermometer and humidity gauges, enabled resizing for the clipboard and added configuration options to allow the clipboard text font to be configured to a chosen font. I won't add any new images for the moment as they are just help screens as per the above.

Day 8 and 9.

Option added to allow gauges to be resized using scrollwheel with/without CTRL. Added text areas for Macintosh os/x instead of text fields as Mac prefers text areas. Fixed a few minor bugs and tested. Not much to show. Will add images of new faces soon.

Image
Fig. 9 Help image for the thermometer.

Image
Fig. 10 Help image for the humidity gauge.

Using ScreentoGif recorder I've captured the gauges on my desktop. Not much occurs, the gauges simply obtain the weather from the weather feed and display the various values using the pointers. The gauges can be resized to the smallest size or to take up as much of the screen as you want. The tooltip gives you the text version of the weather, just hovering over any widget shows the text format. Clicking on a help lug pops up a context-sensitive help image.

Some of the clarity is reduced during the recording process but it gives you an idea. Not yet shown is the clipboard, the right click menus and the location selector. Soon to come.

Image
Fig. 11 The gauges on my desktop. Right click and view to see in full size.

Not made any changes in a while, you can get a little over-gauged when working only on the one program, so I have paused on development for a short period. Today however have made some progress:

1. The barometer storm lamp is now lit when it detects a barometric pressure drop of 1 millibar per hour or more.

2. Each gauge now repositions itself back on screen if any gauge is accidentally moved off screen for any reason.

3. Tested the translations - The whole program can be automatically translated into any other language using a user-supplied language file. I have supplied one localisation - Romanian, that is 90% complete. Translations supplied by Google translate. Then choice of alternative language is eclectic I know.

4. Implemented the pressure memory indicator, the indicating object now retains the last pressure setting allowing the user to see how much the pressure has dropped over a period of time. When clicked upon it rotates to the current pressure reading ready to start again.

5. Also implemented the code that places the gauges in specific positions when a monitor is in landscape or portrait modes. This is not very important for most window users but for those that have windows tablets that can be rotated automatically according to how users hold the device, the positioning of the gauges can be manually configured so that they position correctly in each mode. I originally wrote this code when there was a chance that Windows tablets might actually take off...

6. Added a small clock object that displays the time of the last poll for weather data. Just placed it on the clipboard for now with no visible means of restraint. I may add a cord to bind it to the clipboard.

Image
Fig. 12 New polling time clock on the clipboard. Right click and view to see in full size.

I know I have slowed down - that's just reflects reality. However, I have created the new screen for taking locations or icao codes to determine the forecast area.

Image
Fig. 13 The ICAO input window started out like this - Right click and view to see in full size.

Image
Fig. 14 New ICAO input window current look and feel - Right click and view to see in full size.

The differences may look small but they take all the time: new cables; rust layers and holes; grab handles; cables; exit and entry points; refractions on the glass; new tape layer; buttons have been remodelled; new indicating lamps; screws resized; new dymo tape shading and generally ageing.

Still unfinished, unhappy with the punched holes in the paper recording tape. The big buttons still displease me but we need something big for people to push...

This of course all done with Photoshop and not RjTextEd but there is code behind all this and I am working on that simultaneously... As a button receives a press the event needs to be captured, an alternative button press image needs to be shown, then the logic for handling a weather location (city search) or an ICAO code (check code is valid and poll) then an XML request is sent and the resulting DOM tree is parsed and the relevant data is extracted. The data is then formatted and passed to the gauges.

Not able to find time to do much to complete these weather gauges, life is busy at the moment. I have done little more than fix one bug per day but progress is steady if a little slow.

I have created a help page for the clipboard, shown here:
Image
Fig. 15 New help page

In addition I have added support for the storm warning lamp. If the pressure drops by 1 millibar and is also a recent reading then it will light the lamp red. A storm system's pressure typically falls at a rate of more than 1 hectopascals/millibars per hour. If the air pressure falls 24 mb (or more) in 24 hours, the system is called a bomb cyclone. The code accounts for an hourly drop of 1mb by storing a previous pressure value, compares the system time by translating the unix system time to seconds and doing a simple comparison to a stored value of the last poll time. This also caters for the computer waking up from a sleep or a restart where the last poll time will be old and out-of-date.

Image

I find handling unix system times in seconds to be a little bit of a pain but I suppose it makes sense doing it that way in javascript.

As well as the above I have added a new menu item to get the icao code download from there too.

The temperature gauge has been modified to show temperatures as low as -30 degrees centigrade and now shows the equivalent temperatures in fahrenheit too.

Image

Recent changes include:

o percentage placement according to landscape orientation
o test the placement in portrait mode using ctrl+alt+cursor keys
o photoshop new temperature face -30 to +50 (as above)
o fahrenheit temperature percentage calculation for fahrenheit face especially the black window reading
o each individual gauge receives focus as the mouse enters enabling the pop-up weather box to function on all gauges
o added useful comments on polling to busy counter

Image
Fig. 18 New Pressure gauge measuring in inches of mercury.

The gauges are working now, despite missing one final gauge, the weather icon gauge that I am working on at this moment.

Image
Fig. 19 New Weather Icon gauge showing the current weather.

This is the only download location at the moment (limited beta release).
https://www.deviantart.com/yereverluvin ... -753277633

21st July 2018 - No new major visual changes.
Image
Fig. 20 Weather gauge configuration screen also showing shadowed weather icons

Recent changes include:
// photoshop new pressure face = inches of mercury
// photoshop new pressure face = hPa (hectoPascals)
// add a clunk when changing faces
// fixed a variable declaration bug in checkIcaoFile
// gave shadows to all daylight weather icons
// fixed poll return count so that when the airport provides no METAR data, is handled gracefully, it also quashes an error.
// some new preference/configuration options

I have used RJTextEd to create these gauges from beginning to end. I think the only way to evaluate a product is to use it in anger for a period of time. RJTextEd is getting better and better all the time and my bug reports/feature requests could not be made without getting to know the product in detail.

In the old days I would use VB6 as a forms designer and the code editor to give the logic. The interpreter and debugger to check my code and the in-built compiler to create an executable. These days I use Photoshop as my forms designer, each object in a layer. Some javascript converts the design to an XML object description and individual graphical PNGs. I use RJTextEd as the code editor to craft the javascript that provides the logic. The XML, the logic and the PNGs are picked up by the runtime engine to interpret and pull together the running gauges, it also provides a debugger. There is no compiler, no executables, everything is interpreted, everything is open.
Last edited by yereverluvinuncleber on 15 Oct 2018 08:34, edited 6 times in total.
Noli pati a scelestis opprimi...

You can find me on Deviantart https://www.deviantart.com/yereverluvinuncleber/gallery/

User avatar
yereverluvinuncleber
Posts: 255
Joined: 20 Apr 2018 09:49

Re: Creations built using RJtextEd

Post by yereverluvinuncleber » 13 Aug 2018 19:52

I am busy finishing the Panzer Weather Widget set of gauges and whilst I have been busy it always appeals to me to work on something else, just to keep the brain from being bored.

Started out like this:
Image
Fig 1. Initial image cut with the basic idea in mind but done some time ago.

Then this:
Image
Fig 2. Some changes to make it suit the current code.

Image
Fig 3. An Interim image, with most of the buttons and locations in place.

it has ended up like this:
Image
Fig 4. Finalised image, reduced screen - looking more 'real'

This was initially just a first cut of an image for which I have some code already developed and ready to go. It has been amended to fit my new skeumorphic Steampunk design but that has been carried out by good friend Harry Whitfield. I had intended to adapt the code myself but Harry has been knocking the code together as I bash together the images.

Image
Fig 4. Help for the new startup manager. Right click and view image to see in detail.

Sometimes creating the help page for a program/app in advance of the code helps you determine what it will actually do. I think it is often a better method than creating a requirements document. Initially it was some sort of program manager but now it is a tool to manage the delayed startup of widget-based apps.

The design is now 95% done. 90% of the code exists already. With the design process over then comes the coding with RJTe. Even with Harry cutting the fundamental code I will soon take a copy of his code and start inserting menus and giving the widget the 'life' (animation, sounds &c) that it needs to become a truly skeumorphic creation. That is achieved with a combination of sounds, graphics and code.

The new widget app is a manager for widgets that delays their startup for a discrete period of time and then initialises each widget on a delayed timer. It also allows you to close all the widgets and restart them at any time, a useful function in low memory conditions. This particular program is more useful for low power systems (core2duo/Atom &c) that can encounter refresh issues when redrawing the background. Each of these widgets is a separate program and each is responsible for redrawing its own background. When the CPU is overloaded, a bug in the engine (or in Windows) occasionally and rarely causes a failure to redraw, leaving a small white background. Starting the widgets one after the other in turn reduces CPU overhead reduces the possibility of this occurring. That was the concept behind the widget but it now does a lot more.

Image
Fig 5. This is the startup manager operating on my desktop at this moment for testing/debugging

The startup manager exists in two forms, maximised shows the control button base and the screen above, minimised shows just the control button base.

Image
Fig 6. This is the startup manager in minimised form.

Update - 28th October 2018

This widget is the one I am currently implementing using RJTed. The original widget was largely coded by Harry Whitfield, my coding collaborator. I knocked up the imagery and the skeleton code and then Harry implemented a working but rough bit of functionality.

I am currently adding menus, animations, testing to resolve bugs and crashes, adding trial functionality and deciding whether to add some new functionality with regard to killing various processes and saving current program states. Once this is done I will have version 1.0. From that point I will determine if I make some fundamental changes so that the startup manager can handle/manage more than the current 25 desktop widgets. I also have further graphical changes in the pipeline.
Last edited by yereverluvinuncleber on 28 Oct 2018 16:47, edited 23 times in total.
Noli pati a scelestis opprimi...

You can find me on Deviantart https://www.deviantart.com/yereverluvinuncleber/gallery/

User avatar
yereverluvinuncleber
Posts: 255
Joined: 20 Apr 2018 09:49

Re: Creations built using RJtextEd

Post by yereverluvinuncleber » 13 Aug 2018 21:01

on the weather gauges...

// implemented new face for mm/Hg
// added green/red lamp functionality showing validity of the feed
// barometer history pointer initial rotation set on restart
// added barometer face selection on restart
// gave shadows to all nighttime weather icons
// add improved moon images to the nighttime icons
// replaced the wind icons with a coloured wind sock
// some new preference/configuration options
// time to next poll indicator now rotates
// time to next poll indicator tooltip

// after a sleep it ought to try to poll
// after a sleep the error message should be suppressed
// the error message should only appear after 'n' defined attempts at polling

Image

Update 28th October 2018

// Modified to run under os/x
// added development tab in prefs
// added edit field in prefs
// added edit command to the menu
Last edited by yereverluvinuncleber on 28 Oct 2018 18:11, edited 1 time in total.
Noli pati a scelestis opprimi...

You can find me on Deviantart https://www.deviantart.com/yereverluvinuncleber/gallery/

User avatar
yereverluvinuncleber
Posts: 255
Joined: 20 Apr 2018 09:49

Re: Creations built using RJtextEd

Post by yereverluvinuncleber » 02 Sep 2018 16:31

// anemometer face for wind speed in m/sec

Image
Noli pati a scelestis opprimi...

You can find me on Deviantart https://www.deviantart.com/yereverluvinuncleber/gallery/

User avatar
yereverluvinuncleber
Posts: 255
Joined: 20 Apr 2018 09:49

Re: Creations built using RJtextEd

Post by yereverluvinuncleber » 03 Sep 2018 09:52

Added a face able to show temperatures in Kelvin as well as Fahrenheit and Celsius.
Image
Noli pati a scelestis opprimi...

You can find me on Deviantart https://www.deviantart.com/yereverluvinuncleber/gallery/

Post Reply