Improving the Thunkable x IDE

[actech]

Unfortunately, many things in Thunkable IDE are inconvenient to work with and we can’t fix them, but some things can be fixed if you change the style of elements.

For example, in block editing mode, I am constantly annoyed that tabs with screen names need to be constantly scrolled and it is impossible to search for them. What to do? You need to expand the area of tabs with screen names. For this:

1. in the browser, press F12 to display the toolbar
2. Select the tab that displays the HTML code of the page
3. in the search field, enter the line “ant-tabs ant-tabs-top ant-tabs-line”
4. in the style window of the found element, disable the max-width:600px property - all screen names will be displayed in the row. But when you switch to design mode, the working field becomes huge. To reduce it, look for an element with the “preview-container” class and set its width, for example, 800px

When you restart, the styles will return to the default and you will have to change them again - which is the main drawback of this method.

Similarly, you can change the dimensions and parameters of other elements.

The screen names are too wide, so search for the name of any screen and disable the padding property for the found element, and margin:4px:

[kartik14]

Incredible, @actech!

If you have any ideas about how to prevent the lag when there are a lot of blocks, it would be very helpful.
This lag also appears when you want an App/Stored/Cloud Variable - but, since you suggested me earlier to use function parameters as variables, it works great

Thanks a lot!

[actech]

Using the Stylish plugin, I managed to significantly improve the interface. Unfortunately, I was not able to make another important improvement - move all the components from the Advanced tab to the Simple tab. Unfortunately, the script is used here, not the styles, which does not allow this transfer.

Now my interface looks like this (the script is given below and you can configure it on your own).

Script for Stylish brouser plugin (ver 1.02)
StylishForThunkableXscript.txt (3.6 KB)

var 1.02 - improved interface My Projects, Design, Blocks interface (for display 1600*900px)
ver 1.01 - add correct size for phone-preview

For the script to work, you need to enable the option in the settings Firefox (for version 61 and later):

1. Enter about:config to address bar
2. Find layout.css.moz-document.content.enabled and set to true

[domhnallohanlon]

Hi @actech - thank you for sharing this feedback with us, it’s really helpful and also very well timed.

many things in Thunkable IDE are inconvenient to work with and we can’t fix them

As you’ve no doubt noticed, the default properties for a number of components were updated last week. This is the first part of a bigger (and more time consuming!) effort we’ve started to improve the UI/UX of Thunkable X.

I am constantly annoyed that tabs with screen names need to be constantly scrolled and it is impossible to search for them.

I completely understand where you are coming from, and given how complex your projects are in particular I get why this must be frustrating.

I think the main reason we haven’t heard this feedback before is that for the vast majority of our users, their projects only tend to have 4 or 5 screens. When users have too many screens it’s generally because they should be creating dynamic apps, but are just duplicating screens/layout instead.

I know that you group lots of (very helpful!) examples in one project, so it must get frustrating when you want to share a particular example with someone.

I don’t see any fix for this in the short term, by in the meantime, perhaps a spreadsheet, or a page on your website could be set up for each screen/example. Even better would be to have a short #thunkable-cross-tutorials page, (with remix link) for the most popular ones, and these could then be shared in the community?

Similarly, you can change the dimensions and parameters of other elements.

This is a really interesting work around - thanks for sharing!

[actech]

Hi, Domhnall,

Thank you for your appreciation of my work!

I was surprised why this idea of improving the interface came only now. Stylish is a great tool that I can now use to work in a user-friendly interface.

Each user has different monitors and display options, so I gave an example for a 20-inch monitor with a resolution of 1600*900. If someone is willing to post settings for other monitors and parameters, it will be great. Then users can choose a more appropriate configuration for them.

If someone doesn’t fully understand this idea, then it sounds like this: with the help of Stylish, you can create your own styles (or even more than one) for any site and save them. After that, when loading this site, the styles are automatically loaded and you do not need to re-configure anything. Stylish can be quickly enabled and disabled.

[jared]

@actech

then it sounds like this: with the help of Stylish, you can create your own styles (or even more than one) for any site and save them. After that, when loading this site, the styles are automatically loaded and you do not need to re-configure anything. Stylish can be

With stylish, @actech, you suggest that we could then develop for an ipad screen or for a screen of any dimensions because we can manipulate the size of the design screen. Is that correct or have I misread your previous posts?

[kartik14]

@jared It would be very helpful, if it’s possible

Nice Idea!

[jared]

I found how to manipulate these settings in chrome. I can change the pixel size of the designer. I wonder if the translates into a truest bigger screen layout or just a stretched layout

[actech]

Yes, you can use this plugin to change the size of the workspace so that it better matches the device resolution.

[actech]

Browser plug-ins that allow you to use Javascript for this purpose give you even more opportunities to configure the interface. One of these plugins is Greasemonkey.

As an example, here is a script for switching the Design and Block modes using the Alt+Q and Alt+W hotkeys.

// ==UserScript==
// @name     Thunkable
// @version  1
// @grant    none
// ==/UserScript==
//@include https://x.thunkable.com/projects/

function findControl(name){
  
  let _tabList = document.querySelectorAll('.tab');
  
  for (let i of _tabList){
    
    if ( i.innerHTML == name){
      return i;
    }
  }
  return null;
}

  document.addEventListener('keydown', function(event) {
    
    if (event.altKey || event.metaKey) {
      
      if (event.code == 'KeyW'){
        
        let _el = findControl('Blocks');
    		
        if (_el){
          _el.click();
        }
        
      } else if (event.code == 'KeyQ'){

        let _el = findControl('Design');
    		
        if (_el){
          _el.click();
        }
      } 
      
    }
  });

[actech]

I managed to place the screens conveniently in a vertical scrolling list. Who thinks this is more convenient than the current screen navigation?